Hugging Face's logo

Spaces:
ramisn
/
electioncampaign
Running

App Files Community
ramisn commited on
Commit
f6cc3fc
·
verified ·
1 Parent(s): bad9ae0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1262 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Electioncampaign
3
- emoji: ⚡
4
- colorFrom: indigo
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: electioncampaign
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1262 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>CampaignPro - Election Campaign Management</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ 50: '#f0f9ff',
16
+ 100: '#e0f2fe',
17
+ 200: '#bae6fd',
18
+ 300: '#7dd3fc',
19
+ 400: '#38bdf8',
20
+ 500: '#0ea5e9',
21
+ 600: '#0284c7',
22
+ 700: '#0369a1',
23
+ 800: '#075985',
24
+ 900: '#0c4a6e',
25
+ },
26
+ secondary: {
27
+ 50: '#f8fafc',
28
+ 100: '#f1f5f9',
29
+ 200: '#e2e8f0',
30
+ 300: '#cbd5e1',
31
+ 400: '#94a3b8',
32
+ 500: '#64748b',
33
+ 600: '#475569',
34
+ 700: '#334155',
35
+ 800: '#1e293b',
36
+ 900: '#0f172a',
37
+ },
38
+ success: {
39
+ 50: '#f0fdf4',
40
+ 100: '#dcfce7',
41
+ 200: '#bbf7d0',
42
+ 300: '#86efac',
43
+ 400: '#4ade80',
44
+ 500: '#22c55e',
45
+ 600: '#16a34a',
46
+ 700: '#15803d',
47
+ 800: '#166534',
48
+ 900: '#14532d',
49
+ },
50
+ warning: {
51
+ 50: '#fffbeb',
52
+ 100: '#fef3c7',
53
+ 200: '#fde68a',
54
+ 300: '#fcd34d',
55
+ 400: '#fbbf24',
56
+ 500: '#f59e0b',
57
+ 600: '#d97706',
58
+ 700: '#b45309',
59
+ 800: '#92400e',
60
+ 900: '#78350f',
61
+ },
62
+ danger: {
63
+ 50: '#fef2f2',
64
+ 100: '#fee2e2',
65
+ 200: '#fecaca',
66
+ 300: '#fca5a5',
67
+ 400: '#f87171',
68
+ 500: '#ef4444',
69
+ 600: '#dc2626',
70
+ 700: '#b91c1c',
71
+ 800: '#991b1b',
72
+ 900: '#7f1d1d',
73
+ },
74
+ },
75
+ fontFamily: {
76
+ sans: ['Inter', 'ui-sans-serif', 'system-ui'],
77
+ },
78
+ }
79
+ }
80
+ }
81
+ </script>
82
+ <style>
83
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
84
+
85
+ body {
86
+ font-family: 'Inter', sans-serif;
87
+ background-color: #f8fafc;
88
+ }
89
+
90
+ .sidebar {
91
+ transition: all 0.3s ease;
92
+ }
93
+
94
+ .sidebar.collapsed {
95
+ width: 80px;
96
+ }
97
+
98
+ .sidebar.collapsed .sidebar-text {
99
+ display: none;
100
+ }
101
+
102
+ .sidebar.collapsed .logo-text {
103
+ display: none;
104
+ }
105
+
106
+ .sidebar.collapsed .logo-icon {
107
+ display: block;
108
+ }
109
+
110
+ .sidebar:not(.collapsed) .logo-icon {
111
+ display: none;
112
+ }
113
+
114
+ .content-area {
115
+ transition: all 0.3s ease;
116
+ }
117
+
118
+ .content-area.expanded {
119
+ margin-left: 80px;
120
+ }
121
+
122
+ .dropdown:hover .dropdown-menu {
123
+ display: block;
124
+ }
125
+
126
+ .custom-file-input::-webkit-file-upload-button {
127
+ visibility: hidden;
128
+ }
129
+
130
+ .custom-file-input::before {
131
+ content: 'Choose file';
132
+ display: inline-block;
133
+ background: linear-gradient(to bottom, #f9f9f9, #e3e3e3);
134
+ border: 1px solid #999;
135
+ border-radius: 3px;
136
+ padding: 5px 8px;
137
+ outline: none;
138
+ white-space: nowrap;
139
+ cursor: pointer;
140
+ text-shadow: 1px 1px #fff;
141
+ font-weight: 700;
142
+ font-size: 10pt;
143
+ }
144
+
145
+ .custom-file-input:hover::before {
146
+ border-color: black;
147
+ }
148
+
149
+ .custom-file-input:active::before {
150
+ background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
151
+ }
152
+
153
+ .animate-pulse {
154
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
155
+ }
156
+
157
+ @keyframes pulse {
158
+ 0%, 100% {
159
+ opacity: 1;
160
+ }
161
+ 50% {
162
+ opacity: 0.5;
163
+ }
164
+ }
165
+
166
+ .voter-card:hover {
167
+ transform: translateY(-5px);
168
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
169
+ }
170
+
171
+ .campaign-card:hover {
172
+ transform: scale(1.02);
173
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
174
+ }
175
+
176
+ .tab-content {
177
+ display: none;
178
+ }
179
+
180
+ .tab-content.active {
181
+ display: block;
182
+ }
183
+
184
+ .tab-button.active {
185
+ border-bottom: 3px solid #0ea5e9;
186
+ color: #0ea5e9;
187
+ }
188
+ </style>
189
+ </head>
190
+ <body class="bg-gray-50">
191
+ <!-- Main Container -->
192
+ <div class="flex h-screen overflow-hidden">
193
+ <!-- Sidebar -->
194
+ <div class="sidebar bg-white text-gray-800 w-64 shadow-lg flex flex-col">
195
+ <!-- Logo -->
196
+ <div class="p-4 flex items-center justify-between border-b border-gray-200">
197
+ <div class="flex items-center space-x-3">
198
+ <div class="bg-primary-500 text-white p-2 rounded-lg">
199
+ <i class="fas fa-vote-yea text-xl"></i>
200
+ </div>
201
+ <span class="logo-text text-xl font-bold text-primary-700">CampaignPro</span>
202
+ <span class="logo-icon text-xl font-bold text-primary-700">
203
+ <i class="fas fa-vote-yea"></i>
204
+ </span>
205
+ </div>
206
+ <button id="toggleSidebar" class="text-gray-500 hover:text-gray-700">
207
+ <i class="fas fa-bars"></i>
208
+ </button>
209
+ </div>
210
+
211
+ <!-- User Profile -->
212
+ <div class="p-4 border-b border-gray-200 flex items-center space-x-3">
213
+ <div class="relative">
214
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full">
215
+ <span class="absolute bottom-0 right-0 w-3 h-3 bg-success-500 rounded-full border-2 border-white"></span>
216
+ </div>
217
+ <div class="sidebar-text">
218
+ <p class="font-medium">John Doe</p>
219
+ <p class="text-xs text-gray-500">Campaign Manager</p>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Navigation -->
224
+ <nav class="flex-1 overflow-y-auto">
225
+ <ul class="p-2 space-y-1">
226
+ <li>
227
+ <a href="#" class="flex items-center p-3 rounded-lg text-primary-700 bg-primary-50">
228
+ <i class="fas fa-tachometer-alt mr-3"></i>
229
+ <span class="sidebar-text">Dashboard</span>
230
+ </a>
231
+ </li>
232
+ <li>
233
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100">
234
+ <i class="fas fa-users mr-3"></i>
235
+ <span class="sidebar-text">Voter Management</span>
236
+ </a>
237
+ </li>
238
+ <li>
239
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100">
240
+ <i class="fas fa-bullhorn mr-3"></i>
241
+ <span class="sidebar-text">Campaign Content</span>
242
+ </a>
243
+ </li>
244
+ <li>
245
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100">
246
+ <i class="fas fa-paper-plane mr-3"></i>
247
+ <span class="sidebar-text">Message Distribution</span>
248
+ </a>
249
+ </li>
250
+ <li>
251
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100">
252
+ <i class="fas fa-chart-line mr-3"></i>
253
+ <span class="sidebar-text">Analytics</span>
254
+ </a>
255
+ </li>
256
+ <li>
257
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100">
258
+ <i class="fas fa-cog mr-3"></i>
259
+ <span class="sidebar-text">Settings</span>
260
+ </a>
261
+ </li>
262
+ </ul>
263
+
264
+ <!-- Team Section -->
265
+ <div class="p-4 border-t border-gray-200 sidebar-text">
266
+ <p class="text-xs font-semibold text-gray-500 uppercase mb-2">Your Team</p>
267
+ <div class="space-y-2">
268
+ <div class="flex items-center space-x-2">
269
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team member" class="w-6 h-6 rounded-full">
270
+ <span>Sarah Johnson</span>
271
+ </div>
272
+ <div class="flex items-center space-x-2">
273
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Team member" class="w-6 h-6 rounded-full">
274
+ <span>Michael Chen</span>
275
+ </div>
276
+ <div class="flex items-center space-x-2">
277
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Team member" class="w-6 h-6 rounded-full">
278
+ <span>Emma Wilson</span>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </nav>
283
+
284
+ <!-- Logout -->
285
+ <div class="p-4 border-t border-gray-200">
286
+ <a href="#" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100">
287
+ <i class="fas fa-sign-out-alt mr-3"></i>
288
+ <span class="sidebar-text">Logout</span>
289
+ </a>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Main Content -->
294
+ <div class="content-area flex-1 overflow-y-auto">
295
+ <!-- Top Navigation -->
296
+ <header class="bg-white shadow-sm">
297
+ <div class="px-6 py-4 flex items-center justify-between">
298
+ <div class="flex items-center space-x-4">
299
+ <h1 class="text-xl font-semibold text-gray-800">Voter Management</h1>
300
+ <div class="relative">
301
+ <input type="text" placeholder="Search voters..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
302
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
303
+ </div>
304
+ </div>
305
+ <div class="flex items-center space-x-4">
306
+ <button class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100">
307
+ <i class="fas fa-bell"></i>
308
+ <span class="sr-only">Notifications</span>
309
+ </button>
310
+ <div class="dropdown relative">
311
+ <button class="flex items-center space-x-2 focus:outline-none">
312
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full">
313
+ <span class="hidden md:inline">John Doe</span>
314
+ <i class="fas fa-chevron-down text-xs"></i>
315
+ </button>
316
+ <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden">
317
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
318
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
319
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </header>
325
+
326
+ <!-- Main Content Area -->
327
+ <main class="p-6">
328
+ <!-- Stats Cards -->
329
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
330
+ <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
331
+ <div class="flex items-center justify-between">
332
+ <div>
333
+ <p class="text-sm font-medium text-gray-500">Total Voters</p>
334
+ <p class="text-2xl font-bold mt-1">12,458</p>
335
+ <p class="text-xs text-success-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 5.2% from last week</p>
336
+ </div>
337
+ <div class="bg-primary-100 p-3 rounded-lg">
338
+ <i class="fas fa-users text-primary-600 text-xl"></i>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
343
+ <div class="flex items-center justify-between">
344
+ <div>
345
+ <p class="text-sm font-medium text-gray-500">Messages Sent</p>
346
+ <p class="text-2xl font-bold mt-1">8,742</p>
347
+ <p class="text-xs text-success-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 12.7% from last week</p>
348
+ </div>
349
+ <div class="bg-success-100 p-3 rounded-lg">
350
+ <i class="fas fa-paper-plane text-success-600 text-xl"></i>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
355
+ <div class="flex items-center justify-between">
356
+ <div>
357
+ <p class="text-sm font-medium text-gray-500">Response Rate</p>
358
+ <p class="text-2xl font-bold mt-1">42%</p>
359
+ <p class="text-xs text-danger-500 mt-1"><i class="fas fa-arrow-down mr-1"></i> 3.1% from last week</p>
360
+ </div>
361
+ <div class="bg-warning-100 p-3 rounded-lg">
362
+ <i class="fas fa-chart-pie text-warning-600 text-xl"></i>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
367
+ <div class="flex items-center justify-between">
368
+ <div>
369
+ <p class="text-sm font-medium text-gray-500">Campaign Materials</p>
370
+ <p class="text-2xl font-bold mt-1">156</p>
371
+ <p class="text-xs text-success-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 24 new this week</p>
372
+ </div>
373
+ <div class="bg-secondary-100 p-3 rounded-lg">
374
+ <i class="fas fa-bullhorn text-secondary-600 text-xl"></i>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- Tabs -->
381
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 mb-6">
382
+ <div class="border-b border-gray-200">
383
+ <div class="flex space-x-8 px-6">
384
+ <button class="tab-button py-4 font-medium text-gray-500 hover:text-primary-700 active" data-tab="voters">
385
+ <i class="fas fa-users mr-2"></i>
386
+ <span>Voter Database</span>
387
+ </button>
388
+ <button class="tab-button py-4 font-medium text-gray-500 hover:text-primary-700" data-tab="upload">
389
+ <i class="fas fa-upload mr-2"></i>
390
+ <span>Upload Voters</span>
391
+ </button>
392
+ <button class="tab-button py-4 font-medium text-gray-500 hover:text-primary-700" data-tab="campaign">
393
+ <i class="fas fa-bullhorn mr-2"></i>
394
+ <span>Campaign Content</span>
395
+ </button>
396
+ <button class="tab-button py-4 font-medium text-gray-500 hover:text-primary-700" data-tab="send">
397
+ <i class="fas fa-paper-plane mr-2"></i>
398
+ <span>Send Messages</span>
399
+ </button>
400
+ </div>
401
+ </div>
402
+
403
+ <!-- Tab Contents -->
404
+ <div class="p-6">
405
+ <!-- Voter Database Tab -->
406
+ <div id="voters" class="tab-content active">
407
+ <div class="flex justify-between items-center mb-6">
408
+ <h2 class="text-lg font-semibold text-gray-800">Voter Database</h2>
409
+ <div class="flex space-x-3">
410
+ <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 flex items-center">
411
+ <i class="fas fa-filter mr-2"></i>
412
+ <span>Filter</span>
413
+ </button>
414
+ <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
415
+ <i class="fas fa-download mr-2"></i>
416
+ <span>Export</span>
417
+ </button>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- Filters -->
422
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
423
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
424
+ <div>
425
+ <label class="block text-sm font-medium text-gray-700 mb-1">Constituency</label>
426
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
427
+ <option>All Constituencies</option>
428
+ <option>North District</option>
429
+ <option>South District</option>
430
+ <option>East District</option>
431
+ <option>West District</option>
432
+ </select>
433
+ </div>
434
+ <div>
435
+ <label class="block text-sm font-medium text-gray-700 mb-1">Village</label>
436
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
437
+ <option>All Villages</option>
438
+ <option>Green Valley</option>
439
+ <option>Sunny Hills</option>
440
+ <option>River Side</option>
441
+ <option>Mountain View</option>
442
+ </select>
443
+ </div>
444
+ <div>
445
+ <label class="block text-sm font-medium text-gray-700 mb-1">Age Group</label>
446
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
447
+ <option>All Ages</option>
448
+ <option>18-25</option>
449
+ <option>26-35</option>
450
+ <option>36-45</option>
451
+ <option>46+</option>
452
+ </select>
453
+ </div>
454
+ <div>
455
+ <label class="block text-sm font-medium text-gray-700 mb-1">Gender</label>
456
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
457
+ <option>All Genders</option>
458
+ <option>Male</option>
459
+ <option>Female</option>
460
+ <option>Other</option>
461
+ </select>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- Voter Table -->
467
+ <div class="overflow-x-auto">
468
+ <table class="min-w-full divide-y divide-gray-200">
469
+ <thead class="bg-gray-50">
470
+ <tr>
471
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
472
+ <input type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
473
+ </th>
474
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
475
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mobile</th>
476
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Constituency</th>
477
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Village</th>
478
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Age</th>
479
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
480
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
481
+ </tr>
482
+ </thead>
483
+ <tbody class="bg-white divide-y divide-gray-200">
484
+ <tr class="hover:bg-gray-50">
485
+ <td class="px-6 py-4 whitespace-nowrap">
486
+ <input type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
487
+ </td>
488
+ <td class="px-6 py-4 whitespace-nowrap">
489
+ <div class="flex items-center">
490
+ <div class="flex-shrink-0 h-10 w-10">
491
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
492
+ </div>
493
+ <div class="ml-4">
494
+ <div class="text-sm font-medium text-gray-900">John Smith</div>
495
+ <div class="text-sm text-gray-500">Voter ID: V123456</div>
496
+ </div>
497
+ </div>
498
+ </td>
499
+ <td class="px-6 py-4 whitespace-nowrap">
500
+ <div class="text-sm text-gray-900">+91 9876543210</div>
501
+ </td>
502
+ <td class="px-6 py-4 whitespace-nowrap">
503
+ <div class="text-sm text-gray-900">North District</div>
504
+ </td>
505
+ <td class="px-6 py-4 whitespace-nowrap">
506
+ <div class="text-sm text-gray-900">Green Valley</div>
507
+ </td>
508
+ <td class="px-6 py-4 whitespace-nowrap">
509
+ <div class="text-sm text-gray-900">32</div>
510
+ </td>
511
+ <td class="px-6 py-4 whitespace-nowrap">
512
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success-100 text-success-800">
513
+ Active
514
+ </span>
515
+ </td>
516
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
517
+ <button class="text-primary-600 hover:text-primary-900 mr-3"><i class="fas fa-eye"></i></button>
518
+ <button class="text-warning-600 hover:text-warning-900 mr-3"><i class="fas fa-edit"></i></button>
519
+ <button class="text-danger-600 hover:text-danger-900"><i class="fas fa-trash"></i></button>
520
+ </td>
521
+ </tr>
522
+ <tr class="hover:bg-gray-50">
523
+ <td class="px-6 py-4 whitespace-nowrap">
524
+ <input type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
525
+ </td>
526
+ <td class="px-6 py-4 whitespace-nowrap">
527
+ <div class="flex items-center">
528
+ <div class="flex-shrink-0 h-10 w-10">
529
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
530
+ </div>
531
+ <div class="ml-4">
532
+ <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
533
+ <div class="text-sm text-gray-500">Voter ID: V123457</div>
534
+ </div>
535
+ </div>
536
+ </td>
537
+ <td class="px-6 py-4 whitespace-nowrap">
538
+ <div class="text-sm text-gray-900">+91 9876543211</div>
539
+ </td>
540
+ <td class="px-6 py-4 whitespace-nowrap">
541
+ <div class="text-sm text-gray-900">South District</div>
542
+ </td>
543
+ <td class="px-6 py-4 whitespace-nowrap">
544
+ <div class="text-sm text-gray-900">Sunny Hills</div>
545
+ </td>
546
+ <td class="px-6 py-4 whitespace-nowrap">
547
+ <div class="text-sm text-gray-900">28</div>
548
+ </td>
549
+ <td class="px-6 py-4 whitespace-nowrap">
550
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success-100 text-success-800">
551
+ Active
552
+ </span>
553
+ </td>
554
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
555
+ <button class="text-primary-600 hover:text-primary-900 mr-3"><i class="fas fa-eye"></i></button>
556
+ <button class="text-warning-600 hover:text-warning-900 mr-3"><i class="fas fa-edit"></i></button>
557
+ <button class="text-danger-600 hover:text-danger-900"><i class="fas fa-trash"></i></button>
558
+ </td>
559
+ </tr>
560
+ <tr class="hover:bg-gray-50">
561
+ <td class="px-6 py-4 whitespace-nowrap">
562
+ <input type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
563
+ </td>
564
+ <td class="px-6 py-4 whitespace-nowrap">
565
+ <div class="flex items-center">
566
+ <div class="flex-shrink-0 h-10 w-10">
567
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
568
+ </div>
569
+ <div class="ml-4">
570
+ <div class="text-sm font-medium text-gray-900">Michael Brown</div>
571
+ <div class="text-sm text-gray-500">Voter ID: V123458</div>
572
+ </div>
573
+ </div>
574
+ </td>
575
+ <td class="px-6 py-4 whitespace-nowrap">
576
+ <div class="text-sm text-gray-900">+91 9876543212</div>
577
+ </td>
578
+ <td class="px-6 py-4 whitespace-nowrap">
579
+ <div class="text-sm text-gray-900">East District</div>
580
+ </td>
581
+ <td class="px-6 py-4 whitespace-nowrap">
582
+ <div class="text-sm text-gray-900">River Side</div>
583
+ </td>
584
+ <td class="px-6 py-4 whitespace-nowrap">
585
+ <div class="text-sm text-gray-900">45</div>
586
+ </td>
587
+ <td class="px-6 py-4 whitespace-nowrap">
588
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning-100 text-warning-800">
589
+ Undecided
590
+ </span>
591
+ </td>
592
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
593
+ <button class="text-primary-600 hover:text-primary-900 mr-3"><i class="fas fa-eye"></i></button>
594
+ <button class="text-warning-600 hover:text-warning-900 mr-3"><i class="fas fa-edit"></i></button>
595
+ <button class="text-danger-600 hover:text-danger-900"><i class="fas fa-trash"></i></button>
596
+ </td>
597
+ </tr>
598
+ <tr class="hover:bg-gray-50">
599
+ <td class="px-6 py-4 whitespace-nowrap">
600
+ <input type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
601
+ </td>
602
+ <td class="px-6 py-4 whitespace-nowrap">
603
+ <div class="flex items-center">
604
+ <div class="flex-shrink-0 h-10 w-10">
605
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/4.jpg" alt="">
606
+ </div>
607
+ <div class="ml-4">
608
+ <div class="text-sm font-medium text-gray-900">Emily Davis</div>
609
+ <div class="text-sm text-gray-500">Voter ID: V123459</div>
610
+ </div>
611
+ </div>
612
+ </td>
613
+ <td class="px-6 py-4 whitespace-nowrap">
614
+ <div class="text-sm text-gray-900">+91 9876543213</div>
615
+ </td>
616
+ <td class="px-6 py-4 whitespace-nowrap">
617
+ <div class="text-sm text-gray-900">West District</div>
618
+ </td>
619
+ <td class="px-6 py-4 whitespace-nowrap">
620
+ <div class="text-sm text-gray-900">Mountain View</div>
621
+ </td>
622
+ <td class="px-6 py-4 whitespace-nowrap">
623
+ <div class="text-sm text-gray-900">38</div>
624
+ </td>
625
+ <td class="px-6 py-4 whitespace-nowrap">
626
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-danger-100 text-danger-800">
627
+ Opposed
628
+ </span>
629
+ </td>
630
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
631
+ <button class="text-primary-600 hover:text-primary-900 mr-3"><i class="fas fa-eye"></i></button>
632
+ <button class="text-warning-600 hover:text-warning-900 mr-3"><i class="fas fa-edit"></i></button>
633
+ <button class="text-danger-600 hover:text-danger-900"><i class="fas fa-trash"></i></button>
634
+ </td>
635
+ </tr>
636
+ <tr class="hover:bg-gray-50">
637
+ <td class="px-6 py-4 whitespace-nowrap">
638
+ <input type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
639
+ </td>
640
+ <td class="px-6 py-4 whitespace-nowrap">
641
+ <div class="flex items-center">
642
+ <div class="flex-shrink-0 h-10 w-10">
643
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/5.jpg" alt="">
644
+ </div>
645
+ <div class="ml-4">
646
+ <div class="text-sm font-medium text-gray-900">Robert Wilson</div>
647
+ <div class="text-sm text-gray-500">Voter ID: V123460</div>
648
+ </div>
649
+ </div>
650
+ </td>
651
+ <td class="px-6 py-4 whitespace-nowrap">
652
+ <div class="text-sm text-gray-900">+91 9876543214</div>
653
+ </td>
654
+ <td class="px-6 py-4 whitespace-nowrap">
655
+ <div class="text-sm text-gray-900">North District</div>
656
+ </td>
657
+ <td class="px-6 py-4 whitespace-nowrap">
658
+ <div class="text-sm text-gray-900">Green Valley</div>
659
+ </td>
660
+ <td class="px-6 py-4 whitespace-nowrap">
661
+ <div class="text-sm text-gray-900">52</div>
662
+ </td>
663
+ <td class="px-6 py-4 whitespace-nowrap">
664
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success-100 text-success-800">
665
+ Active
666
+ </span>
667
+ </td>
668
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
669
+ <button class="text-primary-600 hover:text-primary-900 mr-3"><i class="fas fa-eye"></i></button>
670
+ <button class="text-warning-600 hover:text-warning-900 mr-3"><i class="fas fa-edit"></i></button>
671
+ <button class="text-danger-600 hover:text-danger-900"><i class="fas fa-trash"></i></button>
672
+ </td>
673
+ </tr>
674
+ </tbody>
675
+ </table>
676
+ </div>
677
+
678
+ <!-- Pagination -->
679
+ <div class="flex items-center justify-between mt-4">
680
+ <div>
681
+ <p class="text-sm text-gray-700">
682
+ Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12,458</span> voters
683
+ </p>
684
+ </div>
685
+ <div class="flex space-x-2">
686
+ <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">
687
+ Previous
688
+ </button>
689
+ <button class="px-3 py-1 border border-primary-500 rounded-md text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">
690
+ 1
691
+ </button>
692
+ <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">
693
+ 2
694
+ </button>
695
+ <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">
696
+ 3
697
+ </button>
698
+ <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">
699
+ Next
700
+ </button>
701
+ </div>
702
+ </div>
703
+ </div>
704
+
705
+ <!-- Upload Voters Tab -->
706
+ <div id="upload" class="tab-content">
707
+ <div class="flex justify-between items-center mb-6">
708
+ <h2 class="text-lg font-semibold text-gray-800">Upload Voter Data</h2>
709
+ </div>
710
+
711
+ <div class="bg-white border border-dashed border-gray-300 rounded-xl p-8 text-center mb-6">
712
+ <div class="mx-auto max-w-md">
713
+ <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
714
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
715
+ </svg>
716
+ <h3 class="mt-2 text-sm font-medium text-gray-900">Upload a file</h3>
717
+ <p class="mt-1 text-sm text-gray-500">CSV or Excel files only</p>
718
+ <div class="mt-6">
719
+ <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-primary-600 hover:text-primary-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary-500">
720
+ <span>Select a file</span>
721
+ <input id="file-upload" name="file-upload" type="file" class="sr-only" accept=".csv, .xlsx, .xls">
722
+ </label>
723
+ <p class="pl-1">or drag and drop</p>
724
+ </div>
725
+ <p class="mt-1 text-xs text-gray-500">CSV template: Name, Mobile, Constituency, Village, Age, Gender</p>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="bg-gray-50 p-4 rounded-lg">
730
+ <h3 class="text-sm font-medium text-gray-700 mb-3">Upload History</h3>
731
+ <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
732
+ <table class="min-w-full divide-y divide-gray-300">
733
+ <thead class="bg-gray-100">
734
+ <tr>
735
+ <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">File Name</th>
736
+ <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
737
+ <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Records</th>
738
+ <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Date</th>
739
+ <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Actions</th>
740
+ </tr>
741
+ </thead>
742
+ <tbody class="divide-y divide-gray-200 bg-white">
743
+ <tr>
744
+ <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900">voters_2023_06_15.csv</td>
745
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
746
+ <span class="inline-flex items-center rounded-full bg-success-100 px-2.5 py-0.5 text-xs font-medium text-success-800">
747
+ Completed
748
+ </span>
749
+ </td>
750
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">1,245</td>
751
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">June 15, 2023</td>
752
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
753
+ <button class="text-primary-600 hover:text-primary-900">View</button>
754
+ </td>
755
+ </tr>
756
+ <tr>
757
+ <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900">north_district.xlsx</td>
758
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
759
+ <span class="inline-flex items-center rounded-full bg-success-100 px-2.5 py-0.5 text-xs font-medium text-success-800">
760
+ Completed
761
+ </span>
762
+ </td>
763
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">856</td>
764
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">June 10, 2023</td>
765
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
766
+ <button class="text-primary-600 hover:text-primary-900">View</button>
767
+ </td>
768
+ </tr>
769
+ <tr>
770
+ <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900">voter_update_2023.csv</td>
771
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
772
+ <span class="inline-flex items-center rounded-full bg-danger-100 px-2.5 py-0.5 text-xs font-medium text-danger-800">
773
+ Failed
774
+ </span>
775
+ </td>
776
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">-</td>
777
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">June 5, 2023</td>
778
+ <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
779
+ <button class="text-primary-600 hover:text-primary-900">Retry</button>
780
+ </td>
781
+ </tr>
782
+ </tbody>
783
+ </table>
784
+ </div>
785
+ </div>
786
+ </div>
787
+
788
+ <!-- Campaign Content Tab -->
789
+ <div id="campaign" class="tab-content">
790
+ <div class="flex justify-between items-center mb-6">
791
+ <h2 class="text-lg font-semibold text-gray-800">Campaign Content</h2>
792
+ <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 flex items-center">
793
+ <i class="fas fa-plus mr-2"></i>
794
+ <span>Add Content</span>
795
+ </button>
796
+ </div>
797
+
798
+ <!-- Content Type Tabs -->
799
+ <div class="border-b border-gray-200 mb-6">
800
+ <div class="flex space-x-8">
801
+ <button class="content-type-tab py-2 font-medium text-gray-500 hover:text-primary-700 active" data-content-type="all">
802
+ <span>All Content</span>
803
+ </button>
804
+ <button class="content-type-tab py-2 font-medium text-gray-500 hover:text-primary-700" data-content-type="images">
805
+ <span>Images</span>
806
+ </button>
807
+ <button class="content-type-tab py-2 font-medium text-gray-500 hover:text-primary-700" data-content-type="videos">
808
+ <span>Videos</span>
809
+ </button>
810
+ <button class="content-type-tab py-2 font-medium text-gray-500 hover:text-primary-700" data-content-type="gifs">
811
+ <span>GIFs</span>
812
+ </button>
813
+ </div>
814
+ </div>
815
+
816
+ <!-- Campaign Content Grid -->
817
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
818
+ <!-- Campaign Card 1 -->
819
+ <div class="campaign-card bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition duration-300">
820
+ <div class="relative pb-2/3 h-48">
821
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Campaign poster">
822
+ </div>
823
+ <div class="p-4">
824
+ <div class="flex justify-between items-start">
825
+ <div>
826
+ <h3 class="font-medium text-gray-900">Election Rally Poster</h3>
827
+ <p class="text-sm text-gray-500">June 15, 2023</p>
828
+ </div>
829
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">
830
+ Image
831
+ </span>
832
+ </div>
833
+ <div class="mt-4 flex justify-between">
834
+ <span class="text-sm text-gray-500">Used: 245 times</span>
835
+ <div class="flex space-x-2">
836
+ <button class="text-gray-400 hover:text-gray-600">
837
+ <i class="fas fa-share-alt"></i>
838
+ </button>
839
+ <button class="text-gray-400 hover:text-gray-600">
840
+ <i class="fas fa-ellipsis-v"></i>
841
+ </button>
842
+ </div>
843
+ </div>
844
+ </div>
845
+ </div>
846
+
847
+ <!-- Campaign Card 2 -->
848
+ <div class="campaign-card bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition duration-300">
849
+ <div class="relative pb-2/3 h-48">
850
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Campaign video thumbnail">
851
+ <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30">
852
+ <div class="w-12 h-12 bg-white bg-opacity-80 rounded-full flex items-center justify-center">
853
+ <i class="fas fa-play text-primary-600"></i>
854
+ </div>
855
+ </div>
856
+ </div>
857
+ <div class="p-4">
858
+ <div class="flex justify-between items-start">
859
+ <div>
860
+ <h3 class="font-medium text-gray-900">Campaign Speech</h3>
861
+ <p class="text-sm text-gray-500">June 10, 2023</p>
862
+ </div>
863
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-warning-100 text-warning-800">
864
+ Video
865
+ </span>
866
+ </div>
867
+ <div class="mt-4 flex justify-between">
868
+ <span class="text-sm text-gray-500">Used: 178 times</span>
869
+ <div class="flex space-x-2">
870
+ <button class="text-gray-400 hover:text-gray-600">
871
+ <i class="fas fa-share-alt"></i>
872
+ </button>
873
+ <button class="text-gray-400 hover:text-gray-600">
874
+ <i class="fas fa-ellipsis-v"></i>
875
+ </button>
876
+ </div>
877
+ </div>
878
+ </div>
879
+ </div>
880
+
881
+ <!-- Campaign Card 3 -->
882
+ <div class="campaign-card bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition duration-300">
883
+ <div class="relative pb-2/3 h-48">
884
+ <img class="absolute h-full w-full object-cover" src="https://media.giphy.com/media/l0HU7JI1QdX7OSQDu/giphy.gif" alt="Campaign GIF">
885
+ </div>
886
+ <div class="p-4">
887
+ <div class="flex justify-between items-start">
888
+ <div>
889
+ <h3 class="font-medium text-gray-900">Vote Now GIF</h3>
890
+ <p class="text-sm text-gray-500">June 5, 2023</p>
891
+ </div>
892
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success-100 text-success-800">
893
+ GIF
894
+ </span>
895
+ </div>
896
+ <div class="mt-4 flex justify-between">
897
+ <span class="text-sm text-gray-500">Used: 312 times</span>
898
+ <div class="flex space-x-2">
899
+ <button class="text-gray-400 hover:text-gray-600">
900
+ <i class="fas fa-share-alt"></i>
901
+ </button>
902
+ <button class="text-gray-400 hover:text-gray-600">
903
+ <i class="fas fa-ellipsis-v"></i>
904
+ </button>
905
+ </div>
906
+ </div>
907
+ </div>
908
+ </div>
909
+
910
+ <!-- Campaign Card 4 -->
911
+ <div class="campaign-card bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition duration-300">
912
+ <div class="relative pb-2/3 h-48">
913
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Campaign poster">
914
+ </div>
915
+ <div class="p-4">
916
+ <div class="flex justify-between items-start">
917
+ <div>
918
+ <h3 class="font-medium text-gray-900">Policy Announcement</h3>
919
+ <p class="text-sm text-gray-500">May 28, 2023</p>
920
+ </div>
921
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">
922
+ Image
923
+ </span>
924
+ </div>
925
+ <div class="mt-4 flex justify-between">
926
+ <span class="text-sm text-gray-500">Used: 189 times</span>
927
+ <div class="flex space-x-2">
928
+ <button class="text-gray-400 hover:text-gray-600">
929
+ <i class="fas fa-share-alt"></i>
930
+ </button>
931
+ <button class="text-gray-400 hover:text-gray-600">
932
+ <i class="fas fa-ellipsis-v"></i>
933
+ </button>
934
+ </div>
935
+ </div>
936
+ </div>
937
+ </div>
938
+
939
+ <!-- Add New Card -->
940
+ <div class="bg-white rounded-xl shadow-sm border-2 border-dashed border-gray-300 flex flex-col items-center justify-center p-6 hover:border-primary-500 transition duration-300 cursor-pointer">
941
+ <div class="bg-primary-100 p-3 rounded-full mb-3">
942
+ <i class="fas fa-plus text-primary-600 text-xl"></i>
943
+ </div>
944
+ <h3 class="font-medium text-gray-900 mb-1">Add New Content</h3>
945
+ <p class="text-sm text-gray-500 text-center">Upload images, videos or GIFs for your campaign</p>
946
+ </div>
947
+ </div>
948
+ </div>
949
+
950
+ <!-- Send Messages Tab -->
951
+ <div id="send" class="tab-content">
952
+ <div class="flex justify-between items-center mb-6">
953
+ <h2 class="text-lg font-semibold text-gray-800">Send Campaign Messages</h2>
954
+ </div>
955
+
956
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
957
+ <!-- Step 1: Select Voters -->
958
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
959
+ <div class="flex items-center mb-4">
960
+ <div class="bg-primary-100 text-primary-800 w-8 h-8 rounded-full flex items-center justify-center mr-3">
961
+ 1
962
+ </div>
963
+ <h3 class="font-medium text-gray-900">Select Voters</h3>
964
+ </div>
965
+
966
+ <div class="space-y-4">
967
+ <div>
968
+ <label class="block text-sm font-medium text-gray-700 mb-1">Constituency</label>
969
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
970
+ <option>All Constituencies</option>
971
+ <option>North District</option>
972
+ <option>South District</option>
973
+ <option>East District</option>
974
+ <option>West District</option>
975
+ </select>
976
+ </div>
977
+
978
+ <div>
979
+ <label class="block text-sm font-medium text-gray-700 mb-1">Village</label>
980
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
981
+ <option>All Villages</option>
982
+ <option>Green Valley</option>
983
+ <option>Sunny Hills</option>
984
+ <option>River Side</option>
985
+ <option>Mountain View</option>
986
+ </select>
987
+ </div>
988
+
989
+ <div>
990
+ <label class="block text-sm font-medium text-gray-700 mb-1">Age Group</label>
991
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
992
+ <option>All Ages</option>
993
+ <option>18-25</option>
994
+ <option>26-35</option>
995
+ <option>36-45</option>
996
+ <option>46+</option>
997
+ </select>
998
+ </div>
999
+
1000
+ <div>
1001
+ <label class="block text-sm font-medium text-gray-700 mb-1">Gender</label>
1002
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
1003
+ <option>All Genders</option>
1004
+ <option>Male</option>
1005
+ <option>Female</option>
1006
+ <option>Other</option>
1007
+ </select>
1008
+ </div>
1009
+
1010
+ <div class="pt-2">
1011
+ <button class="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 flex items-center justify-center">
1012
+ <i class="fas fa-filter mr-2"></i>
1013
+ <span>Apply Filters</span>
1014
+ </button>
1015
+ </div>
1016
+ </div>
1017
+ </div>
1018
+
1019
+ <!-- Step 2: Select Content -->
1020
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
1021
+ <div class="flex items-center mb-4">
1022
+ <div class="bg-primary-100 text-primary-800 w-8 h-8 rounded-full flex items-center justify-center mr-3">
1023
+ 2
1024
+ </div>
1025
+ <h3 class="font-medium text-gray-900">Select Content</h3>
1026
+ </div>
1027
+
1028
+ <div class="space-y-4">
1029
+ <div class="border border-gray-200 rounded-lg p-3">
1030
+ <div class="flex items-center space-x-3 mb-3">
1031
+ <div class="flex-shrink-0">
1032
+ <img class="h-10 w-10 rounded-md" src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" alt="">
1033
+ </div>
1034
+ <div class="flex-1 min-w-0">
1035
+ <p class="text-sm font-medium text-gray-900 truncate">Election Rally Poster</p>
1036
+ <p class="text-sm text-gray-500 truncate">Image</p>
1037
+ </div>
1038
+ <div>
1039
+ <input type="radio" name="content" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300">
1040
+ </div>
1041
+ </div>
1042
+ </div>
1043
+
1044
+ <div class="border border-gray-200 rounded-lg p-3">
1045
+ <div class="flex items-center space-x-3 mb-3">
1046
+ <div class="flex-shrink-0 relative">
1047
+ <img class="h-10 w-10 rounded-md" src="https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" alt="">
1048
+ <div class="absolute inset-0 flex items-center justify-center">
1049
+ <i class="fas fa-play text-white text-xs"></i>
1050
+ </div>
1051
+ </div>
1052
+ <div class="flex-1 min-w-0">
1053
+ <p class="text-sm font-medium text-gray-900 truncate">Campaign Speech</p>
1054
+ <p class="text-sm text-gray-500 truncate">Video</p>
1055
+ </div>
1056
+ <div>
1057
+ <input type="radio" name="content" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300">
1058
+ </div>
1059
+ </div>
1060
+ </div>
1061
+
1062
+ <div class="border border-gray-200 rounded-lg p-3">
1063
+ <div class="flex items-center space-x-3 mb-3">
1064
+ <div class="flex-shrink-0">
1065
+ <img class="h-10 w-10 rounded-md" src="https://media.giphy.com/media/l0HU7JI1QdX7OSQDu/giphy.gif" alt="">
1066
+ </div>
1067
+ <div class="flex-1 min-w-0">
1068
+ <p class="text-sm font-medium text-gray-900 truncate">Vote Now GIF</p>
1069
+ <p class="text-sm text-gray-500 truncate">GIF</p>
1070
+ </div>
1071
+ <div>
1072
+ <input type="radio" name="content" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300">
1073
+ </div>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="pt-2">
1078
+ <button class="w-full px-4 py-2 border border-primary-600 text-primary-600 rounded-lg hover:bg-primary-50 flex items-center justify-center">
1079
+ <i class="fas fa-plus mr-2"></i>
1080
+ <span>Browse Content Library</span>
1081
+ </button>
1082
+ </div>
1083
+ </div>
1084
+ </div>
1085
+
1086
+ <!-- Step 3: Review & Send -->
1087
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
1088
+ <div class="flex items-center mb-4">
1089
+ <div class="bg-primary-100 text-primary-800 w-8 h-8 rounded-full flex items-center justify-center mr-3">
1090
+ 3
1091
+ </div>
1092
+ <h3 class="font-medium text-gray-900">Review & Send</h3>
1093
+ </div>
1094
+
1095
+ <div class="space-y-4">
1096
+ <div class="bg-gray-50 p-4 rounded-lg">
1097
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Selected Voters</h4>
1098
+ <p class="text-sm text-gray-600">1,245 voters selected</p>
1099
+ <p class="text-xs text-gray-500 mt-1">North District, Green Valley, Age 18-45</p>
1100
+ </div>
1101
+
1102
+ <div class="bg-gray-50 p-4 rounded-lg">
1103
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Selected Content</h4>
1104
+ <div class="flex items-center space-x-3">
1105
+ <div class="flex-shrink-0">
1106
+ <img class="h-10 w-10 rounded-md" src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" alt="">
1107
+ </div>
1108
+ <div>
1109
+ <p class="text-sm font-medium text-gray-900">Election Rally Poster</p>
1110
+ <p class="text-xs text-gray-500">Image</p>
1111
+ </div>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ <div>
1116
+ <label class="block text-sm font-medium text-gray-700 mb-1">Custom Message (Optional)</label>
1117
+ <textarea rows="3" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="Add a personal message to include with the content"></textarea>
1118
+ </div>
1119
+
1120
+ <div class="pt-2">
1121
+ <button class="w-full px-4 py-2 bg-success-600 text-white rounded-lg hover:bg-success-700 flex items-center justify-center">
1122
+ <i class="fab fa-whatsapp mr-2 text-xl"></i>
1123
+ <span>Send via WhatsApp</span>
1124
+ </button>
1125
+ </div>
1126
+
1127
+ <div class="text-xs text-gray-500 mt-2">
1128
+ <p>Messages will be sent individually to each voter's WhatsApp number</p>
1129
+ </div>
1130
+ </div>
1131
+ </div>
1132
+ </div>
1133
+ </div>
1134
+ </div>
1135
+ </div>
1136
+ </main>
1137
+ </div>
1138
+ </div>
1139
+
1140
+ <!-- Login Modal -->
1141
+ <div id="loginModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
1142
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
1143
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
1144
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
1145
+ </div>
1146
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
1147
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
1148
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
1149
+ <div class="sm:flex sm:items-start">
1150
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 sm:mx-0 sm:h-10 sm:w-10">
1151
+ <i class="fas fa-user-shield text-primary-600"></i>
1152
+ </div>
1153
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
1154
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Login to CampaignPro</h3>
1155
+ <div class="mt-4">
1156
+ <form class="space-y-6">
1157
+ <div>
1158
+ <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
1159
+ <div class="mt-1">
1160
+ <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
1161
+ </div>
1162
+ </div>
1163
+ <div>
1164
+ <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
1165
+ <div class="mt-1">
1166
+ <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
1167
+ </div>
1168
+ </div>
1169
+ <div class="flex items-center justify-between">
1170
+ <div class="flex items-center">
1171
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
1172
+ <label for="remember-me" class="ml-2 block text-sm text-gray-900">Remember me</label>
1173
+ </div>
1174
+ <div class="text-sm">
1175
+ <a href="#" class="font-medium text-primary-600 hover:text-primary-500">Forgot your password?</a>
1176
+ </div>
1177
+ </div>
1178
+ </form>
1179
+ </div>
1180
+ </div>
1181
+ </div>
1182
+ </div>
1183
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
1184
+ <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm">Sign in</button>
1185
+ <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Register</button>
1186
+ <button type="button" class="close-modal mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>
1187
+ </div>
1188
+ </div>
1189
+ </div>
1190
+ </div>
1191
+
1192
+ <script>
1193
+ // Toggle sidebar
1194
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
1195
+ document.querySelector('.sidebar').classList.toggle('collapsed');
1196
+ document.querySelector('.content-area').classList.toggle('expanded');
1197
+ });
1198
+
1199
+ // Tab functionality
1200
+ const tabButtons = document.querySelectorAll('.tab-button');
1201
+ const tabContents = document.querySelectorAll('.tab-content');
1202
+
1203
+ tabButtons.forEach(button => {
1204
+ button.addEventListener('click', () => {
1205
+ const tabId = button.getAttribute('data-tab');
1206
+
1207
+ // Remove active class from all buttons and contents
1208
+ tabButtons.forEach(btn => btn.classList.remove('active'));
1209
+ tabContents.forEach(content => content.classList.remove('active'));
1210
+
1211
+ // Add active class to clicked button and corresponding content
1212
+ button.classList.add('active');
1213
+ document.getElementById(tabId).classList.add('active');
1214
+ });
1215
+ });
1216
+
1217
+ // Content type tabs
1218
+ const contentTypeTabs = document.querySelectorAll('.content-type-tab');
1219
+
1220
+ contentTypeTabs.forEach(button => {
1221
+ button.addEventListener('click', () => {
1222
+ contentTypeTabs.forEach(btn => btn.classList.remove('active'));
1223
+ button.classList.add('active');
1224
+ // Here you would filter content based on the selected type
1225
+ });
1226
+ });
1227
+
1228
+ // Login modal
1229
+ const loginModal = document.getElementById('loginModal');
1230
+ const closeModalButtons = document.querySelectorAll('.close-modal');
1231
+
1232
+ // Show modal (for demo purposes, you might want to trigger this differently)
1233
+ setTimeout(() => {
1234
+ loginModal.classList.remove('hidden');
1235
+ }, 1000);
1236
+
1237
+ // Close modal
1238
+ closeModalButtons.forEach(button => {
1239
+ button.addEventListener('click', () => {
1240
+ loginModal.classList.add('hidden');
1241
+ });
1242
+ });
1243
+
1244
+ // Close modal when clicking outside
1245
+ loginModal.addEventListener('click', (e) => {
1246
+ if (e.target === loginModal) {
1247
+ loginModal.classList.add('hidden');
1248
+ }
1249
+ });
1250
+
1251
+ // File upload styling
1252
+ const fileInput = document.getElementById('file-upload');
1253
+ if (fileInput) {
1254
+ fileInput.addEventListener('change', function() {
1255
+ const fileName = this.files[0] ? this.files[0].name : 'No file chosen';
1256
+ const nextSibling = this.nextElementSibling;
1257
+ nextSibling.innerText = fileName;
1258
+ });
1259
+ }
1260
+ </script>
1261
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ramisn/electioncampaign" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1262
+ </html>