You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
991 lines
24 KiB
991 lines
24 KiB
<!doctype html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head th:replace="~{fragments/user-head :: head}"></head>
|
|
<!-- <meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Victoria Public Hall — Booking</title>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,700&display=swap" rel="stylesheet"> -->
|
|
<style>
|
|
:root {
|
|
--accent: #12363b;
|
|
--muted: #6b6b6b;
|
|
--card-bg: #ffffff;
|
|
--slot-radius: 10px;
|
|
--green-start: #16a34a;
|
|
--green-end: #09905a;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%
|
|
}
|
|
|
|
body {
|
|
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
|
|
|
|
background:
|
|
linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.82)),
|
|
url('/victoriapublichall/images/vph-background_v1.jpg') top center / cover no-repeat,
|
|
url('/victoriapublichall/images/vph-background_v1.jpg') bottom center / cover no-repeat;
|
|
|
|
min-height: 100vh;
|
|
background-attachment: fixed;
|
|
/* keeps both images static */
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
min-height: 100vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 18px 24px;
|
|
}
|
|
|
|
/* container */
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/******************************
|
|
NAVBAR (desktop + mobile)
|
|
******************************/
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 10px 0;
|
|
position: relative;
|
|
z-index: 1300;
|
|
}
|
|
|
|
.leftbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
/* ---------- Navbar styles (desktop + mobile behaviour) ---------- */
|
|
/* keep your existing desktop styles; add / replace these responsive bits */
|
|
|
|
/* small logo + layout helpers */
|
|
.nav-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.logo {
|
|
width: 72px;
|
|
height: 72px;
|
|
object-fit: contain;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* default desktop nav */
|
|
nav.primary {
|
|
display: flex;
|
|
gap: 18px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Desktop Navigation Links (Figma Accurate) */
|
|
nav.primary a {
|
|
font-family: "Playfair Display", serif !important;
|
|
font-weight: 400 !important;
|
|
/* Regular */
|
|
font-style: normal !important;
|
|
font-size: 15px !important;
|
|
/* Figma size */
|
|
line-height: 100% !important;
|
|
letter-spacing: 0 !important;
|
|
|
|
color: #3C1E12;
|
|
/* matches Book a Visit color */
|
|
text-decoration: none;
|
|
|
|
padding: 6px 8px;
|
|
/* keep your layout spacing */
|
|
border-radius: 6px;
|
|
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
/* Hover state (optional subtle effect like Figma preview) */
|
|
nav.primary a:hover {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
color: #3C1E12;
|
|
/* no change in color */
|
|
}
|
|
|
|
/* Mobile menu links */
|
|
.mobile-nav a {
|
|
font-family: "Playfair Display", serif !important;
|
|
font-weight: 400 !important;
|
|
font-size: 15px !important;
|
|
letter-spacing: 0 !important;
|
|
color: #3C1E12;
|
|
}
|
|
|
|
.rightbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Desktop CTA (Book a Visit) — With Figma Border */
|
|
#desktopBookBtn {
|
|
width: 174px;
|
|
/* Figma button width */
|
|
height: 57px;
|
|
/* Figma button height */
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
background: transparent;
|
|
border-radius: 8px;
|
|
/* Figma corner radius */
|
|
|
|
/* Border from Figma (thin outline) */
|
|
border: 1px solid rgba(60, 30, 18, 0.40);
|
|
/* darker visible border */
|
|
|
|
cursor: pointer;
|
|
|
|
/* Figma Typography */
|
|
font-family: "Playfair Display", serif !important;
|
|
font-weight: 700 !important;
|
|
/* Bold */
|
|
font-style: italic !important;
|
|
font-size: 24px !important;
|
|
line-height: 100% !important;
|
|
|
|
/* Letter spacing -6% = -0.06em */
|
|
letter-spacing: -0.06em !important;
|
|
|
|
color: #3C1E12 !important;
|
|
}
|
|
|
|
/* Hover effect (Figma-like subtle shadow) */
|
|
#desktopBookBtn:hover {
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
|
|
}
|
|
|
|
/* hamburger (hidden on desktop) */
|
|
.hamburger {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
}
|
|
|
|
.hamburger .bar {
|
|
display: block;
|
|
width: 18px;
|
|
height: 2px;
|
|
background: var(--dark);
|
|
margin: 3px 0;
|
|
transition: transform .2s, opacity .2s;
|
|
}
|
|
|
|
/* mobile floating menu + overlay (initial hidden) */
|
|
.mobile-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.22);
|
|
z-index: 1350;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity .22s ease;
|
|
}
|
|
|
|
.mobile-overlay.show {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.mobile-nav {
|
|
position: fixed;
|
|
left: 12px;
|
|
right: 12px;
|
|
top: 68px;
|
|
max-width: 420px;
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.16);
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
z-index: 1400;
|
|
transform: translateY(-8px) scale(.995);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity .22s ease, transform .22s ease;
|
|
}
|
|
|
|
.mobile-nav.open {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.mobile-nav a {
|
|
display: block;
|
|
padding: 10px 12px;
|
|
color: var(--dark);
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.mobile-nav a+a {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/******************************
|
|
PAGE / HERO / PANEL
|
|
******************************/
|
|
.page {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
|
|
|
|
.panel-wrap {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.hero {
|
|
width: 100%;
|
|
max-width: 920px;
|
|
text-align: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* Desktop style */
|
|
.page h1 {
|
|
font-family: "Inter", sans-serif;
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 48px;
|
|
line-height: 100%;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
|
|
width: 100%;
|
|
max-width: 444px;
|
|
/* Figma width */
|
|
margin: 0 auto 10px;
|
|
/* Center + bottom spacing */
|
|
color: #3B1E14 !important;
|
|
}
|
|
|
|
/* Desktop version */
|
|
.hero .lead {
|
|
font-family: "Inter", sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 20px;
|
|
line-height: 100%;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
|
|
width: 100%;
|
|
max-width: 417px;
|
|
/* From Figma */
|
|
margin: 0 auto 20px;
|
|
/* Center + spacing */
|
|
color: #000000;
|
|
/* BLACK COLOR as requested */
|
|
}
|
|
|
|
/* ========== Confirmation / cards styles ========== */
|
|
|
|
/* Booking Confirmed Title — applies ONLY to this h1 */
|
|
h1.booking-confirmed {
|
|
width: 313px;
|
|
height: 39px;
|
|
|
|
font-family: "Inter", sans-serif;
|
|
font-weight: 700;
|
|
font-size: 32px;
|
|
line-height: 100%;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
|
|
color: #0CBC47 !important;
|
|
/* force green color */
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
|
|
|
|
|
|
/* Booking details subtitle — ONLY for this h2 */
|
|
h3.booking-subtitle {
|
|
|
|
|
|
font-family: "Inter", sans-serif;
|
|
|
|
font-size: 12px;
|
|
/* Size */
|
|
line-height: 11px;
|
|
/* Figma line height */
|
|
letter-spacing: 0;
|
|
|
|
text-align: center;
|
|
/* Center aligned */
|
|
color: #000000;
|
|
/* Black text */
|
|
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
justify-items: center;
|
|
margin: 10px 0 24px;
|
|
}
|
|
|
|
|
|
.summary-card {
|
|
Width: 536px;
|
|
Height: 114px;
|
|
background: var(--card-bg);
|
|
border-radius: 10px;
|
|
box-shadow: 0 10px 24px rgba(7, 25, 30, 0.06);
|
|
padding: 18px;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
text-align: left;
|
|
}
|
|
|
|
.av-card {
|
|
Width: 536px;
|
|
background: var(--card-bg);
|
|
border-radius: 10px;
|
|
box-shadow: 0 10px 24px rgba(7, 25, 30, 0.06);
|
|
padding: 18px;
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
|
text-align: left;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.summary-left {
|
|
width: 60%;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.summary-left .label {
|
|
font-weight: 700;
|
|
color: black !important;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.summary-right {
|
|
width: 40%;
|
|
text-align: right;
|
|
font-weight: 400;
|
|
color: #0b0b0b;
|
|
font-size: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.av-box {
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
max-height: 160px;
|
|
overflow-y: auto;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
.av-title {
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
color: #222;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.av-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.av-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 8px;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
}
|
|
|
|
.av-time {
|
|
font-weight: 400;
|
|
color: #0b0b0b;
|
|
}
|
|
|
|
.av-seats {
|
|
color: #0b0b0b;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.gbm-wrap {
|
|
margin-top: 22px;
|
|
text-align: center;
|
|
}
|
|
|
|
.gbm {
|
|
Width: 536px;
|
|
display: inline-block;
|
|
padding: 16px 40px;
|
|
background: #043B55;
|
|
color: #fff;
|
|
border-radius: 10px;
|
|
border: none;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
box-shadow: 0 8px 26px rgba(4, 59, 69, 0.12);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.secondary-link {
|
|
display: inline-block;
|
|
margin-top: 12px;
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
/* ===== Final mobile override — place LAST in your CSS (<=520px) ===== */
|
|
@media (max-width: 520px) {
|
|
|
|
/* page / body */
|
|
body {
|
|
padding: 12px 10px;
|
|
background-position: center top;
|
|
background-size: cover;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* container & panels */
|
|
.container,
|
|
.panel-wrap,
|
|
.page {
|
|
width: 100%;
|
|
max-width: 420px;
|
|
margin: 0 auto;
|
|
padding: 0 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* header / nav */
|
|
.logo {
|
|
width: 61px;
|
|
height: 61px;
|
|
}
|
|
|
|
nav.primary {
|
|
display: none !important;
|
|
}
|
|
|
|
#desktopBookBtn {
|
|
display: none !important;
|
|
}
|
|
|
|
.hamburger {
|
|
display: flex !important;
|
|
}
|
|
|
|
/* hero */
|
|
.page h1 {
|
|
font-size: 32px !important;
|
|
width: 100%;
|
|
max-width: 360px;
|
|
margin: 6px auto 8px;
|
|
}
|
|
|
|
.hero .lead {
|
|
font-size: 14px !important;
|
|
max-width: 320px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.panel-wrap {
|
|
padding: 6px 0 18px;
|
|
}
|
|
|
|
|
|
/* Book-grid / confirmation block — force centered and full width */
|
|
.grid,
|
|
.book-grid {
|
|
width: 100% !important;
|
|
max-width: 420px !important;
|
|
margin: 8px auto 18px !important;
|
|
gap: 10px !important;
|
|
padding: 0 8px !important;
|
|
box-sizing: border-box !important;
|
|
justify-items: center !important;
|
|
}
|
|
|
|
/* Booking Confirmed title */
|
|
h1.booking-confirmed {
|
|
width: 100% !important;
|
|
max-width: 420px !important;
|
|
font-family: "Inter", sans-serif !important;
|
|
font-weight: 700 !important;
|
|
font-size: 28px !important;
|
|
line-height: 34px !important;
|
|
height: auto !important;
|
|
color: #0CBC47 !important;
|
|
margin: 6px auto 0 !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* subtitle beneath booking title */
|
|
.book-grid p {
|
|
width: 100% !important;
|
|
max-width: 420px !important;
|
|
font-family: "Inter", sans-serif !important;
|
|
font-weight: 400 !important;
|
|
font-size: 15px !important;
|
|
line-height: 20px !important;
|
|
margin: 4px auto 0 !important;
|
|
color: #000 !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Summary / cards: full width stacking */
|
|
.summary-card,
|
|
.av-card,
|
|
.card,
|
|
.summary-box,
|
|
.vph-summary-box {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
padding: 14px !important;
|
|
border-radius: 10px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* AV list */
|
|
.av-box {
|
|
margin-top: 10px !important;
|
|
padding: 10px !important;
|
|
max-height: 160px !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
.av-list {
|
|
max-height: unset !important;
|
|
overflow-y: visible !important;
|
|
gap: 8px !important;
|
|
}
|
|
|
|
.av-row {
|
|
padding: 8px 6px !important;
|
|
}
|
|
|
|
/* Buttons and CTAs: full width, touch-friendly */
|
|
.gbm,
|
|
.btn,
|
|
.vph-modal-submit,
|
|
.modal-submit {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
padding: 12px 16px !important;
|
|
box-sizing: border-box !important;
|
|
font-size: 16px !important;
|
|
border-radius: 12px !important;
|
|
|
|
}
|
|
|
|
/* Modals: stretch to comfortable mobile size */
|
|
.vph-modal,
|
|
.modal {
|
|
width: 94% !important;
|
|
padding: 14px !important;
|
|
max-height: 92vh !important;
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.vph-summary-box,
|
|
.vph-av-box,
|
|
.summary-box {
|
|
height: auto !important;
|
|
padding: 12px !important;
|
|
}
|
|
|
|
.vph-modal-submit,
|
|
.modal-submit {
|
|
width: 100% !important;
|
|
padding: 12px 14px !important;
|
|
}
|
|
|
|
/* small tweaks */
|
|
.preview-note-box,
|
|
.summary-item,
|
|
.muted,
|
|
.people-support {
|
|
font-size: 13px !important;
|
|
line-height: 1.35 !important;
|
|
}
|
|
|
|
.time-ranges {
|
|
overflow-x: auto !important;
|
|
-webkit-overflow-scrolling: touch !important;
|
|
gap: 8px !important;
|
|
padding-bottom: 8px !important;
|
|
}
|
|
|
|
.time-ranges::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.logo {
|
|
width: 61px !important;
|
|
height: 61px !important;
|
|
}
|
|
|
|
/* extra small screens */
|
|
@media (max-width: 360px) {
|
|
h1.booking-confirmed {
|
|
font-size: 24px !important;
|
|
line-height: 30px !important;
|
|
}
|
|
|
|
h2.booking-subtitle,
|
|
h3.booking-subtitle {
|
|
font-size: 14px !important;
|
|
line-height: 18px !important;
|
|
}
|
|
|
|
.gbm {
|
|
padding: 12px !important;
|
|
font-size: 15px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel {
|
|
background: transparent;
|
|
}
|
|
</style>
|
|
<!-- </head> -->
|
|
|
|
<body>
|
|
<div class="container">
|
|
<header class="topbar" role="banner">
|
|
<div class="leftbar">
|
|
<div class="nav-left">
|
|
<!-- logo image — use same img src you already have -->
|
|
|
|
<img th:src="@{images/VPH-logo_main-EN 1.png}" alt="VPH logo" class="logo">
|
|
</div>
|
|
|
|
<!-- desktop nav (hidden on mobile) -->
|
|
<nav class="primary" aria-label="Primary navigation">
|
|
<a href="/victoriapublichall/home">Home</a>
|
|
<a href="#">About VPH</a>
|
|
<a href="/victoriapublichall/visit">Visit</a>
|
|
<!--<a href="#">Contact Us</a>-->
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- right side: hamburger (mobile) + desktop CTA -->
|
|
<div class="rightbar">
|
|
<button id="hambtn" class="hamburger" aria-label="Open menu" aria-expanded="false" aria-controls="mobileNav">
|
|
<span class="bar bar1" aria-hidden="true"></span>
|
|
<span class="bar bar2" aria-hidden="true"></span>
|
|
<span class="bar bar3" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<!-- overlay (click to close) -->
|
|
<div id="mobileOverlay" class="mobile-overlay" aria-hidden="true"></div>
|
|
|
|
<!-- mobile nav -->
|
|
<nav id="mobileNav" class="mobile-nav" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Mobile menu">
|
|
<a href="/victoriapublichall/home">Home</a>
|
|
<a href="#">About VPH</a>
|
|
<a href="/victoriapublichall/visit">Visit</a>
|
|
<a href="#">Contact Us</a>
|
|
|
|
</nav>
|
|
|
|
<main class="page" role="main" aria-labelledby="hero-heading">
|
|
<div class="hero" aria-hidden="false">
|
|
<h1 id="hero-heading">Victoria Public Hall</h1>
|
|
<div class="lead">Experience Chennai's First Town Hall</div>
|
|
</div>
|
|
|
|
<div class="panel-wrap">
|
|
<div class="panel" role="region" aria-label="Booking panel">
|
|
|
|
<div class="grid">
|
|
<div class="book-grid" aria-hidden="false">
|
|
<h1 class="booking-confirmed">Booking Confirmed!</h1>
|
|
<br>
|
|
<p>Your booking details has been sent to your phone/email</p>
|
|
</div>
|
|
|
|
<div class="summary-card" aria-live="polite">
|
|
<div class="summary-row">
|
|
<div class="summary-left">
|
|
<div class="label">Visiting on</div>
|
|
<div class="label">Time</div>
|
|
<div class="label">Total Guest(s)</div>
|
|
</div>
|
|
<div class="summary-right">
|
|
<div id="confirmDate"></div>
|
|
<div id="confirmRange"></div>
|
|
<div id="confirmPeople"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="av-card">
|
|
<div class="av-title">AV Experience</div>
|
|
<div class="av-box">
|
|
<div id="confirmAvList" class="av-list">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="gbm-wrap">
|
|
<a href="/victoriapublichall/register" class="gbm" id="goBackBtn">Go back to main page</a>
|
|
<!-- <div>
|
|
<button id="downloadBtn" class="secondary-link">Download booking (PDF)</button>
|
|
</div> -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<div id="pageLoader"
|
|
style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); z-index: 9999; text-align: center;">
|
|
<div style="position: relative; top: 50%; transform: translateY(-50%);">
|
|
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;"></div>
|
|
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script th:replace="~{fragments/user-script :: script}"></script>
|
|
|
|
<script>
|
|
/* ========================
|
|
MOBILE NAV (improved)
|
|
======================== */
|
|
(function () {
|
|
const hambtn = document.getElementById('hambtn');
|
|
const mobileNav = document.getElementById('mobileNav');
|
|
const mobileOverlay = document.getElementById('mobileOverlay');
|
|
const desktopBook = document.getElementById('desktopBookBtn');
|
|
const mobileBook = document.getElementById('mobileBook');
|
|
|
|
if (!hambtn || !mobileNav || !mobileOverlay) {
|
|
// nothing to do if elements missing
|
|
} else {
|
|
function openMenu() {
|
|
hambtn.setAttribute('aria-expanded', 'true');
|
|
mobileNav.classList.add('open'); mobileNav.setAttribute('aria-hidden', 'false');
|
|
mobileOverlay.classList.add('show'); mobileOverlay.setAttribute('aria-hidden', 'false');
|
|
document.body.style.overflow = 'hidden';
|
|
const first = mobileNav.querySelector('a'); if (first) first.focus();
|
|
}
|
|
function closeMenu() {
|
|
hambtn.setAttribute('aria-expanded', 'false');
|
|
mobileNav.classList.remove('open'); mobileNav.setAttribute('aria-hidden', 'true');
|
|
mobileOverlay.classList.remove('show'); mobileOverlay.setAttribute('aria-hidden', 'true');
|
|
document.body.style.overflow = '';
|
|
hambtn.focus();
|
|
}
|
|
|
|
hambtn.addEventListener('click', () => {
|
|
const isOpen = hambtn.getAttribute('aria-expanded') === 'true';
|
|
if (isOpen) closeMenu(); else openMenu();
|
|
});
|
|
|
|
mobileOverlay.addEventListener('click', closeMenu);
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && mobileNav.classList.contains('open')) closeMenu();
|
|
});
|
|
|
|
mobileNav.querySelectorAll('a').forEach(a => {
|
|
a.addEventListener('click', () => {
|
|
// close after clicking any mobile link
|
|
closeMenu();
|
|
});
|
|
});
|
|
|
|
// ensure menu closes when resizing to desktop
|
|
window.addEventListener('resize', () => {
|
|
if (window.innerWidth > 900 && mobileNav.classList.contains('open')) closeMenu();
|
|
});
|
|
}
|
|
|
|
// Optional: wire desktop Book a Visit to the same booking action as mobile
|
|
if (desktopBook && mobileBook) {
|
|
desktopBook.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
// mimic mobile behavior for demo: show alert (replace with real action)
|
|
alert('Book a Visit clicked — open booking flow here.');
|
|
});
|
|
mobileBook.addEventListener('click', (e) => {
|
|
// mobile link closes menu via handler above and then can navigate or open booking flow
|
|
// if you want to override, uncomment below
|
|
// e.preventDefault(); alert('Mobile Book clicked (replace with action).');
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
$('#pageLoader').hide();
|
|
|
|
let confirmrefid = sessionStorage.getItem("confirmrefid");
|
|
|
|
if (!confirmrefid) {
|
|
window.location.href = "/victoriapublichall/register";
|
|
}
|
|
sessionStorage.removeItem("confirmrefid");
|
|
|
|
// Fetch booking details
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/victoriapublichall/bookingapi/getdetailsbyrefid",
|
|
data: { confirmrefid: confirmrefid },
|
|
|
|
success: function (response) {
|
|
|
|
// ===== Populate summary card =====
|
|
$("#confirmDate").text(formatDateToLong(response.visitingDate));
|
|
$("#confirmRange").text(response.timeRange || "--");
|
|
$("#confirmPeople").text(
|
|
response.no_of_people ? response.no_of_people.toString().padStart(2, "0") : "00"
|
|
);
|
|
|
|
// ===== Populate AV Experience =====
|
|
const list = $("#confirmAvList");
|
|
list.empty(); // clear old rows
|
|
|
|
if (!response.allocatedSlots || response.allocatedSlots.length === 0) {
|
|
list.append(`
|
|
<div class="av-row">
|
|
<div class="av-time">No slots allocated</div>
|
|
</div>
|
|
`);
|
|
} else {
|
|
response.allocatedSlots.forEach(s => {
|
|
list.append(`
|
|
<div class="av-row">
|
|
<div class="av-time">${s.time} (${s.language})</div>
|
|
<div class="av-seats">${s.people} Seat${s.people > 1 ? "s" : ""}</div>
|
|
</div>
|
|
`);
|
|
});
|
|
}
|
|
},
|
|
|
|
error: function (xhr) {
|
|
Swal.fire({
|
|
icon: "error",
|
|
title: "Unable to load booking details",
|
|
text: xhr.responseText || "Please try again.",
|
|
confirmButtonText: "OK"
|
|
}).then(() => {
|
|
window.location.href = "/victoriapublichall/register";
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
});
|
|
|
|
function formatDateToLong(dateStr) {
|
|
if (!dateStr) return "--";
|
|
|
|
const [dd, mm, yyyy] = dateStr.split("-");
|
|
|
|
const months = [
|
|
"JAN", "FEB", "MAR", "APR", "MAY", "JUN",
|
|
"JUL", "AUG", "SEP", "OCT", "NOV", "DEC"
|
|
];
|
|
|
|
return `${dd}, ${months[parseInt(mm) - 1]} ${yyyy}`;
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
// Replace '/your/specified/path' with the page you want to redirect to
|
|
const redirectPath = '/victoriapublichall/register';
|
|
// This runs when the user presses the browser's back button
|
|
window.addEventListener('popstate', function (event) {
|
|
|
|
window.location.href = redirectPath;
|
|
|
|
});
|
|
// Push a dummy state so that the popstate event triggers properly
|
|
history.pushState(null, null, location.href);
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|