summaryrefslogtreecommitdiff
path: root/rannak/mangud/direktor/baltikett/index.html
blob: 2b51b0a9ff59b8e1df7e39e5f28e05f07724d7bd (plain)
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
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Balti kett</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">Balti kett</h1>
        <p>
          Vali parempoolsest rippmenüüst joonlaua ikoon (vasakpoolse paneeli võid sulgeda).
          Balti keti pikkuse mõõtmiseks märgi alguspunkt ning liigu seejärel klikkides teekonna lõpuni.
          Selleks, et saada võimalikult täpne tulemus, zoomi vastavalt vajadusele kaardile lähemale või kaugemale.
        </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 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, eesmärgiks näidata
            maailmale Baltimaade vabadustahet ja juhtida 
            tähelepanu NSV Liidu ja Saksamaa vahel poole sajandi eest sõlmitud
            Molotovi-Ribbentropi paktile. Need 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">Balti keti 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>