SeveralCent/luminous-reflections

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>Luminous Reflections: Mirror Maze Mania</title>7    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8    <link rel="stylesheet" href="style.css">9    <script src="https://cdn.tailwindcss.com"></script>10    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11    <script src="https://unpkg.com/feather-icons"></script>12</head>13<body class="bg-gradient-to-br from-purple-900 via-indigo-800 to-blue-900 min-h-screen text-white">14    <laser-game-header></laser-game-header>15    16    <main class="container mx-auto px-4 py-8">17        <div class="text-center mb-12">18            <h1 class="text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">Luminous Reflections</h1>19            <p class="text-xl text-purple-200 mb-8">Direct laser beams using mirrors to reach the targets!</p>20            21            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto mb-12">22                <div class="bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">23                    <i data-feather="target" class="w-12 h-12 text-green-400 mx-auto mb-4"></i>24                    <h3 class="text-xl font-semibold mb-2">Strategic Thinking</h3>25                    <p class="text-purple-200">Place and rotate mirrors to solve complex puzzles</p>26                </div>27                <div class="bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">28                    <i data-feather="trending-up" class="w-12 h-12 text-yellow-400 mx-auto mb-4"></i>29                    <h3 class="text-xl font-semibold mb-2">Progressive Difficulty</h3>30                    <p class="text-purple-200">Over 50 levels with increasing complexity</p>31                </div>32                <div class="bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">33                    <i data-feather="zap" class="w-12 h-12 text-red-400 mx-auto mb-4"></i>34                    <h3 class="text-xl font-semibold mb-2">Multiple Lasers</h3>35                    <p class="text-purple-200">Handle complex scenarios with multiple beams</p>36                </div>37            </div>38            39            <div class="space-x-4">40                <a href="game.html" class="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-2xl">41                    Start Playing42                </a>43                <a href="levels.html" class="bg-white/20 hover:bg-white/30 text-white px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 border border-white/40">44                    Level Select45                </a>46            </div>47        </div>48    </main>49 50    <laser-game-footer></laser-game-footer>51 52    <script src="components/header.js"></script>53    <script src="components/footer.js"></script>54    <script src="script.js"></script>55    <script>feather.replace();</script>56</body>57</html>