Look and fell from polisplexity.tech

core/templates/core/index.html

@@ -1,52 +1,48 @@
-{% extends 'base.html' %}
+{% extends 'pxy_dashboard/partials/base.html' %}
+{% load static %}
 
 {% block title %}Polisplexity Portal{% endblock title %}
 
-{% block extra_css %}
-<style>
-    .card-img-top {
-        height: 200px; /* Fixed height for consistency */
-        object-fit: cover; /* Ensures image covers the area nicely */
-    }
-    .card:hover {
-        transform: scale(1.05); /* Slight zoom effect on hover for interactivity */
-        transition: transform 0.3s ease-in-out;
-    }
-</style>
-{% endblock extra_css %}
-
 {% block content %}
-<div class="container mt-4">
+<div class="container-fluid">
-    <h2 class="text-center mb-4">Welcome to Polisplexity</h2>
+    <div class="row justify-content-center">
-    <p class="text-center mb-4">Select one of the options Bellow</p>
+        <div class="col-12 text-center mb-4">
+            <h2 class="mt-3">Welcome to Polisplexity</h2>
+            <p class="text-muted">Select one of the available options</p>
+        </div>
+    </div>
 
     {% for category, items in grouped_menu_items.items %}
         {% if not forloop.first %}
-            <hr> <!-- Horizontal separator for every new category except the first one -->
+        <div class="row mt-4">
-        {% endif %}
+            <div class="col-12">
-        <div class="row">
+                <hr class="border-secondary">
-            <div class="col-12 col-md-3 mb-4">
-            <h3> {{ category.name }}</h3>
-            <small> {{ category.description }}</small>
             </div>
+        </div>
+        {% endif %}
+
+        <div class="row mb-4">
+            <div class="col-12">
+                <h4 class="text-primary">{{ category.name }}</h4>
+                <p class="text-muted">{{ category.description }}</p>
+            </div>
+        </div>
+
+        <div class="row">
             {% for menu_item in items %}
-                <div class="col-12 col-md-3 mb-4">
+            <div class="col-sm-6 col-lg-3">
-                    <div class="card h-100">
+                <div class="card d-block">
                     {% if menu_item.image %}
-                <!-- Display Image if available -->
+                        <img class="card-img-top" src="{{ menu_item.image.url }}" alt="{{ menu_item.title }}">
-                <img src="{{ menu_item.image.url }}" class="card-img-top" alt="{{ menu_item.title }}">
                     {% elif menu_item.icon %}
-                <!-- Display Icon if image is not available but icon is -->
+                        <div class="card-header text-center bg-light-subtle">
-                <div class="card-header text-center">
+                            <span class="material-symbols-rounded display-4 text-primary">{{ menu_item.icon }}</span>
-                    <span class="material-symbols-rounded md-48">{{ menu_item.icon }}</span>
                         </div>
                     {% endif %}
                     <div class="card-body">
                         <h5 class="card-title">{{ menu_item.title }}</h5>
                         <p class="card-text">{{ menu_item.description }}</p>
-                        </div>
+                        <a href="{{ menu_item.url }}" class="btn btn-sm btn-primary stretched-link">{{ menu_item.url_text }}</a>
-                        <div class="card-footer bg-white">
-                            <a href="{{ menu_item.url }}" class="btn btn-primary">{{ menu_item.url_text }}</a>
                     </div>
                 </div>
             </div>
@@ -55,12 +51,3 @@
     {% endfor %}
 </div>
 {% endblock content %}
-
-
-{% block extra_js %}
-<script>
-$(function () {
-    $('[data-bs-toggle="tooltip"]').tooltip() // Initialize Bootstrap tooltips
-})
-</script>
-{% endblock extra_js %}

polisplexity/urls.py

@@ -26,7 +26,7 @@ admin.site.index_title = "Welcome to Polisplexity City Technologies Portal"
 urlpatterns = [
     path("admin/", admin.site.urls),
     path('', include('pxy_dashboard.urls')),
-    path('', include('core.urls')),
+    path('core', include('core.urls')),
     path('', include('pxy_city_digital_twins.urls')),
     path('pxy_whatsapp/', include('pxy_whatsapp.urls')),
     path('bots/', include('pxy_bots.urls')),  # Webhook URL: /bots/webhook/<bot_name>/

pxy_dashboard/templates/pxy_dashboard/partials/head-css.html

@@ -4,6 +4,6 @@
 
 <!-- App css -->
 <link href="{% static 'dashboard/css/app.min.css' %}" rel="stylesheet" type="text/css" id="app-style" />
-
+<link href="{% static 'dashboard/css/app.main.css' %}" rel="stylesheet" type="text/css" id="app-style" />
 <!-- Icons css -->
 <link href="{% static 'dashboard/css/icons.min.css' %}" rel="stylesheet" type="text/css" />