12/20/25 V.9

core/templates/base.html

@@ -15,9 +15,9 @@
   {% endif %}
   {% load static %}
   <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
-  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-  <script src="https://unpkg.com/heroicons@2.1.3/24/outline/index.js"></script>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   {% block head %}{% endblock %}
 </head>
 

core/templates/core/index.html

@@ -5,120 +5,40 @@
 
 {% block content %}
 <style>
-  :root {
-    --ink: #0b0b0c;
-    --paper: #fbfaf7;
-    --line: rgba(11, 11, 12, .08);
-    --shadow: 0 18px 48px rgba(11, 11, 12, .10);
-    --shadow2: 0 10px 26px rgba(11, 11, 12, .10);
-    --radius: 22px;
-    --blue: #2563eb;
-    --blue2: #60a5fa;
-    --ice: #eaf2ff;
-    --ice2: #f6fbff;
-  }
   body {
     font-family: 'Inter', sans-serif;
     color: var(--ink);
     background-color: #f7f9fc;
   }
-  .panel {
-    border-radius: var(--radius);
-    background: white;
-    border: 1px solid var(--line);
-    box-shadow: var(--shadow2);
-  }
-  .chip {
-    border-radius: 999px;
-    border: 1px solid var(--line);
-    background: #f8f9fa;
-  }
 </style>
 
-<div class="flex h-screen bg-gray-100">
+<div class="header d-flex justify-content-between align-items-center">
-  <!-- Sidebar -->
+    <div class="d-flex align-items-center">
-  <aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
+        <div class="logo-circle bg-dark text-white">CS</div>
-    <div class="p-6">
+        <h5 class="fw-bold m-0 ms-2">ComplianceShield</h5>
-      <a href="#" class="flex items-center gap-3">
+        <span class="ms-3 text-muted border-start ps-3">Dashboard</span>
-        <div class="h-10 w-10 rounded-2xl bg-[#0b0b0c] text-white flex items-center justify-center text-sm font-semibold">CS</div>
-        <div class="font-semibold tracking-tight">ComplianceShield</div>
-      </a>
     </div>
-    <div class="flex-1">
+    <div class="search-bar w-50">
-        <p class="px-6 text-xs text-gray-500 uppercase tracking-wider">Menu</p>
+        <input type="text" class="form-control" placeholder="Search projects, documents, alerts...">
-        <nav class="px-4 py-2 space-y-1">
-          <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg">
-            🏠 Dashboard
-          </a>
-          <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
-            📊 Reports
-          </a>
-          <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
-            📅 Calendar
-          </a>
-          <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
-            👥 Teams
-          </a>
-        </nav>
-        <p class="px-6 mt-4 text-xs text-gray-500 uppercase tracking-wider">Projects</p>
-        <nav class="px-4 py-2 space-y-1">
-            <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
-                🟦 Ongoing
-            </a>
-            <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
-                ✅ Completed
-            </a>
-            <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
-                ⏸️ On Hold
-            </a>
-        </nav>
     </div>
-    <div class="p-4">
+    <div class="d-flex align-items-center">
-        <div class="p-4 bg-gray-100 rounded-lg text-center">
+        <div class="notification-bell me-3">
-            <p class="text-sm font-medium">Ready to launch a new project?</p>
+            <i class="fa-regular fa-bell"></i>
-            <p class="text-xs text-gray-600 mt-1">Create a new jobsite and start tracking compliance today.</p>
+        </div>
-            <button class="mt-3 w-full bg-blue-600 text-white py-2 rounded-lg text-sm font-semibold">Add New Project</button>
+        <div class="d-flex align-items-center">
+            <div class="avatar me-2"></div>
+            <div>
+                <p class="fw-bold m-0 small">Owner</p>
+                <p class="text-muted m-0 small">Your Account</p>
+            </div>
         </div>
     </div>
-    <div class="border-t border-gray-200">
+</div>
-        <nav class="px-4 py-4 space-y-1">
-            <a href="/admin" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
-                ⚙️ Settings
-            </a>
-            <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
-                🛟 Help Center
-            </a>
-        </nav>
-    </div>
-  </aside>
 
-  <!-- Main content -->
+<div class="p-6 lg:p-10">
-  <main class="flex-1 p-6 lg:p-10 overflow-y-auto">
     <div class="max-w-7xl mx-auto">
-        <div class="flex justify-between items-center mb-6">
-            <h1 class="text-2xl font-semibold text-gray-800">ComplianceShield Dashboard</h1>
-            <div class="flex-1 flex justify-center px-8">
-                <div class="relative w-full max-w-lg">
-                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-                        <i-o-magnifying-glass class="h-5 w-5 text-gray-500"></i-o-magnifying-glass>
-                    </span>
-                    <input type="text" placeholder="Search..." class="block w-full rounded-md border border-gray-200 bg-gray-50 py-2 pl-10 pr-4 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm">
-                </div>
-            </div>
-            <div class="flex items-center gap-4">
-                <i-o-bell class="h-6 w-6 text-gray-500"></i-o-bell>
-                <div class="flex items-center gap-2">
-                    <div class="h-8 w-8 rounded-full bg-gray-400"></div>
-                    <div>
-                        <p class="font-semibold text-sm">Owner</p>
-                        <p class="text-xs text-gray-500">Your Account Menu</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
         <div class="panel p-6 mb-8">
-            <div class="flex justify-between items-center">
+            <div class="flex justify-content-between align-items-center">
                 <div>
                     <h2 class="text-lg font-semibold">Ready to launch a new project?</h2>
                     <p class="text-sm text-gray-500">Create a new jobsite and start tracking compliance today.</p>
@@ -221,7 +141,7 @@
             </div>
         </div>
         <div class="col-span-2">
-             <div class="flex items-center justify-between">
+             <div class="flex items-center justify-content-between">
                 <h2 class="text-xl font-semibold">Daily Activity Log</h2>
                 <div>
                     <button class="chip px-4 py-2 text-sm font-semibold bg-white">Today</button>
@@ -238,7 +158,7 @@
                     <li>Check curing process for foundation concrete.</li>
                     <li>Verify column alignment before pouring.</li>
                 </ul>
-                <div class="flex justify-between items-center mt-4 text-sm text-gray-500">
+                <div class="flex justify-content-between items-center mt-4 text-sm text-gray-500">
                     <span>Sep 17, 2025 — 06:45 PM</span>
                     <span class="flex items-center gap-2"><i-o-photo class="h-5 w-5"></i-o-photo> 2 photos</span>
                 </div>
@@ -253,7 +173,7 @@
                     <li>PPE checklist verified (helmets, vests).</li>
                     <li>Hazards documented with photo proof.</li>
                 </ul>
-                 <div class="flex justify-between items-center mt-4 text-sm text-gray-500">
+                 <div class="flex justify-content-between items-center mt-4 text-sm text-gray-500">
                     <span>Sep 17, 2025 — 08:10 AM</span>
                     <span class="flex items-center gap-2 text-green-600"><i-o-check-circle class="h-5 w-5"></i-o-check-circle> Completed</span>
                 </div>
@@ -263,6 +183,5 @@
       </div>
 
     </div>
-  </main>
 </div>
 {% endblock %}

static/css/custom.css

@@ -52,3 +52,56 @@
     .btn:hover { transform: translateY(-1px); box-shadow: 0 18px 48px rgba(11,11,12,.10); }
 
     .drawer.hidden { display:none; }
+
+.header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--line);
+    background: rgba(255,255,255,.78);
+    backdrop-filter: blur(10px);
+}
+
+.logo-circle {
+    width: 36px;
+    height: 36px;
+    font-size: 14px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: #60a5fa; /* --blue2 */
+}
+
+.search-bar .form-control {
+    border-radius: 20px;
+    padding-left: 2.5rem;
+    border-color: transparent;
+    background-color: #f3f4f6;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: 0.75rem center;
+}
+
+.search-bar .form-control:focus {
+    background-color: white;
+    border-color: var(--blue);
+    box-shadow: none;
+}
+
+.notification-bell {
+    font-size: 1.25rem;
+    color: #6b7280;
+    border: 1px solid var(--line);
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}