Hugging Face's logo

Spaces:
cyberZag
/
timewizard
Running

App Files Community
timewizard
File size: 11,657 Bytes 
5fde122
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52ce0b0
5fde122
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TimeWizard - Settings</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <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>
        .dashboard-bg {
            background-color: #F8FAFC;
        }
        .settings-card {
            transition: all 0.3s ease;
        }
        .settings-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .sidebar-link.active {
            border-left: 4px solid #4F46E5;
            background-color: rgba(79, 70, 229, 0.1);
        }
    </style>
</head>
<body class="font-sans antialiased">
    <!-- Employee Dashboard -->
    <div class="min-h-screen flex">
        <!-- Sidebar -->
        <div class="w-64 bg-white shadow-md">
            <div class="p-6 flex items-center space-x-3">
                <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                    <i data-feather="user" class="text-white w-5 h-5"></i>
                </div>
                <div>
                    <p class="font-medium text-dark">John Doe</p>
                    <p class="text-xs text-gray-500">Employee</p>
                </div>
            </div>
            
            <nav class="mt-8 px-4 space-y-1">
                <a href="index.html" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:text-dark rounded-lg">
                    <i data-feather="home" class="mr-3"></i> Dashboard
                </a>
                <a href="time-tracking.html" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:text-dark rounded-lg">
                    <i data-feather="clock" class="mr-3"></i> Time Tracking
                </a>
                <a href="vacation.html" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:text-dark rounded-lg">
                    <i data-feather="calendar" class="mr-3"></i> Vacation
                </a>
                <a href="reports.html" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:text-dark rounded-lg">
                    <i data-feather="file-text" class="mr-3"></i> Reports
                </a>
<a href="settings.html" class="sidebar-link active flex items-center px-4 py-3 text-sm font-medium text-dark rounded-lg">
                    <i data-feather="settings" class="mr-3 text-primary"></i> Settings
                </a>
            </nav>
        </div>
        
        <!-- Main Content -->
        <div class="flex-1 dashboard-bg p-8">
            <div class="flex justify-between items-center mb-8">
                <h1 class="text-2xl font-bold text-dark">Settings</h1>
                <div class="flex items-center space-x-4">
                    <button class="p-2 rounded-full bg-white shadow hover:bg-gray-50">
                        <i data-feather="bell"></i>
                    </button>
                    <button class="p-2 rounded-full bg-white shadow hover:bg-gray-50">
                        <i data-feather="help-circle"></i>
                    </button>
                </div>
            </div>
            
            <!-- Account Settings -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <h2 class="text-lg font-medium text-dark mb-4">Account Settings</h2>
                
                <form class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
                            <input id="first-name" name="first-name" type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary" value="John">
                        </div>
                        <div>
                            <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
                            <input id="last-name" name="last-name" type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary" value="Doe">
                        </div>
                    </div>
                    
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                        <input id="email" name="email" type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary" value="john.doe@example.com">
                    </div>
                    
                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                        <input id="phone" name="phone" type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary" value="+1 (555) 123-4567">
                    </div>
                    
                    <div class="pt-2">
                        <button type="submit" class="flex justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                            Update Profile
                        </button>
                    </div>
                </form>
            </div>
            
            <!-- Password Settings -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <h2 class="text-lg font-medium text-dark mb-4">Change Password</h2>
                
                <form class="space-y-4">
                    <div>
                        <label for="current-password" class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
                        <input id="current-password" name="current-password" type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary">
                    </div>
                    
                    <div>
                        <label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
                        <input id="new-password" name="new-password" type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary">
                    </div>
                    
                    <div>
                        <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
                        <input id="confirm-password" name="confirm-password" type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary">
                    </div>
                    
                    <div class="pt-2">
                        <button type="submit" class="flex justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                            Change Password
                        </button>
                    </div>
                </form>
            </div>
            
            <!-- Notification Settings -->
            <div class="bg-white rounded-xl shadow-md p-6">
                <h2 class="text-lg font-medium text-dark mb-4">Notification Preferences</h2>
                
                <form class="space-y-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-dark">Email Notifications</p>
                            <p class="text-xs text-gray-500">Receive important updates via email</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" value="" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white 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-primary"></div>
                        </label>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-dark">Push Notifications</p>
                            <p class="text-xs text-gray-500">Get alerts on your mobile device</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" value="" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white 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-primary"></div>
                        </label>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-dark">Vacation Approval Alerts</p>
                            <p class="text-xs text-gray-500">Notify when vacation requests are approved</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" value="" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white 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-primary"></div>
                        </label>
                    </div>
                    
                    <div class="pt-2">
                        <button type="submit" class="flex justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                            Save Preferences
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        feather.replace();
    </script>
</body>
</html>