1010.path-content {display : none;animation : fadeIn .3s }
1111.path-content .active {display : block}
1212@keyframes fadeIn{from {opacity : 0 ;transform : translateY (10px )}to {opacity : 1 ;transform : translateY (0 )}}
13+ .path-btn .svg-icon {margin-bottom : 0.25rem }
14+ .path-btn .svg-icon svg {width : 48px ;height : 48px }
1315</ style > </ head > < body >
16+ < svg width ="0 " height ="0 " aria-hidden ="true " style ="position:absolute "> < defs >
17+ < linearGradient id ="gs-grad-pcb " x1 ="0% " y1 ="0% " x2 ="100% " y2 ="100% "> < stop offset ="0% " stop-color ="#1a5a2a "/> < stop offset ="100% " stop-color ="#0d3318 "/> </ linearGradient >
18+ </ defs > </ svg >
1419< nav class ="navbar "> < div class ="nav-inner ">
1520< a href ="index.html " class ="logo "> < span class ="logo-icon "> EoS</ span > EmbeddedOS < span class ="nav-version "> v0.1.0</ span > </ a >
16- < 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 " class ="active "> Get Started</ a > < a href ="docs/index.html "> Docs</ a > < a href ="kids.html "> Kids 🎮 </ a > < a href ="hardware-lab.html "> Hardware Lab 🔌 </ a > < a href ="flow.html "> Flow</ a >
21+ < 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 " class ="active "> Get Started</ a > < a href ="docs/index.html "> Docs</ a > < a href ="kids.html "> Kids 🎮 </ a > < a href ="hardware-lab.html "> Hardware Lab 🔌 </ a > < a href ="flow.html "> Flow</ a >
1722< a href ="https://github.com/embeddedos-org " class ="nav-github "> ★ GitHub</ a > </ div > </ div > </ nav >
1823
1924< div class ="content-wrapper " style ="max-width:900px ">
@@ -23,11 +28,11 @@ <h1>Getting Started with EmbeddedOS <span class="version-badge">v0.1.0</span></h
2328< h2 style ="border:none;text-align:center;font-size:1.6rem "> 🎯 Choose Your Path</ h2 >
2429
2530< div class ="path-selector ">
26- < div class ="path-btn active " onclick ="showPath('sim') "> < span class ="path-emoji " > 🎮 </ span > No Hardware< span class ="path-label "> Simulator only</ span > </ div >
27- < div class ="path-btn " onclick ="showPath('raspi') "> < span class ="path-emoji "> 🍓</ span > Raspberry Pi< span class ="path-label "> RPi 4 or 5</ span > </ div >
28- < div class ="path-btn " onclick ="showPath('stm32') "> < span class ="path-emoji "> ⚙️</ span > STM32 Board< span class ="path-label "> Discovery/Nucleo</ span > </ div >
29- < div class ="path-btn " onclick ="showPath('apps') "> < span class ="path-emoji "> 📱</ span > I Want Apps< span class ="path-label "> Build eApps</ span > </ div >
30- < div class ="path-btn " onclick ="showPath('design') "> < span class ="path-emoji "> 🎨</ span > I Want to Design< span class ="path-label "> EoStudio</ span > </ div >
31+ < div class ="path-btn active " onclick ="showPath('sim') "> < div class ="svg-icon " > < svg viewBox =" 0 0 48 48 " aria-hidden =" true " > < rect x =" 6 " y =" 6 " width =" 36 " height =" 26 " rx =" 3 " fill =" none " stroke =" #3fb950 " stroke-width =" 2 " /> < line x1 =" 6 " y1 =" 10 " x2 =" 42 " y2 =" 10 " stroke =" #3fb950 " stroke-width =" 0.8 " opacity =" 0.4 " /> < rect x =" 12 " y =" 15 " width =" 12 " height =" 10 " rx =" 1 " fill =" url(#gs-grad-pcb) " stroke =" #3fb950 " stroke-width =" 0.8 " /> < rect x =" 15 " y =" 18 " width =" 5 " height =" 4 " fill =" #1a1e24 " stroke =" #58a6ff " stroke-width =" 0.5 " /> < circle cx =" 34 " cy =" 20 " r =" 2 " fill =" #f85149 " opacity =" 0.7 " > < animate attributeName =" opacity " values =" 0.3;1;0.3 " dur =" 2s " repeatCount =" indefinite " /> </ circle > < circle cx =" 34 " cy =" 26 " r =" 1.5 " fill =" #3fb950 " opacity =" 0.6 " /> < line x1 =" 18 " y1 =" 34 " x2 =" 30 " y2 =" 34 " stroke =" #3fb950 " stroke-width =" 2 " stroke-linecap =" round " /> < line x1 =" 24 " y1 =" 32 " x2 =" 24 " y2 =" 34 " stroke =" #3fb950 " stroke-width =" 2 " /> </ svg > </ div > No Hardware< span class ="path-label "> Simulator only</ span > </ div >
32+ < div class ="path-btn " onclick ="showPath('raspi') "> < div class ="svg-icon "> < svg viewBox ="0 0 48 48 " aria-hidden ="true "> < rect x ="8 " y ="8 " width ="32 " height ="32 " rx ="3 " fill ="url(#gs-grad-pcb) " stroke ="#2a8a4a " stroke-width ="1 "/> < rect x ="18 " y ="16 " width ="10 " height ="10 " rx ="1.5 " fill ="#1a1e24 " stroke ="#3fb950 " stroke-width ="1 "/> < text x ="23 " y ="23 " text-anchor ="middle " fill ="#3fb950 " font-size ="4 " font-family ="monospace "> RPi</ text > < rect x ="34 " y ="12 " width ="6 " height ="5 " rx ="1 " fill ="#2a2e34 " stroke ="#6e7681 " stroke-width ="0.5 "/> < rect x ="34 " y ="18 " width ="6 " height ="5 " rx ="1 " fill ="#2a2e34 " stroke ="#6e7681 " stroke-width ="0.5 "/> < rect x ="34 " y ="28 " width ="6 " height ="8 " rx ="1 " fill ="#2a2e34 " stroke ="#6e7681 " stroke-width ="0.5 "/> < g > < circle cx ="12 " cy ="10 " r ="0.6 " fill ="#e3b341 " opacity ="0.5 "/> < circle cx ="14 " cy ="10 " r ="0.6 " fill ="#e3b341 " opacity ="0.5 "/> < circle cx ="16 " cy ="10 " r ="0.6 " fill ="#e3b341 " opacity ="0.5 "/> < circle cx ="18 " cy ="10 " r ="0.6 " fill ="#e3b341 " opacity ="0.5 "/> < circle cx ="20 " cy ="10 " r ="0.6 " fill ="#e3b341 " opacity ="0.5 "/> < circle cx ="12 " cy ="12 " r ="0.6 " fill ="#e3b341 " opacity ="0.5 "/> < circle cx ="14 " cy ="12 " r ="0.6 " fill ="#e3b341 " opacity ="0.5 "/> < circle cx ="16 " cy ="12 " r ="0.6 " fill ="#e3b341 " opacity ="0.5 "/> < circle cx ="18 " cy ="12 " r ="0.6 " fill ="#e3b341 " opacity ="0.5 "/> < circle cx ="20 " cy ="12 " r ="0.6 " fill ="#e3b341 " opacity ="0.5 "/> </ g > < circle cx ="12 " cy ="34 " r ="1.5 " fill ="#3fb950 " opacity ="0.7 "> < animate attributeName ="opacity " values ="0.3;1;0.3 " dur ="2s " repeatCount ="indefinite "/> </ circle > </ svg > </ div > Raspberry Pi< span class ="path-label "> RPi 4 or 5</ span > </ div >
33+ < div class ="path-btn " onclick ="showPath('stm32') "> < div class ="svg-icon "> < svg viewBox ="0 0 48 48 " aria-hidden ="true "> < rect x ="8 " y ="8 " width ="32 " height ="32 " rx ="3 " fill ="url(#gs-grad-pcb) " stroke ="#2a8a4a " stroke-width ="1 "/> < rect x ="16 " y ="14 " width ="14 " height ="14 " rx ="2 " fill ="#1a1e24 " stroke ="#79c0ff " stroke-width ="1 "/> < text x ="23 " y ="23 " text-anchor ="middle " fill ="#79c0ff " font-size ="4 " font-family ="monospace "> STM</ text > < line x1 ="18 " y1 ="14 " x2 ="18 " y2 ="10 " stroke ="#8b949e " stroke-width ="1.2 "/> < line x1 ="22 " y1 ="14 " x2 ="22 " y2 ="10 " stroke ="#8b949e " stroke-width ="1.2 "/> < line x1 ="26 " y1 ="14 " x2 ="26 " y2 ="10 " stroke ="#8b949e " stroke-width ="1.2 "/> < line x1 ="18 " y1 ="28 " x2 ="18 " y2 ="32 " stroke ="#8b949e " stroke-width ="1.2 "/> < line x1 ="22 " y1 ="28 " x2 ="22 " y2 ="32 " stroke ="#8b949e " stroke-width ="1.2 "/> < line x1 ="26 " y1 ="28 " x2 ="26 " y2 ="32 " stroke ="#8b949e " stroke-width ="1.2 "/> < circle cx ="12 " cy ="12 " r ="1.5 " fill ="#3fb950 " opacity ="0.7 "> < animate attributeName ="opacity " values ="0.3;1;0.3 " dur ="2s " repeatCount ="indefinite "/> </ circle > < circle cx ="12 " cy ="17 " r ="1.5 " fill ="#f85149 " opacity ="0.5 "/> < rect x ="34 " y ="18 " width ="6 " height ="8 " rx ="1 " fill ="#2a2e34 " stroke ="#6e7681 " stroke-width ="0.5 "/> </ svg > </ div > STM32 Board< span class ="path-label "> Discovery/Nucleo</ span > </ div >
34+ < div class ="path-btn " onclick ="showPath('apps') "> < div class ="svg-icon "> < svg viewBox ="0 0 48 48 " aria-hidden ="true "> < rect x ="10 " y ="4 " width ="18 " height ="30 " rx ="3 " fill ="none " stroke ="#e3b341 " stroke-width ="1.5 "/> < line x1 ="10 " y1 ="10 " x2 ="28 " y2 ="10 " stroke ="#e3b341 " stroke-width ="0.5 " opacity ="0.4 "/> < line x1 ="10 " y1 ="28 " x2 ="28 " y2 ="28 " stroke ="#e3b341 " stroke-width ="0.5 " opacity ="0.4 "/> < rect x ="13 " y ="13 " width ="5 " height ="5 " rx ="1 " fill ="#58a6ff " opacity ="0.5 "/> < rect x ="20 " y ="13 " width ="5 " height ="5 " rx ="1 " fill ="#3fb950 " opacity ="0.5 "/> < rect x ="13 " y ="21 " width ="5 " height ="5 " rx ="1 " fill ="#f0883e " opacity ="0.5 "/> < rect x ="20 " y ="21 " width ="5 " height ="5 " rx ="1 " fill ="#bc8cff " opacity ="0.5 "/> < rect x ="30 " y ="10 " width ="12 " height ="20 " rx ="2 " fill ="none " stroke ="#e3b341 " stroke-width ="1 " opacity ="0.6 "/> < rect x ="32 " y ="13 " width ="3 " height ="3 " rx ="0.5 " fill ="#58a6ff " opacity ="0.3 "/> < rect x ="37 " y ="13 " width ="3 " height ="3 " rx ="0.5 " fill ="#3fb950 " opacity ="0.3 "/> < rect x ="32 " y ="18 " width ="3 " height ="3 " rx ="0.5 " fill ="#f0883e " opacity ="0.3 "/> < rect x ="37 " y ="18 " width ="3 " height ="3 " rx ="0.5 " fill ="#bc8cff " opacity ="0.3 "/> </ svg > </ div > I Want Apps< span class ="path-label "> Build eApps</ span > </ div >
35+ < div class ="path-btn " onclick ="showPath('design') "> < div class ="svg-icon "> < svg viewBox ="0 0 48 48 " aria-hidden ="true "> < rect x ="6 " y ="6 " width ="36 " height ="28 " rx ="2 " fill ="none " stroke ="#f778ba " stroke-width ="1.5 "/> < line x1 ="6 " y1 ="12 " x2 ="42 " y2 ="12 " stroke ="#f778ba " stroke-width ="0.5 " opacity ="0.4 "/> < circle cx ="10 " cy ="9 " r ="1 " fill ="#f85149 " opacity ="0.6 "/> < circle cx ="14 " cy ="9 " r ="1 " fill ="#e3b341 " opacity ="0.6 "/> < circle cx ="18 " cy ="9 " r ="1 " fill ="#3fb950 " opacity ="0.6 "/> < rect x ="10 " y ="16 " width ="14 " height ="14 " rx ="1 " fill ="none " stroke ="#f778ba " stroke-width ="0.8 " opacity ="0.5 "/> < path d ="M14 26L17 20L20 24L22 22 " stroke ="#f778ba " stroke-width ="1 " fill ="none " stroke-linecap ="round "/> < rect x ="28 " y ="16 " width ="10 " height ="4 " rx ="1 " fill ="#58a6ff " opacity ="0.3 "/> < rect x ="28 " y ="22 " width ="10 " height ="4 " rx ="1 " fill ="#bc8cff " opacity ="0.3 "/> < rect x ="28 " y ="28 " width ="10 " height ="4 " rx ="1 " fill ="#3fb950 " opacity ="0.3 "/> < line x1 ="16 " y1 ="36 " x2 ="32 " y2 ="36 " stroke ="#f778ba " stroke-width ="1.5 " stroke-linecap ="round "/> < line x1 ="24 " y1 ="34 " x2 ="24 " y2 ="36 " stroke ="#f778ba " stroke-width ="1.5 "/> </ svg > </ div > I Want to Design< span class ="path-label "> EoStudio</ span > </ div >
3136</ div >
3237
3338<!-- PATH: SIMULATOR -->
0 commit comments