feature: make style like main page

resources/views/user/change_password.blade.php

@@ -27,26 +27,38 @@
             
             <div class="flex flex-col">
                 <label class="text-[13px] font-bold text-gray-700 mb-1.5" for="password">Mật khẩu mới <span class="text-red-500">*</span></label>
-                <div class="relative flex items-center">
-                    <span class="absolute left-4 text-gray-400">
+                <div class="relative">
+                    <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0V10.5m-2.812 10.5h14.625c.621 0 1.125-.504 1.125-1.125V11.25c0-.621-.504-1.125-1.125-1.125H3.75c-.621 0-1.125.504-1.125 1.125v7.875c0 .621.504 1.125 1.125 1.125z" />
                         </svg>
                     </span>
-                    <input type="password" name="password" id="password" class="w-full h-[48px] pl-12 pr-4 bg-[#F8FAFC] border border-gray-200 rounded-xl outline-none text-[#1a2b49] text-[14px] placeholder-gray-400 focus:border-[#3462f7] focus:bg-white focus:ring-4 focus:ring-[#3462f7]/10 hover:border-gray-300 transition-all duration-200" required placeholder="Nhập mật khẩu mới">
+                    <input type="password" name="password" id="password" class="w-full h-[46px] pl-[42px] pr-12 bg-white border border-gray-200 rounded-lg text-sm text-gray-800 focus:border-[#2563eb] focus:ring-1 focus:ring-[#2563eb] outline-none transition-all shadow-sm placeholder:text-gray-400" required placeholder="Nhập mật khẩu mới">
+                    <button type="button" onclick="togglePasswordVisibility('password', this)" class="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer" aria-label="Show password">
+                        <!-- Eye Closed (Default) -->
+                        <svg class="w-5 h-5 eye-icon-closed" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>
+                        <!-- Eye Open -->
+                        <svg class="w-5 h-5 eye-icon-open hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                    </button>
                 </div>
                 @error('password')<span class="text-red-500 text-[12px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
             </div>
 
             <div class="flex flex-col">
                 <label class="text-[13px] font-bold text-gray-700 mb-1.5" for="password_confirmation">Xác nhận lại mật khẩu mới <span class="text-red-500">*</span></label>
-                <div class="relative flex items-center">
-                    <span class="absolute left-4 text-gray-400">
+                <div class="relative">
+                    <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                         </svg>
                     </span>
-                    <input type="password" name="password_confirmation" id="password_confirmation" class="w-full h-[48px] pl-12 pr-4 bg-[#F8FAFC] border border-gray-200 rounded-xl outline-none text-[#1a2b49] text-[14px] placeholder-gray-400 focus:border-[#3462f7] focus:bg-white focus:ring-4 focus:ring-[#3462f7]/10 hover:border-gray-300 transition-all duration-200" required placeholder="Nhập lại mật khẩu mới">
+                    <input type="password" name="password_confirmation" id="password_confirmation" class="w-full h-[46px] pl-[42px] pr-12 bg-white border border-gray-200 rounded-lg text-sm text-gray-800 focus:border-[#2563eb] focus:ring-1 focus:ring-[#2563eb] outline-none transition-all shadow-sm placeholder:text-gray-400" required placeholder="Nhập lại mật khẩu mới">
+                    <button type="button" onclick="togglePasswordVisibility('password_confirmation', this)" class="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer" aria-label="Show password">
+                        <!-- Eye Closed (Default) -->
+                        <svg class="w-5 h-5 eye-icon-closed" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>
+                        <!-- Eye Open -->
+                        <svg class="w-5 h-5 eye-icon-open hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                    </button>
                 </div>
             </div>
 

resources/views/user/send.blade.php

@@ -2,57 +2,78 @@
 @section('title', 'Gửi Thank Card')
 
 @section('content')
-<div class="form-container">
-    <div class="form-header">
-        <h3 class="form-header-title">Gửi Thank Card Tới Đồng Nghiệp</h3>
-    </div>
-    
-    <form id="sendCardForm">
-        @csrf
+<div class="max-w-[640px] mx-auto w-full pb-10">
+    <div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] border border-white overflow-hidden">
         
-        <div class="form-body">
-            <div class="form-group">
-                <label class="form-label" for="receiver">Chọn người nhận <span class="text-red-500">*</span></label>
-                <select name="receiver" id="receiver" class="form-input" required>
-                    <option value="" disabled selected>-- Chọn đồng nghiệp --</option>
-                    @foreach($users as $u)
-                        <option value="{{ $u->msnv }}">{{ $u->msnv }} ({{ $u->mail }})</option>
-                    @endforeach
-                </select>
+        <div class="bg-gradient-to-r from-[#eff4ff] to-[#faeffa] px-8 py-8 flex flex-col relative overflow-hidden">
+            <div class="absolute -top-10 -right-10 w-32 h-32 bg-white/30 rounded-full blur-xl"></div>
+            <div class="absolute -bottom-10 -left-10 w-24 h-24 bg-white/20 rounded-full blur-lg"></div>
+            
+            <div class="relative z-10 flex items-center gap-3">
+                <h3 class="text-[22px] font-extrabold text-[#1a2b49] tracking-tight">Gửi Thank Card</h3>
+                <span class="text-xl animate-pulse">💌</span>
+            </div>
+            <p class="text-[13px] text-gray-500 font-medium mt-1.5 relative z-10">
+                Gửi gắm lời cảm ơn chân thành đến người đồng nghiệp tuyệt vời của bạn!
+            </p>
+        </div>
+        
+        <form id="sendCardForm">
+            @csrf
+            
+            <div class="p-8 space-y-6">
+                <div class="flex flex-col gap-2">
+                    <label class="text-[14px] font-bold text-text-dark" for="receiver">
+                        Chọn người nhận <span class="text-red-500">*</span>
+                    </label>
+                    <select name="receiver" id="receiver" class="form-input rounded-xl border-[#d9dfe7]" required>
+                        <option value="" disabled selected>-- Chọn đồng nghiệp --</option>
+                        @foreach($users as $u)
+                            <option value="{{ $u->msnv }}">{{ $u->name }} - {{ $u->msnv }} ({{ $u->mail }})</option>
+                        @endforeach
+                    </select>
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <label class="text-[14px] font-bold text-text-dark" for="amount">
+                        Số lượng thẻ <span class="text-red-500">*</span>
+                    </label>
+                    <select name="amount" id="amount" class="form-input rounded-xl border-[#d9dfe7]" required>
+                        <option value="1">1 Thẻ</option>
+                        <option value="2">2 Thẻ</option>
+                        <option value="3">3 Thẻ</option>
+                        <option value="4">4 Thẻ</option>
+                        <option value="{{ \App\Models\Administration::MAX_SEND_CARD_PER_MONTH }}">{{ \App\Models\Administration::MAX_SEND_CARD_PER_MONTH }} Thẻ (Tối đa)</option>
+                    </select>
+                    <div class="mt-1 flex items-start gap-2 bg-[#eff4ff] p-3.5 rounded-xl border border-blue-50">
+                        <svg class="w-5 h-5 text-[#3462f7] shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <p class="text-[12px] text-gray-600 font-medium leading-relaxed">
+                            Lưu ý: Chỉ được gửi tối đa {{ \App\Models\Administration::MAX_SEND_CARD_PER_MONTH }} thẻ cho cùng 1 người trong 1 tháng để đảm bảo tính công bằng.
+                        </p>
+                    </div>
+                </div>
             </div>
 
-            <div class="form-group">
-                <label class="form-label" for="amount">Số lượng thẻ <span class="text-red-500">*</span></label>
-                <select name="amount" id="amount" class="form-input" required>
-                    <option value="1">1 Thẻ</option>
-                    <option value="2">2 Thẻ</option>
-                    <option value="3">3 Thẻ</option>
-                    <option value="4">4 Thẻ</option>
-                    <option value="{{ \App\Models\Administration::MAX_SEND_CARD_PER_MONTH }}">{{ \App\Models\Administration::MAX_SEND_CARD_PER_MONTH }} Thẻ (Tối đa)</option>
-                </select>
-                <p class="helper-text">Lưu ý: Chỉ được gửi tối đa {{ \App\Models\Administration::MAX_SEND_CARD_PER_MONTH }} thẻ cho cùng 1 người trong 1 tháng.</p>
+            <div class="px-8 py-5 border-t border-[#d9dfe7]/50 bg-gray-50/50 flex flex-col sm:flex-row justify-end gap-3">
+                <a href="{{ route('user.dashboard') }}" class="btn-secondary rounded-xl font-bold">Hủy bỏ</a>
+                <button type="button" id="btnSubmitSend" class="btn-primary rounded-xl font-bold !bg-[#3462f7] hover:!bg-blue-700 shadow-md shadow-blue-500/10">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 mr-2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
+                    </svg>
+                    Gửi Card
+                </button>
             </div>
-        </div>
-
-        <div class="form-footer">
-            <a href="{{ route('user.dashboard') }}" class="btn-secondary">Hủy bỏ</a>
-            <button type="button" id="btnSubmitSend" class="btn-primary">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 mr-2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
-                </svg>
-                Gửi Card
-            </button>
-        </div>
-    </form>
+        </form>
+    </div>
 </div>
 
-<!-- Custom Popup Modal -->
 <x-modal id="customModal" title="Thông báo" maxWidth="md">
     <p id="modalMessage" class="text-sm text-gray-600 leading-relaxed"></p>
 
     <x-slot name="footer">
         <div id="modalActions" class="w-full flex flex-col sm:flex-row-reverse gap-3">
-            <!-- Buttons injected by JS -->
         </div>
     </x-slot>
 </x-modal>
@@ -75,8 +96,8 @@
             if(isConfirm) {
                 modalTitle.className = "text-lg font-bold text-primary";
                 modalActions.innerHTML = `
-                    <button id="btnConfirmOk" class="w-full sm:w-auto btn-primary !px-6 shadow-sm">Xác nhận gửi</button>
-                    <button id="btnCancel" class="w-full sm:w-auto btn-secondary !px-6 shadow-sm">Hủy</button>
+                    <button id="btnConfirmOk" class="w-full sm:w-auto btn-primary !px-6 shadow-sm rounded-xl font-bold">Xác nhận gửi</button>
+                    <button id="btnCancel" class="w-full sm:w-auto btn-secondary !px-6 shadow-sm rounded-xl font-bold">Hủy</button>
                 `;
                 document.getElementById('btnCancel').addEventListener('click', () => window.closeModal('customModal'));
                 document.getElementById('btnConfirmOk').addEventListener('click', function() {
@@ -87,7 +108,7 @@
             } else {
                 modalTitle.className = "text-lg font-bold text-red-600";
                 modalActions.innerHTML = `
-                    <button id="btnOkOnly" class="w-full sm:w-auto btn-secondary !px-6 shadow-sm">Đóng</button>
+                    <button id="btnOkOnly" class="w-full sm:w-auto btn-secondary !px-6 shadow-sm rounded-xl font-bold">Đóng</button>
                 `;
                 document.getElementById('btnOkOnly').addEventListener('click', () => window.closeModal('customModal'));
             }