Raihan-R/quantum-physics-playground
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Quantum Physics Playground | Gamified Learning</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Inter:wght@300;400;500&display=swap');13 14 :root {15 --primary-dark: #0f1419;16 --secondary-dark: #1a1a2e;17 --accent-blue: #00a8e8;18 --accent-cyan: #08d9d6;19 --accent-purple: #a239ca;20 }21 22 body {23 font-family: 'Inter', sans-serif;24 background-color: var(--primary-dark);25 color: white;26 }27 28 .glass-card {29 background: rgba(45, 48, 71, 0.5);30 backdrop-filter: blur(10px);31 border: 1px solid rgba(255, 255, 255, 0.1);32 border-radius: 12px;33 }34 35 .glow-button {36 transition: all 0.3s ease;37 box-shadow: 0 0 15px rgba(0, 168, 232, 0.3);38 }39 40 .glow-button:hover {41 box-shadow: 0 0 25px rgba(0, 168, 232, 0.6);42 transform: translateY(-2px);43 }44 45 .streak-fire {46 animation: pulse 2s infinite;47 }48 49 @keyframes pulse {50 0% { opacity: 0.7; }51 50% { opacity: 1; }52 100% { opacity: 0.7; }53 }54 55 .progress-ring__circle {56 transition: stroke-dashoffset 0.5s;57 transform: rotate(-90deg);58 transform-origin: 50% 50%;59 }60 </style>61</head>62<body class="min-h-screen">63 <!-- Vanta.js Background -->64 <div id="vanta-bg" class="fixed inset-0 -z-10"></div>65 66 <!-- Main Container -->67 <div class="container mx-auto px-4 py-8">68 <!-- Header -->69 <header class="flex justify-between items-center mb-10">70 <div class="flex items-center">71 <i data-feather="atom" class="text-accent-cyan w-10 h-10 mr-3"></i>72 <h1 class="text-3xl font-bold font-['Exo_2'] bg-gradient-to-r from-accent-blue to-accent-purple bg-clip-text text-transparent">73 Quantum Physics Playground74 </h1>75 </div>76 <div class="flex items-center space-x-4">77 <a href="/login.html" class="glass-card px-6 py-2 rounded-full glow-button flex items-center">78 <i data-feather="user" class="mr-2"></i>79 Sign In80 </a>81 <a href="/register.html" class="glass-card px-6 py-2 rounded-full glow-button bg-accent-blue flex items-center">82 <i data-feather="lock" class="mr-2"></i>83 Register84 </a>85 </div>86</header>87 88 <!-- Hero Section -->89 <section class="glass-card p-8 mb-10">90 <div class="grid md:grid-cols-2 gap-8 items-center">91 <div>92 <h2 class="text-4xl font-bold font-['Exo_2'] mb-4">Master Physics 5054 Through Play</h2>93 <p class="text-gray-300 mb-6 text-lg">94 The most engaging way to learn O-Level Physics. Earn points, unlock achievements, and compete with classmates while mastering the syllabus.95 </p>96 <div class="flex flex-wrap gap-4">97 <button class="bg-accent-purple px-8 py-3 rounded-full glow-button font-medium flex items-center">98 <i data-feather="rocket" class="mr-2"></i>99 Start Learning100 </button>101 <button class="glass-card px-8 py-3 rounded-full glow-button font-medium flex items-center">102 <i data-feather="play-circle" class="mr-2"></i>103 Watch Demo104 </button>105 </div>106 </div>107 <div class="relative">108 <img src="http://static.photos/technology/640x360/42" alt="Physics Learning" class="rounded-xl shadow-2xl border border-gray-700">109 <div class="absolute -bottom-4 -right-4 bg-accent-blue text-white px-4 py-2 rounded-full font-medium flex items-center">110 <i data-feather="award" class="mr-2"></i>111 Gamified Learning112 </div>113 </div>114 </div>115 </section>116 117 <!-- Features Section -->118 <section class="mb-16">119 <h2 class="text-3xl font-bold font-['Exo_2'] mb-8 text-center">Why Quantum Physics Playground?</h2>120 <div class="grid md:grid-cols-3 gap-6">121 <!-- Feature 1 -->122 <div class="glass-card p-6 rounded-xl hover:border-accent-cyan border border-transparent transition-all">123 <div class="w-14 h-14 bg-accent-blue bg-opacity-20 rounded-xl flex items-center justify-center mb-4">124 <i data-feather="gamepad" class="text-accent-blue w-6 h-6"></i>125 </div>126 <h3 class="text-xl font-bold font-['Exo_2'] mb-2">Gamified Learning</h3>127 <p class="text-gray-300">128 Earn points, level up, and collect badges as you master physics concepts. Learning has never been this fun!129 </p>130 </div>131 132 <!-- Feature 2 -->133 <div class="glass-card p-6 rounded-xl hover:border-accent-purple border border-transparent transition-all">134 <div class="w-14 h-14 bg-accent-purple bg-opacity-20 rounded-xl flex items-center justify-center mb-4">135 <i data-feather="zap" class="text-accent-purple w-6 h-6"></i>136 </div>137 <h3 class="text-xl font-bold font-['Exo_2'] mb-2">Formula Helper</h3>138 <p class="text-gray-300">139 Struggling with equations? Our interactive tool helps you rearrange any physics formula with step-by-step guidance.140 </p>141 </div>142 143 <!-- Feature 3 -->144 <div class="glass-card p-6 rounded-xl hover:border-accent-cyan border border-transparent transition-all">145 <div class="w-14 h-14 bg-accent-cyan bg-opacity-20 rounded-xl flex items-center justify-center mb-4">146 <i data-feather="cpu" class="text-accent-cyan w-6 h-6"></i>147 </div>148 <h3 class="text-xl font-bold font-['Exo_2'] mb-2">AI Assistant</h3>149 <p class="text-gray-300">150 Get instant help from our AI tutor, available 24/7 to explain concepts and guide you through problems.151 </p>152 </div>153 </div>154 </section>155 156 <!-- Testimonials -->157 <section class="glass-card p-8 mb-16">158 <h2 class="text-3xl font-bold font-['Exo_2'] mb-8 text-center">What Students Say</h2>159 <div class="grid md:grid-cols-2 gap-8">160 <div class="border-l-4 border-accent-blue pl-6">161 <p class="text-gray-300 italic mb-4">162 "I used to hate physics, but Quantum Physics Playground made it fun! The gamification keeps me motivated to learn more."163 </p>164 <div class="flex items-center">165 <img src="http://static.photos/people/200x200/1" alt="Student" class="w-12 h-12 rounded-full mr-4">166 <div>167 <h4 class="font-bold">Sarah K.</h4>168 <p class="text-gray-400 text-sm">Grade 10 Student</p>169 </div>170 </div>171 </div>172 <div class="border-l-4 border-accent-purple pl-6">173 <p class="text-gray-300 italic mb-4">174 "As a teacher, I've seen my students' engagement with physics skyrocket since we started using this platform."175 </p>176 <div class="flex items-center">177 <img src="http://static.photos/people/200x200/2" alt="Teacher" class="w-12 h-12 rounded-full mr-4">178 <div>179 <h4 class="font-bold">Mr. Johnson</h4>180 <p class="text-gray-400 text-sm">Physics Teacher</p>181 </div>182 </div>183 </div>184 </div>185 </section>186 187 <!-- CTA Section -->188 <section class="text-center mb-16">189 <h2 class="text-3xl font-bold font-['Exo_2'] mb-6">Ready to Transform Your Physics Learning?</h2>190 <p class="text-gray-300 max-w-2xl mx-auto mb-8">191 Join thousands of students who are mastering physics through play. Whether you're struggling or want to excel, we've got you covered.192 </p>193 <button class="bg-gradient-to-r from-accent-blue to-accent-purple px-10 py-4 rounded-full glow-button font-bold text-lg">194 Get Started Now195 </button>196 </section>197 </div>198 199 <!-- Footer -->200 <footer class="glass-card py-8">201 <div class="container mx-auto px-4">202 <div class="flex flex-col md:flex-row justify-between items-center">203 <div class="flex items-center mb-4 md:mb-0">204 <i data-feather="atom" class="text-accent-cyan w-8 h-8 mr-2"></i>205 <span class="text-xl font-bold font-['Exo_2']">Quantum Physics Playground</span>206 </div>207 <div class="flex space-x-6">208 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>209 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>210 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>211 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="youtube"></i></a>212 </div>213 </div>214 <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">215 <p>© 2023 Quantum Physics Playground. All rights reserved.</p>216 </div>217 </div>218 </footer>219 220 <script>221 // Initialize Vanta.js background222 VANTA.GLOBE({223 el: "#vanta-bg",224 mouseControls: true,225 touchControls: true,226 gyroControls: false,227 minHeight: 200.00,228 minWidth: 200.00,229 scale: 1.00,230 scaleMobile: 1.00,231 color: 0x00a8e8,232 backgroundColor: 0x0f1419,233 size: 0.8234 });235 236 // Initialize Feather Icons237 feather.replace();238 239 // Simple animation for demo purposes240 document.addEventListener('DOMContentLoaded', () => {241 const buttons = document.querySelectorAll('.glow-button');242 buttons.forEach(button => {243 button.addEventListener('mouseenter', () => {244 button.classList.add('transform', 'scale-105');245 });246 button.addEventListener('mouseleave', () => {247 button.classList.remove('transform', 'scale-105');248 });249 });250 });251 </script>252</body>253</html>254