kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: new dashboards

Browse Source
This commit is contained in:
kbe
2025-08-31 17:41:15 +02:00
parent 1acc3e09d4
commit 3414057795
6 changed files with 3066 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

556
.superdesign/design_iterations/dashboard_5.html Normal file
View File

@@ -0,0 +1,556 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - Neo-Brutalism Style</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root {
--background: oklch(1.0000 0 0);
--foreground: oklch(0 0 0);
--primary: oklch(0.6489 0.2370 26.9728);
--secondary: oklch(0.9680 0.2110 109.7692);
--accent: oklch(0.5635 0.2408 260.8178);
--muted: oklch(0.9551 0 0);
--border: oklch(0 0 0);
}
body {
font-family: 'DM Sans', sans-serif;
background-color: var(--background);
color: var(--foreground);
}
.mono { font-family: 'Space Mono', monospace; }
.brutal-card {
background: var(--background);
border: 4px solid var(--border);
box-shadow: 8px 8px 0px 0px var(--border);
transition: all 0.1s ease;
}
.brutal-card:hover {
transform: translate(-2px, -2px);
box-shadow: 10px 10px 0px 0px var(--border);
}
.brutal-btn {
border: 3px solid var(--border);
background: var(--primary);
color: white;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 4px 4px 0px 0px var(--border);
transition: all 0.1s ease;
}
.brutal-btn:hover {
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px 0px var(--border);
}
.brutal-btn:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0px 0px var(--border);
}
.brutal-secondary {
background: var(--secondary);
color: var(--border);
}
.brutal-accent {
background: var(--accent);
color: white;
}
.brutal-input {
border: 3px solid var(--border);
background: var(--background);
padding: 12px 16px;
font-family: 'Space Mono', monospace;
font-weight: 700;
}
.brutal-input:focus {
outline: none;
box-shadow: 4px 4px 0px 0px var(--border);
}
.zigzag-border {
background-image: linear-gradient(45deg, var(--border) 25%, transparent 25%),
linear-gradient(-45deg, var(--border) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--border) 75%),
linear-gradient(-45deg, transparent 75%, var(--border) 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.glitch {
position: relative;
color: var(--primary);
font-weight: 900;
}
.glitch:before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: var(--accent);
z-index: -1;
animation: glitch1 0.5s infinite;
}
.glitch:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: var(--secondary);
z-index: -2;
animation: glitch2 0.5s infinite;
}
@keyframes glitch1 {
0%, 100% { transform: translate(0); }
20% { transform: translate(-1px, 1px); }
40% { transform: translate(-1px, -1px); }
60% { transform: translate(1px, 1px); }
80% { transform: translate(1px, -1px); }
}
@keyframes glitch2 {
0%, 100% { transform: translate(0); }
20% { transform: translate(1px, -1px); }
40% { transform: translate(1px, 1px); }
60% { transform: translate(-1px, -1px); }
80% { transform: translate(-1px, 1px); }
}
</style>
</head>
<body class="min-h-screen" style="background: var(--muted);">
<!-- Header -->
<div class="relative p-6 mb-8" style="background: var(--primary);">
<div class="absolute inset-0 zigzag-border opacity-10"></div>
<div class="relative z-10 max-w-7xl mx-auto">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="glitch text-4xl md:text-5xl font-black text-white mono" data-text="DASHBOARD">DASHBOARD</h1>
<p class="text-white/80 font-bold uppercase tracking-wider text-sm">USER CONTROL PANEL v2.1</p>
</div>
<div class="flex items-center space-x-4">
<button class="brutal-btn px-4 py-2 text-sm">SETTINGS</button>
<button class="brutal-btn brutal-secondary px-4 py-2 text-sm">HELP</button>
</div>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto px-6">
<!-- CRITICAL ALERT -->
<div class="brutal-card p-6 mb-8" style="background: #ff4444; border-color: #000; color: white;">
<div class="flex items-start justify-between">
<div class="flex items-start space-x-4">
<div class="p-3 bg-white rounded-none border-2 border-black">
<i data-lucide="zap" class="w-6 h-6 text-black"></i>
</div>
<div>
<h3 class="font-black text-lg mono uppercase">PAYMENT ALERT!</h3>
<p class="text-white/90 text-sm font-bold mb-3">2 TICKETS EXPIRE IN 25 MINUTES</p>
<div class="bg-white p-3 border-2 border-black text-black">
<div class="flex items-center justify-between">
<div>
<span class="mono font-bold text-sm">SOIRÉE JAZZ AU SUNSET</span>
<p class="text-xs">2 TICKETS • ATTEMPT 1/3</p>
</div>
<span class="mono font-black text-lg">€70</span>
</div>
</div>
</div>
</div>
<button class="brutal-btn px-6 py-3 font-black" style="background: white; color: black; border-color: black;">
PAY NOW!
</button>
</div>
</div>
<!-- Metrics Grid -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
<div class="brutal-card p-6" style="background: var(--secondary);">
<div class="flex items-center justify-between mb-4">
<i data-lucide="calendar-check" class="w-8 h-8" style="color: var(--border);"></i>
<span class="mono text-xs font-bold" style="color: var(--border);">BOOKINGS</span>
</div>
<div class="mono text-4xl font-black mb-2" style="color: var(--border);">05</div>
<div class="mono text-xs font-bold" style="color: var(--border);">+2 THIS MONTH</div>
</div>
<div class="brutal-card p-6" style="background: var(--accent);">
<div class="flex items-center justify-between mb-4">
<i data-lucide="clock" class="w-8 h-8 text-white"></i>
<span class="mono text-xs font-bold text-white">TODAY</span>
</div>
<div class="mono text-4xl font-black text-white mb-2">03</div>
<div class="mono text-xs font-bold text-white">EVENTS</div>
</div>
<div class="brutal-card p-6" style="background: #ff6b6b;">
<div class="flex items-center justify-between mb-4">
<i data-lucide="calendar" class="w-8 h-8 text-white"></i>
<span class="mono text-xs font-bold text-white">TOMORROW</span>
</div>
<div class="mono text-4xl font-black text-white mb-2">07</div>
<div class="mono text-xs font-bold text-white">EVENTS</div>
</div>
<div class="brutal-card p-6" style="background: #4ecdc4;">
<div class="flex items-center justify-between mb-4">
<i data-lucide="trending-up" class="w-8 h-8 text-white"></i>
<span class="mono text-xs font-bold text-white">UPCOMING</span>
</div>
<div class="mono text-4xl font-black text-white mb-2">15</div>
<div class="mono text-xs font-bold text-white">THIS WEEK</div>
</div>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- My Events -->
<div class="brutal-card p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="mono text-xl font-black uppercase">MY EVENTS</h2>
<button class="mono text-sm font-bold underline" style="color: var(--accent);">VIEW ALL</button>
</div>
<div class="space-y-4">
<div class="border-4 border-black p-4" style="background: var(--secondary);">
<div class="flex items-start justify-between mb-2">
<div>
<h3 class="mono font-black text-sm uppercase">CONCERT ROCK ALTERNATIVE</h3>
<p class="text-xs font-bold">TODAY 21:00 • SALLE PLEYEL</p>
</div>
<span class="mono text-xs font-black bg-green-400 text-black px-2 py-1 border-2 border-black">CONFIRMED</span>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-1">
<i data-lucide="users" class="w-3 h-3"></i>
<span class="mono text-xs font-bold">156</span>
</div>
<div class="flex items-center space-x-1">
<i data-lucide="star" class="w-3 h-3 fill-current text-yellow-500"></i>
<span class="mono text-xs font-bold">4.7</span>
</div>
</div>
</div>
<div class="border-4 border-black p-4" style="background: var(--accent);">
<div class="flex items-start justify-between mb-2">
<div>
<h3 class="mono font-black text-sm uppercase text-white">NETWORKING TECH</h3>
<p class="text-xs font-bold text-white/90">TOMORROW 19:00 • WEWORK</p>
</div>
<span class="mono text-xs font-black bg-blue-400 text-black px-2 py-1 border-2 border-black">TOMORROW</span>
</div>
<div class="w-full bg-white/20 h-2 border border-white">
<div class="bg-white h-full" style="width: 84%"></div>
</div>
<span class="mono text-xs font-bold text-white mt-1">42/50 PARTICIPANTS</span>
</div>
<div class="border-4 border-black p-4" style="background: #ff6b6b;">
<div class="flex items-start justify-between mb-2">
<div>
<h3 class="mono font-black text-sm uppercase text-white">BRUNCH DU DIMANCHE</h3>
<p class="text-xs font-bold text-white/90">SUNDAY 11:00 • CAFÉ DE FLORE</p>
</div>
<span class="mono text-xs font-black bg-yellow-400 text-black px-2 py-1 border-2 border-black">PENDING</span>
</div>
</div>
</div>
</div>
<!-- Today's Events -->
<div class="brutal-card p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="mono text-xl font-black uppercase">TODAY'S EVENTS</h2>
<button class="mono text-sm font-bold underline" style="color: var(--accent);">VIEW ALL</button>
</div>
<div class="space-y-4">
<div class="border-4 border-black p-4 bg-white relative overflow-hidden">
<div class="absolute top-0 right-0 w-16 h-16 transform rotate-45 translate-x-8 -translate-y-8" style="background: var(--primary);"></div>
<div class="relative z-10">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center space-x-3">
<div class="w-12 h-12 border-3 border-black flex items-center justify-center" style="background: #ff4757;">
<i data-lucide="star" class="w-6 h-6 text-white"></i>
</div>
<div>
<h3 class="mono font-black text-sm uppercase">FESTIVAL CINÉMA</h3>
<p class="text-xs font-bold">20:30 • MK2 BIBLIO</p>
</div>
</div>
<span class="mono font-black text-lg">€25</span>
</div>
<button class="brutal-btn w-full py-2 text-sm">BOOK NOW!</button>
</div>
</div>
<div class="border-4 border-black p-4 bg-white relative overflow-hidden">
<div class="absolute top-0 left-0 w-0 h-0 border-t-16 border-r-16" style="border-top-color: var(--secondary); border-right-color: transparent;"></div>
<div class="relative z-10">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center space-x-3">
<div class="w-12 h-12 border-3 border-black flex items-center justify-center" style="background: #ffa502;">
<i data-lucide="utensils" class="w-6 h-6 text-white"></i>
</div>
<div>
<h3 class="mono font-black text-sm uppercase">COOKING CLASS</h3>
<p class="text-xs font-bold">14:00 • ÉCOLE DUCASSE</p>
</div>
</div>
<span class="mono font-black text-lg">€85</span>
</div>
<button class="brutal-btn brutal-secondary w-full py-2 text-sm">BOOK NOW!</button>
</div>
</div>
<div class="border-4 border-black p-4 bg-white relative overflow-hidden">
<div class="absolute bottom-0 right-0 w-0 h-0 border-b-16 border-l-16" style="border-bottom-color: var(--accent); border-left-color: transparent;"></div>
<div class="relative z-10">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center space-x-3">
<div class="w-12 h-12 border-3 border-black flex items-center justify-center" style="background: #2ed573;">
<i data-lucide="camera" class="w-6 h-6 text-white"></i>
</div>
<div>
<h3 class="mono font-black text-sm uppercase">PHOTO EXPO</h3>
<p class="text-xs font-bold">10:00 • GALERIE PERROTIN</p>
</div>
</div>
<span class="mono font-black text-sm" style="color: var(--accent);">FREE</span>
</div>
<button class="brutal-btn brutal-accent w-full py-2 text-sm">VIEW DETAILS</button>
</div>
</div>
</div>
</div>
</div>
<!-- Stats Section -->
<div class="mt-8 brutal-card p-6">
<h2 class="mono text-xl font-black uppercase mb-6">USER STATISTICS</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Performance Chart -->
<div class="md:col-span-2">
<h3 class="mono font-black text-sm uppercase mb-4">PERFORMANCE METRICS</h3>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="mono font-bold text-sm">SUCCESS RATE</span>
<div class="flex items-center space-x-3">
<div class="w-32 h-4 border-2 border-black bg-white">
<div class="h-full border-r-2 border-black" style="width: 94%; background: var(--secondary);"></div>
</div>
<span class="mono font-black">94%</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="mono font-bold text-sm">ENGAGEMENT</span>
<div class="flex items-center space-x-3">
<div class="w-32 h-4 border-2 border-black bg-white">
<div class="h-full border-r-2 border-black" style="width: 78%; background: var(--accent);"></div>
</div>
<span class="mono font-black">78%</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="mono font-bold text-sm">SATISFACTION</span>
<div class="flex items-center space-x-3">
<div class="w-32 h-4 border-2 border-black bg-white">
<div class="h-full border-r-2 border-black" style="width: 89%; background: var(--primary);"></div>
</div>
<span class="mono font-black">89%</span>
</div>
</div>
</div>
</div>
<!-- Quick Stats -->
<div>
<h3 class="mono font-black text-sm uppercase mb-4">QUICK STATS</h3>
<div class="space-y-3">
<div class="border-2 border-black p-3 bg-white">
<div class="flex items-center justify-between">
<span class="mono text-xs font-bold">TOTAL EVENTS</span>
<span class="mono font-black">127</span>
</div>
</div>
<div class="border-2 border-black p-3" style="background: var(--secondary);">
<div class="flex items-center justify-between">
<span class="mono text-xs font-bold">PARTICIPANTS</span>
<span class="mono font-black">2,456</span>
</div>
</div>
<div class="border-2 border-black p-3" style="background: var(--accent);">
<div class="flex items-center justify-between">
<span class="mono text-xs font-bold text-white">RATING</span>
<span class="mono font-black text-white">4.8/5</span>
</div>
</div>
<div class="border-2 border-black p-3" style="background: var(--primary);">
<div class="flex items-center justify-between">
<span class="mono text-xs font-bold text-white">REVENUE</span>
<span class="mono font-black text-white">€12,340</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Upcoming Events Grid -->
<div class="brutal-card p-6 mb-8">
<div class="flex items-center justify-between mb-6">
<h2 class="mono text-xl font-black uppercase">UPCOMING EVENTS</h2>
<div class="flex items-center space-x-2">
<button class="mono text-xs font-bold px-3 py-1 border-2 border-black bg-white hover:bg-gray-100">FILTER</button>
<button class="mono text-xs font-bold px-3 py-1 border-2 border-black bg-white hover:bg-gray-100">SORT</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Event Card 1 -->
<div class="border-4 border-black bg-white relative overflow-hidden">
<div class="h-32 flex items-center justify-center relative" style="background: linear-gradient(45deg, #ff6b6b, #ffa500);">
<i data-lucide="music" class="w-12 h-12 text-white"></i>
<div class="absolute top-2 right-2 mono text-xs font-black bg-white text-black px-2 py-1 border border-black">HOT!</div>
</div>
<div class="p-4">
<h3 class="mono font-black text-sm uppercase mb-2">CONCERT ÉLECTRO</h3>
<p class="text-xs font-bold mb-3">SAT 21 SEPT • BERGHAIN</p>
<div class="flex items-center justify-between">
<span class="mono font-black text-lg">€45</span>
<button class="brutal-btn px-4 py-1 text-xs">BOOK!</button>
</div>
</div>
</div>
<!-- Event Card 2 -->
<div class="border-4 border-black bg-white relative overflow-hidden">
<div class="h-32 flex items-center justify-center relative" style="background: linear-gradient(45deg, #2ed573, #1e90ff);">
<i data-lucide="leaf" class="w-12 h-12 text-white"></i>
<div class="absolute top-2 right-2 mono text-xs font-black bg-green-400 text-black px-2 py-1 border border-black">ECO</div>
</div>
<div class="p-4">
<h3 class="mono font-black text-sm uppercase mb-2">MARCHÉ BIO</h3>
<p class="text-xs font-bold mb-3">SUN 22 SEPT • PLACE VOSGES</p>
<div class="flex items-center justify-between">
<span class="mono font-black text-lg" style="color: var(--accent);">FREE</span>
<button class="brutal-btn brutal-secondary px-4 py-1 text-xs">VIEW</button>
</div>
</div>
</div>
<!-- Event Card 3 -->
<div class="border-4 border-black bg-white relative overflow-hidden">
<div class="h-32 flex items-center justify-center relative" style="background: linear-gradient(45deg, #a55eea, #ff6b6b);">
<i data-lucide="book-open" class="w-12 h-12 text-white"></i>
<div class="absolute top-2 right-2 mono text-xs font-black bg-purple-400 text-black px-2 py-1 border border-black">NEW</div>
</div>
<div class="p-4">
<h3 class="mono font-black text-sm uppercase mb-2">SALON DU LIVRE</h3>
<p class="text-xs font-bold mb-3">MON 23 SEPT • GRAND PALAIS</p>
<div class="flex items-center justify-between">
<span class="mono font-black text-lg">€15</span>
<button class="brutal-btn brutal-accent px-4 py-1 text-xs">BOOK!</button>
</div>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<button class="brutal-btn p-6 text-center">
<i data-lucide="plus" class="w-8 h-8 mx-auto mb-2"></i>
<span class="mono font-black text-sm">CREATE EVENT</span>
</button>
<button class="brutal-btn brutal-secondary p-6 text-center">
<i data-lucide="search" class="w-8 h-8 mx-auto mb-2"></i>
<span class="mono font-black text-sm">FIND EVENTS</span>
</button>
<button class="brutal-btn brutal-accent p-6 text-center">
<i data-lucide="heart" class="w-8 h-8 mx-auto mb-2"></i>
<span class="mono font-black text-sm">MY FAVORITES</span>
</button>
</div>
</div>
<!-- Floating Action Button -->
<button class="fixed bottom-6 right-6 w-16 h-16 border-4 border-black flex items-center justify-center font-black text-white hover:scale-110 transition-transform z-50" style="background: var(--primary); box-shadow: 6px 6px 0px 0px var(--border);">
<i data-lucide="zap" class="w-8 h-8"></i>
</button>
<script>
lucide.createIcons();
// Add some brutal interactions
document.querySelectorAll('.brutal-card').forEach(card => {
card.addEventListener('click', function() {
this.style.transform = 'translate(2px, 2px)';
this.style.boxShadow = '4px 4px 0px 0px var(--border)';
setTimeout(() => {
this.style.transform = '';
this.style.boxShadow = '';
}, 100);
});
});
// Brutal shake animation for alerts
const alertCard = document.querySelector('.brutal-card');
setInterval(() => {
if (alertCard && alertCard.style.background === 'rgb(255, 68, 68)') {
alertCard.style.animation = 'shake 0.3s ease-in-out';
setTimeout(() => {
alertCard.style.animation = '';
}, 300);
}
}, 3000);
// Define shake animation
const style = document.createElement('style');
style.textContent = `
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
75% { transform: translateX(2px); }
}
`;
document.head.appendChild(style);
</script>
</body>
</html>