From 66ea72c977b865cb0ff54a8b478e760492f6df9b Mon Sep 17 00:00:00 2001 From: Amaldev P V Date: Sun, 7 Jun 2026 18:04:41 +0530 Subject: [PATCH] Add discovery UI MVP --- frontend/index.html | 50 ++++++++++ frontend/script.js | 186 ++++++++++++++++++++++++++++++++++++ frontend/style.css | 97 +++++++++++++++++++ frontend/venue-details.html | 32 +++++++ 4 files changed, 365 insertions(+) create mode 100644 frontend/index.html create mode 100644 frontend/script.js create mode 100644 frontend/style.css create mode 100644 frontend/venue-details.html diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 000000000..26e33a125 --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,50 @@ + + + + + BookMyVenue + + + + +

+ Find and book the perfect venue near you +

+ +

BookMyVenue

+ + +
+ + +

+ + + +

+ + + +

+ + +
+
+ + + + +Venue + + + + \ No newline at end of file diff --git a/frontend/script.js b/frontend/script.js new file mode 100644 index 000000000..a8f43b18f --- /dev/null +++ b/frontend/script.js @@ -0,0 +1,186 @@ +function updateTowns() { + + let district = document.getElementById("district").value; + let town = document.getElementById("town"); + + town.innerHTML = ""; + + if (district === "Trivandrum") { + + town.innerHTML += ""; + town.innerHTML += ""; + town.innerHTML += ""; + + } + + else if (district === "Kollam") { + + town.innerHTML += ""; + town.innerHTML += ""; + town.innerHTML += ""; + + } + + else if (district === "Kochi") { + + town.innerHTML += ""; + town.innerHTML += ""; + town.innerHTML += ""; + + } +} +function showVenues() { + + let district = document.getElementById("district").value; + let venueList = document.getElementById("venue-list"); + let town = document.getElementById("town").value; + + venueList.innerHTML = ""; + + if (district === "Trivandrum") { + + if (town === "Kazhakuttam") { + + venueList.innerHTML = ` +
+

Green Palace Auditorium

+

Location: Kazhakuttam

+

Capacity: 500

+ + + + +
+ `; + } + + else if (town === "Pattom") { + + venueList.innerHTML = ` +
+

Royal Convention Center

+

Location: Pattom

+

Capacity: 800

+ + + + +
+ `; + } + + else if (town === "Neyyattinkara") { + + venueList.innerHTML = ` +
+

Techno Event Hall

+

Location: Neyyattinkara

+

Capacity: 600

+ + + + +
+ `; + } +} + + + +else if (district === "Kollam") { + + if (town === "Kottarakkara") { + + venueList.innerHTML = ` +
+

Kollam Grand Hall

+

Location: Kottarakkara

+

Capacity: 600

+ + + +
+ `; + } + + else if (town === "Karunagappally") { + + venueList.innerHTML = ` +
+

Lake View Auditorium

+

Location: Karunagappally

+

Capacity: 700

+ + + +
+ `; + } + + else if (town === "Punalur") { + + venueList.innerHTML = ` +
+

Punalur Event Center

+

Location: Punalur

+

Capacity: 450

+ + + +
+ `; + } +} + +else if (district === "Kochi") { + + if (town === "Kakkanad") { + + venueList.innerHTML = ` +
+

Kochi Event Hub

+

Location: Kakkanad

+

Capacity: 1000

+ + + +
+ `; + } + + else if (town === "Edappally") { + + venueList.innerHTML = ` +
+

Marine Drive Convention Center

+

Location: Edappally

+

Capacity: 1200

+ + + +
+ `; + } + + else if (town === "Aluva") { + + venueList.innerHTML = ` +
+

Aluva Grand Palace

+

Location: Aluva

+

Capacity: 850

+ + + +
+ `; + } +} + + else { + + venueList.innerHTML = ` +

Please select a district.

+ `; + } +} \ No newline at end of file diff --git a/frontend/style.css b/frontend/style.css new file mode 100644 index 000000000..2c9723736 --- /dev/null +++ b/frontend/style.css @@ -0,0 +1,97 @@ +body{ + font-family: Arial, sans-serif; + text-align: center; + background: linear-gradient(135deg, #e0e7ff, #f8fafc); + min-height: 100vh; + margin: 0; + padding: 20px; +} + +h1{ + color: #1e3a8a; + font-size: 3rem; + margin-bottom: 10px; +} + +button{ + padding: 12px 24px; + background: #2563eb; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 16px; + transition: 0.3s; +} + +select{ + padding: 8px; +} +.venue-container{ + display: flex; + justify-content: center; + gap: 20px; + flex-wrap: wrap; + margin-top: 30px; +} + +.venue-card{ + width: 280px; + background: white; + padding: 25px; + border-radius: 15px; + box-shadow: 0px 5px 20px rgba(0,0,0,0.1); + text-align: center; + transition: 0.3s; +} +#venue-list{ + display: flex; + justify-content: center; + gap: 20px; + flex-wrap: wrap; + margin-top: 30px; +} +.venue-card button{ + margin-top: 10px; +} +p{ + color: #555; +} +.venue-card:hover{ + transform: translateY(-5px); + transition: 0.3s; +} +button:hover{ + background: #1d4ed8; + transform: translateY(-2px); +} +.tagline{ + color: #64748b; + font-size: 18px; + margin-bottom: 30px; +} +.search-box{ + background: white; + width: 350px; + margin: auto; + padding: 25px; + border-radius: 15px; + box-shadow: 0px 4px 20px rgba(0,0,0,0.1); +} +select{ + width: 220px; + padding: 12px; + border-radius: 8px; + border: 1px solid #cbd5e1; + margin: 10px; + font-size: 15px; +} +.venue-card img{ + width: 100%; + border-radius: 10px; + margin-bottom: 15px; +} +.venue-card h2{ + color: #1e293b; + margin-bottom: 15px; +} \ No newline at end of file diff --git a/frontend/venue-details.html b/frontend/venue-details.html new file mode 100644 index 000000000..b5894f892 --- /dev/null +++ b/frontend/venue-details.html @@ -0,0 +1,32 @@ + + + + + Venue Details + + + + + +

Green Palace Auditorium

+ +

Location: Kazhakuttam

+ +

Capacity: 500

+ +

Amenities:

+ + + +

Price: ₹15,000/day

+ + + + + +