Revert to version d87453f
This commit is contained in:
Flatlogic Bot
parent
6f1019ce32
commit
5dec0de0e8
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB |
Binary file not shown.
Binary file not shown.
@ -1,268 +0,0 @@
|
|||||||
{% extends "base.html" %}
|
|
||||||
{% load static %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-6">
|
|
||||||
<div class="appShell grid grid-cols-12">
|
|
||||||
<!-- SIDEBAR -->
|
|
||||||
<div id="sidebar" class="col-span-2 bg-white/80 border-r border-black/5 p-6 md:block sidebarHidden">
|
|
||||||
<div class="flex items-center gap-3 mb-6">
|
|
||||||
<div class="w-10 h-10 bg-black rounded-lg flex items-center justify-center">
|
|
||||||
<span class="text-white font-bold text-lg">CS</span>
|
|
||||||
</div>
|
|
||||||
<span class="font-bold text-lg">ComplianceShield</span>
|
|
||||||
</div>
|
|
||||||
<nav class="flex flex-col gap-2">
|
|
||||||
<span class="text-gray-500 text-sm font-semibold mb-2">Menu</span>
|
|
||||||
<a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg bg-blue-100 text-blue-600 font-semibold">
|
|
||||||
<img src="https://img.icons8.com/material-outlined/24/000000/home--v2.png" alt="home icon" class="w-5 h-5"/>
|
|
||||||
Dashboard
|
|
||||||
</a>
|
|
||||||
<a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
|
|
||||||
<img src="https://img.icons8.com/material-outlined/24/000000/bar-chart.png" alt="reports icon" class="w-5 h-5"/>
|
|
||||||
Reports
|
|
||||||
</a>
|
|
||||||
<a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
|
|
||||||
<img src="https://img.icons8.com/material-outlined/24/000000/calendar--v1.png" alt="calendar icon" class="w-5 h-5"/>
|
|
||||||
Calendar
|
|
||||||
</a>
|
|
||||||
<a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
|
|
||||||
<img src="https://img.icons8.com/material-outlined/24/000000/groups.png" alt="teams icon" class="w-5 h-5"/>
|
|
||||||
Teams
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<span class="text-gray-500 text-sm font-semibold my-2">Projects</span>
|
|
||||||
<a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
|
|
||||||
<div class="w-4 h-4 bg-blue-500 rounded"></div>
|
|
||||||
Ongoing
|
|
||||||
</a>
|
|
||||||
<a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
|
|
||||||
<img src="https://img.icons8.com/material-outlined/24/000000/checkmark--v1.png" alt="completed icon" class="w-4 h-4 text-green-500"/>
|
|
||||||
Completed
|
|
||||||
</a>
|
|
||||||
<a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
|
|
||||||
<div class="w-4 h-4 bg-gray-400 rounded-full"></div>
|
|
||||||
On Hold
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
<div class="card p-4 mt-6 bg-blue-500 text-white">
|
|
||||||
<div class="text-sm font-semibold">Ready to launch a new project?</div>
|
|
||||||
<p class="text-xs mt-1">Create a new jobsite and start tracking compliance today.</p>
|
|
||||||
<button class="btn bg-white text-blue-600 w-full mt-3 py-2 text-sm">Add New Project</button>
|
|
||||||
</div>
|
|
||||||
<div class="mt-auto flex flex-col gap-2 pt-6">
|
|
||||||
<a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
|
|
||||||
<img src="https://img.icons8.com/material-outlined/24/000000/settings.png" alt="settings icon" class="w-5 h-5"/>
|
|
||||||
Settings
|
|
||||||
</a>
|
|
||||||
<a href="#" class="flex items-center gap-3 px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">
|
|
||||||
<img src="https://img.icons8.com/material-outlined/24/000000/help.png" alt="help icon" class="w-5 h-5"/>
|
|
||||||
Help Center
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- MAIN CONTENT -->
|
|
||||||
<main class="col-span-10 p-6">
|
|
||||||
<div class="flex justify-between items-center mb-6">
|
|
||||||
<h2 class="text-2xl font-bold">Dashboard</h2>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="relative">
|
|
||||||
<input type="text" class="softInput" placeholder="Search projects, documents, alerts...">
|
|
||||||
<img src="https://img.icons8.com/material-outlined/24/000000/search--v1.png" alt="search icon" class="absolute top-1/2 -translate-y-1/2 left-3 w-5 h-5 text-gray-400"/>
|
|
||||||
</div>
|
|
||||||
<button class="text-gray-500 hover:text-gray-700">
|
|
||||||
<img src="https://img.icons8.com/material-outlined/24/000000/appointment-reminders.png" alt="bell icon" class="w-6 h-6"/>
|
|
||||||
</button>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-10 h-10 bg-blue-200 rounded-full"></div>
|
|
||||||
<div>
|
|
||||||
<div class="font-semibold">Owner</div>
|
|
||||||
<div class="text-sm text-gray-500">Your Account</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
|
|
||||||
<div class="card p-4">
|
|
||||||
<div class="text-sm text-gray-500">Ongoing Projects</div>
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<div class="text-3xl font-bold">08</div>
|
|
||||||
<div class="text-sm text-green-500 bg-green-100 px-2 py-1 rounded-full">+3.0%</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-xs text-gray-400 mt-2">From last month</div>
|
|
||||||
</div>
|
|
||||||
<div class="card p-4">
|
|
||||||
<div class="text-sm text-gray-500">Complete Projects</div>
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<div class="text-3xl font-bold">30</div>
|
|
||||||
<div class="text-sm text-red-500 bg-red-100 px-2 py-1 rounded-full">-5.0%</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-xs text-gray-400 mt-2">From last month</div>
|
|
||||||
</div>
|
|
||||||
<div class="card p-4">
|
|
||||||
<div class="text-sm text-gray-500">On Hold Projects</div>
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<div class="text-3xl font-bold">03</div>
|
|
||||||
<div class="text-sm text-green-500 bg-green-100 px-2 py-1 rounded-full">+8.0%</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-xs text-gray-400 mt-2">From last month</div>
|
|
||||||
</div>
|
|
||||||
<div class="card p-4 row-span-2">
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<h3 class="font-semibold">Alert Overview</h3>
|
|
||||||
<span class="text-xs bg-gray-200 px-2 py-1 rounded-full">Live</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-4 flex flex-col gap-4">
|
|
||||||
<div class="p-3 rounded-lg bg-red-50 border border-red-200">
|
|
||||||
<div class="flex items-start">
|
|
||||||
<div class="w-6 h-6 bg-red-200 text-red-700 rounded-full flex items-center justify-center mr-3 flex-shrink-0">-</div>
|
|
||||||
<div>
|
|
||||||
<div class="font-semibold text-red-800 text-sm">Fraud / anomaly alert</div>
|
|
||||||
<p class="text-xs text-gray-600 mt-1">Project Manager — Eng. Rahim</p>
|
|
||||||
<p class="text-xs font-bold mt-1">Habiganj 9746tr — Ongoing</p>
|
|
||||||
<p class="text-xs mt-1">Material usage exceeded expected threshold.</p>
|
|
||||||
<div class="flex justify-between items-center mt-2">
|
|
||||||
<div class="text-xs text-gray-500">5 hours ago</div>
|
|
||||||
<button class="text-xs text-white bg-black rounded-lg px-2 py-1">Mark as solved</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-3 rounded-lg bg-yellow-50 border border-yellow-200">
|
|
||||||
<div class="flex items-start">
|
|
||||||
<div class="w-6 h-6 bg-yellow-200 text-yellow-700 rounded-full flex items-center justify-center mr-3 flex-shrink-0">!</div>
|
|
||||||
<div>
|
|
||||||
<div class="font-semibold text-yellow-800 text-sm">COI expiring soon</div>
|
|
||||||
<p class="text-xs text-gray-600 mt-1">Subcontractor — R. Builders LLC</p>
|
|
||||||
<p class="text-xs font-bold mt-1">Certificate of Insurance</p>
|
|
||||||
<p class="text-xs mt-1">Expires in 7 days — request renewal.</p>
|
|
||||||
<div class="flex justify-between items-center mt-2">
|
|
||||||
<div class="text-xs text-gray-500">Today</div>
|
|
||||||
<button class="text-xs text-gray-700 bg-white border border-gray-300 rounded-lg px-2 py-1">Send reminder</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Second Row -->
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
||||||
<!-- Projects Map -->
|
|
||||||
<div class="card p-4 lg:col-span-1">
|
|
||||||
<h3 class="font-semibold mb-4">Projects Map Overview</h3>
|
|
||||||
<div class="bg-gray-200 rounded-lg h-40 mb-4 flex items-center justify-center text-gray-500">Mock map</div>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<div class="flex items-center gap-2 text-sm"><span class="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">📍</span> Kukatata wt46tr</div>
|
|
||||||
<div class="flex items-center gap-2 text-sm"><span class="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">📍</span> Habiganj 9746tr</div>
|
|
||||||
<div class="flex items-center gap-2 text-sm"><span class="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">📍</span> Newmarket 746t</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Project Details & Compliance -->
|
|
||||||
<div class="lg:col-span-2 space-y-6">
|
|
||||||
<div class="card p-4">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div>
|
|
||||||
<h3 class="font-bold">Habiganj 9746tr — <span class="text-blue-600">Ongoing</span></h3>
|
|
||||||
<p class="text-sm text-gray-500">Location Dhaka, Bangladesh</p>
|
|
||||||
</div>
|
|
||||||
<button class="text-sm text-blue-600 font-semibold">View details</button>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-3 gap-4 mt-4 text-center">
|
|
||||||
<div>
|
|
||||||
<div class="text-sm text-gray-500">Planned</div>
|
|
||||||
<div class="font-bold">$2.5M</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="text-sm text-gray-500">Actual</div>
|
|
||||||
<div class="font-bold">$2.0M <span class="text-red-500">(-12%)</span></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="text-sm text-gray-500">Progress</div>
|
|
||||||
<div class="font-bold">45%</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card p-4">
|
|
||||||
<h3 class="font-semibold mb-4">Compliance Status</h3>
|
|
||||||
<div class="grid grid-cols-3 gap-4 text-center">
|
|
||||||
<div class="p-2 rounded-lg bg-gray-50">
|
|
||||||
<div class="text-sm text-gray-500">Daily Logs</div>
|
|
||||||
<div class="font-bold text-green-600">On-time: 92%</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-2 rounded-lg bg-gray-50">
|
|
||||||
<div class="text-sm text-gray-500">Docs</div>
|
|
||||||
<div class="font-bold">Valid: 128 • <span class="text-yellow-600">Expiring: 7</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="p-2 rounded-lg bg-gray-50">
|
|
||||||
<div class="text-sm text-gray-500">Equipment</div>
|
|
||||||
<div class="font-bold text-red-600">Maintenance due: 3</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Daily Activity Log -->
|
|
||||||
<div class="card p-4 mt-6">
|
|
||||||
<div class="flex justify-between items-center mb-4">
|
|
||||||
<h3 class="font-semibold">Daily Activity Log</h3>
|
|
||||||
<div>
|
|
||||||
<button class="text-sm font-semibold text-blue-600 bg-blue-100 px-3 py-1 rounded-lg">Today</button>
|
|
||||||
<button class="text-sm text-gray-600 px-3 py-1 rounded-lg">This week</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<div class="w-12 h-12 bg-gray-200 rounded-lg"></div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="font-semibold">Floor Slab <span class="font-normal text-gray-500">Project Manager — Eng. Rahim</span></p>
|
|
||||||
<p class="text-sm text-blue-600 font-bold">Habiganj 9746tr — Ongoing</p>
|
|
||||||
<ul class="text-sm text-gray-600 list-disc list-inside mt-2">
|
|
||||||
<li>Concrete pouring completed for 2nd floor slab — 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="text-xs text-gray-400 mt-2">Sep 17, 2025 — 06:45 PM</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 text-sm text-gray-500">
|
|
||||||
<img src="https://img.icons8.com/material-outlined/24/000000/image.png" alt="photo icon" class="w-4 h-4"/> 2 photos
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="border-t border-gray-100 my-4"></div>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<div class="w-12 h-12 bg-gray-200 rounded-lg flex items-center justify-center"><img src="https://img.icons8.com/material-outlined/24/000000/trust.png" alt="safety icon" class="w-6 h-6"/></div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="font-semibold">Safety Meeting <span class="font-normal text-gray-500">Supervisor — T. Coleman</span></p>
|
|
||||||
<p class="text-sm text-blue-600 font-bold">Kukatata wt46tr — Ongoing</p>
|
|
||||||
<ul class="text-sm text-gray-600 list-disc list-inside mt-2">
|
|
||||||
<li>Toolbox talk completed (PPE + ladder safety)</li>
|
|
||||||
<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="text-xs text-gray-400 mt-2">Sep 17, 2025 — 08:10 AM</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 text-sm text-green-600 font-semibold">
|
|
||||||
<img src="https://img.icons8.com/material-outlined/24/000000/checkmark--v1.png" alt="completed icon" class="w-4 h-4"/> Completed
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function toggleSidebar() {
|
|
||||||
const sidebar = document.getElementById('sidebar');
|
|
||||||
sidebar.classList.toggle('sidebarHidden');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{% endblock %}
|
|
||||||
@ -67,7 +67,7 @@
|
|||||||
|
|
||||||
<div class="mt-7 flex flex-wrap gap-3">
|
<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-[#2563eb] text-white px-5 py-3 text-sm">Get Started</a>
|
||||||
<a href="{% url 'dashboard' %}" class="btn bg-white border border-black/10 px-5 py-3 text-sm">View Portal Preview</a>
|
<a href="#" class="btn bg-white border border-black/10 px-5 py-3 text-sm">View Portal Preview</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-7 flex flex-wrap gap-2 text-xs text-gray-600">
|
<div class="mt-7 flex flex-wrap gap-2 text-xs text-gray-600">
|
||||||
|
|||||||
@ -1,8 +1,7 @@
|
|||||||
from django.urls import path
|
from django.urls import path
|
||||||
|
|
||||||
from .views import index, dashboard
|
from .views import index
|
||||||
|
|
||||||
urlpatterns = [
|
urlpatterns = [
|
||||||
path("", index, name="index"),
|
path("", index, name="index"),
|
||||||
path("dashboard/", dashboard, name="dashboard"),
|
|
||||||
]
|
]
|
||||||
|
|||||||
@ -6,10 +6,3 @@ def index(request):
|
|||||||
"project_name": "ComplianceShield",
|
"project_name": "ComplianceShield",
|
||||||
}
|
}
|
||||||
return render(request, "core/index.html", context)
|
return render(request, "core/index.html", context)
|
||||||
|
|
||||||
|
|
||||||
def dashboard(request):
|
|
||||||
context = {
|
|
||||||
"project_name": "ComplianceShield",
|
|
||||||
}
|
|
||||||
return render(request, "core/dashboard.html", context)
|
|
||||||
|
|||||||
@ -1,63 +1,54 @@
|
|||||||
:root{
|
:root{
|
||||||
--ink:#0b0b0c;
|
--ink:#0b0b0c;
|
||||||
|
--paper:#fbfaf7;
|
||||||
--line: rgba(11,11,12,.08);
|
--line: rgba(11,11,12,.08);
|
||||||
--shadow: 0 18px 48px rgba(11,11,12,.10);
|
--shadow: 0 18px 48px rgba(11,11,12,.10);
|
||||||
--shadow2: 0 10px 26px rgba(11,11,12,.10);
|
--shadow2: 0 10px 26px rgba(11,11,12,.10);
|
||||||
/* premium blue theme */
|
--radius: 22px;
|
||||||
|
|
||||||
|
/* premium blue theme (like the dashboard reference) */
|
||||||
--blue:#2563eb;
|
--blue:#2563eb;
|
||||||
--blue2:#60a5fa;
|
--blue2:#60a5fa;
|
||||||
--ice:#eef6ff;
|
--ice:#eaf2ff;
|
||||||
|
--ice2:#f6fbff;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body { height: 100%; }
|
html, body { height: 100%; }
|
||||||
body{
|
body { font-family: 'Inter', sans-serif; color: var(--ink); }
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
color: var(--ink);
|
.bg-premium{
|
||||||
background: radial-gradient(1400px 760px at 20% 10%, rgba(96,165,250,.28), rgba(255,255,255,0) 60%), radial-gradient(1200px 640px at 90% 20%, rgba(37,99,235,.20), rgba(255,255,255,0) 55%), linear-gradient(180deg, #f6fbff 0%, #ffffff 55%, #f7fbff 100%);
|
background:
|
||||||
|
radial-gradient(1400px 560px at 18% 8%, rgba(96,165,250,.30), rgba(255,255,255,0) 60%),
|
||||||
|
radial-gradient(1200px 520px at 92% 12%, rgba(37,99,235,.22), rgba(255,255,255,0) 55%),
|
||||||
|
radial-gradient(1100px 620px at 55% 100%, rgba(234,242,255,.95), rgba(255,255,255,0) 60%),
|
||||||
|
linear-gradient(180deg, #f6fbff 0%, #ffffff 55%, #f7fbff 100%);
|
||||||
}
|
}
|
||||||
.appShell{
|
|
||||||
border-radius: 30px;
|
.shell {
|
||||||
background: rgba(255,255,255,.80);
|
border-radius: 26px;
|
||||||
|
background: rgba(255,255,255,.78);
|
||||||
border: 1px solid rgba(11,11,12,.08);
|
border: 1px solid rgba(11,11,12,.08);
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
.card{
|
|
||||||
|
.panel {
|
||||||
|
border-radius: var(--radius);
|
||||||
background: rgba(255,255,255,.92);
|
background: rgba(255,255,255,.92);
|
||||||
border: 1px solid rgba(11,11,12,.06);
|
border: 1px solid rgba(11,11,12,.06);
|
||||||
border-radius: 18px;
|
|
||||||
box-shadow: var(--shadow2);
|
box-shadow: var(--shadow2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chip {
|
.chip {
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: rgba(255,255,255,.85);
|
background: rgba(255,255,255,.8);
|
||||||
border: 1px solid rgba(11,11,12,.08);
|
border: 1px solid rgba(11,11,12,.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
border-radius: 14px;
|
border-radius: 16px;
|
||||||
transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
|
transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
|
||||||
}
|
}
|
||||||
.btn:hover{
|
.btn:hover { transform: translateY(-1px); box-shadow: 0 18px 48px rgba(11,11,12,.10); }
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: var(--shadow2);
|
.drawer.hidden { display:none; }
|
||||||
}
|
|
||||||
.softInput{
|
|
||||||
background: rgba(255,255,255,.92);
|
|
||||||
border: 1px solid rgba(11,11,12,.10);
|
|
||||||
border-radius: 18px;
|
|
||||||
padding: 10px 40px;
|
|
||||||
font-size: 14px;
|
|
||||||
outline: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.softInput:focus{
|
|
||||||
border-color: rgba(37,99,235,.35);
|
|
||||||
box-shadow: 0 0 0 4px rgba(37,99,235,.10);
|
|
||||||
}
|
|
||||||
.divider{
|
|
||||||
border-color: rgba(11,11,12,.10);
|
|
||||||
}
|
|
||||||
/* Mobile sidebar behavior */
|
|
||||||
.sidebarHidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@ -1,63 +1,54 @@
|
|||||||
:root{
|
:root{
|
||||||
--ink:#0b0b0c;
|
--ink:#0b0b0c;
|
||||||
|
--paper:#fbfaf7;
|
||||||
--line: rgba(11,11,12,.08);
|
--line: rgba(11,11,12,.08);
|
||||||
--shadow: 0 18px 48px rgba(11,11,12,.10);
|
--shadow: 0 18px 48px rgba(11,11,12,.10);
|
||||||
--shadow2: 0 10px 26px rgba(11,11,12,.10);
|
--shadow2: 0 10px 26px rgba(11,11,12,.10);
|
||||||
/* premium blue theme */
|
--radius: 22px;
|
||||||
|
|
||||||
|
/* premium blue theme (like the dashboard reference) */
|
||||||
--blue:#2563eb;
|
--blue:#2563eb;
|
||||||
--blue2:#60a5fa;
|
--blue2:#60a5fa;
|
||||||
--ice:#eef6ff;
|
--ice:#eaf2ff;
|
||||||
|
--ice2:#f6fbff;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body { height: 100%; }
|
html, body { height: 100%; }
|
||||||
body{
|
body { font-family: 'Inter', sans-serif; color: var(--ink); }
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
color: var(--ink);
|
.bg-premium{
|
||||||
background: radial-gradient(1400px 760px at 20% 10%, rgba(96,165,250,.28), rgba(255,255,255,0) 60%), radial-gradient(1200px 640px at 90% 20%, rgba(37,99,235,.20), rgba(255,255,255,0) 55%), linear-gradient(180deg, #f6fbff 0%, #ffffff 55%, #f7fbff 100%);
|
background:
|
||||||
|
radial-gradient(1400px 560px at 18% 8%, rgba(96,165,250,.30), rgba(255,255,255,0) 60%),
|
||||||
|
radial-gradient(1200px 520px at 92% 12%, rgba(37,99,235,.22), rgba(255,255,255,0) 55%),
|
||||||
|
radial-gradient(1100px 620px at 55% 100%, rgba(234,242,255,.95), rgba(255,255,255,0) 60%),
|
||||||
|
linear-gradient(180deg, #f6fbff 0%, #ffffff 55%, #f7fbff 100%);
|
||||||
}
|
}
|
||||||
.appShell{
|
|
||||||
border-radius: 30px;
|
.shell {
|
||||||
background: rgba(255,255,255,.80);
|
border-radius: 26px;
|
||||||
|
background: rgba(255,255,255,.78);
|
||||||
border: 1px solid rgba(11,11,12,.08);
|
border: 1px solid rgba(11,11,12,.08);
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
.card{
|
|
||||||
|
.panel {
|
||||||
|
border-radius: var(--radius);
|
||||||
background: rgba(255,255,255,.92);
|
background: rgba(255,255,255,.92);
|
||||||
border: 1px solid rgba(11,11,12,.06);
|
border: 1px solid rgba(11,11,12,.06);
|
||||||
border-radius: 18px;
|
|
||||||
box-shadow: var(--shadow2);
|
box-shadow: var(--shadow2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chip {
|
.chip {
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: rgba(255,255,255,.85);
|
background: rgba(255,255,255,.8);
|
||||||
border: 1px solid rgba(11,11,12,.08);
|
border: 1px solid rgba(11,11,12,.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
border-radius: 14px;
|
border-radius: 16px;
|
||||||
transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
|
transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
|
||||||
}
|
}
|
||||||
.btn:hover{
|
.btn:hover { transform: translateY(-1px); box-shadow: 0 18px 48px rgba(11,11,12,.10); }
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: var(--shadow2);
|
.drawer.hidden { display:none; }
|
||||||
}
|
|
||||||
.softInput{
|
|
||||||
background: rgba(255,255,255,.92);
|
|
||||||
border: 1px solid rgba(11,11,12,.10);
|
|
||||||
border-radius: 18px;
|
|
||||||
padding: 10px 40px;
|
|
||||||
font-size: 14px;
|
|
||||||
outline: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.softInput:focus{
|
|
||||||
border-color: rgba(37,99,235,.35);
|
|
||||||
box-shadow: 0 0 0 4px rgba(37,99,235,.10);
|
|
||||||
}
|
|
||||||
.divider{
|
|
||||||
border-color: rgba(11,11,12,.10);
|
|
||||||
}
|
|
||||||
/* Mobile sidebar behavior */
|
|
||||||
.sidebarHidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB |
Loading…
x
Reference in New Issue
Block a user