Spaces:
Running
Running
File size: 7,643 Bytes
4ec3bdd | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings - TaskTamer Pro</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></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;
}
.toggle-checkbox:checked {
right: 0;
border-color: #6366f1;
}
.toggle-checkbox:checked + .toggle-label {
background-color: #6366f1;
}
</style>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-8 max-w-4xl">
<!-- Header -->
<header class="flex justify-between items-center mb-8">
<div class="flex items-center">
<a href="index.html" class="mr-4 text-gray-500 hover:text-indigo-600 transition">
<i data-feather="arrow-left" class="w-5 h-5"></i>
</a>
<h1 class="text-2xl font-bold text-gray-800">Settings</h1>
</div>
</header>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<!-- Work Hours Section -->
<div class="px-6 py-5 border-b border-gray-100">
<h2 class="text-lg font-semibold text-gray-800 mb-4">Work Schedule</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Work Days</label>
<div class="flex space-x-2">
<button class="px-3 py-1 rounded-full border border-gray-300 bg-white text-gray-700 text-sm">Mon</button>
<button class="px-3 py-1 rounded-full border border-gray-300 bg-white text-gray-700 text-sm">Tue</button>
<button class="px-3 py-1 rounded-full border border-gray-300 bg-white text-gray-700 text-sm">Wed</button>
<button class="px-3 py-1 rounded-full border border-gray-300 bg-white text-gray-700 text-sm">Thu</button>
<button class="px-3 py-1 rounded-full border border-gray-300 bg-indigo-600 text-white text-sm">Fri</button>
<button class="px-3 py-1 rounded-full border border-gray-300 bg-white text-gray-700 text-sm">Sat</button>
<button class="px-3 py-1 rounded-full border border-gray-300 bg-white text-gray-700 text-sm">Sun</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="start-time" class="block text-sm font-medium text-gray-700 mb-1">Work Start</label>
<input type="time" id="start-time" value="09:00" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
</div>
<div>
<label for="end-time" class="block text-sm font-medium text-gray-700 mb-1">Work End</label>
<input type="time" id="end-time" value="17:00" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
</div>
</div>
</div>
</div>
<!-- Reminders Section -->
<div class="px-6 py-5 border-b border-gray-100">
<h2 class="text-lg font-semibold text-gray-800 mb-4">Reminders</h2>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Daily Reminder</label>
<p class="text-sm text-gray-500">Receive a daily overview of your tasks</p>
</div>
<div class="relative inline-block w-10 mr-2 align-middle select-none">
<input type="checkbox" name="daily-reminder" id="daily-reminder" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
<label for="daily-reminder" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
</div>
</div>
<div>
<label for="reminder-time" class="block text-sm font-medium text-gray-700 mb-1">Reminder Time</label>
<input type="time" id="reminder-time" value="09:00" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
</div>
<div class="flex items-center justify-between">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Voice Check-ins</label>
<p class="text-sm text-gray-500">Enable voice reminders for task check-ins</p>
</div>
<div class="relative inline-block w-10 mr-2 align-middle select-none">
<input type="checkbox" name="voice-checkins" id="voice-checkins" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
<label for="voice-checkins" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
</div>
</div>
</div>
</div>
<!-- Timezone Section -->
<div class="px-6 py-5">
<h2 class="text-lg font-semibold text-gray-800 mb-4">Timezone</h2>
<div>
<label for="timezone" class="block text-sm font-medium text-gray-700 mb-1">Select Timezone</label>
<select id="timezone" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
<option value="America/New_York" selected>America/New York</option>
<option value="America/Chicago">America/Chicago</option>
<option value="America/Denver">America/Denver</option>
<option value="America/Los_Angeles">America/Los Angeles</option>
<option value="Europe/London">Europe/London</option>
<option value="Europe/Paris">Europe/Paris</option>
<option value="Asia/Tokyo">Asia/Tokyo</option>
</select>
</div>
</div>
</div>
<div class="mt-6 flex justify-end">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg transition">
Save Changes
</button>
</div>
</div>
<script>
feather.replace();
</script>
</body>
</html>
|