faglo/main_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
20928e9a60f6df8f054e2c43bd2f08adb880cfe5
main_frontend/preview.html
T
Daniil 3dfb9453ec migrate to radix ui, make header draft
2026-01-20 00:50:12 +03:00

338 lines
19 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="light" lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Video Projects Dashboard</title>
<!-- Google Fonts: Spline Sans -->
<link href="https://fonts.googleapis.com" rel="preconnect" />
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&amp;display=swap"
rel="stylesheet" />
<!-- Material Symbols -->
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
rel="stylesheet" />
<!-- Tailwind CSS with Plugins -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Tailwind Config -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#b722bf",
"secondary": "#166534", /* green-800 as requested for success states */
"background-light": "#fbf8fc", /* Tinted white */
"background-dark": "#1f1220",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"sans": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.375rem", /* rounded-md */
"md": "0.375rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: "Spline Sans", sans-serif;
}
/* Custom scrollbar for modern feel */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #e5e7eb;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #d1d5db;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark min-h-screen text-[#171217] dark:text-white">
<div class="flex flex-col min-h-screen">
<!-- Header Section -->
<header
class="sticky top-0 z-50 bg-white/80 dark:bg-[#1f1220]/80 backdrop-blur-md border-b border-gray-100 dark:border-white/10 px-6 py-3">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<!-- Left: Drawer Toggle + Branding -->
<div class="flex items-center gap-6">
<button
class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-white/10 text-gray-600 dark:text-gray-300 transition-colors">
<span class="material-symbols-outlined">menu</span>
</button>
<div class="flex items-center gap-3">
<div class="size-8 bg-primary/10 rounded-md flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-[20px]">movie_edit</span>
</div>
<div class="flex items-baseline gap-2">
<h1 class="text-lg font-bold tracking-tight">VideoMaker AI</h1>
<span class="text-gray-400 dark:text-gray-600 text-sm">/</span>
<span class="text-gray-500 dark:text-gray-400 font-medium">Projects</span>
</div>
</div>
</div>
<!-- Right: Profile -->
<div class="flex items-center gap-4">
<button
class="flex items-center gap-3 pl-1 pr-2 py-1 rounded-full hover:bg-gray-50 dark:hover:bg-white/5 transition-colors border border-transparent hover:border-gray-100 dark:hover:border-white/10">
<div class="size-8 rounded-full bg-cover bg-center border border-gray-200 dark:border-white/10"
data-alt="User avatar image showing a smiling person"
style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCG63w6W0fAjE2QetrYIuBmnDjHDN8v-c1NGJrPcIzwpHhsQrmqC2zVPxyB7ek0j5CoROV0FK95b5LVA3i5MluzVtcel10s3nAl4Jv180_5QYBnbD4yb_suwfVTTkZFNMYn01dJO6sIwR1FEmfbMfebnk5K6LXumbKoo6SxL-tug38Nq59rd5voqQhGGt2eI6We-_51l7njgws_Z-sJYEdmaq_B7e8_GmUWYHfpXBjbSftbQDo_cg5oLPiAfEtot_LJe7XABHsWMFP_');">
</div>
<span class="text-sm font-medium hidden sm:block">Alex Editor</span>
<span class="material-symbols-outlined text-gray-400 text-[20px]">expand_more</span>
</button>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-1 w-full max-w-7xl mx-auto px-6 py-8">
<!-- Toolbar: Breadcrumbs & Action Button -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
<div>
<h2 class="text-3xl font-bold tracking-tight mb-1">My Projects</h2>
<p class="text-gray-500 dark:text-gray-400 text-sm">Manage and edit your latest video creations.</p>
</div>
<button
class="flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-white px-5 py-2.5 rounded-md shadow-md shadow-primary/20 transition-all active:scale-95 font-medium">
<span class="material-symbols-outlined text-[20px]">add</span>
<span>New Project</span>
</button>
</div>
<!-- Filters / Search (Optional but good for dashboards) -->
<div class="flex items-center gap-4 mb-6 overflow-x-auto pb-2">
<div class="relative group">
<span
class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-primary transition-colors text-[20px]">search</span>
<input
class="pl-10 pr-4 py-2 bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 w-64 transition-all"
placeholder="Search projects..." type="text" />
</div>
<div class="h-6 w-px bg-gray-200 dark:bg-white/10"></div>
<button
class="px-3 py-1.5 text-sm font-medium text-primary bg-primary/10 rounded-md border border-primary/20">All</button>
<button
class="px-3 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 rounded-md transition-colors">Processing</button>
<button
class="px-3 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 rounded-md transition-colors">Completed</button>
</div>
<!-- Projects Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Card 1: Completed -->
<article
class="group relative flex flex-col bg-white dark:bg-[#2a1d2b] rounded-md shadow-sm border border-gray-100 dark:border-white/5 hover:shadow-md hover:-translate-y-1 transition-all duration-300">
<!-- Image Container -->
<div class="relative w-full aspect-video rounded-t-md overflow-hidden bg-gray-100">
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105"
data-alt="Microphone in a recording studio setup"
style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCrsNsYlZ4iyOqSvJFpinZX7WhTDlLimzJdfFd1erK6v1QOZHlroofe0kTN9yquQ2CwZRmIbHUQ3gecVBYL9Schtg6EQ_R5f5d_SsRerP02RzBT8vEGXu-BMA3LDmb1stZyvh9pKuBr_f3znfV_AQUgRHP70NxF82b0nlBqcdXUekCFhhGyzDi8a51Y15vJ4ApL2Rk0ld65N31qsyLgyP2P-Soe4rigskM6XGNXGQmU7pL0VCwIzCz5NaXB3o2Fjn6Rn5Rghjw3kqlu');">
</div>
<!-- Overlay -->
<div
class="absolute inset-0 bg-black/40 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 backdrop-blur-[2px]">
<button
class="bg-white/20 hover:bg-white/30 text-white rounded-full p-3 backdrop-blur-md transition-colors">
<span class="material-symbols-outlined text-[32px]">play_arrow</span>
</button>
</div>
<!-- Completed Badge (Success Green) -->
<div class="absolute top-3 right-3">
<span
class="inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-bold bg-secondary text-white shadow-sm">
<span class="material-symbols-outlined text-[14px]">check_circle</span>
Done
</span>
</div>
<!-- Progress Ring (Hidden when done or show full circle) -->
<div class="absolute bottom-3 right-3 size-10">
<svg class="transform -rotate-90 size-full" viewbox="0 0 36 36">
<path class="text-white/30"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none"
stroke="currentColor" stroke-width="3"></path>
<path class="text-secondary drop-shadow-md"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none"
stroke="currentColor" stroke-dasharray="100, 100" stroke-width="3"></path>
</svg>
<div
class="absolute inset-0 flex items-center justify-center text-[10px] font-bold text-white drop-shadow-md">
100%</div>
</div>
</div>
<!-- Content -->
<div class="flex flex-col p-4 gap-2">
<div class="flex justify-between items-start">
<h3
class="font-bold text-lg leading-tight text-gray-900 dark:text-white group-hover:text-primary transition-colors cursor-pointer truncate pr-4">
Podcast Episode #42</h3>
<button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
<span>2 hours ago</span>
<span class="text-secondary font-medium">Completed</span>
</div>
</div>
</article>
<!-- Card 2: Rendering (Primary Purple) -->
<article
class="group relative flex flex-col bg-white dark:bg-[#2a1d2b] rounded-md shadow-sm border border-gray-100 dark:border-white/5 hover:shadow-md hover:-translate-y-1 transition-all duration-300">
<div class="relative w-full aspect-video rounded-t-md overflow-hidden bg-gray-100">
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105"
data-alt="Modern tech gadgets on a desk workspace"
style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA6mk-AZUlwKY3w-zyUKaNTnRbC_fS4uMN3NfT_p-sv3jhm7YXtkMla96gr6MhO0OIVjZhWG3NRQx79sjJUL8NEJ0hTcgKPz_W5hoHNkUqA9y3Z2atVRmGybfchL_2SC77bwdCkQ4CykhTRDN95rmNpiJAxOanEE5f0BeYmo9UfQNCEGbgctJ82FyW1C0oRTrEZMgR9WlNthfjHzYDCT5aQefG4TBNMPEiac1xs2iwuS4Hj5kAeQ-_BkekkV6gfOPrObkPrkVEJ32Uk');">
</div>
<!-- Active Overlay for processing -->
<div class="absolute inset-0 bg-black/60 flex flex-col items-center justify-center backdrop-blur-sm">
<div class="relative size-16">
<svg class="transform -rotate-90 size-full" viewbox="0 0 36 36">
<path class="text-white/20"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none"
stroke="currentColor" stroke-width="3"></path>
<path
class="text-primary drop-shadow-[0_0_10px_rgba(183,34,191,0.5)] animate-[dash_1.5s_ease-in-out_infinite]"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none"
stroke="currentColor" stroke-dasharray="45, 100" stroke-width="3"></path>
</svg>
<div class="absolute inset-0 flex items-center justify-center text-sm font-bold text-white">45%</div>
</div>
<span class="mt-2 text-xs font-bold text-white uppercase tracking-wider animate-pulse">Rendering...</span>
</div>
</div>
<div class="flex flex-col p-4 gap-2">
<div class="flex justify-between items-start">
<h3
class="font-bold text-lg leading-tight text-gray-900 dark:text-white group-hover:text-primary transition-colors cursor-pointer truncate pr-4">
Tech Review V1</h3>
<button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
<span>5 mins ago</span>
<span class="text-primary font-medium">Processing</span>
</div>
</div>
</article>
<!-- Card 3: Uploading (Primary Purple) -->
<article
class="group relative flex flex-col bg-white dark:bg-[#2a1d2b] rounded-md shadow-sm border border-gray-100 dark:border-white/5 hover:shadow-md hover:-translate-y-1 transition-all duration-300">
<div class="relative w-full aspect-video rounded-t-md overflow-hidden bg-gray-100">
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105"
data-alt="Scenic landscape of mountains and road for travel vlog"
style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCxvRno9_6XsO32q3YVwUZF_JUczE5sO5QGTXFI80K_wjlPmm3X7QgenZ7LgeNfYwCm3DwVJmputd8PQOBR3uZIGdXAddULI4EVl35amZj1Ro3Q-e73hhfzCD7zFGvRGiCkMhk2FWhL785uBJzwuEWEzuVb_FSJhbuvJm1fEjcYJfnVuE8eE04I7SfwOBnqGh9BMDzGhHGsQ9R6pMW69pj2CwH3QQq5yGlktTLE7XrwE96Dfl6L3u-vX-UBhgS0IdzK-lOZSvlG61N2');">
</div>
<!-- Active Overlay for processing -->
<div class="absolute inset-0 bg-black/60 flex flex-col items-center justify-center backdrop-blur-sm">
<div class="relative size-16">
<svg class="transform -rotate-90 size-full" viewbox="0 0 36 36">
<path class="text-white/20"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none"
stroke="currentColor" stroke-width="3"></path>
<path class="text-primary drop-shadow-[0_0_10px_rgba(183,34,191,0.5)]"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none"
stroke="currentColor" stroke-dasharray="12, 100" stroke-width="3"></path>
</svg>
<div class="absolute inset-0 flex items-center justify-center text-sm font-bold text-white">12%</div>
</div>
<span class="mt-2 text-xs font-bold text-white uppercase tracking-wider">Uploading...</span>
</div>
</div>
<div class="flex flex-col p-4 gap-2">
<div class="flex justify-between items-start">
<h3
class="font-bold text-lg leading-tight text-gray-900 dark:text-white group-hover:text-primary transition-colors cursor-pointer truncate pr-4">
Travel Vlog Intro</h3>
<button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
<span>1 day ago</span>
<span class="text-primary font-medium">Uploading</span>
</div>
</div>
</article>
<!-- Card 4: Draft (Gray) -->
<article
class="group relative flex flex-col bg-white dark:bg-[#2a1d2b] rounded-md shadow-sm border border-gray-100 dark:border-white/5 hover:shadow-md hover:-translate-y-1 transition-all duration-300">
<div class="relative w-full aspect-video rounded-t-md overflow-hidden bg-gray-100">
<div
class="absolute inset-0 bg-cover bg-center grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-105"
data-alt="Modern office meeting room with glass walls"
style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCoijVEiEQ7I9dlbVSBMULIfmEPcWeRpzU-lbsnMwrOIfcEeLVja7-phtCDKxMzOWjS6M_ZfHrf5G4ELuq1Zx8MwIixQCnEdg5Bw2gT1g1Y5sLmUII0DHRrQj5bTfTbBx6Qpvn-_Dq0YvX9pzoMOOStawNO4pfFlELOYXjTipq5_IF2_7MMPXSpqgQElkA9UNBcv9dxuu5YE5I73Rg6eJ4Jyanbcc22EqFtvfOTO4fXnJupZ5rmjSK30hXm5r5a7IVRAvExsbGqRybE');">
</div>
<div class="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors duration-300">
<!-- Play button appears on hover -->
<div
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="bg-white/90 hover:bg-white text-primary rounded-full p-3 shadow-lg transition-colors">
<span class="material-symbols-outlined text-[32px]">edit</span>
</button>
</div>
</div>
<!-- Draft Badge -->
<div class="absolute top-3 left-3">
<span
class="inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-bold bg-gray-800/80 backdrop-blur-sm text-white shadow-sm border border-white/10">
Draft
</span>
</div>
</div>
<div class="flex flex-col p-4 gap-2">
<div class="flex justify-between items-start">
<h3
class="font-bold text-lg leading-tight text-gray-900 dark:text-white group-hover:text-primary transition-colors cursor-pointer truncate pr-4">
Q3 Marketing Clip</h3>
<button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
<span>1 week ago</span>
<span class="text-gray-500 font-medium">Draft</span>
</div>
</div>
</article>
<!-- Card 5: New Project Placeholder -->
<article
class="group relative flex flex-col items-center justify-center bg-gray-50 dark:bg-white/5 border-2 border-dashed border-gray-300 dark:border-white/10 rounded-md min-h-[280px] hover:border-primary hover:bg-primary/5 transition-all cursor-pointer">
<div class="flex flex-col items-center gap-3 text-gray-400 group-hover:text-primary transition-colors">
<div
class="size-12 rounded-full bg-white dark:bg-white/10 shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-[24px]">add</span>
</div>
<span class="font-bold text-lg">Create New</span>
</div>
</article>
</div>
</main>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink