Skip to content

Commit c0c4b4e

Browse files
yvett-edinasopyb
yvett-edina
authored and
sopyb
committed
Destination page-map and tickets
1 parent 08c1023 commit c0c4b4e

File tree

4 files changed

+75
-2
lines changed

4 files changed

+75
-2
lines changed

‎public/images/calendar.png‎

46.5 KB
Loading

‎public/images/destination_map.png‎

131 KB
Loading

‎src/javascript/destination.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
let nr = document.getElementById("nr").innerText;
2+
3+
function plusFcn(){
4+
if(nr < 3){
5+
nr++;
6+
document.getElementById("nr").innerText = nr;
7+
}
8+
else{
9+
document.getElementById("nr").innerText = "3";
10+
}
11+
}
12+
13+
function minusFcn(){
14+
if(nr > 0){
15+
nr--;
16+
document.getElementById("nr").innerText = nr;
17+
}
18+
else{
19+
document.getElementById("nr").innerText = "0";
20+
}
21+
}

‎src/pages/destination.html‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
</head>
77
<body>
88

9+
<script src="src/javascript/destination.js"> </script>
910
<div class="navbar pb-10">
1011
<nav class="bg-[#227B94] text-xl flex pl-50 gap-x-5">
1112
<a class="bg-[#16325B] border-b-1" href=""> Home </a>
@@ -23,9 +24,9 @@ <h1 class = "bg-[#227B94] text-[#FFDC7F] px-5 py-5 w-fit rounded-2xl"> Burano an
2324

2425
<div class="listing flex justify-between items-center pl-10 rounded-2xl text-2xl">
2526

26-
<img src="/images/boat_tour.jpg" alt="boat" width="900" height="500" class="rounded-2xl mb-5">
27+
<img src="/images/boat_tour.jpg" alt="boat" width="1004" height="669" class="rounded-2xl mb-5">
2728

28-
<div class="info text-left border-5 border-[#227B94] rounded-2xl px-5 py-5 ml-5">
29+
<div class="info text-left border-5 border-[#227B94] rounded-2xl px-5 py-5 ml-5 w-[762px] h-[669px]">
2930
<p class="text-[#FFDC7F] py-5 font-bold"> Description: </p>
3031

3132
<p> On this morning boat tour, you’ll get to sail into the Venetian Lagoon and see two beautiful
@@ -39,5 +40,56 @@ <h1 class = "bg-[#227B94] text-[#FFDC7F] px-5 py-5 w-fit rounded-2xl"> Burano an
3940
</div>
4041
</div>
4142

43+
<div class="listing flex justify-between items-center">
44+
<div class="map text-left border-5 border-[#227B94] rounded-2xl w-[1040px] h-[800px] px-5 py-5 text-2xl">
45+
<p class="map-text text-[#FFDC7F] py-5"> Location: </p>
46+
<img src="/images/destination_map.png" alt="destination_map" width="976" height="317">
47+
<p class="text-[#FFDC7F] py-10"> Additional information: </p>
48+
<p class="pl-10">
49+
<span class="text-[#FFDC7F]">Duration:</span>
50+
<span class="text-white"> 4 hours</span>
51+
</p>
52+
<p class="pl-10 py-7">
53+
<span class="text-[#FFDC7F]">Free cancellation available</span>
54+
<span class="text-white">(Up to 24 hours before start time)</span>
55+
</p>
56+
<p class="pl-10">
57+
<span class="text-[#FFDC7F]">Languages spoken by tour guide:</span>
58+
<span class="text-white"> English, Italian, French</span>
59+
</p>
60+
</div >
61+
62+
<div class="tickets_price text-left border-5 border-[#227B94] rounded-2xl w-[762px] h-[800px] px-5 py-5 text-2xl">
63+
<p class="text-[#FFDC7F]"> Tickets and price: </p>
64+
65+
<div class="flex items-center gap-20">
66+
<img src="/images/calendar.png" alt="calendar" width="417" height="437">
67+
68+
<div class="relative">
69+
<div class="flex flex-col gap-4 py-5 absolute bottom-20 w-40">
70+
<p class="text-[#FFDC7F]"> Select time: </p>
71+
<button class="bg-[#227B94] w-24 px-5 rounded-2xl hover:bg-[#2E9CC0] focus:outline-none focus:ring-2 focus:ring-white"> 12:00 </button>
72+
<button class="bg-[#227B94] w-24 px-5 rounded-2xl hover:bg-[#2E9CC0] focus:outline-none focus:ring-2 focus:ring-white"> 14:00 </button>
73+
</div>
74+
</div>
75+
</div>
76+
77+
<p> Adult: 200 lei</p>
78+
<p> Child: 150 lei</p>
79+
<div class="flex justify-between items-center bg-[#227B94] px-5 rounded-2xl w-24 h-8.5">
80+
<button class="hover:text-[#FFDC7F]" id="btn_minus" onclick="minusFcn()"> − </button>
81+
<span id="nr"> 0 </span>
82+
<button class="hover:text-[#FFDC7F]" id="btn_plus" onclick="plusFcn()"> + </button>
83+
</div>
84+
85+
<!--<div class="flex justify-between items-center bg-[#227B94] px-5 rounded-2xl w-24 h-8.5">
86+
<button class="hover:text-[#FFDC7F]" id="btn_minus"> − </button>
87+
<span id="nr"> 0 </span>
88+
<button class="hover:text-[#FFDC7F]" id="btn_plus"> + </button>
89+
</div>-->
90+
<p> Total: </p>
91+
</div>
92+
</div>
93+
4294
</body>
4395
</html>

0 commit comments

Comments
 (0)