pascallinxweiler/Clipify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Implement black and white theme - wrote 3 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-30 08:16:57 +01:00
parent 670519dba2
commit 82db797db5
3 changed files with 42 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/app/globals.css
View File

@@ -74,71 +74,39 @@
--sidebar-ring: 217.2 91.2% 59.8%}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--background: 0 0% 0%;
--foreground: 0 0% 100%;
--card: 0 0% 0%;
--card-foreground: 0 0% 100%;
--popover: 0 0% 0%;
--popover-foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 0 0% 0%;
--secondary: 0 0% 10%;
--secondary-foreground: 0 0% 100%;
--muted: 0 0% 10%;
--muted-foreground: 0 0% 65%;
--accent: 0 0% 10%;
--accent-foreground: 0 0% 100%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%
;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%}
--destructive-foreground: 0 0% 100%;
--border: 0 0% 25%;
--input: 0 0% 25%;
--ring: 0 0% 100%;
--chart-1: 0 0% 100%;
--chart-2: 0 0% 80%;
--chart-3: 0 0% 60%;
--chart-4: 0 0% 40%;
--chart-5: 0 0% 20%;
--sidebar-background: 0 0% 0%;
--sidebar-foreground: 0 0% 100%;
--sidebar-primary: 0 0% 100%;
--sidebar-primary-foreground: 0 0% 0%;
--sidebar-accent: 0 0% 10%;
--sidebar-accent-foreground: 0 0% 100%;
--sidebar-border: 0 0% 25%;
--sidebar-ring: 0 0% 100%;
}
}

2
src/app/page.tsx
View File

@@ -2,7 +2,7 @@ import { VideoEditor } from "@/components/video-editor";
export default function Home() {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-900 p-4 sm:p-6 md:p-8 font-[family-name:var(--font-geist-sans)]">
<div className="flex flex-col items-center justify-center min-h-screen bg-background p-4 sm:p-6 md:p-8 font-[family-name:var(--font-geist-sans)]">
<main className="w-full max-w-4xl">
<VideoEditor />
</main>

16
src/components/video-editor.tsx
View File

@@ -43,12 +43,12 @@ export function VideoEditor() {
};
return (
<Card className="w-full shadow-lg rounded-2xl border-0">
<Card className="w-full shadow-lg rounded-2xl border">
<CardHeader className="text-center">
<CardTitle className="text-3xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500">
<CardTitle className="text-3xl font-bold tracking-tight">
Video Clip Cutter
</CardTitle>
<CardDescription className="text-lg text-gray-600 dark:text-gray-400 pt-2">
<CardDescription className="text-lg text-muted-foreground pt-2">
Upload, trim, and export your video in seconds.
</CardDescription>
</CardHeader>
@@ -85,14 +85,14 @@ export function VideoEditor() {
<div className="flex items-center justify-center w-full">
<Label
htmlFor="video-upload"
className="flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500"
className="flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer bg-transparent hover:bg-secondary transition-colors"
>
<div className="flex flex-col items-center justify-center pt-5 pb-6">
<UploadCloud className="w-10 h-10 mb-4 text-gray-500 dark:text-gray-400" />
<p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
<span className="font-semibold">Click to upload</span> or drag and drop
<UploadCloud className="w-10 h-10 mb-4 text-muted-foreground" />
<p className="mb-2 text-sm text-muted-foreground">
<span className="font-semibold text-foreground">Click to upload</span> or drag and drop
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">MP4, WebM, or OGG</p>
<p className="text-xs text-muted-foreground">MP4, WebM, or OGG</p>
</div>
<Input
id="video-upload"