Spaces:

enzostvs
/

deepsite

Running

App Files Files Community

414

deepsite / 4th year /book-appointment.html

kjro

Upload 10 files

c3a3a56 verified 25 days ago

raw

history blame

8.33 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Book an Appointment - ZMABC</title>
	<link rel="stylesheet" href="styles/book-appointment.css">
	</head>
	<body>
	<header class="cms-header">
	<div class="cms-header-title">Zen Miracle ABC</div>
	<nav class="cms-nav">
	<a href="index.html">Home</a>
	<a href="#">User Registration</a>
	<a href="#">Appointments</a>
	<a href="#">Clinic Locations</a>
	<a href="#">News</a>
	</nav>
	<a href="dashboard.html" class="cms-user-icon" title="User Account">👤</a>
	</header>
	<div style="display: flex;">
	<aside class="dashboard-sidebar">
	<div class="dashboard-user">
	<img src="images/user-avatar.png" alt="User Avatar" class="dashboard-avatar">
	<div class="dashboard-username">User
	</div>
	</div>
	<nav class="dashboard-nav">
	<a href="dashboard.html"><span class="icon">🏠</span>Dashboard</a>
	<a href="book-appointment.html" class="active"><span class="icon">📅</span> Appointments</a>
	<a href="#"><span class="icon">💬</span> Notifications</a>
	<a href="#"><span class="icon">💳</span> Billing</a>
	<a href="#"><span class="icon">⚙️</span> Settings</a>
	</nav>
	</aside>
	<main class="appointment-main">
	<h1>Book an Appointment</h1>
	<p class="appointment-subtitle">Find a time that works for you.</p>
	<div class="appointment-form-row">
	<div class="appointment-form-card">
	<label for="service">Service</label>
	<select id="service">
	<option>Select a service</option>
	<option>General Consultation</option>
	<option>Follow-up</option>
	<option>Diagnostic</option>
	</select>
	<label for="provider">Healthcare Provider</label>
	<select id="provider">
	<option>Select a provider</option>
	<option>Dr. Emily Carter</option>
	<option>Dr. Samal Vienn</option>
	<option>Dr. Vincent Boogie</option>
	</select>
	</div>
	<div class="appointment-form-card">
	<label>Select Date & Time</label>
	<div class="appointment-calendar">
	<div class="calendar-header">
	<button id="prevMonthBtn"><</button>
	<select id="calendarMonth"></select>
	<select id="calendarYear"></select>
	<button id="nextMonthBtn">></button>
	</div>
	<table class="calendar-table" id="calendarTable">
	<thead>
	<tr>
	<th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
	</tr>
	</thead>
	<tbody>
	<!-- Calendar days will be generated here -->
	</tbody>
	</table>
	</div>
	<div class="calendar-times" id="calendar-times">
	<span>Select a time:</span>
	<div class="calendar-times-row" id="times-row">
	<!-- Time buttons will be generated by JS -->
	</div>
	</div>
	</div>
	</div>
	<div class="appointment-summary">
	<div class="summary-title">Appointment Summary</div>
	<div class="summary-row">
	<div>Service</div>
	<div>General Consultation</div>
	</div>
	<div class="summary-row">
	<div>Provider</div>
	<div>Dr. Emily Carter</div>
	</div>
	<div class="summary-row">
	<div>Date & Time</div>
	<div>July 5, 2024, at 10:00 AM</div>
	</div>
	<div class="summary-row">
	<div>Time</div>
	<div id="summary-time"></div>
	</div>
	</div>
	<div class="appointment-confirm-row">
	<button class="appointment-confirm-btn">Confirm Appointment</button>
	</div>
	<div id="confirmation-modal" class="confirmation-modal" style="display:none;">
	<div class="confirmation-content">
	<div class="confirmation-icon">✔</div>
	<h2>Appointment Confirmed!</h2>
	<p>Your appointment has been successfully scheduled. Please review the details below.</p>
	<div class="confirmation-details">
	<table>
	<tr><td>Date</td><td id="confirm-date"></td></tr>
	<tr><td>Time</td><td id="confirm-time"></td></tr>
	<tr><td>Provider</td><td id="confirm-provider"></td></tr>
	<tr><td>Service</td><td id="confirm-service"></td></tr>
	<tr><td>Location</td><td id="confirm-location"></td></tr>
	</table>
	</div>
	<button id="confirmation-done" class="appointment-confirm-btn">Done</button>
	</div>
	</div>
	</main>
	</div>
	<div id="confirmation-overlay" class="confirmation-overlay">
	<div class="confirmation-modal">
	<div class="approved-status">
	<div class="approved-icon">✔</div>
	<h1>Appointment Confirmed!</h1>
	<p class="approved-message">
	Your appointment has been successfully scheduled. A confirmation has been sent to your email. Please review the details below.
	</p>
	</div>
	<section class="approved-details-card">
	<h2>Appointment Details</h2>
	<div class="approved-details-table">
	<div class="approved-details-row">
	<span class="approved-details-label">Date</span>
	<span id="confirm-date" class="approved-details-value"></span>
	</div>
	<div class="approved-details-row">
	<span class="approved-details-label">Time</span>
	<span id="confirm-time" class="approved-details-value"></span>
	</div>
	<div class="approved-details-row">
	<span class="approved-details-label">Provider</span>
	<span id="confirm-provider" class="approved-details-value"></span>
	</div>
	<div class="approved-details-row">
	<span class="approved-details-label">Service</span>
	<span id="confirm-service" class="approved-details-value"></span>
	</div>
	<div class="approved-details-row">
	<span class="approved-details-label">Location</span>
	<span id="confirm-location" class="approved-details-value">Main Clinic</span>
	</div>
	</div>
	<div class="approved-details-actions">
	<button onclick="window.location.href='dashboard.html'" class="approved-btn">Done</button>
	</div>
	</section>
	</div>
	</div>
	<script src="scripts/appointment.js"></script>
	</body>
	</html>