Spaces:
Running
Running
File size: 8,584 Bytes
1ab8749 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BinGo Recycling Guide</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.bin-black { background-color: #2D3748; }
.bin-recycling { background-color: #38B2AC; }
.bin-food { background-color: #68D391; }
.bg-eco-green { background-color: #F0FFF4; }
.text-eco-green { color: #2F855A; }
.border-eco-green { border-color: #C6F6D5; }
</style>
</head>
<body class="bg-eco-green min-h-screen pb-16">
<!-- App Header -->
<header class="bg-white shadow-sm sticky top-0 z-10">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<a href="index.html" class="p-2 rounded-full hover:bg-gray-100">
<i data-feather="chevron-left"></i>
</a>
<h1 class="text-xl font-bold text-eco-green">Recycling Guide</h1>
</div>
<button class="p-2 rounded-full hover:bg-gray-100">
<i data-feather="search"></i>
</button>
</div>
</header>
<!-- Search Bar -->
<section class="container mx-auto px-4 py-4">
<div class="relative">
<input type="text" placeholder="Search items..." class="w-full bg-white rounded-xl shadow-sm pl-10 pr-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-500">
<i data-feather="search" class="absolute left-3 top-3.5 text-gray-400"></i>
</div>
</section>
<!-- Bin Categories -->
<section class="container mx-auto px-4 mb-6">
<div class="grid grid-cols-3 gap-3">
<button class="bg-white p-4 rounded-xl shadow-sm flex flex-col items-center">
<div class="w-12 h-12 bin-black rounded-lg flex items-center justify-center mb-2">
<i data-feather="trash" class="text-white"></i>
</div>
<span class="text-xs font-medium">General</span>
</button>
<button class="bg-white p-4 rounded-xl shadow-sm flex flex-col items-center">
<div class="w-12 h-12 bin-recycling rounded-lg flex items-center justify-center mb-2">
<i data-feather="repeat" class="text-white"></i>
</div>
<span class="text-xs font-medium">Recycling</span>
</button>
<button class="bg-white p-4 rounded-xl shadow-sm flex flex-col items-center">
<div class="w-12 h-12 bin-food rounded-lg flex items-center justify-center mb-2">
<i data-feather="droplet" class="text-white"></i>
</div>
<span class="text-xs font-medium">Food Waste</span>
</button>
</div>
</section>
<!-- Popular Items -->
<section class="container mx-auto px-4">
<h2 class="text-lg font-semibold text-gray-700 mb-3">Popular Items</h2>
<div class="space-y-3">
<div class="bg-white p-4 rounded-xl shadow-sm">
<div class="flex items-start">
<div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mr-4">
<img src="http://static.photos/food/200x200/1" alt="Pizza box" class="w-full h-full object-cover rounded-lg">
</div>
<div class="flex-1">
<h3 class="font-medium">Pizza Box</h3>
<p class="text-sm text-gray-500 mb-2">Cardboard food container</p>
<div class="flex items-center">
<div class="w-4 h-4 bin-recycling rounded-full mr-2"></div>
<span class="text-xs font-medium">Recycling Bin</span>
</div>
</div>
<i data-feather="chevron-right" class="text-gray-400"></i>
</div>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm">
<div class="flex items-start">
<div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mr-4">
<img src="http://static.photos/food/200x200/2" alt="Plastic bottle" class="w-full h-full object-cover rounded-lg">
</div>
<div class="flex-1">
<h3 class="font-medium">Plastic Bottle</h3>
<p class="text-sm text-gray-500 mb-2">PET plastic container</p>
<div class="flex items-center">
<div class="w-4 h-4 bin-recycling rounded-full mr-2"></div>
<span class="text-xs font-medium">Recycling Bin</span>
</div>
</div>
<i data-feather="chevron-right" class="text-gray-400"></i>
</div>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm">
<div class="flex items-start">
<div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mr-4">
<img src="http://static.photos/food/200x200/3" alt="Egg shells" class="w-full h-full object-cover rounded-lg">
</div>
<div class="flex-1">
<h3 class="font-medium">Egg Shells</h3>
<p class="text-sm text-gray-500 mb-2">Organic food waste</p>
<div class="flex items-center">
<div class="w-4 h-4 bin-food rounded-full mr-2"></div>
<span class="text-xs font-medium">Food Waste Bin</span>
</div>
</div>
<i data-feather="chevron-right" class="text-gray-400"></i>
</div>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm">
<div class="flex items-start">
<div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mr-4">
<img src="http://static.photos/food/200x200/4" alt="Broken glass" class="w-full h-full object-cover rounded-lg">
</div>
<div class="flex-1">
<h3 class="font-medium">Broken Glass</h3>
<p class="text-sm text-gray-500 mb-2">Sharp glass fragments</p>
<div class="flex items-center">
<div class="w-4 h-4 bin-black rounded-full mr-2"></div>
<span class="text-xs font-medium">General Waste</span>
</div>
</div>
<i data-feather="chevron-right" class="text-gray-400"></i>
</div>
</div>
</div>
</section>
<!-- Bottom Navigation -->
<nav class="fixed bottom-0 w-full bg-white border-t border-gray-200">
<div class="container mx-auto px-4">
<div class="flex justify-around">
<a href="index.html" class="py-3 px-4 text-gray-500">
<i data-feather="home" class="w-5 h-5 mx-auto"></i>
</a>
<a href="calendar.html" class="py-3 px-4 text-gray-500">
<i data-feather="calendar" class="w-5 h-5 mx-auto"></i>
</a>
<a href="#" class="py-3 px-4 text-green-600 border-t-2 border-green-600">
<i data-feather="book" class="w-5 h-5 mx-auto"></i>
</a>
<a href="#" class="py-3 px-4 text-gray-500">
<i data-feather="user" class="w-5 h-5 mx-auto"></i>
</a>
</div>
</div>
</nav>
<script>
AOS.init();
feather.replace();
</script>
</body>
</html>
|