first commit
This commit is contained in:
Alberto-Audrix committed
commit
b54624be96
226 files changed
+108840
No files matched your search
+158
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CP Dashboard Executive — Main Office</title>
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<style>
|
||||
:root {
|
||||
/* Color System - Original */
|
||||
--color-primary-50: #FEF2F2;
|
||||
--color-primary-100: #FEE2E2;
|
||||
--color-primary-200: #FECACA;
|
||||
--color-primary-300: #FCA5A5;
|
||||
--color-primary-400: #F87171;
|
||||
--color-primary-500: #EF4444;
|
||||
--color-primary-600: #DC2626;
|
||||
--color-primary-700: #B91C1C;
|
||||
--color-primary-800: #991B1B;
|
||||
--color-primary-900: #7F1D1D;
|
||||
|
||||
--color-secondary-50: #F0F9FF;
|
||||
--color-secondary-100: #E0F2FE;
|
||||
--color-secondary-200: #BAE6FD;
|
||||
--color-secondary-300: #7DD3FC;
|
||||
--color-secondary-400: #38BDF8;
|
||||
--color-secondary-500: #0EA5E9;
|
||||
--color-secondary-600: #0284C7;
|
||||
--color-secondary-700: #0369A1;
|
||||
--color-secondary-800: #075985;
|
||||
--color-secondary-900: #0C4A6E;
|
||||
|
||||
--color-neutral-50: #F9FAFB;
|
||||
--color-neutral-100: #F3F4F6;
|
||||
--color-neutral-200: #E5E7EB;
|
||||
--color-neutral-300: #D1D5DB;
|
||||
--color-neutral-400: #9CA3AF;
|
||||
--color-neutral-500: #6B7280;
|
||||
--color-neutral-600: #4B5563;
|
||||
--color-neutral-700: #374151;
|
||||
--color-neutral-800: #1F2937;
|
||||
--color-neutral-900: #111827;
|
||||
|
||||
/* Background Colors */
|
||||
--bg-base: #F3F4F6;
|
||||
--bg-elevated: #FFFFFF;
|
||||
--bg-subtle: #F9FAFB;
|
||||
--bg-overlay: rgba(31, 41, 55, 0.5);
|
||||
|
||||
/* Typography */
|
||||
--font-display: system-ui, -apple-system, sans-serif;
|
||||
--font-body: system-ui, -apple-system, sans-serif;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* Border Radius */
|
||||
--radius-sm: 0.5rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-xl: 1.5rem;
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background-color: var(--bg-base);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Smooth scrolling */
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-neutral-100);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-neutral-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
/* Animation keyframes */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp var(--transition-base) ease-out;
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.bg-gradient-warm {
|
||||
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
|
||||
}
|
||||
|
||||
.bg-gradient-fresh {
|
||||
background: linear-gradient(135deg, var(--color-secondary-400) 0%, var(--color-secondary-600) 100%);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in new issue
Block a user