Spider-man theme???

2026-06-23 19:07:40 +02:00
parent 1c717ce7ba
commit e78503b5c1
5 changed files with 79 additions and 30 deletions
@@ -1,7 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
+
@tailwind base;
@tailwind components;
@tailwind utilities;

+@keyframes loading {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
+}
+
 :root {
  --background: 210 40% 98%;
  --foreground: 222.2 84% 4.9%;
@@ -9,7 +16,7 @@
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
-  --primary: 221.2 83.2% 53.3%;
+  --primary: 0 100% 40%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
@@ -21,15 +28,15 @@
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
-  --ring: 221.2 83.2% 53.3%;
+  --ring: 0 100% 40%;
  --sidebar: 0 0% 100%;
  --sidebar-foreground: 222.2 84% 4.9%;
-  --sidebar-primary: 221.2 83.2% 53.3%;
+  --sidebar-primary: 0 100% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 210 40% 96.1%;
  --sidebar-accent-foreground: 222.2 84% 4.9%;
  --sidebar-border: 214.3 31.8% 91.4%;
-  --sidebar-ring: 221.2 83.2% 53.3%;
+  --sidebar-ring: 0 100% 40%;
  --radius: 0.5rem;
 }

@@ -40,7 +47,7 @@
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
-  --primary: 217.2 91.2% 59.8%;
+  --primary: 0 100% 53%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
@@ -52,15 +59,15 @@
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
-  --ring: 224.3 76.3% 48%;
+  --ring: 0 100% 53%;
  --sidebar: 222.2 84% 4.9%;
  --sidebar-foreground: 210 40% 98%;
-  --sidebar-primary: 217.2 91.2% 59.8%;
+  --sidebar-primary: 0 100% 53%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 217.2 32.6% 17.5%;
  --sidebar-accent-foreground: 210 40% 98%;
  --sidebar-border: 217.2 32.6% 17.5%;
-  --sidebar-ring: 224.3 76.3% 48%;
+  --sidebar-ring: 0 100% 53%;
 }

 .ocean {
@@ -1,20 +1,17 @@
 "use client"

-import { Card, CardContent } from "@/components/ui/card"
-import { Skeleton } from "@/components/ui/skeleton"
-
 export function StatCardSkeleton() {
  return (
-    <Card className="h-full">
-      <CardContent className="p-6 flex flex-col">
-        <div className="flex items-center justify-between">
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="h-8 w-16" />
+    <div className="col-span-full flex flex-col items-center justify-center py-20">
+      <p className="text-[#CC0000] dark:text-[#FF1111] text-5xl font-['Bangers',cursive] animate-pulse">
+        THWIP!
+      </p>
+      <p className="text-[#444444] dark:text-[#AAAAAA] text-sm mt-3">
+        Loading your data...
+      </p>
+      <div className="w-48 h-1 rounded-full overflow-hidden bg-[#E0E0E0] dark:bg-[#222222] mt-4">
+        <div className="w-full h-full rounded-full bg-gradient-to-r from-[#CC0000] via-[#FFFFFF] to-[#0033CC] animate-[loading_1.5s_ease-in-out_infinite]" />
      </div>
-          <Skeleton className="h-12 w-12 rounded-xl" />
    </div>
-      </CardContent>
-    </Card>
  )
 }
@@ -34,7 +34,52 @@ export function AppShell({ children }: AppShellProps) {
  }

  return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen bg-[#F8F8F8] dark:bg-[#0A0A0A] relative overflow-hidden"
+      style={{
+        backgroundImage: "radial-gradient(circle, #CC000010 1px, transparent 1px), radial-gradient(circle, #0033CC06 1px, transparent 1px)",
+        backgroundSize: "28px 28px, 14px 14px",
+        backgroundPosition: "0 0, 7px 7px",
+      }}
+    >
+      {/* Spider-Man top gradient bar */}
+      <div className="fixed top-0 left-0 right-0 h-[3px] w-full bg-gradient-to-r from-[#CC0000] via-[#FFFFFF] to-[#0033CC] dark:from-[#FF1111] dark:via-[#FFFFFF] dark:to-[#1144FF] z-50" />
+
+      {/* Corner spider webs */}
+      <div className="hidden lg:block fixed top-0 left-0 pointer-events-none z-0 opacity-[0.07] dark:opacity-[0.12]">
+        <svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <line x1="0" y1="0" x2="180" y2="0" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="180" y2="60" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="180" y2="120" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="180" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="120" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="60" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="0" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <path d="M0,30 Q30,30 30,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,60 Q60,60 60,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,90 Q90,90 90,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,120 Q120,120 120,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,150 Q150,150 150,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,180 Q180,180 180,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+        </svg>
+      </div>
+      <div className="hidden lg:block fixed top-0 right-0 pointer-events-none z-0 opacity-[0.07] dark:opacity-[0.12]">
+        <svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ transform: "scaleX(-1)" }}>
+          <line x1="0" y1="0" x2="180" y2="0" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="180" y2="60" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="180" y2="120" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="180" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="120" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="60" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <line x1="0" y1="0" x2="0" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
+          <path d="M0,30 Q30,30 30,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,60 Q60,60 60,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,90 Q90,90 90,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,120 Q120,120 120,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,150 Q150,150 150,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+          <path d="M0,180 Q180,180 180,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
+        </svg>
+      </div>
+
      <SystemMonitor />
      <Sidebar
        collapsed={sidebarCollapsed}
@@ -19,8 +19,8 @@ export function PageHeader({ title, description, children, className }: PageHead
      className={cn("flex items-center justify-between pb-6", className)}
    >
      <div>
-        <h1 className="text-2xl font-bold tracking-tight border-l-4 border-[#0d9488] pl-4">{title}</h1>
-        {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
+        <h1 className="text-2xl font-bold tracking-tight border-l-4 border-[#CC0000] dark:border-[#FF1111] pl-4 text-[#111111] dark:text-white">{title}</h1>
+        {description && <p className="text-sm text-[#444444] dark:text-[#AAAAAA] mt-1">{description}</p>}
      </div>
      {children && <div className="flex items-center gap-3">{children}</div>}
    </motion.div>
@@ -30,11 +30,11 @@ export function getDashboardStats(period: string): DashboardStats {
    })

  return [
-    { name: "Open", value: statusCounts.open, color: "#3b82f6" },
-    { name: "Contacted", value: statusCounts.contacted, color: "#f59e0b" },
-    { name: "Pending", value: statusCounts.pending, color: "#8b5cf6" },
-    { name: "Closed", value: statusCounts.closed, color: "#10b981" },
-    { name: "Ignored", value: statusCounts.ignored, color: "#6B7280" },
+    { name: "Open", value: statusCounts.open, color: "#CC0000" },
+    { name: "Contacted", value: statusCounts.contacted, color: "#0033CC" },
+    { name: "Pending", value: statusCounts.pending, color: "#FFFFFF" },
+    { name: "Closed", value: statusCounts.closed, color: "#0033CC" },
+    { name: "Ignored", value: statusCounts.ignored, color: "#CC0000" },
  ]
 }