232 lines
11 KiB
HTML
232 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dialog 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 */
|
|
.dialog-overlay { display: none; }
|
|
.dialog-overlay.open { display: flex; }
|
|
|
|
/* Stop body scroll when open */
|
|
body.dialog-open { overflow: hidden; }
|
|
</style>
|
|
</head>
|
|
<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">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 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 transition-colors">
|
|
Layout 2: Clean Rows
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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: 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">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">
|
|
<!-- 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>
|
|
|
|
<!-- 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 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 transition-colors">
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 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>
|
|
<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="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>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
const overlay = document.getElementById('overlay');
|
|
const dialogs = [
|
|
document.getElementById('dialog-1'),
|
|
document.getElementById('dialog-2')
|
|
];
|
|
|
|
function openDialog(id) {
|
|
// Hide all first
|
|
dialogs.forEach(d => d.classList.add('hidden'));
|
|
|
|
// Show overlay
|
|
overlay.classList.add('open');
|
|
document.body.classList.add('dialog-open');
|
|
|
|
// Show specific dialog
|
|
const target = document.getElementById(`dialog-${id}`);
|
|
if (target) {
|
|
target.classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
function closeAll() {
|
|
overlay.classList.remove('open');
|
|
document.body.classList.remove('dialog-open');
|
|
dialogs.forEach(d => d.classList.add('hidden'));
|
|
}
|
|
|
|
// Close on backdrop click
|
|
overlay.addEventListener('click', (e) => {
|
|
if (e.target === overlay) {
|
|
closeAll();
|
|
}
|
|
});
|
|
|
|
// Escape key support
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') closeAll();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |