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.

1142 lines
28 KiB

6 days ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Victoria Public Hall</title>
  7. <base th:href="${baseURL}" />
  8. <link rel="icon" th:href="@{files/assets/images/favicon.png}" type="image/x-icon">
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  10. <style>
  11. * {
  12. margin: 0;
  13. padding: 0;
  14. box-sizing: border-box;
  15. }
  16. body {
  17. font-family: 'Georgia', serif;
  18. overflow-x: hidden;
  19. }
  20. /* ================= NAVBAR DESKTOP ================= */
  21. .navbar {
  22. position: absolute;
  23. top: 0;
  24. width: 100%;
  25. padding: 20px 40px;
  26. display: flex;
  27. align-items: center;
  28. justify-content: space-between;
  29. z-index: 999;
  30. }
  31. .nav-left {
  32. display: flex;
  33. align-items: center;
  34. gap: 20px;
  35. }
  36. .logo {
  37. height: 120px;
  38. padding-left: 50%;
  39. }
  40. .nav-menu {
  41. display: flex;
  42. align-items: center;
  43. gap: 25px;
  44. padding-left: 12%;
  45. }
  46. .nav-menu a {
  47. color: white;
  48. font-size: 18px;
  49. text-decoration: none;
  50. }
  51. .hamburger {
  52. display: none;
  53. flex-direction: column;
  54. gap: 5px;
  55. cursor: pointer;
  56. }
  57. .hamburger span {
  58. width: 28px;
  59. height: 3px;
  60. background: white;
  61. transition: 0.3s;
  62. }
  63. @media (min-width: 768px) {
  64. #registerbutton {
  65. display: none;
  66. }
  67. }
  68. /* ================= MOBILE NAV ================= */
  69. @media (max-width: 768px) {
  70. .logo {
  71. height: 45px;
  72. }
  73. .desktop-book {
  74. display: none;
  75. }
  76. #registerbutton {
  77. display: block;
  78. margin-top: 25px;
  79. margin-left: 30%;
  80. font-size: 16px;
  81. padding: 9px 18px;
  82. border: 1px solid #fff;
  83. background: inherit;
  84. color: #fff;
  85. cursor: pointer;
  86. transition: 0.3s;
  87. font-style: italic;
  88. font-family: Playfair;
  89. }
  90. #registerbutton:active {
  91. background: #fff;
  92. color: #222;
  93. }
  94. .hamburger {
  95. display: flex;
  96. }
  97. .nav-menu {
  98. position: absolute;
  99. top: 75px;
  100. left: 0;
  101. width: 100%;
  102. background: transparent;
  103. backdrop-filter: blur(10px);
  104. padding: 20px 0;
  105. flex-direction: column;
  106. gap: 15px;
  107. display: none;
  108. }
  109. .nav-menu a {
  110. font-size: 20px;
  111. color: white;
  112. }
  113. .nav-menu.active {
  114. display: flex;
  115. }
  116. .mobile-book {
  117. display: block;
  118. margin-top: 10px;
  119. font-size: 18px;
  120. }
  121. }
  122. /* HERO SECTION */
  123. .hero {
  124. height: 87vh;
  125. /* big enough to show top + bottom */
  126. width: 100%;
  127. background: url('/victoriapublichall/images/vph-plan-to-visit.jpg') no-repeat;
  128. background-size: cover;
  129. background-position: center 55%;
  130. /* fine tuning */
  131. /* PERFECT for this image */
  132. display: flex;
  133. align-items: center;
  134. padding-left: 80px;
  135. color: #f6e7b0;
  136. }
  137. .hero h1 {
  138. font-size: 70px;
  139. font-weight: 400;
  140. line-height: 1.1;
  141. font-family: 'Inter', sans-serif;
  142. }
  143. .hero p {
  144. font-size: 70px;
  145. font-weight: 400;
  146. margin-top: 15px;
  147. font-family: 'Playfair Display', serif;
  148. color: #F0E4AF;
  149. }
  150. /* Button */
  151. .visit-btn {
  152. margin-top: 25px;
  153. font-size: 22px;
  154. padding: 12px 32px;
  155. border: 1px solid #fff;
  156. background: inherit;
  157. color: #fff;
  158. cursor: pointer;
  159. transition: 0.3s;
  160. font-style: italic;
  161. font-family: "Playfair";
  162. font-weight: 700;
  163. }
  164. .visit-btn:hover {
  165. background: #fff;
  166. color: #222;
  167. }
  168. /* CONTENT SECTIONS */
  169. section {
  170. padding: 80px 100px;
  171. }
  172. /* start guidlines section */
  173. .baimages {
  174. padding: 70px 40px;
  175. background: #f9f7f2;
  176. }
  177. .guidelines-container {
  178. max-width: 1200px;
  179. margin: auto;
  180. display: flex;
  181. gap: 50px;
  182. align-items: stretch;
  183. position: relative;
  184. }
  185. /* Left side */
  186. .left-side {
  187. flex: 1;
  188. }
  189. .visit-title {
  190. font-family: "Playfair Display", serif;
  191. font-weight: 400;
  192. font-size: 58px;
  193. color: #3C1E12;
  194. margin-bottom: 20px;
  195. padding-left: 1%;
  196. }
  197. .visit-list {
  198. list-style: none;
  199. padding-left: 0;
  200. margin: 0;
  201. font-family: "Inter", sans-serif;
  202. font-weight: 400;
  203. font-size: 16px;
  204. line-height: 1.55;
  205. color: #3C1E12;
  206. }
  207. .visit-list li {
  208. margin-bottom: 12px;
  209. position: relative;
  210. padding-left: 22px;
  211. }
  212. .visit-list li::before {
  213. content: "•";
  214. /*position: absolute;*/
  215. left: 113px;
  216. top: 676px;
  217. font-size: 26px;
  218. line-height: 12px;
  219. color: #4c2f23;
  220. margin-right: 15px;
  221. }
  222. /* The divider automatically becomes full height */
  223. .divider {
  224. width: 2px;
  225. background: #383735;
  226. opacity: 0.7;
  227. }
  228. /* RIGHT CARD EXACT LOOK */
  229. .right-side {
  230. width: 380px;
  231. /* EXACT width (your screenshot: 379px) */
  232. min-height: 343px;
  233. /* approx screenshot height */
  234. padding: 25px 28px;
  235. }
  236. .right-side h3 {
  237. font-weight: 400;
  238. font-size: 32px;
  239. font-family: "Playfair Display", serif;
  240. color: #4E0C0C;
  241. }
  242. /* Hours & Tickets Title Row */
  243. .icon-title {
  244. display: flex;
  245. align-items: center;
  246. gap: 10px;
  247. margin-bottom: 12px;
  248. }
  249. .icon-title i {
  250. font-size: 28px;
  251. color: #4c2f23;
  252. }
  253. .icon-title h3 {
  254. font-family: "Playfair Display", serif;
  255. font-size: 24px;
  256. color: #4c2f23;
  257. font-weight: 400;
  258. }
  259. /* Text elements */
  260. .days {
  261. font-family: "Inter", sans-serif;
  262. font-size: 36px;
  263. font-weight: 400;
  264. color: #000000;
  265. }
  266. .timings {
  267. font-family: "Inter", sans-serif;
  268. font-size: 32px;
  269. font-weight: 600;
  270. margin: 8px 0 6px 0;
  271. color: #000;
  272. }
  273. .closed-text {
  274. color: #EB3939;
  275. font-family: "Inter", sans-serif;
  276. font-size: 16px;
  277. font-weight: 400;
  278. margin-bottom: 15px;
  279. }
  280. .ticket-subtitle {
  281. font-family: "Inter", sans-serif;
  282. color: #4E0C0C;
  283. font-size: 20px;
  284. font-weight: 600;
  285. margin-bottom: 8px;
  286. }
  287. .ticket-list li {
  288. margin-left: 20px;
  289. margin-bottom: 8px;
  290. font-family: "Inter", sans-serif;
  291. font-size: 16px;
  292. font-weight: 400;
  293. color: #000000;
  294. }
  295. /* Book Button */
  296. .book-btn {
  297. margin-top: 12px;
  298. display: inline-block;
  299. padding: 7px 22px;
  300. border: 1px solid rgba(78, 12, 12, 1);
  301. font-family: "Playfair", serif;
  302. font-size: 16px;
  303. font-weight: 700;
  304. color: #4E0C0C;
  305. text-decoration: none;
  306. }
  307. /* end guideline section*/
  308. /* start the third section */
  309. .visit-box {
  310. background: #F2F5ED;
  311. padding: 0;
  312. margin: 0;
  313. }
  314. /* Two Column Container */
  315. .visit-container {
  316. max-width: 1800px;
  317. margin: auto;
  318. display: flex;
  319. height: 250px;
  320. }
  321. /* LEFT PANEL */
  322. .visit-left {
  323. width: 30%;
  324. background: #F2F5ED;
  325. padding-top: 40px;
  326. padding-left: 10%;
  327. }
  328. .visit-icon-title {
  329. display: flex;
  330. align-items: center;
  331. gap: 10px;
  332. }
  333. .visit-icon-title i {
  334. font-size: 28px;
  335. color: #4C2F23;
  336. }
  337. .visit-icon-title h3 {
  338. font-family: "Playfair Display", serif;
  339. color: #4C2F23;
  340. font-size: 26px;
  341. font-weight: 400;
  342. }
  343. .visit-address-text {
  344. margin-top: 20px;
  345. font-family: "Inter", sans-serif;
  346. font-size: 16px;
  347. color: #3C1E12;
  348. line-height: 1.6;
  349. }
  350. /* Google Maps Button */
  351. .visit-map-btn {
  352. display: inline-block;
  353. margin-top: 25px;
  354. padding: 10px 22px;
  355. font-family: "Playfair Display", serif;
  356. font-style: italic;
  357. font-size: 16px;
  358. color: #4C2F23;
  359. border: 2px solid #4C2F23;
  360. border-radius: 6px;
  361. text-decoration: none;
  362. }
  363. /* RIGHT PANEL */
  364. .visit-right {
  365. width: 70%;
  366. background: #04405C;
  367. /* EXACT DARK BLUE */
  368. padding: 45px 40px;
  369. color: #ffffff;
  370. }
  371. .visit-right-title {
  372. display: flex;
  373. align-items: center;
  374. gap: 12px;
  375. margin-bottom: 18px;
  376. }
  377. .visit-right-title i {
  378. font-size: 32px;
  379. color: #ffffff;
  380. }
  381. .visit-right-title span {
  382. font-family: "Playfair", serif;
  383. font-size: 32px;
  384. font-weight: 400;
  385. }
  386. /* Bullet List */
  387. .visit-right-list {
  388. font-family: "Inter", sans-serif;
  389. font-weight: 400;
  390. list-style: none;
  391. padding: 0;
  392. margin: 0;
  393. }
  394. .visit-right-list li {
  395. /*display: flex;*/
  396. /*align-items: flex-start;*/
  397. margin-bottom: 14px;
  398. font-size: 18px;
  399. line-height: 1.5;
  400. padding-left: 25px;
  401. /*position: relative;*/
  402. }
  403. .visit-right-list li::before {
  404. content: "•";
  405. left: 435px;
  406. top: 1220px;
  407. font-size: 24px;
  408. margin-right: 10px;
  409. color: #CDE6D9;
  410. }
  411. /* end the third section */
  412. /* start Info Cards Section */
  413. .info-cards-section {
  414. width: 100%;
  415. padding: 40px 0px;
  416. }
  417. .amenities-title {
  418. font-family: "Playfair Display", serif;
  419. font-weight: 400;
  420. font-size: 64px;
  421. color: #3C1E12;
  422. text-align: center;
  423. margin-bottom: 40px;
  424. }
  425. .row {
  426. display: flex;
  427. justify-content: center;
  428. gap: 25px;
  429. margin-bottom: 30px;
  430. }
  431. /* Colors */
  432. .red {
  433. background: #67181B;
  434. }
  435. .olive {
  436. background: #5A6135;
  437. }
  438. .teal {
  439. background: #2E4B49;
  440. }
  441. .dark-blue {
  442. background: #023F5A;
  443. }
  444. .fixed-card {
  445. width: 300px;
  446. padding: 35px 30px;
  447. color: white;
  448. min-height: 150px;
  449. }
  450. .fixed-card img {
  451. width: 40px;
  452. height: 50px;
  453. margin-bottom: 15px;
  454. padding-bottom: 5px;
  455. }
  456. .fixed-card h3 {
  457. font-weight: 400;
  458. font-size: 24px;
  459. font-family: "Playfair Display", serif;
  460. margin-bottom: 10px;
  461. }
  462. /* end Info Cards Section */
  463. /* scroll top icon */
  464. .scroll-top {
  465. position: fixed;
  466. bottom: 25px;
  467. right: 25px;
  468. width: 50px;
  469. height: 50px;
  470. background: #0A3A52;
  471. color: #fff;
  472. border-radius: 50%;
  473. display: flex;
  474. align-items: center;
  475. justify-content: center;
  476. font-size: 22px;
  477. cursor: pointer;
  478. opacity: 0;
  479. visibility: hidden;
  480. z-index: 9999;
  481. transition: 0.4s ease;
  482. box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
  483. animation: none;
  484. }
  485. /* Show animation */
  486. .scroll-top.show {
  487. opacity: 1;
  488. visibility: visible;
  489. animation: bounceIn 0.8s ease forwards;
  490. }
  491. /* Hover animation */
  492. .scroll-top:hover {
  493. transform: translateY(-5px) scale(1.1);
  494. box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  495. }
  496. /* Simple glowing pulse animation */
  497. @keyframes bounceIn {
  498. 0% {
  499. transform: scale(0.5) translateY(30px);
  500. opacity: 0;
  501. }
  502. 60% {
  503. transform: scale(1.1) translateY(-10px);
  504. opacity: 1;
  505. }
  506. 100% {
  507. transform: scale(1) translateY(0);
  508. }
  509. }
  510. /* Optional smooth glowing effect */
  511. .scroll-top.show {
  512. animation: bounceIn 0.6s ease forwards, pulseGlow 2s infinite ease-in-out;
  513. }
  514. @keyframes pulseGlow {
  515. 0% {
  516. box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  517. }
  518. 50% {
  519. box-shadow: 0 0 25px rgba(255, 255, 255, 0.6);
  520. }
  521. 100% {
  522. box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  523. }
  524. }
  525. /* mobile responsive style */
  526. /* ========================================= */
  527. /* MOBILE RESPONSIVE FIXES */
  528. /* ========================================= */
  529. @media (max-width: 768px) {
  530. /* GLOBAL SPACING FIX */
  531. section,
  532. .baimages,
  533. .visit-box,
  534. .info-cards-section {
  535. padding: 40px 20px !important;
  536. }
  537. /* ================= HERO ================= */
  538. .hero {
  539. height: 35vh;
  540. padding-left: 20px;
  541. background-position: center center !important;
  542. }
  543. .hero h1 {
  544. font-size: 38px;
  545. line-height: 1.2;
  546. }
  547. .hero p {
  548. font-size: 32px;
  549. margin-top: 10px;
  550. }
  551. .visit-btn {
  552. font-size: 16px;
  553. padding: 10px 24px;
  554. }
  555. /* ============= GUIDELINES SECTION ============= */
  556. .guidelines-container {
  557. flex-direction: column;
  558. gap: 30px;
  559. text-align: left;
  560. }
  561. .visit-title {
  562. font-size: 42px;
  563. }
  564. .visit-list li {
  565. font-size: 14px;
  566. padding-left: 20px;
  567. }
  568. .visit-list li::before {
  569. left: 0 !important;
  570. top: 0 !important;
  571. position: absolute;
  572. }
  573. .divider {
  574. display: none;
  575. }
  576. .right-side {
  577. width: 100%;
  578. padding: 20px;
  579. border-radius: 10px;
  580. }
  581. .days {
  582. font-size: 26px;
  583. }
  584. .timings {
  585. font-size: 22px;
  586. }
  587. /* ============= TWO-COLUMN (Visit Box) ============= */
  588. .visit-container {
  589. flex-direction: column;
  590. height: auto;
  591. }
  592. .visit-left,
  593. .visit-right {
  594. width: 100%;
  595. padding: 30px 20px;
  596. }
  597. .visit-right-title span {
  598. font-size: 26px;
  599. }
  600. .visit-right-list li {
  601. font-size: 15px;
  602. padding-left: 18px;
  603. }
  604. .visit-right-list li::before {
  605. left: 0 !important;
  606. top: 0 !important;
  607. position: absolute;
  608. }
  609. /* ============= INFO CARDS SECTION ============= */
  610. .amenities-title {
  611. font-size: 42px;
  612. margin-bottom: 25px;
  613. }
  614. .row {
  615. flex-wrap: wrap;
  616. gap: 15px;
  617. }
  618. .fixed-card {
  619. width: 100%;
  620. max-width: 330px;
  621. margin: auto;
  622. padding: 25px 20px;
  623. }
  624. .fixed-card img {
  625. width: 35px;
  626. height: 42px;
  627. }
  628. .fixed-card h3 {
  629. font-size: 20px;
  630. }
  631. /* ============= NAVBAR MOBILE FIX ============= */
  632. .navbar {
  633. padding: 12px 20px;
  634. }
  635. .nav-menu {
  636. top: 60px;
  637. padding: 15px 0;
  638. }
  639. .nav-menu a {
  640. font-size: 18px;
  641. }
  642. #registerbutton {
  643. margin-left: 0;
  644. margin-top: 20px;
  645. }
  646. /* ============= SCROLL TOP ICON ============= */
  647. .scroll-top {
  648. width: 45px;
  649. height: 45px;
  650. font-size: 20px;
  651. bottom: 20px;
  652. right: 20px;
  653. }
  654. }
  655. </style>
  656. </head>
  657. <body>
  658. <!-- NAVBAR -->
  659. <nav class="navbar">
  660. <div class="nav-left">
  661. <img th:src="@{images/VPH-logo_main-EN 1.png}" alt="VPH logo" class="logo">
  662. </div>
  663. <div class="nav-menu" id="navMenu">
  664. <a href="/victoriapublichall/home">Home</a>
  665. <!-- <a href="/victoriapublichall/visit">Planning to Visit</a>-->
  666. <a href="#contact">Contact Us</a>
  667. </div>
  668. <button class="visit-btn desktop-book" id="registerbtn">Book a Visit</button>
  669. <div class="hamburger" id="hamburger">
  670. <span></span>
  671. <span></span>
  672. <span></span>
  673. </div>
  674. </nav>
  675. <!-- HERO SECTION -->
  676. <div class="hero">
  677. <div>
  678. <!-- <img src="/images/text.svg" alt="VPH Logo" class="hero-logo" style="color: #F0E4AF"> -->
  679. <p>Plan your visit</p>
  680. <button id="registerbutton">Book a Visit</button>
  681. </div>
  682. </div>
  683. <section class="baimages">
  684. <div class="guidelines-container">
  685. <!-- LEFT SIDE -->
  686. <div class="left-side">
  687. <h2 class="visit-title">Visitor Guidelines</h2>
  688. <ul class="visit-list">
  689. <li>Photography and videography are prohibited inside the Town Hall.</li>
  690. <li>Food and beverages are prohibited inside the Town Hall.</li>
  691. <li>Ensure you have your Aadhaar card and booking receipt for entry.</li>
  692. <li>Please arrive 15 minutes before your scheduled time.</li>
  693. <li>Visitors are advised to bring their own water bottles and avoid plastic usage in the campus.
  694. </li>
  695. </ul>
  696. </div>
  697. <div class="divider"></div>
  698. <!-- RIGHT SIDE -->
  699. <div class="right-side">
  700. <div class="icon-title">
  701. <div class="icon"><i class="fa-solid fa-ticket"></i></div>
  702. <h3>Hours & Tickets</h3>
  703. </div>
  704. <p class="days">Sunday - Saturday</p>
  705. <p class="timings">8AM to 6PM</p>
  706. <p class="closed-text">Tuesday: Victoria Public Hall is closed</p>
  707. <h4 class="ticket-subtitle">Tickets</h4>
  708. <ul class="ticket-list">
  709. <li>Tickets are available online only</li>
  710. </ul>
  711. <a class="book-btn" href="/victoriapublichall/register">Book a Visit</a>
  712. </div>
  713. </div>
  714. </section>
  715. <section class="visit-box">
  716. <div class="visit-container">
  717. <!-- LEFT SIDE -->
  718. <div class="visit-left">
  719. <div class="visit-icon-title">
  720. <i class="fa-solid fa-route"></i>
  721. <h3>Getting Here</h3>
  722. </div>
  723. <p class="visit-address-text">
  724. Beside Ripon Buildings<br>
  725. EVR Periyar Salai<br>
  726. Chennai - 600 003
  727. </p>
  728. <a class="visit-map-btn" target="_blank" href="https://maps.app.goo.gl/vgoEuimqRLXMgHzB7?g_st=ipc">
  729. Open in Google Maps
  730. </a>
  731. </div>
  732. <!-- RIGHT SIDE -->
  733. <div class="visit-right">
  734. <div class="visit-right-title">
  735. <i class="fa-solid fa-users"></i>
  736. <span>Group Visits</span>
  737. </div>
  738. <ul class="visit-right-list">
  739. <li>Open to Schools, Colleges, Organizations, Corporate Teams and Other Groups.</li>
  740. <li>School and college students are required to wear their ID cards during the visit.</li>
  741. </ul>
  742. </div>
  743. </div>
  744. </section>
  745. <section class="info-cards-section">
  746. <h2 class="amenities-title">Amenities</h2>
  747. <div class="row">
  748. <div class="card red fixed-card">
  749. <img th:src="@{images/zone_activity.svg}" alt="zone_activity">
  750. <h3>Activity zones</h3>
  751. </div>
  752. <div class="card olive fixed-card">
  753. <img th:src="@{images/water-closet.svg}" alt="water_closet">
  754. <h3>Restrooms</h3>
  755. </div>
  756. <div class="card teal fixed-card">
  757. <img th:src="@{images/elevator.svg}" alt="elevator">
  758. <h3>Elevators</h3>
  759. </div>
  760. <div class="card dark-blue fixed-card">
  761. <img th:src="@{images/coffee-cup.svg}" alt="coffee_cup">
  762. <h3>Cafe</h3>
  763. </div>
  764. </div>
  765. </section>
  766. <div class="scroll-top" onclick="scrollToTop()">
  767. <i class="fa-solid fa-arrow-up"></i>
  768. </div>
  769. <!--Footer-->
  770. <footer class="text-center text-white" style="background-color:rgb(21,69,93); font-size: medium">
  771. <!-- Grid container -->
  772. <div class="container p-2">
  773. <!-- Section: Text -->
  774. <section style="text-align: center;color: white">
  775. <p>
  776. Victoria Public Hall Registration &copy; <span style="color: white;"
  777. data-toggle="year-copy"></span>Greater Chennai Corporation
  778. </p>
  779. </section>
  780. <!-- Section: Text -->
  781. </div>
  782. <!-- Grid container -->
  783. </footer>
  784. <script>
  785. function toggleMenu() {
  786. document.getElementById("mobileMenu").classList.toggle("active");
  787. }
  788. document.querySelectorAll('#mobileMenu a').forEach(link => {
  789. link.addEventListener('click', () => {
  790. document.getElementById("mobileMenu").classList.remove("active");
  791. });
  792. });
  793. document.getElementById("hamburger").addEventListener("click", function () {
  794. document.getElementById("navMenu").classList.toggle("active");
  795. });
  796. let scrollHandler = null;
  797. function initScrollSync() {
  798. const textBlocks = document.querySelectorAll('.text-block');
  799. const images = document.querySelectorAll('.sticky-img');
  800. scrollHandler = () => {
  801. let activeIndex = 0;
  802. const windowHeight = window.innerHeight;
  803. textBlocks.forEach((block, index) => {
  804. const rect = block.getBoundingClientRect();
  805. if (rect.top <= windowHeight * 0.5 && rect.bottom >= windowHeight * 0.5) {
  806. activeIndex = index;
  807. }
  808. });
  809. images.forEach((img, idx) => {
  810. img.classList.toggle('active', idx === activeIndex);
  811. });
  812. textBlocks.forEach((block, idx) => {
  813. block.classList.toggle('active', idx === activeIndex);
  814. });
  815. };
  816. window.addEventListener("scroll", scrollHandler);
  817. scrollHandler();
  818. }
  819. function destroyScrollSync() {
  820. if (scrollHandler) {
  821. window.removeEventListener("scroll", scrollHandler);
  822. }
  823. }
  824. function setupMobileBlocks() {
  825. const textBlocks = document.querySelectorAll(".text-block");
  826. const images = document.querySelectorAll(".sticky-img");
  827. if (window.innerWidth <= 1024) {
  828. destroyScrollSync(); // disable desktop scroll sync
  829. textBlocks.forEach((block, index) => {
  830. // already added → skip
  831. if (block.querySelector(".mobile-img")) return;
  832. const wrapper = document.createElement("div");
  833. wrapper.classList.add("mobile-img");
  834. const img = document.createElement("img");
  835. img.src = images[index].src;
  836. wrapper.appendChild(img);
  837. block.prepend(wrapper);
  838. });
  839. } else {
  840. // Remove mobile images when returning to desktop
  841. document.querySelectorAll(".mobile-img").forEach(el => el.remove());
  842. // Enable scroll sync again
  843. initScrollSync();
  844. }
  845. }
  846. let resizeTimer;
  847. window.addEventListener("resize", () => {
  848. clearTimeout(resizeTimer);
  849. resizeTimer = setTimeout(() => {
  850. setupMobileBlocks();
  851. }, 150);
  852. });
  853. function scrollToTop() {
  854. window.scrollTo({ top: 0, behavior: "smooth" });
  855. }
  856. window.addEventListener("scroll", () => {
  857. const scrollBtn = document.querySelector(".scroll-top");
  858. if (window.scrollY > 300) {
  859. scrollBtn.classList.add("show");
  860. } else {
  861. scrollBtn.classList.remove("show");
  862. }
  863. });
  864. document.getElementById("registerbtn")?.addEventListener("click", function () {
  865. window.location.href = "/victoriapublichall/register";
  866. });
  867. document.getElementById("registerbutton")?.addEventListener("click", function () {
  868. window.location.href = "/victoriapublichall/register";
  869. });
  870. setupMobileBlocks();
  871. </script>
  872. </body>
  873. </html>