Hugging Face's logo

Spaces:
Thennarasu87
/
invoicegenius-ai
Running

App Files Community
Thennarasu87 commited on
Commit
5310ea9
·
verified ·
1 Parent(s): 0591225

Clients, profile settings, settings pages entry not found

Browse files
Files changed (5) hide show
  1. clients.html +110 -0
  2. components/navbar.js +3 -3
  3. components/sidebar.js +4 -4
  4. profile.html +102 -0
  5. settings.html +135 -0
clients.html ADDED
@@ -0,0 +1,110 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Clients | InvoiceGenius AI</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="components/navbar.js"></script>
11
+ <script src="components/sidebar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ </head>
14
+ <body class="bg-gray-50 min-h-screen">
15
+ <custom-navbar></custom-navbar>
16
+ <div class="flex">
17
+ <custom-sidebar></custom-sidebar>
18
+
19
+ <main class="flex-1 p-8">
20
+ <div class="max-w-6xl mx-auto">
21
+ <div class="flex justify-between items-center mb-8">
22
+ <h1 class="text-3xl font-bold text-gray-800">Clients</h1>
23
+ <div class="flex space-x-3">
24
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
25
+ <i data-feather="filter" class="mr-2"></i> Filter
26
+ </button>
27
+ <a href="/add-client" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
28
+ <i data-feather="plus" class="mr-2"></i> New Client
29
+ </a>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
34
+ <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
35
+ <div class="flex items-center space-x-4">
36
+ <button class="text-gray-500 hover:text-gray-700">
37
+ <i data-feather="refresh-cw"></i>
38
+ </button>
39
+ <div class="relative">
40
+ <input type="text" placeholder="Search clients..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
41
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
42
+ </div>
43
+ </div>
44
+ <div class="flex items-center space-x-2">
45
+ <button class="p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100">
46
+ <i data-feather="download"></i>
47
+ </button>
48
+ </div>
49
+ </div>
50
+ <div class="overflow-x-auto">
51
+ <table class="min-w-full divide-y divide-gray-200">
52
+ <thead class="bg-gray-50">
53
+ <tr>
54
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
55
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
56
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
57
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
58
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoices</th>
59
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
60
+ </tr>
61
+ </thead>
62
+ <tbody class="bg-white divide-y divide-gray-200">
63
+ <tr>
64
+ <td class="px-6 py-4 whitespace-nowrap">
65
+ <div class="flex items-center">
66
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
67
+ <i data-feather="briefcase" class="text-indigo-600"></i>
68
+ </div>
69
+ <div class="ml-4">
70
+ <div class="text-sm font-medium text-gray-900">Acme Corp</div>
71
+ <div class="text-sm text-gray-500">Client since 2021</div>
72
+ </div>
73
+ </div>
74
+ </td>
75
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">John Smith</td>
76
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">john@acme.com</td>
77
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">(555) 123-4567</td>
78
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12 ($24,500)</td>
79
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
80
+ <a href="/client/acme-corp" class="text-indigo-600 hover:text-indigo-900 mr-3"><i data-feather="eye"></i></a>
81
+ <a href="#" class="text-gray-600 hover:text-gray-900"><i data-feather="more-vertical"></i></a>
82
+ </td>
83
+ </tr>
84
+ <!-- More client rows would go here -->
85
+ </tbody>
86
+ </table>
87
+ </div>
88
+ <div class="px-6 py-4 border-t border-gray-100 flex items-center justify-between">
89
+ <div class="text-sm text-gray-500">
90
+ Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">24</span> clients
91
+ </div>
92
+ <div class="flex space-x-2">
93
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
94
+ Previous
95
+ </button>
96
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
97
+ Next
98
+ </button>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </main>
104
+ </div>
105
+
106
+ <custom-footer></custom-footer>
107
+ <script>feather.replace();</script>
108
+ <script src="script.js"></script>
109
+ </body>
110
+ </html>
components/navbar.js CHANGED
@@ -39,9 +39,9 @@ class CustomNavbar extends HTMLElement {
39
  </button>
40
 
41
  <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg user-dropdown py-1 z-50">
42
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
43
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
44
- <div class="border-t border-gray-100"></div>
45
  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
46
  </div>
47
  </div>
 
39
  </button>
40
 
41
  <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg user-dropdown py-1 z-50">
42
+ <a href="/profile.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
43
+ <a href="/settings.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
44
+ <div class="border-t border-gray-100"></div>
45
  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
46
  </div>
47
  </div>
components/sidebar.js CHANGED
@@ -45,11 +45,11 @@ class CustomSidebar extends HTMLElement {
45
  <i data-feather="shopping-cart" class="w-5 h-5 mr-3 text-gray-500"></i>
46
  Purchase Orders
47
  </a>
48
- <a href="/clients" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-gray-900">
49
  <i data-feather="users" class="w-5 h-5 mr-3 text-gray-500"></i>
50
  Clients
51
  </a>
52
- </div>
53
 
54
  <div class="px-4 mt-6">
55
  <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Tools</p>
@@ -64,11 +64,11 @@ class CustomSidebar extends HTMLElement {
64
  <i data-feather="pie-chart" class="w-5 h-5 mr-3 text-gray-500"></i>
65
  Reports
66
  </a>
67
- <a href="/settings" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-gray-900">
68
  <i data-feather="settings" class="w-5 h-5 mr-3 text-gray-500"></i>
69
  Settings
70
  </a>
71
- </div>
72
  </nav>
73
  </aside>
74
  `;
 
45
  <i data-feather="shopping-cart" class="w-5 h-5 mr-3 text-gray-500"></i>
46
  Purchase Orders
47
  </a>
48
+ <a href="/clients.html" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-gray-900">
49
  <i data-feather="users" class="w-5 h-5 mr-3 text-gray-500"></i>
50
  Clients
51
  </a>
52
+ </div>
53
 
54
  <div class="px-4 mt-6">
55
  <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Tools</p>
 
64
  <i data-feather="pie-chart" class="w-5 h-5 mr-3 text-gray-500"></i>
65
  Reports
66
  </a>
67
+ <a href="/settings.html" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-gray-900">
68
  <i data-feather="settings" class="w-5 h-5 mr-3 text-gray-500"></i>
69
  Settings
70
  </a>
71
+ </div>
72
  </nav>
73
  </aside>
74
  `;
profile.html ADDED
@@ -0,0 +1,102 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Profile | InvoiceGenius AI</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="components/navbar.js"></script>
11
+ <script src="components/sidebar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ </head>
14
+ <body class="bg-gray-50 min-h-screen">
15
+ <custom-navbar></custom-navbar>
16
+ <div class="flex">
17
+ <custom-sidebar></custom-sidebar>
18
+
19
+ <main class="flex-1 p-8">
20
+ <div class="max-w-4xl mx-auto">
21
+ <div class="mb-8">
22
+ <h1 class="text-3xl font-bold text-gray-800">Profile</h1>
23
+ <p class="text-gray-600 mt-2">Manage your personal information</p>
24
+ </div>
25
+
26
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-8">
27
+ <div class="px-6 py-4 border-b border-gray-100">
28
+ <h2 class="text-lg font-semibold">Personal Information</h2>
29
+ </div>
30
+ <div class="p-6">
31
+ <div class="flex items-center space-x-6 mb-6">
32
+ <div class="relative">
33
+ <div class="w-20 h-20 rounded-full bg-indigo-100 flex items-center justify-center">
34
+ <i data-feather="user" class="text-indigo-600 w-8 h-8"></i>
35
+ </div>
36
+ <button class="absolute bottom-0 right-0 bg-white rounded-full p-2 border border-gray-200 shadow-sm">
37
+ <i data-feather="edit-2" class="w-4 h-4 text-gray-600"></i>
38
+ </button>
39
+ </div>
40
+ <div>
41
+ <h3 class="text-xl font-medium">John Smith</h3>
42
+ <p class="text-gray-600">john@example.com</p>
43
+ <p class="text-gray-600 mt-1">Member since June 2022</p>
44
+ </div>
45
+ </div>
46
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
47
+ <div>
48
+ <label class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
49
+ <input type="text" value="John" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
50
+ </div>
51
+ <div>
52
+ <label class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
53
+ <input type="text" value="Smith" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
54
+ </div>
55
+ <div>
56
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
57
+ <input type="email" value="john@example.com" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
58
+ </div>
59
+ <div>
60
+ <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
61
+ <input type="tel" value="(555) 123-4567" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
62
+ </div>
63
+ </div>
64
+ <button class="mt-6 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
65
+ <i data-feather="save" class="mr-2"></i> Save Changes
66
+ </button>
67
+ </div>
68
+ </div>
69
+
70
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
71
+ <div class="px-6 py-4 border-b border-gray-100">
72
+ <h2 class="text-lg font-semibold">Security</h2>
73
+ </div>
74
+ <div class="p-6">
75
+ <div class="space-y-6">
76
+ <div>
77
+ <label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
78
+ <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
79
+ </div>
80
+ <div>
81
+ <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
82
+ <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
83
+ </div>
84
+ <div>
85
+ <label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
86
+ <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
87
+ </div>
88
+ </div>
89
+ <button class="mt-6 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
90
+ <i data-feather="lock" class="mr-2"></i> Update Password
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </main>
96
+ </div>
97
+
98
+ <custom-footer></custom-footer>
99
+ <script>feather.replace();</script>
100
+ <script src="script.js"></script>
101
+ </body>
102
+ </html>
settings.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Settings | InvoiceGenius AI</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="components/navbar.js"></script>
11
+ <script src="components/sidebar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ </head>
14
+ <body class="bg-gray-50 min-h-screen">
15
+ <custom-navbar></custom-navbar>
16
+ <div class="flex">
17
+ <custom-sidebar></custom-sidebar>
18
+
19
+ <main class="flex-1 p-8">
20
+ <div class="max-w-4xl mx-auto">
21
+ <div class="mb-8">
22
+ <h1 class="text-3xl font-bold text-gray-800">Settings</h1>
23
+ <p class="text-gray-600 mt-2">Manage your account and application preferences</p>
24
+ </div>
25
+
26
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-8">
27
+ <div class="px-6 py-4 border-b border-gray-100">
28
+ <h2 class="text-lg font-semibold">Account</h2>
29
+ </div>
30
+ <div class="p-6">
31
+ <div class="flex items-center space-x-4 mb-6">
32
+ <div class="relative">
33
+ <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center">
34
+ <i data-feather="user" class="text-indigo-600 w-6 h-6"></i>
35
+ </div>
36
+ <button class="absolute bottom-0 right-0 bg-white rounded-full p-1 border border-gray-200 shadow-sm">
37
+ <i data-feather="edit-2" class="w-3 h-3 text-gray-600"></i>
38
+ </button>
39
+ </div>
40
+ <div>
41
+ <h3 class="text-lg font-medium">John Smith</h3>
42
+ <p class="text-gray-600">john@example.com</p>
43
+ </div>
44
+ </div>
45
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
46
+ <div>
47
+ <label class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
48
+ <input type="text" value="John" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
49
+ </div>
50
+ <div>
51
+ <label class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
52
+ <input type="text" value="Smith" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
53
+ </div>
54
+ <div>
55
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
56
+ <input type="email" value="john@example.com" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
57
+ </div>
58
+ <div>
59
+ <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
60
+ <input type="tel" value="(555) 123-4567" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
61
+ </div>
62
+ </div>
63
+ <button class="mt-6 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
64
+ <i data-feather="save" class="mr-2"></i> Save Changes
65
+ </button>
66
+ </div>
67
+ </div>
68
+
69
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-8">
70
+ <div class="px-6 py-4 border-b border-gray-100">
71
+ <h2 class="text-lg font-semibold">Company Information</h2>
72
+ </div>
73
+ <div class="p-6">
74
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
75
+ <div>
76
+ <label class="block text-sm font-medium text-gray-700 mb-1">Company Name</label>
77
+ <input type="text" value="My Business Inc." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
78
+ </div>
79
+ <div>
80
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tax ID</label>
81
+ <input type="text" value="12-3456789" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
82
+ </div>
83
+ <div>
84
+ <label class="block text-sm font-medium text-gray-700 mb-1">Address</label>
85
+ <input type="text" value="123 Business St." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
86
+ </div>
87
+ <div>
88
+ <label class="block text-sm font-medium text-gray-700 mb-1">City</label>
89
+ <input type="text" value="New York" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
90
+ </div>
91
+ </div>
92
+ <button class="mt-6 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
93
+ <i data-feather="save" class="mr-2"></i> Save Company Details
94
+ </button>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
99
+ <div class="px-6 py-4 border-b border-gray-100">
100
+ <h2 class="text-lg font-semibold">Preferences</h2>
101
+ </div>
102
+ <div class="p-6">
103
+ <div class="space-y-4">
104
+ <div class="flex items-center justify-between">
105
+ <div>
106
+ <h3 class="text-sm font-medium text-gray-700">Dark Mode</h3>
107
+ <p class="text-sm text-gray-500">Switch between light and dark theme</p>
108
+ </div>
109
+ <button id="darkModeToggle" class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200">
110
+ <span class="sr-only">Dark Mode</span>
111
+ <span class="inline-block h-4 w-4 transform rounded-full bg-white translate-x-1"></span>
112
+ </button>
113
+ </div>
114
+ <div class="flex items-center justify-between">
115
+ <div>
116
+ <h3 class="text-sm font-medium text-gray-700">Email Notifications</h3>
117
+ <p class="text-sm text-gray-500">Receive email alerts for invoices</p>
118
+ </div>
119
+ <label class="relative inline-flex items-center cursor-pointer">
120
+ <input type="checkbox" checked class="sr-only peer">
121
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-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-indigo-600"></div>
122
+ </label>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </main>
129
+ </div>
130
+
131
+ <custom-footer></custom-footer>
132
+ <script>feather.replace();</script>
133
+ <script src="script.js"></script>
134
+ </body>
135
+ </html>