Hugging Face's logo

Spaces:
huylaughmad
/
test
Running

App Files Community
huylaughmad commited on
Commit
3c7e693
·
verified ·
1 Parent(s): 9399e48

Create dangkycalam.html

Browse files
Files changed (1) hide show
  1. dangkycalam.html +230 -0
dangkycalam.html ADDED
@@ -0,0 +1,230 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="vi">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Đăng Ký Ca Làm Việc</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .shift-option {
18
+ transition: all 0.3s ease;
19
+ }
20
+
21
+ .shift-option:hover {
22
+ transform: translateY(-2px);
23
+ }
24
+
25
+ .shift-option.selected {
26
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
27
+ }
28
+
29
+ .form-container {
30
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
31
+ }
32
+
33
+ .animate-pulse {
34
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
35
+ }
36
+
37
+ @keyframes pulse {
38
+ 0%, 100% {
39
+ opacity: 1;
40
+ }
41
+ 50% {
42
+ opacity: 0.5;
43
+ }
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="min-h-screen flex items-center justify-center p-4">
48
+ <div class="form-container bg-white rounded-2xl overflow-hidden w-full max-w-md">
49
+ <!-- Header -->
50
+ <div class="bg-gradient-to-r from-blue-600 to-blue-400 p-6 text-white">
51
+ <div class="flex items-center justify-between">
52
+ <div>
53
+ <h1 class="text-2xl font-bold">Đăng Ký Ca Làm Việc</h1>
54
+ <p class="text-blue-100 mt-1">Chọn ca làm việc phù hợp với bạn</p>
55
+ </div>
56
+ <div class="bg-white/20 p-3 rounded-full">
57
+ <i class="fas fa-calendar-alt text-xl"></i>
58
+ </div>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Form Content -->
63
+ <div class="p-6">
64
+ <!-- Employee Info -->
65
+ <div class="mb-6">
66
+ <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
67
+ <i class="fas fa-user-circle text-blue-500 mr-2"></i>
68
+ Thông tin nhân viên
69
+ </h2>
70
+
71
+ <div class="space-y-4">
72
+ <div>
73
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Họ và tên</label>
74
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="Nhập họ tên đầy đủ">
75
+ </div>
76
+
77
+ <div>
78
+ <label for="employeeId" class="block text-sm font-medium text-gray-700 mb-1">Mã nhân viên</label>
79
+ <input type="text" id="employeeId" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="Nhập mã nhân viên">
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Shift Selection -->
85
+ <div class="mb-6">
86
+ <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
87
+ <i class="fas fa-clock text-blue-500 mr-2"></i>
88
+ Chọn ca làm việc
89
+ </h2>
90
+
91
+ <div class="grid grid-cols-2 gap-4">
92
+ <!-- Morning Shift -->
93
+ <div>
94
+ <input type="radio" name="shift" id="morning-shift" class="hidden" value="morning">
95
+ <label for="morning-shift" class="shift-option block p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-blue-300 transition" onclick="selectShift('morning')">
96
+ <div class="flex items-center">
97
+ <div class="bg-yellow-100 p-2 rounded-lg mr-3">
98
+ <i class="fas fa-sun text-yellow-500 text-xl"></i>
99
+ </div>
100
+ <div>
101
+ <h3 class="font-medium text-gray-800">Ca sáng</h3>
102
+ <p class="text-sm text-gray-500">7:00 - 12:00</p>
103
+ </div>
104
+ </div>
105
+ <div class="mt-3 flex justify-end">
106
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Còn 5 slot</span>
107
+ </div>
108
+ </label>
109
+ </div>
110
+
111
+ <!-- Afternoon Shift -->
112
+ <div>
113
+ <input type="radio" name="shift" id="afternoon-shift" class="hidden" value="afternoon">
114
+ <label for="afternoon-shift" class="shift-option block p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-blue-300 transition" onclick="selectShift('afternoon')">
115
+ <div class="flex items-center">
116
+ <div class="bg-orange-100 p-2 rounded-lg mr-3">
117
+ <i class="fas fa-moon text-orange-500 text-xl"></i>
118
+ </div>
119
+ <div>
120
+ <h3 class="font-medium text-gray-800">Ca chiều</h3>
121
+ <p class="text-sm text-gray-500">13:00 - 18:00</p>
122
+ </div>
123
+ </div>
124
+ <div class="mt-3 flex justify-end">
125
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Còn 3 slot</span>
126
+ </div>
127
+ </label>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Date Selection -->
133
+ <div class="mb-6">
134
+ <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
135
+ <i class="fas fa-calendar-day text-blue-500 mr-2"></i>
136
+ Chọn ngày làm việc
137
+ </h2>
138
+
139
+ <div class="relative">
140
+ <input type="date" id="work-date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
141
+ <i class="fas fa-calendar absolute right-3 top-3 text-gray-400"></i>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Notes -->
146
+ <div class="mb-6">
147
+ <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
148
+ <i class="fas fa-edit text-blue-500 mr-2"></i>
149
+ Ghi chú (nếu có)
150
+ </h2>
151
+
152
+ <textarea id="notes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="Nhập ghi chú nếu cần..."></textarea>
153
+ </div>
154
+
155
+ <!-- Submit Button -->
156
+ <button id="submit-btn" onclick="submitForm()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition flex items-center justify-center">
157
+ <i class="fas fa-paper-plane mr-2"></i>
158
+ Đăng ký ca làm việc
159
+ </button>
160
+
161
+ <!-- Success Message (Hidden by default) -->
162
+ <div id="success-message" class="hidden mt-4 p-4 bg-green-50 text-green-800 rounded-lg flex items-center">
163
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
164
+ <span>Đăng ký thành công! Chúng tôi sẽ xác nhận qua email.</span>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <script>
170
+ // Function to handle shift selection
171
+ function selectShift(shiftType) {
172
+ // Remove selected style from all options
173
+ document.querySelectorAll('.shift-option').forEach(option => {
174
+ option.classList.remove('selected', 'border-blue-500', 'bg-blue-50');
175
+ option.classList.add('border-gray-200');
176
+ });
177
+
178
+ // Add selected style to clicked option
179
+ const selectedOption = document.getElementById(`${shiftType}-shift`).nextElementSibling;
180
+ selectedOption.classList.add('selected', 'border-blue-500', 'bg-blue-50');
181
+ selectedOption.classList.remove('border-gray-200');
182
+
183
+ // Pulse animation for visual feedback
184
+ selectedOption.classList.add('animate-pulse');
185
+ setTimeout(() => {
186
+ selectedOption.classList.remove('animate-pulse');
187
+ }, 1000);
188
+ }
189
+
190
+ // Function to handle form submission
191
+ function submitForm() {
192
+ const name = document.getElementById('name').value;
193
+ const employeeId = document.getElementById('employeeId').value;
194
+ const shift = document.querySelector('input[name="shift"]:checked');
195
+ const date = document.getElementById('work-date').value;
196
+
197
+ // Simple validation
198
+ if (!name || !employeeId || !shift || !date) {
199
+ alert('Vui lòng điền đầy đủ thông tin!');
200
+ return;
201
+ }
202
+
203
+ // Show loading state on button
204
+ const submitBtn = document.getElementById('submit-btn');
205
+ submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Đang xử lý...';
206
+ submitBtn.disabled = true;
207
+
208
+ // Simulate API call
209
+ setTimeout(() => {
210
+ // Show success message
211
+ document.getElementById('success-message').classList.remove('hidden');
212
+
213
+ // Reset form
214
+ submitBtn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> Đăng ký ca làm việc';
215
+ submitBtn.disabled = false;
216
+
217
+ // Scroll to success message
218
+ document.getElementById('success-message').scrollIntoView({ behavior: 'smooth' });
219
+ }, 1500);
220
+ }
221
+
222
+ // Set default date to today
223
+ document.addEventListener('DOMContentLoaded', function() {
224
+ const today = new Date().toISOString().split('T')[0];
225
+ document.getElementById('work-date').value = today;
226
+ document.getElementById('work-date').min = today;
227
+ });
228
+ </script>
229
+ </body>
230
+ </html>