<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>