12/20/25 V.9
This commit is contained in:
Flatlogic Bot
parent
5f1e7ac9e3
commit
91cda1b45d
BIN
assets/pasted-20251221-013937-99f2729f.png
Normal file
BIN
assets/pasted-20251221-013937-99f2729f.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
@ -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>
|
||||
<script src="https://unpkg.com/heroicons@2.1.3/24/outline/index.js"></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">
|
||||
<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>
|
||||
|
||||
|
||||
@ -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">
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
|
||||
<div class="p-6">
|
||||
<a href="#" class="flex items-center gap-3">
|
||||
<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 class="header d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="logo-circle bg-dark text-white">CS</div>
|
||||
<h5 class="fw-bold m-0 ms-2">ComplianceShield</h5>
|
||||
<span class="ms-3 text-muted border-start ps-3">Dashboard</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="px-6 text-xs text-gray-500 uppercase tracking-wider">Menu</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 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 class="search-bar w-50">
|
||||
<input type="text" class="form-control" placeholder="Search projects, documents, alerts...">
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="p-4 bg-gray-100 rounded-lg text-center">
|
||||
<p class="text-sm font-medium">Ready to launch a new project?</p>
|
||||
<p class="text-xs text-gray-600 mt-1">Create a new jobsite and start tracking compliance today.</p>
|
||||
<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="notification-bell me-3">
|
||||
<i class="fa-regular fa-bell"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<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 -->
|
||||
<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 class="d-flex align-items-center">
|
||||
<div class="avatar me-2"></div>
|
||||
<div>
|
||||
<p class="font-semibold text-sm">Owner</p>
|
||||
<p class="text-xs text-gray-500">Your Account Menu</p>
|
||||
</div>
|
||||
<p class="fw-bold m-0 small">Owner</p>
|
||||
<p class="text-muted m-0 small">Your Account</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 lg:p-10">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<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 %}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user