- Re-architect VoiceSession into full-bleed studio cockpit with overlay slide-over companion drawer - Eliminate width squishing defect on LiveInsightPanel and add native dark/light theme support - Integrate authentic Google Gemini 3.8 Flash TTS with Fenrir persona and fallback audio pipeline - Implement comprehensive Playwright E2E visual regression suite across Desktop, iPad, and iPhone (21 tests, 45 snapshots) - Migrate core application to Svelte 5 runes (, , ) with reactive stores - Maintain .NET 8 Azure Functions serverless endpoints and clean build hygiene
710 lines
52 KiB
HTML
710 lines
52 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cognitive Clarity — Playwright Visual Snapshot Gallery</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
|
|
.gallery-img { cursor: zoom-in; transition: transform 0.2s ease; }
|
|
.gallery-img:hover { transform: scale(1.01); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-950 text-slate-100 min-h-screen">
|
|
<header class="border-b border-slate-800 bg-slate-900/60 backdrop-blur-md sticky top-0 z-40 px-6 py-4">
|
|
<div class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
|
<div>
|
|
<h1 class="text-xl font-bold tracking-tight text-white flex items-center gap-2">
|
|
<span class="w-3 h-3 rounded-full bg-teal-400 animate-pulse"></span>
|
|
Cognitive Clarity — Visual Snapshot Gallery
|
|
</h1>
|
|
<p class="text-xs text-slate-400 mt-0.5">
|
|
45 snapshots across 3 viewports (desktop-chrome, ipad-portrait, mobile-iphone)
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2" id="filter-buttons">
|
|
<button onclick="filterViewport('all')" class="vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-teal-600 text-white" data-vp="all">All</button>
|
|
<button onclick="filterViewport('desktop-chrome')" class="vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-slate-800 text-slate-300 hover:bg-slate-700" data-vp="desktop-chrome">desktop-chrome</button><button onclick="filterViewport('ipad-portrait')" class="vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-slate-800 text-slate-300 hover:bg-slate-700" data-vp="ipad-portrait">ipad-portrait</button><button onclick="filterViewport('mobile-iphone')" class="vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-slate-800 text-slate-300 hover:bg-slate-700" data-vp="mobile-iphone">mobile-iphone</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-7xl mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="gallery-grid">
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">HOME INITIAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/01-home-initial.png" alt="HOME INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/01-home-initial.png', 'HOME INITIAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>01-home-initial.png</span>
|
|
<span>352 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">HOME INITIAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/01-home-initial.png" alt="HOME INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/01-home-initial.png', 'HOME INITIAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>01-home-initial.png</span>
|
|
<span>752 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">HOME INITIAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/01-home-initial.png" alt="HOME INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/01-home-initial.png', 'HOME INITIAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>01-home-initial.png</span>
|
|
<span>1722 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">FILTER BEGINNER</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/02-filter-beginner.png" alt="FILTER BEGINNER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/02-filter-beginner.png', 'FILTER BEGINNER')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>02-filter-beginner.png</span>
|
|
<span>125 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">FILTER BEGINNER</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/02-filter-beginner.png" alt="FILTER BEGINNER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/02-filter-beginner.png', 'FILTER BEGINNER')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>02-filter-beginner.png</span>
|
|
<span>279 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">FILTER BEGINNER</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/02-filter-beginner.png" alt="FILTER BEGINNER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/02-filter-beginner.png', 'FILTER BEGINNER')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>02-filter-beginner.png</span>
|
|
<span>575 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">FILTER ADVANCED</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/03-filter-advanced.png" alt="FILTER ADVANCED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/03-filter-advanced.png', 'FILTER ADVANCED')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>03-filter-advanced.png</span>
|
|
<span>189 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">FILTER ADVANCED</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/03-filter-advanced.png" alt="FILTER ADVANCED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/03-filter-advanced.png', 'FILTER ADVANCED')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>03-filter-advanced.png</span>
|
|
<span>403 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">FILTER ADVANCED</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/03-filter-advanced.png" alt="FILTER ADVANCED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/03-filter-advanced.png', 'FILTER ADVANCED')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>03-filter-advanced.png</span>
|
|
<span>908 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SETTINGS MODAL VOICE</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/04-settings-modal-voice.png" alt="SETTINGS MODAL VOICE" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/04-settings-modal-voice.png', 'SETTINGS MODAL VOICE')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>04-settings-modal-voice.png</span>
|
|
<span>391 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SETTINGS MODAL VOICE</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/04-settings-modal-voice.png" alt="SETTINGS MODAL VOICE" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/04-settings-modal-voice.png', 'SETTINGS MODAL VOICE')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>04-settings-modal-voice.png</span>
|
|
<span>895 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SETTINGS MODAL VOICE</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/04-settings-modal-voice.png" alt="SETTINGS MODAL VOICE" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/04-settings-modal-voice.png', 'SETTINGS MODAL VOICE')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>04-settings-modal-voice.png</span>
|
|
<span>1786 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SETTINGS MODAL OPENROUTER</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/05-settings-modal-openrouter.png" alt="SETTINGS MODAL OPENROUTER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/05-settings-modal-openrouter.png', 'SETTINGS MODAL OPENROUTER')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>05-settings-modal-openrouter.png</span>
|
|
<span>386 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SETTINGS MODAL OPENROUTER</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/05-settings-modal-openrouter.png" alt="SETTINGS MODAL OPENROUTER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/05-settings-modal-openrouter.png', 'SETTINGS MODAL OPENROUTER')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>05-settings-modal-openrouter.png</span>
|
|
<span>860 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SETTINGS MODAL OPENROUTER</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/05-settings-modal-openrouter.png" alt="SETTINGS MODAL OPENROUTER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/05-settings-modal-openrouter.png', 'SETTINGS MODAL OPENROUTER')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>05-settings-modal-openrouter.png</span>
|
|
<span>1759 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">CBT REFERENCE ALL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/06-cbt-reference-all.png" alt="CBT REFERENCE ALL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/06-cbt-reference-all.png', 'CBT REFERENCE ALL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>06-cbt-reference-all.png</span>
|
|
<span>430 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">CBT REFERENCE ALL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/06-cbt-reference-all.png" alt="CBT REFERENCE ALL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/06-cbt-reference-all.png', 'CBT REFERENCE ALL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>06-cbt-reference-all.png</span>
|
|
<span>1128 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">CBT REFERENCE ALL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/06-cbt-reference-all.png" alt="CBT REFERENCE ALL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/06-cbt-reference-all.png', 'CBT REFERENCE ALL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>06-cbt-reference-all.png</span>
|
|
<span>1756 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">CBT REFERENCE SEARCH</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/07-cbt-reference-search.png" alt="CBT REFERENCE SEARCH" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/07-cbt-reference-search.png', 'CBT REFERENCE SEARCH')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>07-cbt-reference-search.png</span>
|
|
<span>328 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">CBT REFERENCE SEARCH</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/07-cbt-reference-search.png" alt="CBT REFERENCE SEARCH" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/07-cbt-reference-search.png', 'CBT REFERENCE SEARCH')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>07-cbt-reference-search.png</span>
|
|
<span>662 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">CBT REFERENCE SEARCH</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/07-cbt-reference-search.png" alt="CBT REFERENCE SEARCH" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/07-cbt-reference-search.png', 'CBT REFERENCE SEARCH')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>07-cbt-reference-search.png</span>
|
|
<span>1760 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SCENARIO GENERATOR MODAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/08-scenario-generator-modal.png" alt="SCENARIO GENERATOR MODAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/08-scenario-generator-modal.png', 'SCENARIO GENERATOR MODAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>08-scenario-generator-modal.png</span>
|
|
<span>515 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SCENARIO GENERATOR MODAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/08-scenario-generator-modal.png" alt="SCENARIO GENERATOR MODAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/08-scenario-generator-modal.png', 'SCENARIO GENERATOR MODAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>08-scenario-generator-modal.png</span>
|
|
<span>1101 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SCENARIO GENERATOR MODAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/08-scenario-generator-modal.png" alt="SCENARIO GENERATOR MODAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/08-scenario-generator-modal.png', 'SCENARIO GENERATOR MODAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>08-scenario-generator-modal.png</span>
|
|
<span>1898 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SCENARIO GENERATOR FILLED</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/09-scenario-generator-filled.png" alt="SCENARIO GENERATOR FILLED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/09-scenario-generator-filled.png', 'SCENARIO GENERATOR FILLED')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>09-scenario-generator-filled.png</span>
|
|
<span>378 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SCENARIO GENERATOR FILLED</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/09-scenario-generator-filled.png" alt="SCENARIO GENERATOR FILLED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/09-scenario-generator-filled.png', 'SCENARIO GENERATOR FILLED')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>09-scenario-generator-filled.png</span>
|
|
<span>824 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SCENARIO GENERATOR FILLED</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/09-scenario-generator-filled.png" alt="SCENARIO GENERATOR FILLED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/09-scenario-generator-filled.png', 'SCENARIO GENERATOR FILLED')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>09-scenario-generator-filled.png</span>
|
|
<span>1785 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">CHAT SESSION INITIAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/10-chat-session-initial.png" alt="CHAT SESSION INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/10-chat-session-initial.png', 'CHAT SESSION INITIAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>10-chat-session-initial.png</span>
|
|
<span>49 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">CHAT SESSION INITIAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/10-chat-session-initial.png" alt="CHAT SESSION INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/10-chat-session-initial.png', 'CHAT SESSION INITIAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>10-chat-session-initial.png</span>
|
|
<span>109 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">CHAT SESSION INITIAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/10-chat-session-initial.png" alt="CHAT SESSION INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/10-chat-session-initial.png', 'CHAT SESSION INITIAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>10-chat-session-initial.png</span>
|
|
<span>157 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">CHAT INTERACTION STREAMED</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/11-chat-interaction-streamed.png" alt="CHAT INTERACTION STREAMED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/11-chat-interaction-streamed.png', 'CHAT INTERACTION STREAMED')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>11-chat-interaction-streamed.png</span>
|
|
<span>71 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">CHAT INTERACTION STREAMED</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/11-chat-interaction-streamed.png" alt="CHAT INTERACTION STREAMED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/11-chat-interaction-streamed.png', 'CHAT INTERACTION STREAMED')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>11-chat-interaction-streamed.png</span>
|
|
<span>160 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">CHAT INTERACTION STREAMED</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/11-chat-interaction-streamed.png" alt="CHAT INTERACTION STREAMED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/11-chat-interaction-streamed.png', 'CHAT INTERACTION STREAMED')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>11-chat-interaction-streamed.png</span>
|
|
<span>156 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SESSION REPORT SUMMARY</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/12-session-report-summary.png" alt="SESSION REPORT SUMMARY" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/12-session-report-summary.png', 'SESSION REPORT SUMMARY')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>12-session-report-summary.png</span>
|
|
<span>78 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SESSION REPORT SUMMARY</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/12-session-report-summary.png" alt="SESSION REPORT SUMMARY" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/12-session-report-summary.png', 'SESSION REPORT SUMMARY')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>12-session-report-summary.png</span>
|
|
<span>180 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">SESSION REPORT SUMMARY</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/12-session-report-summary.png" alt="SESSION REPORT SUMMARY" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/12-session-report-summary.png', 'SESSION REPORT SUMMARY')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>12-session-report-summary.png</span>
|
|
<span>252 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">VOICE COCKPIT INITIAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/13-voice-cockpit-initial.png" alt="VOICE COCKPIT INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/13-voice-cockpit-initial.png', 'VOICE COCKPIT INITIAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>13-voice-cockpit-initial.png</span>
|
|
<span>61 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">VOICE COCKPIT INITIAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/13-voice-cockpit-initial.png" alt="VOICE COCKPIT INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/13-voice-cockpit-initial.png', 'VOICE COCKPIT INITIAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>13-voice-cockpit-initial.png</span>
|
|
<span>138 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">VOICE COCKPIT INITIAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/13-voice-cockpit-initial.png" alt="VOICE COCKPIT INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/13-voice-cockpit-initial.png', 'VOICE COCKPIT INITIAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>13-voice-cockpit-initial.png</span>
|
|
<span>189 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">VOICE TRANSCRIPT DRAWER</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/14-voice-transcript-drawer.png" alt="VOICE TRANSCRIPT DRAWER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/14-voice-transcript-drawer.png', 'VOICE TRANSCRIPT DRAWER')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>14-voice-transcript-drawer.png</span>
|
|
<span>80 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">VOICE TRANSCRIPT DRAWER</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/14-voice-transcript-drawer.png" alt="VOICE TRANSCRIPT DRAWER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/14-voice-transcript-drawer.png', 'VOICE TRANSCRIPT DRAWER')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>14-voice-transcript-drawer.png</span>
|
|
<span>192 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">VOICE TRANSCRIPT DRAWER</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/14-voice-transcript-drawer.png" alt="VOICE TRANSCRIPT DRAWER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/14-voice-transcript-drawer.png', 'VOICE TRANSCRIPT DRAWER')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>14-voice-transcript-drawer.png</span>
|
|
<span>230 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">VOICE AUDIO SETTINGS MODAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="desktop-chrome/15-voice-audio-settings-modal.png" alt="VOICE AUDIO SETTINGS MODAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/15-voice-audio-settings-modal.png', 'VOICE AUDIO SETTINGS MODAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>15-voice-audio-settings-modal.png</span>
|
|
<span>49 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">VOICE AUDIO SETTINGS MODAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="ipad-portrait/15-voice-audio-settings-modal.png" alt="VOICE AUDIO SETTINGS MODAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/15-voice-audio-settings-modal.png', 'VOICE AUDIO SETTINGS MODAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>15-voice-audio-settings-modal.png</span>
|
|
<span>104 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
|
|
<div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
|
|
<span class="font-bold text-slate-200">VOICE AUDIO SETTINGS MODAL</span>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
|
|
</div>
|
|
<div class="bg-black/40 flex-grow flex items-center justify-center p-2">
|
|
<img src="mobile-iphone/15-voice-audio-settings-modal.png" alt="VOICE AUDIO SETTINGS MODAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/15-voice-audio-settings-modal.png', 'VOICE AUDIO SETTINGS MODAL')">
|
|
</div>
|
|
<div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
|
|
<span>15-voice-audio-settings-modal.png</span>
|
|
<span>185 KB</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Lightbox Modal -->
|
|
<div id="lightbox" class="fixed inset-0 z-50 bg-black/90 backdrop-blur-md hidden flex flex-col items-center justify-center p-4" onclick="closeLightbox()">
|
|
<div class="max-w-6xl max-h-[90vh] flex flex-col items-center" onclick="event.stopPropagation()">
|
|
<div class="flex justify-between items-center w-full mb-3 text-white">
|
|
<h3 id="lightbox-title" class="font-bold text-base"></h3>
|
|
<button onclick="closeLightbox()" class="text-slate-400 hover:text-white px-3 py-1 bg-white/10 rounded-lg text-sm">Close ✕</button>
|
|
</div>
|
|
<img id="lightbox-img" src="" class="max-h-[80vh] max-w-full rounded-xl shadow-2xl border border-white/10 object-contain">
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function filterViewport(vp) {
|
|
document.querySelectorAll('.vp-btn').forEach(btn => {
|
|
if (btn.dataset.vp === vp) {
|
|
btn.className = 'vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-teal-600 text-white';
|
|
} else {
|
|
btn.className = 'vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-slate-800 text-slate-300 hover:bg-slate-700';
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.gallery-card').forEach(card => {
|
|
if (vp === 'all' || card.dataset.viewport === vp) {
|
|
card.style.display = 'flex';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
function openLightbox(src, title) {
|
|
document.getElementById('lightbox-img').src = src;
|
|
document.getElementById('lightbox-title').innerText = title;
|
|
document.getElementById('lightbox').classList.remove('hidden');
|
|
}
|
|
|
|
function closeLightbox() {
|
|
document.getElementById('lightbox').classList.add('hidden');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |