67 lines
3.3 KiB
HTML
Executable File
67 lines
3.3 KiB
HTML
Executable File
{% extends 'base.html' %}
|
|
{% block title %}User Profile{% endblock %}
|
|
{% load crispy_forms_tags %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- Profile Picture Update Modal -->
|
|
<div class="fixed inset-0 z-50 hidden overflow-y-auto bg-black bg-opacity-60" id="profilePicModal">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="bg-white rounded-xl shadow-2xl w-full max-w-md">
|
|
<div class="flex justify-between items-center p-6 border-b border-gray-200">
|
|
<h3 class="text-xl font-semibold text-[#1E40AF]">Update Profile Picture</h3>
|
|
<button onclick="document.getElementById('profilePicModal').classList.add('hidden')" class="text-gray-500 hover:text-[#1E40AF] text-2xl transition-colors">×</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<form method="POST" action="{% url 'update_profile_picture' %}" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
{{ update_profile_photo_form|crispy }}
|
|
<button type="submit" class="mt-4 w-full bg-[#1E40AF] hover:bg-[#1E3A8A] text-white font-semibold py-2.5 px-4 rounded-lg transition-colors duration-200">Save Changes</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Content -->
|
|
<div class="max-w-6xl mx-auto px-4 py-12">
|
|
<div class="bg-white rounded-xl shadow-xl overflow-hidden">
|
|
<div class="flex flex-col md:flex-row">
|
|
|
|
<!-- Left Sidebar -->
|
|
<div class="bg-gray-50 md:w-1/3 flex flex-col items-center justify-center p-8 text-center">
|
|
<img src="{{ user.profile_photo.url }}" alt="Profile Image" class="w-36 h-36 rounded-full object-cover mb-6 shadow-lg border-4 border-white">
|
|
<h2 class="text-2xl font-bold text-[#1E40AF]">{{ user }}</h2>
|
|
<a href="{% url 'update_profile' user.id %}" class="mt-6 w-full bg-[#1E40AF] text-white py-2.5 rounded-lg hover:bg-[#1E3A8A] font-semibold transition-colors duration-200">Update Profile</a>
|
|
<button onclick="document.getElementById('profilePicModal').classList.remove('hidden')" class="mt-3 w-full bg-[#1E40AF] text-white py-2.5 rounded-lg hover:bg-[#1E3A8A] font-semibold transition-colors duration-200">Update Profile Picture</button>
|
|
</div>
|
|
|
|
<!-- Right Content -->
|
|
<div class="md:w-2/3 p-8">
|
|
<h3 class="text-xl font-semibold text-[#1E40AF] mb-4 border-b border-gray-200 pb-3">Account Information</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
|
<div>
|
|
<p class="text-sm font-semibold text-gray-500">Email</p>
|
|
<p class="text-[#1E3A8A]">{{ user.email }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold text-gray-500">Phone</p>
|
|
<p class="text-[#1E3A8A]">{{ user.get_decrypted_contact_number }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-semibold text-[#1E40AF] mb-4 border-b border-gray-200 pb-3">Social Media</h3>
|
|
<div class="flex space-x-6 mt-4">
|
|
<a href="#" class="text-[#1E40AF] hover:text-[#1E3A8A] text-2xl transition-colors"><i class="mdi mdi-facebook"></i></a>
|
|
<a href="#" class="text-[#1E40AF] hover:text-[#1E3A8A] text-2xl transition-colors"><i class="mdi mdi-twitter"></i></a>
|
|
<a href="#" class="text-[#1E40AF] hover:text-[#1E3A8A] text-2xl transition-colors"><i class="mdi mdi-instagram"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|