forked from LeonRabe/Praktikum-Website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml.html
141 lines (127 loc) · 5.77 KB
/
html.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Travel4You</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<h1>Travel4You</h1>
<h2>Traumziel entdeckt, Reise Perfekt!</h2>
<p>Ob du von einem entspannten Strandurlaub träumst, kulturelle Highlights erleben möchtest, auf der Suche nach deinem nächsten Abenteuer bist oder einfach sicher und sorgenfrei reisen willst – bei uns findest du das ideale Reiseziel. Wir von Travel4You haben die Welt für dich durchkämmt und präsentieren dir die besten Orte, abgestimmt auf deine Wünsche und Bedürfnisse.
Ganz gleich, ob du nach einem günstigen Urlaub suchst, tief in fremde Kulturen eintauchen willst, den Nervenkitzel spüren oder einfach in Ruhe abschalten möchtest – wir bieten dir maßgeschneiderte Empfehlungen, die genau zu dir passen.
Lass uns gemeinsam deinen nächsten Traumurlaub finden. Travel4You – Traumziel entdeckt, Reise perfekt!</p>
<h3>Unsere Empfehlungen:</h3>
<div class="container">
<div id="locationName" class="location-name">Barcelona</div>
<img id="image" src="https://www.powernewz.ch/wp-content/uploads/2020/04/powernewz_smart_city_barcelona_FB_1200x627.jpg" alt="Bild">
<div id="chartContainer">
<div class="chart" id="chart1">
<div class="bar">
<div class="bar-label">Preis</div>
<div class="bar-outer">
<div class="bar-inner low" style="width: 10%;"></div>
</div>
</div>
<div class="bar">
<div class="bar-label">Kultur</div>
<div class="bar-outer">
<div class="bar-inner high" style="width: 70%;"></div>
</div>
</div>
<div class="bar">
<div class="bar-label">Sicherheit</div>
<div class="bar-outer">
<div class="bar-inner low" style="width: 30%;"></div>
</div>
</div>
<div class="bar">
<div class="bar-label">Abenteuer</div>
<div class="bar-outer">
<div class="bar-inner high" style="width: 70%;"></div>
</div>
</div>
</div>
<div class="chart" id="chart2" style="display: none;">
<div class="bar">
<div class="bar-label">Preis</div>
<div class="bar-outer">
<div class="bar-inner medium" style="width: 50%;"></div>
</div>
</div>
<div class="bar">
<div class="bar-label">Kultur</div>
<div class="bar-outer">
<div class="bar-inner medium-low" style="width: 40%;"></div>
</div>
</div>
<div class="bar">
<div class="bar-label">Sicherheit</div>
<div class="bar-outer">
<div class="bar-inner very-high" style="width: 100%;"></div>
</div>
</div>
<div class="bar">
<div class="bar-label">Abenteuer</div>
<div class="bar-outer">
<div class="bar-inner very-high" style="width: 80%;"></div>
</div>
</div>
</div>
<div class="chart" id="chart3" style="display: none;">
<div class="bar">
<div class="bar-label">Preis</div>
<div class="bar-outer">
<div class="bar-inner medium" style="width: 50%;"></div>
</div>
</div>
<div class="bar">
<div class="bar-label">Kultur</div>
<div class="bar-outer">
<div class="bar-inner medium-low" style="width: 40%;"></div>
</div>
</div>
<div class="bar">
<div class="bar-label">Sicherheit</div>
<div class="bar-outer">
<div class="bar-inner medium" style="width: 60%;"></div>
</div>
</div>
<div class="bar">
<div class="bar-label">Abenteuer</div>
<div class="bar-outer">
<div class="bar-inner very-high" style="width: 80%;"></div>
</div>
</div>
</div>
</div>
<div class="buttons">
<button onclick="prevImage()">Zurück</button>
<button onclick="nextImage()">Weiter</button>
</div>
</div>
<script>
const images = ["https://www.powernewz.ch/wp-content/uploads/2020/04/powernewz_smart_city_barcelona_FB_1200x627.jpg", "https://mypics.at/wp-content/uploads/2020/07/top10-ausflugsziele-kaernten-0837.jpg", "https://www.feinschmecker.de/uploads/media/jalag-fe-content-image/07/5097-palma-de-mallorca.jpg?v=1-0"]; // Liste der Bilder
const charts = ["chart1", "chart2", "chart3"];
const locations = ["Barcelona", "Kärnten", "Mallorca"];
let currentIndex = 0;
function showImage(index) {
const imgElement = document.getElementById('image');
const locationElement = document.getElementById('locationName');
imgElement.src = images[index];
locationElement.textContent = locations[index];
charts.forEach((chart, i) => {
document.getElementById(chart).style.display = i === index ? "block" : "none";
});
}
function prevImage() {
currentIndex = (currentIndex === 0) ? images.length - 1 : currentIndex - 1;
showImage(currentIndex);
}
function nextImage() {
currentIndex = (currentIndex === images.length - 1) ? 0 : currentIndex + 1;
showImage(currentIndex);
}
</script>
</body>
</html>