← back to Malden House
dashboard.html
108 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard — Victory Stays</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=Archivo:wght@400;500;700;800;900&family=EB+Garamond:ital,wght@0,400;1,400&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="landing.css?v=10">
<link rel="stylesheet" href="dashboard.css?v=10">
</head>
<body class="dash">
<nav class="l-nav">
<div class="l-brand">
<span class="l-dot"></span>
<span class="l-mark">VICTORY STAYS</span>
<span class="l-sub">Host dashboard</span>
</div>
<div class="l-nav-links">
<a href="index.html">Landing</a>
<a href="schedule.html">Schedule</a>
<a href="browse.html">Browse</a>
<a href="#rentals" class="active">Rentals</a>
<a href="#inquiries">Inquiries</a>
<a href="#photos">Photos</a>
</div>
<a class="l-nav-cta" href="index.html#signup">+ Add address</a>
</nav>
<header class="dash-hero">
<div>
<div class="l-eyebrow accent">§ Your rentals</div>
<h1 id="dash-hello">Welcome back.</h1>
<p id="dash-summary" class="dash-sub"></p>
</div>
<div class="dash-stats" id="dash-stats"></div>
</header>
<section id="rentals" class="dash-section">
<header>
<h2>Rental microsites</h2>
<span class="dash-hint">Click any card to edit, or open the live page in a new tab.</span>
</header>
<div class="dash-grid" id="dash-grid"></div>
<div class="dash-empty" id="dash-empty" hidden>
<p>No rentals yet.</p>
<a href="index.html#signup" class="dash-cta">Create your first →</a>
</div>
</section>
<section id="inquiries" class="dash-section">
<header>
<h2>Guest inquiries</h2>
<span class="dash-hint">Every message from your rental pages lands here.</span>
</header>
<ul class="dash-inbox" id="dash-inbox"></ul>
<div class="dash-empty" id="dash-inbox-empty" hidden>
<p>No inquiries yet. When a guest uses the contact form on your rental page, it'll appear here.</p>
</div>
</section>
<section id="photos" class="dash-section">
<header>
<h2>Photo library</h2>
<span class="dash-hint">Upload up to 10 photos. They replace the stock thumbnails in your trailer, hero, and field guide — everywhere at once.</span>
</header>
<div class="photo-picker">
<label for="photo-rental">FOR RENTAL</label>
<select id="photo-rental"></select>
</div>
<div class="photo-upload" id="photo-upload">
<input type="file" id="photo-input" accept="image/*" multiple hidden>
<button id="photo-btn">＋ Upload photos (JPEG/PNG, max ~1MB each)</button>
<span class="dash-hint">Stored in your browser locally — no server upload yet.</span>
</div>
<div class="photo-grid" id="photo-grid"></div>
</section>
<!-- Edit modal -->
<div class="dash-modal" id="edit-modal" hidden>
<div class="dash-modal-card">
<button class="dash-close" id="edit-close">×</button>
<h3>Edit rental</h3>
<form id="edit-form">
<label><span>Host name</span><input type="text" name="host" required></label>
<label><span>Email</span><input type="email" name="email" required></label>
<label><span>Phone</span><input type="tel" name="phone" required></label>
<div class="edit-actions">
<button type="button" id="edit-delete" class="danger">Delete rental</button>
<button type="submit" class="primary">Save</button>
</div>
</form>
</div>
</div>
<footer class="l-footer">
<div class="l-foot-brand"><span class="l-dot"></span>VICTORY STAYS · NOT AFFILIATED WITH LA 2028</div>
<div class="l-foot-mid">Dashboard · local-only storage (no server yet)</div>
<div class="l-foot-credit">© 2028 · hello@victorystays.com</div>
</footer>
<script src="neighborhoods.js?v=10"></script>
<script src="dashboard.js?v=10"></script>
</body>
</html>