base setup

at_django_boilerplate/accounts/templates/profile/profile.html

@@ -0,0 +1,66 @@
+{% 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">&times;</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 %}

at_django_boilerplate/accounts/templates/profile/update_profile.html

@@ -0,0 +1,21 @@
+{% extends 'base.html' %}
+{% load crispy_forms_tags %}
+
+{% block title %}
+    Update Profile
+{% endblock %}
+
+{% block content %}
+<div class="container mx-auto max-w-lg p-6 bg-white rounded-lg shadow-lg mt-10">
+    <h2 class="text-3xl font-bold text-center text-gray-800 mb-6">Update Profile</h2>
+
+    <form method="POST" class="space-y-6">
+        {% csrf_token %}
+        {{ form|crispy }}
+        
+        <button type="submit" class="w-full bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white font-bold py-2 px-4 rounded-lg shadow-lg transition duration-300">
+            Save changes
+        </button>
+    </form>
+</div>
+{% endblock %}

at_django_boilerplate/accounts/templates/profile/update_profile_picture.html

@@ -0,0 +1,14 @@
+{% extends 'base.html' %}
+{% block title %}
+    Update Profile Picture
+{% endblock %}
+{% block content %}
+<div class="container">
+    <h2>Update Profile Picture</h2>
+    <form method="POST" enctype="multipart/form-data">
+        {% csrf_token %}
+        {{ form.as_p }}
+        <button type="submit" class="btn btn-primary">Save changes</button>
+    </form>
+</div>
+{% endblock %}