Get-lost-travels · yvett-edina · Apr 15, 2025 · Apr 15, 2025 · Apr 16, 2025 · May 7, 2025
diff --git a/global.css b/global.css
@@ -1,2 +1,3 @@
 @import "tailwindcss";
-@config "./tailwind.config.js";
+@config "./tailwind.config.js";
+@source "../node_modules/flowbite-datepicker";
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
     <title>Vite App</title>
   </head>
   <body>
-    <div id="app"></div>
+  <div id="app" class="bg-background-0"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,9 @@
     "vite": "^6.2.0"
   },
   "dependencies": {
-    "@tailwindcss/postcss": "^4.1.0",
-    "@tailwindcss/vite": "^4.0.17"
+    "@tailwindcss/postcss": "^4.1.4",
+    "@tailwindcss/vite": "^4.0.17",
+    "flatpickr": "^4.6.13",
+    "flowbite": "^3.1.2"
   }
 }
diff --git a/public/images/boat_tour.jpg b/public/images/boat_tour.jpg
diff --git a/public/images/calendar.png b/public/images/calendar.png
diff --git a/public/images/destination_map.png b/public/images/destination_map.png
diff --git a/public/images/logo-placeholder-image.png b/public/images/logo-placeholder-image.png
diff --git a/public/images/logo.png b/public/images/logo.png
diff --git a/src/javascript/calendar.js b/src/javascript/calendar.js
@@ -0,0 +1,7 @@
+import flatpickr from "flatpickr";
+import "flatpickr/dist/flatpickr.min.css";
+
+flatpickr("#datepicker", {
+    inline: true,
+    dateFormat: "Y-m-d"
+});
diff --git a/src/javascript/destination.js b/src/javascript/destination.js
@@ -0,0 +1,75 @@
+function plusFcn(id){
+    let nr = document.getElementById(id).innerText;
+    if(nr < 3){
+        nr++;
+        document.getElementById(id).innerText = nr;
+    }
+    else{
+        document.getElementById(id).innerText = "3";
+    }
+    total();
+}
+
+function minusFcn(id){
+    let nr = document.getElementById(id).innerText;
+    if(nr > 0){
+        nr--;
+        document.getElementById(id).innerText = nr;
+    }
+    else{
+        document.getElementById(id).innerText = "0";
+    }
+    total();
+}
+
+function total() {
+    let sum = 200 * document.getElementById("adult_nr").innerText + 150 * document.getElementById("child_nr").innerText
+    document.getElementById("total").value = sum + " lei";
+}
+
+// Initialize the map centered on Venice
+const map = L.map('map').setView([45.4408, 12.3155], 13); // Venice coords
+
+// Add tile layer (OpenStreetMap)
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; OpenStreetMap contributors'
+}).addTo(map);
+
+// Create a marker at Venice, not draggable by default
+const marker = L.marker([45.4408, 12.3155], { draggable: false }).addTo(map);
+
+// On marker click, make it draggable
+marker.on('click', function () {
+    const isDraggable = marker.dragging.enabled();
+    marker.dragging[isDraggable ? 'disable' : 'enable']();
+    marker.bindPopup(isDraggable ? 'Drag disabled' : 'Drag enabled').openPopup();
+});
+
+let thumbsUpCount = 0;
+let thumbsDownCount = 0;
+
+const thumbsUpBtn = document.getElementById('thumbsUpBtn');
+const thumbsDownBtn = document.getElementById('thumbsDownBtn');
+const thumbsUpPercent = document.getElementById('thumbsUpPercent');
+const thumbsDownPercent = document.getElementById('thumbsDownPercent');
+const totalVotes = document.getElementById('totalVotes');
+
+function updatePercentages() {
+    const total = thumbsUpCount + thumbsDownCount;
+    const upPercent = total === 0 ? 0 : Math.round((thumbsUpCount / total) * 100);
+    const downPercent = total === 0 ? 0 : 100 - upPercent;
+
+    thumbsUpPercent.textContent = `${upPercent}%`;
+    thumbsDownPercent.textContent = `${downPercent}%`;
+    totalVotes.textContent = `Total ratings: ${total}`;
+}
+
+thumbsUpBtn.addEventListener('click', () => {
+    thumbsUpCount++;
+    updatePercentages();
+});
+
+thumbsDownBtn.addEventListener('click', () => {
+    thumbsDownCount++;
+    updatePercentages();
+});
diff --git a/src/javascript/destinationData.js b/src/javascript/destinationData.js
@@ -0,0 +1,36 @@
+export const destinationData = [{
+    title: "Burano and Murano Boat Tour",
+    motto: "A four-hour morning boat trip with lace-making and glass-blowing demonstrations",
+    description: `On this morning boat tour, you’ll get to sail into the Venetian Lagoon and see two beautiful
+                islands in just four hours – Burano and Murano. During the boat ride, you’ll hear about the
+                history of the islands through onboard guide commentary. Then, once you get to Murano, you’ll
+                learn about its glass-making tradition and you’ll be able to experience a glassblowing
+                demonstration. Similarly, in Burano, you’ll learn about another type of local craftsmanship
+                – lace-making. You’ll be able to stop and watch a lace-making workshop before your tour
+                finishes and you head back to shore.`,
+    image: "/images/boat_tour.jpg",
+    //location: "Venetian Lagoon, Italy",
+    duration: "4 hours",
+    languages: ["English", "Italian", "French"],
+    prices: {
+        adult: 200,
+        child: 150,
+    }
+}, {
+    title: "Alpine Zoo Innsbruck and Hungerburg Funicular",
+    motto: "What could be nicer on a quiet, sunny day than a trip to the zoo with the family?",
+    description: `The zoo is the only one of its kind worldwide. At 750 meters, it is Europe’s highest-lying zoo, but it is also easy to get to and not far from the city center.
+
+There are many different animals waiting to be seen at the zoo such as lynx, eagles, fish, and birds, as well as wolves and bears. Spring is a particularly interesting time to visit because that is when young animals are born and there is usually a lot going on! At the petting area, rare and local species of cows, pigs, goats and sheep can be seen up close.
+
+The ride with the Hungerburgbahn starts at the Station Congress near the center of Innsbruck and brings you in 5 minutes to the Station Alpine Zoo, then back again after your zoo visit.`,
+    image: "/images/boat_tour.jpg",
+    //location: "Venetian Lagoon, Italy",
+    duration: "2 hours",
+    languages: ["English", "Italian", "French"],
+    prices: {
+        adult: 120,
+        child: 90,
+    }
+}
+];
diff --git a/src/javascript/loadData.js b/src/javascript/loadData.js
@@ -0,0 +1,12 @@
+import { destinationData } from "./destinationData.js";
+
+//window.addEventListener("DOMContentLoaded", function () {
+    document.getElementById("tour-title").textContent = destinationData[0].title;
+   document.getElementById("tour-motto").textContent = destinationData[0].motto;
+    document.getElementById("tour-image").src = destinationData[0].image;
+    document.getElementById("tour-description").textContent = destinationData[0].description;
+    document.getElementById("tour-duration").textContent = destinationData[0].duration;
+    document.getElementById("tour-languages").textContent = destinationData[0].languages.join(", ");
+    document.getElementById("tour-price-adult").textContent = `Adult: ${destinationData[0].prices.adult} lei`;
+    document.getElementById("tour-price-child").textContent = `Child: ${destinationData[0].prices.child} lei`;
+//});
diff --git a/src/javascript/orders.js b/src/javascript/orders.js
@@ -0,0 +1,4 @@
+import { destinationData } from "./destinationData.js";
+
+document.getElementById("o1-title").textContent = destinationData[0].title;
+document.getElementById("o2-title").textContent = destinationData[1].title;
diff --git a/src/pages/destination.html b/src/pages/destination.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Destination</title>
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <script type="module" src="/src/javascript/calendar.js"></script>
+
+</head>
+<body class="bg-blue-600">
+
+    <div class="bg-background-1 shadow-md">
+        <nav class="relative flex items-center justify-between h-16 px-6">
+            <img src="/images/logo.png" alt="Get Lost Travels Logo" class="h-12 w-auto" />
+
+            <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 flex gap-6 items-center">
+                <a href="#" class="text-accent font-bold px-3 py-1 rounded transition hover:bg-accent hover:text-background-0">Home</a>
+                <a href="#" class="text-accent font-bold px-3 py-1 rounded transition hover:bg-accent hover:text-background-0">Explore</a>
+                <a href="#" class="text-accent font-bold px-3 py-1 rounded transition hover:bg-accent hover:text-background-0">Sign up</a>
+            </div>
+        </nav>
+    </div>
+
+    <div class="title flex justify-between items-center pl-10 py-5">
+        <h1 id="tour-title" class = "bg-background-1 text-accent text-6xl font-bold px-5 py-5 w-fit rounded-2xl">..wvsv..</h1>
+    </div>
+
+    <p id="tour-motto" class="text-white text-2xl text-left pl-10 mb-5"> A four-hour morning boat trip with lace-making and glass-blowing demonstrations </p>
+
+    <div class="listing flex justify-between items-center pl-10 rounded-2xl text-2xl">
+
+        <img id="tour-image" src="/images/boat_tour.jpg" alt="boat" width="1004" height="669" class="rounded-2xl mb-5">
+
+        <div class="info text-left border-5 border-background-1 rounded-2xl px-5 py-5 ml-5 w-[762px] h-[669px]">
+            <p class="text-accent py-5 font-bold"> Description: </p>
+
+            <p id="tour-description" class="text-white"> On this morning boat tour, you’ll get to sail into the Venetian Lagoon and see two beautiful
+                islands in just four hours – Burano and Murano. During the boat ride, you’ll hear about the
+                history of the islands through onboard guide commentary. Then, once you get to Murano, you’ll
+                learn about its glass-making tradition and you’ll be able to experience a glassblowing
+                demonstration. Similarly, in Burano, you’ll learn about another type of local craftsmanship
+                – lace-making. You’ll be able to stop and watch a lace-making workshop before your tour
+                finishes and you head back to shore.
+            </p>
+        </div>
+    </div>
+
+    <div class="listing flex justify-between items-center">
+        <div class="map text-left border-5 border-background-1 rounded-2xl w-[1040px] h-[800px] px-5 py-5 text-2xl">
+            <p class="map-text text-accent py-5"> Location: </p>
+            <div id="map" class="w-[800px] h-[317px]"></div>
+            <p class="text-accent py-10"> Additional information: </p>
+            <p class="pl-10">
+                <span class="text-accent">Duration:</span>
+                <span id="tour-duration" class="text-white"> 4 hours </span>
+            </p>
+            <p class="pl-10 py-7">
+                <span class="text-accent">Free cancellation available</span>
+                <span class="text-white">(Up to 24 hours before start time)</span>
+            </p>
+            <p class="pl-10">
+                <span class="text-accent">Languages spoken by tour guide:</span>
+                <span id="tour-languages" class="text-white"> English, Italian, French</span>
+            </p>
+        </div >
+
+        <div class="tickets_price text-left  border-5 border-background-1 rounded-2xl w-[762px] h-[800px] px-5 py-5 text-2xl">
+            <p class="text-accent"> Tickets and price: </p>
+
+            <div class="flex items-center py-10 gap-10">
+                <div id="datepicker" class="rounded-lg"></div>
+
+                <div class="relative">
+                    <div class="text-white flex flex-col gap-4 py-1 absolute px-- bottom-5 w-40">
+                        <p class="text-accent"> Select time: </p>
+                        <button class="bg-background-1 w-24 px-5 rounded-2xl hover:bg-background-2focus:outline-none focus:ring-2 focus:ring-white"> 12:00 </button>
+                        <button class="bg-background-1 w-24 px-5 rounded-2xl hover:bg-background-2 focus:outline-none focus:ring-2 focus:ring-white"> 14:00 </button>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <div class="flex items-center gap-10 py-5">
+                    <p id="tour-price-adult"  class="text-white"> Adult: 200 lei</p>
+
+                    <div class="flex justify-between  items-center bg-background-1 px-5 rounded-2xl w-24 h-8.5">
+                        <button class="text-white hover:text-accent" id="adult_btn_minus" onclick="minusFcn('adult_nr')"> − </button>
+                        <span id="adult_nr" class="text-white"> 0 </span>
+                        <button class="text-white hover:text-accent" id="adult_btn_plus" onclick="plusFcn('adult_nr')"> + </button>
+                    </div>
+                </div>
+
+                <div class="flex items-center gap-11">
+                    <p id="tour-price-child" class="text-white"> Child: 150 lei</p>
+
+                    <div class="flex justify-between  items-center bg-background-1 px-5 rounded-2xl w-24 h-8.5">
+                        <button class="text-white hover:text-accent" id="child_btn_minus" onclick="minusFcn('child_nr')"> − </button>
+                        <span id="child_nr" class="text-white"> 0 </span>
+                        <button class="text-white hover:text-accent" id="child_btn_plus" onclick="plusFcn('child_nr')"> + </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="py-10">
+                <label class="text-white">Total:</label>
+                <input id="total" class="text-white p-2 rounded" readonly />
+            </div>
+
+        </div>
+    </div>
+
+    <div class="flex flex-col items-start px-5 py-5 space-y-6">
+        <p class="text-white text-2xl text-left">Please, rate your experience:</p>
+
+        <div class="flex flex-row space-x-10">
+            <!-- Thumbs Up -->
+            <div class="flex flex-col items-center space-y-2">
+                <button id="thumbsUpBtn" class="bg-background-1 p-3 rounded-full hover:bg-background-2">
+                    <i class="fa-solid fa-thumbs-up text-white text-[60px]"></i>
+                </button>
+                <p id="thumbsUpPercent" class="text-white text-xl">0%</p>
+            </div>
+
+            <!-- Thumbs Down -->
+            <div class="flex flex-col items-center space-y-2">
+                <button id="thumbsDownBtn" class="bg-background-1 p-3 rounded-full hover:bg-background-2">
+                    <i class="fa-solid fa-thumbs-down text-white text-[60px]"></i>
+                </button>
+                <p id="thumbsDownPercent" class="text-white text-xl">0%</p>
+            </div>
+        </div>
+
+        <p id="totalVotes" class="text-white text-lg mt-4">Total ratings: 0</p>
+
+    </div>
+
+    <script type="module" src="/src/javascript/loadData.js"></script>
+
+    <script src="/src/javascript/destination.js"></script>
+
+</body>
+</html>
diff --git a/src/pages/index.html b/src/pages/index.html