10 files changed, 252 insertions, 0 deletions
diff --git a/rannak/mangud/kaitseliitlane/soomusmasinad/index.html b/rannak/mangud/kaitseliitlane/soomusmasinad/index.html
new file mode 100644
index 0000000..c94ad66
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/soomusmasinad/index.html
@@ -0,0 +1,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">Soomusmasinad</h1>
+        <p>
+          Joonlauaga (vali parempoolsest menüüst joonlaua ikoon
+          (vasakpoolse paneeli võid ruumi tegemiseks sulgeda))
+          saab mitme klikiga mööda joont kaugust mõõta. Selleks,
+          et saada võimalikult täpne tulemus, zoomi kaardile lähemale
+          ning liigu hiirega klõpsates mööda valitud teekonda baltiketini.
+        </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.jpg"/>
+          </div>
+
+          <div class="modal-body">
+            <strong>Tähelepanu! Tähelepanu! Erakorraline teadaanne!</strong>
+            Üleeile, 19. augusti varahommikul kuulutati Moskvas välja
+            erakorraline olukord. 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? Nimeta kõige lähem geograafiline
+            koht või asula. Mõõda kilomeetrites. 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>
diff --git a/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/EVkuulutamine.jpg b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/EVkuulutamine.jpg
new file mode 100644
index 0000000..f462f69
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/EVkuulutamine.jpg
diff --git a/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/avatar.jpg b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/avatar.jpg
new file mode 100644
index 0000000..37ae271
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/avatar.jpg
diff --git a/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/baltikett.jpg b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/baltikett.jpg
new file mode 100644
index 0000000..f395c65
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/baltikett.jpg
diff --git a/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/hirvepark.jpg b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/hirvepark.jpg
new file mode 100644
index 0000000..b94f2b0
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/hirvepark.jpg
diff --git a/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/interrinne.jpg b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/interrinne.jpg
new file mode 100644
index 0000000..3d6d386
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/interrinne.jpg
diff --git a/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/laulupidu.jpg b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/laulupidu.jpg
new file mode 100644
index 0000000..6ad8ad9
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/laulupidu.jpg
diff --git a/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/teletorn.jpg b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/teletorn.jpg
new file mode 100644
index 0000000..c539324
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/soomusmasinad/pildid/teletorn.jpg
diff --git a/rannak/mangud/kaitseliitlane/soomusmasinad/script.js b/rannak/mangud/kaitseliitlane/soomusmasinad/script.js
new file mode 100644
index 0000000..ca18bfe
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/soomusmasinad/script.js
@@ -0,0 +1,43 @@
+document.addEventListener('DOMContentLoaded', () => {
+    let btn = document.querySelector('.modalButton');
+    btn.click();
+});
+
+
+
+const inputs = document.querySelectorAll('input');
+let asulaVal;
+let kaugusVal;
+
+for (input of inputs){
+    input.addEventListener('input', () => {
+        getInputs()
+    });
+}
+
+
+function getInputs(){
+    let asula = document.querySelector('.asulaInput');
+    let kaugus = document.querySelector('.kaugusInput');
+
+    asulaVal = asula.value;
+    kaugusVal = kaugus.value;
+
+    if (asulaVal != '' && kaugusVal != '')
+        allGood();
+}
+
+
+
+/// All Done ///
+
+
+
+function allGood(){
+    const btn = document.querySelector(".moveOn");
+    btn.disabled = false;
+    localStorage.setItem("roll", "Kaitseliitlase");
+    localStorage.setItem("asula", asulaVal);
+    localStorage.setItem("kaugus", kaugusVal);
+    btn.onclick = () => location.href = "../../../endPage";
+}
diff --git a/rannak/mangud/kaitseliitlane/soomusmasinad/styles.css b/rannak/mangud/kaitseliitlane/soomusmasinad/styles.css
new file mode 100644
index 0000000..cc1f6ec
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/soomusmasinad/styles.css
@@ -0,0 +1,98 @@
+* {
+	box-sizing: border-box;
+}
+h1 {
+    color: #154734;
+    font-weight: bold;
+}
+body{
+    background-color: #4D5157;
+}
+
+.moveOn{
+    display: inline-block;
+    border: none;
+    padding: 6px 12px;
+    margin-botton: 0;
+    font-size: 1rem;
+    font-weight: normal;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 4px;
+    background-color: #4BB543;
+    color: white;
+}
+
+button:disabled{
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+
+
+
+/* Modal Stuff */
+
+.avatar {
+    border-radius: 20px;
+    width: 100%;
+    max-width: 15rem;
+}
+
+.modalHeaderWrapper{
+    text-align: center;
+    margin: 0;
+    width: 100%;
+}
+
+
+
+
+.closeModalButton {
+  border-radius: 50px;
+}
+
+
+.modalButton{
+    display: inline-block;
+    padding: 6px 12px;
+    margin-left: 30px;
+    background-color: rgba(0,136,169,1);
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3 ease 0;
+    font-size: 1rem;
+}
+
+
+
+.modalButton:hover{
+    background-color: rgba(0,136,169,0.8);
+}
+
+span{
+    font-size: .1rem;
+}
+
+
+/* Mainer */
+.inputWrapper{
+    margin-top: 1rem;
+    display: flex;
+    items-align: center;
+    justify-content: center;
+}
+
+.rightWrapper{
+    margin-left: 2rem;
+}
+
+
+input{margin: .3rem;}
+
+.main{padding: 2.5%;}
+iframe{
+    border: solid .5rem black;
+    border-radius: 10px;
+}