diff options
Diffstat (limited to 'main.html')
| -rw-r--r-- | main.html | 39 |
1 files changed, 39 insertions, 0 deletions
@@ -222,6 +222,15 @@ touch-action: manipulation; } .qa-btn:active { background: var(--border-color); } + @keyframes confetti-fall { + 0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; } + 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } + } + .confetti-piece { + position: fixed; top: -5vh; z-index: 9999; + font-size: 24px; pointer-events: none; user-select: none; + animation: confetti-fall 3s ease-in forwards; + } #status-bar { border-top: 1px solid var(--border-color); padding: 4px 10px; @@ -801,6 +810,36 @@ </div> </div> + <!-- Welcome Tour Modal --> + <div id="welcome-modal" class="modal-overlay"> + <div class="modal-content" style="max-width:500px;text-align:center;"> + <div class="modal-header"> + <span>🚀 Welcome to newOS4</span> + </div> + <div class="modal-body" style="padding:24px;"> + <div style="font-size:3em;margin-bottom:12px;">🖥️</div> + <h2 style="margin:0 0 8px;color:var(--accent-color);">Let's Get Started</h2> + <p style="color:var(--text-muted);margin-bottom:16px;line-height:1.6;"> + newOS4 is a terminal-centric browser OS with AI, filesystem, and modules. + Take the <strong>2-minute guided tour</strong> to learn the basics. + </p> + <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;"> + <button class="btn" onclick="if(webx11&&webx11.tutorialModule)webx11.tutorialModule.startTutorial();else document.getElementById('welcome-modal').style.display='none'" + style="border-color:var(--success-color);color:var(--success-color);padding:12px 28px;font-size:1em;"> + 🎮 Start Tutorial + </button> + <button class="btn" onclick="if(webx11)webx11.dismissWelcome()" + style="border-color:var(--text-muted);color:var(--text-muted);padding:12px 28px;font-size:1em;"> + Skip — I'll explore + </button> + </div> + <p style="font-size:0.78em;color:var(--text-muted);margin-top:16px;"> + Your progress is saved. Type <code>tutorial</code> anytime to resume. + </p> + </div> + </div> + </div> + <!-- Startup Modules Modal --> <div id="startup-modules" class="modal-overlay"> <div class="modal-content" style="max-width: 500px;"> |