Raihan-R/quantum-physics-voyager
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 Voyager | Interactive 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://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>12 <style>13 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Poppins:wght@300;400;600&display=swap');14 .glow-text {15 text-shadow: 0 0 10px rgba(74, 211, 255, 0.8);16 }17 .glow-box {18 box-shadow: 0 0 15px rgba(74, 211, 255, 0.5);19 }20 .neon-border {21 border: 1px solid rgba(74, 211, 255, 0.3);22 box-shadow: inset 0 0 10px rgba(74, 211, 255, 0.2), 0 0 10px rgba(74, 211, 255, 0.2);23 }24 </style>25</head>26<body class="bg-gray-900 text-gray-100 font-sans" id="vanta-bg">27 <div class="min-h-screen flex flex-col">28 <!-- Navigation -->29 <nav class="bg-gray-800 bg-opacity-90 backdrop-blur-md py-4 px-6 flex justify-between items-center sticky top-0 z-50">30 <div class="flex items-center space-x-2">31 <i data-feather="atom" class="text-teal-400"></i>32 <h1 class="text-xl font-bold font-orbitron text-teal-400 glow-text">Quantum Physics Voyager</h1>33 </div>34 <div class="hidden md:flex space-x-6">35 <a href="#" class="hover:text-teal-400 transition">Home</a>36 <a href="#" class="hover:text-teal-400 transition">Learn</a>37 <a href="#" class="hover:text-teal-400 transition">Quizzes</a>38 <a href="#" class="hover:text-teal-400 transition">Leaderboard</a>39 <a href="#" class="hover:text-teal-400 transition">AI Tutor</a>40 </div>41 <div class="flex items-center space-x-4">42 <button class="bg-teal-600 hover:bg-teal-500 px-4 py-2 rounded-lg font-medium transition">Login</button>43 <button class="md:hidden" id="mobile-menu-button">44 <i data-feather="menu"></i>45 </button>46 </div>47 </nav>48 49 <!-- Hero Section -->50 <section class="flex-grow flex flex-col items-center justify-center px-4 text-center py-16">51 <div class="max-w-4xl mx-auto">52 <h1 class="text-4xl md:text-6xl font-bold mb-6 font-orbitron glow-text">Master Physics Like Never Before</h1>53 <p class="text-xl md:text-2xl mb-10 text-gray-300">Interactive learning, AI assistance, and gamified challenges for GCE O-Level Physics</p>54 55 <div class="flex flex-col sm:flex-row justify-center gap-4">56 <button class="bg-teal-600 hover:bg-teal-500 px-8 py-4 rounded-xl font-bold text-lg transition transform hover:scale-105 glow-box">57 Start Learning58 </button>59 <button class="border-2 border-teal-400 text-teal-400 hover:bg-teal-900 hover:bg-opacity-30 px-8 py-4 rounded-xl font-bold text-lg transition transform hover:scale-105 neon-border">60 Take a Tour61 </button>62 </div>63 </div>64 </section>65 66 <!-- Features Grid -->67 <section class="py-16 px-4 bg-gray-800 bg-opacity-50">68 <h2 class="text-3xl font-bold text-center mb-16 font-orbitron glow-text">Your Physics Learning Toolkit</h2>69 70 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">71 <!-- Feature 1 -->72 <div class="bg-gray-800 p-6 rounded-xl neon-border hover:transform hover:scale-105 transition duration-300">73 <div class="text-teal-400 mb-4">74 <i data-feather="book-open" class="w-10 h-10"></i>75 </div>76 <h3 class="text-xl font-bold mb-2">Interactive Notes</h3>77 <p class="text-gray-300">Engaging physics content with animations and real-world examples</p>78 </div>79 80 <!-- Feature 2 -->81 <div class="bg-gray-800 p-6 rounded-xl neon-border hover:transform hover:scale-105 transition duration-300">82 <div class="text-teal-400 mb-4">83 <i data-feather="cpu" class="w-10 h-10"></i>84 </div>85 <h3 class="text-xl font-bold mb-2">AI Formula Helper</h3>86 <p class="text-gray-300">Step-by-step solutions for complex physics equations</p>87 </div>88 89 <!-- Feature 3 -->90 <div class="bg-gray-800 p-6 rounded-xl neon-border hover:transform hover:scale-105 transition duration-300">91 <div class="text-teal-400 mb-4">92 <i data-feather="award" class="w-10 h-10"></i>93 </div>94 <h3 class="text-xl font-bold mb-2">Gamified Learning</h3>95 <p class="text-gray-300">Earn XP, badges, and climb the leaderboard</p>96 </div>97 98 <!-- Feature 4 -->99 <div class="bg-gray-800 p-6 rounded-xl neon-border hover:transform hover:scale-105 transition duration-300">100 <div class="text-teal-400 mb-4">101 <i data-feather="message-square" class="w-10 h-10"></i>102 </div>103 <h3 class="text-xl font-bold mb-2">24/7 AI Tutor</h3>104 <p class="text-gray-300">Get instant answers to your physics questions</p>105 </div>106 </div>107 </section>108 109 <!-- Gamification Preview -->110 <section class="py-16 px-4">111 <div class="max-w-6xl mx-auto">112 <h2 class="text-3xl font-bold text-center mb-16 font-orbitron glow-text">Learn Like Playing a Game</h2>113 114 <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">115 <div>116 <h3 class="text-2xl font-bold mb-4">Earn Rewards As You Learn</h3>117 <p class="text-gray-300 mb-6">Our gamification system makes mastering physics fun and addictive:</p>118 119 <ul class="space-y-4">120 <li class="flex items-start">121 <i data-feather="zap" class="text-yellow-400 mr-3 mt-1"></i>122 <div>123 <h4 class="font-bold">Daily Streaks</h4>124 <p class="text-gray-400">Log in daily to maintain your streak and earn bonus XP</p>125 </div>126 </li>127 <li class="flex items-start">128 <i data-feather="star" class="text-purple-400 mr-3 mt-1"></i>129 <div>130 <h4 class="font-bold">Achievement Badges</h4>131 <p class="text-gray-400">Collect badges for completing challenges and mastering topics</p>132 </div>133 </li>134 <li class="flex items-start">135 <i data-feather="trending-up" class="text-green-400 mr-3 mt-1"></i>136 <div>137 <h4 class="font-bold">Leaderboards</h4>138 <p class="text-gray-400">Compete with classmates and climb the ranks</p>139 </div>140 </li>141 </ul>142 </div>143 144 <div class="bg-gray-800 p-8 rounded-xl neon-border">145 <div class="flex justify-between items-center mb-6">146 <div>147 <h4 class="text-gray-400">Your Current Level</h4>148 <h3 class="text-2xl font-bold">Quantum Explorer</h3>149 </div>150 <div class="text-right">151 <div class="text-yellow-400 flex items-center">152 <i data-feather="star" class="mr-1"></i>153 <span>1,245 XP</span>154 </div>155 <div class="w-full bg-gray-700 h-2 rounded-full mt-2">156 <div class="bg-teal-500 h-2 rounded-full" style="width: 65%"></div>157 </div>158 </div>159 </div>160 161 <div class="grid grid-cols-3 gap-4 mb-6">162 <div class="bg-gray-700 p-3 rounded-lg text-center">163 <div class="text-2xl font-bold text-teal-400">7</div>164 <div class="text-xs text-gray-400">Day Streak</div>165 </div>166 <div class="bg-gray-700 p-3 rounded-lg text-center">167 <div class="text-2xl font-bold text-purple-400">12</div>168 <div class="text-xs text-gray-400">Badges</div>169 </div>170 <div class="bg-gray-700 p-3 rounded-lg text-center">171 <div class="text-2xl font-bold text-yellow-400">#24</div>172 <div class="text-xs text-gray-400">Rank</div>173 </div>174 </div>175 176 <button class="w-full bg-teal-600 hover:bg-teal-500 py-3 rounded-lg font-medium transition">177 View All Achievements178 </button>179 </div>180 </div>181 </div>182 </section>183 184 <!-- Footer -->185 <footer class="bg-gray-800 py-8 px-4 mt-auto">186 <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">187 <div>188 <h3 class="text-lg font-bold mb-4 flex items-center">189 <i data-feather="atom" class="mr-2 text-teal-400"></i>190 Quantum Physics Voyager191 </h3>192 <p class="text-gray-400">Making physics learning fun, interactive, and rewarding for students.</p>193 </div>194 195 <div>196 <h4 class="font-bold mb-4">Quick Links</h4>197 <ul class="space-y-2">198 <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Home</a></li>199 <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Topics</a></li>200 <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Quizzes</a></li>201 <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Leaderboard</a></li>202 </ul>203 </div>204 205 <div>206 <h4 class="font-bold mb-4">Resources</h4>207 <ul class="space-y-2">208 <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Formula Sheet</a></li>209 <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Past Papers</a></li>210 <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Video Lessons</a></li>211 <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">AI Tutor</a></li>212 </ul>213 </div>214 215 <div>216 <h4 class="font-bold mb-4">Connect</h4>217 <div class="flex space-x-4">218 <a href="#" class="text-gray-400 hover:text-teal-400 transition">219 <i data-feather="facebook"></i>220 </a>221 <a href="#" class="text-gray-400 hover:text-teal-400 transition">222 <i data-feather="twitter"></i>223 </a>224 <a href="#" class="text-gray-400 hover:text-teal-400 transition">225 <i data-feather="instagram"></i>226 </a>227 <a href="#" class="text-gray-400 hover:text-teal-400 transition">228 <i data-feather="youtube"></i>229 </a>230 </div>231 </div>232 </div>233 234 <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500">235 <p>© 2023 Quantum Physics Voyager. All rights reserved.</p>236 </div>237 </footer>238 </div>239 240 <script>241 // Initialize Vanta.js background242 VANTA.GLOBE({243 el: "#vanta-bg",244 mouseControls: true,245 touchControls: true,246 gyroControls: false,247 minHeight: 200.00,248 minWidth: 200.00,249 scale: 1.00,250 scaleMobile: 1.00,251 color: 0x3b82f6,252 backgroundColor: 0x111827,253 size: 0.8254 });255 256 // Initialize feather icons257 feather.replace();258 </script>259</body>260</html>261