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
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 © <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>
|