-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathkids.html
More file actions
129 lines (129 loc) · 29.2 KB
/
kids.html
File metadata and controls
129 lines (129 loc) · 29.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kids Guide - EmbeddedOS</title>
<meta name="description" content="A fun introduction to EmbeddedOS for young explorers. Learn about robots, drones, smart watches and tiny computers.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://embeddedos-org.github.io/kids.html">
<meta property="og:title" content="Kids Guide - EmbeddedOS">
<meta property="og:description" content="A fun introduction to EmbeddedOS for young explorers. Learn about robots, drones, smart watches and tiny computers.">
<meta property="og:image" content="https://embeddedos-org.github.io/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Kids Guide - EmbeddedOS">
<meta name="twitter:description" content="A fun introduction to EmbeddedOS for young explorers. Learn about robots, drones, smart watches and tiny computers.">
<meta name="twitter:image" content="https://embeddedos-org.github.io/og-image.png">
<link rel="canonical" href="https://embeddedos-org.github.io/kids.html">
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
<style>
.kid-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.5rem;transition:all .3s;text-align:center}
.kid-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.kid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;margin:2rem 0}
.project-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem;transition:all .3s}
.project-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.project-card h4{margin-bottom:.3rem}.project-card p{color:var(--text-secondary);font-size:.9rem;margin-bottom:.5rem}
.difficulty{color:var(--yellow);letter-spacing:2px;font-size:1.1rem}
.age-path{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:2rem;margin:1.5rem 0;transition:all .3s}
.age-path:hover{border-color:var(--purple);box-shadow:var(--shadow-md)}.age-path h3{margin-top:0;border:none}
.analogy-box{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1rem;margin:.5rem 0}
.analogy-box .real-world{color:var(--green);font-weight:600;font-size:.92rem}
</style></head><body>
<svg width="0" height="0" aria-hidden="true" style="position:absolute"><defs>
<linearGradient id="k-grad-blue" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#58a6ff"/><stop offset="100%" stop-color="#1158a6"/></linearGradient>
<linearGradient id="k-grad-green" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3fb950"/><stop offset="100%" stop-color="#1a6b2a"/></linearGradient>
</defs></svg>
<nav class="navbar"><div class="nav-inner">
<a href="index.html" class="logo"><span class="logo-icon">EoS</span> EmbeddedOS <span class="nav-version">v0.1.0</span></a>
<button class="nav-toggle" onclick="this.nextElementSibling.classList.toggle('open')" aria-label="Menu">☰</button><div class="nav-links"><a href="index.html">Home</a><a href="getting-started.html">Get Started</a><a href="docs/index.html">Docs</a><a href="https://embeddedos-org.github.io/eApps/" class="nav-github">🏪 App Store</a><a href="kids.html" class="active">Kids 🎮</a><a href="hardware-lab.html">Hardware Lab 🔌</a><a href="flow.html">Flow</a>
<a href="https://github.com/embeddedos-org" class="nav-github">★ GitHub</a>
<button class="nav-search-btn" onclick="EosSearch.open()" aria-label="Search" title="Search (/)">🔍</button></div></div></nav>
<section class="hero" style="padding:4rem 2rem 3rem"><div class="hero-content">
<h1 style="font-size:2.8rem">Welcome, Young Explorer!</h1>
<p class="subtitle">EmbeddedOS makes robots, drones, smart watches, and tiny computers come alive. No experience needed!</p>
<div class="hero-buttons"><a href="#what-is-eos" class="btn btn-primary">What is EoS?</a><a href="#projects" class="btn btn-secondary">Project Ideas</a><a href="#age-paths" class="btn btn-outline">Pick Your Path</a></div>
</div></section>
<div class="content-wrapper" style="max-width:1000px">
<h2 id="what-is-eos" style="border:none;text-align:center;font-size:1.8rem">What is EmbeddedOS?</h2>
<p style="text-align:center;color:var(--text-secondary);max-width:700px;margin:0 auto 2rem">Your phone runs Android or iOS. <strong style="color:var(--blue)">EmbeddedOS</strong> is like Android, but for tiny computers that control robots, drones, and smart homes!</p>
<div class="callout callout-tip"><div class="callout-title">Think of it this way</div><p>Your phone has YouTube and Games. EmbeddedOS has apps too — but they run on a <strong>Raspberry Pi</strong> or a <strong>robot brain</strong>!</p></div>
<h2 style="border:none;text-align:center;font-size:1.8rem">Meet the Team</h2>
<div class="kid-grid">
<div class="kid-card" style="border-top:3px solid var(--blue)"><div class="svg-icon svg-bob"><svg viewBox="0 0 80 80" aria-hidden="true"><path d="M40 12C28 12 20 22 20 34C20 42 24 50 32 54L32 60L48 60L48 54C56 50 60 42 60 34C60 22 52 12 40 12Z" fill="none" stroke="#58a6ff" stroke-width="2"/><path d="M30 30Q40 20 50 30" stroke="#58a6ff" stroke-width="1.5" fill="none" opacity="0.6"/><path d="M30 38Q40 28 50 38" stroke="#58a6ff" stroke-width="1.5" fill="none" opacity="0.4"/><circle cx="32" cy="34" r="2.5" fill="#58a6ff" opacity="0.8"/><circle cx="48" cy="34" r="2.5" fill="#58a6ff" opacity="0.8"/><circle cx="40" cy="28" r="2.5" fill="#58a6ff" opacity="0.8"/><line x1="32" y1="60" x2="48" y2="60" stroke="#58a6ff" stroke-width="2"/><line x1="34" y1="64" x2="46" y2="64" stroke="#58a6ff" stroke-width="1.5" opacity="0.5"/><path d="M26 22L18 16 M54 22L62 16 M24 40L14 42 M56 40L66 42" stroke="#58a6ff" stroke-width="1" opacity="0.3" stroke-linecap="round"/></svg></div><h3 style="color:var(--blue);border:none;margin:0 0 .5rem">EoS Kernel</h3><p style="color:var(--text-secondary);font-size:.9rem">"The Brain"</p><div class="analogy-box"><p class="real-world">Like your brain controls arms and legs, EoS controls motors, LEDs, sensors.</p></div></div>
<div class="kid-card" style="border-top:3px solid var(--green)"><div class="svg-icon svg-bob"><svg viewBox="0 0 80 80" aria-hidden="true"><circle cx="40" cy="40" r="18" fill="none" stroke="#3fb950" stroke-width="2"/><circle cx="40" cy="40" r="14" fill="none" stroke="#3fb950" stroke-width="0.8" opacity="0.4"/><line x1="40" y1="26" x2="40" y2="40" stroke="#3fb950" stroke-width="2" stroke-linecap="round"/><line x1="40" y1="40" x2="50" y2="44" stroke="#3fb950" stroke-width="2" stroke-linecap="round"/><circle cx="40" cy="40" r="2" fill="#3fb950"/><path d="M30 18Q32 10 34 18" stroke="#3fb950" stroke-width="2.5" fill="none" stroke-linecap="round"/><path d="M46 18Q48 10 50 18" stroke="#3fb950" stroke-width="2.5" fill="none" stroke-linecap="round"/><line x1="36" y1="58" x2="32" y2="66" stroke="#3fb950" stroke-width="2" stroke-linecap="round"/><line x1="44" y1="58" x2="48" y2="66" stroke="#3fb950" stroke-width="2" stroke-linecap="round"/><path d="M28 64Q32 60 36 64" stroke="#3fb950" stroke-width="1" fill="none" opacity="0.4"/><circle cx="34" cy="36" r="1" fill="#3fb950" opacity="0.5"/><circle cx="34" cy="40" r="1" fill="#3fb950" opacity="0.5"/><circle cx="34" cy="44" r="1" fill="#3fb950" opacity="0.5"/></svg></div><h3 style="color:var(--green);border:none;margin:0 0 .5rem">eBoot</h3><p style="color:var(--text-secondary);font-size:.9rem">"The Alarm Clock"</p><div class="analogy-box"><p class="real-world">Wakes everything up when you turn on your device!</p></div></div>
<div class="kid-card" style="border-top:3px solid var(--cyan)"><div class="svg-icon svg-bob"><svg viewBox="0 0 80 80" aria-hidden="true"><rect x="16" y="28" width="48" height="30" rx="3" fill="none" stroke="#79c0ff" stroke-width="2"/><path d="M16 38L40 50L64 38" stroke="#79c0ff" stroke-width="1.5" fill="none" opacity="0.6"/><path d="M16 28L40 42L64 28" stroke="#79c0ff" stroke-width="2" fill="none"/><path d="M10 34Q6 30 10 26L16 30" stroke="#79c0ff" stroke-width="1.5" fill="none" stroke-linecap="round"/><path d="M6 36Q2 32 6 28" stroke="#79c0ff" stroke-width="1" fill="none" stroke-linecap="round" opacity="0.5"/><path d="M70 34Q74 30 70 26L64 30" stroke="#79c0ff" stroke-width="1.5" fill="none" stroke-linecap="round"/><path d="M74 36Q78 32 74 28" stroke="#79c0ff" stroke-width="1" fill="none" stroke-linecap="round" opacity="0.5"/><circle cx="40" cy="22" r="3" fill="#79c0ff" opacity="0.6"><animate attributeName="opacity" values="0.3;0.8;0.3" dur="2s" repeatCount="indefinite"/></circle></svg></div><h3 style="color:var(--cyan);border:none;margin:0 0 .5rem">EIPC</h3><p style="color:var(--text-secondary);font-size:.9rem">"The Postal Service"</p><div class="analogy-box"><p class="real-world">Delivers messages between programs, like a post office.</p></div></div>
<div class="kid-card" style="border-top:3px solid var(--purple)"><div class="svg-icon svg-bob"><svg viewBox="0 0 80 80" aria-hidden="true"><rect x="22" y="20" width="36" height="32" rx="8" fill="none" stroke="#bc8cff" stroke-width="2"/><circle cx="33" cy="36" r="4" fill="none" stroke="#bc8cff" stroke-width="1.5"/><circle cx="33" cy="35" r="1.5" fill="#bc8cff"/><circle cx="47" cy="36" r="4" fill="none" stroke="#bc8cff" stroke-width="1.5"/><circle cx="47" cy="35" r="1.5" fill="#bc8cff"/><path d="M34 44Q40 50 46 44" stroke="#bc8cff" stroke-width="1.5" fill="none" stroke-linecap="round"/><line x1="40" y1="14" x2="40" y2="20" stroke="#bc8cff" stroke-width="2"/><circle cx="40" cy="12" r="3" fill="#bc8cff" opacity="0.6"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.5s" repeatCount="indefinite"/></circle><rect x="28" y="56" width="24" height="8" rx="4" fill="none" stroke="#bc8cff" stroke-width="1.5"/><circle cx="33" cy="60" r="1.5" fill="#bc8cff" opacity="0.5"/><circle cx="40" cy="60" r="1.5" fill="#bc8cff" opacity="0.5"/><circle cx="47" cy="60" r="1.5" fill="#bc8cff" opacity="0.5"/><line x1="40" y1="52" x2="40" y2="56" stroke="#bc8cff" stroke-width="1.5"/></svg></div><h3 style="color:var(--purple);border:none;margin:0 0 .5rem">EAI</h3><p style="color:var(--text-secondary);font-size:.9rem">"Device ChatGPT"</p><div class="analogy-box"><p class="real-world">Lets your tiny computer understand language and answer questions!</p></div></div>
<div class="kid-card" style="border-top:3px solid var(--yellow)"><div class="svg-icon svg-bob"><svg viewBox="0 0 80 80" aria-hidden="true"><rect x="22" y="14" width="36" height="56" rx="6" fill="none" stroke="#e3b341" stroke-width="2"/><line x1="22" y1="24" x2="58" y2="24" stroke="#e3b341" stroke-width="1" opacity="0.4"/><line x1="22" y1="60" x2="58" y2="60" stroke="#e3b341" stroke-width="1" opacity="0.4"/><rect x="28" y="30" width="10" height="10" rx="2" fill="#58a6ff" opacity="0.6"/><rect x="42" y="30" width="10" height="10" rx="2" fill="#3fb950" opacity="0.6"/><rect x="28" y="44" width="10" height="10" rx="2" fill="#f0883e" opacity="0.6"/><rect x="42" y="44" width="10" height="10" rx="2" fill="#bc8cff" opacity="0.6"/><circle cx="40" cy="66" r="2.5" fill="none" stroke="#e3b341" stroke-width="1.5"/></svg></div><h3 style="color:var(--yellow);border:none;margin:0 0 .5rem">eApps</h3><p style="color:var(--text-secondary);font-size:.9rem">"Phone Apps"</p><div class="analogy-box"><p class="real-world">38 apps: calculator, Snake game, file manager, music player!</p></div></div>
<div class="kid-card" style="border-top:3px solid var(--red)"><div class="svg-icon svg-bob"><svg viewBox="0 0 80 80" aria-hidden="true"><rect x="14" y="30" width="52" height="28" rx="12" fill="none" stroke="#f85149" stroke-width="2"/><circle cx="30" cy="44" r="6" fill="none" stroke="#f85149" stroke-width="1.5"/><line x1="30" y1="38" x2="30" y2="50" stroke="#f85149" stroke-width="1.5"/><line x1="24" y1="44" x2="36" y2="44" stroke="#f85149" stroke-width="1.5"/><circle cx="52" cy="40" r="3" fill="#f85149" opacity="0.6"/><circle cx="48" cy="48" r="3" fill="#f85149" opacity="0.4"/><rect x="36" y="22" width="8" height="8" rx="2" fill="none" stroke="#f85149" stroke-width="1.5"/><rect x="36" y="22" width="8" height="8" rx="2" fill="#f85149" opacity="0.15"/><line x1="40" y1="14" x2="40" y2="22" stroke="#f85149" stroke-width="1.5"/><circle cx="40" cy="12" r="2" fill="#f85149" opacity="0.5"><animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite"/></circle></svg></div><h3 style="color:var(--red);border:none;margin:0 0 .5rem">EoSim</h3><p style="color:var(--text-secondary);font-size:.9rem">"Flight Simulator"</p><div class="analogy-box"><p class="real-world">Test code on a virtual board — no hardware needed!</p></div></div>
</div>
<h2 id="projects" style="border:none;text-align:center;font-size:1.8rem">What Can You Build?</h2>
<div class="kid-grid" style="grid-template-columns:repeat(auto-fill,minmax(280px,1fr))">
<div class="project-card"><div class="svg-icon"><svg viewBox="0 0 100 70" aria-hidden="true"><rect x="30" y="40" width="40" height="10" rx="2" fill="none" stroke="#3fb950" stroke-width="1.5" opacity="0.5"/><line x1="35" y1="50" x2="35" y2="55" stroke="#8b949e" stroke-width="1"/><line x1="65" y1="50" x2="65" y2="55" stroke="#8b949e" stroke-width="1"/><circle cx="45" cy="30" r="8" fill="#3fb950" opacity="0.3"/><circle cx="45" cy="30" r="5" fill="#3fb950" opacity="0.6"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.5s" repeatCount="indefinite"/></circle><path d="M45 22V15 M55 22V15" stroke="#8b949e" stroke-width="1.5" stroke-linecap="round"/><line x1="45" y1="38" x2="45" y2="44" stroke="#3fb950" stroke-width="1.5"/><line x1="55" y1="38" x2="55" y2="44" stroke="#3fb950" stroke-width="1.5"/></svg></div><h4>Blink an LED</h4><p>Hello World of hardware!</p><div class="difficulty">⭐</div><span class="badge badge-green">Beginner</span></div>
<div class="project-card"><div class="svg-icon"><svg viewBox="0 0 100 70" aria-hidden="true"><rect x="55" y="15" width="25" height="40" rx="3" fill="none" stroke="#58a6ff" stroke-width="1.5"/><text x="67" y="38" text-anchor="middle" fill="#58a6ff" font-size="8" font-family="monospace">72°</text><rect x="20" y="20" width="10" height="35" rx="5" fill="none" stroke="#f85149" stroke-width="1.5"/><circle cx="25" cy="48" r="5" fill="#f85149" opacity="0.5"/><rect x="23" y="30" width="4" height="18" fill="#f85149" opacity="0.6"/></svg></div><h4>Temperature Display</h4><p>Read sensor, show on screen.</p><div class="difficulty">⭐⭐</div><span class="badge badge-green">Beginner</span></div>
<div class="project-card"><div class="svg-icon"><svg viewBox="0 0 100 70" aria-hidden="true"><path d="M20 25L20 50L35 45L35 50L50 35" fill="none" stroke="#e3b341" stroke-width="2" stroke-linejoin="round"/><path d="M55 20Q60 15 65 20" stroke="#bc8cff" stroke-width="1.5" fill="none"/><path d="M58 14Q63 8 68 14" stroke="#bc8cff" stroke-width="1.2" fill="none" opacity="0.6"/><path d="M61 8Q66 2 71 8" stroke="#bc8cff" stroke-width="1" fill="none" opacity="0.3"/><circle cx="72" cy="28" r="3" fill="#e3b341" opacity="0.6"/><line x1="72" y1="31" x2="72" y2="40" stroke="#e3b341" stroke-width="1.5"/><path d="M69 40Q72 44 75 40" stroke="#e3b341" stroke-width="1" fill="none"/><circle cx="82" cy="42" r="3" fill="#f778ba" opacity="0.5"/><line x1="82" y1="45" x2="82" y2="52" stroke="#f778ba" stroke-width="1.5"/><path d="M79 52Q82 56 85 52" stroke="#f778ba" stroke-width="1" fill="none"/></svg></div><h4>Buzzer Music</h4><p>Play melodies with PWM.</p><div class="difficulty">⭐⭐</div><span class="badge badge-blue">Easy</span></div>
<div class="project-card"><div class="svg-icon"><svg viewBox="0 0 100 70" aria-hidden="true"><rect x="20" y="10" width="60" height="45" rx="4" fill="none" stroke="#3fb950" stroke-width="1.5"/><line x1="20" y1="16" x2="80" y2="16" stroke="#3fb950" stroke-width="0.5" opacity="0.4"/><path d="M40 30H55V30H55V35H50V35H50V40H45V40H45V45H40V45H40V40H35V40V35H40Z" fill="#3fb950" opacity="0.6" stroke="#3fb950" stroke-width="0.5"/><circle cx="65" cy="35" r="3" fill="#f85149" opacity="0.7"/><line x1="30" y1="58" x2="70" y2="58" stroke="#3fb950" stroke-width="1.5" stroke-linecap="round"/><line x1="50" y1="55" x2="50" y2="58" stroke="#3fb950" stroke-width="1.5"/></svg></div><h4>Play Snake</h4><p>Run Snake on Raspberry Pi!</p><div class="difficulty">⭐⭐</div><span class="badge badge-blue">Easy</span></div>
<div class="project-card"><div class="svg-icon"><svg viewBox="0 0 100 70" aria-hidden="true"><rect x="35" y="15" width="30" height="25" rx="4" fill="none" stroke="#f0883e" stroke-width="2"/><circle cx="42" cy="27" r="3" fill="#f0883e" opacity="0.6"/><circle cx="58" cy="27" r="3" fill="#f0883e" opacity="0.6"/><path d="M44 34Q50 38 56 34" stroke="#f0883e" stroke-width="1.5" fill="none" stroke-linecap="round"/><line x1="50" y1="10" x2="50" y2="15" stroke="#f0883e" stroke-width="1.5"/><circle cx="50" cy="8" r="2" fill="#f0883e" opacity="0.5"/><circle cx="38" cy="50" r="5" fill="none" stroke="#f0883e" stroke-width="1.5"/><circle cx="62" cy="50" r="5" fill="none" stroke="#f0883e" stroke-width="1.5"/><line x1="38" y1="40" x2="38" y2="45" stroke="#f0883e" stroke-width="1.5"/><line x1="62" y1="40" x2="62" y2="45" stroke="#f0883e" stroke-width="1.5"/><path d="M20 58C30 55 40 58 60 55 70 58 80 55" stroke="#1a1e24" stroke-width="3"/><path d="M20 58C30 55 40 58 60 55 70 58 80 58" stroke="#f0883e" stroke-width="1.5" fill="none" stroke-dasharray="4 2"/></svg></div><h4>Line-Following Robot</h4><p>Robot follows a black line.</p><div class="difficulty">⭐⭐⭐</div><span class="badge badge-orange">Medium</span></div>
<div class="project-card"><div class="svg-icon"><svg viewBox="0 0 100 70" aria-hidden="true"><path d="M35 15L50 5L65 15L65 40L50 50L35 40Z" fill="none" stroke="#79c0ff" stroke-width="1.5"/><line x1="50" y1="5" x2="50" y2="50" stroke="#79c0ff" stroke-width="0.5" opacity="0.3"/><line x1="35" y1="15" x2="65" y2="40" stroke="#79c0ff" stroke-width="0.5" opacity="0.3"/><rect x="42" y="20" width="6" height="8" rx="1" fill="#e3b341" opacity="0.6"/><rect x="52" y="20" width="6" height="8" rx="1" fill="#3fb950" opacity="0.6"/><circle cx="48" cy="35" r="2" fill="#f85149" opacity="0.7"/><path d="M50 52Q45 56 50 60Q55 56 50 52" stroke="#79c0ff" stroke-width="1" fill="none" opacity="0.5"/><path d="M28 8Q32 2 36 8" stroke="#79c0ff" stroke-width="1" fill="none" opacity="0.4"/><path d="M24 12Q28 6 32 12" stroke="#79c0ff" stroke-width="0.8" fill="none" opacity="0.3"/></svg></div><h4>Smart Home Dashboard</h4><p>Control lights from web page.</p><div class="difficulty">⭐⭐⭐</div><span class="badge badge-orange">Medium</span></div>
<div class="project-card"><div class="svg-icon"><svg viewBox="0 0 100 70" aria-hidden="true"><rect x="30" y="18" width="26" height="30" rx="6" fill="none" stroke="#bc8cff" stroke-width="2"/><circle cx="38" cy="32" r="3" fill="none" stroke="#bc8cff" stroke-width="1.2"/><circle cx="38" cy="31" r="1.2" fill="#bc8cff"/><circle cx="48" cy="32" r="3" fill="none" stroke="#bc8cff" stroke-width="1.2"/><circle cx="48" cy="31" r="1.2" fill="#bc8cff"/><path d="M39 40Q43 44 47 40" stroke="#bc8cff" stroke-width="1.2" fill="none"/><line x1="43" y1="12" x2="43" y2="18" stroke="#bc8cff" stroke-width="1.5"/><circle cx="43" cy="10" r="2" fill="#bc8cff" opacity="0.5"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.5s" repeatCount="indefinite"/></circle><rect x="58" y="22" width="20" height="14" rx="4" fill="none" stroke="#bc8cff" stroke-width="1.2" opacity="0.7"/><circle cx="63" cy="29" r="1" fill="#bc8cff" opacity="0.5"/><circle cx="67" cy="29" r="1" fill="#bc8cff" opacity="0.5"/><circle cx="71" cy="29" r="1" fill="#bc8cff" opacity="0.5"/><line x1="56" y1="29" x2="58" y2="29" stroke="#bc8cff" stroke-width="1" stroke-dasharray="1 1"/></svg></div><h4>AI Chat Robot</h4><p>Talk to your robot using EAI!</p><div class="difficulty">⭐⭐⭐⭐</div><span class="badge badge-purple">Advanced</span></div>
<div class="project-card"><div class="svg-icon"><svg viewBox="0 0 100 70" aria-hidden="true"><line x1="35" y1="35" x2="65" y2="35" stroke="#bc8cff" stroke-width="2"/><line x1="35" y1="35" x2="50" y2="20" stroke="#bc8cff" stroke-width="2"/><line x1="65" y1="35" x2="50" y2="20" stroke="#bc8cff" stroke-width="2"/><line x1="35" y1="35" x2="50" y2="50" stroke="#bc8cff" stroke-width="2"/><line x1="65" y1="35" x2="50" y2="50" stroke="#bc8cff" stroke-width="2"/><circle cx="50" cy="20" r="5" fill="none" stroke="#bc8cff" stroke-width="1.5"/><circle cx="50" cy="20" r="5" fill="#bc8cff" opacity="0.15"/><circle cx="35" cy="35" r="5" fill="none" stroke="#bc8cff" stroke-width="1.5"/><circle cx="35" cy="35" r="5" fill="#bc8cff" opacity="0.15"/><circle cx="65" cy="35" r="5" fill="none" stroke="#bc8cff" stroke-width="1.5"/><circle cx="65" cy="35" r="5" fill="#bc8cff" opacity="0.15"/><circle cx="50" cy="50" r="5" fill="none" stroke="#bc8cff" stroke-width="1.5"/><circle cx="50" cy="50" r="5" fill="#bc8cff" opacity="0.15"/><rect x="46" y="31" width="8" height="8" rx="2" fill="#1a1e24" stroke="#bc8cff" stroke-width="1"/></svg></div><h4>Drone Controller</h4><p>Flight controller with IMU.</p><div class="difficulty">⭐⭐⭐⭐</div><span class="badge badge-purple">Advanced</span></div>
<div class="project-card"><div class="svg-icon"><svg viewBox="0 0 100 70" aria-hidden="true"><rect x="30" y="18" width="40" height="40" rx="18" fill="none" stroke="#f85149" stroke-width="2"/><line x1="30" y1="38" x2="20" y2="38" stroke="#f85149" stroke-width="3" stroke-linecap="round"/><line x1="70" y1="38" x2="80" y2="38" stroke="#f85149" stroke-width="3" stroke-linecap="round"/><circle cx="50" cy="38" r="12" fill="none" stroke="#f85149" stroke-width="1" opacity="0.4"/><path d="M38 38L42 32L46 38L50 28L54 38L58 32L62 38" stroke="#f85149" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="50" cy="38" r="2" fill="#f85149" opacity="0.6"><animate attributeName="opacity" values="0.4;1;0.4" dur="1s" repeatCount="indefinite"/></circle></svg></div><h4>Health Wearable</h4><p>Track heart rate wirelessly.</p><div class="difficulty">⭐⭐⭐⭐⭐</div><span class="badge badge-red">Expert</span></div>
<div class="project-card"><div class="svg-icon"><svg viewBox="0 0 100 70" aria-hidden="true"><path d="M50 10C38 10 30 20 30 30C30 38 34 44 40 48L40 52L60 52L60 48C66 44 70 38 70 30C70 20 62 10 50 10Z" fill="none" stroke="#f778ba" stroke-width="1.5"/><path d="M38 26Q50 16 62 26" stroke="#f778ba" stroke-width="1" fill="none" opacity="0.5"/><path d="M38 34Q50 24 62 34" stroke="#f778ba" stroke-width="1" fill="none" opacity="0.3"/><circle cx="42" cy="30" r="2" fill="#f778ba" opacity="0.6"/><circle cx="50" cy="26" r="2" fill="#f778ba" opacity="0.6"/><circle cx="58" cy="30" r="2" fill="#f778ba" opacity="0.6"/><line x1="42" y1="30" x2="42" y2="56" stroke="#58a6ff" stroke-width="0.8" opacity="0.4"/><line x1="50" y1="26" x2="50" y2="56" stroke="#58a6ff" stroke-width="0.8" opacity="0.4"/><line x1="58" y1="30" x2="58" y2="56" stroke="#58a6ff" stroke-width="0.8" opacity="0.4"/><rect x="36" y="56" width="28" height="8" rx="2" fill="none" stroke="#58a6ff" stroke-width="1"/><text x="50" y="62" text-anchor="middle" fill="#58a6ff" font-size="5" font-family="monospace">CPU</text></svg></div><h4>Brain-Computer Interface</h4><p>Control with brain signals!</p><div class="difficulty">⭐⭐⭐⭐⭐</div><span class="badge badge-red">Expert</span></div>
</div>
<h2 id="age-paths" style="border:none;text-align:center;font-size:1.8rem">Pick Your Path</h2>
<div class="age-path" style="border-left:4px solid var(--green)"><h3 style="color:var(--green)">I'm 8-12 years old</h3><p><strong>Start with:</strong> EoSim + eApps (Games!). No hardware needed!</p><pre><code>pip install embeddedos-eosim
eosim run --platform esp32 --gui</code></pre></div>
<div class="age-path" style="border-left:4px solid var(--blue)"><h3 style="color:var(--blue)">I'm 13-17 years old</h3><p><strong>Start with:</strong> Raspberry Pi ($35) or ESP32 ($5).</p><pre><code>pip install embeddedos-ebuild
ebuild init my-blink --template rtos --target raspi4
cd my-blink && ebuild build</code></pre></div>
<div class="age-path" style="border-left:4px solid var(--purple)"><h3 style="color:var(--purple)">I'm 18+ (Power User)</h3><p><strong>Start with:</strong> Full developer setup.</p><pre><code>pip install embeddedos-ebuild embeddedos-eosim
git clone https://github.com/embeddedos-org/eos.git</code></pre></div>
<h2 style="border:none;text-align:center;font-size:1.8rem">Where to Go Next</h2>
<div class="quick-links"><a href="getting-started.html" class="quick-link"><div class="ql-icon" style="background:var(--blue-dim);color:var(--blue)">Go</div><div class="ql-text">Getting Started</div></a><a href="hardware-lab.html" class="quick-link"><div class="ql-icon" style="background:var(--green-dim);color:var(--green)">HW</div><div class="ql-text">Hardware Lab</div></a><a href="docs/eosuite.html" class="quick-link"><div class="ql-icon" style="background:var(--yellow-dim);color:var(--yellow)">App</div><div class="ql-text">All 38 eApps</div></a><a href="docs/eostudio.html" class="quick-link"><div class="ql-icon" style="background:var(--pink-dim);color:var(--pink)">Des</div><div class="ql-text">EoStudio</div></a></div>
</div>
<footer class="footer"><div class="footer-inner"><div class="footer-brand"><h3>EmbeddedOS</h3><p>Open-source embedded OS.</p></div>
<div><h4>Docs</h4><ul><li><a href="getting-started.html">Get Started</a></li><li><a href="docs/eos.html">EoS</a></li></ul></div>
<div><h4>Components</h4><ul><li><a href="docs/eai.html">EAI</a></li><li><a href="docs/eosuite.html">eApps</a></li><li><a href="docs/eosim.html">EoSim</a></li></ul></div>
<div><h4>Learn</h4><ul><li><a href="kids.html">Kids Guide</a></li><li><a href="hardware-lab.html">Hardware Lab</a></li></ul></div>
</div><div class="footer-bottom">2025 EmbeddedOS Project - MIT License</div></footer>
<div id="eos-search-overlay" class="search-overlay" hidden>
<div class="search-modal">
<div class="search-header">
<span class="search-icon">🔍</span>
<input type="text" id="eos-search-input" class="search-input" placeholder="Search EmbeddedOS docs..." autocomplete="off">
<kbd class="search-kbd">Esc</kbd>
</div>
<ul id="eos-search-results" class="search-results"></ul>
</div>
</div>
<script>
const EosSearch={pages:[
{t:'Home',u:'index.html',d:'The Operating System for Every Device'},
{t:'Get Started',u:'getting-started.html',d:'Choose your path and get running in minutes'},
{t:'Documentation Hub',u:'docs/index.html',d:'Complete developer documentation for all components'},
{t:'Platform Flow',u:'flow.html',d:'EoS platform build and deployment flow'},
{t:'Kids Guide',u:'kids.html',d:'Welcome young explorers to EmbeddedOS'},
{t:'Hardware Lab',u:'hardware-lab.html',d:'Pick your board and get EoS running on real hardware'},
{t:'App Store',u:'https://embeddedos-org.github.io/eApps/',d:'60+ apps across all platforms'},
{t:'EoS Kernel',u:'docs/eos.html',d:'Modular RTOS kernel with HAL and multicore framework'},
{t:'eBoot Bootloader',u:'docs/eboot.html',d:'Secure A/B bootloader with verified boot chain'},
{t:'ebuild CLI',u:'docs/ebuild.html',d:'Unified build system with cross-compilation'},
{t:'EIPC Protocol',u:'docs/eipc.html',d:'Secure real-time IPC framework'},
{t:'EAI Framework',u:'docs/eai.html',d:'Embedded AI for on-device LLM inference'},
{t:'ENI Neural Interface',u:'docs/eni.html',d:'Brain-computer interface framework'},
{t:'EoSim Simulator',u:'docs/eosim.html',d:'Multi-architecture simulation platform'},
{t:'EoStudio',u:'docs/eostudio.html',d:'Unified design suite with 12 editors'},
{t:'eApps Suite',u:'docs/eosuite.html',d:'60+ apps for all platforms'},
{t:'eDB Database',u:'docs/edb.html',d:'Unified multi-model database'},
{t:'eBowser Browser',u:'docs/ebowser.html',d:'Lightweight web browser engine'},
{t:'eOffice Suite',u:'docs/eoffice.html',d:'AI-powered office suite with 11 apps'},
{t:'eServiceApps',u:'docs/eserviceapps.html',d:'Flutter mobile service apps'}
],
overlay:null,input:null,results:null,
init(){this.overlay=document.getElementById('eos-search-overlay');this.input=document.getElementById('eos-search-input');this.results=document.getElementById('eos-search-results')},
open(){if(!this.overlay)this.init();this.overlay.hidden=false;this.input.value='';this.render(this.pages);this.input.focus()},
close(){if(this.overlay)this.overlay.hidden=true},
render(items){this.results.innerHTML=items.map(p=>'<li class="search-result-item"><a href="'+p.u+'"><strong>'+p.t+'</strong><span>'+p.d+'</span></a></li>').join('')||'<li class="search-result-item" style="color:var(--text-secondary)">No results found.</li>'},
filter(q){const l=q.toLowerCase();this.render(this.pages.filter(p=>p.t.toLowerCase().includes(l)||p.d.toLowerCase().includes(l)))}
};
document.addEventListener('keydown',e=>{if(e.key==='/'&&!['INPUT','TEXTAREA'].includes(document.activeElement.tagName)){e.preventDefault();EosSearch.open()}if(e.key==='Escape')EosSearch.close()});
document.addEventListener('DOMContentLoaded',()=>{const i=document.getElementById('eos-search-input');if(i)i.addEventListener('input',e=>EosSearch.filter(e.target.value));const o=document.getElementById('eos-search-overlay');if(o)o.addEventListener('click',e=>{if(e.target===o)EosSearch.close()})});
</script>
</body></html>