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
|
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Baltikett</title>
<!-- Bootstrap - CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body class="text-white">
<div class="container text-center text-white align-items-center">
<h1 class="pb-1 pt-2">Baltikett</h1>
<p>
Vali parempoolsest rippmenüüst joonlaua ikoon (vasakpoolse paneeli võid sulgeda).
Balti keti pikkust saad mõõta märkides alguspunkti ning seejärel liikuda klikkides
teekonna lõpuni. Selleks, et saada võimalikult täpne tulemus,
zoomi vastavalt vajadusele kaardile lähemale või kaugemale.
<br>
Mõõda Balti keti teekonna pikkus Eestis ning sinu kodukoha kaugus lähimast Balti keti punktist.
</p>
<div class="row">
<div>
<button class="moveOn" disabled>Liigu Edasi</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
Sissejuhatus
</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade text-black" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modalHeaderWrapper">
<h3 class="modal-title" id="myModalLabel">Sissejuhatus</h5>
</div>
<img class="avatar" alt="avatar" src="pildid/avatar.png"/>
</div>
<div class="modal-body">
<p>
<strong>Olen nüüd püüdnud julgelt uue ajaga sammu käia.</strong>
<br> <br>
23.augustil 1989 aastal käisime kogu kooliperega Balti ketis,
see oli rahumeelne poliitiline meeleavaldus, mille eesmärgiks
oli demonstreerida maailmale Baltimaade vabadustahet ja juhtida
tähelepanu NSV Liidu ja Saksamaa vahel poole sajandi eest sõlmitud
Molotovi-Ribbentropi paktile, mille salaprotokollid viisid Baltimaade
okupeerimise ja annekteerimiseni NSV Liidu poolt.
Meid oli Balti ketis kokku ligi 300 õpilast ja õpetajat, hoidsime
kätest kinni ja tundsime, et oleme selle pika keti väärikas lüli.
Lausa pisar tuli silma, kui hüüdsime üheskoos: “Vabadus, vabadus, vabadus!”
<br> <br>
<strong>
Kas käisid Balti ketis? Mõõda, kui pikk oli Balti keti teekond Eestis?
Kui kaugelt Balti kett sinu kodukohast möödus? Anna vastus kilomeetrites
</strong>
</p>
</div>
</div>
</div>
</div>
<div class="inputWrapper">
<div>
<label for="teekond">Baltiketi Teekond Eestis:</label>
<input class="teekondInput" name="teekond" type="text" value="" placeholder="Pikkus (km)"/>
</div>
<div>
<label for="asula">Asula:</label>
<input class="asulaInput" name="asula" type="text" value="" placeholder="Sinu valitud asula"/>
</div>
<div>
<label class="rightWrapper" for="kaugus">Kaugus:</label>
<input class="kaugusInput" name="kaugus" type="text" value="" placeholder="Kaugus (km)"/>
</div>
</div>
<!-- Mainer -->
<div class="main">
<iframe width="100%" height="95%" src="https://xgis.maaamet.ee/xgis2/page/link/OFw1OabK"></iframe>
</div>
<script src="script.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
|
