2025-08-26 14:13:09 -06:00
|
|
|
{{ define "layout" }}
|
|
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
2025-08-28 00:15:10 -06:00
|
|
|
<link rel="icon" type="image/x-icon" href="../../static/favicon.ico">
|
|
|
|
|
|
2025-08-26 14:13:09 -06:00
|
|
|
<title>{{if .Title}}{{.Title}}{{else}}Poll System{{end}}</title>
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
<script src="//unpkg.com/alpinejs" defer></script>
|
2025-09-03 14:35:47 -06:00
|
|
|
|
2025-08-26 14:13:09 -06:00
|
|
|
<link
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
|
|
|
|
/>
|
2025-09-05 15:39:06 -06:00
|
|
|
<script>
|
|
|
|
|
tailwind.config = {
|
|
|
|
|
theme: {
|
|
|
|
|
extend: {
|
|
|
|
|
colors: {
|
|
|
|
|
"custom-gray": "#f8fafc",
|
|
|
|
|
"sidebar-gray": "#ffffff",
|
|
|
|
|
"border-gray": "#e2e8f0",
|
|
|
|
|
"text-primary": "#1e293b",
|
|
|
|
|
"text-secondary": "#64748b",
|
|
|
|
|
"blue-primary": "#3b82f6",
|
|
|
|
|
"blue-light": "#eff6ff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
/* Mobile sidebar overlay */
|
|
|
|
|
.sidebar-overlay {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
z-index: 40;
|
|
|
|
|
}
|
2025-08-27 13:21:11 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
.sidebar-overlay.active {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
2025-08-27 13:21:11 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
/* Desktop layout - sidebar always visible */
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
|
.main-content-container {
|
|
|
|
|
margin-left: 240px; /* Match sidebar width */
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-08-27 13:21:11 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
/* Mobile sidebar positioning */
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
#sidebar {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
z-index: 50;
|
|
|
|
|
transform: translateX(-100%);
|
|
|
|
|
transition: transform 0.3s ease-in-out;
|
|
|
|
|
}
|
2025-08-29 16:49:13 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
#sidebar.active {
|
|
|
|
|
transform: translateX(0);
|
|
|
|
|
}
|
2025-08-29 16:49:13 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
.main-content-container {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-08-29 16:49:13 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
/* Ensure sidebar has fixed positioning on desktop */
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
|
#sidebar {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
z-index: 30;
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-08-29 16:49:13 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
/* Hide scrollbars but keep functionality */
|
|
|
|
|
.hide-scrollbar {
|
|
|
|
|
-ms-overflow-style: none;
|
|
|
|
|
scrollbar-width: none;
|
|
|
|
|
}
|
|
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="bg-custom-gray">
|
|
|
|
|
{{ if .IsAuthenticated }}
|
|
|
|
|
<!-- Authenticated User Interface -->
|
|
|
|
|
<div class="min-h-screen">
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Mobile sidebar overlay -->
|
|
|
|
|
<div id="sidebar-overlay" class="sidebar-overlay" onclick="toggleSidebar()"></div>
|
|
|
|
|
|
|
|
|
|
<!-- Sidebar -->
|
|
|
|
|
<div id="sidebar" class="w-60 bg-sidebar-gray border-r border-border-gray flex flex-col">
|
|
|
|
|
<!-- Logo/Header -->
|
|
|
|
|
<div class="flex items-center justify-between p-6 border-b border-border-gray">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<div class="w-7 h-7 bg-blue-primary rounded-full flex items-center justify-center mr-3">
|
|
|
|
|
<img src="../../static/icon-512.png" alt="Logo" class="w-4 h-4"/>
|
2025-08-27 13:21:11 -06:00
|
|
|
</div>
|
2025-09-05 15:39:06 -06:00
|
|
|
<span class="font-semibold text-text-primary text-base">Poll System</span>
|
2025-08-27 13:21:11 -06:00
|
|
|
</div>
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Mobile close button -->
|
|
|
|
|
<button id="sidebar-close" class="md:hidden text-text-secondary hover:text-text-primary" onclick="toggleSidebar()">
|
|
|
|
|
<i class="fas fa-times text-lg"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2025-08-27 13:21:11 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Navigation -->
|
|
|
|
|
<nav class="flex-1 py-4">
|
|
|
|
|
<div class="space-y-1 px-3">
|
|
|
|
|
{{ if .ShowAdminNav }}
|
|
|
|
|
<a href="/dashboard" class="flex items-center px-3 py-2.5 text-sm {{if eq .ActiveSection "dashboard"}}bg-blue-light text-blue-primary border-r-4 border-blue-primary pl-2 rounded-none{{else}}text-text-secondary hover:bg-gray-50 rounded-md{{end}} group">
|
|
|
|
|
<i class="fas fa-chart-pie w-5 {{if eq .ActiveSection "dashboard"}}text-blue-primary{{else}}text-gray-400{{end}} mr-3"></i>
|
|
|
|
|
<span {{if eq .ActiveSection "dashboard"}}class="font-medium"{{end}}>Dashboard</span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="/volunteers" class="flex items-center px-3 py-2.5 text-sm {{if eq .ActiveSection "volunteer"}}bg-blue-light text-blue-primary border-r-4 border-blue-primary pl-2 rounded-none{{else}}text-text-secondary hover:bg-gray-50 rounded-md{{end}} group">
|
|
|
|
|
<i class="fas fa-users w-5 {{if eq .ActiveSection "volunteer"}}text-blue-primary{{else}}text-gray-400{{end}} mr-3"></i>
|
|
|
|
|
<span {{if eq .ActiveSection "volunteer"}}class="font-medium"{{end}}>Volunteers</span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="/team_builder" class="flex items-center px-3 py-2.5 text-sm {{if eq .ActiveSection "team_builder"}}bg-blue-light text-blue-primary border-r-4 border-blue-primary pl-2 rounded-none{{else}}text-text-secondary hover:bg-gray-50 rounded-md{{end}} group">
|
|
|
|
|
<i class="fas fa-user-friends w-5 {{if eq .ActiveSection "team_builder"}}text-blue-primary{{else}}text-gray-400{{end}} mr-3"></i>
|
|
|
|
|
<span {{if eq .ActiveSection "team_builder"}}class="font-medium"{{end}}>Team Builder</span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="/addresses" class="flex items-center px-3 py-2.5 text-sm {{if eq .ActiveSection "address"}}bg-blue-light text-blue-primary border-r-4 border-blue-primary pl-2 rounded-none{{else}}text-text-secondary hover:bg-gray-50 rounded-md{{end}} group">
|
|
|
|
|
<i class="fas fa-map-marked-alt w-5 {{if eq .ActiveSection "address"}}text-blue-primary{{else}}text-gray-400{{end}} mr-3"></i>
|
|
|
|
|
<span {{if eq .ActiveSection "address"}}class="font-medium"{{end}}>Addresses</span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="/posts" class="flex items-center px-3 py-2.5 text-sm {{if eq .ActiveSection "posts"}}bg-blue-light text-blue-primary border-r-4 border-blue-primary pl-2 rounded-none{{else}}text-text-secondary hover:bg-gray-50 rounded-md{{end}} group">
|
|
|
|
|
<i class="fas fa-list w-5 {{if eq .ActiveSection "posts"}}text-blue-primary{{else}}text-gray-400{{end}} mr-3"></i>
|
|
|
|
|
<span {{if eq .ActiveSection "posts"}}class="font-medium"{{end}}>Posts</span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="/reports" class="flex items-center px-3 py-2.5 text-sm {{if eq .ActiveSection "reports"}}bg-blue-light text-blue-primary border-r-4 border-blue-primary pl-2 rounded-none{{else}}text-text-secondary hover:bg-gray-50 rounded-md{{end}} group">
|
|
|
|
|
<i class="fas fa-table w-5 {{if eq .ActiveSection "reports"}}text-blue-primary{{else}}text-gray-400{{end}} mr-3"></i>
|
|
|
|
|
<span {{if eq .ActiveSection "reports"}}class="font-medium"{{end}}>Reports</span>
|
|
|
|
|
</a>
|
|
|
|
|
{{ end }}
|
|
|
|
|
|
|
|
|
|
{{ if .ShowVolunteerNav }}
|
|
|
|
|
<a href="/volunteer/dashboard" class="flex items-center px-3 py-2.5 text-sm {{if eq .ActiveSection "dashboard"}}bg-blue-light text-blue-primary border-r-4 border-blue-primary pl-2 rounded-none{{else}}text-text-secondary hover:bg-gray-50 rounded-md{{end}} group">
|
|
|
|
|
<i class="fas fa-chart-pie w-5 {{if eq .ActiveSection "dashboard"}}text-blue-primary{{else}}text-gray-400{{end}} mr-3"></i>
|
|
|
|
|
<span {{if eq .ActiveSection "dashboard"}}class="font-medium"{{end}}>Dashboard</span>
|
|
|
|
|
</a>
|
2025-09-11 16:54:30 -06:00
|
|
|
<a href="/volunteer/addresses" class="flex items-center px-3 py-2.5 text-sm {{if eq .ActiveSection "address"}}bg-blue-light text-blue-primary border-r-4 border-blue-primary pl-2 rounded-none{{else}}text-text-secondary hover:bg-gray-50 rounded-md{{end}} group">
|
2025-09-05 15:39:06 -06:00
|
|
|
<i class="fas fa-home w-5 {{if eq .ActiveSection "address"}}text-blue-primary{{else}}text-gray-400{{end}} mr-3"></i>
|
|
|
|
|
<span {{if eq .ActiveSection "address"}}class="font-medium"{{end}}>Assigned Address</span>
|
|
|
|
|
</a>
|
2025-09-11 16:54:30 -06:00
|
|
|
<a href="/volunteer/schedule" class="flex items-center px-3 py-2.5 text-sm {{if eq .ActiveSection "schedule"}}bg-blue-light text-blue-primary border-r-4 border-blue-primary pl-2 rounded-none{{else}}text-text-secondary hover:bg-gray-50 rounded-md{{end}} group">
|
|
|
|
|
<i class="fas fa-calendar-day w-5 {{if eq .ActiveSection "schedule"}}text-blue-primary{{else}}text-gray-400{{end}} mr-3"></i>
|
|
|
|
|
<span {{if eq .ActiveSection "schedule"}}class="font-medium"{{end}}>Schedule</span>
|
|
|
|
|
</a>
|
2025-09-05 15:39:06 -06:00
|
|
|
{{ end }}
|
|
|
|
|
|
|
|
|
|
<a href="/logout" class="flex items-center px-3 py-2.5 text-sm text-text-secondary hover:bg-gray-50 rounded-md group">
|
|
|
|
|
<i class="fas fa-sign-out-alt w-5 text-gray-400 mr-3"></i>
|
|
|
|
|
<span>Logout</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
2025-08-26 14:13:09 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Main Content Container -->
|
|
|
|
|
<div class="main-content-container min-h-screen flex flex-col bg-custom-gray">
|
|
|
|
|
<!-- Top Header -->
|
2025-09-09 10:42:24 -06:00
|
|
|
<div class="fixed top-0 left-0 right-0 z-20 bg-white border-b border-border-gray px-4 md:px-6 py-4">
|
2025-09-05 15:39:06 -06:00
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
|
<!-- Hamburger (left aligned with consistent spacing) -->
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<button id="menu-toggle" class="md:hidden text-text-secondary hover:text-text-primary p-2 -ml-2" onclick="toggleSidebar()">
|
|
|
|
|
<i class="fas fa-bars text-lg"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2025-08-26 14:13:09 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Right side -->
|
|
|
|
|
<div class="flex items-center space-x-2 md:space-x-4">
|
|
|
|
|
<!-- Dark mode -->
|
2025-09-09 10:42:24 -06:00
|
|
|
<a href="/logout" class="text-text-secondary hover:text-text-primary p-2">
|
|
|
|
|
<i class="fa-solid fa-arrow-right-from-bracket text-lg"></i>
|
|
|
|
|
</a>
|
2025-08-29 16:49:13 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Profile (hover dropdown on desktop, click on mobile) -->
|
|
|
|
|
<div class="relative group cursor-pointer">
|
|
|
|
|
<div class="flex items-center space-x-2 md:space-x-3" onclick="toggleProfileMenu()">
|
|
|
|
|
<span class="text-sm font-medium text-text-primary hidden sm:block">{{.UserName}}</span>
|
|
|
|
|
<div class="w-8 h-8 rounded-full bg-blue-primary flex items-center justify-center text-white font-medium">
|
|
|
|
|
{{slice .UserName 0 1}}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-08-29 16:49:13 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Dropdown -->
|
|
|
|
|
<div id="profile-menu" class="absolute right-0 mt-2 w-40 bg-white border border-border-gray rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
|
|
|
|
|
<a href="/profile" class="block px-4 py-2 text-sm text-text-primary hover:bg-gray-100">Profile</a>
|
2025-09-09 10:42:24 -06:00
|
|
|
<a href="/profile" class="block px-4 py-2 text-sm text-text-primary hover:bg-gray-100">Settings</a>
|
2025-09-05 15:39:06 -06:00
|
|
|
<a href="/logout" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Logout</a>
|
2025-08-29 16:49:13 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Page Content -->
|
2025-09-09 10:42:24 -06:00
|
|
|
<div class="flex-1 mt-20">
|
2025-08-29 16:49:13 -06:00
|
|
|
{{ template "content" . }}
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
2025-09-05 15:39:06 -06:00
|
|
|
</div>
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
2025-08-29 16:49:13 -06:00
|
|
|
|
2025-08-26 14:13:09 -06:00
|
|
|
{{else}}
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Split Screen Login/Register Page -->
|
|
|
|
|
<div class="min-h-screen flex" x-data="{ isLogin: true }">
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Left Side - Image -->
|
|
|
|
|
<div class="hidden lg:flex flex-1 relative overflow-hidden">
|
|
|
|
|
<!-- Background overlay for better text readability -->
|
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-blue-700/40 z-10"></div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Background Image -->
|
|
|
|
|
<img src="../../static/feature-mobile1.jpg" alt="Welcome to Poll System" class="object-cover w-full h-full"/>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Logo and branding overlay -->
|
|
|
|
|
<div class="absolute top-8 left-8 z-20 flex items-center gap-3">
|
|
|
|
|
<div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
|
|
|
|
|
<img src="../../static/icon-512.png" alt="Logo" class="w-6 h-6"/>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-2xl font-bold text-white">Linq</span>
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Welcome text overlay -->
|
|
|
|
|
<div class="absolute bottom-8 left-8 right-8 z-20 text-white">
|
|
|
|
|
<h1 class="text-4xl font-bold mb-4">Welcome to Poll System</h1>
|
|
|
|
|
<p class="text-xl opacity-90">Streamline your polling operations with our comprehensive management platform</p>
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
2025-08-28 00:15:10 -06:00
|
|
|
</div>
|
2025-08-26 14:13:09 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Right Side - Login/Register Forms -->
|
|
|
|
|
<div class="flex-1 flex items-center justify-center p-6 lg:p-12 bg-white">
|
|
|
|
|
<div class="w-full max-w-md">
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Mobile Logo (visible only on small screens) -->
|
|
|
|
|
<div class="lg:hidden flex items-center justify-center gap-3 mb-8">
|
|
|
|
|
<div class="w-10 h-10 bg-blue-primary rounded-full flex items-center justify-center">
|
|
|
|
|
<img src="../../static/icon-512.png" alt="Logo" class="w-6 h-6"/>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-2xl font-bold text-text-primary">Linq</span>
|
2025-08-28 00:15:10 -06:00
|
|
|
</div>
|
2025-08-26 14:13:09 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Toggle Buttons -->
|
|
|
|
|
<div class="flex justify-center gap-1 mb-8 p-1 bg-gray-100 rounded-lg">
|
|
|
|
|
<button @click="isLogin = true" :class="isLogin ? 'bg-white text-blue-primary shadow-sm' : 'text-gray-600'" class="flex-1 px-4 py-2 rounded-md font-medium transition-all duration-200">
|
|
|
|
|
Sign In
|
|
|
|
|
</button>
|
|
|
|
|
<button @click="isLogin = false" :class="!isLogin ? 'bg-white text-blue-primary shadow-sm' : 'text-gray-600'" class="flex-1 px-4 py-2 rounded-md font-medium transition-all duration-200">
|
|
|
|
|
Register
|
|
|
|
|
</button>
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
2025-09-05 15:39:06 -06:00
|
|
|
|
|
|
|
|
<!-- Login Form -->
|
|
|
|
|
<div x-show="isLogin" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0">
|
|
|
|
|
<form action="/login" method="POST" class="space-y-6">
|
|
|
|
|
<div class="text-center mb-6">
|
|
|
|
|
<h2 class="text-3xl font-bold text-text-primary">Welcome back</h2>
|
|
|
|
|
<p class="text-text-secondary mt-2">Please sign in to your account</p>
|
|
|
|
|
</div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-08-26 14:13:09 -06:00
|
|
|
<div>
|
2025-09-05 15:39:06 -06:00
|
|
|
<label for="login_email" class="block text-sm font-medium text-text-primary mb-2">Email Address</label>
|
2025-09-09 10:42:24 -06:00
|
|
|
<input type="email"
|
|
|
|
|
id="login_email"
|
|
|
|
|
name="email"
|
|
|
|
|
required
|
|
|
|
|
placeholder="Enter your email"
|
2025-09-05 15:39:06 -06:00
|
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition-colors"/>
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-08-26 14:13:09 -06:00
|
|
|
<div>
|
2025-09-05 15:39:06 -06:00
|
|
|
<label for="login_password" class="block text-sm font-medium text-text-primary mb-2">Password</label>
|
2025-09-09 10:42:24 -06:00
|
|
|
<input type="password"
|
|
|
|
|
id="login_password"
|
|
|
|
|
name="password"
|
|
|
|
|
required
|
|
|
|
|
placeholder="Enter your password"
|
2025-09-05 15:39:06 -06:00
|
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition-colors"/>
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
|
<label class="flex items-center">
|
|
|
|
|
<input type="checkbox" class="h-4 w-4 text-blue-primary focus:ring-blue-primary border-gray-300 rounded">
|
|
|
|
|
<span class="ml-2 text-sm text-text-secondary">Remember me</span>
|
|
|
|
|
</label>
|
|
|
|
|
<a href="#" class="text-sm text-blue-primary hover:text-blue-600">Forgot password?</a>
|
|
|
|
|
</div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<button type="submit" class="w-full bg-blue-primary text-white py-3 rounded-lg hover:bg-blue-600 focus:ring-2 focus:ring-blue-primary focus:ring-offset-2 transition-colors font-medium">
|
2025-08-26 14:13:09 -06:00
|
|
|
Sign In
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2025-08-28 00:15:10 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Register Form -->
|
|
|
|
|
<div x-show="!isLogin" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0">
|
|
|
|
|
<form action="/register" method="POST" class="space-y-6">
|
|
|
|
|
<div class="text-center mb-6">
|
|
|
|
|
<h2 class="text-3xl font-bold text-text-primary">Create Account</h2>
|
|
|
|
|
<p class="text-text-secondary mt-2">Join our polling platform today</p>
|
|
|
|
|
</div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-08-27 13:21:11 -06:00
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
2025-08-26 14:13:09 -06:00
|
|
|
<div>
|
2025-09-05 15:39:06 -06:00
|
|
|
<label class="block text-sm font-medium text-text-primary mb-2">First Name</label>
|
2025-09-09 10:42:24 -06:00
|
|
|
<input type="text"
|
|
|
|
|
name="first_name"
|
|
|
|
|
required
|
|
|
|
|
placeholder="First Name"
|
2025-09-05 15:39:06 -06:00
|
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition-colors"/>
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2025-09-05 15:39:06 -06:00
|
|
|
<label class="block text-sm font-medium text-text-primary mb-2">Last Name</label>
|
2025-09-09 10:42:24 -06:00
|
|
|
<input type="text"
|
|
|
|
|
name="last_name"
|
|
|
|
|
required
|
|
|
|
|
placeholder="Last Name"
|
2025-09-05 15:39:06 -06:00
|
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition-colors"/>
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-08-26 14:13:09 -06:00
|
|
|
<div>
|
2025-09-05 15:39:06 -06:00
|
|
|
<label class="block text-sm font-medium text-text-primary mb-2">Email Address</label>
|
2025-09-09 10:42:24 -06:00
|
|
|
<input type="email"
|
|
|
|
|
name="email"
|
|
|
|
|
required
|
|
|
|
|
placeholder="Enter your email"
|
2025-09-05 15:39:06 -06:00
|
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition-colors"/>
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-08-26 14:13:09 -06:00
|
|
|
<div>
|
2025-09-05 15:39:06 -06:00
|
|
|
<label class="block text-sm font-medium text-text-primary mb-2">Phone</label>
|
2025-09-09 10:42:24 -06:00
|
|
|
<input type="tel"
|
2025-09-05 15:39:06 -06:00
|
|
|
name="phone"
|
|
|
|
|
required
|
2025-09-09 10:42:24 -06:00
|
|
|
placeholder="Phone number"
|
2025-09-05 15:39:06 -06:00
|
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition-colors"/>
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-08-26 14:13:09 -06:00
|
|
|
<div>
|
2025-09-05 15:39:06 -06:00
|
|
|
<label class="block text-sm font-medium text-text-primary mb-2">Role</label>
|
2025-09-09 10:42:24 -06:00
|
|
|
<select name="role"
|
|
|
|
|
required
|
|
|
|
|
onchange="toggleAdminCodeField()"
|
2025-09-05 15:39:06 -06:00
|
|
|
id="role"
|
|
|
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition-colors">
|
|
|
|
|
<option value="">Select Role</option>
|
2025-08-26 14:13:09 -06:00
|
|
|
<option value="1">Admin</option>
|
|
|
|
|
<option value="3">Volunteer</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<!-- Admin/Team Leader Code Field (hidden by default) -->
|
2025-08-27 13:21:11 -06:00
|
|
|
<div id="adminCodeField" class="hidden">
|
2025-09-05 15:39:06 -06:00
|
|
|
<label class="block text-sm font-medium text-text-primary mb-2">Access Code</label>
|
2025-09-09 10:42:24 -06:00
|
|
|
<input type="password"
|
|
|
|
|
name="admin_code"
|
|
|
|
|
placeholder="Enter access code"
|
2025-09-05 15:39:06 -06:00
|
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition-colors"/>
|
|
|
|
|
<p class="text-xs text-text-secondary mt-1">Required for Admin and Team Leader roles</p>
|
2025-08-27 13:21:11 -06:00
|
|
|
</div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-08-26 14:13:09 -06:00
|
|
|
<div>
|
2025-09-05 15:39:06 -06:00
|
|
|
<label class="block text-sm font-medium text-text-primary mb-2">Password</label>
|
2025-09-09 10:42:24 -06:00
|
|
|
<input type="password"
|
|
|
|
|
name="password"
|
|
|
|
|
required
|
|
|
|
|
placeholder="Create a password"
|
2025-09-05 15:39:06 -06:00
|
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent transition-colors"/>
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
<button type="submit" class="w-full bg-blue-primary text-white py-3 rounded-lg hover:bg-blue-600 focus:ring-2 focus:ring-blue-primary focus:ring-offset-2 transition-colors font-medium">
|
2025-08-26 14:13:09 -06:00
|
|
|
Create Account
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2025-09-05 15:39:06 -06:00
|
|
|
|
2025-08-26 14:13:09 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{{end}}
|
|
|
|
|
|
|
|
|
|
<script>
|
2025-09-05 15:39:06 -06:00
|
|
|
// Sidebar functionality for authenticated users
|
|
|
|
|
function toggleSidebar() {
|
|
|
|
|
const sidebar = document.getElementById('sidebar');
|
|
|
|
|
const sidebarOverlay = document.getElementById('sidebar-overlay');
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
if (sidebar && sidebarOverlay) {
|
|
|
|
|
sidebar.classList.toggle('active');
|
|
|
|
|
sidebarOverlay.classList.toggle('active');
|
2025-08-26 14:13:09 -06:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
function toggleProfileMenu() {
|
|
|
|
|
const menu = document.getElementById('profile-menu');
|
|
|
|
|
if (menu) {
|
2025-09-09 10:42:24 -06:00
|
|
|
const isVisible = !menu.classList.contains('invisible');
|
|
|
|
|
if (isVisible) {
|
|
|
|
|
// Hide it
|
|
|
|
|
menu.classList.add('opacity-0', 'invisible');
|
|
|
|
|
menu.classList.remove('opacity-100', 'visible');
|
|
|
|
|
document.removeEventListener('click', outsideClickListener);
|
|
|
|
|
} else {
|
|
|
|
|
// Show it
|
|
|
|
|
menu.classList.remove('opacity-0', 'invisible');
|
|
|
|
|
menu.classList.add('opacity-100', 'visible');
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
document.addEventListener('click', outsideClickListener);
|
|
|
|
|
}, 0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function outsideClickListener(event) {
|
|
|
|
|
const menu = document.getElementById('profile-menu');
|
|
|
|
|
const trigger = event.target.closest('.group'); // The profile button wrapper
|
|
|
|
|
|
|
|
|
|
if (menu && !menu.contains(event.target) && !trigger) {
|
|
|
|
|
// Hide menu
|
|
|
|
|
menu.classList.add('opacity-0', 'invisible');
|
|
|
|
|
menu.classList.remove('opacity-100', 'visible');
|
|
|
|
|
document.removeEventListener('click', outsideClickListener);
|
2025-08-26 14:13:09 -06:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
// Admin code field toggle for registration
|
2025-08-27 13:21:11 -06:00
|
|
|
function toggleAdminCodeField() {
|
2025-09-05 15:39:06 -06:00
|
|
|
const role = document.getElementById("role");
|
2025-08-27 13:21:11 -06:00
|
|
|
const field = document.getElementById("adminCodeField");
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
if (role && field) {
|
|
|
|
|
const roleValue = role.value;
|
|
|
|
|
if (roleValue === "1") { // Admin or Team Leader
|
|
|
|
|
field.classList.add("hidden");
|
|
|
|
|
} else {
|
|
|
|
|
field.classList.remove("hidden");
|
|
|
|
|
}
|
2025-08-26 14:13:09 -06:00
|
|
|
}
|
2025-09-05 15:39:06 -06:00
|
|
|
}
|
2025-08-27 13:21:11 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
// Close sidebar on ESC key
|
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
|
|
|
if (e.key === 'Escape') {
|
|
|
|
|
const sidebar = document.getElementById('sidebar');
|
|
|
|
|
const sidebarOverlay = document.getElementById('sidebar-overlay');
|
|
|
|
|
const body = document.body;
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
if (sidebar && sidebarOverlay && sidebar.classList.contains('active')) {
|
|
|
|
|
sidebar.classList.remove('active');
|
|
|
|
|
sidebarOverlay.classList.remove('active');
|
|
|
|
|
body.style.overflow = '';
|
|
|
|
|
}
|
2025-08-27 13:21:11 -06:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Handle window resize to ensure proper mobile behavior
|
|
|
|
|
window.addEventListener('resize', function() {
|
2025-09-05 15:39:06 -06:00
|
|
|
if (window.innerWidth >= 768) {
|
|
|
|
|
const sidebar = document.getElementById('sidebar');
|
|
|
|
|
const sidebarOverlay = document.getElementById('sidebar-overlay');
|
|
|
|
|
const body = document.body;
|
2025-09-09 10:42:24 -06:00
|
|
|
|
2025-09-05 15:39:06 -06:00
|
|
|
if (sidebar && sidebarOverlay) {
|
|
|
|
|
sidebar.classList.remove('active');
|
|
|
|
|
sidebarOverlay.classList.remove('active');
|
|
|
|
|
body.style.overflow = '';
|
2025-08-27 13:21:11 -06:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-09-05 15:39:06 -06:00
|
|
|
|
|
|
|
|
// Close sidebar when clicking on overlay
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
const sidebarOverlay = document.getElementById('sidebar-overlay');
|
|
|
|
|
if (sidebarOverlay) {
|
|
|
|
|
sidebarOverlay.addEventListener('click', function() {
|
|
|
|
|
toggleSidebar();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-08-26 14:13:09 -06:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
2025-09-09 10:42:24 -06:00
|
|
|
{{end}}
|
