votewise-wizardry / add-candidate.html
ashleymb's picture
import React, { useState } from 'react'
d32a98b verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Candidate - VoteWise</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-12 max-w-md">
<div class="bg-white rounded-lg shadow-lg p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Add New Candidate</h2>
<a href="/" class="text-gray-500 hover:text-gray-700">
<i data-feather="x"></i>
</a>
</div>
<form id="candidateForm" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" required class="w-full px-3 py-2 border border-gray-300 rounded-md">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Motto</label>
<input type="text" required class="w-full px-3 py-2 border border-gray-300 rounded-md">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Candidate Photo</label>
<input type="file" accept="image/*" required class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
</div>
<button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition">Add Candidate</button>
</form>
</div>
</div>
<script>
feather.replace();
document.getElementById('candidateForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('Candidate added successfully!');
window.location.href = '/';
});
</script>
</body>
</html>