diff options
Diffstat (limited to 'rannak/mangud/kaitseliitlane/sundmused')
| -rw-r--r-- | rannak/mangud/kaitseliitlane/sundmused/index.html | 127 | ||||
| -rw-r--r-- | rannak/mangud/kaitseliitlane/sundmused/pildid/EVkuulutamine.jpg | bin | 0 -> 78339 bytes | |||
| -rw-r--r-- | rannak/mangud/kaitseliitlane/sundmused/pildid/avatar.jpg | bin | 0 -> 137594 bytes | |||
| -rw-r--r-- | rannak/mangud/kaitseliitlane/sundmused/pildid/baltikett.jpg | bin | 0 -> 90772 bytes | |||
| -rw-r--r-- | rannak/mangud/kaitseliitlane/sundmused/pildid/hirvepark.jpg | bin | 0 -> 186590 bytes | |||
| -rw-r--r-- | rannak/mangud/kaitseliitlane/sundmused/pildid/interrinne.jpg | bin | 0 -> 79800 bytes | |||
| -rw-r--r-- | rannak/mangud/kaitseliitlane/sundmused/pildid/laulupidu.jpg | bin | 0 -> 722236 bytes | |||
| -rw-r--r-- | rannak/mangud/kaitseliitlane/sundmused/pildid/teletorn.jpg | bin | 0 -> 69745 bytes | |||
| -rw-r--r-- | rannak/mangud/kaitseliitlane/sundmused/script.js | 77 | ||||
| -rw-r--r-- | rannak/mangud/kaitseliitlane/sundmused/styles.css | 94 |
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 Binary files differnew file mode 100644 index 0000000..f462f69 --- /dev/null +++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/EVkuulutamine.jpg diff --git a/rannak/mangud/kaitseliitlane/sundmused/pildid/avatar.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/avatar.jpg Binary files differnew file mode 100644 index 0000000..37ae271 --- /dev/null +++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/avatar.jpg diff --git a/rannak/mangud/kaitseliitlane/sundmused/pildid/baltikett.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/baltikett.jpg Binary files differnew file mode 100644 index 0000000..f395c65 --- /dev/null +++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/baltikett.jpg diff --git a/rannak/mangud/kaitseliitlane/sundmused/pildid/hirvepark.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/hirvepark.jpg Binary files differnew file mode 100644 index 0000000..b94f2b0 --- /dev/null +++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/hirvepark.jpg diff --git a/rannak/mangud/kaitseliitlane/sundmused/pildid/interrinne.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/interrinne.jpg Binary files differnew file mode 100644 index 0000000..3d6d386 --- /dev/null +++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/interrinne.jpg diff --git a/rannak/mangud/kaitseliitlane/sundmused/pildid/laulupidu.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/laulupidu.jpg Binary files differnew file mode 100644 index 0000000..6ad8ad9 --- /dev/null +++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/laulupidu.jpg diff --git a/rannak/mangud/kaitseliitlane/sundmused/pildid/teletorn.jpg b/rannak/mangud/kaitseliitlane/sundmused/pildid/teletorn.jpg Binary files differnew file mode 100644 index 0000000..c539324 --- /dev/null +++ b/rannak/mangud/kaitseliitlane/sundmused/pildid/teletorn.jpg 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; +} |
