From 2863a49dd0cdae245a741f533c8861c1c8b97fd6 Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Sat, 17 Sep 2022 00:17:34 +0300 Subject: init commit --- rannak/algus/kaart/css/kaart.css | 12 + rannak/algus/kaart/index.html | 1011 ++++++++++++++++++++ rannak/algus/kaart/js/kaart.js | 33 + rannak/algus/utlused/css/utlused.css | 110 +++ rannak/algus/utlused/index.html | 80 ++ rannak/algus/utlused/js/main.js | 210 ++++ rannak/mangud/kaitseliitlane/kuulsused/index.html | 105 ++ .../kaitseliitlane/kuulsused/pildid/galileo.jpg | Bin 0 -> 785072 bytes .../kaitseliitlane/kuulsused/pildid/ilves.jpg | Bin 0 -> 14525 bytes .../kaitseliitlane/kuulsused/pildid/kaljulaid.jpg | Bin 0 -> 17039 bytes .../kaitseliitlane/kuulsused/pildid/karis.jpg | Bin 0 -> 17011 bytes .../kaitseliitlane/kuulsused/pildid/meri.jpg | Bin 0 -> 17891 bytes .../kaitseliitlane/kuulsused/pildid/pats.jpg | Bin 0 -> 69867 bytes .../kaitseliitlane/kuulsused/pildid/queen.jpg | Bin 0 -> 18966 bytes .../kaitseliitlane/kuulsused/pildid/ruutel.jpg | Bin 0 -> 13224 bytes rannak/mangud/kaitseliitlane/kuulsused/script.js | 71 ++ rannak/mangud/kaitseliitlane/kuulsused/styles.css | 29 + rannak/mangud/perenaine/memory/img/alko.svg | 1 + rannak/mangud/perenaine/memory/img/butter.svg | 1 + rannak/mangud/perenaine/memory/img/jahu.svg | 85 ++ rannak/mangud/perenaine/memory/img/pasta.svg | 164 ++++ rannak/mangud/perenaine/memory/img/pesu.svg | 46 + rannak/mangud/perenaine/memory/img/riis.svg | 14 + rannak/mangud/perenaine/memory/img/sokid.svg | 138 +++ rannak/mangud/perenaine/memory/img/sool.svg | 1 + rannak/mangud/perenaine/memory/img/suhkur.svg | 47 + rannak/mangud/perenaine/memory/img/taga.svg | 62 ++ rannak/mangud/perenaine/memory/img/tikud.svg | 76 ++ rannak/mangud/perenaine/memory/index.html | 142 +++ rannak/mangud/perenaine/memory/script.js | 76 ++ rannak/mangud/perenaine/memory/style.css | 75 ++ rannak/mangud/perenaine/ristsona/index.html | 243 +++++ rannak/mangud/perenaine/ristsona/script.js | 13 + rannak/mangud/perenaine/ristsona/style.css | 27 + rannak/mangud/uliopilane/ajatelg/index.html | 12 + rannak/mangud/uliopilane/ajatelg/script.js | 0 rannak/mangud/uliopilane/ajatelg/styles.css | 0 rannak/rolliValik/index.html | 98 ++ rannak/rolliValik/pildid/arimees.jpg | Bin 0 -> 73556 bytes rannak/rolliValik/pildid/direktor.jpg | Bin 0 -> 167483 bytes rannak/rolliValik/pildid/kaitseliitlane.jpg | Bin 0 -> 137594 bytes rannak/rolliValik/pildid/opilane.jpg | Bin 0 -> 243242 bytes rannak/rolliValik/pildid/partorg.jpg | Bin 0 -> 100602 bytes rannak/rolliValik/pildid/perenaine.jpg | Bin 0 -> 81246 bytes rannak/rolliValik/rolliValik.css | 8 + rannak/rolliValik/rolliValik.js | 0 46 files changed, 2990 insertions(+) create mode 100644 rannak/algus/kaart/css/kaart.css create mode 100644 rannak/algus/kaart/index.html create mode 100644 rannak/algus/kaart/js/kaart.js create mode 100644 rannak/algus/utlused/css/utlused.css create mode 100644 rannak/algus/utlused/index.html create mode 100644 rannak/algus/utlused/js/main.js create mode 100644 rannak/mangud/kaitseliitlane/kuulsused/index.html create mode 100644 rannak/mangud/kaitseliitlane/kuulsused/pildid/galileo.jpg create mode 100644 rannak/mangud/kaitseliitlane/kuulsused/pildid/ilves.jpg create mode 100644 rannak/mangud/kaitseliitlane/kuulsused/pildid/kaljulaid.jpg create mode 100644 rannak/mangud/kaitseliitlane/kuulsused/pildid/karis.jpg create mode 100644 rannak/mangud/kaitseliitlane/kuulsused/pildid/meri.jpg create mode 100644 rannak/mangud/kaitseliitlane/kuulsused/pildid/pats.jpg create mode 100644 rannak/mangud/kaitseliitlane/kuulsused/pildid/queen.jpg create mode 100644 rannak/mangud/kaitseliitlane/kuulsused/pildid/ruutel.jpg create mode 100644 rannak/mangud/kaitseliitlane/kuulsused/script.js create mode 100644 rannak/mangud/kaitseliitlane/kuulsused/styles.css create mode 100644 rannak/mangud/perenaine/memory/img/alko.svg create mode 100644 rannak/mangud/perenaine/memory/img/butter.svg create mode 100644 rannak/mangud/perenaine/memory/img/jahu.svg create mode 100644 rannak/mangud/perenaine/memory/img/pasta.svg create mode 100644 rannak/mangud/perenaine/memory/img/pesu.svg create mode 100644 rannak/mangud/perenaine/memory/img/riis.svg create mode 100644 rannak/mangud/perenaine/memory/img/sokid.svg create mode 100644 rannak/mangud/perenaine/memory/img/sool.svg create mode 100644 rannak/mangud/perenaine/memory/img/suhkur.svg create mode 100644 rannak/mangud/perenaine/memory/img/taga.svg create mode 100644 rannak/mangud/perenaine/memory/img/tikud.svg create mode 100644 rannak/mangud/perenaine/memory/index.html create mode 100644 rannak/mangud/perenaine/memory/script.js create mode 100644 rannak/mangud/perenaine/memory/style.css create mode 100644 rannak/mangud/perenaine/ristsona/index.html create mode 100644 rannak/mangud/perenaine/ristsona/script.js create mode 100644 rannak/mangud/perenaine/ristsona/style.css create mode 100644 rannak/mangud/uliopilane/ajatelg/index.html create mode 100644 rannak/mangud/uliopilane/ajatelg/script.js create mode 100644 rannak/mangud/uliopilane/ajatelg/styles.css create mode 100644 rannak/rolliValik/index.html create mode 100644 rannak/rolliValik/pildid/arimees.jpg create mode 100644 rannak/rolliValik/pildid/direktor.jpg create mode 100644 rannak/rolliValik/pildid/kaitseliitlane.jpg create mode 100644 rannak/rolliValik/pildid/opilane.jpg create mode 100644 rannak/rolliValik/pildid/partorg.jpg create mode 100644 rannak/rolliValik/pildid/perenaine.jpg create mode 100644 rannak/rolliValik/rolliValik.css create mode 100644 rannak/rolliValik/rolliValik.js (limited to 'rannak') diff --git a/rannak/algus/kaart/css/kaart.css b/rannak/algus/kaart/css/kaart.css new file mode 100644 index 0000000..e395b95 --- /dev/null +++ b/rannak/algus/kaart/css/kaart.css @@ -0,0 +1,12 @@ +svg path{ + fill: #00394f; + stroke: #eee !important; + stroke-width: .25 !important; +} + +svg path:hover { + fill: #006284; + transition: 0.6s !important; + cursor: pointer !important; + +} \ No newline at end of file diff --git a/rannak/algus/kaart/index.html b/rannak/algus/kaart/index.html new file mode 100644 index 0000000..dd70e67 --- /dev/null +++ b/rannak/algus/kaart/index.html @@ -0,0 +1,1011 @@ + + + + + + Rännak + + + + + + + + +
+
+
+

Kaardimäng

+

Leia esimesed kümme riiki, kes tunnustasid De Facto Eesti iseseisvust +
(testiks leia Eesti, Holland ja Portugal)

+
+ +
+ Liigu Edasi +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/algus/kaart/js/kaart.js b/rannak/algus/kaart/js/kaart.js new file mode 100644 index 0000000..5d1a1a3 --- /dev/null +++ b/rannak/algus/kaart/js/kaart.js @@ -0,0 +1,33 @@ +const riigid = document.querySelectorAll("svg path") + +// Praegu Eesti, Portugal, Holland +const leitavad = ["EE", "PT", "NL"] +let leitud = []; + +// Add click listener +for (let i = 0; i < riigid.length; i++){ + if (leitavad.includes(riigid[i].id)){ + riigid[i].addEventListener("click", e => { + e.target.style.fill = "#00FF00"; + if (!leitud.includes(e.target.id)) + leitud.push(riigid[i].id); + + if (leitavad.length == leitud.length) + moveOnEnable(); + }) + } + else{ + riigid[i].addEventListener("click", e => { + e.target.style.fill = "#FF0000"; + }) + } +} + +function moveOnEnable(){ + const button = document.querySelector(".btn"); + button.classList.remove('disabled'); + button.setAttribute('aria-disabled', false); + console.log("done"); + + counter = 0; +} diff --git a/rannak/algus/utlused/css/utlused.css b/rannak/algus/utlused/css/utlused.css new file mode 100644 index 0000000..4f63f54 --- /dev/null +++ b/rannak/algus/utlused/css/utlused.css @@ -0,0 +1,110 @@ +/* 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; +} + +/* 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/algus/utlused/index.html b/rannak/algus/utlused/index.html new file mode 100644 index 0000000..ffdd8b4 --- /dev/null +++ b/rannak/algus/utlused/index.html @@ -0,0 +1,80 @@ + + + + + + + Kuulsad Ütlused + + + + + + + + + +
+ +
+
Heinz Valk
+
+ +
+
Edgar Savisaar
+
+ + +
+
Jüri Leesment
+
+ +
+
Hando Runnel
+
+ + +
+
Interrinde toeatjad
+
+ +
+
Üks veel?
+
+ + +
+
+ Liigu Edasi +
+
+ + + +
+ +
+ +
+
"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"
+
"Üks ütlus tuleks ehk veel siia?"
+
+ +
+ + + + + + + diff --git a/rannak/algus/utlused/js/main.js b/rannak/algus/utlused/js/main.js new file mode 100644 index 0000000..a67b6bd --- /dev/null +++ b/rannak/algus/utlused/js/main.js @@ -0,0 +1,210 @@ +// 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 button = document.querySelector(".btn"); + button.classList.remove('disabled'); + button.setAttribute('aria-disabled', false); + console.log("done"); + } + } // 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 button = document.querySelector(".btn"); + button.parentElement.classList.remove('btn'); + button.setAttribute('aria-disabled', false); + } + + } + 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 diff --git a/rannak/mangud/kaitseliitlane/kuulsused/index.html b/rannak/mangud/kaitseliitlane/kuulsused/index.html new file mode 100644 index 0000000..f692fd2 --- /dev/null +++ b/rannak/mangud/kaitseliitlane/kuulsused/index.html @@ -0,0 +1,105 @@ + + + + + + Kuusused + + + + + + + +
+

Kuulsused

+

Vii kokku inimese nimi ja nägu.

+ +
+
+ Liigu Edasi +
+
+ +
+ + +
+
+ +
+ Konstantin Päts img +
+
+ +
+
Konstantin Päts
+
Alar Karis
+
Lennart Meri
+
Arnold Rüütel
+
Toomas Hendrik Ilves
+
Kersti Kaljulaid
+
Elizabth II
+
Galileo Galilei
+
+ +
+ Alar Karis img +
+
+ +
+
+ + + +
+
+ +
+ Arnold Rüütel img +
+
+ +
+ Galileo img +
+
+ +
+ Queen img +
+
+ +
+
+ + + +
+
+ +
+ Kersti Kaljulaid img +
+
+ +
+ Toomas Hendrik Ilves img +
+
+ +
+ Lennart Meri img +
+
+ +
+
+ + + + + + + diff --git a/rannak/mangud/kaitseliitlane/kuulsused/pildid/galileo.jpg b/rannak/mangud/kaitseliitlane/kuulsused/pildid/galileo.jpg new file mode 100644 index 0000000..311780c Binary files /dev/null and b/rannak/mangud/kaitseliitlane/kuulsused/pildid/galileo.jpg differ diff --git a/rannak/mangud/kaitseliitlane/kuulsused/pildid/ilves.jpg b/rannak/mangud/kaitseliitlane/kuulsused/pildid/ilves.jpg new file mode 100644 index 0000000..026be4a Binary files /dev/null and b/rannak/mangud/kaitseliitlane/kuulsused/pildid/ilves.jpg differ diff --git a/rannak/mangud/kaitseliitlane/kuulsused/pildid/kaljulaid.jpg b/rannak/mangud/kaitseliitlane/kuulsused/pildid/kaljulaid.jpg new file mode 100644 index 0000000..2b1a230 Binary files /dev/null and b/rannak/mangud/kaitseliitlane/kuulsused/pildid/kaljulaid.jpg differ diff --git a/rannak/mangud/kaitseliitlane/kuulsused/pildid/karis.jpg b/rannak/mangud/kaitseliitlane/kuulsused/pildid/karis.jpg new file mode 100644 index 0000000..ebaf172 Binary files /dev/null and b/rannak/mangud/kaitseliitlane/kuulsused/pildid/karis.jpg differ diff --git a/rannak/mangud/kaitseliitlane/kuulsused/pildid/meri.jpg b/rannak/mangud/kaitseliitlane/kuulsused/pildid/meri.jpg new file mode 100644 index 0000000..978f915 Binary files /dev/null and b/rannak/mangud/kaitseliitlane/kuulsused/pildid/meri.jpg differ diff --git a/rannak/mangud/kaitseliitlane/kuulsused/pildid/pats.jpg b/rannak/mangud/kaitseliitlane/kuulsused/pildid/pats.jpg new file mode 100644 index 0000000..07b4fff Binary files /dev/null and b/rannak/mangud/kaitseliitlane/kuulsused/pildid/pats.jpg differ diff --git a/rannak/mangud/kaitseliitlane/kuulsused/pildid/queen.jpg b/rannak/mangud/kaitseliitlane/kuulsused/pildid/queen.jpg new file mode 100644 index 0000000..bc0aea5 Binary files /dev/null and b/rannak/mangud/kaitseliitlane/kuulsused/pildid/queen.jpg differ diff --git a/rannak/mangud/kaitseliitlane/kuulsused/pildid/ruutel.jpg b/rannak/mangud/kaitseliitlane/kuulsused/pildid/ruutel.jpg new file mode 100644 index 0000000..5cf9c07 Binary files /dev/null and b/rannak/mangud/kaitseliitlane/kuulsused/pildid/ruutel.jpg differ diff --git a/rannak/mangud/kaitseliitlane/kuulsused/script.js b/rannak/mangud/kaitseliitlane/kuulsused/script.js new file mode 100644 index 0000000..c2ef0d7 --- /dev/null +++ b/rannak/mangud/kaitseliitlane/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 button = document.querySelector(".btn"); + button.classList.remove('disabled'); + button.setAttribute('aria-disabled', false); + } +} diff --git a/rannak/mangud/kaitseliitlane/kuulsused/styles.css b/rannak/mangud/kaitseliitlane/kuulsused/styles.css new file mode 100644 index 0000000..0a6d4b3 --- /dev/null +++ b/rannak/mangud/kaitseliitlane/kuulsused/styles.css @@ -0,0 +1,29 @@ +* { + box-sizing: border-box !important; +} + +img { + max-width: 15rem !important; + height: auto !important; + padding: .3rem; +} + +.lists .list .list-item { + background-color: #B6977D !important; + color: #21201E; + margin: 0.3rem 0; + height: 2.5rem; + border-radius: 8px !important; +} + +.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; +} diff --git a/rannak/mangud/perenaine/memory/img/alko.svg b/rannak/mangud/perenaine/memory/img/alko.svg new file mode 100644 index 0000000..e7bcc31 --- /dev/null +++ b/rannak/mangud/perenaine/memory/img/alko.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rannak/mangud/perenaine/memory/img/butter.svg b/rannak/mangud/perenaine/memory/img/butter.svg new file mode 100644 index 0000000..48aeb4c --- /dev/null +++ b/rannak/mangud/perenaine/memory/img/butter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rannak/mangud/perenaine/memory/img/jahu.svg b/rannak/mangud/perenaine/memory/img/jahu.svg new file mode 100644 index 0000000..3ac729f --- /dev/null +++ b/rannak/mangud/perenaine/memory/img/jahu.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memory/img/pasta.svg b/rannak/mangud/perenaine/memory/img/pasta.svg new file mode 100644 index 0000000..d46b576 --- /dev/null +++ b/rannak/mangud/perenaine/memory/img/pasta.svg @@ -0,0 +1,164 @@ + + + + + macaroni + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + OpenClipart + + + Macaroni + 2011-01-20T19:40:03 + A large piece of macaroni style pasta. + https://openclipart.org/detail/105709 + + + AntumDeluge + + + + + food + macaroni + noodle + pasta + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memory/img/pesu.svg b/rannak/mangud/perenaine/memory/img/pesu.svg new file mode 100644 index 0000000..6d38faa --- /dev/null +++ b/rannak/mangud/perenaine/memory/img/pesu.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memory/img/riis.svg b/rannak/mangud/perenaine/memory/img/riis.svg new file mode 100644 index 0000000..8376e61 --- /dev/null +++ b/rannak/mangud/perenaine/memory/img/riis.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memory/img/sokid.svg b/rannak/mangud/perenaine/memory/img/sokid.svg new file mode 100644 index 0000000..4d3eb3d --- /dev/null +++ b/rannak/mangud/perenaine/memory/img/sokid.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memory/img/sool.svg b/rannak/mangud/perenaine/memory/img/sool.svg new file mode 100644 index 0000000..524cda1 --- /dev/null +++ b/rannak/mangud/perenaine/memory/img/sool.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rannak/mangud/perenaine/memory/img/suhkur.svg b/rannak/mangud/perenaine/memory/img/suhkur.svg new file mode 100644 index 0000000..a82c743 --- /dev/null +++ b/rannak/mangud/perenaine/memory/img/suhkur.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memory/img/taga.svg b/rannak/mangud/perenaine/memory/img/taga.svg new file mode 100644 index 0000000..a81a7dc --- /dev/null +++ b/rannak/mangud/perenaine/memory/img/taga.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memory/img/tikud.svg b/rannak/mangud/perenaine/memory/img/tikud.svg new file mode 100644 index 0000000..12be82c --- /dev/null +++ b/rannak/mangud/perenaine/memory/img/tikud.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memory/index.html b/rannak/mangud/perenaine/memory/index.html new file mode 100644 index 0000000..c19c7d5 --- /dev/null +++ b/rannak/mangud/perenaine/memory/index.html @@ -0,0 +1,142 @@ + + + + + + Memori + + + + + + + +
+
+

Memori

+

Mängu läbimiseks leia üles kõik kümme paari

+
+
+ +
+ +
+ Butter + taga +
+ +
+ Butter + taga +
+ + +
+ tikud + taga +
+ +
+ Tikud + taga +
+ + +
+ Alko + taga +
+ +
+ Alko + taga +
+ + +
+ Jahu + taga +
+ +
+ Jahu + taga +
+ + +
+ Pasta + taga +
+ +
+ Pasta + taga +
+ + +
+ Pesu + taga +
+ +
+ Pesu + taga +
+ + +
+ Riis + taga +
+ +
+ Riis + taga +
+ + +
+ Sokid + taga +
+ +
+ sokid + taga +
+ + +
+ Sool + taga +
+ +
+ Sool + taga +
+ + +
+ suhkur + taga +
+ +
+ suhkur + taga +
+ +
+ +
+
+ Liigu Edasi +
+
+ + + + diff --git a/rannak/mangud/perenaine/memory/script.js b/rannak/mangud/perenaine/memory/script.js new file mode 100644 index 0000000..1a06fd9 --- /dev/null +++ b/rannak/mangud/perenaine/memory/script.js @@ -0,0 +1,76 @@ +const cards = document.querySelectorAll('.memory-card'); + +let hasFlippedCard = false; +let lockBoard = false; +let firstCard, secondCard; +let counter = 0; + +function flipCard() { + if (lockBoard) return; + if (this === firstCard) return; + + this.classList.add('flip'); + + if (!hasFlippedCard) { + hasFlippedCard = true; + firstCard = this; + + return; + } + + secondCard = this; + checkForMatch(); +} + +function checkForMatch() { + let isMatch = firstCard.dataset.framework === secondCard.dataset.framework; + + isMatch ? disableCards() : unflipCards(); +} + +function disableCards() { + firstCard.removeEventListener('click', flipCard); + secondCard.removeEventListener('click', flipCard); + counter++; + + console.log(counter) + if (counter >= 10) moveOnEnable(); + resetBoard(); +} + +function unflipCards() { + lockBoard = true; + + setTimeout(() => { + firstCard.classList.remove('flip'); + secondCard.classList.remove('flip'); + + resetBoard(); + }, 1500); +} + +function resetBoard() { + [hasFlippedCard, lockBoard] = [false, false]; + [firstCard, secondCard] = [null, null]; +} + +(function shuffle() { + cards.forEach(card => { + let randomPos = Math.floor(Math.random() * 12); + card.style.order = randomPos; + }); +})(); + +cards.forEach(card => card.addEventListener('click', flipCard)); + + +// Button func + +function moveOnEnable(){ + const button = document.querySelector(".btn"); + button.classList.remove('disabled'); + button.setAttribute('aria-disabled', false); + console.log("done"); + + counter = 0; +} diff --git a/rannak/mangud/perenaine/memory/style.css b/rannak/mangud/perenaine/memory/style.css new file mode 100644 index 0000000..600f91d --- /dev/null +++ b/rannak/mangud/perenaine/memory/style.css @@ -0,0 +1,75 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + height: 100vh; + display: flex; + background: #284F8F !important; +} + +.memory-game { + width: 640px; + height: 640px; + margin: auto; + display: flex; + flex-wrap: wrap; + perspective: 1000px; +} + +.memory-card { + width: calc(20% - 10px); + height: calc(25% - 10px); + margin: 5px; + position: relative; + transform: scale(1); + transform-style: preserve-3d; + transition: transform .5s; + box-shadow: 1px 1px 1px rgba(0,0,0,.3); +} + +.memory-card:active { + transform: scale(0.97); + transition: transform .2s; +} + +.memory-card.flip { + transform: rotateY(180deg); +} + +.front-face, +.back-face { + width: 100%; + height: 100%; + padding: 20px; + position: absolute; + border-radius: 5px; + background: #F1F5FF; + backface-visibility: hidden; +} + +.front-face { + transform: rotateY(180deg); +} + +/* Side stuff */ + +.left, .right{ + width: calc((100vw - 640px) / 2) !important; + position: relative; +} + +.left-text{ + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.left-text h1{ + font-weight: bold; + padding-bottom: 5px; +} diff --git a/rannak/mangud/perenaine/ristsona/index.html b/rannak/mangud/perenaine/ristsona/index.html new file mode 100644 index 0000000..96df3bc --- /dev/null +++ b/rannak/mangud/perenaine/ristsona/index.html @@ -0,0 +1,243 @@ + + + + + + Ristsõna + + + + + + + +
+

Ristsõna

+

Lahenda ristsõna, vastuseks tuleb retsept?

+ +
+
+ Liigu Edasi +
+
+ +
+ +
+
+ + + + +
+ +
+
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
1K
U
R
→K
+ +
+
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
+
+ +
+ + + + diff --git a/rannak/mangud/perenaine/ristsona/script.js b/rannak/mangud/perenaine/ristsona/script.js new file mode 100644 index 0000000..eac2fc2 --- /dev/null +++ b/rannak/mangud/perenaine/ristsona/script.js @@ -0,0 +1,13 @@ +console.log("Brrrr");; +let counter = 0; + +// Button func + +function moveOnEnable(){ + const button = document.querySelector(".btn"); + button.classList.remove('disabled'); + button.setAttribute('aria-disabled', false); + console.log("done"); + + counter = 0; +} diff --git a/rannak/mangud/perenaine/ristsona/style.css b/rannak/mangud/perenaine/ristsona/style.css new file mode 100644 index 0000000..00c55b6 --- /dev/null +++ b/rannak/mangud/perenaine/ristsona/style.css @@ -0,0 +1,27 @@ +* { + box-sizing: border-box; +} + +table{ + margin: 20px auto; +} + +.vastus td{ + border: 5px solid lime !important; +} + +td { + border: 4px solid white !important; + width: 40px !important; + height: 40px !important; + font-weight: bold; +} + +.main{ + display: flex; +} + +.left, .right{ + margin: 10px; + width: calc((100vw - (13*40px) - 40px) / 2) !important; +} diff --git a/rannak/mangud/uliopilane/ajatelg/index.html b/rannak/mangud/uliopilane/ajatelg/index.html new file mode 100644 index 0000000..b7e7c2f --- /dev/null +++ b/rannak/mangud/uliopilane/ajatelg/index.html @@ -0,0 +1,12 @@ + + + + + Ajatelg + + + + + + + diff --git a/rannak/mangud/uliopilane/ajatelg/script.js b/rannak/mangud/uliopilane/ajatelg/script.js new file mode 100644 index 0000000..e69de29 diff --git a/rannak/mangud/uliopilane/ajatelg/styles.css b/rannak/mangud/uliopilane/ajatelg/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/rannak/rolliValik/index.html b/rannak/rolliValik/index.html new file mode 100644 index 0000000..1c33177 --- /dev/null +++ b/rannak/rolliValik/index.html @@ -0,0 +1,98 @@ + + + + + + Rolli valik + + + + + + + + +
+

Rollide valik

+

Tee valik hoolikalt, sest selle põhjal varieeriuvad järgmised ülesanded

+
+ +
+
+ +
+
+ ... +
+
Üliõpilane
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis expedita nihil quam possimus quidem iure rerum eius ut, et ducimus tempora, temporibus officia modi. Quas!

+ Vali! +
+
+
+ +
+
+ ... +
+
Partorg
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia debitis dignissimos esse odio quaerat. Neque suscipit asperiores repellendus, quo fugit nam amet vero reprehenderit obcaecati.

+ Vali! +
+
+
+ + +
+
+ ... +
+
Direktor
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum voluptatem fugit minima eum labore. Amet, nobis? Cupiditate inventore quo voluptatem soluta! Sapiente excepturi deleniti assumenda!

+ Vali! +
+
+
+ +
+
+ ... +
+
Perenaine
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim alias officia tempore, veritatis provident consectetur voluptatem ea labore. Maxime porro vero omnis perspiciatis accusantium sint!

+ Vali! +
+
+
+ +
+
+ ... +
+
Kaitseliitlane
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi autem voluptatibus aliquid, praesentium, vel aut consequatur expedita laudantium ducimus, saepe laborum a consectetur quas nam?

+ Vali! +
+
+
+ +
+
+ ... +
+
Ärimees
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem eveniet aut excepturi cupiditate explicabo quasi, quam, pariatur qui nemo deserunt aspernatur! Nostrum consequatur molestiae quasi.

+ Vali! +
+
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/rannak/rolliValik/pildid/arimees.jpg b/rannak/rolliValik/pildid/arimees.jpg new file mode 100644 index 0000000..3cb21cf Binary files /dev/null and b/rannak/rolliValik/pildid/arimees.jpg differ diff --git a/rannak/rolliValik/pildid/direktor.jpg b/rannak/rolliValik/pildid/direktor.jpg new file mode 100644 index 0000000..74f2cf5 Binary files /dev/null and b/rannak/rolliValik/pildid/direktor.jpg differ diff --git a/rannak/rolliValik/pildid/kaitseliitlane.jpg b/rannak/rolliValik/pildid/kaitseliitlane.jpg new file mode 100644 index 0000000..37ae271 Binary files /dev/null and b/rannak/rolliValik/pildid/kaitseliitlane.jpg differ diff --git a/rannak/rolliValik/pildid/opilane.jpg b/rannak/rolliValik/pildid/opilane.jpg new file mode 100644 index 0000000..7e42755 Binary files /dev/null and b/rannak/rolliValik/pildid/opilane.jpg differ diff --git a/rannak/rolliValik/pildid/partorg.jpg b/rannak/rolliValik/pildid/partorg.jpg new file mode 100644 index 0000000..2df392c Binary files /dev/null and b/rannak/rolliValik/pildid/partorg.jpg differ diff --git a/rannak/rolliValik/pildid/perenaine.jpg b/rannak/rolliValik/pildid/perenaine.jpg new file mode 100644 index 0000000..94c5b54 Binary files /dev/null and b/rannak/rolliValik/pildid/perenaine.jpg differ diff --git a/rannak/rolliValik/rolliValik.css b/rannak/rolliValik/rolliValik.css new file mode 100644 index 0000000..cadb5b6 --- /dev/null +++ b/rannak/rolliValik/rolliValik.css @@ -0,0 +1,8 @@ + +.card{ + transition: transform 0.25s !important; +} + +.card:hover{ + transform: scale(1.1) !important; +} \ No newline at end of file diff --git a/rannak/rolliValik/rolliValik.js b/rannak/rolliValik/rolliValik.js new file mode 100644 index 0000000..e69de29 -- cgit v1.2.3