From 1c973624785b77e97791be8c917c4c13b7418be0 Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Sat, 5 Nov 2022 23:13:57 +0200 Subject: actual restructure, previuos commit premature --- rannak/mangud/partorg/kuulsused/index.html | 179 ++++++++++++++++++ rannak/mangud/partorg/kuulsused/pildid/galileo.jpg | Bin 0 -> 785072 bytes rannak/mangud/partorg/kuulsused/pildid/ilves.jpg | Bin 0 -> 14525 bytes .../mangud/partorg/kuulsused/pildid/kaljulaid.jpg | Bin 0 -> 17039 bytes rannak/mangud/partorg/kuulsused/pildid/karis.jpg | Bin 0 -> 17011 bytes rannak/mangud/partorg/kuulsused/pildid/meri.jpg | Bin 0 -> 17891 bytes rannak/mangud/partorg/kuulsused/pildid/pats.jpg | Bin 0 -> 69867 bytes rannak/mangud/partorg/kuulsused/pildid/queen.jpg | Bin 0 -> 18966 bytes rannak/mangud/partorg/kuulsused/pildid/ruutel.jpg | Bin 0 -> 13224 bytes rannak/mangud/partorg/kuulsused/script.js | 71 +++++++ rannak/mangud/partorg/kuulsused/styles.css | 91 +++++++++ rannak/mangud/uliopilane/utlused/css/utlused.css | 128 +++++++++++++ rannak/mangud/uliopilane/utlused/index.html | 80 ++++++++ rannak/mangud/uliopilane/utlused/js/main.js | 209 +++++++++++++++++++++ 14 files changed, 758 insertions(+) create mode 100644 rannak/mangud/partorg/kuulsused/index.html create mode 100644 rannak/mangud/partorg/kuulsused/pildid/galileo.jpg create mode 100644 rannak/mangud/partorg/kuulsused/pildid/ilves.jpg create mode 100644 rannak/mangud/partorg/kuulsused/pildid/kaljulaid.jpg create mode 100644 rannak/mangud/partorg/kuulsused/pildid/karis.jpg create mode 100644 rannak/mangud/partorg/kuulsused/pildid/meri.jpg create mode 100644 rannak/mangud/partorg/kuulsused/pildid/pats.jpg create mode 100644 rannak/mangud/partorg/kuulsused/pildid/queen.jpg create mode 100644 rannak/mangud/partorg/kuulsused/pildid/ruutel.jpg create mode 100644 rannak/mangud/partorg/kuulsused/script.js create mode 100644 rannak/mangud/partorg/kuulsused/styles.css create mode 100644 rannak/mangud/uliopilane/utlused/css/utlused.css create mode 100644 rannak/mangud/uliopilane/utlused/index.html create mode 100644 rannak/mangud/uliopilane/utlused/js/main.js (limited to 'rannak/mangud') diff --git a/rannak/mangud/partorg/kuulsused/index.html b/rannak/mangud/partorg/kuulsused/index.html new file mode 100644 index 0000000..9944db7 --- /dev/null +++ b/rannak/mangud/partorg/kuulsused/index.html @@ -0,0 +1,179 @@ + + + + + + Kuusused + + + + + + + +
+

Kuulsused

+

Vii kokku inimese nimi ja nägu.

+ +
+
+ +
+ +
+ + + + + +
+ + + + + + + +
+
+ +
+ Konstantin Päts img +

+ "Siia Lühikene info sellekohta Kes oli ja Mida tegi. + natuke placeholder teksti veel ja nii ja naa ja see ka." +

+
+
+ +
+
Konstantin Päts
+
Alar Karis
+
Lennart Meri
+
Arnold Rüütel
+
Toomas Hendrik Ilves
+
Kersti Kaljulaid
+
Elizabth II
+
Galileo Galilei
+
+ +
+ Alar Karis img +

+ "Siia Lühikene info sellekohta Kes oli ja Mida tegi. + natuke placeholder teksti veel ja nii ja naa ja see ka." +

+
+
+ +
+
+ + + +
+
+ +
+ Arnold Rüütel img +

+ "Siia Lühikene info sellekohta Kes oli ja Mida tegi. + natuke placeholder teksti veel ja nii ja naa ja see ka." +

+
+
+ +
+ Galileo img +

+ "Siia Lühikene info sellekohta Kes oli ja Mida tegi. + natuke placeholder teksti veel ja nii ja naa ja see ka." +

+
+
+ +
+ Queen img +

+ "Siia Lühikene info sellekohta Kes oli ja Mida tegi. + natuke placeholder teksti veel ja nii ja naa ja see ka." +

+
+
+ +
+
+ + + +
+
+ +
+ Kersti Kaljulaid img +

+ "Siia Lühikene info sellekohta Kes oli ja Mida tegi. + natuke placeholder teksti veel ja nii ja naa ja see ka." +

+
+
+ +
+ Toomas Hendrik Ilves img +

+ "Siia Lühikene info sellekohta Kes oli ja Mida tegi. + natuke placeholder teksti veel ja nii ja naa ja see ka." +

+
+
+ +
+ Lennart Meri img +

+ "Siia Lühikene info sellekohta Kes oli ja Mida tegi. + natuke placeholder teksti veel ja nii ja naa ja see ka." +

+
+
+ +
+
+ + + + + + + diff --git a/rannak/mangud/partorg/kuulsused/pildid/galileo.jpg b/rannak/mangud/partorg/kuulsused/pildid/galileo.jpg new file mode 100644 index 0000000..311780c Binary files /dev/null and b/rannak/mangud/partorg/kuulsused/pildid/galileo.jpg differ diff --git a/rannak/mangud/partorg/kuulsused/pildid/ilves.jpg b/rannak/mangud/partorg/kuulsused/pildid/ilves.jpg new file mode 100644 index 0000000..026be4a Binary files /dev/null and b/rannak/mangud/partorg/kuulsused/pildid/ilves.jpg differ diff --git a/rannak/mangud/partorg/kuulsused/pildid/kaljulaid.jpg b/rannak/mangud/partorg/kuulsused/pildid/kaljulaid.jpg new file mode 100644 index 0000000..2b1a230 Binary files /dev/null and b/rannak/mangud/partorg/kuulsused/pildid/kaljulaid.jpg differ diff --git a/rannak/mangud/partorg/kuulsused/pildid/karis.jpg b/rannak/mangud/partorg/kuulsused/pildid/karis.jpg new file mode 100644 index 0000000..ebaf172 Binary files /dev/null and b/rannak/mangud/partorg/kuulsused/pildid/karis.jpg differ diff --git a/rannak/mangud/partorg/kuulsused/pildid/meri.jpg b/rannak/mangud/partorg/kuulsused/pildid/meri.jpg new file mode 100644 index 0000000..978f915 Binary files /dev/null and b/rannak/mangud/partorg/kuulsused/pildid/meri.jpg differ diff --git a/rannak/mangud/partorg/kuulsused/pildid/pats.jpg b/rannak/mangud/partorg/kuulsused/pildid/pats.jpg new file mode 100644 index 0000000..07b4fff Binary files /dev/null and b/rannak/mangud/partorg/kuulsused/pildid/pats.jpg differ diff --git a/rannak/mangud/partorg/kuulsused/pildid/queen.jpg b/rannak/mangud/partorg/kuulsused/pildid/queen.jpg new file mode 100644 index 0000000..bc0aea5 Binary files /dev/null and b/rannak/mangud/partorg/kuulsused/pildid/queen.jpg differ diff --git a/rannak/mangud/partorg/kuulsused/pildid/ruutel.jpg b/rannak/mangud/partorg/kuulsused/pildid/ruutel.jpg new file mode 100644 index 0000000..5cf9c07 Binary files /dev/null and b/rannak/mangud/partorg/kuulsused/pildid/ruutel.jpg differ diff --git a/rannak/mangud/partorg/kuulsused/script.js b/rannak/mangud/partorg/kuulsused/script.js new file mode 100644 index 0000000..13b9d1d --- /dev/null +++ b/rannak/mangud/partorg/kuulsused/script.js @@ -0,0 +1,71 @@ +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 == 8) { + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = ""; + } +} diff --git a/rannak/mangud/partorg/kuulsused/styles.css b/rannak/mangud/partorg/kuulsused/styles.css new file mode 100644 index 0000000..857c4c8 --- /dev/null +++ b/rannak/mangud/partorg/kuulsused/styles.css @@ -0,0 +1,91 @@ +* { + 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: 15rem !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 */ + +/* +.modalButton { + position: fixed; + top: 0; + right: 0; + padding: 6px; + color: #fff; + margin: 3%; +} +*/ + +.closeModalButton { + border-radius: 50px; +} + +.modalButton{ + position: fixed; + 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; +} diff --git a/rannak/mangud/uliopilane/utlused/css/utlused.css b/rannak/mangud/uliopilane/utlused/css/utlused.css new file mode 100644 index 0000000..e7c5277 --- /dev/null +++ b/rannak/mangud/uliopilane/utlused/css/utlused.css @@ -0,0 +1,128 @@ +/* Mäng ise */ +@import url('https://fonts.googleapis.com/css?family=Montserrat'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Montserrat', sans-serif; + background-color: #eee; + color: #111; + touch-action: none; +} + +.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; +} + +/* later added stuff here */ + +.wrapper { + outline: 1px solid gold; + position: relative; + display: flex; + flex-wrap: wrap; +} + +.empty { + width: 7rem; + height: 7rem; +} + +.drag { + position: absolute; + width: 7rem; + height: 7rem; + z-index: 1; +} + +.active { + background-color: grey !important; +} + +.done { + background-color: green !important; +} + +/* end of later added stuff */ + + +.draggable-elements { + display: flex; + justify-content: center; + margin: 2rem; +} +.draggable { + height: 5rem; + width: 5rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + margin: 0rem 1rem; + cursor: move; + transition: opacity 0.2s; +} + +.droppable { + height: 10rem; + width: 25rem; + margin: 1rem auto; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + font-size: 8rem; + font-weight: bold; + background-color: #fff; + border: 3px dashed #111; + transition: border-width 0.2s, transform 0.2s, background-color 0.4s; +} +.droppable span { + font-size: 1.25rem; + pointer-events: none; /* The element is never the target of pointer events */ +} + +/* Drag and Drop Related Styling */ + +.droppable.droppable-hover { + /* background-color: #bee3f0; */ + border-width: 5px; + transform: scale(1.1); +} +.droppable.dropped { + border-style: solid; + color: #fff; +} +.droppable.dropped span { + font-weight: bolder; + margin-top: 0.5rem; +} +.droppable.dropped i { + pointer-events: none; +} +.draggable.dragged { + user-select: none; + cursor: default; +} +.draggable.dragged:hover { + opacity: 0.1; +} diff --git a/rannak/mangud/uliopilane/utlused/index.html b/rannak/mangud/uliopilane/utlused/index.html new file mode 100644 index 0000000..510c62d --- /dev/null +++ b/rannak/mangud/uliopilane/utlused/index.html @@ -0,0 +1,80 @@ + + + + + + + Kuulsad Ütlused + + + + + + + + + +
+ +
+
Heinz Valk
+
+ +
+
Edgar Savisaar
+
+ + +
+
Jüri Leesment
+
+ +
+
Hando Runnel
+
+ + +
+
Interrinde toeatjad
+
+ +
+
Marju Lauristin
+
+ + +
+
+ +
+
+ + + +
+ +
+ +
+
"Eestlane olen ja eestlaseks jään"
+
"Ükskord me võidame niikuinii" (Eestimaa Laul 11.09.1988)
+
+ +
+
"Toompead rünnatakse! Ma kordan - Toompead rünnatakse!"
+
"Maa tuleb täita lastega" (ans. Justamendi laul 1987)
+
+ +
+
"Арнольд Рюйтель, выходи один!" 15.05.1990"
+
"Mõistusega. Lauluga. Südamega. Just nii me olemegi kõige tugevamad"
+
+ +
+ + + + + + + diff --git a/rannak/mangud/uliopilane/utlused/js/main.js b/rannak/mangud/uliopilane/utlused/js/main.js new file mode 100644 index 0000000..4262d41 --- /dev/null +++ b/rannak/mangud/uliopilane/utlused/js/main.js @@ -0,0 +1,209 @@ +// Detecting part +const isMobile = function(){ + const match = window.matchMedia('(pointer:coarse)'); + return (match && match.matches) +} +console.log(`${isMobile() ? 'mobile' : 'not mobile'}`); + +// Global Variables for Mobile +let originalX = 0; +let originalY = 0; +let counter = 0; +let itemAppend = null; + +if (`${isMobile() ? 'mobile' : 'not mobile'}` == 'not mobile') { + + const draggableElements = document.querySelectorAll(".draggable"); + const droppableElements = document.querySelectorAll(".droppable"); + + draggableElements.forEach(elem => { + elem.addEventListener("dragstart", dragStart); // Fires as soon as the user starts dragging an item - This is where we can define the drag data + // elem.addEventListener("drag", drag); // Fires when a dragged item (element or text selection) is dragged + // elem.addEventListener("dragend", dragEnd); // Fires when a drag operation ends (such as releasing a mouse button or hitting the Esc key) - After the dragend event, the drag and drop operation is complete + }); + + droppableElements.forEach(elem => { + elem.addEventListener("dragenter", dragEnter); // Fires when a dragged item enters a valid drop target + elem.addEventListener("dragover", dragOver); // Fires when a dragged item is being dragged over a valid drop target, repeatedly while the draggable item is within the drop zone + elem.addEventListener("dragleave", dragLeave); // Fires when a dragged item leaves a valid drop target + elem.addEventListener("drop", drop); // Fires when an item is dropped on a valid drop target + }); + + // Drag and Drop Functions // + + //Events fired on the drag target + function dragStart(event) { + event.dataTransfer.setData("text", event.target.id); // or "text/plain" but just "text" would also be fine since we are not setting any other type/format for data value + } + + //Events fired on the drop target + function dragEnter(event) { + if(!event.target.classList.contains("dropped")) { + event.target.classList.add("droppable-hover"); + } + } + + function dragOver(event) { + if(!event.target.classList.contains("dropped")) { + event.preventDefault(); // Prevent default to allow drop + } + } + + function dragLeave(event) { + if(!event.target.classList.contains("dropped")) { + event.target.classList.remove("droppable-hover"); + } + } + + + function drop(event) { + + event.preventDefault(); // This is in order to prevent the browser default handling of the data + event.target.classList.remove("droppable-hover"); + const draggableElementData = event.dataTransfer.getData("text"); // Get the dragged data. This method will return any data that was set to the same type in the setData() method + const droppableElementData = event.target.getAttribute("data-draggable-id"); + const isCorrectMatching = draggableElementData === droppableElementData; + + if(isCorrectMatching) { + const draggableElement = document.getElementById(draggableElementData); + event.target.classList.add("dropped"); + // event.target.style.backgroundColor = draggableElement.style.color; // This approach works only for inline styles. A more general approach would be the following: + event.target.style.backgroundColor = window.getComputedStyle(draggableElement).color; + draggableElement.classList.add("dragged"); + draggableElement.setAttribute("draggable", "false"); + event.target.insertAdjacentHTML("afterbegin", ``); + + counter++; + console.log("counter:", counter) + if (counter == 6){ + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = "../../rolliValik"; + } + } // If isCorrectMatchingEnd + } // Drop Func End + +} // If Desktop End + + +//If mobile + +else{ + + const empty = Array.from(document.querySelectorAll('.empty')); + const drags = document.querySelectorAll('.drag'); + + drags.forEach(drag => { + drag.addEventListener('pointerdown', pointerDown); + drag.addEventListener('pointermove', pointerMove); + drag.addEventListener('pointerup', pointerUp); + }) + + + // Function when start touch + function pointerDown(e){ + e.preventDefault(); + + let remVal = parseInt(getComputedStyle(document.documentElement).fontSize); + originalTop = e.target.getBoundingClientRect().top - 2*remVal; + originalLeft = e.target.getBoundingClientRect().left - remVal; + } + + + // Function while movin + function pointerMove(e){ + e.preventDefault(); + + //Scrolling Part + if (window.innerHeight - e.screenY < 600){ + window.scrollBy({ + top: 100, // could be negative value + behavior: 'smooth' + }); + } + + else if (e.clientY < 200){ + window.scrollBy({ + top: -100, // could be negative value + behavior: 'smooth' + }); + } + + nimi = e.target; + if (!nimi.classList.contains('done')){ + + nimi.style.left = `${e.pageX - nimi.clientHeight/2}px`; + nimi.style.top = `${e.pageY - nimi.clientHeight/2}px`; + + empty.map(item => { + if ( + nimi.getBoundingClientRect().top + nimi.offsetWidth / 2 < item.getBoundingClientRect().bottom && + nimi.getBoundingClientRect().right - nimi.offsetWidth / 2 > item.getBoundingClientRect().left && + nimi.getBoundingClientRect().bottom - nimi.offsetWidth / 2 > item.getBoundingClientRect().top && + nimi.getBoundingClientRect().left + nimi.offsetWidth / 2 < item.getBoundingClientRect().right + ) { + item.classList.add('active'); + itemAppend = item; + } + else { + item.classList.remove('active'); + } + }); //empty.map loop end + } + + // if currentDrag has class done + else{ + console.log("has class done") + } + + } + + + // Function if touch is stopped + function pointerUp(e){ + e.preventDefault(); + + if (itemAppend != null){ + + if (itemAppend.classList.contains('active') && itemAppend.dataset.draggableId == this.id) { + this.classList.add('done') + this.parentElement.classList.add('done') + itemAppend.classList.add('done'); + itemAppend.classList.remove('active'); + + this.style.top = `${originalTop}px`; + this.style.left = `${originalLeft}px`; + //this.innerHTML=""; + + counter++; + console.log("counter:", counter) + if (counter == 6){ + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = "../../rolliValik"; + } + + } + else { + + this.style.top = `${originalTop}px`; + this.style.left = `${originalLeft}px`; + this.parentElement.appendChild(this); + itemAppend.classList.remove('active'); + } + } + else { + this.style.top = `${originalTop}px`; + this.style.left = `${originalLeft}px`; + console.log("FakAp"); + } // PointerUp Func End + + window.scroll({ + top: 0, + left: 0, + behavior: 'smooth' + }); + } + + +} // If mobile End -- cgit v1.2.3