summaryrefslogtreecommitdiff
path: root/rannak/mangud/direktor/baltikett
diff options
context:
space:
mode:
authorRasmus <rasmus.luha@gmail.com>2023-04-01 16:15:52 +0300
committerRasmus <rasmus.luha@gmail.com>2023-04-01 16:15:52 +0300
commitba837f70632519d58ae0f3f95bfad0dbb8051fc0 (patch)
tree3fc7d6b8715d4e7818d197d8408c791af28da608 /rannak/mangud/direktor/baltikett
parent760e8fff4d4fd71350ddc9b17e85e95a17d4ce8e (diff)
Loosung ja Baltikett
Diffstat (limited to 'rannak/mangud/direktor/baltikett')
-rw-r--r--rannak/mangud/direktor/baltikett/index.html121
-rw-r--r--rannak/mangud/direktor/baltikett/pildid/EVkuulutamine.jpgbin0 -> 78339 bytes
-rw-r--r--rannak/mangud/direktor/baltikett/pildid/avatar.jpgbin0 -> 137594 bytes
-rw-r--r--rannak/mangud/direktor/baltikett/pildid/baltikett.jpgbin0 -> 90772 bytes
-rw-r--r--rannak/mangud/direktor/baltikett/pildid/hirvepark.jpgbin0 -> 186590 bytes
-rw-r--r--rannak/mangud/direktor/baltikett/pildid/interrinne.jpgbin0 -> 79800 bytes
-rw-r--r--rannak/mangud/direktor/baltikett/pildid/laulupidu.jpgbin0 -> 722236 bytes
-rw-r--r--rannak/mangud/direktor/baltikett/pildid/teletorn.jpgbin0 -> 69745 bytes
-rw-r--r--rannak/mangud/direktor/baltikett/script.js47
-rw-r--r--rannak/mangud/direktor/baltikett/styles.css98
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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;
+}