Progetto di gruppo

[umaiorano5bc-byte]

<title>DigitalComponents — Computer Hardware Guide</title> <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>

💻

DigitalComponents

 <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>

🏠 Home 🔌 Motherboard 🧠 CPU 🗂️ Memory Cells ⚡ Bits & Codes 💾 RAM 🖴 Storage 🧠 Quiz

DigitalComponents Learning Platform

<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>

← Torna alla Home

01 / 06

🔌 Core Component

Motherboard

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.

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.

🔗 PCIe Slots 🔊 Audio Controller 📶 Network Card ⚡ Power Delivery

ATX Motherboard — Primary system board

← Torna alla Home

02 / 06

🧠 Processing Unit

CPU (Processor)

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.

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.

⚙️ ALU 🎛️ Control Unit 📐 Microprocessor 🔢 Transistors

Modern CPU — Billions of transistors

← Torna alla Home

03 / 06

🗂️ Data Architecture

Memory Cells

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.

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.

📍 Cell Address 1️⃣ Byte = 8 Bits 🎯 Random Access 🔎 Direct Addressing

Memory architecture — Address space

← Torna alla Home

04 / 06

⚡ Binary Systems

Bits and Codes

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.

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.

0️⃣ Binary 0 1️⃣ Binary 1 🔤 ASCII Encoding 📦 8 Bits = 1 Byte

Binary code — The language of computers

← Torna alla Home

05 / 06

💾 Working Memory

RAM Memory

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.

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.

⚡ Volatile Memory 🏎️ Fast Access 🔢 DDR5 Standard 📊 Capacity & Speed

RAM modules — High-speed working memory

← Torna alla Home

06 / 06

🖴 Persistent Storage

Storage (SSD/HDD)

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.

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.

💿 HDD Platters ⚡ SSD Flash 📀 Optical Disk 🔗 NVMe Interface

Storage devices — HDD, SSD & Optical

← Torna alla Home

🧠 Knowledge Check

Test Your Hardware Knowledge

10 questions — see how much you've learned!

 <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>

DigitalComponents 💻

Computer Hardware Guide.

👤 Maiorano Luigi

👤 Ferrara Salvatore

👤 Capasso Annachiara

👤 Caiazzo Luigi

© 2026 DigitalComponents.

<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 { 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) => ` ${letters[i]} ${opt} `).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>