feat: initialize Convert UI - browser-based file conversion app
- Add Next.js 16 with Turbopack and React 19 - Add Tailwind CSS 4 with OKLCH color system - Implement FFmpeg.wasm for video/audio conversion - Implement ImageMagick WASM for image conversion - Add file upload with drag-and-drop - Add format selector with fuzzy search - Add conversion preview and download - Add conversion history with localStorage - Add dark/light theme support - Support 22+ file formats across video, audio, and images 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
275
app/globals.css
Normal file
275
app/globals.css
Normal file
@@ -0,0 +1,275 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Source directives - scan components for Tailwind classes */
|
||||
@source "../components/converter/*.{js,ts,jsx,tsx}";
|
||||
@source "../components/layout/*.{js,ts,jsx,tsx}";
|
||||
@source "../components/ui/*.{js,ts,jsx,tsx}";
|
||||
@source "*.{js,ts,jsx,tsx}";
|
||||
|
||||
/* Custom dark mode variant */
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* CSS Variables for theming */
|
||||
@layer base {
|
||||
:root {
|
||||
/* Light mode colors using OKLCH */
|
||||
--background: oklch(100% 0 0);
|
||||
--foreground: oklch(9.8% 0.038 285.8);
|
||||
|
||||
--card: oklch(100% 0 0);
|
||||
--card-foreground: oklch(9.8% 0.038 285.8);
|
||||
|
||||
--popover: oklch(100% 0 0);
|
||||
--popover-foreground: oklch(9.8% 0.038 285.8);
|
||||
|
||||
--primary: oklch(22.4% 0.053 285.8);
|
||||
--primary-foreground: oklch(98% 0 0);
|
||||
|
||||
--secondary: oklch(96.1% 0 0);
|
||||
--secondary-foreground: oklch(13.8% 0.038 285.8);
|
||||
|
||||
--muted: oklch(96.1% 0 0);
|
||||
--muted-foreground: oklch(45.1% 0.015 285.9);
|
||||
|
||||
--accent: oklch(96.1% 0 0);
|
||||
--accent-foreground: oklch(13.8% 0.038 285.8);
|
||||
|
||||
--destructive: oklch(60.2% 0.168 29.2);
|
||||
--destructive-foreground: oklch(98% 0 0);
|
||||
|
||||
--border: oklch(89.8% 0 0);
|
||||
--input: oklch(89.8% 0 0);
|
||||
--ring: oklch(22.4% 0.053 285.8);
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
--success: oklch(60% 0.15 145);
|
||||
--success-foreground: oklch(98% 0 0);
|
||||
|
||||
--warning: oklch(75% 0.15 85);
|
||||
--warning-foreground: oklch(20% 0 0);
|
||||
|
||||
--info: oklch(65% 0.15 240);
|
||||
--info-foreground: oklch(98% 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Dark mode colors using OKLCH */
|
||||
--background: oklch(9.8% 0.038 285.8);
|
||||
--foreground: oklch(98% 0 0);
|
||||
|
||||
--card: oklch(9.8% 0.038 285.8);
|
||||
--card-foreground: oklch(98% 0 0);
|
||||
|
||||
--popover: oklch(9.8% 0.038 285.8);
|
||||
--popover-foreground: oklch(98% 0 0);
|
||||
|
||||
--primary: oklch(98% 0 0);
|
||||
--primary-foreground: oklch(13.8% 0.038 285.8);
|
||||
|
||||
--secondary: oklch(17.7% 0.038 285.8);
|
||||
--secondary-foreground: oklch(98% 0 0);
|
||||
|
||||
--muted: oklch(17.7% 0.038 285.8);
|
||||
--muted-foreground: oklch(63.9% 0.012 285.9);
|
||||
|
||||
--accent: oklch(17.7% 0.038 285.8);
|
||||
--accent-foreground: oklch(98% 0 0);
|
||||
|
||||
--destructive: oklch(50% 0.2 29.2);
|
||||
--destructive-foreground: oklch(98% 0 0);
|
||||
|
||||
--border: oklch(17.7% 0.038 285.8);
|
||||
--input: oklch(17.7% 0.038 285.8);
|
||||
--ring: oklch(83.1% 0.012 285.9);
|
||||
|
||||
--success: oklch(55% 0.15 145);
|
||||
--success-foreground: oklch(98% 0 0);
|
||||
|
||||
--warning: oklch(70% 0.15 85);
|
||||
--warning-foreground: oklch(20% 0 0);
|
||||
|
||||
--info: oklch(60% 0.15 240);
|
||||
--info-foreground: oklch(98% 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme inline - map CSS variables to Tailwind colors */
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-success: var(--success);
|
||||
--color-success-foreground: var(--success-foreground);
|
||||
--color-warning: var(--warning);
|
||||
--color-warning-foreground: var(--warning-foreground);
|
||||
--color-info: var(--info);
|
||||
--color-info-foreground: var(--info-foreground);
|
||||
|
||||
--radius: var(--radius);
|
||||
}
|
||||
|
||||
/* Global styles */
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom animations */
|
||||
@layer utilities {
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseSubtle {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.animate-slideInFromRight {
|
||||
animation: slideInFromRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slideDown {
|
||||
animation: slideDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slideUp {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-scaleIn {
|
||||
animation: scaleIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.animate-pulseSubtle {
|
||||
animation: pulseSubtle 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
animation: shimmer 2s linear infinite;
|
||||
}
|
||||
|
||||
.animate-progress {
|
||||
animation: progress 1.5s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
@layer utilities {
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
@apply bg-muted;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
@apply bg-muted-foreground/30;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-muted-foreground/50;
|
||||
}
|
||||
}
|
||||
40
app/layout.tsx
Normal file
40
app/layout.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import type { Metadata } from 'next';
|
||||
import './globals.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Convert UI - File Conversion in Your Browser',
|
||||
description: 'Convert videos, images, and documents directly in your browser using WebAssembly. No uploads, complete privacy.',
|
||||
keywords: ['file conversion', 'video converter', 'image converter', 'document converter', 'ffmpeg', 'imagemagick', 'pandoc', 'wasm'],
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<head>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function() {
|
||||
try {
|
||||
const theme = localStorage.getItem('theme');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const shouldBeDark = theme === 'dark' || (!theme && prefersDark);
|
||||
if (shouldBeDark) {
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body className="min-h-screen antialiased">
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
69
app/page.tsx
Normal file
69
app/page.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
'use client';
|
||||
|
||||
import { FileConverter } from '@/components/converter/FileConverter';
|
||||
import { ThemeToggle } from '@/components/layout/ThemeToggle';
|
||||
import { ToastProvider } from '@/components/ui/Toast';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<ToastProvider>
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<header className="border-b border-border">
|
||||
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Convert UI</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
File conversion in your browser
|
||||
</p>
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="container mx-auto px-4 py-8 md:py-16">
|
||||
<FileConverter />
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-border mt-16">
|
||||
<div className="container mx-auto px-4 py-6 text-center text-sm text-muted-foreground">
|
||||
<p>
|
||||
Powered by{' '}
|
||||
<a
|
||||
href="https://github.com/ffmpegwasm/ffmpeg.wasm"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
FFmpeg.wasm
|
||||
</a>
|
||||
,{' '}
|
||||
<a
|
||||
href="https://github.com/dlemstra/magick-wasm"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
ImageMagick WASM
|
||||
</a>
|
||||
{' '}&{' '}
|
||||
<a
|
||||
href="https://nextjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Next.js 16
|
||||
</a>
|
||||
</p>
|
||||
<p className="mt-2">
|
||||
All conversions happen locally in your browser. No files are uploaded to any server.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</ToastProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user