Initial commit

This commit is contained in:
2026-09-03 10:39:26 +02:00
commit 496e8bdb27
85 changed files with 8134 additions and 0 deletions
@@ -0,0 +1,332 @@
<!DOCTYPE html>
<html class="dark" lang="pl"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Dashboard - SoftSPM</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600&amp;family=Space+Grotesk:wght@600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"on-secondary-fixed-variant": "#005048",
"background": "#101415",
"deep-ocean": "#0B1E3B",
"surface-tint": "#b1c5ff",
"tertiary-container": "#565e74",
"on-error-container": "#ffdad6",
"warning-red": "#B91830",
"primary-fixed": "#d9e2ff",
"secondary": "#4fdbc8",
"on-primary-fixed": "#001946",
"surface": "#101415",
"surface-container-lowest": "#0b0f10",
"tertiary-fixed": "#dae2fd",
"on-background": "#e0e3e5",
"on-error": "#690005",
"surface-container-low": "#191c1e",
"inverse-primary": "#0057cd",
"on-primary-fixed-variant": "#00419d",
"surface-dim": "#101415",
"tertiary-fixed-dim": "#bec6e0",
"on-primary-container": "#cbd8ff",
"surface-container": "#1d2022",
"error": "#ffb4ab",
"on-tertiary-fixed": "#131b2e",
"on-secondary-container": "#003f38",
"outline-variant": "#424654",
"on-primary": "#002c70",
"electric-teal": "#2DD4BF",
"secondary-container": "#04b4a2",
"tertiary": "#bec6e0",
"surface-container-high": "#272a2c",
"secondary-fixed-dim": "#4fdbc8",
"inverse-surface": "#e0e3e5",
"surface-bright": "#363a3b",
"surface-container-highest": "#323537",
"outline": "#8c909f",
"surface-variant": "#323537",
"error-container": "#93000a",
"on-tertiary": "#283044",
"surface-dark": "#020617",
"primary": "#b1c5ff",
"on-secondary": "#003731",
"on-secondary-fixed": "#00201c",
"primary-container": "#0057cd",
"primary-fixed-dim": "#b1c5ff",
"on-surface-variant": "#c2c6d6",
"secondary-fixed": "#71f8e4",
"inverse-on-surface": "#2d3133",
"on-surface": "#e0e3e5",
"on-tertiary-container": "#d0d8f2",
"on-tertiary-fixed-variant": "#3f465c"
},
borderRadius: {
DEFAULT: "0.25rem",
lg: "0.5rem",
xl: "0.75rem",
full: "9999px"
},
spacing: {
"container-max": "1280px",
"stack-md": "24px",
"gutter": "24px",
"stack-sm": "12px",
"margin-desktop": "40px",
"stack-lg": "48px",
"margin-mobile": "16px",
"unit": "8px"
},
fontFamily: {
"display-lg-mobile": ["Space Grotesk"],
"label-sm": ["Hanken Grotesk"],
"body-lg": ["Hanken Grotesk"],
"headline-md": ["Space Grotesk"],
"headline-lg": ["Space Grotesk"],
"display-lg": ["Space Grotesk"],
"body-md": ["Hanken Grotesk"]
},
fontSize: {
"display-lg-mobile": ["36px", { lineHeight: "1.2", fontWeight: "700" }],
"label-sm": ["12px", { lineHeight: "1.2", letterSpacing: "0.05em", fontWeight: "600" }],
"body-lg": ["18px", { lineHeight: "1.6", fontWeight: "400" }],
"headline-md": ["24px", { lineHeight: "1.3", fontWeight: "600" }],
"headline-lg": ["32px", { lineHeight: "1.2", fontWeight: "600" }],
"display-lg": ["48px", { lineHeight: "1.1", letterSpacing: "-0.02em", fontWeight: "700" }],
"body-md": ["16px", { lineHeight: "1.5", fontWeight: "400" }]
}
}
}
};
</script>
<style>
.glass-card {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid rgba(45, 212, 191, 0.3);
border-bottom: 1px solid rgba(0, 87, 205, 0.1);
border-left: 1px solid rgba(0, 87, 205, 0.1);
border-right: 1px solid rgba(0, 87, 205, 0.1);
}
.progress-thin {
height: 2px;
background-color: rgba(45, 212, 191, 0.2);
}
.progress-thin-fill {
height: 100%;
background-color: #2DD4BF;
}
</style>
</head>
<body class="bg-surface-dark text-on-surface font-body-md min-h-screen flex">
<!-- SideNavBar -->
<nav class="hidden lg:flex flex-col py-6 bg-surface-container-lowest h-screen w-64 fixed left-0 top-0 border-r border-outline-variant/10 shadow-sm z-40">
<div class="px-6 mb-8 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-on-primary" data-icon="water_drop">water_drop</span>
</div>
<div>
<h1 class="font-label-sm text-label-sm text-primary uppercase tracking-widest">SoftSPM Portal</h1>
<p class="font-label-sm text-label-sm text-on-surface-variant font-normal opacity-70">Municipal Water Solutions</p>
</div>
</div>
<div class="flex-1 px-4 space-y-2">
<a class="bg-secondary-container text-on-secondary-container rounded-lg px-4 py-2 flex items-center gap-3 transition-transform duration-200" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
<span class="font-label-sm text-label-sm">Dashboard</span>
</a>
<a class="text-on-surface-variant hover:bg-surface-container-high px-4 py-2 flex items-center gap-3 rounded-lg transition-all duration-200 cursor-pointer active:scale-95" href="#">
<span class="material-symbols-outlined" data-icon="groups">groups</span>
<span class="font-label-sm text-label-sm">Expert Network</span>
</a>
<a class="text-on-surface-variant hover:bg-surface-container-high px-4 py-2 flex items-center gap-3 rounded-lg transition-all duration-200 cursor-pointer active:scale-95" href="#">
<span class="material-symbols-outlined" data-icon="library_books">library_books</span>
<span class="font-label-sm text-label-sm">Course Library</span>
</a>
<a class="text-on-surface-variant hover:bg-surface-container-high px-4 py-2 flex items-center gap-3 rounded-lg transition-all duration-200 cursor-pointer active:scale-95" href="#">
<span class="material-symbols-outlined" data-icon="live_tv">live_tv</span>
<span class="font-label-sm text-label-sm">Live Webinars</span>
</a>
<a class="text-on-surface-variant hover:bg-surface-container-high px-4 py-2 flex items-center gap-3 rounded-lg transition-all duration-200 cursor-pointer active:scale-95" href="#">
<span class="material-symbols-outlined" data-icon="business_center">business_center</span>
<span class="font-label-sm text-label-sm">Consulting Portal</span>
</a>
</div>
<div class="px-4 mt-auto mb-6">
<div class="bg-surface-container p-4 rounded-xl border border-outline-variant/20 mb-4">
<p class="font-label-sm text-label-sm text-on-surface mb-2">Pro Plan Active</p>
<div class="w-full bg-background rounded-full h-1 mb-2">
<div class="bg-electric-teal h-1 rounded-full" style="width: 70%"></div>
</div>
<p class="font-label-sm text-label-sm text-on-surface-variant opacity-70 mb-3">21 days remaining</p>
<button class="w-full bg-primary-container text-on-primary rounded-lg py-2 font-label-sm text-label-sm hover:brightness-110 transition-all cursor-pointer">Upgrade to Pro</button>
</div>
<a class="text-on-surface-variant hover:bg-surface-container-high px-4 py-2 flex items-center gap-3 rounded-lg transition-all duration-200 cursor-pointer" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span class="font-label-sm text-label-sm">Settings</span>
</a>
<a class="text-on-surface-variant hover:bg-surface-container-high px-4 py-2 flex items-center gap-3 rounded-lg transition-all duration-200 cursor-pointer" href="#">
<span class="material-symbols-outlined" data-icon="help">help</span>
<span class="font-label-sm text-label-sm">Support</span>
</a>
</div>
</nav>
<!-- Main Content Canvas -->
<main class="flex-1 lg:ml-64 p-margin-mobile md:p-margin-desktop w-full max-w-container-max mx-auto overflow-y-auto">
<!-- Header Section -->
<header class="flex flex-col md:flex-row justify-between items-start md:items-center mb-stack-lg gap-4">
<div>
<h2 class="font-headline-lg text-headline-lg text-on-surface tracking-tight mb-2">Welcome back, Engineer</h2>
<p class="font-body-md text-body-md text-on-surface-variant">Here is your daily municipal intelligence summary.</p>
</div>
<div class="flex items-center gap-4">
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant" data-icon="search">search</span>
<input class="bg-surface-container-lowest border border-outline-variant/30 text-on-surface rounded-full pl-10 pr-4 py-2 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all w-64 text-sm" placeholder="Search resources..." type="text"/>
</div>
<button class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center border border-outline-variant/30 hover:bg-surface-container-high transition-colors relative">
<span class="material-symbols-outlined text-on-surface" data-icon="notifications">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-electric-teal rounded-full"></span>
</button>
<div class="w-10 h-10 rounded-full bg-deep-ocean border border-primary/30 flex items-center justify-center overflow-hidden">
<img alt="User Profile" class="w-full h-full object-cover" data-alt="A futuristic, hyper-realistic macro shot of a single water droplet resting on a dark brushed metal surface. The droplet refracts a bright cyan glowing light from an unseen display, creating a sense of advanced technology. The overall lighting is moody, cinematic, and dark, with a high-contrast aesthetic suitable for a high-end SaaS platform." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBRMNoOUAnDW4YZWPcCX0P00wGTqsKh-2Fq6jKfB64jGE8OPkutw0XR7oDdMZWktXx1dzWJyxroUXDBpObYTqpo-5lOgKDq0PqGL9xs1u5eAjPPZleHobc1H0lVctG0DB5OPN_k2E7dIqMv0KsqUXoLnUCHcy1w7V-8ROzny9oLuMngutt7O6Mel8HbxMjvqaewPrXGX8LwwMMvzZEp2vohN-R4Sd7myLlbiRXB-arCfFQpI6qlx7JnYg"/>
</div>
</div>
</header>
<!-- Bento Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
<!-- Active Courses (Spans 8 cols) -->
<section class="md:col-span-8 space-y-4">
<div class="flex justify-between items-center mb-stack-sm">
<h3 class="font-headline-md text-headline-md text-on-surface">Active Training Modules</h3>
<a class="text-electric-teal font-label-sm text-label-sm hover:underline flex items-center gap-1" href="#">View All <span class="material-symbols-outlined text-[16px]" data-icon="arrow_forward">arrow_forward</span></a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- Course Card 1 -->
<div class="glass-card rounded-xl p-6 flex flex-col hover:bg-surface-container-lowest/50 transition-colors cursor-pointer group">
<div class="flex justify-between items-start mb-4">
<span class="bg-primary/10 text-primary px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wider">Advanced</span>
<span class="material-symbols-outlined text-outline-variant group-hover:text-electric-teal transition-colors" data-icon="water_damage">water_damage</span>
</div>
<h4 class="font-body-lg text-body-lg font-semibold text-on-surface mb-2">Urban Flood Mitigation Systems</h4>
<p class="font-label-sm text-label-sm text-on-surface-variant opacity-80 mb-6 flex-1">Module 4: Predictive modeling using IoT sensor data.</p>
<div class="w-full">
<div class="flex justify-between text-[11px] text-on-surface-variant mb-2">
<span>Progress</span>
<span>65%</span>
</div>
<div class="progress-thin w-full rounded-full overflow-hidden">
<div class="progress-thin-fill w-[65%] shadow-[0_0_8px_rgba(45,212,191,0.6)]"></div>
</div>
</div>
</div>
<!-- Course Card 2 -->
<div class="glass-card rounded-xl p-6 flex flex-col hover:bg-surface-container-lowest/50 transition-colors cursor-pointer group">
<div class="flex justify-between items-start mb-4">
<span class="bg-electric-teal/10 text-electric-teal px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wider">Core</span>
<span class="material-symbols-outlined text-outline-variant group-hover:text-electric-teal transition-colors" data-icon="architecture">architecture</span>
</div>
<h4 class="font-body-lg text-body-lg font-semibold text-on-surface mb-2">Smart Grid Water Distribution</h4>
<p class="font-label-sm text-label-sm text-on-surface-variant opacity-80 mb-6 flex-1">Module 2: Analyzing pressure zones and reducing non-revenue water.</p>
<div class="w-full">
<div class="flex justify-between text-[11px] text-on-surface-variant mb-2">
<span>Progress</span>
<span>30%</span>
</div>
<div class="progress-thin w-full rounded-full overflow-hidden">
<div class="progress-thin-fill w-[30%] shadow-[0_0_8px_rgba(45,212,191,0.6)]"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Upcoming Webinars (Spans 4 cols) -->
<section class="md:col-span-4 space-y-4">
<div class="flex justify-between items-center mb-stack-sm">
<h3 class="font-headline-md text-headline-md text-on-surface">Live Agenda</h3>
</div>
<div class="bg-surface-container-lowest border border-outline-variant/10 rounded-xl p-6 h-full flex flex-col">
<div class="space-y-4 flex-1">
<!-- Webinar Item 1 -->
<div class="flex gap-4 items-start p-3 rounded-lg hover:bg-surface-container transition-colors cursor-pointer group">
<div class="bg-surface-container-high rounded-md p-2 text-center min-w-[50px] border border-outline-variant/20 group-hover:border-electric-teal/30">
<div class="text-[10px] text-electric-teal font-bold uppercase">OCT</div>
<div class="font-headline-md text-on-surface">24</div>
</div>
<div>
<h5 class="font-body-md text-body-md font-semibold text-on-surface mb-1 leading-tight group-hover:text-electric-teal transition-colors">Future of Desalination Tech</h5>
<p class="font-label-sm text-label-sm text-on-surface-variant flex items-center gap-1"><span class="material-symbols-outlined text-[14px]" data-icon="schedule">schedule</span> 14:00 GMT</p>
</div>
</div>
<!-- Webinar Item 2 -->
<div class="flex gap-4 items-start p-3 rounded-lg hover:bg-surface-container transition-colors cursor-pointer group">
<div class="bg-surface-container-high rounded-md p-2 text-center min-w-[50px] border border-outline-variant/20 group-hover:border-electric-teal/30">
<div class="text-[10px] text-on-surface-variant font-bold uppercase">OCT</div>
<div class="font-headline-md text-on-surface">28</div>
</div>
<div>
<h5 class="font-body-md text-body-md font-semibold text-on-surface mb-1 leading-tight group-hover:text-electric-teal transition-colors">Regulatory Compliance 2025</h5>
<p class="font-label-sm text-label-sm text-on-surface-variant flex items-center gap-1"><span class="material-symbols-outlined text-[14px]" data-icon="schedule">schedule</span> 10:00 GMT</p>
</div>
</div>
<!-- Webinar Item 3 -->
<div class="flex gap-4 items-start p-3 rounded-lg hover:bg-surface-container transition-colors cursor-pointer group">
<div class="bg-surface-container-high rounded-md p-2 text-center min-w-[50px] border border-outline-variant/20 group-hover:border-electric-teal/30">
<div class="text-[10px] text-on-surface-variant font-bold uppercase">NOV</div>
<div class="font-headline-md text-on-surface">02</div>
</div>
<div>
<h5 class="font-body-md text-body-md font-semibold text-on-surface mb-1 leading-tight group-hover:text-electric-teal transition-colors">Q&amp;A: Infrastructure Funding</h5>
<p class="font-label-sm text-label-sm text-on-surface-variant flex items-center gap-1"><span class="material-symbols-outlined text-[14px]" data-icon="schedule">schedule</span> 16:30 GMT</p>
</div>
</div>
</div>
<button class="w-full mt-4 py-2 border border-outline-variant/30 rounded-lg text-on-surface font-label-sm hover:bg-surface-container transition-colors flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-[16px]" data-icon="calendar_month">calendar_month</span> Full Calendar
</button>
</div>
</section>
<!-- Quick Access Materials (Spans 12 cols) -->
<section class="md:col-span-12 mt-stack-md">
<h3 class="font-headline-md text-headline-md text-on-surface mb-stack-sm">Recent Intelligence Reports</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Material 1 -->
<div class="group relative overflow-hidden rounded-xl border border-outline-variant/20 bg-surface-container-lowest cursor-pointer">
<div class="h-32 w-full bg-surface-container relative overflow-hidden">
<div class="bg-cover bg-center w-full h-full opacity-60 group-hover:opacity-100 transition-opacity duration-300" data-alt="A highly structured, dark-mode abstract visualization of data networks resembling flowing water through digital pipes. Electric teal and deep ocean blue neon lines intersect on a pitch-black background, conveying a sense of engineered intelligence and modern municipal infrastructure analytics." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBRpOlz5pzIxuXtQi6aW9OqQHlXoE53BjFSAF1CKryNC5XbQkHZ3Mpb7zr177cLggVr5FV34tfr8SHkrl_iwf4f_Tpl9U1lVFfvbhPGTUCIlyXPa4ZBj43bJNovfeSHjEG9WEs2NHuK1lhJp5C8pOevhD50qWCwI6F604bz4ZYOd_7uFRUeJtR5BMgagSRHKGLkkOZRsTcrxTj-VwG8ZppGOWGPoJ7GJjQlh3JuBzRSGL4Sujp-JX5uHA')"></div>
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest to-transparent"></div>
<span class="absolute bottom-2 left-4 text-[10px] font-bold tracking-wider text-electric-teal uppercase bg-background/80 px-2 py-1 rounded backdrop-blur-sm">PDF Report</span>
</div>
<div class="p-4">
<h4 class="font-body-md text-body-md font-semibold text-on-surface mb-1 group-hover:text-electric-teal transition-colors">Q3 Water Quality Index</h4>
<p class="font-label-sm text-label-sm text-on-surface-variant">Comprehensive analysis of municipal testing data across 50 key metropolitan areas.</p>
</div>
</div>
<!-- Material 2 -->
<div class="group relative overflow-hidden rounded-xl border border-outline-variant/20 bg-surface-container-lowest cursor-pointer">
<div class="h-32 w-full bg-surface-container relative overflow-hidden">
<div class="bg-cover bg-center w-full h-full opacity-60 group-hover:opacity-100 transition-opacity duration-300" data-alt="A sleek, dark schematic diagram of a water treatment facility overlaying a deep navy blueprint background. Subtle glowing teal indicators highlight specific filtration nodes, representing high-tech professional consulting in the water management sector." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCKLYRZHDuW2XMtQIExNmZyXPvL7Y1-4-89kmMD0NYBWfoPaxpeglswZKzxAf2UvS74cqbXfXgx0Y6FgDz17OTZuNQIOVm1jeuoXabEoDQLgH246g1BAqKPttqNNkkosr6HaGTwspjco6eP4PUmbvRBxqtMudLVUDNq3XyXVbl72d4gr6XsolzQOl26MHsMo-Ad545hr6giNEFiu_GIusFNaBxaW0iygylC5ZwpLQS8p_wFMf_B_Fapkg')"></div>
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest to-transparent"></div>
<span class="absolute bottom-2 left-4 text-[10px] font-bold tracking-wider text-primary uppercase bg-background/80 px-2 py-1 rounded backdrop-blur-sm">Case Study</span>
</div>
<div class="p-4">
<h4 class="font-body-md text-body-md font-semibold text-on-surface mb-1 group-hover:text-primary transition-colors">Desalination Efficiency</h4>
<p class="font-label-sm text-label-sm text-on-surface-variant">Review of energy consumption metrics in the new coastal facility implementations.</p>
</div>
</div>
<!-- Material 3 -->
<div class="group relative overflow-hidden rounded-xl border border-outline-variant/20 bg-surface-container-lowest cursor-pointer flex flex-col justify-center items-center bg-gradient-to-br from-surface-container to-surface-container-lowest hover:from-surface-container-high transition-colors">
<span class="material-symbols-outlined text-4xl text-outline-variant mb-2 group-hover:text-electric-teal transition-colors" data-icon="folder_open">folder_open</span>
<span class="font-body-md font-semibold text-on-surface">Browse All Documents</span>
</div>
</div>
</section>
</div>
</main>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 523 KiB