Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PaceWitch - Run Like a Legend. Train Like a Witch.</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'witch-purple': '#4a1d96', | |
| 'moonlight-silver': '#e2e8f0', | |
| 'spell-teal': '#0d9488', | |
| 'potion-pink': '#db2777', | |
| 'dark-cauldron': '#1e1b4b', | |
| }, | |
| fontFamily: { | |
| 'spell': ['"Cinzel Decorative"', 'serif'], | |
| 'potion': ['"MedievalSharp"', 'cursive'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=MedievalSharp&display=swap'); | |
| .spell-card { | |
| background: linear-gradient(135deg, rgba(74, 29, 150, 0.7) 0%, rgba(13, 148, 136, 0.7) 100%); | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(226, 232, 240, 0.3); | |
| } | |
| .witch-avatar { | |
| filter: drop-shadow(0 0 10px rgba(219, 39, 119, 0.7)); | |
| } | |
| .spell-glyph { | |
| font-family: 'potion'; | |
| font-size: 2rem; | |
| line-height: 1; | |
| } | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring-circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform-origin: 50% 50%; | |
| } | |
| .cauldron-bubble { | |
| animation: bubble 4s infinite ease-in-out; | |
| } | |
| @keyframes bubble { | |
| 0%, 100% { transform: translateY(0) scale(1); } | |
| 50% { transform: translateY(-10px) scale(1.05); } | |
| } | |
| .nav-glow { | |
| box-shadow: 0 0 15px rgba(219, 39, 119, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark-cauldron text-moonlight-silver min-h-screen font-sans"> | |
| <!-- App Container --> | |
| <div class="max-w-md mx-auto min-h-screen flex flex-col"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-witch-purple p-4 rounded-b-xl shadow-lg"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-hat-wizard text-potion-pink text-2xl"></i> | |
| <h1 class="text-xl font-bold font-spell">PaceWitch</h1> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="text-moonlight-silver"><i class="fas fa-crown"></i></button> | |
| <button class="text-moonlight-silver"><i class="fas fa-user-astronaut"></i></button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 p-4 overflow-y-auto"> | |
| <!-- Hero Section --> | |
| <section class="mb-8 text-center"> | |
| <h2 class="text-3xl font-bold font-spell mb-2">Run Like a Legend.</h2> | |
| <h3 class="text-xl font-spell text-potion-pink mb-4">Train Like a Witch.</h3> | |
| <div class="relative h-40 w-40 mx-auto mb-4"> | |
| <div class="absolute inset-0 rounded-full bg-gradient-to-br from-witch-purple to-spell-teal opacity-70 animate-pulse"></div> | |
| <div class="absolute inset-2 rounded-full bg-dark-cauldron flex items-center justify-center"> | |
| <div class="text-5xl">🔮</div> | |
| </div> | |
| </div> | |
| <p class="text-sm mb-4">Transform your runs into magical quests. Cast spells with every stride.</p> | |
| <button class="bg-potion-pink text-white px-6 py-2 rounded-full font-bold shadow-lg hover:bg-opacity-90 transition">Begin Your Journey</button> | |
| </section> | |
| <!-- Avatar Section --> | |
| <section class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-bold font-spell">Your Witch Avatar</h2> | |
| <button class="text-xs text-potion-pink">Customize</button> | |
| </div> | |
| <div class="bg-gradient-to-r from-witch-purple to-dark-cauldron rounded-xl p-4 flex items-center"> | |
| <div class="witch-avatar w-20 h-20 rounded-full bg-purple-900 flex items-center justify-center text-3xl"> | |
| 👩🎤 | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold">Moonlight Runner</h3> | |
| <p class="text-xs opacity-80">Level 3 Water Witch</p> | |
| <div class="flex mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-yellow-400 flex items-center justify-center text-xs">🦉</div> | |
| <div class="w-6 h-6 -ml-2 rounded-full bg-blue-400 flex items-center justify-center text-xs">🌊</div> | |
| <div class="w-6 h-6 -ml-2 rounded-full bg-pink-400 flex items-center justify-center text-xs">✨</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quick Cast Spells --> | |
| <section class="mb-8"> | |
| <h2 class="text-lg font-bold font-spell mb-4">Quick Cast Spells</h2> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="spell-card rounded-xl p-3 text-center"> | |
| <div class="spell-glyph mb-1">🔥</div> | |
| <h3 class="font-bold text-sm">Fireburst</h3> | |
| <p class="text-xs opacity-80">Sprint Interval</p> | |
| </div> | |
| <div class="spell-card rounded-xl p-3 text-center"> | |
| <div class="spell-glyph mb-1">🌊</div> | |
| <h3 class="font-bold text-sm">Tidal Flow</h3> | |
| <p class="text-xs opacity-80">Steady Pace</p> | |
| </div> | |
| <div class="spell-card rounded-xl p-3 text-center"> | |
| <div class="spell-glyph mb-1">🌪️</div> | |
| <h3 class="font-bold text-sm">Gale Dash</h3> | |
| <p class="text-xs opacity-80">Speed Run</p> | |
| </div> | |
| <div class="spell-card rounded-xl p-3 text-center"> | |
| <div class="spell-glyph mb-1">🪨</div> | |
| <h3 class="font-bold text-sm">Stone Endure</h3> | |
| <p class="text-xs opacity-80">Long Distance</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Potion Points & Streak --> | |
| <section class="mb-8"> | |
| <h2 class="text-lg font-bold font-spell mb-4">Your Magic Brew</h2> | |
| <div class="bg-dark-cauldron border border-witch-purple rounded-xl p-4"> | |
| <div class="flex justify-between mb-4"> | |
| <div> | |
| <h3 class="text-sm font-bold">Potion Points</h3> | |
| <p class="text-2xl font-bold text-potion-pink">1,245 <span class="text-xs align-top">PP</span></p> | |
| </div> | |
| <div class="text-right"> | |
| <h3 class="text-sm font-bold">Streak</h3> | |
| <p class="text-2xl font-bold text-spell-teal">7 <span class="text-xs align-top">days</span></p> | |
| </div> | |
| </div> | |
| <div class="relative h-2 bg-witch-purple rounded-full mb-2"> | |
| <div class="absolute top-0 left-0 h-2 bg-potion-pink rounded-full" style="width: 65%;"></div> | |
| </div> | |
| <p class="text-xs text-center">Next level in 355 PP</p> | |
| </div> | |
| </section> | |
| <!-- Quest Progress --> | |
| <section class="mb-8"> | |
| <h2 class="text-lg font-bold font-spell mb-4">Current Quest</h2> | |
| <div class="bg-gradient-to-r from-witch-purple to-dark-cauldron rounded-xl p-4 relative overflow-hidden"> | |
| <div class="absolute -right-4 -bottom-4 text-6xl opacity-20">⚔️</div> | |
| <h3 class="font-bold mb-1">The Moonlit Marathon</h3> | |
| <p class="text-xs mb-3">Complete 3 runs this week to unlock the Silver Stride spell</p> | |
| <div class="flex items-center"> | |
| <div class="relative w-12 h-12 mr-3"> | |
| <svg class="progress-ring w-12 h-12" viewBox="0 0 42 42"> | |
| <circle class="progress-ring-circle" stroke="#0d9488" stroke-width="3" fill="transparent" r="18" cx="21" cy="21" stroke-dasharray="113" stroke-dashoffset="56.5"></circle> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center text-xs font-bold">2/3</div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Progress</span> | |
| <span>66%</span> | |
| </div> | |
| <div class="relative h-2 bg-witch-purple rounded-full"> | |
| <div class="absolute top-0 left-0 h-2 bg-spell-teal rounded-full" style="width: 66%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Social Cauldron --> | |
| <section> | |
| <h2 class="text-lg font-bold font-spell mb-4">Magic Circle</h2> | |
| <div class="bg-dark-cauldron border border-witch-purple rounded-xl p-4"> | |
| <div class="flex justify-center space-x-6 mb-4"> | |
| <div class="cauldron-bubble text-center"> | |
| <div class="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center mx-auto mb-1">🧙♀️</div> | |
| <p class="text-xs">Luna</p> | |
| </div> | |
| <div class="cauldron-bubble text-center" style="animation-delay: 0.5s;"> | |
| <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center mx-auto mb-1">🧙♂️</div> | |
| <p class="text-xs">Orion</p> | |
| </div> | |
| <div class="cauldron-bubble text-center" style="animation-delay: 1s;"> | |
| <div class="w-12 h-12 rounded-full bg-pink-900 flex items-center justify-center mx-auto mb-1">🧝♀️</div> | |
| <p class="text-xs">Sylvia</p> | |
| </div> | |
| </div> | |
| <button class="w-full bg-witch-purple py-2 rounded-lg text-sm font-bold flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i> Join a Circle | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="bg-witch-purple p-3 rounded-t-xl flex justify-around"> | |
| <button class="text-moonlight-silver text-xl p-2 rounded-full nav-glow"> | |
| <i class="fas fa-home"></i> | |
| </button> | |
| <button class="text-moonlight-silver text-xl p-2 rounded-full"> | |
| <i class="fas fa-running"></i> | |
| </button> | |
| <button class="text-moonlight-silver text-xl p-2 rounded-full"> | |
| <i class="fas fa-scroll"></i> | |
| </button> | |
| <button class="text-moonlight-silver text-xl p-2 rounded-full"> | |
| <i class="fas fa-flask"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| <script> | |
| // Simple interactivity for demonstration | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Spell selection | |
| const spells = document.querySelectorAll('.spell-card'); | |
| spells.forEach(spell => { | |
| spell.addEventListener('click', function() { | |
| spells.forEach(s => s.classList.remove('ring-2', 'ring-potion-pink')); | |
| this.classList.add('ring-2', 'ring-potion-pink'); | |
| // Show casting animation | |
| const glyph = this.querySelector('.spell-glyph'); | |
| glyph.style.transform = 'scale(1.5)'; | |
| setTimeout(() => { | |
| glyph.style.transform = 'scale(1)'; | |
| }, 300); | |
| }); | |
| }); | |
| // Subscription modal would go here | |
| const subscriptionBtn = document.querySelector('.fa-crown').parentElement; | |
| subscriptionBtn.addEventListener('click', function() { | |
| alert('Choose your path:\n\nFree Witch - Basic spells\nEnchanted Runner ($5/month) - Advanced magic\nSorceress Supreme ($10/month) - All powers unlocked'); | |
| }); | |
| // Avatar customization would go here | |
| const customizeBtn = document.querySelector('button:contains("Customize")'); | |
| customizeBtn.addEventListener('click', function() { | |
| alert('Customize your witch avatar with different robes, familiars, and elemental affinities!'); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chellexoxo/my-apps" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |