Spaces:
Running
Running
Okay now add nitro as ssr and add an express backend with a simple login and authentication system that creates session id and stores session id as http only cookie and in the ssr middleware for all routes we do have a check for the http only cookie to check if is present or expired to redirect to home page or to login page
d502d70 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>React Vite TS Page 1</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4f46e5', // Indigo-600 | |
| secondary: '#ec4899', // Pink-500 | |
| dark: '#0f172a', // Slate-900 | |
| darker: '#020617', // Slate-950 | |
| surface: '#1e293b', // Slate-800 | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-darker text-slate-200 font-sans antialiased overflow-hidden h-screen flex flex-col"> | |
| <!-- Navbar Web Component --> | |
| <app-navbar></app-navbar> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar Web Component --> | |
| <app-sidebar></app-sidebar> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-4 md:p-8 relative"> | |
| <!-- Background decorative blobs --> | |
| <div class="absolute top-0 left-0 w-96 h-96 bg-primary/20 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2 pointer-events-none"></div> | |
| <div class="absolute bottom-0 right-0 w-96 h-96 bg-secondary/10 rounded-full blur-3xl translate-x-1/2 translate-y-1/2 pointer-events-none"></div> | |
| <div class="max-w-5xl mx-auto relative z-10 space-y-8"> | |
| <!-- Header Section --> | |
| <header class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white mb-2">Dashboard Overview</h1> | |
| <p class="text-slate-400">Welcome back to your Vite React TS project.</p> | |
| </div> | |
| <button class="flex items-center gap-2 bg-primary hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-all shadow-lg shadow-primary/20 active:scale-95"> | |
| <i data-feather="plus"></i> | |
| <span>New Project</span> | |
| </button> | |
| </header> | |
| <!-- Stats Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <stat-card title="Build Time" value="142ms" icon="zap" color="text-yellow-400" trend="+12% faster"></stat-card> | |
| <stat-card title="Bundle Size" value="42kb" icon="package" color="text-primary" trend="Optimized"></stat-card> | |
| <stat-card title="Type Coverage" value="100%" icon="check-circle" color="text-emerald-400" trend="Strict Mode"></stat-card> | |
| </div> | |
| <!-- Content Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Main Article/List --> | |
| <div class="lg:col-span-2 bg-surface border border-slate-700/50 rounded-xl p-6 shadow-xl"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-white">Recent Activity</h2> | |
| <a href="#" class="text-sm text-primary hover:text-white transition-colors">View All</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Item 1 --> | |
| <div class="flex items-center gap-4 p-4 bg-dark/50 rounded-lg border border-slate-700/50 hover:border-primary/50 transition-colors"> | |
| <div class="p-3 bg-surface rounded-full text-secondary"> | |
| <i data-feather="git-commit"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-white">Updated Dependencies</h3> | |
| <p class="text-sm text-slate-400">React 18.3.0 and Vite 5.0.0 installed</p> | |
| </div> | |
| <span class="text-xs text-slate-500">2m ago</span> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="flex items-center gap-4 p-4 bg-dark/50 rounded-lg border border-slate-700/50 hover:border-primary/50 transition-colors"> | |
| <div class="p-3 bg-surface rounded-full text-blue-400"> | |
| <i data-feather="file-text"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-white">Page 1 Created</h3> | |
| <p class="text-sm text-slate-400">Initial setup of the main dashboard page</p> | |
| </div> | |
| <span class="text-xs text-slate-500">1h ago</span> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="flex items-center gap-4 p-4 bg-dark/50 rounded-lg border border-slate-700/50 hover:border-primary/50 transition-colors"> | |
| <div class="p-3 bg-surface rounded-full text-purple-400"> | |
| <i data-feather="code"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-white">Configured Tailwind</h3> | |
| <p class="text-sm text-slate-400">Dark mode enabled by default</p> | |
| </div> | |
| <span class="text-xs text-slate-500">3h ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Side Widget --> | |
| <div class="bg-surface border border-slate-700/50 rounded-xl p-6 shadow-xl"> | |
| <h2 class="text-xl font-semibold text-white mb-4">System Status</h2> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-slate-400">Server Load</span> | |
| <span class="text-white">24%</span> | |
| </div> | |
| <div class="h-2 bg-dark rounded-full overflow-hidden"> | |
| <div class="h-full bg-primary w-1/4 rounded-full"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-slate-400">Memory Usage</span> | |
| <span class="text-white">512MB</span> | |
| </div> | |
| <div class="h-2 bg-dark rounded-full overflow-hidden"> | |
| <div class="h-full bg-secondary w-1/2 rounded-full"></div> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-slate-700"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <img src="http://static.photos/people/100x100/12" alt="User" class="w-10 h-10 rounded-full border-2 border-surface"> | |
| <div> | |
| <p class="text-sm font-medium text-white">Developer One</p> | |
| <p class="text-xs text-green-400">Online</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="flex-1 py-2 bg-dark hover:bg-darker text-xs rounded border border-slate-700 transition-colors">Profile</button> | |
| <button class="flex-1 py-2 bg-dark hover:bg-darker text-xs rounded border border-slate-700 transition-colors">Settings</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Web Components Scripts --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/stat-card.js"></script> | |
| <!-- Main JS --> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |