Spaces:
Running
Running
File size: 9,130 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 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BinGo Settings</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/n极m/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: #极F6D5; }
</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">Settings</h1>
</div>
</div>
</header>
<!-- Settings Sections -->
<section class="container mx-auto px-4 py-4">
<!-- Notifications -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<h2 class="font-semibold text-gray-700 mb-3">Notifications</h2>
<div class="space-y-3">
<div class="flex justify-between items-center">
<div>
<p class="font-medium">Collection Reminders</p>
<p class="text-sm text-gray-500">Get notified before bin day</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
</label>
</div>
<div class="flex justify-between items-center">
<div>
<p class="font-medium">Reminder Time</p>
<p class="text-sm text-gray-500">When to receive notifications</p>
</div>
<select class="bg-gray-100 border-0 rounded-lg px-3 py-1 text-sm">
<option>Night before (8 PM)</option>
<option>Morning of (7 AM)</option>
<option>Both times</option>
</select>
</div>
</div>
</div>
<!-- Account -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<h2 class="font-semibold text-gray-700 mb-3">Account</h2>
<div class="space-y-3">
<div class="flex justify-between items-center">
<div>
<p class="font-medium">Email Address</p>
<p class="text-sm text-gray-500">user@example.com</p>
</div>
<button class="text-green-600 text-sm font-medium">Change</button>
</div>
<div class="flex justify-between items-center">
<div>
<p class="font-medium">Password</p>
<p class="text-sm text-gray-500">••••••••</p>
</div>
<button class="text-green-600 text-sm font-medium">Change</button>
</div>
</div>
</div>
<!-- Addresses -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<h2 class="font-semibold text-gray-700 mb-3">Addresses</h2>
<div class="space-y-3">
<div class="flex justify-between items-center">
<div>
<p class="font-medium">12 Green Street, Dublin</p>
<p class="text-sm text-gray-500">Primary address</p>
</div>
<button class="text-green-600 text-sm font-medium">Edit</button>
</div>
<button class="w-full text-center text-green-600 py-2 border border-green-600 rounded-lg font-medium">
<i data-feather="plus" class="w-4 h-4 inline mr-1"></i>
Add New Address
</button>
</div>
</div>
<!-- App Settings -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<h2 class="font-semibold text-gray-700 mb-3">App Settings</h2>
<div class="space-y-3">
<div class="flex justify-between items-center">
<div>
<p class="font-medium">Dark Mode</p>
<p class="text-sm text-gray-500">Use dark theme</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
</label>
</div>
<div class="flex justify-between items-center">
<div>
<p class="font-medium">Language</p>
<p class="text-sm text-gray-500">App language</p>
</div>
<select class="bg-gray-100 border-0 rounded-lg px-3 py-1 text-sm">
<option>English</option>
<option>Irish</option>
</select>
</div>
</div>
</div>
<!-- Support -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<h2 class="font-semibold text-gray-700 mb-3">Support</h2>
<div class="space-y-3">
<button class="w-full text-left py-2">
<p class="font-medium">Help Center</p>
<p class="text-sm text-gray-500">Get help with BinGo</p>
</button>
<button class="w-full text-left py-2">
<p class="font-medium">Contact Support</p>
<p class="text-sm text-gray-500">Send us a message</p>
</button>
<button class="w-full text-left py-2">
<p class="font-medium">Rate BinGo</p>
<p class="text-sm text-gray-500">Share your experience</p>
</button>
</div>
</div>
<!-- Legal -->
<div class="bg-white rounded-xl shadow-sm p-4">
<h2 class="font-semibold text-gray-700 mb-3">Legal</h2>
<div class="space-y-3">
<button class="w-full text-left py-2 text-sm">
Privacy Policy
</button>
<button class="w-full text-left py-2 text-sm">
Terms of Service
</button>
</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="guide.html" class="py-3 px-4 text-gray-500">
<i data-feather="book" class="w-5 h-5 mx-auto"></i>
</a>
<a href="profile.html" 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> |