Initial commit: MSD backend API, docs, mockups, README
This commit is contained in:
root
@@ -0,0 +1,398 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Moore Sunny Daze — Admin Dashboard</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--surface: #1e293b;
|
||||
--border: #334155;
|
||||
--text: #e2e8f0;
|
||||
--muted: #94a3b8;
|
||||
--accent: #06b6d4;
|
||||
--accent2: #f59e0b;
|
||||
--green: #10b981;
|
||||
--red: #ef4444;
|
||||
--amber: #f59e0b;
|
||||
--radius: 12px;
|
||||
--shadow: 0 4px 24px rgba(0,0,0,0.3);
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height:100vh; display:flex; }
|
||||
a { color: var(--accent); text-decoration:none; }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar { width:240px; background: #0a0f1a; border-right:1px solid var(--border); padding:20px 16px; display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:10; }
|
||||
.sidebar .logo { font-size:18px; font-weight:700; color:var(--accent); margin-bottom:32px; display:flex; align-items:center; gap:8px; }
|
||||
.sidebar .logo span { color:var(--text); font-weight:400; font-size:12px; display:block; }
|
||||
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:var(--muted); font-size:14px; cursor:pointer; margin-bottom:4px; transition:all 0.15s; border:none; background:none; width:100%; text-align:left; }
|
||||
.nav-item:hover { background:var(--surface); color:var(--text); }
|
||||
.nav-item.active { background:var(--accent); color:#fff; }
|
||||
.nav-item svg { width:18px; height:18px; flex-shrink:0; }
|
||||
|
||||
/* Main */
|
||||
.main { margin-left:240px; flex:1; padding:24px 32px; max-width:calc(100vw - 240px); }
|
||||
.header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
|
||||
.header h1 { font-size:22px; font-weight:600; }
|
||||
.header .user { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
|
||||
.header .user img { width:32px; height:32px; border-radius:50%; object-fit:cover; }
|
||||
|
||||
/* Stats */
|
||||
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
|
||||
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
|
||||
.stat-card .label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
|
||||
.stat-card .value { font-size:28px; font-weight:700; }
|
||||
.stat-card .sub { font-size:12px; color:var(--muted); margin-top:4px; }
|
||||
.stat-card .accent { color:var(--accent); }
|
||||
.stat-card .green { color:var(--green); }
|
||||
.stat-card .amber { color:var(--amber); }
|
||||
|
||||
/* Panels */
|
||||
.panels { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
|
||||
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
|
||||
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
|
||||
.panel-header h2 { font-size:15px; font-weight:600; }
|
||||
.panel-header .badge { font-size:11px; background:var(--accent); color:#fff; padding:3px 8px; border-radius:20px; font-weight:500; }
|
||||
|
||||
/* Bookings table */
|
||||
table { width:100%; border-collapse:collapse; }
|
||||
th { text-align:left; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; padding:8px 10px; border-bottom:1px solid var(--border); }
|
||||
td { padding:10px 10px; font-size:13px; border-bottom:1px solid var(--border); }
|
||||
.status { padding:3px 8px; border-radius:20px; font-size:11px; font-weight:500; }
|
||||
.status.confirmed { background:rgba(16,185,129,0.15); color:var(--green); }
|
||||
.status.checkin { background:rgba(6,182,212,0.15); color:var(--accent); }
|
||||
.status.pending { background:rgba(245,158,11,0.15); color:var(--amber); }
|
||||
.status.completed { background:rgba(148,163,184,0.15); color:var(--muted); }
|
||||
|
||||
/* Guest list */
|
||||
.guest-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
|
||||
.guest-item:last-child { border:none; }
|
||||
.guest-avatar { width:36px; height:36px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; color:#fff; }
|
||||
.guest-info { flex:1; }
|
||||
.guest-info .name { font-size:13px; font-weight:500; }
|
||||
.guest-info .date { font-size:11px; color:var(--muted); }
|
||||
|
||||
/* Calendar quick */
|
||||
.cal-mini { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; font-size:11px; }
|
||||
.cal-mini .day-header { color:var(--muted); text-align:center; padding:4px; }
|
||||
.cal-mini .day { text-align:center; padding:6px 2px; border-radius:4px; cursor:pointer; }
|
||||
.cal-mini .day.booked { background:rgba(6,182,212,0.2); color:var(--accent); font-weight:600; }
|
||||
.cal-mini .day.today { border:1px solid var(--accent2); }
|
||||
.cal-mini .day:hover { background:var(--border); }
|
||||
|
||||
/* Full-width panels */
|
||||
.full-width { grid-column:1/-1; }
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width:768px) {
|
||||
.sidebar { display:none; }
|
||||
.main { margin-left:0; max-width:100vw; padding:16px; }
|
||||
.stats { grid-template-columns:repeat(2,1fr); }
|
||||
.panels { grid-template-columns:1fr; }
|
||||
}
|
||||
|
||||
.hidden { display:none !important; }
|
||||
|
||||
/* View switching */
|
||||
.view { display:none; }
|
||||
.view.active { display:block; }
|
||||
|
||||
/* Settings form */
|
||||
.form-group { margin-bottom:16px; }
|
||||
.form-group label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
|
||||
.form-group input, .form-group textarea, .form-group select { width:100%; padding:8px 12px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; font-family:inherit; }
|
||||
.form-group textarea { min-height:80px; resize:vertical; }
|
||||
.btn { padding:10px 20px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; border:none; transition:all 0.15s; }
|
||||
.btn-primary { background:var(--accent); color:#fff; }
|
||||
.btn-primary:hover { opacity:0.9; }
|
||||
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
|
||||
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
|
||||
|
||||
/* Graph placeholder */
|
||||
.graph-bar { display:flex; align-items:flex-end; gap:4px; height:100px; }
|
||||
.graph-bar .bar { flex:1; background:var(--accent); border-radius:4px 4px 0 0; min-height:4px; transition:height 0.5s; }
|
||||
.graph-bar .bar:nth-child(odd) { opacity:0.7; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="logo">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 22h20L12 2z" fill="#06b6d4"/></svg>
|
||||
<div>Moore Sunny Daze<br><span>Owner Dashboard</span></div>
|
||||
</div>
|
||||
<button class="nav-item active" onclick="switchView('overview')" id="nav-overview">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
||||
Overview
|
||||
</button>
|
||||
<button class="nav-item" onclick="switchView('calendar')" id="nav-calendar">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
|
||||
Calendar
|
||||
</button>
|
||||
<button class="nav-item" onclick="switchView('guests')" id="nav-guests">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
Guests
|
||||
</button>
|
||||
<button class="nav-item" onclick="switchView('bookings')" id="nav-bookings">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
|
||||
Bookings
|
||||
</button>
|
||||
<button class="nav-item" onclick="switchView('settings')" id="nav-settings">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
||||
Settings
|
||||
</button>
|
||||
<div style="margin-top:auto; padding-top:16px; border-top:1px solid var(--border);">
|
||||
<div style="font-size:11px; color:var(--muted);">Logged in as</div>
|
||||
<div style="font-size:13px; font-weight:500;">Tim Moore</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main">
|
||||
|
||||
<!-- ============ OVERVIEW ============ -->
|
||||
<div class="view active" id="view-overview">
|
||||
<div class="header">
|
||||
<h1>Dashboard Overview</h1>
|
||||
<div class="user">Aug 2026</div>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-card">
|
||||
<div class="label">Upcoming Bookings</div>
|
||||
<div class="value">4</div>
|
||||
<div class="sub">Next: Aug 22-25</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">Revenue (Month)</div>
|
||||
<div class="value accent">$8,240</div>
|
||||
<div class="sub">+12% vs last month</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">Occupancy Rate</div>
|
||||
<div class="value green">82%</div>
|
||||
<div class="sub">August 2026</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">Avg Nightly Rate</div>
|
||||
<div class="value amber">$295</div>
|
||||
<div class="sub">Peak season pricing</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panels">
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Upcoming Reservations</h2>
|
||||
<span class="badge">4</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr><th>Guest</th><th>Check-In</th><th>Check-Out</th><th>Guests</th><th>Total</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Sarah Johnson</td><td>Aug 22</td><td>Aug 25</td><td>6</td><td>$885</td>
|
||||
<td><span class="status confirmed">Confirmed</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mark Davidson</td><td>Aug 30</td><td>Sep 2</td><td>4</td><td>$1,180</td>
|
||||
<td><span class="status confirmed">Confirmed</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rachel Kim</td><td>Sep 5</td><td>Sep 8</td><td>8</td><td>$885</td>
|
||||
<td><span class="status pending">Pending</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thompson Family</td><td>Sep 12</td><td>Sep 17</td><td>5</td><td>$1,475</td>
|
||||
<td><span class="status confirmed">Confirmed</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Recent Guests</h2>
|
||||
</div>
|
||||
<div class="guest-item">
|
||||
<div class="guest-avatar">JD</div>
|
||||
<div class="guest-info">
|
||||
<div class="name">James & Dana Miller</div>
|
||||
<div class="date">Aug 8-11 · 4 guests · ★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="guest-item">
|
||||
<div class="guest-avatar" style="background:#f59e0b;">CW</div>
|
||||
<div class="guest-info">
|
||||
<div class="name">Chris Williams</div>
|
||||
<div class="date">Aug 1-4 · 2 guests · ★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="guest-item">
|
||||
<div class="guest-avatar" style="background:#10b981;">BR</div>
|
||||
<div class="guest-info">
|
||||
<div class="name">Brittany & Robert Chen</div>
|
||||
<div class="date">Jul 25-28 · 6 guests · ★★★★☆</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="guest-item">
|
||||
<div class="guest-avatar" style="background:#ef4444;">KP</div>
|
||||
<div class="guest-info">
|
||||
<div class="name">Kevin Porter</div>
|
||||
<div class="date">Jul 18-22 · 3 guests · ★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel full-width">
|
||||
<div class="panel-header">
|
||||
<h2>Monthly Revenue</h2>
|
||||
</div>
|
||||
<div style="display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:10px;">
|
||||
<div style="display:flex; flex-direction:column; align-items:center; flex:1; gap:6px;">
|
||||
<div style="width:100%; background:var(--accent); height:90px; border-radius:4px 4px 0 0; opacity:0.7;"></div>
|
||||
<span style="font-size:10px; color:var(--muted);">Jul</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; flex:1; gap:6px;">
|
||||
<div style="width:100%; background:var(--accent); height:110px; border-radius:4px 4px 0 0;"></div>
|
||||
<span style="font-size:10px; color:var(--muted);">Aug</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; flex:1; gap:6px;">
|
||||
<div style="width:100%; background:var(--accent); height:72px; border-radius:4px 4px 0 0; opacity:0.5;"></div>
|
||||
<span style="font-size:10px; color:var(--muted);">Sep</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; flex:1; gap:6px;">
|
||||
<div style="width:100%; background:var(--accent); height:45px; border-radius:4px 4px 0 0; opacity:0.3;"></div>
|
||||
<span style="font-size:10px; color:var(--muted);">Oct</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ CALENDAR ============ -->
|
||||
<div class="view" id="view-calendar">
|
||||
<div class="header">
|
||||
<h1>Reservation Calendar</h1>
|
||||
<div style="display:flex; gap:8px;">
|
||||
<button class="btn btn-outline" onclick="alert('Prev month')">←</button>
|
||||
<span style="padding:10px 0; font-weight:600;">August 2026</span>
|
||||
<button class="btn btn-outline" onclick="alert('Next month')">→</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel full-width">
|
||||
<div class="cal-mini" style="font-size:13px;">
|
||||
<div class="day-header">Sun</div><div class="day-header">Mon</div><div class="day-header">Tue</div><div class="day-header">Wed</div><div class="day-header">Thu</div><div class="day-header">Fri</div><div class="day-header">Sat</div>
|
||||
<div class="day booked">1</div><div class="day booked">2</div><div class="day booked">3</div><div class="day booked">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div>
|
||||
<div class="day booked">8</div><div class="day booked">9</div><div class="day booked">10</div><div class="day booked">11</div><div class="day">12</div><div class="day">13</div><div class="day">14</div>
|
||||
<div class="day">15</div><div class="day">16</div><div class="day booked">17</div><div class="day booked">18</div><div class="day booked">19</div><div class="day booked">20</div><div class="day booked">21</div>
|
||||
<div class="day booked">22</div><div class="day booked">23</div><div class="day booked">24</div><div class="day booked">25</div><div class="day">26</div><div class="day">27</div><div class="day">28</div>
|
||||
<div class="day">29</div><div class="day booked">30</div><div class="day booked">31</div>
|
||||
</div>
|
||||
<div style="margin-top:16px; display:flex; gap:16px; font-size:12px; color:var(--muted);">
|
||||
<span><span style="display:inline-block;width:12px;height:12px;background:rgba(6,182,212,0.2);border-radius:2px;margin-right:4px;"></span> Booked</span>
|
||||
<span><span style="display:inline-block;width:12px;height:12px;background:var(--surface);border:1px solid var(--border);border-radius:2px;margin-right:4px;"></span> Available</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ GUESTS ============ -->
|
||||
<div class="view" id="view-guests">
|
||||
<div class="header">
|
||||
<h1>Guest Directory</h1>
|
||||
<button class="btn btn-primary" onclick="alert('Add guest flow - TBD')">+ Add Guest</button>
|
||||
</div>
|
||||
<div class="panel full-width">
|
||||
<table>
|
||||
<thead><tr><th>Name</th><th>Email</th><th>Last Stay</th><th>Total Stays</th><th>Rating</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>James & Dana Miller</td><td>jdmiller@gmail.com</td><td>Aug 8-11, 2026</td><td>3</td><td>★★★★★</td></tr>
|
||||
<tr><td>Chris Williams</td><td>chris.williams@yahoo.com</td><td>Aug 1-4, 2026</td><td>1</td><td>★★★★★</td></tr>
|
||||
<tr><td>Brittany & Robert Chen</td><td>brittchen@gmail.com</td><td>Jul 25-28, 2026</td><td>2</td><td>★★★★☆</td></tr>
|
||||
<tr><td>Kevin Porter</td><td>kporter@outlook.com</td><td>Jul 18-22, 2026</td><td>1</td><td>★★★★★</td></tr>
|
||||
<tr><td>Sarah Johnson</td><td>sjohnson@gmail.com</td><td>Upcoming: Aug 22</td><td>4</td><td>★★★★★</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ BOOKINGS ============ -->
|
||||
<div class="view" id="view-bookings">
|
||||
<div class="header">
|
||||
<h1>All Bookings</h1>
|
||||
<button class="btn btn-primary" onclick="alert('New booking form - TBD')">+ New Booking</button>
|
||||
</div>
|
||||
<div class="panel full-width">
|
||||
<table>
|
||||
<thead><tr><th>ID</th><th>Guest</th><th>Check-In</th><th>Check-Out</th><th>Nights</th><th>Guests</th><th>Total</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>#1042</td><td>Sarah Johnson</td><td>Aug 22</td><td>Aug 25</td><td>3</td><td>6</td><td>$885</td><td><span class="status confirmed">Confirmed</span></td></tr>
|
||||
<tr><td>#1041</td><td>Mark Davidson</td><td>Aug 30</td><td>Sep 2</td><td>3</td><td>4</td><td>$1,180</td><td><span class="status confirmed">Confirmed</span></td></tr>
|
||||
<tr><td>#1040</td><td>Rachel Kim</td><td>Sep 5</td><td>Sep 8</td><td>3</td><td>8</td><td>$885</td><td><span class="status pending">Pending</span></td></tr>
|
||||
<tr><td>#1039</td><td>Thompson Family</td><td>Sep 12</td><td>Sep 17</td><td>5</td><td>5</td><td>$1,475</td><td><span class="status confirmed">Confirmed</span></td></tr>
|
||||
<tr><td>#1038</td><td>James Miller</td><td>Aug 8</td><td>Aug 11</td><td>3</td><td>4</td><td>$885</td><td><span class="status completed">Completed</span></td></tr>
|
||||
<tr><td>#1037</td><td>Chris Williams</td><td>Aug 1</td><td>Aug 4</td><td>3</td><td>2</td><td>$750</td><td><span class="status completed">Completed</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ SETTINGS ============ -->
|
||||
<div class="view" id="view-settings">
|
||||
<div class="header">
|
||||
<h1>Property Settings</h1>
|
||||
</div>
|
||||
<div class="panel full-width" style="max-width:600px;">
|
||||
<div class="form-group">
|
||||
<label>Property Name</label>
|
||||
<input type="text" value="Moore Sunny Daze">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Nightly Rate (Base)</label>
|
||||
<input type="text" value="$295">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Cleaning Fee</label>
|
||||
<input type="text" value="$150">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Minimum Night Stay</label>
|
||||
<input type="number" value="3">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Max Guests</label>
|
||||
<input type="number" value="8">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Check-In Time</label>
|
||||
<input type="text" value="4:00 PM">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Check-Out Time</label>
|
||||
<input type="text" value="10:00 AM">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Stripe Account</label>
|
||||
<input type="text" value="acct_••••••••••" disabled style="opacity:0.5;">
|
||||
</div>
|
||||
<div style="display:flex; gap:10px; margin-top:20px;">
|
||||
<button class="btn btn-primary" onclick="alert('Settings saved! (mock)')">Save Changes</button>
|
||||
<button class="btn btn-outline">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function switchView(name) {
|
||||
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
||||
document.getElementById('view-' + name).classList.add('active');
|
||||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||||
document.getElementById('nav-' + name).classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user