Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CampaignPro - Election Campaign Management</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| }, | |
| success: { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 200: '#bbf7d0', | |
| 300: '#86efac', | |
| 400: '#4ade80', | |
| 500: '#22c55e', | |
| 600: '#16a34a', | |
| 700: '#15803d', | |
| 800: '#166534', | |
| 900: '#14532d', | |
| }, | |
| warning: { | |
| 50: '#fffbeb', | |
| 100: '#fef3c7', | |
| 200: '#fde68a', | |
| 300: '#fcd34d', | |
| 400: '#fbbf24', | |
| 500: '#f59e0b', | |
| 600: '#d97706', | |
| 700: '#b45309', | |
| 800: '#92400e', | |
| 900: '#78350f', | |
| }, | |
| danger: { | |
| 50: '#fef2f2', | |
| 100: '#fee2e2', | |
| 200: '#fecaca', | |
| 300: '#fca5a5', | |
| 400: '#f87171', | |
| 500: '#ef4444', | |
| 600: '#dc2626', | |
| 700: '#b91c1c', | |
| 800: '#991b1b', | |
| 900: '#7f1d1d', | |
| }, | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'ui-sans-serif', 'system-ui'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 80px; | |
| } | |
| .sidebar.collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-icon { | |
| display: block; | |
| } | |
| .sidebar:not(.collapsed) .logo-icon { | |
| display: none; | |
| } | |
| .content-area { | |
| transition: all 0.3s ease; | |
| } | |
| .content-area.expanded { | |
| margin-left: 80px; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .custom-file-input::-webkit-file-upload-button { | |
| visibility: hidden; | |
| } | |
| .custom-file-input::before { | |
| content: 'Choose file'; | |
| display: inline-block; | |
| background: linear-gradient(to bottom, #f9f9f9, #e3e3e3); | |
| border: 1px solid #999; | |
| border-radius: 3px; | |
| padding: 5px 8px; | |
| outline: none; | |
| white-space: nowrap; | |
| cursor: pointer; | |
| text-shadow: 1px 1px #fff; | |
| font-weight: 700; | |
| font-size: 10pt; | |
| } | |
| .custom-file-input:hover::before { | |
| border-color: black; | |
| } | |
| .custom-file-input:active::before { | |
| background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .voter-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .campaign-card:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .tab-button.active { | |
| border-bottom: 3px solid #0ea5e9; | |
| color: #0ea5e9; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Main Container --> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white text-gray-800 w-64 shadow-lg flex flex-col"> | |
| <!-- Logo --> | |
| <div class="p-4 flex items-center justify-between border-b border-gray-200"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-primary-500 text-white p-2 rounded-lg"> | |
| <i class="fas fa-vote-yea text-xl"></i> | |
| </div> | |
| <span class="logo-text text-xl font-bold text-primary-700">CampaignPro</span> | |
| <span class="logo-icon text-xl font-bold text-primary-700"> | |
| <i class="fas fa-vote-yea"></i> | |
| </span> | |
| </div> | |
| <button id="toggleSidebar" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <!-- User Profile --> | |
| <div class="p-4 border-b border-gray-200 flex items-center space-x-3"> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full"> | |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-success-500 rounded-full border-2 border-white"></span> | |
| </div> | |
| <div class="sidebar-text"> | |
| <p class="font-medium">John Doe</p> | |
| <p class="text-xs text-gray-500">Campaign Manager</p> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <ul class="p-2 space-y-1"> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg text-primary-700 bg-primary-50"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| <span class="sidebar-text">Dashboard</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-users mr-3"></i> | |
| <span class="sidebar-text">Voter Management</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-bullhorn mr-3"></i> | |
| <span class="sidebar-text">Campaign Content</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-paper-plane mr-3"></i> | |
| <span class="sidebar-text">Message Distribution</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| <span class="sidebar-text">Analytics</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span class="sidebar-text">Settings</span> | |
| </a> | |
| </li> | |
| </ul> | |
| <!-- Team Section --> | |
| <div class="p-4 border-t border-gray-200 sidebar-text"> | |
| <p class="text-xs font-semibold text-gray-500 uppercase mb-2">Your Team</p> | |
| <div class="space-y-2"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team member" class="w-6 h-6 rounded-full"> | |
| <span>Sarah Johnson</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Team member" class="w-6 h-6 rounded-full"> | |
| <span>Michael Chen</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Team member" class="w-6 h-6 rounded-full"> | |
| <span>Emma Wilson</span> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Logout --> | |
| <div class="p-4 border-t border-gray-200"> | |
| <a href="#" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-sign-out-alt mr-3"></i> | |
| <span class="sidebar-text">Logout</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="content-area flex-1 overflow-y-auto"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-6 py-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <h1 class="text-xl font-semibold text-gray-800">Voter Management</h1> | |
| <div class="relative"> | |
| <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"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-bell"></i> | |
| <span class="sr-only">Notifications</span> | |
| </button> | |
| <div class="dropdown relative"> | |
| <button class="flex items-center space-x-2 focus:outline-none"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full"> | |
| <span class="hidden md:inline">John Doe</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="p-6"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Voters</p> | |
| <p class="text-2xl font-bold mt-1">12,458</p> | |
| <p class="text-xs text-success-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 5.2% from last week</p> | |
| </div> | |
| <div class="bg-primary-100 p-3 rounded-lg"> | |
| <i class="fas fa-users text-primary-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Messages Sent</p> | |
| <p class="text-2xl font-bold mt-1">8,742</p> | |
| <p class="text-xs text-success-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 12.7% from last week</p> | |
| </div> | |
| <div class="bg-success-100 p-3 rounded-lg"> | |
| <i class="fas fa-paper-plane text-success-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Response Rate</p> | |
| <p class="text-2xl font-bold mt-1">42%</p> | |
| <p class="text-xs text-danger-500 mt-1"><i class="fas fa-arrow-down mr-1"></i> 3.1% from last week</p> | |
| </div> | |
| <div class="bg-warning-100 p-3 rounded-lg"> | |
| <i class="fas fa-chart-pie text-warning-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Campaign Materials</p> | |
| <p class="text-2xl font-bold mt-1">156</p> | |
| <p class="text-xs text-success-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 24 new this week</p> | |
| </div> | |
| <div class="bg-secondary-100 p-3 rounded-lg"> | |
| <i class="fas fa-bullhorn text-secondary-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-100 mb-6"> | |
| <div class="border-b border-gray-200"> | |
| <div class="flex space-x-8 px-6"> | |
| <button class="tab-button py-4 font-medium text-gray-500 hover:text-primary-700 active" data-tab="voters"> | |
| <i class="fas fa-users mr-2"></i> | |
| <span>Voter Database</span> | |
| </button> | |
| <button class="tab-button py-4 font-medium text-gray-500 hover:text-primary-700" data-tab="upload"> | |
| <i class="fas fa-upload mr-2"></i> | |
| <span>Upload Voters</span> | |
| </button> | |
| <button class="tab-button py-4 font-medium text-gray-500 hover:text-primary-700" data-tab="campaign"> | |
| <i class="fas fa-bullhorn mr-2"></i> | |
| <span>Campaign Content</span> | |
| </button> | |
| <button class="tab-button py-4 font-medium text-gray-500 hover:text-primary-700" data-tab="send"> | |
| <i class="fas fa-paper-plane mr-2"></i> | |
| <span>Send Messages</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="p-6"> | |
| <!-- Voter Database Tab --> | |
| <div id="voters" class="tab-content active"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-lg font-semibold text-gray-800">Voter Database</h2> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 flex items-center"> | |
| <i class="fas fa-filter mr-2"></i> | |
| <span>Filter</span> | |
| </button> | |
| <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> | |
| <span>Export</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Filters --> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Constituency</label> | |
| <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"> | |
| <option>All Constituencies</option> | |
| <option>North District</option> | |
| <option>South District</option> | |
| <option>East District</option> | |
| <option>West District</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Village</label> | |
| <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"> | |
| <option>All Villages</option> | |
| <option>Green Valley</option> | |
| <option>Sunny Hills</option> | |
| <option>River Side</option> | |
| <option>Mountain View</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Age Group</label> | |
| <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"> | |
| <option>All Ages</option> | |
| <option>18-25</option> | |
| <option>26-35</option> | |
| <option>36-45</option> | |
| <option>46+</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Gender</label> | |
| <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"> | |
| <option>All Genders</option> | |
| <option>Male</option> | |
| <option>Female</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Voter Table --> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| <input type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"> | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mobile</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Constituency</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Village</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Age</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">John Smith</div> | |
| <div class="text-sm text-gray-500">Voter ID: V123456</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">+91 9876543210</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">North District</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Green Valley</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">32</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success-100 text-success-800"> | |
| Active | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary-600 hover:text-primary-900 mr-3"><i class="fas fa-eye"></i></button> | |
| <button class="text-warning-600 hover:text-warning-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-danger-600 hover:text-danger-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sarah Johnson</div> | |
| <div class="text-sm text-gray-500">Voter ID: V123457</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">+91 9876543211</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">South District</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Sunny Hills</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">28</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success-100 text-success-800"> | |
| Active | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary-600 hover:text-primary-900 mr-3"><i class="fas fa-eye"></i></button> | |
| <button class="text-warning-600 hover:text-warning-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-danger-600 hover:text-danger-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Michael Brown</div> | |
| <div class="text-sm text-gray-500">Voter ID: V123458</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">+91 9876543212</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">East District</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">River Side</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">45</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning-100 text-warning-800"> | |
| Undecided | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary-600 hover:text-primary-900 mr-3"><i class="fas fa-eye"></i></button> | |
| <button class="text-warning-600 hover:text-warning-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-danger-600 hover:text-danger-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/4.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Emily Davis</div> | |
| <div class="text-sm text-gray-500">Voter ID: V123459</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">+91 9876543213</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">West District</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Mountain View</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">38</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-danger-100 text-danger-800"> | |
| Opposed | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary-600 hover:text-primary-900 mr-3"><i class="fas fa-eye"></i></button> | |
| <button class="text-warning-600 hover:text-warning-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-danger-600 hover:text-danger-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/5.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Robert Wilson</div> | |
| <div class="text-sm text-gray-500">Voter ID: V123460</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">+91 9876543214</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">North District</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Green Valley</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">52</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success-100 text-success-800"> | |
| Active | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary-600 hover:text-primary-900 mr-3"><i class="fas fa-eye"></i></button> | |
| <button class="text-warning-600 hover:text-warning-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-danger-600 hover:text-danger-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex items-center justify-between mt-4"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12,458</span> voters | |
| </p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <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"> | |
| Previous | |
| </button> | |
| <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"> | |
| 1 | |
| </button> | |
| <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"> | |
| 2 | |
| </button> | |
| <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"> | |
| 3 | |
| </button> | |
| <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"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upload Voters Tab --> | |
| <div id="upload" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-lg font-semibold text-gray-800">Upload Voter Data</h2> | |
| </div> | |
| <div class="bg-white border border-dashed border-gray-300 rounded-xl p-8 text-center mb-6"> | |
| <div class="mx-auto max-w-md"> | |
| <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"> | |
| <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> | |
| </svg> | |
| <h3 class="mt-2 text-sm font-medium text-gray-900">Upload a file</h3> | |
| <p class="mt-1 text-sm text-gray-500">CSV or Excel files only</p> | |
| <div class="mt-6"> | |
| <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"> | |
| <span>Select a file</span> | |
| <input id="file-upload" name="file-upload" type="file" class="sr-only" accept=".csv, .xlsx, .xls"> | |
| </label> | |
| <p class="pl-1">or drag and drop</p> | |
| </div> | |
| <p class="mt-1 text-xs text-gray-500">CSV template: Name, Mobile, Constituency, Village, Age, Gender</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="text-sm font-medium text-gray-700 mb-3">Upload History</h3> | |
| <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg"> | |
| <table class="min-w-full divide-y divide-gray-300"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">File Name</th> | |
| <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th> | |
| <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Records</th> | |
| <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Date</th> | |
| <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-200 bg-white"> | |
| <tr> | |
| <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900">voters_2023_06_15.csv</td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> | |
| <span class="inline-flex items-center rounded-full bg-success-100 px-2.5 py-0.5 text-xs font-medium text-success-800"> | |
| Completed | |
| </span> | |
| </td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">1,245</td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">June 15, 2023</td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> | |
| <button class="text-primary-600 hover:text-primary-900">View</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900">north_district.xlsx</td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> | |
| <span class="inline-flex items-center rounded-full bg-success-100 px-2.5 py-0.5 text-xs font-medium text-success-800"> | |
| Completed | |
| </span> | |
| </td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">856</td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">June 10, 2023</td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> | |
| <button class="text-primary-600 hover:text-primary-900">View</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900">voter_update_2023.csv</td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> | |
| <span class="inline-flex items-center rounded-full bg-danger-100 px-2.5 py-0.5 text-xs font-medium text-danger-800"> | |
| Failed | |
| </span> | |
| </td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">-</td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">June 5, 2023</td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> | |
| <button class="text-primary-600 hover:text-primary-900">Retry</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Content Tab --> | |
| <div id="campaign" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-lg font-semibold text-gray-800">Campaign Content</h2> | |
| <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> | |
| <span>Add Content</span> | |
| </button> | |
| </div> | |
| <!-- Content Type Tabs --> | |
| <div class="border-b border-gray-200 mb-6"> | |
| <div class="flex space-x-8"> | |
| <button class="content-type-tab py-2 font-medium text-gray-500 hover:text-primary-700 active" data-content-type="all"> | |
| <span>All Content</span> | |
| </button> | |
| <button class="content-type-tab py-2 font-medium text-gray-500 hover:text-primary-700" data-content-type="images"> | |
| <span>Images</span> | |
| </button> | |
| <button class="content-type-tab py-2 font-medium text-gray-500 hover:text-primary-700" data-content-type="videos"> | |
| <span>Videos</span> | |
| </button> | |
| <button class="content-type-tab py-2 font-medium text-gray-500 hover:text-primary-700" data-content-type="gifs"> | |
| <span>GIFs</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Campaign Content Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Campaign Card 1 --> | |
| <div class="campaign-card bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition duration-300"> | |
| <div class="relative pb-2/3 h-48"> | |
| <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"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Election Rally Poster</h3> | |
| <p class="text-sm text-gray-500">June 15, 2023</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800"> | |
| Image | |
| </span> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <span class="text-sm text-gray-500">Used: 245 times</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Card 2 --> | |
| <div class="campaign-card bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition duration-300"> | |
| <div class="relative pb-2/3 h-48"> | |
| <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"> | |
| <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30"> | |
| <div class="w-12 h-12 bg-white bg-opacity-80 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play text-primary-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Campaign Speech</h3> | |
| <p class="text-sm text-gray-500">June 10, 2023</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-warning-100 text-warning-800"> | |
| Video | |
| </span> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <span class="text-sm text-gray-500">Used: 178 times</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Card 3 --> | |
| <div class="campaign-card bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition duration-300"> | |
| <div class="relative pb-2/3 h-48"> | |
| <img class="absolute h-full w-full object-cover" src="https://media.giphy.com/media/l0HU7JI1QdX7OSQDu/giphy.gif" alt="Campaign GIF"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Vote Now GIF</h3> | |
| <p class="text-sm text-gray-500">June 5, 2023</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success-100 text-success-800"> | |
| GIF | |
| </span> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <span class="text-sm text-gray-500">Used: 312 times</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Card 4 --> | |
| <div class="campaign-card bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition duration-300"> | |
| <div class="relative pb-2/3 h-48"> | |
| <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"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Policy Announcement</h3> | |
| <p class="text-sm text-gray-500">May 28, 2023</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800"> | |
| Image | |
| </span> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <span class="text-sm text-gray-500">Used: 189 times</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add New Card --> | |
| <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"> | |
| <div class="bg-primary-100 p-3 rounded-full mb-3"> | |
| <i class="fas fa-plus text-primary-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-900 mb-1">Add New Content</h3> | |
| <p class="text-sm text-gray-500 text-center">Upload images, videos or GIFs for your campaign</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Send Messages Tab --> | |
| <div id="send" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-lg font-semibold text-gray-800">Send Campaign Messages</h2> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Step 1: Select Voters --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-100 text-primary-800 w-8 h-8 rounded-full flex items-center justify-center mr-3"> | |
| 1 | |
| </div> | |
| <h3 class="font-medium text-gray-900">Select Voters</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Constituency</label> | |
| <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"> | |
| <option>All Constituencies</option> | |
| <option>North District</option> | |
| <option>South District</option> | |
| <option>East District</option> | |
| <option>West District</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Village</label> | |
| <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"> | |
| <option>All Villages</option> | |
| <option>Green Valley</option> | |
| <option>Sunny Hills</option> | |
| <option>River Side</option> | |
| <option>Mountain View</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Age Group</label> | |
| <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"> | |
| <option>All Ages</option> | |
| <option>18-25</option> | |
| <option>26-35</option> | |
| <option>36-45</option> | |
| <option>46+</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Gender</label> | |
| <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"> | |
| <option>All Genders</option> | |
| <option>Male</option> | |
| <option>Female</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="pt-2"> | |
| <button class="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 flex items-center justify-center"> | |
| <i class="fas fa-filter mr-2"></i> | |
| <span>Apply Filters</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2: Select Content --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-100 text-primary-800 w-8 h-8 rounded-full flex items-center justify-center mr-3"> | |
| 2 | |
| </div> | |
| <h3 class="font-medium text-gray-900">Select Content</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="border border-gray-200 rounded-lg p-3"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="flex-shrink-0"> | |
| <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=""> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Election Rally Poster</p> | |
| <p class="text-sm text-gray-500 truncate">Image</p> | |
| </div> | |
| <div> | |
| <input type="radio" name="content" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-3"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="flex-shrink-0 relative"> | |
| <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=""> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play text-white text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Campaign Speech</p> | |
| <p class="text-sm text-gray-500 truncate">Video</p> | |
| </div> | |
| <div> | |
| <input type="radio" name="content" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-3"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-md" src="https://media.giphy.com/media/l0HU7JI1QdX7OSQDu/giphy.gif" alt=""> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Vote Now GIF</p> | |
| <p class="text-sm text-gray-500 truncate">GIF</p> | |
| </div> | |
| <div> | |
| <input type="radio" name="content" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-2"> | |
| <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"> | |
| <i class="fas fa-plus mr-2"></i> | |
| <span>Browse Content Library</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3: Review & Send --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-100 text-primary-800 w-8 h-8 rounded-full flex items-center justify-center mr-3"> | |
| 3 | |
| </div> | |
| <h3 class="font-medium text-gray-900">Review & Send</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-2">Selected Voters</h4> | |
| <p class="text-sm text-gray-600">1,245 voters selected</p> | |
| <p class="text-xs text-gray-500 mt-1">North District, Green Valley, Age 18-45</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-2">Selected Content</h4> | |
| <div class="flex items-center space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <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=""> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-900">Election Rally Poster</p> | |
| <p class="text-xs text-gray-500">Image</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Custom Message (Optional)</label> | |
| <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> | |
| </div> | |
| <div class="pt-2"> | |
| <button class="w-full px-4 py-2 bg-success-600 text-white rounded-lg hover:bg-success-700 flex items-center justify-center"> | |
| <i class="fab fa-whatsapp mr-2 text-xl"></i> | |
| <span>Send via WhatsApp</span> | |
| </button> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-2"> | |
| <p>Messages will be sent individually to each voter's WhatsApp number</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Login Modal --> | |
| <div id="loginModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <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"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <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"> | |
| <i class="fas fa-user-shield text-primary-600"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Login to CampaignPro</h3> | |
| <div class="mt-4"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email address</label> | |
| <div class="mt-1"> | |
| <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"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700">Password</label> | |
| <div class="mt-1"> | |
| <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"> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <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"> | |
| <label for="remember-me" class="ml-2 block text-sm text-gray-900">Remember me</label> | |
| </div> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-primary-600 hover:text-primary-500">Forgot your password?</a> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar | |
| document.getElementById('toggleSidebar').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('collapsed'); | |
| document.querySelector('.content-area').classList.toggle('expanded'); | |
| }); | |
| // Tab functionality | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const tabId = button.getAttribute('data-tab'); | |
| // Remove active class from all buttons and contents | |
| tabButtons.forEach(btn => btn.classList.remove('active')); | |
| tabContents.forEach(content => content.classList.remove('active')); | |
| // Add active class to clicked button and corresponding content | |
| button.classList.add('active'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Content type tabs | |
| const contentTypeTabs = document.querySelectorAll('.content-type-tab'); | |
| contentTypeTabs.forEach(button => { | |
| button.addEventListener('click', () => { | |
| contentTypeTabs.forEach(btn => btn.classList.remove('active')); | |
| button.classList.add('active'); | |
| // Here you would filter content based on the selected type | |
| }); | |
| }); | |
| // Login modal | |
| const loginModal = document.getElementById('loginModal'); | |
| const closeModalButtons = document.querySelectorAll('.close-modal'); | |
| // Show modal (for demo purposes, you might want to trigger this differently) | |
| setTimeout(() => { | |
| loginModal.classList.remove('hidden'); | |
| }, 1000); | |
| // Close modal | |
| closeModalButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| loginModal.classList.add('hidden'); | |
| }); | |
| }); | |
| // Close modal when clicking outside | |
| loginModal.addEventListener('click', (e) => { | |
| if (e.target === loginModal) { | |
| loginModal.classList.add('hidden'); | |
| } | |
| }); | |
| // File upload styling | |
| const fileInput = document.getElementById('file-upload'); | |
| if (fileInput) { | |
| fileInput.addEventListener('change', function() { | |
| const fileName = this.files[0] ? this.files[0].name : 'No file chosen'; | |
| const nextSibling = this.nextElementSibling; | |
| nextSibling.innerText = fileName; | |
| }); | |
| } | |
| </script> | |
| <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> | |
| </html> |