yahyaamara11/integer-explorer

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>Integer Explorer</title>7    <link rel="stylesheet" href="style.css">8    <script src="https://cdn.tailwindcss.com"></script>9    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10    <script src="https://unpkg.com/feather-icons"></script>11    <script src="components/navbar.js"></script>12    <script src="components/footer.js"></script>13</head>14<body class="bg-gray-50 min-h-screen flex flex-col">15    <custom-navbar></custom-navbar>16    17    <main class="flex-grow container mx-auto px-4 py-8">18        <section class="text-center mb-12">19            <h1 class="text-4xl font-bold text-indigo-700 mb-4">Integer Explorer 🧮</h1>20            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Master the world of integers with fun, interactive lessons and games!</p>21        </section>22 23        <div class="grid md:grid-cols-3 gap-8 mb-12">24            <!-- Lesson Card -->25            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">26                <div class="bg-indigo-600 h-2"></div>27                <div class="p-6">28                    <div class="flex items-center mb-4">29                        <i data-feather="book" class="text-indigo-600 mr-3"></i>30                        <h2 class="text-xl font-semibold">Lessons</h2>31                    </div>32                    <p class="text-gray-600 mb-4">Learn integer concepts through interactive tutorials with visual examples.</p>33                    <a href="lessons.html" class="inline-flex items-center text-indigo-600 font-medium">34                        Start Learning35                        <i data-feather="arrow-right" class="ml-2"></i>36                    </a>37                </div>38            </div>39 40            <!-- Practice Card -->41            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">42                <div class="bg-blue-600 h-2"></div>43                <div class="p-6">44                    <div class="flex items-center mb-4">45                        <i data-feather="edit-3" class="text-blue-600 mr-3"></i>46                        <h2 class="text-xl font-semibold">Practice</h2>47                    </div>48                    <p class="text-gray-600 mb-4">Test your knowledge with customizable practice problems and instant feedback.</p>49                    <a href="practice.html" class="inline-flex items-center text-blue-600 font-medium">50                        Start Practicing51                        <i data-feather="arrow-right" class="ml-2"></i>52                    </a>53                </div>54            </div>55 56            <!-- Games Card -->57            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">58                <div class="bg-purple-600 h-2"></div>59                <div class="p-6">60                    <div class="flex items-center mb-4">61                        <i data-feather="gamepad" class="text-purple-600 mr-3"></i>62                        <h2 class="text-xl font-semibold">Games</h2>63                    </div>64                    <p class="text-gray-600 mb-4">Reinforce your skills through fun, integer-based games and challenges.</p>65                    <a href="games.html" class="inline-flex items-center text-purple-600 font-medium">66                        Play Games67                        <i data-feather="arrow-right" class="ml-2"></i>68                    </a>69                </div>70            </div>71        </div>72 73        <section class="bg-indigo-50 rounded-xl p-8 mb-12">74            <h2 class="text-2xl font-bold text-indigo-700 mb-6 text-center">What Are Integers?</h2>75            <div class="flex flex-col md:flex-row items-center">76                <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8">77                    <p class="text-gray-700 mb-4">Integers are whole numbers that can be positive, negative, or zero. They don't include fractions or decimals.</p>78                    <p class="text-gray-700 mb-4">Examples: -3, -2, -1, 0, 1, 2, 3</p>79                    <p class="text-gray-700">Understanding integers is fundamental for advanced math concepts like algebra and number theory.</p>80                </div>81                <div class="md:w-1/2">82                    <div class="bg-white p-6 rounded-lg shadow">83                        <div class="flex justify-center space-x-4 mb-4">84                            <span class="bg-red-100 text-red-600 px-4 py-2 rounded-full">-3</span>85                            <span class="bg-red-100 text-red-600 px-4 py-2 rounded-full">-2</span>86                            <span class="bg-red-100 text-red-600 px-4 py-2 rounded-full">-1</span>87                            <span class="bg-gray-200 text-gray-700 px-4 py-2 rounded-full">0</span>88                            <span class="bg-green-100 text-green-600 px-4 py-2 rounded-full">1</span>89                            <span class="bg-green-100 text-green-600 px-4 py-2 rounded-full">2</span>90                            <span class="bg-green-100 text-green-600 px-4 py-2 rounded-full">3</span>91                        </div>92                        <div class="flex justify-center">93                            <div class="relative w-full h-8 bg-gradient-to-r from-red-400 via-gray-300 to-green-400 rounded-full">94                                <div class="absolute inset-0 flex items-center justify-between px-2">95                                    <span class="text-white">Negative</span>96                                    <span class="text-gray-700">Zero</span>97                                    <span class="text-white">Positive</span>98                                </div>99                            </div>100                        </div>101                    </div>102                </div>103            </div>104        </section>105    </main>106 107    <custom-footer></custom-footer>108 109    <script>110        feather.replace();111    </script>112    <script src="script.js"></script>113<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>114</body>115</html>