|
|
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Victoria Public Hall</title> <base th:href="${baseURL}" /> <link rel="icon" th:href="@{files/assets/images/favicon.png}" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style> * { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Georgia', serif; overflow-x: hidden; }
/* ================= NAVBAR DESKTOP ================= */ .navbar { position: absolute; top: 0; width: 100%; padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; z-index: 999; }
.nav-left { display: flex; align-items: center; gap: 20px; }
.logo { height: 120px; padding-left: 50%; }
.nav-menu { display: flex; align-items: center; gap: 25px; padding-left: 12%; }
.nav-menu a { color: white; font-size: 18px; text-decoration: none; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.hamburger span { width: 28px; height: 3px; background: white; transition: 0.3s; }
@media (min-width: 768px) { #registerbutton { display: none; }
}
/* ================= MOBILE NAV ================= */ @media (max-width: 768px) {
.logo { height: 45px; }
.desktop-book { display: none; }
#registerbutton { display: block; margin-top: 25px; margin-left: 30%; font-size: 16px; padding: 9px 18px; border: 1px solid #fff; background: inherit; color: #fff; cursor: pointer; transition: 0.3s; font-style: italic; font-family: Playfair; }
#registerbutton:active { background: #fff; color: #222; }
.hamburger { display: flex; }
.nav-menu { position: absolute; top: 75px; left: 0; width: 100%; background: transparent; backdrop-filter: blur(10px); padding: 20px 0; flex-direction: column; gap: 15px; display: none; }
.nav-menu a { font-size: 20px; color: white; }
.nav-menu.active { display: flex; }
.mobile-book { display: block; margin-top: 10px; font-size: 18px; } }
/* HERO SECTION */ .hero {
height: 87vh; /* big enough to show top + bottom */ width: 100%; background: url('/victoriapublichall/images/vph-plan-to-visit.jpg') no-repeat; background-size: cover; background-position: center 55%; /* fine tuning */ /* PERFECT for this image */
display: flex; align-items: center; padding-left: 80px; color: #f6e7b0; }
.hero h1 { font-size: 70px; font-weight: 400; line-height: 1.1; font-family: 'Inter', sans-serif;
}
.hero p { font-size: 70px; font-weight: 400; margin-top: 15px; font-family: 'Playfair Display', serif; color: #F0E4AF; }
/* Button */ .visit-btn { margin-top: 25px; font-size: 22px; padding: 12px 32px; border: 1px solid #fff; background: inherit; color: #fff; cursor: pointer; transition: 0.3s; font-style: italic; font-family: "Playfair"; font-weight: 700;
}
.visit-btn:hover { background: #fff; color: #222; }
/* CONTENT SECTIONS */ section { padding: 80px 100px; }
/* start guidlines section */
.baimages { padding: 70px 40px; background: #f9f7f2; }
.guidelines-container { max-width: 1200px; margin: auto; display: flex; gap: 50px; align-items: stretch; position: relative; }
/* Left side */ .left-side { flex: 1; }
.visit-title { font-family: "Playfair Display", serif; font-weight: 400; font-size: 58px; color: #3C1E12; margin-bottom: 20px; padding-left: 1%;
}
.visit-list { list-style: none; padding-left: 0; margin: 0; font-family: "Inter", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.55; color: #3C1E12; }
.visit-list li { margin-bottom: 12px; position: relative; padding-left: 22px; }
.visit-list li::before { content: "•"; /*position: absolute;*/ left: 113px; top: 676px; font-size: 26px; line-height: 12px; color: #4c2f23; margin-right: 15px; }
/* The divider automatically becomes full height */ .divider { width: 2px; background: #383735; opacity: 0.7; }
/* RIGHT CARD EXACT LOOK */ .right-side { width: 380px; /* EXACT width (your screenshot: 379px) */ min-height: 343px; /* approx screenshot height */ padding: 25px 28px;
}
.right-side h3 { font-weight: 400; font-size: 32px; font-family: "Playfair Display", serif; color: #4E0C0C; }
/* Hours & Tickets Title Row */ .icon-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.icon-title i { font-size: 28px; color: #4c2f23; }
.icon-title h3 { font-family: "Playfair Display", serif; font-size: 24px; color: #4c2f23; font-weight: 400; }
/* Text elements */ .days { font-family: "Inter", sans-serif; font-size: 36px; font-weight: 400; color: #000000; }
.timings { font-family: "Inter", sans-serif; font-size: 32px; font-weight: 600; margin: 8px 0 6px 0; color: #000; }
.closed-text { color: #EB3939; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 400; margin-bottom: 15px; }
.ticket-subtitle { font-family: "Inter", sans-serif; color: #4E0C0C; font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.ticket-list li { margin-left: 20px; margin-bottom: 8px; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 400; color: #000000; }
/* Book Button */ .book-btn { margin-top: 12px; display: inline-block; padding: 7px 22px; border: 1px solid rgba(78, 12, 12, 1);
font-family: "Playfair", serif; font-size: 16px; font-weight: 700; color: #4E0C0C; text-decoration: none; }
/* end guideline section*/
/* start the third section */
.visit-box { background: #F2F5ED; padding: 0; margin: 0; }
/* Two Column Container */ .visit-container { max-width: 1800px; margin: auto; display: flex; height: 250px; }
/* LEFT PANEL */ .visit-left { width: 30%; background: #F2F5ED; padding-top: 40px; padding-left: 10%; }
.visit-icon-title { display: flex; align-items: center; gap: 10px; }
.visit-icon-title i { font-size: 28px; color: #4C2F23; }
.visit-icon-title h3 { font-family: "Playfair Display", serif; color: #4C2F23; font-size: 26px; font-weight: 400; }
.visit-address-text { margin-top: 20px; font-family: "Inter", sans-serif; font-size: 16px; color: #3C1E12; line-height: 1.6; }
/* Google Maps Button */ .visit-map-btn { display: inline-block; margin-top: 25px; padding: 10px 22px; font-family: "Playfair Display", serif; font-style: italic; font-size: 16px; color: #4C2F23; border: 2px solid #4C2F23; border-radius: 6px; text-decoration: none; }
/* RIGHT PANEL */ .visit-right { width: 70%; background: #04405C; /* EXACT DARK BLUE */ padding: 45px 40px; color: #ffffff; }
.visit-right-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.visit-right-title i { font-size: 32px; color: #ffffff; }
.visit-right-title span { font-family: "Playfair", serif; font-size: 32px; font-weight: 400; }
/* Bullet List */ .visit-right-list { font-family: "Inter", sans-serif; font-weight: 400; list-style: none; padding: 0; margin: 0; }
.visit-right-list li { /*display: flex;*/ /*align-items: flex-start;*/ margin-bottom: 14px; font-size: 18px; line-height: 1.5; padding-left: 25px; /*position: relative;*/ }
.visit-right-list li::before { content: "•"; left: 435px; top: 1220px; font-size: 24px; margin-right: 10px; color: #CDE6D9; }
/* end the third section */
/* start Info Cards Section */
.info-cards-section { width: 100%; padding: 40px 0px; }
.amenities-title { font-family: "Playfair Display", serif; font-weight: 400; font-size: 64px; color: #3C1E12; text-align: center; margin-bottom: 40px; }
.row { display: flex; justify-content: center; gap: 25px; margin-bottom: 30px; }
/* Colors */ .red { background: #67181B; }
.olive { background: #5A6135; }
.teal { background: #2E4B49; }
.dark-blue { background: #023F5A; }
.fixed-card { width: 300px; padding: 35px 30px; color: white; min-height: 150px;
}
.fixed-card img {
width: 40px; height: 50px; margin-bottom: 15px; padding-bottom: 5px;
}
.fixed-card h3 {
font-weight: 400; font-size: 24px; font-family: "Playfair Display", serif; margin-bottom: 10px;
}
/* end Info Cards Section */
/* scroll top icon */
.scroll-top { position: fixed; bottom: 25px; right: 25px; width: 50px; height: 50px; background: #0A3A52; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; opacity: 0; visibility: hidden; z-index: 9999; transition: 0.4s ease; box-shadow: 0 0 0 rgba(0, 0, 0, 0.4); animation: none; }
/* Show animation */ .scroll-top.show { opacity: 1; visibility: visible; animation: bounceIn 0.8s ease forwards; }
/* Hover animation */ .scroll-top:hover { transform: translateY(-5px) scale(1.1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
/* Simple glowing pulse animation */ @keyframes bounceIn { 0% { transform: scale(0.5) translateY(30px); opacity: 0; }
60% { transform: scale(1.1) translateY(-10px); opacity: 1; }
100% { transform: scale(1) translateY(0); } }
/* Optional smooth glowing effect */ .scroll-top.show { animation: bounceIn 0.6s ease forwards, pulseGlow 2s infinite ease-in-out; }
@keyframes pulseGlow { 0% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
50% { box-shadow: 0 0 25px rgba(255, 255, 255, 0.6); }
100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); } }
/* mobile responsive style */
/* ========================================= */ /* MOBILE RESPONSIVE FIXES */ /* ========================================= */
@media (max-width: 768px) {
/* GLOBAL SPACING FIX */ section, .baimages, .visit-box, .info-cards-section { padding: 40px 20px !important; }
/* ================= HERO ================= */ .hero { height: 35vh; padding-left: 20px; background-position: center center !important; }
.hero h1 { font-size: 38px; line-height: 1.2; }
.hero p { font-size: 32px; margin-top: 10px; }
.visit-btn { font-size: 16px; padding: 10px 24px; }
/* ============= GUIDELINES SECTION ============= */ .guidelines-container { flex-direction: column; gap: 30px; text-align: left; }
.visit-title { font-size: 42px; }
.visit-list li { font-size: 14px; padding-left: 20px; }
.visit-list li::before { left: 0 !important; top: 0 !important; position: absolute; }
.divider { display: none; }
.right-side { width: 100%; padding: 20px;
border-radius: 10px; }
.days { font-size: 26px; }
.timings { font-size: 22px; }
/* ============= TWO-COLUMN (Visit Box) ============= */ .visit-container { flex-direction: column; height: auto; }
.visit-left, .visit-right { width: 100%; padding: 30px 20px; }
.visit-right-title span { font-size: 26px; }
.visit-right-list li { font-size: 15px; padding-left: 18px; }
.visit-right-list li::before { left: 0 !important; top: 0 !important; position: absolute; }
/* ============= INFO CARDS SECTION ============= */ .amenities-title { font-size: 42px; margin-bottom: 25px; }
.row { flex-wrap: wrap; gap: 15px; }
.fixed-card { width: 100%; max-width: 330px; margin: auto; padding: 25px 20px; }
.fixed-card img { width: 35px; height: 42px; }
.fixed-card h3 { font-size: 20px; }
/* ============= NAVBAR MOBILE FIX ============= */ .navbar { padding: 12px 20px; }
.nav-menu { top: 60px; padding: 15px 0; }
.nav-menu a { font-size: 18px; }
#registerbutton { margin-left: 0; margin-top: 20px; }
/* ============= SCROLL TOP ICON ============= */ .scroll-top { width: 45px; height: 45px; font-size: 20px; bottom: 20px; right: 20px; } } </style>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar"> <div class="nav-left"> <img th:src="@{images/VPH-logo_main-EN 1.png}" alt="VPH logo" class="logo">
</div>
<div class="nav-menu" id="navMenu"> <a href="/victoriapublichall/home">Home</a> <!-- <a href="/victoriapublichall/visit">Planning to Visit</a>--> <a href="#contact">Contact Us</a>
</div>
<button class="visit-btn desktop-book" id="registerbtn">Book a Visit</button>
<div class="hamburger" id="hamburger"> <span></span> <span></span> <span></span> </div> </nav>
<!-- HERO SECTION --> <div class="hero"> <div> <!-- <img src="/images/text.svg" alt="VPH Logo" class="hero-logo" style="color: #F0E4AF"> --> <p>Plan your visit</p> <button id="registerbutton">Book a Visit</button> </div> </div>
<section class="baimages"> <div class="guidelines-container">
<!-- LEFT SIDE --> <div class="left-side"> <h2 class="visit-title">Visitor Guidelines</h2> <ul class="visit-list"> <li>Photography and videography are prohibited inside the Town Hall.</li> <li>Food and beverages are prohibited inside the Town Hall.</li> <li>Ensure you have your Aadhaar card and booking receipt for entry.</li> <li>Please arrive 15 minutes before your scheduled time.</li> <li>Visitors are advised to bring their own water bottles and avoid plastic usage in the campus. </li> </ul> </div>
<div class="divider"></div>
<!-- RIGHT SIDE --> <div class="right-side"> <div class="icon-title"> <div class="icon"><i class="fa-solid fa-ticket"></i></div> <h3>Hours & Tickets</h3> </div>
<p class="days">Sunday - Saturday</p> <p class="timings">8AM to 6PM</p> <p class="closed-text">Tuesday: Victoria Public Hall is closed</p>
<h4 class="ticket-subtitle">Tickets</h4> <ul class="ticket-list"> <li>Tickets are available online only</li> </ul>
<a class="book-btn" href="/victoriapublichall/register">Book a Visit</a> </div> </div> </section>
<section class="visit-box"> <div class="visit-container">
<!-- LEFT SIDE --> <div class="visit-left"> <div class="visit-icon-title"> <i class="fa-solid fa-route"></i> <h3>Getting Here</h3> </div>
<p class="visit-address-text"> Beside Ripon Buildings<br> EVR Periyar Salai<br> Chennai - 600 003 </p>
<a class="visit-map-btn" target="_blank" href="https://maps.app.goo.gl/vgoEuimqRLXMgHzB7?g_st=ipc"> Open in Google Maps </a> </div>
<!-- RIGHT SIDE --> <div class="visit-right"> <div class="visit-right-title"> <i class="fa-solid fa-users"></i> <span>Group Visits</span> </div>
<ul class="visit-right-list"> <li>Open to Schools, Colleges, Organizations, Corporate Teams and Other Groups.</li> <li>School and college students are required to wear their ID cards during the visit.</li> </ul> </div>
</div> </section>
<section class="info-cards-section">
<h2 class="amenities-title">Amenities</h2>
<div class="row"> <div class="card red fixed-card"> <img th:src="@{images/zone_activity.svg}" alt="zone_activity"> <h3>Activity zones</h3>
</div>
<div class="card olive fixed-card"> <img th:src="@{images/water-closet.svg}" alt="water_closet"> <h3>Restrooms</h3>
</div>
<div class="card teal fixed-card"> <img th:src="@{images/elevator.svg}" alt="elevator"> <h3>Elevators</h3>
</div>
<div class="card dark-blue fixed-card"> <img th:src="@{images/coffee-cup.svg}" alt="coffee_cup"> <h3>Cafe</h3>
</div> </div>
</section>
<div class="scroll-top" onclick="scrollToTop()"> <i class="fa-solid fa-arrow-up"></i> </div>
<!--Footer--> <footer class="text-center text-white" style="background-color:rgb(21,69,93); font-size: medium"> <!-- Grid container --> <div class="container p-2"> <!-- Section: Text --> <section style="text-align: center;color: white"> <p> Victoria Public Hall Registration © <span style="color: white;" data-toggle="year-copy"></span>Greater Chennai Corporation </p>
</section> <!-- Section: Text --> </div> <!-- Grid container --> </footer>
<script>
function toggleMenu() { document.getElementById("mobileMenu").classList.toggle("active"); }
document.querySelectorAll('#mobileMenu a').forEach(link => { link.addEventListener('click', () => { document.getElementById("mobileMenu").classList.remove("active"); }); });
document.getElementById("hamburger").addEventListener("click", function () { document.getElementById("navMenu").classList.toggle("active"); });
let scrollHandler = null;
function initScrollSync() { const textBlocks = document.querySelectorAll('.text-block'); const images = document.querySelectorAll('.sticky-img');
scrollHandler = () => { let activeIndex = 0; const windowHeight = window.innerHeight;
textBlocks.forEach((block, index) => { const rect = block.getBoundingClientRect(); if (rect.top <= windowHeight * 0.5 && rect.bottom >= windowHeight * 0.5) { activeIndex = index; } });
images.forEach((img, idx) => { img.classList.toggle('active', idx === activeIndex); });
textBlocks.forEach((block, idx) => { block.classList.toggle('active', idx === activeIndex); }); };
window.addEventListener("scroll", scrollHandler); scrollHandler(); }
function destroyScrollSync() { if (scrollHandler) { window.removeEventListener("scroll", scrollHandler); } }
function setupMobileBlocks() { const textBlocks = document.querySelectorAll(".text-block"); const images = document.querySelectorAll(".sticky-img");
if (window.innerWidth <= 1024) {
destroyScrollSync(); // disable desktop scroll sync
textBlocks.forEach((block, index) => {
// already added → skip if (block.querySelector(".mobile-img")) return;
const wrapper = document.createElement("div"); wrapper.classList.add("mobile-img");
const img = document.createElement("img"); img.src = images[index].src;
wrapper.appendChild(img); block.prepend(wrapper); });
} else {
// Remove mobile images when returning to desktop document.querySelectorAll(".mobile-img").forEach(el => el.remove());
// Enable scroll sync again initScrollSync(); } }
let resizeTimer; window.addEventListener("resize", () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { setupMobileBlocks(); }, 150); });
function scrollToTop() { window.scrollTo({ top: 0, behavior: "smooth" }); }
window.addEventListener("scroll", () => { const scrollBtn = document.querySelector(".scroll-top"); if (window.scrollY > 300) { scrollBtn.classList.add("show"); } else { scrollBtn.classList.remove("show"); } });
document.getElementById("registerbtn")?.addEventListener("click", function () { window.location.href = "/victoriapublichall/register"; });
document.getElementById("registerbutton")?.addEventListener("click", function () { window.location.href = "/victoriapublichall/register"; });
setupMobileBlocks();
</script>
</body>
</html>
|