summaryrefslogtreecommitdiff
path: root/rannak/mangud/kaitseliitlane/soomusmasinad/index.html
blob: ea74ce4bff423f3711dbdbea7b25f3f54a7c87c1 (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
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Soomusmasinad</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">Soomusmasinate teekond</h1>
        <p>
          Vali parempoolsest rippmenüüst joonlaua ikoon (vasakpoolse paneeli võid sulgeda).
          Nüüd märgi kooli asukoht kaardile ning mõõda linnulennult kaugus soomusmasinate möödumiskohani.
          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">
            <strong>Tähelepanu! Tähelepanu! Erakorraline teadaanne!</strong>
            Üleeile, 19. augusti varahommikul kuulutati Moskvas välja
            eriolukord. Vanameelsed kommunistid andsid teada,
            et võtavad võimu üle "riigi juhtimiseks ja erakorralise seisukorra
            režiimi tõhusaks elluviimiseks", kuna Mihhail Gorbatšovi tervislik
            seisund ei võimalda enam riiki juhtida. Algas putš.
            <br/>
            Samal päeval jõudsid Nõukogude soomusmasinad Eestisse,
            eesmärgiks jõuda Tallinnasse ja võtta võim üle. Masinad
            liikusid Pihkvast Tallinna suunas, paljud neist
            peatusid Tondi kasarmutes.
            <br/><br/>
            <strong>
            Vaprad Eesti noored! Soomusmasinad on Eestis! Kui kaugelt
            need sinu koolist möödusid? Mõõda kilomeetrites.
            Nimeta see linn või asula. 
            Ootan vastust! Side lõpp.
            </strong>
          </div>

        </div>
      </div>
    </div>




    <div class="inputWrapper">
      <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/NrUC2-U"></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>