sites.html
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sites - ReadySite Hosting</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="/static/styles/main.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@xyflow/react@12/dist/style.css" rel="stylesheet" type="text/css" />
<style>
.react-flow { width: 100%; height: 100%; }
@keyframes site-pulse {
0%, 100% { box-shadow: 0 0 30px rgba(139,92,246,0.08), 0 8px 32px rgba(0,0,0,0.3); }
50% { box-shadow: 0 0 50px rgba(139,92,246,0.18), 0 8px 32px rgba(0,0,0,0.3); }
}
</style>
{{frontend_script}}
</head>
<body class="bg-[#111] text-[#e5e5e5] flex flex-col overflow-hidden" style="height: 100dvh;">
<!-- App nav -->
<nav class="sticky top-0 z-50 bg-[#111]/80 backdrop-blur-xl border-b border-white/10">
<div class="max-w-6xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between">
<div class="flex items-center gap-3 sm:gap-6">
<a href="/" class="flex items-center gap-2 text-white font-semibold mr-0 sm:mr-2 text-sm sm:text-base">
<img src="/static/logo.svg" alt="ReadySite" width="22" height="22">
<span class="hidden sm:inline">ReadySite</span>
</a>
<a href="/sites" class="nav-tab text-xs sm:text-sm transition-colors" data-path="/sites">Dashboard</a>
<a href="/billing" class="nav-tab text-xs sm:text-sm transition-colors" data-path="/billing">Billing</a>
<a href="/settings" class="nav-tab text-xs sm:text-sm transition-colors" data-path="/settings">Account</a>
</div>
<div class="flex items-center gap-2 sm:gap-3">
<button class="btn btn-sm bg-white/10 text-white border-white/10 hover:bg-white/15 text-xs sm:text-sm"
onclick="document.getElementById('help-modal').showModal()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
<span class="hidden sm:inline">Help</span>
</button>
<button class="btn btn-sm bg-white/10 text-white border-white/10 hover:bg-white/15 text-xs sm:text-sm"
onclick="document.getElementById('new-site-modal').showModal()">
<span class="sm:hidden">+</span>
<span class="hidden sm:inline">+ New Site</span>
</button>
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium cursor-pointer" style="background: rgba(139,92,246,0.2); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3);">
{{if auth.CurrentUser}}{{upper (slice auth.CurrentUser.Email 0 1)}}{{else}}?{{end}}
</div>
<ul tabindex="0" class="dropdown-content menu bg-[#1a1a1a] border border-white/10 rounded-lg z-[1] w-48 p-1 shadow-xl mt-2">
<li>
<form method="POST" action="/auth/signout">
<button type="submit" class="text-sm text-[#ccc] hover:text-white">Sign out</button>
</form>
</li>
</ul>
</div>
</div>
</div>
</nav>
<script>
document.querySelectorAll('.nav-tab').forEach(tab => {
if (location.pathname === tab.dataset.path) {
tab.classList.add('text-white', 'font-medium');
} else {
tab.classList.add('text-[#888]', 'hover:text-white');
}
});
</script>
<div class="flex-1 min-h-0 [&>div]:h-full">
{{render "SitesPage" (dict)}}
</div>
<!-- New Site Modal -->
<dialog id="new-site-modal" class="modal">
<div class="modal-box bg-[#1a1a1a] border border-white/10 max-w-md mx-4">
<h3 class="text-lg font-bold text-white mb-1">Create a new site</h3>
<p class="text-sm text-[#888] mb-6">Give your site a name and optional description.</p>
<div id="create-error"></div>
<form hx-post="/api/sites" hx-target="#create-error" hx-swap="innerHTML" class="space-y-4">
<div>
<label class="text-sm text-[#ccc] mb-1.5 block" for="site-name">Name</label>
<input type="text" id="site-name" name="name" required autofocus
placeholder="My Portfolio"
class="input w-full bg-white/5 border-white/10 text-white placeholder:text-[#555] focus:border-white/30 focus:outline-none" />
</div>
<div>
<label class="text-sm text-[#ccc] mb-1.5 block" for="site-description">Description <span class="text-[#555]">(optional)</span></label>
<textarea id="site-description" name="description" rows="3"
placeholder="A portfolio site to showcase my work"
class="textarea w-full bg-white/5 border-white/10 text-white placeholder:text-[#555] focus:border-white/30 focus:outline-none resize-none"></textarea>
</div>
<div class="modal-action">
<button type="button" class="btn btn-ghost text-[#888] hover:text-white" onclick="document.getElementById('new-site-modal').close()">Cancel</button>
<button type="submit" class="btn bg-white text-black hover:bg-[#e5e5e5] border-0">Create Site</button>
</div>
</form>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<!-- Help Modal -->
<dialog id="help-modal" class="modal">
<div class="modal-box bg-[#1a1a1a] border border-white/10 max-w-lg mx-4">
<h3 class="text-lg font-bold text-white mb-1">Getting Started</h3>
<p class="text-sm text-[#888] mb-6">Everything you need to know about ReadySite.</p>
<div class="space-y-4">
<div class="flex items-start gap-3">
<div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0 mt-0.5" style="background: rgba(16,185,129,0.12);">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
</div>
<div>
<div class="text-white text-sm font-medium">Create a site</div>
<div class="text-[#888] text-xs mt-0.5">Click "+ New Site" to create a website. Each site gets its own subdomain and admin panel.</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0 mt-0.5" style="background: rgba(139,92,246,0.12);">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
</div>
<div>
<div class="text-white text-sm font-medium">Admin panel</div>
<div class="text-[#888] text-xs mt-0.5">Each site has an admin panel at <span class="font-mono">yoursite.readysite.app/admin</span> where you can manage content and settings.</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0 mt-0.5" style="background: rgba(245,158,11,0.12);">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
<div>
<div class="text-white text-sm font-medium">Drag to arrange</div>
<div class="text-[#888] text-xs mt-0.5">Drag site cards to rearrange them on the canvas. Your layout is saved automatically. Scroll to zoom, drag the background to pan.</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0 mt-0.5" style="background: rgba(34,211,238,0.12);">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<div>
<div class="text-white text-sm font-medium">Upgrade to Pro</div>
<div class="text-[#888] text-xs mt-0.5">Free sites are sandboxes for testing. Upgrade to Pro for a persistent database, custom domains, and data that survives restarts.</div>
</div>
</div>
</div>
<div class="modal-action">
<button type="button" class="btn btn-ghost text-[#888] hover:text-white" onclick="document.getElementById('help-modal').close()">Got it</button>
</div>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
</body>
</html>