Progetto di gruppo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DigitalComponents — Computer Hardware Guide</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@400;500&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg: #07090f;
  --bg2: #0d1117;
  --card: rgba(13,17,23,0.95);
  --accent: #00e5ff;
  --accent2: #7c3aed;
  --accent3: #f43f5e;
  --text: #e2e8f0;
  --muted: #64748b;
  --border: rgba(255,255,255,0.07);
  --glow: rgba(0,229,255,0.18);
  font-size: 16px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.7;
}

body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:0.4;
}

#bg-canvas {
  position:fixed; top:0; left:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}

.container { max-width:1160px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }

/* ===== HEADER ===== */
header {
  background: rgba(7,9,15,0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding:14px 0;
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom: 1px solid var(--border);
}

.header-content {
  display:flex; justify-content:space-between; align-items:center;
}

.logo {
  font-family:'Syne',sans-serif;
  font-weight:800; font-size:20px;
  color: var(--accent);
  letter-spacing:1px;
  display:flex; align-items:center; gap:10px;
  text-shadow: 0 0 20px var(--glow);
  text-decoration: none;
  cursor: pointer;
}

.logo-icon {
  width:34px; height:34px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  box-shadow: 0 0 16px var(--glow);
}

.header-nav {
  display:flex; gap:4px; align-items:center;
}

.header-nav a {
  color: var(--muted);
  text-decoration:none;
  padding:7px 12px;
  border-radius:50px;
  transition: all 0.25s;
  font-weight:500; font-size:12px;
  cursor: pointer;
}

.header-nav a:hover, .header-nav a.active {
  color: var(--accent);
  background: rgba(0,229,255,0.08);
}

.nav-quiz-btn {
  background: linear-gradient(135deg, var(--accent2), #a855f7) !important;
  color:#fff !important;
  padding: 7px 14px !important;
  font-weight:600 !important;
  box-shadow: 0 4px 16px rgba(124,58,237,0.35);
}
.nav-quiz-btn:hover { transform:translateY(-1px); box-shadow: 0 6px 20px rgba(124,58,237,0.5) !important; }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:6px; border-radius:8px;
  background:transparent; border:none;
}
.hamburger span {
  display:block; width:22px; height:2px;
  background:var(--muted); border-radius:2px; transition: all 0.3s;
}
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mobile-nav {
  display:none; flex-direction:column; gap:4px;
  padding:12px 24px;
  background: rgba(7,9,15,0.98);
  border-bottom:1px solid var(--border);
  position:fixed; top:62px; left:0; right:0; z-index:99;
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
  color:var(--muted); text-decoration:none;
  padding:10px 14px; border-radius:10px;
  font-weight:500; font-size:14px; transition: all 0.25s;
  cursor: pointer;
}
.mobile-nav a:hover { color:var(--accent); background: rgba(0,229,255,0.07); }

/* ===== HOME SECTION ===== */
.page-section {
  display: none;
  min-height: 100vh;
  padding-top: 80px;
}

.page-section.active {
  display: block;
}

/* ===== HOME HERO ===== */
.home-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  position: relative;
  z-index: 2;
}

.home-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(0,229,255,0.06);
  border:1px solid rgba(0,229,255,0.2);
  color:var(--accent);
  padding:6px 18px; border-radius:50px;
  font-size:11px; font-weight:600;
  font-family:'DM Mono',monospace;
  letter-spacing:2px; text-transform:uppercase;
  margin-bottom:32px;
  animation: fadeDown 0.8s ease both;
}

.home-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  animation: pulse 2s infinite;
}

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.6)} }

.home-hero h1 {
  font-family:'Syne',sans-serif;
  font-size: clamp(48px, 8vw, 100px);
  font-weight:800;
  line-height:1.0;
  letter-spacing:-4px;
  margin-bottom:24px;
  animation: fadeUp 0.9s ease 0.2s both;
}

.home-hero h1 .line1 {
  display:block;
  background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.home-hero h1 .line2 {
  display:block;
  background: linear-gradient(135deg, var(--accent) 0%, #7c3aed 60%, #f43f5e 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.home-sub {
  font-size:20px; color:var(--muted);
  max-width:600px; margin:0 auto 60px;
  animation: fadeUp 0.9s ease 0.35s both;
}

/* ===== NAVIGATION BUTTONS ===== */
.nav-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  width: 100%;
  animation: fadeUp 0.9s ease 0.5s both;
}

.nav-btn {
  background: var(--card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.nav-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 0 4px 4px;
  transition: all 0.35s;
}

.nav-btn:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}

.nav-btn-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: all 0.35s;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
}

.nav-btn-title {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  transition: all 0.25s;
}

.nav-btn-desc {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* Button Colors */
.nav-btn.cyan { --btn-color: #00e5ff; }
.nav-btn.blue { --btn-color: #60a5fa; }
.nav-btn.violet { --btn-color: #a78bfa; }
.nav-btn.rose { --btn-color: #fb7185; }
.nav-btn.emerald { --btn-color: #34d399; }
.nav-btn.amber { --btn-color: #fbbf24; }
.nav-btn.purple { --btn-color: #a855f7; }

.nav-btn::before { background: linear-gradient(90deg, var(--btn-color), transparent); }
.nav-btn:hover { border-color: var(--btn-color); }
.nav-btn:hover .nav-btn-title { color: var(--btn-color); }
.nav-btn:hover .nav-btn-icon { 
  background: rgba(255,255,255,0.1); 
  border-color: var(--btn-color);
  box-shadow: 0 0 30px rgba(255,255,255,0.1);
  transform: scale(1.1);
}

/* Stats */
.home-stats {
  display:flex; justify-content:center; gap:0;
  border:1px solid var(--border); border-radius:20px;
  overflow:hidden; margin-top: 60px;
  animation: fadeUp 0.9s ease 0.65s both;
}

.stat {
  padding:20px 40px; text-align:center;
  border-right:1px solid var(--border);
}
.stat:last-child { border-right:none; }

.stat-num {
  display:block;
  font-family:'DM Mono',monospace;
  font-size:28px; font-weight:500;
  color:var(--accent);
  text-shadow:0 0 20px var(--glow);
}

.stat-label {
  font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.5px;
}

/* ===== CONTENT PAGE ===== */
.content-page {
  min-height: 100vh;
  padding: 100px 24px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
  margin-bottom: 40px;
}

.back-btn:hover {
  color: var(--accent);
  border-color: rgba(0,229,255,0.3);
  background: rgba(0,229,255,0.05);
}

.content-card {
  background: var(--card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 52px;
  max-width: 1000px;
  width: 100%;
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.5s ease both;
}

.content-card::before {
  content: '';
  position: absolute;
  top: 0; left: 52px;
  height: 3px; width: 100px;
  border-radius: 0 0 4px 4px;
}

.content-card.cyan::before { background: linear-gradient(90deg, #00e5ff, transparent); }
.content-card.blue::before { background: linear-gradient(90deg, #60a5fa, transparent); }
.content-card.violet::before { background: linear-gradient(90deg, #a78bfa, transparent); }
.content-card.rose::before { background: linear-gradient(90deg, #fb7185, transparent); }
.content-card.emerald::before { background: linear-gradient(90deg, #34d399, transparent); }
.content-card.amber::before { background: linear-gradient(90deg, #fbbf24, transparent); }

.content-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.content-badge {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}

.content-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
}

.content-chip.cyan { background: rgba(0,229,255,0.1); color: #00e5ff; border: 1px solid rgba(0,229,255,0.2); }
.content-chip.blue { background: rgba(96,165,250,0.1); color: #60a5fa; border: 1px solid rgba(96,165,250,0.2); }
.content-chip.violet { background: rgba(167,139,250,0.1); color: #a78bfa; border: 1px solid rgba(167,139,250,0.2); }
.content-chip.rose { background: rgba(251,113,133,0.1); color: #fb7185; border: 1px solid rgba(251,113,133,0.2); }
.content-chip.emerald { background: rgba(52,211,153,0.1); color: #34d399; border: 1px solid rgba(52,211,153,0.2); }
.content-chip.amber { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }

.content-card h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 24px;
}

.content-card h2.cyan { color: #00e5ff; }
.content-card h2.blue { color: #60a5fa; }
.content-card h2.violet { color: #a78bfa; }
.content-card h2.rose { color: #fb7185; }
.content-card h2.emerald { color: #34d399; }
.content-card h2.amber { color: #fbbf24; }

.content-body {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.content-text {
  flex: 1;
}

.content-text p {
  color: #94a3b8;
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 24px;
}

.key-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.fact-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all 0.2s;
}

.fact-pill:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.15);
}

.content-image {
  flex: 0 0 360px;
}

.img-wrapper {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.img-wrapper img {
  width: 100%;
  display: block;
}

.img-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.img-caption-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.img-caption-text {
  font-size: 12px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
}

/* ===== QUIZ ===== */
.quiz-container {
  max-width: 800px;
  width: 100%;
}

.quiz-card {
  background: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(0,229,255,0.04) 100%);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 28px;
  padding: 52px;
  position: relative;
  overflow: hidden;
}

.quiz-card::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.quiz-header {
  text-align: center;
  margin-bottom: 40px;
}

.quiz-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.3);
  color: #a78bfa;
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
  margin-bottom: 16px;
}

.quiz-header h2 {
  font-family: 'Syne', sans-serif;
  color: #fff;
  letter-spacing: -1px;
  font-size: 32px;
}

.quiz-header p {
  color: var(--muted);
  font-size: 15px;
  margin-top: 8px;
}

.quiz-progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.quiz-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}

.quiz-q-count {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.quiz-question-text {
  font-family: 'Syne', sans-serif;
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 28px;
  line-height: 1.3;
  text-align: center;
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}

.quiz-option {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.25s;
  font-size: 14px;
  color: var(--text);
}

.quiz-option:hover {
  border-color: rgba(124,58,237,0.5);
  background: rgba(124,58,237,0.07);
  transform: translateY(-2px);
}

.quiz-option.correct {
  border-color: #34d399 !important;
  background: rgba(52,211,153,0.1) !important;
  color: #34d399;
  pointer-events: none;
}

.quiz-option.wrong {
  border-color: #fb7185 !important;
  background: rgba(251,113,133,0.08) !important;
  color: #fb7185;
  pointer-events: none;
}

.quiz-option.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.option-letter {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.25s;
}

.quiz-option:hover .option-letter {
  background: rgba(124,58,237,0.2);
  color: #a78bfa;
}

.quiz-option.correct .option-letter {
  background: rgba(52,211,153,0.2);
  color: #34d399;
}

.quiz-option.wrong .option-letter {
  background: rgba(251,113,133,0.15);
  color: #fb7185;
}

.quiz-feedback {
  text-align: center;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s ease;
}

.quiz-feedback.show {
  opacity: 1;
  transform: translateY(0);
}

.quiz-feedback.correct-fb {
  background: rgba(52,211,153,0.1);
  border: 1px solid rgba(52,211,153,0.25);
  color: #34d399;
}

.quiz-feedback.wrong-fb {
  background: rgba(251,113,133,0.08);
  border: 1px solid rgba(251,113,133,0.2);
  color: #fb7185;
}

.quiz-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.quiz-btn {
  padding: 11px 28px;
  border-radius: 50px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quiz-btn-next {
  background: linear-gradient(135deg, var(--accent2), #a855f7);
  color: #fff;
  box-shadow: 0 6px 20px rgba(124,58,237,0.35);
}

.quiz-btn-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(124,58,237,0.5);
}

.quiz-btn-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.quiz-btn-restart {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--border);
}

.quiz-btn-restart:hover {
  border-color: rgba(255,255,255,0.2);
}

.quiz-result {
  text-align: center;
  padding: 20px 0;
  display: none;
}

.quiz-result.show {
  display: block;
}

.result-score {
  font-family: 'DM Mono', monospace;
  font-size: 72px;
  font-weight: 500;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
}

.result-label {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.result-msg {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 28px;
}

/* ===== FOOTER ===== */
footer {
  border-top: 1px solid var(--border);
  padding: 48px 24px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.footer-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--accent);
  margin-bottom: 8px;
}

.footer-sub {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 24px;
}

.footer-authors {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.author-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 50px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}

.footer-copy {
  font-size: 12px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
  .header-nav { display: none; }
  .hamburger { display: flex; }
  .content-body { flex-direction: column; }
  .content-image { flex: none; width: 100%; }
}

@media (max-width: 900px) {
  .nav-buttons { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .home-stats { flex-direction: column; width: 100%; }
  .stat { border-right: none; border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: none; }
  .quiz-options { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .nav-buttons { grid-template-columns: 1fr; }
  .content-card { padding: 32px 24px; }
  .quiz-card { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .home-hero h1 { letter-spacing: -2px; }
  .footer-authors { flex-direction: column; align-items: center; }
}
</style>
</head>
<body>

<canvas id="bg-canvas"></canvas>


<header>
  <div class="container">
    <div class="header-content">
      <div class="logo" onclick="showPage('home')">
        <div class="logo-icon">💻</div>
        DigitalComponents
      </div>

      <nav class="header-nav">
        <a onclick="showPage('home')">Home</a>
        <a onclick="showPage('motherboard')">Motherboard</a>
        <a onclick="showPage('cpu')">CPU</a>
        <a onclick="showPage('memory-cells')">Memory Cells</a>
        <a onclick="showPage('bits')">Bits & Codes</a>
        <a onclick="showPage('ram')">RAM</a>
        <a onclick="showPage('storage')">Storage</a>
        <a onclick="showPage('quiz')" class="nav-quiz-btn">🧠 Quiz</a>
      </nav>

      <button class="hamburger" id="hamburger" aria-label="Menu">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>

  <div class="mobile-nav" id="mobile-nav">
    <a onclick="showPage('home'); closeMobileNav()">🏠 Home</a>
    <a onclick="showPage('motherboard'); closeMobileNav()">🔌 Motherboard</a>
    <a onclick="showPage('cpu'); closeMobileNav()">🧠 CPU</a>
    <a onclick="showPage('memory-cells'); closeMobileNav()">🗂️ Memory Cells</a>
    <a onclick="showPage('bits'); closeMobileNav()">⚡ Bits & Codes</a>
    <a onclick="showPage('ram'); closeMobileNav()">💾 RAM</a>
    <a onclick="showPage('storage'); closeMobileNav()">🖴 Storage</a>
    <a onclick="showPage('quiz'); closeMobileNav()" style="color:#a78bfa;font-weight:700;">🧠 Quiz</a>
  </div>
</header>


<section class="page-section active" id="page-home">
  <div class="home-hero">
    <div class="home-eyebrow">
      <div class="home-dot"></div>
      DigitalComponents Learning Platform
    </div>

    <h1>
      <span class="line1">Computer</span>
      <span class="line2">Hardware Guide</span>
    </h1>

    <p class="home-sub">Explore the fundamental components that power modern computing. Choose a topic to get started.</p>

    <div class="nav-buttons">
      <div class="nav-btn cyan" onclick="showPage('motherboard')">
        <div class="nav-btn-icon">🔌</div>
        <div class="nav-btn-title">Motherboard</div>
        <div class="nav-btn-desc">Scheda madre e connessioni</div>
      </div>

      <div class="nav-btn blue" onclick="showPage('cpu')">
        <div class="nav-btn-icon">🧠</div>
        <div class="nav-btn-title">CPU</div>
        <div class="nav-btn-desc">Il cervello del computer</div>
      </div>

      <div class="nav-btn violet" onclick="showPage('memory-cells')">
        <div class="nav-btn-icon">🗂️</div>
        <div class="nav-btn-title">Memory Cells</div>
        <div class="nav-btn-desc">Celle di memoria e indirizzi</div>
      </div>

      <div class="nav-btn rose" onclick="showPage('bits')">
        <div class="nav-btn-icon">⚡</div>
        <div class="nav-btn-title">Bits & Codes</div>
        <div class="nav-btn-desc">Sistema binario e codifica</div>
      </div>

      <div class="nav-btn emerald" onclick="showPage('ram')">
        <div class="nav-btn-icon">💾</div>
        <div class="nav-btn-title">RAM</div>
        <div class="nav-btn-desc">Memoria volatile di lavoro</div>
      </div>

      <div class="nav-btn amber" onclick="showPage('storage')">
        <div class="nav-btn-icon">🖴</div>
        <div class="nav-btn-title">Storage</div>
        <div class="nav-btn-desc">SSD, HDD e archiviazione</div>
      </div>
    </div>

    <div class="nav-btn purple" style="max-width:300px; margin-top:20px;" onclick="showPage('quiz')">
      <div class="nav-btn-icon">🧠</div>
      <div class="nav-btn-title">Quiz</div>
      <div class="nav-btn-desc">Testa le tue conoscenze</div>
    </div>

    <div class="home-stats">
      <div class="stat">
        <span class="stat-num" data-target="6">0</span>
        <span class="stat-label">Components</span>
      </div>
      <div class="stat">
        <span class="stat-num" data-target="1971">0</span>
        <span class="stat-label">First CPU</span>
      </div>
      <div class="stat">
        <span class="stat-num" data-target="8">0</span>
        <span class="stat-label">Bits/Byte</span>
      </div>
    </div>
  </div>
</section>


<section class="page-section" id="page-motherboard">
  <div class="content-page">
    <button class="back-btn" onclick="showPage('home')">← Torna alla Home</button>
    <div class="content-card cyan">
      <div class="content-header">
        <div class="content-badge">01 / 06</div>
        <div class="content-chip cyan">🔌 Core Component</div>
      </div>
      <h2 class="cyan">Motherboard</h2>
      <div class="content-body">
        <div class="content-text">
          <p>The motherboard is an electronic board which constitutes a physical and electrical support for the components of a computer, especially the CPU and memories. Like all electronic boards, the motherboard is a printed circuit board where all the electronic components are soldered.</p>
          <p>The bus — the set of links that allows the CPU, memory and peripherals to communicate — is one of the fundamental components and is made with copper tracks inside the motherboard. Modern motherboards integrate all the electronics needed to create a complete computer: video card, USB ports, keyboard and mouse connections, and even network interface.</p>
          <div class="key-facts">
            <span class="fact-pill">🔗 PCIe Slots</span>
            <span class="fact-pill">🔊 Audio Controller</span>
            <span class="fact-pill">📶 Network Card</span>
            <span class="fact-pill">⚡ Power Delivery</span>
          </div>
        </div>
        <div class="content-image">
          <div class="img-wrapper">
            <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&q=80" alt="Motherboard">
          </div>
          <div class="img-caption">
            <div class="img-caption-dot" style="background:#00e5ff;box-shadow:0 0 8px #00e5ff"></div>
            <span class="img-caption-text">ATX Motherboard — Primary system board</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="page-section" id="page-cpu">
  <div class="content-page">
    <button class="back-btn" onclick="showPage('home')">← Torna alla Home</button>
    <div class="content-card blue">
      <div class="content-header">
        <div class="content-badge">02 / 06</div>
        <div class="content-chip blue">🧠 Processing Unit</div>
      </div>
      <h2 class="blue">CPU (Processor)</h2>
      <div class="content-body">
        <div class="content-text">
          <p>CPU is the abbreviation of Central Processing Unit and is the computer component that carries out the instructions contained in a program. If we compare a computer to a human being, the CPU is definitely the brain.</p>
          <p>The main components of a CPU are the Arithmetic and Logic Unit (ALU), which is the processing component where logic and arithmetic operations are executed, and the Control Unit (CU), whose task is to coordinate all the actions for processing instructions. With the introduction of transistors and integrated circuits, the CPU has gradually reduced in size — from occupying an entire room to a single chip, known as a microprocessor.</p>
          <div class="key-facts">
            <span class="fact-pill">⚙️ ALU</span>
            <span class="fact-pill">🎛️ Control Unit</span>
            <span class="fact-pill">📐 Microprocessor</span>
            <span class="fact-pill">🔢 Transistors</span>
          </div>
        </div>
        <div class="content-image">
          <div class="img-wrapper">
            <img src="https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?w=600&q=80" alt="CPU">
          </div>
          <div class="img-caption">
            <div class="img-caption-dot" style="background:#60a5fa;box-shadow:0 0 8px #60a5fa"></div>
            <span class="img-caption-text">Modern CPU — Billions of transistors</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="page-section" id="page-memory-cells">
  <div class="content-page">
    <button class="back-btn" onclick="showPage('home')">← Torna alla Home</button>
    <div class="content-card violet">
      <div class="content-header">
        <div class="content-badge">03 / 06</div>
        <div class="content-chip violet">🗂️ Data Architecture</div>
      </div>
      <h2 class="violet">Memory Cells</h2>
      <div class="content-body">
        <div class="content-text">
          <p>From a logical point of view, memory can be thought of as a set of cells where every cell contains one byte — equivalent to one alphanumeric character. Each cell is identified by a progressive number called an 'address', which unambiguously identifies that cell.</p>
          <p>The CPU can select any single cell to read or modify its contents. The term Random Access refers to how the CPU reaches various memory cells via their address, rather than sequentially like memory tapes. The 'random' term can be misleading — there is nothing random in the mechanisms of memory management, as every access is direct and deliberate.</p>
          <div class="key-facts">
            <span class="fact-pill">📍 Cell Address</span>
            <span class="fact-pill">1️⃣ Byte = 8 Bits</span>
            <span class="fact-pill">🎯 Random Access</span>
            <span class="fact-pill">🔎 Direct Addressing</span>
          </div>
        </div>
        <div class="content-image">
          <div class="img-wrapper">
            <img src="https://images.unsplash.com/photo-1597872200969-2b65d56bd16b?w=600&q=80" alt="Memory Cells">
          </div>
          <div class="img-caption">
            <div class="img-caption-dot" style="background:#a78bfa;box-shadow:0 0 8px #a78bfa"></div>
            <span class="img-caption-text">Memory architecture — Address space</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="page-section" id="page-bits">
  <div class="content-page">
    <button class="back-btn" onclick="showPage('home')">← Torna alla Home</button>
    <div class="content-card rose">
      <div class="content-header">
        <div class="content-badge">04 / 06</div>
        <div class="content-chip rose">⚡ Binary Systems</div>
      </div>
      <h2 class="rose">Bits and Codes</h2>
      <div class="content-body">
        <div class="content-text">
          <p>A byte is the unit of data storage capacity for memory, corresponding to the space needed to store one alphanumeric character. Despite its small size, the byte is not the smallest unit — the bit is.</p>
          <p>The word 'bit' comes from binary digit, a number that can assume only two values: 0 and 1. These values can represent true/false, yes/no, or on/off states. It is possible to encode any number or generic information using a set of bits in a binary system. A byte is a string of 8 bits, since we need exactly 8 bits to represent any of the standard alphanumeric keyboard characters defined in the ASCII encoding standard.</p>
          <div class="key-facts">
            <span class="fact-pill">0️⃣ Binary 0</span>
            <span class="fact-pill">1️⃣ Binary 1</span>
            <span class="fact-pill">🔤 ASCII Encoding</span>
            <span class="fact-pill">📦 8 Bits = 1 Byte</span>
          </div>
        </div>
        <div class="content-image">
          <div class="img-wrapper">
            <img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=600&q=80" alt="Binary Code">
          </div>
          <div class="img-caption">
            <div class="img-caption-dot" style="background:#fb7185;box-shadow:0 0 8px #fb7185"></div>
            <span class="img-caption-text">Binary code — The language of computers</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="page-section" id="page-ram">
  <div class="content-page">
    <button class="back-btn" onclick="showPage('home')">← Torna alla Home</button>
    <div class="content-card emerald">
      <div class="content-header">
        <div class="content-badge">05 / 06</div>
        <div class="content-chip emerald">💾 Working Memory</div>
      </div>
      <h2 class="emerald">RAM Memory</h2>
      <div class="content-body">
        <div class="content-text">
          <p>One of the fundamental components of computer architecture is working memory, which holds data and instructions required for CPU processing and stores computation results. This is better known as RAM — Random Access Memory — available as integrated circuits.</p>
          <p>The main features of RAM are storage capacity and access time: capacity is the amount of data that can be stored, while access time is the read/write speed. RAM can only keep its contents when the power is on. As soon as the computer is switched off, data is lost unless a copy has been saved on the hard disk — this is why RAM is described as volatile memory.</p>
          <div class="key-facts">
            <span class="fact-pill">⚡ Volatile Memory</span>
            <span class="fact-pill">🏎️ Fast Access</span>
            <span class="fact-pill">🔢 DDR5 Standard</span>
            <span class="fact-pill">📊 Capacity & Speed</span>
          </div>
        </div>
        <div class="content-image">
          <div class="img-wrapper">
            <img src="https://images.unsplash.com/photo-1562976540-1502c2145186?w=600&q=80" alt="RAM">
          </div>
          <div class="img-caption">
            <div class="img-caption-dot" style="background:#34d399;box-shadow:0 0 8px #34d399"></div>
            <span class="img-caption-text">RAM modules — High-speed working memory</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="page-section" id="page-storage">
  <div class="content-page">
    <button class="back-btn" onclick="showPage('home')">← Torna alla Home</button>
    <div class="content-card amber">
      <div class="content-header">
        <div class="content-badge">06 / 06</div>
        <div class="content-chip amber">🖴 Persistent Storage</div>
      </div>
      <h2 class="amber">Storage (SSD/HDD)</h2>
      <div class="content-body">
        <div class="content-text">
          <p>There are several ways of storing data permanently, called backing storage. The hard disk consists of magnetised metal disks, one on top of the other. Each disk has thousands of concentric tracks divided into sectors where data is stored digitally. The disks spin rapidly while reading or writing data.</p>
          <p>SSDs (Solid-State Disks) use integrated circuit assemblies to store data permanently — they have no moving parts and are more resistant to physical shock than electromechanical disks, running silently and much faster. Optical disks store digital data in the form of small indentations called 'pits' on the reflective surface of the disk, read by a laser beam.</p>
          <div class="key-facts">
            <span class="fact-pill">💿 HDD Platters</span>
            <span class="fact-pill">⚡ SSD Flash</span>
            <span class="fact-pill">📀 Optical Disk</span>
            <span class="fact-pill">🔗 NVMe Interface</span>
          </div>
        </div>
        <div class="content-image">
          <div class="img-wrapper">
            <img src="https://images.unsplash.com/photo-1531492746076-161ca9bcad58?w=600&q=80" alt="Storage">
          </div>
          <div class="img-caption">
            <div class="img-caption-dot" style="background:#fbbf24;box-shadow:0 0 8px #fbbf24"></div>
            <span class="img-caption-text">Storage devices — HDD, SSD & Optical</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="page-section" id="page-quiz">
  <div class="content-page">
    <button class="back-btn" onclick="showPage('home')">← Torna alla Home</button>
    <div class="quiz-container">
      <div class="quiz-card">
        <div class="quiz-header">
          <div class="quiz-badge">🧠 Knowledge Check</div>
          <h2>Test Your Hardware Knowledge</h2>
          <p>10 questions — see how much you've learned!</p>
        </div>

        <div id="quiz-body">
          <div class="quiz-progress-wrap">
            <div class="quiz-progress-bar">
              <div class="quiz-progress-fill" id="quiz-progress-fill" style="width:0%"></div>
            </div>
            <span class="quiz-q-count" id="quiz-q-count">1 / 10</span>
          </div>

          <div class="quiz-question-text" id="quiz-question"></div>
          <div class="quiz-options" id="quiz-options"></div>
          <div class="quiz-feedback" id="quiz-feedback"></div>

          <div class="quiz-controls">
            <button class="quiz-btn quiz-btn-next" id="quiz-next" disabled>Next →</button>
          </div>
        </div>

        <div class="quiz-result" id="quiz-result">
          <div class="result-score" id="result-score"></div>
          <div class="result-label" id="result-label"></div>
          <div class="result-msg" id="result-msg"></div>
          <div class="quiz-controls">
            <button class="quiz-btn quiz-btn-restart" onclick="startQuiz()">↺ Try Again</button>
            <button class="quiz-btn quiz-btn-next" onclick="showPage('home')">← Back to Home</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<footer>
  <div class="footer-logo">DigitalComponents 💻</div>
  <p class="footer-sub">Computer Hardware Guide.</p>
  <div class="footer-authors">
    <div class="author-chip">👤 Maiorano Luigi</div>
    <div class="author-chip">👤 Ferrara Salvatore</div>
    <div class="author-chip">👤 Capasso Annachiara</div>
    <div class="author-chip">👤 Caiazzo Luigi</div>
  </div>
  <div class="footer-copy">© 2026 DigitalComponents.</div>
</footer>

<script>
// Canvas Background
const canvas = document.getElementById('bg-canvas');
const ctx = canvas.getContext('2d');
let W, H, pts = [];

function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
resize();
window.addEventListener('resize', () => { resize(); initPts(); });

function initPts() {
  pts = [];
  const n = Math.floor((W * H) / 22000);
  for (let i = 0; i < n; i++) pts.push({
    x: Math.random()*W, y: Math.random()*H,
    vx:(Math.random()-.5)*.25, vy:(Math.random()-.5)*.25,
    r: Math.random()*1.2+.3, a: Math.random()*.4+.05,
    h: [190,210,270][Math.floor(Math.random()*3)]
  });
}
initPts();

function draw() {
  ctx.clearRect(0,0,W,H);
  for (const p of pts) {
    p.x+=p.vx; p.y+=p.vy;
    if(p.x<0)p.x=W; if(p.x>W)p.x=0;
    if(p.y<0)p.y=H; if(p.y>H)p.y=0;
    ctx.beginPath();
    ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
    ctx.fillStyle=`hsla(${p.h},90%,65%,${p.a})`;
    ctx.fill();
  }
  for(let i=0;i<pts.length;i++) for(let j=i+1;j<pts.length;j++) {
    const dx=pts[i].x-pts[j].x, dy=pts[i].y-pts[j].y;
    const d=Math.sqrt(dx*dx+dy*dy);
    if(d<90){ctx.beginPath();ctx.moveTo(pts[i].x,pts[i].y);ctx.lineTo(pts[j].x,pts[j].y);ctx.strokeStyle=`rgba(0,229,255,${.05*(1-d/90)})`;ctx.lineWidth=.5;ctx.stroke();}
  }
  requestAnimationFrame(draw);
}
draw();

// Page Navigation
function showPage(pageId) {
  document.querySelectorAll('.page-section').forEach(section => {
    section.classList.remove('active');
  });
  document.getElementById('page-' + pageId).classList.add('active');
  window.scrollTo({ top: 0, behavior: 'smooth' });
  
  // Update active nav
  document.querySelectorAll('.header-nav a').forEach(link => {
    link.classList.remove('active');
  });
}

// Hamburger Menu
const hamburger = document.getElementById('hamburger');
const mobileNav = document.getElementById('mobile-nav');
hamburger.addEventListener('click', () => {
  hamburger.classList.toggle('active');
  mobileNav.classList.toggle('open');
});

function closeMobileNav() {
  hamburger.classList.remove('active');
  mobileNav.classList.remove('open');
}

// Counters
function animCounter(el, target, dur = 1400) {
  const t0 = performance.now();
  function update(now) {
    const p = Math.min((now - t0) / dur, 1);
    const e = 1 - Math.pow(1 - p, 3);
    el.textContent = Math.round(e * target);
    if (p < 1) requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}

// Run counters on load
document.querySelectorAll('.stat-num[data-target]').forEach(el => {
  animCounter(el, +el.dataset.target);
});

// Quiz
const questions = [
  { q: "What does CPU stand for?", opts: ["Central Processing Unit","Computer Power Unit","Central Program Utility","Core Processing Unit"], ans: 0, exp: "CPU stands for Central Processing Unit — the brain of a computer." },
  { q: "How many bits are in one byte?", opts: ["4","16","8","32"], ans: 2, exp: "One byte equals 8 bits." },
  { q: "What is RAM an abbreviation for?", opts: ["Rapid Access Module","Random Access Memory","Read And Modify","Real Address Map"], ans: 1, exp: "RAM stands for Random Access Memory." },
  { q: "Which component is called the 'brain' of a computer?", opts: ["RAM","Motherboard","GPU","CPU"], ans: 3, exp: "The CPU is commonly called the brain of the computer." },
  { q: "What happens to RAM data when the computer is turned off?", opts: ["It is saved automatically","It is lost","It moves to the CPU","It stays in cache"], ans: 1, exp: "RAM is volatile — it loses all data when power is cut." },
  { q: "What does ALU stand for?", opts: ["Advanced Logic Unit","Arithmetic and Logic Unit","Automatic Loader Utility","Address Link Unit"], ans: 1, exp: "ALU stands for Arithmetic and Logic Unit." },
  { q: "Which storage device has NO moving parts?", opts: ["HDD","CD-ROM","SSD","Floppy Disk"], ans: 2, exp: "An SSD uses flash memory and has no moving parts." },
  { q: "What is the function of the motherboard's 'bus'?", opts: ["To cool the CPU","To store data permanently","To allow CPU, memory, and peripherals to communicate","To supply power"], ans: 2, exp: "The bus allows components to communicate." },
  { q: "What encoding standard represents alphanumeric characters?", opts: ["UTF-32","EBCDIC","ASCII","Unicode only"], ans: 2, exp: "ASCII uses 8 bits to encode characters." },
  { q: "How does an HDD store data?", opts: ["Using laser pits","Using magnetised spinning platters","Using electrical charges","Using optical reflections"], ans: 1, exp: "HDDs use magnetised spinning platters." }
];

let qIndex = 0, score = 0, answered = false;

function startQuiz() {
  qIndex = 0; score = 0; answered = false;
  document.getElementById('quiz-body').style.display = 'block';
  document.getElementById('quiz-result').classList.remove('show');
  renderQuestion();
}

function renderQuestion() {
  const q = questions[qIndex];
  answered = false;
  document.getElementById('quiz-q-count').textContent = `${qIndex+1} / ${questions.length}`;
  document.getElementById('quiz-progress-fill').style.width = `${(qIndex/questions.length)*100}%`;
  document.getElementById('quiz-question').textContent = q.q;
  const letters = ['A','B','C','D'];
  document.getElementById('quiz-options').innerHTML = q.opts.map((opt,i) => `
    <button class="quiz-option" onclick="selectAnswer(${i})">
      <span class="option-letter">${letters[i]}</span>
      ${opt}
    </button>
  `).join('');
  const fb = document.getElementById('quiz-feedback');
  fb.textContent = '';
  fb.className = 'quiz-feedback';
  const nextBtn = document.getElementById('quiz-next');
  nextBtn.disabled = true;
  nextBtn.textContent = qIndex < questions.length-1 ? 'Next →' : 'See Results →';
}

function selectAnswer(i) {
  if (answered) return;
  answered = true;
  const q = questions[qIndex];
  const opts = document.querySelectorAll('.quiz-option');
  opts.forEach((opt,idx) => {
    if (idx === q.ans) opt.classList.add('correct');
    else if (idx === i && i !== q.ans) opt.classList.add('wrong');
    else opt.classList.add('disabled');
  });
  const fb = document.getElementById('quiz-feedback');
  if (i === q.ans) {
    score++;
    fb.textContent = '✓ Correct! ' + q.exp;
    fb.className = 'quiz-feedback correct-fb show';
  } else {
    fb.textContent = '✗ ' + q.exp;
    fb.className = 'quiz-feedback wrong-fb show';
  }
  document.getElementById('quiz-next').disabled = false;
}

document.getElementById('quiz-next').addEventListener('click', () => {
  if (!answered) return;
  qIndex++;
  if (qIndex >= questions.length) showResults();
  else renderQuestion();
});

function showResults() {
  document.getElementById('quiz-progress-fill').style.width = '100%';
  document.getElementById('quiz-body').style.display = 'none';
  const pct = Math.round((score/questions.length)*100);
  const result = document.getElementById('quiz-result');
  result.classList.add('show');
  document.getElementById('result-score').textContent = `${score}/${questions.length}`;
  let label, msg;
  if (pct === 100) { label = '🏆 Perfect Score!'; msg = 'Perfect! You know computer hardware inside and out.'; }
  else if (pct >= 80) { label = '🎉 Excellent!'; msg = 'Great work — you understand the fundamentals well.'; }
  else if (pct >= 60) { label = '👍 Good Job!'; msg = 'Solid effort! Review the guide to reach 100%.'; }
  else if (pct >= 40) { label = '📖 Keep Learning'; msg = 'Read through the sections and try again!'; }
  else { label = '💡 Just Getting Started'; msg = 'Explore the guide and you\'ll ace it next time!'; }
  document.getElementById('result-label').textContent = label;
  document.getElementById('result-msg').textContent = msg;
}

startQuiz();
</script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Progetto di gruppo #151

Motherboard

CPU (Processor)

Memory Cells

Bits and Codes

RAM Memory

Storage (SSD/HDD)

Test Your Hardware Knowledge

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Uh oh!

Progetto di gruppo #151

Description

Motherboard

CPU (Processor)

Memory Cells

Bits and Codes

RAM Memory

Storage (SSD/HDD)

Test Your Hardware Knowledge

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions