12/20/25 V.4
This commit is contained in:
Flatlogic Bot
parent
5dec0de0e8
commit
3f56bde73a
BIN
assets/pasted-20251220-225655-18e53e0d.png
Normal file
BIN
assets/pasted-20251220-225655-18e53e0d.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
assets/pasted-20251220-225752-dc0ee56c.png
Normal file
BIN
assets/pasted-20251220-225752-dc0ee56c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
assets/pasted-20251220-230034-a785e7e2.png
Normal file
BIN
assets/pasted-20251220-230034-a785e7e2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
assets/pasted-20251220-230458-7abed009.webp
Normal file
BIN
assets/pasted-20251220-230458-7abed009.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,147 +1,188 @@
|
|||||||
{% extends 'base.html' %}
|
{% extends 'base.html' %}
|
||||||
{% load static %}
|
{% load static %}
|
||||||
|
|
||||||
{% block title %}ComplianceShield — Construction Compliance, Made Simple{% endblock %}
|
{% block title %}ComplianceShield — Portal{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<body class="bg-premium">
|
<style>
|
||||||
|
:root {
|
||||||
<!-- NAV -->
|
--ink: #0b0b0c;
|
||||||
<header class="max-w-7xl mx-auto px-6 py-5">
|
--paper: #fbfaf7;
|
||||||
<div class="shell px-5 py-4 flex items-center justify-between gap-3">
|
--line: rgba(11, 11, 12, .08);
|
||||||
<a href="#" class="flex items-center gap-3">
|
--shadow: 0 18px 48px rgba(11, 11, 12, .10);
|
||||||
<div class="h-10 w-10 rounded-2xl bg-[#0b0b0c] text-white flex items-center justify-center text-sm font-semibold">CS</div>
|
--shadow2: 0 10px 26px rgba(11, 11, 12, .10);
|
||||||
<div class="font-semibold tracking-tight">ComplianceShield</div>
|
--radius: 22px;
|
||||||
<span class="hidden sm:inline chip px-3 py-1 text-xs text-gray-700">Pro</span>
|
--blue: #2563eb;
|
||||||
</a>
|
--blue2: #60a5fa;
|
||||||
|
--ice: #eaf2ff;
|
||||||
<nav class="hidden lg:flex items-center gap-7 text-sm">
|
--ice2: #f6fbff;
|
||||||
<a class="text-gray-700 hover:text-black" href="#">Home</a>
|
|
||||||
<a class="text-gray-700 hover:text-black" href="#">Features</a>
|
|
||||||
<a class="text-gray-700 hover:text-black" href="#">Pricing</a>
|
|
||||||
<a class="text-gray-700 hover:text-black" href="#">Integrations</a>
|
|
||||||
<a class="text-gray-700 hover:text-black" href="#">About</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<a class="hidden sm:inline text-sm text-gray-700 hover:text-black" href="#">Sign In</a>
|
|
||||||
<a href="#" class="btn bg-[#2563eb] text-white text-sm px-4 py-2">Start Free Trial</a>
|
|
||||||
<button class="lg:hidden chip px-3 py-2 text-sm" onclick="toggleMenu()" aria-label="Open menu">Menu</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- mobile drawer -->
|
|
||||||
<div id="drawer" class="drawer hidden mt-3 shell p-4">
|
|
||||||
<div class="grid gap-2 text-sm">
|
|
||||||
<a class="text-gray-900 font-semibold" href="#" onclick="toggleMenu(true)">Home</a>
|
|
||||||
<a class="text-gray-800" href="#" onclick="toggleMenu(true)">Features</a>
|
|
||||||
<a class="text-gray-800" href="#" onclick="toggleMenu(true)">Pricing</a>
|
|
||||||
<a class="text-gray-800" href="#" onclick="toggleMenu(true)">Integrations</a>
|
|
||||||
<a class="text-gray-800" href="#" onclick="toggleMenu(true)">About</a>
|
|
||||||
<div class="h-px border-t border-black/10 my-2"></div>
|
|
||||||
<a class="text-gray-800" href="#" onclick="toggleMenu(true)">Sign In</a>
|
|
||||||
<a href="#" onclick="toggleMenu(true)" class="btn bg-[#2563eb] text-white text-sm px-4 py-2 text-center">Start Free Trial</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="max-w-7xl mx-auto px-6 pb-16">
|
|
||||||
|
|
||||||
<!-- HERO -->
|
|
||||||
<section class="shell overflow-hidden">
|
|
||||||
<div class="grid lg:grid-cols-12 gap-10 p-8 lg:p-10 items-center">
|
|
||||||
<div class="lg:col-span-6">
|
|
||||||
<div class="inline-flex items-center gap-2 chip px-3 py-1 text-xs">
|
|
||||||
<span class="h-2 w-2 rounded-full bg-[#2563eb]"></span>
|
|
||||||
Trusted by contractors & project managers
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="mt-6 text-4xl md:text-6xl font-extrabold tracking-tight leading-[1.02]">
|
|
||||||
Construction compliance,<br/>made simple.
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="mt-6 text-base md:text-lg text-gray-700">
|
|
||||||
Track daily logs, manage OSHA documentation, monitor equipment maintenance,
|
|
||||||
and keep subcontractors compliant — with a portal that looks premium and works in the field.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="mt-7 flex flex-wrap gap-3">
|
|
||||||
<a href="#" class="btn bg-[#2563eb] text-white px-5 py-3 text-sm">Get Started</a>
|
|
||||||
<a href="#" class="btn bg-white border border-black/10 px-5 py-3 text-sm">View Portal Preview</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-7 flex flex-wrap gap-2 text-xs text-gray-600">
|
|
||||||
<span class="chip px-3 py-1">Daily activity logs</span>
|
|
||||||
<span class="chip px-3 py-1">Document expiration alerts</span>
|
|
||||||
<span class="chip px-3 py-1">Safety meetings</span>
|
|
||||||
<span class="chip px-3 py-1">Audit-ready exports</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-7 panel p-5">
|
|
||||||
<div class="text-sm font-semibold">“Expensive” look, operational outcomes</div>
|
|
||||||
<div class="mt-2 text-sm text-gray-700">
|
|
||||||
Field teams move faster. Managers see risk instantly. Owners stay audit-ready.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- hero preview card -->
|
|
||||||
<div class="lg:col-span-6">
|
|
||||||
<div class="panel p-6 md:p-7">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="text-sm font-semibold">Portal Snapshot</div>
|
|
||||||
<span class="chip px-3 py-1 text-xs text-gray-700">Live-style UI</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-5 grid grid-cols-2 gap-4">
|
|
||||||
<div class="panel p-5">
|
|
||||||
<div class="text-xs text-gray-500">Ongoing Projects</div>
|
|
||||||
<div class="mt-1 text-3xl font-extrabold">08</div>
|
|
||||||
<div class="mt-2 text-xs text-green-600">+3.0% from last month</div>
|
|
||||||
</div>
|
|
||||||
<div class="panel p-5">
|
|
||||||
<div class="text-xs text-gray-500">Alerts</div>
|
|
||||||
<div class="mt-1 text-3xl font-extrabold">03</div>
|
|
||||||
<div class="mt-2 text-xs text-amber-600">2 expiring documents</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-4 panel p-5">
|
|
||||||
<div class="text-xs text-gray-500">Alert Overview</div>
|
|
||||||
<div class="mt-3 space-y-2">
|
|
||||||
<div class="flex items-start gap-3">
|
|
||||||
<span class="mt-0.5 h-2.5 w-2.5 rounded-full bg-red-500"></span>
|
|
||||||
<div>
|
|
||||||
<div class="text-sm font-semibold">Safety incident report pending</div>
|
|
||||||
<div class="text-xs text-gray-600">Requires photos + supervisor review</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-3">
|
|
||||||
<span class="mt-0.5 h-2.5 w-2.5 rounded-full bg-amber-500"></span>
|
|
||||||
<div>
|
|
||||||
<div class="text-sm font-semibold">COI expiring in 7 days</div>
|
|
||||||
<div class="text-xs text-gray-600">Subcontractor: R. Builders LLC</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function toggleMenu(close) {
|
|
||||||
const drawer = document.getElementById('drawer');
|
|
||||||
if (close) {
|
|
||||||
drawer.classList.add('hidden');
|
|
||||||
} else {
|
|
||||||
drawer.classList.toggle('hidden');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
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>
|
||||||
|
|
||||||
</body>
|
<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>
|
||||||
|
<nav class="flex-1 px-4 py-2 space-y-2">
|
||||||
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg">
|
||||||
|
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
|
||||||
|
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">
|
||||||
|
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7m-4 10V7m-6 10V7m-6 10V7"></path></svg>
|
||||||
|
Projects
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
|
||||||
|
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
|
||||||
|
Documents
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
|
||||||
|
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3-1.343 3-3S13.657 2 12 2 9 3.343 9 5s1.343 3 3 3zm0 2c-2.21 0-4 1.79-4 4v1h8v-1c0-2.21-1.79-4-4-4zm6 6H6"></path></svg>
|
||||||
|
Team
|
||||||
|
</a>
|
||||||
|
<a href="/admin" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
|
||||||
|
<svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.096 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||||
|
Admin
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main content -->
|
||||||
|
<main class="flex-1 p-6 lg:p-10">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<h1 class="text-2xl font-semibold text-gray-800">Dashboard</h1>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-6">
|
||||||
|
<!-- Project Details -->
|
||||||
|
<div class="lg:col-span-2">
|
||||||
|
<div class="panel p-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h2 class="text-lg font-semibold">Habiganj 9746tr — Ongoing</h2>
|
||||||
|
<span class="chip px-3 py-1 text-xs">Kukatata wt46tr</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 grid grid-cols-2 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<div class="text-gray-500">Location</div>
|
||||||
|
<div class="font-semibold">Dhaka, Bangladesh</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-gray-500">Planned</div>
|
||||||
|
<div class="font-semibold">$2.5M</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-gray-500">Actual</div>
|
||||||
|
<div class="font-semibold">$2.0M (-12%)</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-gray-500">Progress</div>
|
||||||
|
<div class="font-semibold">45%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6">
|
||||||
|
<a href="#" class="bg-black text-white rounded-lg px-5 py-3 text-sm font-semibold hover:bg-gray-800 transition-colors">View details</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- On-time Status -->
|
||||||
|
<div class="panel p-6">
|
||||||
|
<h2 class="text-lg font-semibold">On-time: 92%</h2>
|
||||||
|
<div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
|
||||||
|
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 92%"></div>
|
||||||
|
</div>
|
||||||
|
<hr class="my-4"/>
|
||||||
|
<div>
|
||||||
|
<div class="text-gray-500">Docs Valid</div>
|
||||||
|
<div class="font-semibold">Valid: 128 • Expiring: 7</div>
|
||||||
|
<div class="mt-2">
|
||||||
|
<span class="chip px-3 py-1 text-xs text-green-600 border-green-200">Valid</span>
|
||||||
|
<span class="chip px-3 py-1 text-xs text-amber-600 border-amber-200">Expiring</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="my-4"/>
|
||||||
|
<div>
|
||||||
|
<div class="text-gray-500">Equipment</div>
|
||||||
|
<div class="font-semibold">Maintenance due: 3</div>
|
||||||
|
<div class="mt-3">
|
||||||
|
<a href="#" class="w-full text-center border border-gray-300 rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-50 transition-colors">Open equipment list</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Daily Activity Log -->
|
||||||
|
<div class="mt-8">
|
||||||
|
<div class="flex items-center justify-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>
|
||||||
|
<button class="chip px-4 py-2 text-sm font-semibold">This week</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
|
||||||
|
<div class="panel p-6">
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold">Floor Slab</h3>
|
||||||
|
<p class="text-sm text-gray-500">Project Manager — Eng. Rahim</p>
|
||||||
|
</div>
|
||||||
|
<span class="chip text-xs px-3 py-1">Habiganj 9746tr — Ongoing</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-4 font-semibold">Concrete pouring completed for 2nd floor slab</p>
|
||||||
|
<ul class="mt-2 list-disc list-inside text-sm text-gray-600 space-y-1">
|
||||||
|
<li>Ensure rebar spacing matches BOQ specification.</li>
|
||||||
|
<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">
|
||||||
|
<span>Sep 17, 2025 — 06:45 PM</span>
|
||||||
|
<span class="flex items-center gap-2"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l-1.586-1.586a2 2 0 00-2.828 0L6 14m6-6l.01.01"></path></svg> 2 photos</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel p-6">
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold">Safety Meeting</h3>
|
||||||
|
<p class="text-sm text-gray-500">Supervisor — T. Coleman</p>
|
||||||
|
</div>
|
||||||
|
<span class="chip text-xs px-3 py-1">Kukatata wt46tr — Ongoing</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-4 font-semibold">Toolbox talk completed (PPE + ladder safety)</p>
|
||||||
|
<ul class="mt-2 list-disc list-inside text-sm text-gray-600 space-y-1">
|
||||||
|
<li>Attendance captured with GPS check-in.</li>
|
||||||
|
<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">
|
||||||
|
<span>Sep 17, 2025 — 08:10 AM</span>
|
||||||
|
<span class="chip text-xs px-3 py-1 text-green-600 border-green-200 flex items-center gap-1"><svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Completed</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Loading…
x
Reference in New Issue
Block a user