mannpatel/Poll-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Mann Patel
2025-08-26 14:13:09 -06:00
commit 23f6b359ca
39 changed files with 4606 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
app/internal/templates/profile/profile.html Normal file
View File

@@ -0,0 +1,274 @@
{{ define "content" }}
<div class="min-h-screen bg-gray-50">
<!-- Header Bar -->
<div class="bg-white border-b border-gray-200 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<i class="fas fa-user-circle text-blue-600 text-xl"></i>
<h1 class="text-xl font-semibold text-gray-900">User Profile</h1>
</div>
<div class="flex items-center space-x-2 text-sm text-gray-600">
<i class="fas fa-shield-check text-blue-500"></i>
<span>Secure Profile Management</span>
</div>
</div>
</div>
<!-- Main Content -->
<div class="p-6">
<!-- Profile Overview Tile -->
<div class="bg-white border border-gray-200 mb-6">
<div class="bg-blue-50 border-b border-gray-200 px-6 py-4">
<h2 class="text-lg font-semibold text-gray-900 flex items-center">
<i class="fas fa-id-card text-blue-600 mr-3"></i>
Profile Overview
</h2>
</div>
<div class="p-6">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- User Info -->
<div class="lg:col-span-2">
<div class="flex items-start space-x-4">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900">
{{ .User.FirstName }} {{ .User.LastName }}
</h3>
<p class="text-gray-600">{{ .User.Email }}</p>
<div class="flex items-center mt-2 space-x-4">
<span
class="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
>
<i class="fas fa-user-check mr-1"></i>
Active User
</span>
<span class="text-xs text-gray-500"
>ID: {{ .User.UserID }}</span
>
</div>
</div>
</div>
</div>
<!-- Quick Stats -->
<div class="bg-gray-50 border border-gray-200 p-4">
<h4 class="text-sm font-semibold text-gray-700 mb-3">
Account Information
</h4>
<div class="space-y-2">
<div class="flex justify-between text-sm">
<span class="text-gray-600">User ID:</span>
<span class="font-mono text-gray-900">{{ .User.UserID }}</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-600">Role:</span>
<span class="text-gray-900">{{ if eq .User.RoleID 1 }}Admin
{{ else if eq .User.RoleID 2 }}Team Leader
{{ else }}Volunteer
{{ end }}</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-600">Status:</span>
<span class="text-green-600 font-medium">Active</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Edit Profile Form Tile -->
<div class="bg-white border border-gray-200 mt-0 m-6">
<div class="bg-blue-50 border-b border-gray-200 px-6 py-4">
<h2 class="text-lg font-semibold text-gray-900 flex items-center">
<i class="fas fa-edit text-blue-600 mr-3"></i>
Edit Profile Information
</h2>
</div>
<div class="p-6">
<form method="post" action="/profile/update">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- First Name -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">
First Name <span class="text-red-500">*</span>
</label>
<input
type="text"
name="first_name"
value="{{ .User.FirstName }}"
required
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
placeholder="Enter first name"
/>
</div>
<!-- Last Name -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">
Last Name <span class="text-red-500">*</span>
</label>
<input
type="text"
name="last_name"
value="{{ .User.LastName }}"
required
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
placeholder="Enter last name"
/>
</div>
<!-- Email (Read-only) -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">
Email Address
<span class="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-1"
>Read Only</span
>
</label>
<div class="relative">
<input
type="email"
name="email"
value="{{ .User.Email }}"
disabled
class="w-full px-4 py-3 border border-gray-300 bg-gray-100 text-gray-600 cursor-not-allowed"
/>
<div class="absolute inset-y-0 right-0 pr-3 flex items-center">
<i class="fas fa-lock text-gray-400"></i>
</div>
</div>
<p class="text-xs text-gray-500 mt-1">
Contact system administrator to change email
</p>
</div>
<!-- Phone -->
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">
Phone Number
</label>
<input
type="tel"
name="phone"
value="{{ .User.Phone }}"
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
placeholder="Enter phone number"
/>
</div>
</div>
<!-- Form Actions -->
<div
class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
Changes will be applied immediately after saving
</div>
<div class="flex space-x-3">
<button
type="button"
onclick="window.history.back()"
class="px-6 py-2 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
>
<i class="fas fa-times mr-2"></i>
Cancel
</button>
<button
type="submit"
class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
>
<i class="fas fa-save mr-2"></i>
Save Changes
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<style>
/* Professional square corner design */
* {
border-radius: 0 !important;
}
/* Clean transitions */
input,
button,
.transition-colors {
transition: all 0.2s ease;
}
/* Focus states with blue accent */
input:focus {
box-shadow: 0 0 0 1px #3b82f6;
}
button:focus {
box-shadow: 0 0 0 2px #3b82f6;
}
/* Hover effects for tiles */
.hover\:bg-blue-50:hover {
background-color: #eff6ff;
}
.hover\:border-blue-500:hover {
border-color: #3b82f6;
}
/* Professional table-like layout */
.grid {
display: grid;
}
/* Ensure full width usage */
.min-h-screen {
width: 100%;
}
/* Professional button styling */
button {
font-weight: 500;
letter-spacing: 0.025em;
}
/* Clean form inputs */
input[disabled] {
opacity: 0.8;
}
/* Status indicators */
.bg-blue-100 {
background-color: #dbeafe;
}
.text-blue-800 {
color: #1e40af;
}
/* Progress bars */
.bg-blue-600 {
background-color: #2563eb;
}
/* Responsive design */
@media (max-width: 1024px) {
.lg\:grid-cols-2 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
</style>
{{ end }}