summaryrefslogtreecommitdiff
path: root/rannak/mangud/kaitseliitlane/sundmused
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/sundmused
parentad4cd6abd8abe20f4ff3be8ae822927a5e4dce84 (diff)
salakood mang
Diffstat (limited to 'rannak/mangud/kaitseliitlane/sundmused')
-rw-r--r--rannak/mangud/kaitseliitlane/sundmused/index.html127
-rw-r--r--rannak/mangud/kaitseliitlane/sundmused/pildid/EVkuulutamine.jpgbin0 -> 78339 bytes
-rw-r--r--rannak/mangud/kaitseliitlane/sundmused/pildid/avatar.jpgbin0 -> 137594 bytes
-rw-r--r--rannak/mangud/kaitseliitlane/sundmused/pildid/baltikett.jpgbin0 -> 90772 bytes
-rw-r--r--rannak/mangud/kaitseliitlane/sundmused/pildid/hirvepark.jpgbin0 -> 186590 bytes
-rw-r--r--rannak/mangud/kaitseliitlane/sundmused/pildid/interrinne.jpgbin0 -> 79800 bytes
-rw-r--r--rannak/mangud/kaitseliitlane/sundmused/pildid/laulupidu.jpgbin0 -> 722236 bytes
-rw-r--r--rannak/mangud/kaitseliitlane/sundmused/pildid/teletorn.jpgbin0 -> 69745 bytes
-rw-r--r--rannak/mangud/kaitseliitlane/sundmused/script.js77
-rw-r--r--rannak/mangud/kaitseliitlane/sundmused/styles.css94
10 files changed, 298 insertions, 0 deletions
diff --git a/rannak/mangud/kaitseliitlane/sundmused/index.html b/rannak/mangud/kaitseliitlane/sundmused/index.html
new file mode 100644
index 0000000..d2225b6
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/sundmused/index.html
@@ -0,0 +1,127 @@
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=, initial-scale=1.0">
+ <title>Kuusused</title>
+ <link rel="stylesheet" href="styles.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 class="bg-dark text-white">
+
+ <div class="container text-center text-white align-items-center pb-5">
+ <h1 class="pb-1 pt-2">Sündmused</h1>
+ <p>Vii sündmus kokku pildiga.</p>
+
+ <div class="row">
+ <div>
+ <button class="moveOn" disabled>Liigu Edasi</button>
+ </div>
+
+ </div>
+
+ <!-- Button trigger modal -->
+ <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
+ Sissejuhatus
+ </button>
+
+
+ </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">
+ Tunnen, et sündinuna sõjaeelses iseseisvas Eesti Vabariigis,
+ olen kui ühenduslüli kahe iseseisvusaja vahel.
+ See, mis toimub praegu, on ajalugu - meie iseseisvuse taastulemise lugu!
+ <br/>
+ Olen seda lugu talletanud oma fotoaparaadiga “Zenit”, sest kes minevikku
+ ei mäleta elab tulevikuta. Ja meil on tulevikku!
+ <br/>
+ Noored eestlased! Me peame mäletama neid murrangulisi sündmuseid ja
+ ei tohi neid unustada ka 30 aasta pärast!
+ <br/>
+ <strong>
+ Lehtise neid fotosid ja vaata, kas oskad pildi ja allkirja kokku viia?
+ </strong>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Esimene rida -->
+ <div class="lists">
+ <div class="row">
+
+ <div class="col imgBox text-center">
+ <img src="pildid/baltikett.jpg" alt="Baltikett img">
+ <div id="baltikett" class="list"></div>
+ </div>
+
+ <div class="list col startBasket text-center">
+ <div id="interrinne" class="list-item" draggable="true">Interrinne 1990</div>
+ <div id="hirvepark" class="list-item" draggable="true">Hirvepark 1987</div>
+ <div id="EV" class="list-item" draggable="true">EV väljakuulutamine 1991</div>
+ <div id="baltikett" class="list-item" draggable="true">Baltikett 1989</div>
+ <div id="teletorn" class="list-item" draggable="true">Teletorni kaitsmine 1991</div>
+ <div id="laulupidu" class="list-item" draggable="true">Öölaulupidu 1988</div>
+ </div>
+
+ <div class="col imgBox text-center">
+ <img src="pildid/laulupidu.jpg" alt="Laulupidu img">
+ <div id="laulupidu" class="list"></div>
+ </div>
+
+ </div>
+ </div>
+
+ <!-- Teine rida -->
+
+ <div class="lists">
+ <div class="row">
+
+ <div class="col-3 imgBox text-center">
+ <img src="pildid/hirvepark.jpg" alt="Hirvepark img">
+ <div id="hirvepark" class="list"></div>
+ </div>
+
+ <div class="col-3 imgBox text-center">
+ <img src="pildid/teletorn.jpg" alt="Teletorn img">
+ <div id="teletorn" class="list"></div>
+ </div>
+
+ <div class="col-3 imgBox text-center">
+ <img src="pildid/EVkuulutamine.jpg" alt="EV välja kuulutamine img">
+ <div id="EV" class="list"></div>
+ </div>
+
+ <div class="col-3 imgBox text-center">
+ <img src="pildid/interrinne.jpg" alt="Interrinne img">
+ <div id="interrinne" class="list"></div>
+ </div>
+
+
+ </div>
+ </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/sundmused/pildid/EVkuulutamine.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/EVkuulutamine.jpg
new file mode 100644
index 0000000..f462f69
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/EVkuulutamine.jpg
Binary files differ
diff --git a/rannak/mangud/kaitseliitlane/sundmused/pildid/avatar.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/avatar.jpg
new file mode 100644
index 0000000..37ae271
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/avatar.jpg
Binary files differ
diff --git a/rannak/mangud/kaitseliitlane/sundmused/pildid/baltikett.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/baltikett.jpg
new file mode 100644
index 0000000..f395c65
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/baltikett.jpg
Binary files differ
diff --git a/rannak/mangud/kaitseliitlane/sundmused/pildid/hirvepark.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/hirvepark.jpg
new file mode 100644
index 0000000..b94f2b0
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/hirvepark.jpg
Binary files differ
diff --git a/rannak/mangud/kaitseliitlane/sundmused/pildid/interrinne.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/interrinne.jpg
new file mode 100644
index 0000000..3d6d386
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/interrinne.jpg
Binary files differ
diff --git a/rannak/mangud/kaitseliitlane/sundmused/pildid/laulupidu.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/laulupidu.jpg
new file mode 100644
index 0000000..6ad8ad9
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/laulupidu.jpg
Binary files differ
diff --git a/rannak/mangud/kaitseliitlane/sundmused/pildid/teletorn.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/teletorn.jpg
new file mode 100644
index 0000000..c539324
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/teletorn.jpg
Binary files differ
diff --git a/rannak/mangud/kaitseliitlane/sundmused/script.js b/rannak/mangud/kaitseliitlane/sundmused/script.js
new file mode 100644
index 0000000..daa263d
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/sundmused/script.js
@@ -0,0 +1,77 @@
+document.addEventListener('DOMContentLoaded', () => {
+ let btn = document.querySelector('.modalButton');
+ btn.click();
+});
+
+
+const list_items = document.querySelectorAll(".list-item");
+const lists = document.querySelectorAll(".list");
+
+let draggedItem = null;
+
+for (let i=0; i < list_items.length; i++){
+ const item = list_items[i];
+
+ /* Event Listeners */
+ item.addEventListener("dragstart", e => {
+ draggedItem = item;
+ setTimeout(() => (item.style.display = "none"), 0);
+ });
+
+ item.addEventListener("dragend", e => {
+ setTimeout(() => {
+ draggedItem.style.display = "block";
+ draggedItem = null}, 0);
+ checkIfAllGood();
+ });
+
+ for (let j=0; j < lists.length; j++){
+ const list = lists[j];
+
+ /* Event Listeners */
+
+ list.addEventListener("dragenter",e => (e.preventDefault()));
+
+ list.addEventListener("dragover",e => {
+ e.preventDefault();
+ list.style.backgroundColor = "rgba(0,0,0,0.5)";
+ });
+
+
+ list.addEventListener("dragleave",e => {
+ list.style.backgroundColor = "rgba(0,0,0,0.3)";
+ });
+
+
+ list.addEventListener("drop",e => {
+ if (list.children.length == 0 || list.className.includes("startBasket"))
+ list.append(draggedItem);
+ list.style.backgroundColor = "rgba(0,0,0,0.5)";
+ })
+ }
+
+}
+
+function checkIfAllGood(){
+ let rightDone = [];
+
+ for (let j=0; j < lists.length; j++){
+ const list = lists[j];
+ if (list.className.includes("startBasket"))
+ continue;
+ else if (list.children.length == 1){
+ if (list.id == list.children[0].id){
+ if (!rightDone.includes(list.id))
+ rightDone.push(list.id);
+ console.log(rightDone.length);
+ console.log(rightDone);
+ }
+ }
+ } // For loop end
+
+ if (rightDone.length == 6) {
+ const btn = document.querySelector(".moveOn");
+ btn.disabled = false;
+ btn.onclick = () => location.href = "";
+ }
+}
diff --git a/rannak/mangud/kaitseliitlane/sundmused/styles.css b/rannak/mangud/kaitseliitlane/sundmused/styles.css
new file mode 100644
index 0000000..5e2d661
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/sundmused/styles.css
@@ -0,0 +1,94 @@
+* {
+ box-sizing: border-box !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;
+}
+
+.row {
+ margin: 0 5% !important;
+}
+
+img {
+ max-width: 100% !important;
+ height: auto !important;
+ padding: .3rem;
+}
+
+
+.lists .list .list-item {
+ background-color: #b2beb5 !important;
+ color: #21201E;
+ margin: 0.5rem 0;
+ height: 2.5rem;
+ border-radius: 8px !important;
+ cursor: pointer;
+}
+
+.lists .list {
+ background-color: rgba(0, 0, 0, 0.3);
+ min-height: 2.5rem;
+ margin: .5rem;
+ border-radius: 8px !important;
+}
+
+.startBasket {
+ height: 100% !important;
+ min-height: 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: 25px !important;
+ 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;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 06:57:44 +0000