bee367/ecogamify-recycledash
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>Single Player | 2 Clean 2 Green</title>7<link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10</head>11<body class="bg-gray-50 font-sans antialiased">12 <custom-navbar></custom-navbar>13 14 <main class="container mx-auto px-4 py-8">15 <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">16 <div>17 <h1 class="text-3xl font-bold text-gray-800">Single Player Mode</h1>18 <p class="text-gray-600">Practice your recycling skills and earn points</p>19 </div>20 </div>21 22 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">23 <div class="bg-white p-6 rounded-xl shadow-sm">24 <h2 class="text-xl font-semibold mb-4">Daily Challenges</h2>25 <div class="space-y-4">26 <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">27 <div>28 <h3 class="font-medium">Plastic Recycling</h3>29 <p class="text-sm text-gray-500">Recycle 10 plastic items</p>30 </div>31 <span class="bg-primary-100 text-primary-600 px-3 py-1 rounded-full text-sm">25 pts</span>32 </div>33 <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">34 <div>35 <h3 class="font-medium">Paper Collection</h3>36 <p class="text-sm text-gray-500">Recycle 5 paper items</p>37 </div>38 <span class="bg-primary-100 text-primary-600 px-3 py-1 rounded-full text-sm">15 pts</span>39 </div>40 <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">41 <div>42 <h3 class="font-medium">E-Waste Awareness</h3>43 <p class="text-sm text-gray-500">Identify 3 electronic waste items</p>44 </div>45 <span class="bg-primary-100 text-primary-600 px-3 py-1 rounded-full text-sm">30 pts</span>46 </div>47 </div>48 </div>49 50 <div class="bg-white p-6 rounded-xl shadow-sm">51 <h2 class="text-xl font-semibold mb-4">Waste Sorting Simulator</h2>52 <p class="text-gray-600 mb-6">Practice identifying different types of waste with our interactive simulator.</p>53 <div class="relative">54 <img src="http://static.photos/technology/640x360/123" alt="Waste Simulator" class="rounded-lg mb-6">55 <div class="absolute -bottom-4 -right-4">56 <div class="bg-white p-2 rounded-lg shadow-lg w-32 h-64 border-4 border-gray-800">57 <div class="bg-gray-800 h-6 w-full"></div>58 <div class="p-2">59 <div class="bg-blue-500 text-white text-xs p-1 rounded mb-1">Nearest: 1.2km</div>60 <div class="text-xs font-medium">Recycling Center</div>61 <div class="text-2xs text-gray-600">Lenina St. 25</div>62 <div class="mt-2 h-24 bg-gray-100 rounded flex items-center justify-center">63 <div class="text-4xs text-center">Map View</div>64 </div>65 <div class="mt-1 text-2xs text-blue-500 font-medium">Navigate</div>66 </div>67 </div>68 </div>69 </div>70<a href="waste-simulator.html" class="inline-block bg-primary-600 text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition">71 Launch Simulator72 </a>73 </div>74 </div>75 76 <div class="bg-white p-6 rounded-xl shadow-sm mb-8">77 <h2 class="text-xl font-semibold mb-4">Your Progress</h2>78 <div class="grid grid-cols-3 gap-4 text-center">79 <div class="bg-gray-50 p-4 rounded-lg">80 <div class="text-2xl font-bold text-primary-600">87</div>81 <div class="text-gray-500">Items Recycled</div>82 </div>83 <div class="bg-gray-50 p-4 rounded-lg">84 <div class="text-2xl font-bold text-primary-600">1,250</div>85 <div class="text-gray-500">Total Points</div>86 </div>87 <div class="bg-gray-50 p-4 rounded-lg">88 <div class="text-2xl font-bold text-primary-600">5</div>89 <div class="text-gray-500">Badges Earned</div>90 </div>91 </div>92 </div>93 94 <div class="bg-white p-6 rounded-xl shadow-sm">95 <h2 class="text-xl font-semibold mb-4">Earned Badges</h2>96 <div class="grid grid-cols-2 md:grid-cols-4 gap-4">97 <div class="text-center">98 <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-2">99 <i data-feather="award" class="text-green-600 w-8 h-8"></i>100 </div>101 <div class="font-medium">Recycling Novice</div>102 </div>103 <div class="text-center">104 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-2">105 <i data-feather="zap" class="text-blue-600 w-8 h-8"></i>106 </div>107 <div class="font-medium">Quick Learner</div>108 </div>109 <div class="text-center">110 <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-2">111 <i data-feather="star" class="text-purple-600 w-8 h-8"></i>112 </div>113 <div class="font-medium">Plastic Hero</div>114 </div>115 <div class="text-center">116 <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-2">117 <i data-feather="clock" class="text-yellow-600 w-8 h-8"></i>118 </div>119 <div class="font-medium">Daily Streak</div>120 </div>121 </div>122 </div>123 </main>124 125 <custom-footer></custom-footer>126 127 <script src="components/navbar.js"></script>128 <script src="components/footer.js"></script>129 <script>130 feather.replace();131 </script>132</body>133</html>