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
@@ -0,0 +1,243 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Context Menu Designs</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
|
||||
:root {
|
||||
--brand-blue: #00A3FF;
|
||||
}
|
||||
|
||||
/* Utility to hide/show */
|
||||
.context-menu { display: none; }
|
||||
.context-menu.open { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#ffffff] text-slate-900 min-h-screen p-12">
|
||||
|
||||
<div class="max-w-6xl mx-auto space-y-4 mb-12 text-center">
|
||||
<h1 class="text-2xl font-bold">Context Menu Explorations</h1>
|
||||
<p class="text-slate-500">Right-click simulations (right-click buttons to toggle).</p>
|
||||
|
||||
<div class="flex items-center justify-center gap-4 mt-8">
|
||||
<button oncontextmenu="event.preventDefault(); toggle(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">
|
||||
Option 1: Standard
|
||||
</button>
|
||||
<button oncontextmenu="event.preventDefault(); toggle(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">
|
||||
Option 2: Rich with Shortcuts
|
||||
</button>
|
||||
<button oncontextmenu="event.preventDefault(); toggle(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 transition-colors">
|
||||
Option 3: Dense & Technical
|
||||
</button>
|
||||
<button oncontextmenu="event.preventDefault(); toggle(4)" 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">
|
||||
Option 4: Dense & Technical (Icons)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-start max-w-7xl mx-auto relative h-[500px]">
|
||||
|
||||
<!-- Option 1: Standard -->
|
||||
<!-- Characteristics: Simple, clean, standard spacing -->
|
||||
<div id="menu-1" class="context-menu absolute top-0 left-[15%] -translate-x-1/2 w-64 bg-white rounded-[20px] shadow-xl border border-slate-200 overflow-hidden py-2 z-10">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<a href="#" class="block px-4 py-2 mx-2 text-sm text-slate-600 rounded-xl hover:bg-blue-50 hover:text-[#00A3FF] flex items-center gap-3 group">
|
||||
<i data-lucide="folder-open" class="w-4 h-4 text-slate-400 group-hover:text-[#00A3FF]"></i>
|
||||
<span>Open</span>
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 mx-2 text-sm text-slate-600 rounded-xl hover:bg-blue-50 hover:text-[#00A3FF] flex items-center gap-3 group">
|
||||
<i data-lucide="edit-2" class="w-4 h-4 text-slate-400 group-hover:text-[#00A3FF]"></i>
|
||||
<span>Rename</span>
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 mx-2 text-sm text-slate-600 rounded-xl hover:bg-blue-50 hover:text-[#00A3FF] flex items-center gap-3 group">
|
||||
<i data-lucide="copy" class="w-4 h-4 text-slate-400 group-hover:text-[#00A3FF]"></i>
|
||||
<span>Duplicate</span>
|
||||
</a>
|
||||
|
||||
<div class="h-px bg-slate-100 my-1 mx-2"></div>
|
||||
|
||||
<a href="#" class="block px-4 py-2 mx-2 text-sm text-slate-600 rounded-xl hover:bg-blue-50 hover:text-[#00A3FF] flex items-center gap-3 group">
|
||||
<i data-lucide="share" class="w-4 h-4 text-slate-400 group-hover:text-[#00A3FF]"></i>
|
||||
<span>Share...</span>
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 mx-2 text-sm text-slate-600 rounded-xl hover:bg-blue-50 hover:text-[#00A3FF] flex items-center gap-3 group">
|
||||
<i data-lucide="download" class="w-4 h-4 text-slate-400 group-hover:text-[#00A3FF]"></i>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
|
||||
<div class="h-px bg-slate-100 my-1 mx-2"></div>
|
||||
|
||||
<a href="#" class="block px-4 py-2 mx-2 text-sm text-red-500 rounded-xl hover:bg-red-50 flex items-center gap-3 group">
|
||||
<i data-lucide="trash-2" class="w-4 h-4 group-hover:text-red-600"></i>
|
||||
<span>Delete</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Option 2: Rich with Shortcuts -->
|
||||
<!-- Characteristics: Wider, right-aligned shortcuts, grouping -->
|
||||
<div id="menu-2" class="context-menu absolute top-0 left-[38%] -translate-x-1/2 w-72 bg-white rounded-[20px] shadow-xl border border-slate-200 overflow-hidden py-2 z-10">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<div class="px-4 py-1.5 text-[11px] font-bold uppercase tracking-wider text-slate-400 select-none">
|
||||
Actions
|
||||
</div>
|
||||
|
||||
<a href="#" class="block px-4 py-2 mx-2 text-sm text-slate-700 rounded-xl hover:bg-blue-50 hover:text-[#00A3FF] flex items-center justify-between group">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="scissors" class="w-4 h-4 text-slate-400 group-hover:text-[#00A3FF]"></i>
|
||||
<span>Cut</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400 group-hover:text-blue-300">⌘X</span>
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 mx-2 text-sm text-slate-700 rounded-xl hover:bg-blue-50 hover:text-[#00A3FF] flex items-center justify-between group">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="copy" class="w-4 h-4 text-slate-400 group-hover:text-[#00A3FF]"></i>
|
||||
<span>Copy</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400 group-hover:text-blue-300">⌘C</span>
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 mx-2 text-sm text-slate-700 rounded-xl hover:bg-blue-50 hover:text-[#00A3FF] flex items-center justify-between group">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="clipboard" class="w-4 h-4 text-slate-400 group-hover:text-[#00A3FF]"></i>
|
||||
<span>Paste</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400 group-hover:text-blue-300">⌘V</span>
|
||||
</a>
|
||||
|
||||
<div class="h-px bg-slate-100 my-1 mx-2"></div>
|
||||
|
||||
<a href="#" class="block px-4 py-2 mx-2 text-sm text-slate-700 rounded-xl hover:bg-blue-50 hover:text-[#00A3FF] flex items-center justify-between group">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="maximize" class="w-4 h-4 text-slate-400 group-hover:text-[#00A3FF]"></i>
|
||||
<span>Properties</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400 group-hover:text-blue-300">⌘I</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Option 3: Dense & Technical -->
|
||||
<!-- Characteristics: Smaller text, smaller padding, minimal radius, efficient -->
|
||||
<div id="menu-3" class="context-menu absolute top-0 left-[62%] -translate-x-1/2 w-60 bg-white rounded-xl shadow-xl border border-slate-200 overflow-hidden py-2.5 z-10">
|
||||
<div class="flex flex-col">
|
||||
<a href="#" class="block px-4 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 flex items-center justify-between group">
|
||||
<span>New Folder</span>
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 flex items-center justify-between group">
|
||||
<span>New File</span>
|
||||
</a>
|
||||
|
||||
<div class="h-px bg-slate-100 my-2"></div>
|
||||
|
||||
<div class="relative group/submenu">
|
||||
<a href="#" class="block px-4 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 flex items-center justify-between">
|
||||
<span>Sort By</span>
|
||||
<i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="relative group/submenu">
|
||||
<a href="#" class="block px-4 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 flex items-center justify-between">
|
||||
<span>View As</span>
|
||||
<i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="h-px bg-slate-100 my-2"></div>
|
||||
|
||||
<a href="#" class="block px-4 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 flex items-center justify-between group">
|
||||
<span>Refresh</span>
|
||||
<span class="text-xs text-slate-400">R</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option 4: Dense & Technical (Icons) -->
|
||||
<div id="menu-4" class="context-menu absolute top-0 left-[85%] -translate-x-1/2 w-60 bg-white rounded-xl shadow-xl border border-slate-200 overflow-hidden py-2.5 z-10">
|
||||
<div class="flex flex-col">
|
||||
<a href="#" class="block px-4 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 flex items-center justify-between group">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<i data-lucide="folder-plus" class="w-4 h-4 text-slate-400 group-hover:text-slate-600"></i>
|
||||
<span>New Folder</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 flex items-center justify-between group">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<i data-lucide="file-plus" class="w-4 h-4 text-slate-400 group-hover:text-slate-600"></i>
|
||||
<span>New File</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="h-px bg-slate-100 my-2"></div>
|
||||
|
||||
<div class="relative group/submenu">
|
||||
<a href="#" class="block px-4 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<i data-lucide="arrow-up-down" class="w-4 h-4 text-slate-400"></i>
|
||||
<span>Sort By</span>
|
||||
</div>
|
||||
<i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="relative group/submenu">
|
||||
<a href="#" class="block px-4 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<i data-lucide="layout-grid" class="w-4 h-4 text-slate-400"></i>
|
||||
<span>View As</span>
|
||||
</div>
|
||||
<i data-lucide="chevron-right" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="h-px bg-slate-100 my-2"></div>
|
||||
|
||||
<a href="#" class="block px-4 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 flex items-center justify-between group">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<i data-lucide="rotate-cw" class="w-4 h-4 text-slate-400 group-hover:text-slate-600"></i>
|
||||
<span>Refresh</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">R</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
function toggle(id) {
|
||||
// Close others
|
||||
[1, 2, 3, 4].forEach(num => {
|
||||
if (num !== id) {
|
||||
document.getElementById(`menu-${num}`).classList.remove('open');
|
||||
}
|
||||
});
|
||||
// Toggle current
|
||||
const menu = document.getElementById(`menu-${id}`);
|
||||
if (menu) {
|
||||
menu.classList.toggle('open');
|
||||
}
|
||||
}
|
||||
|
||||
// Close when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('button') && !e.target.closest('.context-menu')) {
|
||||
document.querySelectorAll('.context-menu').forEach(el => el.classList.remove('open'));
|
||||
}
|
||||
});
|
||||
|
||||
// Open option 2 by default
|
||||
toggle(2);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+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