10 files changed, 266 insertions, 0 deletions
diff --git a/rannak/mangud/direktor/baltikett/index.html b/rannak/mangud/direktor/baltikett/index.html
new file mode 100644
index 0000000..f4e44cd
--- /dev/null
+++ b/rannak/mangud/direktor/baltikett/index.html
@@ -0,0 +1,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>
+          Joonlauaga (vali parempoolsest rippmenüü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
+          või kaugemale, vastavalt vajadusele.<br>Leia Baltiketi pikkus Eestis
+          ning sinu kodukoha kaugus ketist.
+        </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">
+              
+            
+            <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>
diff --git a/rannak/mangud/direktor/baltikett/pildid/EVkuulutamine.jpg b/rannak/mangud/direktor/baltikett/pildid/EVkuulutamine.jpg
new file mode 100644
index 0000000..f462f69
--- /dev/null
+++ b/rannak/mangud/direktor/baltikett/pildid/EVkuulutamine.jpg
diff --git a/rannak/mangud/direktor/baltikett/pildid/avatar.jpg b/rannak/mangud/direktor/baltikett/pildid/avatar.jpg
new file mode 100644
index 0000000..37ae271
--- /dev/null
+++ b/rannak/mangud/direktor/baltikett/pildid/avatar.jpg
diff --git a/rannak/mangud/direktor/baltikett/pildid/baltikett.jpg b/rannak/mangud/direktor/baltikett/pildid/baltikett.jpg
new file mode 100644
index 0000000..f395c65
--- /dev/null
+++ b/rannak/mangud/direktor/baltikett/pildid/baltikett.jpg
diff --git a/rannak/mangud/direktor/baltikett/pildid/hirvepark.jpg b/rannak/mangud/direktor/baltikett/pildid/hirvepark.jpg
new file mode 100644
index 0000000..b94f2b0
--- /dev/null
+++ b/rannak/mangud/direktor/baltikett/pildid/hirvepark.jpg
diff --git a/rannak/mangud/direktor/baltikett/pildid/interrinne.jpg b/rannak/mangud/direktor/baltikett/pildid/interrinne.jpg
new file mode 100644
index 0000000..3d6d386
--- /dev/null
+++ b/rannak/mangud/direktor/baltikett/pildid/interrinne.jpg
diff --git a/rannak/mangud/direktor/baltikett/pildid/laulupidu.jpg b/rannak/mangud/direktor/baltikett/pildid/laulupidu.jpg
new file mode 100644
index 0000000..6ad8ad9
--- /dev/null
+++ b/rannak/mangud/direktor/baltikett/pildid/laulupidu.jpg
diff --git a/rannak/mangud/direktor/baltikett/pildid/teletorn.jpg b/rannak/mangud/direktor/baltikett/pildid/teletorn.jpg
new file mode 100644
index 0000000..c539324
--- /dev/null
+++ b/rannak/mangud/direktor/baltikett/pildid/teletorn.jpg
diff --git a/rannak/mangud/direktor/baltikett/script.js b/rannak/mangud/direktor/baltikett/script.js
new file mode 100644
index 0000000..f5d1016
--- /dev/null
+++ b/rannak/mangud/direktor/baltikett/script.js
@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', () => {
+    let btn = document.querySelector('.modalButton');
+    btn.click();
+});
+
+
+
+const inputs = document.querySelectorAll('input');
+let asulaVal;
+let kaugusVal;
+let teekondVal;
+
+for (input of inputs){
+    input.addEventListener('input', () => {
+        getInputs()
+    });
+}
+
+
+function getInputs(){
+    let teekond = document.querySelector('.teekondInput');
+    let asula = document.querySelector('.asulaInput');
+    let kaugus = document.querySelector('.kaugusInput');
+
+    asulaVal = asula.value;
+    kaugusVal = kaugus.value;
+    teekondVal = teekond.value;
+
+    if (asulaVal != '' && kaugusVal != '' && teekondVal != '')
+        allGood();
+}
+
+
+
+/// All Done ///
+
+
+
+function allGood(){
+    const btn = document.querySelector(".moveOn");
+    btn.disabled = false;
+    localStorage.setItem("roll", "Direktori");
+    localStorage.setItem("asula", asulaVal);
+    localStorage.setItem("kaugus", kaugusVal);
+    localStorage.setItem("teekond", teekondVal);
+    btn.onclick = () => location.href = "../../../endPage";
+}
diff --git a/rannak/mangud/direktor/baltikett/styles.css b/rannak/mangud/direktor/baltikett/styles.css
new file mode 100644
index 0000000..cc1f6ec
--- /dev/null
+++ b/rannak/mangud/direktor/baltikett/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;
+}