Skip to content

Commit 2ff82e7

Browse files
dimkouvdimkouv
committed
init
0 parents  commit 2ff82e7

File tree

1 file changed

+216
-0
lines changed

1 file changed

+216
-0
lines changed

‎index.html‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
<!DOCTYPE html>
2+
<html lang="el">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Perivleptos Takeoff Rules</title>
8+
<style>
9+
:root {
10+
--danger-red: #dc2626;
11+
--warning-orange: #ea580c;
12+
--military-gold: #854d0e;
13+
--bg-gray: #f8fafc;
14+
--card-white: #ffffff;
15+
--accent-blue: #2563eb;
16+
}
17+
18+
body {
19+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
20+
line-height: 1.6;
21+
margin: 0;
22+
padding: 0;
23+
background-color: var(--bg-gray);
24+
color: #1e293b;
25+
}
26+
27+
.container {
28+
max-width: 600px;
29+
margin: 0 auto;
30+
padding: 20px;
31+
}
32+
33+
.lang-switcher {
34+
display: flex;
35+
justify-content: flex-end;
36+
margin-bottom: 20px;
37+
}
38+
39+
button {
40+
padding: 10px 20px;
41+
cursor: pointer;
42+
border: 1px solid #cbd5e1;
43+
background: var(--card-white);
44+
border-radius: 8px;
45+
font-weight: bold;
46+
transition: background 0.3s;
47+
}
48+
49+
button:hover {
50+
background: #f1f5f9;
51+
}
52+
53+
.card {
54+
background: var(--card-white);
55+
border-radius: 12px;
56+
padding: 20px;
57+
margin-bottom: 20px;
58+
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
59+
}
60+
61+
.alert-airport {
62+
border-left: 8px solid var(--danger-red);
63+
background-color: #fef2f2;
64+
}
65+
66+
.alert-military {
67+
border-left: 8px solid var(--military-gold);
68+
background-color: #fefce8;
69+
}
70+
71+
.rules-card {
72+
border-left: 8px solid var(--accent-blue);
73+
}
74+
75+
.btn-link {
76+
display: inline-block;
77+
background: var(--danger-red);
78+
color: white;
79+
text-decoration: none;
80+
padding: 12px 20px;
81+
border-radius: 6px;
82+
font-weight: bold;
83+
margin-top: 10px;
84+
text-align: center;
85+
}
86+
87+
h2 {
88+
margin-top: 0;
89+
display: flex;
90+
align-items: center;
91+
gap: 10px;
92+
font-size: 1.4em;
93+
}
94+
95+
.quote {
96+
font-style: italic;
97+
color: #475569;
98+
border-top: 1px solid #e2e8f0;
99+
padding-top: 15px;
100+
margin-top: 15px;
101+
font-weight: 500;
102+
text-align: center;
103+
}
104+
105+
.emergency-box {
106+
background: #1e293b;
107+
color: white;
108+
padding: 20px;
109+
border-radius: 12px;
110+
}
111+
112+
.emergency-box a {
113+
color: #38bdf8;
114+
font-weight: bold;
115+
text-decoration: none;
116+
}
117+
118+
/* Multi-lang visibility */
119+
[lang="en"] {
120+
display: none;
121+
}
122+
</style>
123+
</head>
124+
125+
<body>
126+
127+
<div class="container">
128+
<div class="lang-switcher">
129+
<button onclick="toggleLang()">Switch to English / Ελληνικά</button>
130+
</div>
131+
132+
<h1 class="gr">🪂 Κανόνες Ασφαλείας Απογείωσης Περιβλέπτου</h1>
133+
<h1 class="en" lang="en">🪂 Perivleptos Takeoff Rules</h1>
134+
135+
<div class="card alert-airport">
136+
<h2 class="gr">⚠️ Προσοχή: Αεροδρόμιο (IOA)</h2>
137+
<h2 class="en" lang="en">⚠️ Warning: Airport Nearby (IOA)</h2>
138+
139+
<p class="gr">Το αεροδρόμιο Ιωαννίνων είναι πολύ κοντά. Ελέγξτε τις πτήσεις πριν την απογείωση:</p>
140+
<p class="en" lang="en">Ioannina Airport is very close. Check live flights before launching:</p>
141+
142+
<a href="https://www.flightradar24.com/data/airports/ioa" target="_blank" class="btn-link">FlightRadar24 - IOA</a>
143+
144+
<p class="gr" style="font-size: 0.85em; margin-top: 15px;"><em>*Κάποια αεροσκάφη (π.χ. στρατιωτικά) μπορεί
145+
να μην φαίνονται στο ραντάρ.</em></p>
146+
<p class="en" lang="en" style="font-size: 0.85em; margin-top: 15px;"><em>*Some aircraft (e.g., military) may
147+
not appear on radar.</em></p>
148+
</div>
149+
150+
<div class="card alert-military">
151+
<h2 class="gr">🎖️ Στρατιωτική Ζώνη</h2>
152+
<h2 class="en" lang="en">🎖️ Military Zone</h2>
153+
154+
<p class="gr">Προς την πόλη υπάρχει <strong>στρατόπεδο</strong>. Η προσγείωση εκεί θα επιφέρει κατάσχεση
155+
εξοπλισμού και σοβαρά μπλεξίματα, βλάπτοντας τη φήμη μας.</p>
156+
<p class="en" lang="en">There is a <strong>military camp</strong> towards the city. Landing there will lead
157+
to gear confiscation and legal trouble, damaging our reputation.</p>
158+
</div>
159+
160+
<div class="card rules-card">
161+
<h2 class="gr">🪂 Κανόνες & Ασφάλεια</h2>
162+
<h2 class="en" lang="en">🪂 Rules & Safety</h2>
163+
164+
<ul class="gr">
165+
<li>⚠️ Μην πετάτε κοντά στο αεροδρόμιο και μην βρίσκεστε σε σημέιο προσέγγισης αεροσκάφους. Ελέγξτε τις πτήσεις του αεροδρομίου.</li>
166+
<li>Ο πιλότος που έχει το βουνό στα δεξιά του έχει προτεραιότητα.</li>
167+
<li>Όταν δύο πιλότοι πλησιάζουν μετωπικά, στρίβουμε και οι δύο <strong>δεξιά</strong>.</li>
168+
<li>Ο πρώτος που μπαίνει στο θερμικό ορίζει τη φορά περιστροφής (δεξιόστροφα ή αριστερόστροφα).</li>
169+
<li>Ο πιλότος που βρίσκεται χαμηλότερα έχει πάντα προτεραιότητα.</li>
170+
<li>Ακολουθήστε τα τυπικά σχέδια προσγείωσης (Box Pattern).</li>
171+
</ul>
172+
<ul class="en" lang="en">
173+
<li>⚠️ Do not fly over the airport or within the commercial approach paths. Check daily flights schedule.</li>
174+
<li>The pilot with the ridge on their <strong>right</strong> has the right of way.</li>
175+
<li>When two pilots approach head-on, both must alter course to the <strong>right</strong>.</li>
176+
<li>The first pilot to enter a thermal sets the direction of rotation.</li>
177+
<li>The lower pilot always has the right of way.</li>
178+
<li>Respect the standard landing box patterns.</li>
179+
</ul>
180+
181+
<div class="quote">
182+
<p class="gr">"Σεβασου τον καιρό. Το βουνό θα είναι εδώ και αύριο."</p>
183+
<p class="en" lang="en">"Respect the weather. The mountain will still be here tomorrow."</p>
184+
</div>
185+
</div>
186+
187+
<div class="emergency-box">
188+
<h2 class="gr">📞 Έκτακτη Ανάγκη</h2>
189+
<h2 class="en" lang="en">📞 Emergency Info</h2>
190+
<p class="gr">Πύργος IOA: <a href="tel:+302651083600">+30 26510 83600</a></p>
191+
<p class="en" lang="en">IOA Tower: <a href="tel:+302651083600">+30 26510 83600</a></p>
192+
<p class="gr">Ευρωπαϊκός Αριθμός: <a href="tel:112">112</a></p>
193+
<p class="en" lang="en">European Emergency: <a href="tel:112">112</a></p>
194+
</div>
195+
</div>
196+
197+
<script>
198+
let currentLang = 'gr';
199+
function toggleLang() {
200+
const enElements = document.querySelectorAll('[lang="en"]');
201+
const grElements = document.querySelectorAll('.gr');
202+
if (currentLang === 'gr') {
203+
enElements.forEach(el => el.style.display = 'block');
204+
grElements.forEach(el => el.style.display = 'none');
205+
currentLang = 'en';
206+
} else {
207+
enElements.forEach(el => el.style.display = 'none');
208+
grElements.forEach(el => el.style.display = 'block');
209+
currentLang = 'gr';
210+
}
211+
}
212+
</script>
213+
214+
</body>
215+
216+
</html>

0 commit comments

Comments
 (0)