Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Eesha's Vault ✨</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <section id="terminal" class="page active"> | |
| <div class="terminal-box"> | |
| <p id="typewriter"></p> | |
| <button id="start-btn" class="hidden" onclick="nextSection('welcome')">Unlock the Magic ✨</button> | |
| </div> | |
| </section> | |
| <section id="welcome" class="page hidden"> | |
| <div class="glass-card"> | |
| <h2 class="neon-text">TO MY BESTIE ❤️</h2> | |
| <img src="sys_asset_01.jpeg" id="main-photo" alt="Special memory gallery for Eesha" class="profile-img" onclick="changePhoto()"> | |
| <p class="special-msg">"Eesha, you're the main character of this story!"</p> | |
| <p class="tap-hint">Tap the photo to see our memories... ✨</p> | |
| <button class="pink-btn" onclick="nextSection('game')">Ready to Play? →</button> | |
| </div> | |
| </section> | |
| <section id="game" class="page hidden"> | |
| <div class="glass-card"> | |
| <h3 class="neon-text">Catch 10 Kitties!</h3> | |
| <div class="score">Power Level: <span id="count">0</span>/10</div> | |
| <div id="game-area"> | |
| <img src="Sticker by Hello Kitty.gif" id="target" alt="Floating kitty game target" onclick="catchKitty()"> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="gallery" class="page hidden"> | |
| <div class="glass-card"> | |
| <h2 class="neon-text">Achievement Unlocked!</h2> | |
| <div class="photo-stack"> | |
| <img src="Racing F1 GIF by Hello Kitty.gif" alt="F1 Racing Kitty celebration" class="gallery-gif"> | |
| </div> | |
| <button class="pink-btn" onclick="nextSection('stats')">View Bestie Stats →</button> | |
| </div> | |
| </section> | |
| <section id="stats" class="page hidden"> | |
| <div class="glass-card"> | |
| <h2 class="neon-text">FRIENDSHIP ANALYTICS 📈</h2> | |
| <div class="stats-grid"> | |
| <div class="stat-item"><span class="stat-label">Vibe Match</span><span class="stat-value">100%</span></div> | |
| <div class="stat-item"><span class="stat-label">Secrets Kept</span><span class="stat-value">∞</span></div> | |
| </div> | |
| <button class="pink-btn" onclick="nextSection('cake-page')">Got a Surprise? 🎂</button> | |
| </div> | |
| </section> | |
| <section id="cake-page" class="page hidden"> | |
| <div class="glass-card"> | |
| <h2 class="neon-text">A TREAT FOR YOU! 🎂</h2> | |
| <div class="cake-container" onclick="cutCake()" role="button" aria-label="Click to cut the cake"> | |
| <div id="cake-left" class="cake-half left"> | |
| <div class="topping cherry"></div> | |
| <div class="sprinkles"></div> | |
| </div> | |
| <div id="cake-right" class="cake-half right"> | |
| <div class="topping cherry"></div> | |
| <div class="sprinkles"></div> | |
| </div> | |
| <div id="knife" class="knife"></div> | |
| </div> | |
| <p id="cake-msg" class="special-msg">Click the cake to cut a slice for Eesha!</p> | |
| <button class="pink-btn hidden" id="final-btn" onclick="location.reload()">Best Friends Forever ❤️</button> | |
| </div> | |
| </section> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |