mirror of
https://github.com/OpenCut-app/OpenCut.git
synced 2026-07-13 21:52:53 +02:00
we're basically done
This commit is contained in:
Maze Winther
+119
-103
@@ -25,18 +25,15 @@
|
||||
<body class="bg-[#ffffff] text-slate-900 min-h-screen p-12">
|
||||
|
||||
<div class="max-w-4xl mx-auto space-y-4 mb-12 text-center">
|
||||
<h1 class="text-2xl font-bold">Dialog Design Explorations</h1>
|
||||
<p class="text-slate-500">Three interactions for the same brand language. Click buttons to open.</p>
|
||||
<h1 class="text-2xl font-bold">Project Info Explorations</h1>
|
||||
<p class="text-slate-500">Two layout approaches using the same "Structured" brand style.</p>
|
||||
|
||||
<div class="flex items-center justify-center gap-4 mt-8">
|
||||
<button onclick="openDialog(1)" class="px-5 py-2.5 bg-white border border-slate-200 rounded-xl font-medium text-slate-700 hover:border-[#00A3FF] hover:text-[#00A3FF] shadow-sm">
|
||||
Option 1: Soft & Friendly
|
||||
<button onclick="openDialog(1)" class="px-5 py-2.5 bg-white border border-slate-200 rounded-xl font-medium text-slate-700 hover:border-[#00A3FF] hover:text-[#00A3FF] shadow-sm transition-colors">
|
||||
Layout 1: Cards & Grid
|
||||
</button>
|
||||
<button onclick="openDialog(2)" class="px-5 py-2.5 bg-white border border-slate-200 rounded-xl font-medium text-slate-700 hover:border-[#00A3FF] hover:text-[#00A3FF] shadow-sm">
|
||||
Option 2: Structured
|
||||
</button>
|
||||
<button onclick="openDialog(3)" class="px-5 py-2.5 bg-white border border-slate-200 rounded-xl font-medium text-slate-700 hover:border-[#00A3FF] hover:text-[#00A3FF] shadow-sm">
|
||||
Option 3: Edge Accent
|
||||
<button onclick="openDialog(2)" class="px-5 py-2.5 bg-white border border-slate-200 rounded-xl font-medium text-slate-700 hover:border-[#00A3FF] hover:text-[#00A3FF] shadow-sm transition-colors">
|
||||
Layout 2: Clean Rows
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,125 +41,145 @@
|
||||
<!-- Overlay (Shared) -->
|
||||
<div id="overlay" class="dialog-overlay fixed inset-0 bg-slate-900/20 backdrop-blur-sm z-50 items-center justify-center p-4">
|
||||
|
||||
<!-- Option 1: Soft & Friendly -->
|
||||
<!-- Characteristics: Very rounded, generous padding, minimal dividers -->
|
||||
<div id="dialog-1" class="hidden w-full max-w-md bg-white rounded-[28px] shadow-xl p-8 relative">
|
||||
<button onclick="closeAll()" class="absolute top-6 right-6 p-2 text-slate-400 hover:text-slate-600 rounded-full hover:bg-slate-50">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
|
||||
<div class="mb-6">
|
||||
<div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center mb-4 text-[#00A3FF]">
|
||||
<i data-lucide="share-2" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-2">Share Project</h2>
|
||||
<p class="text-slate-500 text-[15px] leading-relaxed">
|
||||
Invite collaborators to <strong>Summer Vlog 2025</strong>. They will receive an email invitation to edit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Email address</label>
|
||||
<input type="email" placeholder="colleague@example.com" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-[#00A3FF] focus:bg-white focus:ring-4 focus:ring-blue-500/10 placeholder:text-slate-400">
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between p-3 border border-slate-100 rounded-xl">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-600 text-xs font-bold">JM</div>
|
||||
<span class="text-sm font-medium text-slate-700">John Miller</span>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-400 px-2 py-1 bg-slate-50 rounded-md">Owner</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button onclick="closeAll()" class="flex-1 px-5 py-3 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-xl">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="flex-1 px-5 py-3 text-sm font-bold text-white bg-[#00A3FF] hover:bg-[#008BE0] rounded-xl shadow-lg shadow-blue-500/20">
|
||||
Send Invite
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Option 2: Structured -->
|
||||
<!-- Characteristics: Clear header/footer separation, solid pill buttons, highly organized -->
|
||||
<div id="dialog-2" class="hidden w-full max-w-lg bg-white rounded-[20px] shadow-xl overflow-hidden flex flex-col">
|
||||
<!-- Option 1: Cards & Grid -->
|
||||
<!-- Focus: High visibility, dashboard feel, grouping info into boxes -->
|
||||
<div id="dialog-1" class="hidden w-full max-w-lg bg-white rounded-[20px] shadow-xl overflow-hidden flex flex-col">
|
||||
<!-- Header -->
|
||||
<div class="px-6 py-5 border-b border-slate-100 flex items-center justify-between bg-white">
|
||||
<h2 class="text-lg font-bold text-slate-900">Export Video</h2>
|
||||
<button onclick="closeAll()" class="text-slate-400 hover:text-slate-600">
|
||||
<h2 class="text-lg font-bold text-slate-900">Project Info</h2>
|
||||
<button onclick="closeAll()" class="text-slate-400 hover:text-slate-600 transition-colors">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-semibold text-slate-500">Resolution</label>
|
||||
<button class="w-full flex items-center justify-between px-3 py-2.5 bg-white border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-[#00A3FF]">
|
||||
<span>1080p HD</span>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-semibold text-slate-500">Format</label>
|
||||
<button class="w-full flex items-center justify-between px-3 py-2.5 bg-white border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-[#00A3FF]">
|
||||
<span>MP4 (H.264)</span>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400"></i>
|
||||
</button>
|
||||
<!-- Name Input -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Project Name</label>
|
||||
<div class="relative">
|
||||
<input type="text" value="Summer Vlog 2025" class="w-full bg-white border border-slate-200 rounded-xl px-4 py-2.5 text-sm font-medium text-slate-900 focus:outline-none focus:border-[#00A3FF] focus:ring-4 focus:ring-blue-500/10 shadow-sm transition-shadow">
|
||||
<div class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
|
||||
<i data-lucide="pencil" class="w-3.5 h-3.5"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bg-slate-50 rounded-xl border border-slate-100 flex items-start gap-3">
|
||||
<i data-lucide="info" class="w-5 h-5 text-[#00A3FF] mt-0.5 flex-shrink-0"></i>
|
||||
<div class="text-sm text-slate-600">
|
||||
<p class="font-medium text-slate-900 mb-1">Estimated file size: 245 MB</p>
|
||||
<p>Exporting may take a few minutes depending on your hardware.</p>
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="p-3 bg-slate-50 border border-slate-100 rounded-xl text-center">
|
||||
<p class="text-[10px] uppercase tracking-wide font-bold text-slate-400 mb-1">Duration</p>
|
||||
<p class="text-sm font-semibold text-slate-900">03:45</p>
|
||||
</div>
|
||||
<div class="p-3 bg-slate-50 border border-slate-100 rounded-xl text-center">
|
||||
<p class="text-[10px] uppercase tracking-wide font-bold text-slate-400 mb-1">Format</p>
|
||||
<p class="text-sm font-semibold text-slate-900">1080p</p>
|
||||
</div>
|
||||
<div class="p-3 bg-slate-50 border border-slate-100 rounded-xl text-center">
|
||||
<p class="text-[10px] uppercase tracking-wide font-bold text-slate-400 mb-1">FPS</p>
|
||||
<p class="text-sm font-semibold text-slate-900">60</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Storage Info Card -->
|
||||
<div class="p-4 bg-blue-50/50 rounded-xl border border-blue-100 flex gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-100 text-[#00A3FF] flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="hard-drive" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-center mb-1.5">
|
||||
<span class="text-xs font-bold text-slate-700">Storage</span>
|
||||
<span class="text-xs font-medium text-slate-500">1.2 GB</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-blue-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-[#00A3FF] w-[35%] rounded-full"></div>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-400 mt-2">Last modified Jan 22, 2026</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-6 py-4 bg-slate-50 border-t border-slate-100 flex items-center justify-end gap-3">
|
||||
<button onclick="closeAll()" class="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 bg-white border border-slate-200 rounded-lg hover:bg-slate-50">
|
||||
Cancel
|
||||
<button onclick="closeAll()" class="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors">
|
||||
Close
|
||||
</button>
|
||||
<button class="px-4 py-2 text-sm font-bold text-white bg-[#00A3FF] hover:bg-[#008BE0] rounded-lg shadow-md shadow-blue-500/10">
|
||||
Export Video
|
||||
<button class="px-4 py-2 text-sm font-bold text-white bg-[#00A3FF] hover:bg-[#008BE0] rounded-lg shadow-md shadow-blue-500/10 transition-colors">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Option 3: Edge Accent -->
|
||||
<!-- Characteristics: Minimalist, blue left border accent, very clean interactions -->
|
||||
<div id="dialog-3" class="hidden w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden relative">
|
||||
<!-- Accent Bar -->
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1.5 bg-[#00A3FF]"></div>
|
||||
|
||||
<div class="pl-8 pr-6 py-6">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h2 class="text-lg font-bold text-slate-900">Delete Project?</h2>
|
||||
<button onclick="closeAll()" class="text-slate-400 hover:text-slate-600 -mt-1 -mr-2 p-2">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
<!-- Option 2: Clean Rows -->
|
||||
<!-- Focus: Scannability, list view, technical details, minimal containers -->
|
||||
<div id="dialog-2" class="hidden w-full max-w-lg bg-white rounded-[20px] shadow-xl overflow-hidden flex flex-col">
|
||||
<!-- Header -->
|
||||
<div class="px-6 py-5 border-b border-slate-100 flex items-center justify-between bg-white">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-slate-100 to-slate-200 border border-slate-200"></div>
|
||||
<h2 class="text-lg font-bold text-slate-900">Project Details</h2>
|
||||
</div>
|
||||
|
||||
<p class="text-slate-500 text-sm mb-6">
|
||||
This will permanently delete <span class="text-slate-900 font-medium">"Summer Vlog 2025"</span> and all its associated media files. This action cannot be undone.
|
||||
</p>
|
||||
<button onclick="closeAll()" class="text-slate-400 hover:text-slate-600 transition-colors">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 pt-2">
|
||||
<button class="flex-1 px-4 py-2.5 text-sm font-bold text-white bg-red-500 hover:bg-red-600 rounded-lg shadow-sm">
|
||||
Yes, delete it
|
||||
</button>
|
||||
<button onclick="closeAll()" class="px-4 py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900 border border-slate-200 rounded-lg hover:bg-slate-50">
|
||||
<!-- Body -->
|
||||
<div class="px-6 py-2">
|
||||
<!-- Row 1: Name -->
|
||||
<div class="py-4 flex items-center justify-between border-b border-slate-50">
|
||||
<div class="flex items-center gap-3 text-slate-500">
|
||||
<i data-lucide="type" class="w-4 h-4"></i>
|
||||
<span class="text-sm font-medium">Name</span>
|
||||
</div>
|
||||
<input type="text" value="Summer Vlog 2025" class="text-right text-sm font-semibold text-slate-900 bg-transparent border-none focus:ring-0 w-48 p-0 placeholder-slate-300">
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Created -->
|
||||
<div class="py-4 flex items-center justify-between border-b border-slate-50">
|
||||
<div class="flex items-center gap-3 text-slate-500">
|
||||
<i data-lucide="calendar" class="w-4 h-4"></i>
|
||||
<span class="text-sm font-medium">Created</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-slate-900">Jan 22, 2026</span>
|
||||
</div>
|
||||
|
||||
<!-- Row 3: Technical -->
|
||||
<div class="py-4 flex items-center justify-between border-b border-slate-50">
|
||||
<div class="flex items-center gap-3 text-slate-500">
|
||||
<i data-lucide="monitor" class="w-4 h-4"></i>
|
||||
<span class="text-sm font-medium">Resolution</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2 py-1 bg-slate-100 rounded-md text-xs font-bold text-slate-600">1080p</span>
|
||||
<span class="px-2 py-1 bg-slate-100 rounded-md text-xs font-bold text-slate-600">60fps</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 4: Size -->
|
||||
<div class="py-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-slate-500">
|
||||
<i data-lucide="hard-drive" class="w-4 h-4"></i>
|
||||
<span class="text-sm font-medium">Size</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-slate-900">1.2 GB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-6 py-4 bg-slate-50 border-t border-slate-100 flex items-center justify-between">
|
||||
<button class="text-xs font-medium text-red-500 hover:text-red-600 transition-colors flex items-center gap-1.5">
|
||||
<i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
|
||||
Delete Project
|
||||
</button>
|
||||
<div class="flex gap-3">
|
||||
<button onclick="closeAll()" class="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="px-4 py-2 text-sm font-bold text-white bg-[#00A3FF] hover:bg-[#008BE0] rounded-lg shadow-md shadow-blue-500/10 transition-colors">
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -175,8 +192,7 @@
|
||||
const overlay = document.getElementById('overlay');
|
||||
const dialogs = [
|
||||
document.getElementById('dialog-1'),
|
||||
document.getElementById('dialog-2'),
|
||||
document.getElementById('dialog-3')
|
||||
document.getElementById('dialog-2')
|
||||
];
|
||||
|
||||
function openDialog(id) {
|
||||
|
||||
Reference in New Issue
Block a user