canvas": { "title": "Data Insurance App - Prototype", "content": "<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>SafeLock - Complete Prototype</title>\n <script src="https://cdn.tailwindcss.com"></script>\n</head>\n<body class="bg-slate-50 text-slate-800 font-sans">\n\n <!-- =================================================== -->\n <!-- SCREEN 1: LANDING PAGE -->\n <!-- =================================================== -->\n <div id="landingScreen" class="block">\n <!-- Navbar -->\n <nav class="bg-white shadow-sm py-4 px-6 flex justify-between items-center">\n <div class="text-xl font-bold text-indigo-600">SafeLock 🛡️</div>\n <button onclick="openAuthModal()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-700 transition">Login / Sign Up</button>\n </nav>\n\n <!-- Hero Section -->\n <header class="max-w-4xl mx-auto text-center py-16 px-4">\n <h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">\n Forgot your phone pattern? \n <span class="text-indigo-600">Don't flash it. Save your data first.</span>\n </h1>\n <p class="mt-6 text-lg text-slate-600 max-w-2xl mx-auto">\n SafeLock protects your photos, contacts, and messages before you get locked out. If you ever forget your PIN or pattern, log in here from any computer to safely download your files.\n </p>\n <div class="mt-8 flex justify-center gap-4">\n <button onclick="openAuthModal()" class="bg-indigo-600 text-white px-6 py-3 rounded-xl font-semibold shadow-md hover:bg-indigo-700 transition">Start Free Trial</button>\n </div>\n </header>\n\n <!-- How it Works -->\n <section class="bg-white py-16 border-t border-b border-slate-100">\n <div class="max-w-5xl mx-auto px-4">\n <h2 class="text-2xl font-bold text-center text-slate-900 mb-12">Simple 3-Step Protection</h2>\n <div class="grid md:grid-cols-3 gap-8">\n <div class="p-6 bg-slate-50 rounded-xl">\n <div class="text-2xl mb-3">📲</div>\n <h3 class="font-bold text-lg mb-2">1. Link Your Phone</h3>\n <p class="text-sm text-slate-600">Install the background utility on your phone. It sets up a secure, encrypted link to your web dashboard.</p>\n </div>\n <div class="p-6 bg-slate-50 rounded-xl">\n <div class="text-2xl mb-3">☁️</div>\n <h3 class="font-bold text-lg mb-2">2. Silent Daily Backup</h3>\n <p class="text-sm text-slate-600">The app securely syncs your photos and contacts daily over Wi-Fi.</p>\n </div>\n <div class="p-6 bg-slate-50 rounded-xl">\n <div class="text-2xl mb-3">🔑</div>\n <h3 class="font-bold text-lg mb-2">3. Emergency Rescue</h3>\n <p class="text-sm text-slate-600">Locked out? Log in to this website from any computer to instantly download your files before flashing.</p>\n </div>\n </div>\n </div>\n </section>\n </div>\n\n <!-- =================================================== -->\n <!-- SCREEN 2: DASHBOARD PAGE (HIDDEN BY DEFAULT) -->\n <!-- =================================================== -->\n <div id="dashboardScreen" class="hidden">\n <!-- Dashboard Header -->\n <nav class="bg-white shadow-sm py-4 px-6 flex justify-between items-center border-b border-slate-200">\n <div class="flex items-center gap-2">\n <span class="text-xl font-bold text-indigo-600">SafeLock🛡️</span>\n <span class="bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded-full font-medium">Active Protection</span>\n </div>\n <div class="flex items-center gap-4">\n <span class="text-sm text-slate-600 hidden sm:inline">Device: Samsung Galaxy A17</span>\n <button onclick="logout()" class="text-sm font-medium text-slate-500 hover:text-red-600 transition">Sign Out</button>\n </div>\n </nav>\n\n <!-- Main Content -->\n <main class="max-w-6xl mx-auto p-4 md:p-8 grid md:grid-cols-3 gap-6">\n <div class="md:col-span-1 space-y-6">\n <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">\n <h3 class="text-sm font-semibold text-slate-500 uppercase tracking-wider">Cloud Storage</h3>\n <p class="text-3xl font-bold text-slate-900 mt-2">12.4 GB <span class="text-sm font-normal text-slate-400">/ 50 GB</span></p>\n <div class="w-full bg-slate-100 h-2 rounded-full mt-4 overflow-hidden">\n <div class="bg-indigo-600 h-full w-1/4"></div>\n </div>\n </div>\n </div>\n\n <div class="md:col-span-2 space-y-6">\n <div class="bg-amber-50 border border-amber-200 p-6 rounded-2xl">\n <h4 class="font-bold text-amber-900">⚠️ Need Emergency Recovery?</h4>\n <p class="text-sm text-amber-700 mt-1">Click the buttons below to extract your backed-up files immediately.</p>\n </div>\n\n <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">\n <h3 class="text-lg font-bold text-slate-900 mb-4">Your Secured Vault</h3>\n <div class="grid sm:grid-cols-2 gap-4">\n <div class="border p-4 rounded-xl bg-slate-50 flex justify-between items-center">\n <div>\n <p class="font-semibold text-sm">📷 Photos & Videos</p>\n <p class="text-xs text-slate-500">2,450 Items</p>\n </div>\n <button onclick="alert('Downloading photos package...')" class="text-xs font-semibold text-indigo-600">Download</button>\n </div>\n <div class="border p-4 rounded-xl bg-slate-50 flex justify-between items-center">\n <div>\n <p class="font-semibold text-sm">📇 Contacts List</p>\n <p class="text-xs text-slate-500">612 Contacts</p>\n </div>\n <button onclick="alert('Exporting contacts to phonebook CSV file...')" class="text-xs font-semibold text-indigo-600">Export</button>\n </div>\n </div>\n </div>\n </div>\n </main>\n </div>\n\n <!-- =================================================== -->\n <!-- INTERACTIVE COMPONENT: SIGN IN MODAL / POPUP -->\n <!-- =================================================== -->\n <div id="authModal" class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm hidden items-center justify-center p-4 z-50">\n <div class="bg-white rounded-2xl max-w-md w-full p-6 shadow-xl relative">\n <button onclick="closeAuthModal()" class="absolute top-4 right-4 text-slate-400 hover:text-slate-600">×</button>\n <h3 class="text-xl font-bold text-slate-900 mb-2">Access Your Vault</h3>\n <p class="text-sm text-slate-500 mb-6">Sign in to view your phone's cloud insurance status.</p>\n \n <form onsubmit="handleLogin(event)" class="space-y-4">\n <div>\n <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Email Address</label>\n <input type="email" required class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-600" placeholder="you@example.com">\n </div>\n <div>\n <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Password</label>\n <input type="password" required class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-600" placeholder="••••••••">\n </div>\n <button type="submit" class="w-full bg-indigo-600 text-white py-2.5 rounded-lg font-semibold hover:bg-indigo-700 transition mt-2">Login to Dashboard</button>\n </form>\n </div>\n </div>\n\n <!-- =================================================== -->\n <!-- JAVASCRIPT APP LOGIC -->\n <!-- =================================================== -->\n <script>\n function openAuthModal() {\n document.getElementById('authModal').style.display = 'flex';\n }\n\n function closeAuthModal() {\n document.getElementById('authModal').style.display = 'none';\n }\n\n function handleLogin(event) {\n event.preventDefault(); // Prevents page reload\n closeAuthModal();\n \n // Navigate screens smoothly\n document.getElementById('landingScreen').style.display = 'none';\n document.getElementById('dashboardScreen').style.display = 'block';\n }\n\n function logout() {\n document.getElementById('dashboardScreen').style.display = 'none';\n document.getElementById('landingScreen').style.display = 'block';\n }\n </script>\n\n</body>\n</html>", "type": "code" } }