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.
 
 
 
 
 

1143 lines
28 KiB

<!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 &copy; <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>