summaryrefslogtreecommitdiff
path: root/rannak/mangud/kaitseliitlane/salakood
diff options
context:
space:
mode:
authorRasmus Luha <rasmus.luha@gmail.com>2023-01-14 00:06:13 +0200
committerRasmus Luha <rasmus.luha@gmail.com>2023-01-14 00:06:13 +0200
commit61f75569eb9464fbf0403f3af41d940e5cc79478 (patch)
tree1a183d16a53b15036bca3ae2069264294153495e /rannak/mangud/kaitseliitlane/salakood
parentad4cd6abd8abe20f4ff3be8ae822927a5e4dce84 (diff)
salakood mang
Diffstat (limited to 'rannak/mangud/kaitseliitlane/salakood')
-rw-r--r--rannak/mangud/kaitseliitlane/salakood/index.html259
-rw-r--r--rannak/mangud/kaitseliitlane/salakood/pildid/avatar.jpgbin0 -> 137594 bytes
-rw-r--r--rannak/mangud/kaitseliitlane/salakood/script.js141
-rw-r--r--rannak/mangud/kaitseliitlane/salakood/style.css152
4 files changed, 552 insertions, 0 deletions
diff --git a/rannak/mangud/kaitseliitlane/salakood/index.html b/rannak/mangud/kaitseliitlane/salakood/index.html
new file mode 100644
index 0000000..26502a6
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/index.html
@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+
+ <title>Salakood</title>
+
+ <link rel="stylesheet" href="style.css">
+ <!-- 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">
+</head>
+
+<body>
+
+ <!-- Button trigger modal -->
+ <button id="testModal" type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
+ Sissejuhatus
+ </button>
+
+ <div class="container text-white text-center">
+ <h1>Salakood</h1>
+
+ <p>
+ Kaitseliitlane edastab meile salakirjas teate, mille on koostanud 4 torni valvavat kaitseliitlast.
+ <br/>
+ Kas need 4 saatsid selle äkki Soome YLES raadiole?
+ </p>
+
+ <div class="text-center">
+
+ <div class="col">
+ <button class="moveOn" disabled>Liigu Edasi</button>
+ </div>
+
+ <div class="text-center inputBox">
+
+ <input type="text" placeholder="Täht" id="inputId" maxlength="1">
+ <button type="button" class="subBtn subDisabled" onclick="getInputValue();">Proovi</button>
+
+ <div class="infoWrapper">
+ <div class="infoTxt"></div>
+ <h6><strong>Kood</strong></h6>
+ <span>25-A | </span>
+ <span>24-B | </span>
+ <span>23-C | </span>
+ <span>22-D | </span>
+ <span>21-E | </span>
+ <span>20-F | </span>
+ <span>19-G | </span>
+ <span>18-H | </span>
+ <span>17-I | </span>
+ <span>16-J | </span>
+ <span>15-K | </span>
+ <span>14-L | </span>
+ <span>13-M | </span>
+ <span>12-N | </span>
+ <span>11-O | </span>
+ <span>10-P | </span>
+ <span>9-R | </span>
+ <span>8-S | </span>
+ <span>7-T | </span>
+ <span>6-U | </span>
+ <span>5-V | </span>
+ <span>4-Õ | </span>
+ <span>3-Ä | </span>
+ <span>2-Ö | </span>
+ <span>1-Ü</span>
+ </div>
+
+ </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">
+ Kui ma kuulsin, et teletorni rünnatakse, sõitsin kohe siia.
+ <br/>
+ Torni juures on ühelt poolt vene tankid ja teisalt sadu inimesi,
+ kes seda kaitsevad. Kuuldatavasti kaitsevad tornis sidekeskust 4 kaitseliitlast,
+ kes edastasid Soome YLES raadiole teate meie olukorrast.
+ <br/>
+ <strong>
+ Teade on loomulikult kodeeritud. Kas murrad selle läbi?
+ </strong>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+
+
+
+ <!-- Crossword -->
+
+ <div class="main">
+
+ <table class="text-center text-white">
+ <!-- Essa Rida-->
+ <tr>
+ <td class="selected">7</td>
+ <td>11</td>
+ <td>9</td>
+ <td>12</td>
+ <td>17</td>
+ <td></td>
+ <td>9</td>
+ <td>1</td>
+ <td>12</td>
+ <td>12</td>
+ <td>25</td>
+ <td>7</td>
+ <td>17</td>
+ <td></td>
+ <td class="done">4.</td>
+ <td class="done">30.</td>
+ </tr>
+
+ <!-- Teine Rida-->
+ <tr>
+ <td>5</td>
+ <td>25</td>
+ <td>14</td>
+ <td>5</td>
+ <td>25</td>
+ <td>13</td>
+ <td>21</td>
+ <td></td>
+ <td>8</td>
+ <td>17</td>
+ <td>22</td>
+ <td>21</td>
+ <td>15</td>
+ <td>21</td>
+ <td>8</td>
+ <td>15</td>
+ <td>6</td>
+ <td>8</td>
+ <td>7</td>
+ <td></td>
+ </tr>
+
+ <!-- Kolmas Rida-->
+ <tr>
+ <td class="done">2</td>
+ <td class="done">2.</td>
+ <td>15</td>
+ <td>11</td>
+ <td>9</td>
+ <td>9</td>
+ <td>6</td>
+ <td>8</td>
+ <td>21</td>
+ <td>14</td>
+ <td class="done">.</td>
+ <td></td>
+ <td>21</td>
+ <td>14</td>
+ <td>21</td>
+ <td>15</td>
+ <td>7</td>
+ <td>21</td>
+ <td>9</td>
+ <td class="done">,</td>
+ <td></td>
+ </tr>
+
+ <!-- Neljas Rida-->
+ <tr>
+ <td>9</td>
+ <td>25</td>
+ <td>25</td>
+ <td>22</td>
+ <td>17</td>
+ <td>11</td>
+ <td>14</td>
+ <td>21</td>
+ <td>5</td>
+ <td>17</td>
+ <td></td>
+ <td>11</td>
+ <td>14</td>
+ <td>21</td>
+ <td>13</td>
+ <td>25</td>
+ <td>8</td>
+ <td class="done">.</td>
+ </tr>
+
+ <!-- Viies Rida-->
+ <tr>
+ <td>14</td>
+ <td>17</td>
+ <td>20</td>
+ <td>7</td>
+ <td>17</td>
+ <td>22</td>
+ <td></td>
+ <td>1</td>
+ <td>14</td>
+ <td>21</td>
+ <td>5</td>
+ <td>25</td>
+ <td>14</td>
+ <td class="done">.</td>
+ <td></td>
+ </tr>
+
+
+ <!-- Kuues Rida-->
+ <tr>
+ <td>11</td>
+ <td>14</td>
+ <td>6</td>
+ <td>15</td>
+ <td>11</td>
+ <td>9</td>
+ <td>22</td>
+ <td></td>
+ <td>15</td>
+ <td>9</td>
+ <td>17</td>
+ <td>17</td>
+ <td>7</td>
+ <td>17</td>
+ <td>14</td>
+ <td>17</td>
+ <td>12</td>
+ <td>21</td>
+ <td class="done">.</td>
+ </tr>
+
+ </table>
+
+ </div> <!-- End of main class-->
+
+ <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/salakood/pildid/avatar.jpg b/rannak/mangud/kaitseliitlane/salakood/pildid/avatar.jpg
new file mode 100644
index 0000000..37ae271
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/pildid/avatar.jpg
Binary files differ
diff --git a/rannak/mangud/kaitseliitlane/salakood/script.js b/rannak/mangud/kaitseliitlane/salakood/script.js
new file mode 100644
index 0000000..1945187
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/script.js
@@ -0,0 +1,141 @@
+document.addEventListener('DOMContentLoaded', () => {
+ let btn = document.querySelector('.modalButton');
+ btn.click();
+});
+
+
+let counter = 0;
+
+
+function message(msg, color){
+ messageBox = document.querySelector(".infoTxt");
+ messageBox.innerHTML = msg;
+ messageBox.style.color = color;
+}
+
+
+
+
+
+// Grid event added
+function clickEventAdder(){
+ for (let node of document.querySelectorAll("td")) {
+
+ node.addEventListener("click", () => {
+
+ if (!node.classList.contains("selected"))
+ node.classList.add("selected");
+
+ let curNode = node;
+ for (let node of document.querySelectorAll("td")) {
+ if (node != curNode && node.classList.contains("selected"))
+ node.classList.remove("selected");
+ }
+ });
+
+ } // outerFor
+} // FuncEnd
+clickEventAdder();
+
+
+
+
+
+
+function getInputValue() {
+ // Selecting the input element and get its value
+ let inputVal = document.getElementById("inputId").value;
+
+ if (inputVal == "")
+ message("Palun vali täht.", "red");
+ else
+ kontrolliVastus(inputVal.toLowerCase());
+}
+
+let koodid = {"a": 25,
+ "b": 24,
+ "c": 23,
+ "d": 22,
+ "e": 21,
+ "f": 20,
+ "g": 19,
+ "h": 18,
+ "i": 17,
+ "j": 16,
+ "k": 15,
+ "l": 14,
+ "m": 13,
+ "n": 12,
+ "o": 11,
+ "p": 10,
+ "r": 9,
+ "s": 8,
+ "t": 7,
+ "u": 6,
+ "v": 5,
+ "õ": 4,
+ "ä": 3,
+ "ö": 2,
+ "ü": 1,
+ };
+
+function kontrolliVastus(vastus){
+
+ let toCheck = document.querySelector(".selected");
+
+ if (toCheck.classList.contains("done"))
+ message("Juba Õige!", "lime");
+
+ else if (toCheck.innerHTML == "")
+ message("Siin on tühik.", "lime");
+
+ else if (koodid[vastus] == toCheck.innerHTML){
+ message("Õige!", "lime");
+ toCheck.innerHTML = vastus.toUpperCase();
+ toCheck.classList.add("done");
+ counter += 1;
+
+ if (counter >= 90) {
+ moveOnEnable();
+ message("Tubli, kõik valmis<br/>Kogu Sõnum: TORNI RÜNNATI 4.30. VALVAME SIDEKESKUST 22. KORRUSEL. ELEKTER, RAADIOSIDE OLEMAS. LIFTID ÜLEVAL. OLUKORD KRIITILINE.", "lime");
+
+ for (let node of document.querySelectorAll("td")) {
+ if (node.classList.contains("selected"))
+ node.classList.remove("selected");
+ }
+ }
+
+ }
+
+ else
+ message("Proovi uuesti.", "red");
+
+}
+
+
+function enterSubmit(){
+ document.getElementById('inputId')
+ .addEventListener('keyup', event => {
+ if (event.code === 'Enter')
+ {
+ event.preventDefault();
+ getInputValue();
+ }
+ });
+}
+enterSubmit()
+
+
+
+// If Done
+
+function moveOnEnable(){
+ const btn = document.querySelector(".moveOn");
+ btn.disabled = false;
+ btn.onclick = () => location.href = "#";
+
+ // Proovi btn
+ const subButton = document.querySelector(".subBtn");
+ subButton.disabled = true;
+
+}
diff --git a/rannak/mangud/kaitseliitlane/salakood/style.css b/rannak/mangud/kaitseliitlane/salakood/style.css
new file mode 100644
index 0000000..537477f
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/style.css
@@ -0,0 +1,152 @@
+* {
+ box-sizing: border-box;
+}
+
+body{
+ background-color: #212121 !important;
+}
+
+.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;
+}
+
+/* Retsept Lõpus*/
+
+.retsept {
+ margin-top: 5%;
+ width:60%;
+ color: #AFFF80;
+ text-align: center;
+ font-size: 1.2rem;
+}
+
+
+
+/* Modal Stuff */
+
+.avatar {
+ border-radius: 20px;
+ width: 100% !important;
+ max-width: 15rem !important;
+}
+
+.modalHeaderWrapper{
+ text-align: center;
+ margin: 0 !important;
+ width: 100% !important;
+}
+
+
+
+.closeModalButton {
+ border-radius: 50px;
+}
+
+.modalButton{
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 6px;
+ padding: 9px 25px;
+ background-color: rgba(0,136,169,1) !important;
+ border: none !important;
+ border-radius: 50px !important;
+ cursor: pointer !important;
+ transition: all 0.3 ease 0 !important;
+ margin: 3% !important;
+ font-size: 1.2rem !important;
+}
+
+.modalButton:hover{
+ background-color: rgba(0,136,169,0.8) !important;
+}
+
+
+/* Input Box styles */
+
+input {
+ width: 7ch;
+}
+
+.inputBox{
+ margin-top: 10px !important;
+}
+
+.subBtn{
+ display: inline-block;
+ border: none;
+ padding: 3px 6px;
+ margin-botton: 0;
+ font-size: .95rem;
+ font-weight: normal;
+ text-align: center;
+ cursor: pointer;
+ border-radius: 2px;
+ color: white;
+ background-color: #93bdbd;
+}
+
+.subDisabled{
+ cursor: not-allowed;
+}
+
+
+/* Koodi Styles*/
+
+.infoWrapper{
+ color: white;
+ margin: 1rem;
+}
+
+
+
+/* Main */
+
+.main {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+td {
+ border: 4px solid white !important;
+ width: 4rem !important;
+ height: 4rem !important;
+ font-weight: bold;
+}
+
+
+
+.done {
+ color: #bd1393;
+}
+
+.selected {
+ background: lime;
+}
+
+
+
+
+
+
+@media screen and (min-width: 1900px) {
+ .main {
+ margin-top: 5rem;
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 06:56:26 +0000