diff options
21 files changed, 710 insertions, 274 deletions
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/28DaysLater.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/28DaysLater.ttf Binary files differnew file mode 100644 index 0000000..0f8869b --- /dev/null +++ b/rannak/mangud/kaitseliitlane/salakood/fonts/28DaysLater.ttf diff --git a/rannak/mangud/kaitseliitlane/salakood/index.html b/rannak/mangud/kaitseliitlane/salakood/index.html index 26502a6..44bac05 100644 --- a/rannak/mangud/kaitseliitlane/salakood/index.html +++ b/rannak/mangud/kaitseliitlane/salakood/index.html @@ -21,9 +21,7 @@ <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? + Dešifreeri sõnum valides numbri, ning leides sellele sobiva tähe. </p> <div class="text-center"> @@ -40,31 +38,33 @@ <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> + + + <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> diff --git a/rannak/mangud/kaitseliitlane/salakood/pildid/bk.jpg b/rannak/mangud/kaitseliitlane/salakood/pildid/bk.jpg Binary files differnew file mode 100644 index 0000000..622516a --- /dev/null +++ b/rannak/mangud/kaitseliitlane/salakood/pildid/bk.jpg diff --git a/rannak/mangud/kaitseliitlane/salakood/style.css b/rannak/mangud/kaitseliitlane/salakood/style.css index 537477f..8a084d2 100644 --- a/rannak/mangud/kaitseliitlane/salakood/style.css +++ b/rannak/mangud/kaitseliitlane/salakood/style.css @@ -1,3 +1,9 @@ +@font-face { + font-family: 'fontUno'; + src: url('fonts/28DaysLater.ttf'); +} + + * { box-sizing: border-box; } @@ -113,6 +119,9 @@ input { margin: 1rem; } +span, h6, table, h1{ + font-family:'fontUno'; +} /* Main */ @@ -123,25 +132,41 @@ input { align-items: center; } + +.done { + color: #00b300; +} + +.selected { + background: #93bdbd; +} + td { - border: 4px solid white !important; width: 4rem !important; height: 4rem !important; font-weight: bold; + border-radius: 20px !important; } +/* Responsivness */ -.done { - color: #bd1393; -} -.selected { - background: lime; +@media screen and (max-width: 1700px) { + td { + width: 3rem !important; + height: 3rem !important; + } + .main {margin-top: 4rem;} } - +@media screen and (max-width: 1500px) { + td { + width: 2rem !important; + height: 2rem !important; + } +} diff --git a/rannak/mangud/kaitseliitlane/sundmused/script.js b/rannak/mangud/kaitseliitlane/sundmused/script.js index daa263d..3b92b1d 100644 --- a/rannak/mangud/kaitseliitlane/sundmused/script.js +++ b/rannak/mangud/kaitseliitlane/sundmused/script.js @@ -4,6 +4,10 @@ document.addEventListener('DOMContentLoaded', () => { }); + + +// Draggable Items + const list_items = document.querySelectorAll(".list-item"); const lists = document.querySelectorAll(".list"); @@ -25,33 +29,47 @@ for (let i=0; i < list_items.length; i++){ checkIfAllGood(); }); - for (let j=0; j < lists.length; j++){ - const list = lists[j]; +} + - /* Event Listeners */ +// Dropping Spots - list.addEventListener("dragenter",e => (e.preventDefault())); +for (let j=0; j < lists.length; j++){ + const list = lists[j]; - list.addEventListener("dragover",e => { - e.preventDefault(); - list.style.backgroundColor = "rgba(0,0,0,0.5)"; - }); + /* Event Listeners */ + list.addEventListener("dragenter",e => (e.preventDefault())); - list.addEventListener("dragleave",e => { - list.style.backgroundColor = "rgba(0,0,0,0.3)"; - }); + list.addEventListener("dragover",e => { + e.preventDefault(); + list.style.backgroundColor = "rgba(0,0,0,0.9)"; + list.style.transform = "scale(1.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)"; - }) - } + list.addEventListener("dragleave",e => { + list.style.backgroundColor = "rgba(0,0,0,0.3)"; + list.style.transform = "scale(1)"; + }); + + list.addEventListener("drop",e => { + if (list.children.length == 0 || list.className.includes("startBasket")) + list.append(draggedItem); + list.style.backgroundColor = "rgba(0,0,0,0.3)"; + list.style.transform = "scale(1)"; + + }) } + + + + + + + function checkIfAllGood(){ let rightDone = []; @@ -75,3 +93,24 @@ function checkIfAllGood(){ btn.onclick = () => location.href = ""; } } + + + + +// Smooth scroll stuff + +// const ekraaniPikkus = window.innerHeight; +// +// window.ondragover = function(e){ +// //console.log(e.clientY); +// +// if (e.clientY > (ekraaniPikkus - 300)){ +// window.scrollTo(0, 400); +// } +// +// else if (e.clientY < (300)) +// window.scrollTo(0, -400); +// } + + + diff --git a/rannak/mangud/partorg/kuulsused.bak/index.html b/rannak/mangud/partorg/kuulsused.bak/index.html new file mode 100644 index 0000000..52a5245 --- /dev/null +++ b/rannak/mangud/partorg/kuulsused.bak/index.html @@ -0,0 +1,139 @@ +<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>Kuulsused</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">Olulised isikud</h1> + <p>Vii kokku inimese nimi ja nägu.</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.png"/> + </div> + + <div class="modal-body"> + Seltsimehed noored, olen meie ajakirjandusest, mis kahjuks ei ole enam maailma eesrindlikum, + välja lõiganud mitmete tänapäeva ENSV elus üht või teistpidi silma paistnud inimeste pildid. + <br/> + Mõned neist inimestest mulle ei meeldi, natsionalistid! Kas ka teie tunnete neid inimesi? + <br/> + Teeme proovi, <strong>ühendage nimi ja talle sobiv foto.</strong> + <br/> <br/> + Huvitav kas neid inimesi mäletatakse ka aastate pärast? + </div> + + </div> + </div> + </div> + + + <!-- Esimene rida --> + <div class="lists"> + <div class="row"> + + <div class="col imgBox text-center"> + <img src="pildid/laar.jpg" alt="Mart Laar img"> + <p> + 1990-1992 Eesti Vabariigi Ülemnõukogu liige. Eesti muinsuskaitse seltsi, Eesti komitee, Eesti kongressi liige. + </p> + <div id="laar" class="list"></div> + </div> + + <div class="list col startBasket text-center"> + <div id="laar" class="list-item" draggable="true">Mart Laar</div> + <div id="lauristin" class="list-item" draggable="true">Marju Lauristin</div> + <div id="ruutel" class="list-item" draggable="true">Arnold Rüütel</div> + <div id="savisaar" class="list-item" draggable="true">Edgar Savisaar</div> + <div id="kogan" class="list-item" draggable="true">Jevgeni Kogan</div> + <div id="valk" class="list-item" draggable="true">Heinz Valk</div> + </div> + + <div class="col imgBox text-center"> + <img src="pildid/lauristin.jpg" alt="Marju Lauristin img"> + <p> + 1990-1992 EV Ülemnõukogu liige, juhataja asetäitja, 1990 Eesti Komitee liige + </p> + <div id="lauristin" class="list"></div> + </div> + + </div> + </div> + + <!-- Teine rida --> + + <div class="lists"> + <div class="row"> + + <div class="col-3 imgBox text-center"> + <img src="pildid/ruutel.jpg" alt="Arnold Rüütel img"> + <p> + 1990-1992 ENSV/ EV Ülemnõukogu esimees. + </p> + <div id="ruutel" class="list"></div> + </div> + + <div class="col-3 imgBox text-center"> + <img src="pildid/savisaar.jpg" alt="Savisaar img"> + <p> + Üks Rahvarinde loojatest, 1990 Eesti NSV Valitsuse esimees, 20.08.1991 Eesti Vabariigi peaministri kohusetäitja. + </p> + <div id="savisaar" class="list"></div> + </div> + + <div class="col-3 imgBox text-center"> + <img src="pildid/valk.jpg" alt="Heniz img"> + <p> + Kunstnik, Rahvarinde üks asutajaliikmeid, suurepärane kõnepidaja, andis meie revolutsioonile nime. + </p> + <div id="valk" class="list"></div> + </div> + + <div class="col imgBox text-center"> + <img src="pildid/kogan.jpg" alt="Kogan img"> + <p> + Interrinde üks loojatest (1988) ning hiljem selle esimees. NSVL Rahvasaadikute kongressi liige, osales impeeriumimeelse saadikuterühma “Sojuz” tegevuses. + </p> + <div id="kogan" 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/partorg/kuulsused.bak/pildid/avatar.png b/rannak/mangud/partorg/kuulsused.bak/pildid/avatar.png Binary files differnew file mode 100644 index 0000000..485a70c --- /dev/null +++ b/rannak/mangud/partorg/kuulsused.bak/pildid/avatar.png diff --git a/rannak/mangud/partorg/kuulsused.bak/pildid/kogan.jpg b/rannak/mangud/partorg/kuulsused.bak/pildid/kogan.jpg Binary files differnew file mode 100644 index 0000000..9c592f3 --- /dev/null +++ b/rannak/mangud/partorg/kuulsused.bak/pildid/kogan.jpg diff --git a/rannak/mangud/partorg/kuulsused.bak/pildid/laar.jpg b/rannak/mangud/partorg/kuulsused.bak/pildid/laar.jpg Binary files differnew file mode 100644 index 0000000..a7cea18 --- /dev/null +++ b/rannak/mangud/partorg/kuulsused.bak/pildid/laar.jpg diff --git a/rannak/mangud/partorg/kuulsused.bak/pildid/lauristin.jpg b/rannak/mangud/partorg/kuulsused.bak/pildid/lauristin.jpg Binary files differnew file mode 100644 index 0000000..67c788d --- /dev/null +++ b/rannak/mangud/partorg/kuulsused.bak/pildid/lauristin.jpg diff --git a/rannak/mangud/partorg/kuulsused.bak/pildid/ruutel.jpg b/rannak/mangud/partorg/kuulsused.bak/pildid/ruutel.jpg Binary files differnew file mode 100644 index 0000000..389287d --- /dev/null +++ b/rannak/mangud/partorg/kuulsused.bak/pildid/ruutel.jpg diff --git a/rannak/mangud/partorg/kuulsused.bak/pildid/savisaar.jpg b/rannak/mangud/partorg/kuulsused.bak/pildid/savisaar.jpg Binary files differnew file mode 100644 index 0000000..57815c8 --- /dev/null +++ b/rannak/mangud/partorg/kuulsused.bak/pildid/savisaar.jpg diff --git a/rannak/mangud/partorg/kuulsused.bak/pildid/valk.jpg b/rannak/mangud/partorg/kuulsused.bak/pildid/valk.jpg Binary files differnew file mode 100644 index 0000000..c7afa8c --- /dev/null +++ b/rannak/mangud/partorg/kuulsused.bak/pildid/valk.jpg diff --git a/rannak/mangud/partorg/kuulsused.bak/script.js b/rannak/mangud/partorg/kuulsused.bak/script.js new file mode 100644 index 0000000..aa054dd --- /dev/null +++ b/rannak/mangud/partorg/kuulsused.bak/script.js @@ -0,0 +1,133 @@ +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; + + +// Draggable Items + +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(); + }); + + +} + + + + +// Dropping spots + +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.9)"; + list.style.transform = "scale(1.3)"; + }); + + + list.addEventListener("dragleave",e => { + list.style.backgroundColor = "rgba(0,0,0,0.3)"; + list.style.transform = "scale(1)"; + }); + + + list.addEventListener("drop",e => { + if (list.children.length == 0 || list.className.includes("startBasket")) + list.append(draggedItem); + list.style.backgroundColor = "rgba(0,0,0,0.3)"; + list.style.transform = "scale(1)"; + + }) +} + + + +// Smooth scroll stuff + +// const ekraaniPikkus = window.innerHeight; +// let d; +// if (ekraaniPikkus > 800) +// d = ekraaniPikkus / 8; +// else +// d = ekraaniPikkus / 4; +// +// console.log(ekraaniPikkus); +// console.log(document.body.scrollHeight); +// const maxScroll = document.body.scrollHeight; +// +// window.ondragover = function(e){ +// console.log("Pos: ",e.clientY); +// console.log(d); +// console.log("X: ", e.y); +// //console.log(e); +// +// if (e.clientY > (ekraaniPikkus - d)){ +// console.log("Should scroll down"); +// if (maxScroll > e.y+d) +// window.scrollTo(0, e.y + d); +// else +// window.scrollTo(0, maxScroll); +// } +// else if (e.clientY < (d)) +// window.scrollTo(0, e.y - d); +// } + + + + + +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); + } + } + } // For loop end + + if (rightDone.length == 6) { + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = "../plakat"; + } +} + + + +/* The Scrolling on thing while dragging */ +// window.scrollTo(0, 500); diff --git a/rannak/mangud/partorg/kuulsused.bak/styles.css b/rannak/mangud/partorg/kuulsused.bak/styles.css new file mode 100644 index 0000000..f4fb4c8 --- /dev/null +++ b/rannak/mangud/partorg/kuulsused.bak/styles.css @@ -0,0 +1,101 @@ +* { + box-sizing: border-box !important; +} + +.lists{ + margin-bottom: 20px !important; +} +/* Modal Stuff */ + + +.avatar { + border-radius: 20px; + width: 100% !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; +} + + +/* Move On */ + +.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; +} + + +/* Other */ + + +.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; +} diff --git a/rannak/mangud/partorg/kuulsused/index.html b/rannak/mangud/partorg/kuulsused/index.html index 4dfe755..b0503a2 100644 --- a/rannak/mangud/partorg/kuulsused/index.html +++ b/rannak/mangud/partorg/kuulsused/index.html @@ -2,8 +2,8 @@ <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> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Kuulsused</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"> @@ -12,7 +12,7 @@ <body class="bg-dark text-white"> <div class="container text-center text-white align-items-center pb-5"> - <h1 class="pb-1 pt-2">Kuulsused</h1> + <h1 class="pb-1 pt-2">Olulised isikud</h1> <p>Vii kokku inimese nimi ja nägu.</p> <div class="row"> @@ -59,78 +59,115 @@ </div> - <!-- Esimene rida --> - <div class="lists"> - <div class="row"> - <div class="col imgBox text-center"> - <img src="pildid/laar.jpg" alt="Mart Laar img"> - <p> - "1990-1992 Eesti Vabariigi Ülemnõukogu liige. Eesti muinsuskaitse seltsi, Eesti komitee, Eesti kongressi liige." - </p> - <div id="laar" class="list"></div> - </div> +<div class="mainer"> - <div class="list col startBasket text-center"> - <div id="laar" class="list-item" draggable="true">Mart Laar</div> - <div id="lauristin" class="list-item" draggable="true">Marju Lauristin</div> - <div id="ruutel" class="list-item" draggable="true">Arnold Rüütel</div> - <div id="savisaar" class="list-item" draggable="true">Edgar Savisaar</div> - <div id="kogan" class="list-item" draggable="true">Jevgeni Kogan</div> - <div id="valk" class="list-item" draggable="true">Heinz Valk</div> - </div> - <div class="col imgBox text-center"> - <img src="pildid/lauristin.jpg" alt="Marju Lauristin img"> - <p> - "1990-1992 EV Ülemnõukogu liige, juhataja asetäitja, 1990 Eesti Komitee liige" - </p> + <div class="list col startBasket text-center"> + <div id="laar" class="list-item" draggable="true">Mart Laar</div> + <div id="lauristin" class="list-item" draggable="true">Marju Lauristin</div> + <div id="ruutel" class="list-item" draggable="true">Arnold Rüütel</div> + <div id="savisaar" class="list-item" draggable="true">Edgar Savisaar</div> + <div id="kogan" class="list-item" draggable="true">Jevgeni Kogan</div> + <div id="valk" class="list-item" draggable="true">Heinz Valk</div> + </div> + + <!-- Carousell --> + + <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> + + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button> + </div> + + <div class="carousel-inner"> + + <div class="carousel-item active"> + <img src="pildid/laar.jpg" class="d-block" alt="Mart Laar img"> + <div class="text"> + <p> + 1990-1992 Eesti Vabariigi Ülemnõukogu liige. Eesti muinsuskaitse seltsi, Eesti komitee, Eesti kongressi liige. + </p> + </div> + <div id="laar" class="list"></div> + </div> + + <div class="carousel-item"> + <img src="pildid/lauristin.jpg" class="d-block" alt="Marju Lauristin img"> + <div class="text"> + <p> + 1990-1992 EV Ülemnõukogu liige, juhataja asetäitja, 1990 Eesti Komitee liige + </p> + </div> <div id="lauristin" class="list"></div> - </div> + </div> - </div> - </div> - <!-- Teine rida --> + <div class="carousel-item"> + <img src="pildid/ruutel.jpg" class="d-block" alt="Arnold Rüütel img"> + <div class="text"> + <p> + 1990-1992 ENSV/ EV Ülemnõukogu esimees. + </p> + </div> + <div id="ruutel" class="list"></div> + </div> - <div class="lists"> - <div class="row"> - <div class="col-3 imgBox text-center"> - <img src="pildid/ruutel.jpg" alt="Arnold Rüütel img"> - <p> - "1990-1992 ENSV/ EV Ülemnõukogu esimees." - </p> - <div id="ruutel" class="list"></div> - </div> + <div class="carousel-item"> + <img src="pildid/savisaar.jpg" class="d-block" alt="Savisaar img"> + <div class="text"> + <p> + Üks Rahvarinde loojatest, 1990 Eesti NSV Valitsuse esimees, 20.08.1991 Eesti Vabariigi peaministri kohusetäitja. + </p> + </div> + <div id="savisaar" class="list"></div> + </div> + + + <div class="carousel-item"> + <img src="pildid/valk.jpg" class="d-block" alt="Heniz img"> + <div class="text"> + <p> + Kunstnik, Rahvarinde üks asutajaliikmeid, suurepärane kõnepidaja, andis meie revolutsioonile nime. + </p> + </div> + <div id="valk" class="list"></div> + </div> - <div class="col-3 imgBox text-center"> - <img src="pildid/savisaar.jpg" alt="Savisaar img"> - <p> - "üks Rahvarinde loojatest, 1990 Eesti NSV Valitsuse esimees, 20.08.1991 Eesti Vabariigi peaministri kohusetäitja" - </p> - <div id="savisaar" class="list"></div> - </div> - <div class="col-3 imgBox text-center"> - <img src="pildid/valk.jpg" alt="Heniz img"> - <p> - "kunstnik, Rahvarinde üks asutajaliikmeid, suurepärane kõnepidaja, andis meie revolutsioonile nime." - </p> - <div id="valk" class="list"></div> - </div> + <div class="carousel-item"> + <img src="pildid/kogan.jpg" class="d-block" alt="Kogan img"> + <div class="text"> + <p> + Interrinde üks loojatest (1988) ning hiljem selle esimees. NSVL Rahvasaadikute kongressi liige, osales impeeriumimeelse saadikuterühma “Sojuz” tegevuses. + </p> + </div> + <div id="kogan" class="list"></div> + </div> + + </div> + + + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> + <span class="carousel-control-prev-icon" aria-hidden="true"></span> + <span class="visually-hidden">Previous</span> + </button> + + <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> + <span class="carousel-control-next-icon" aria-hidden="true"></span> + <span class="visually-hidden">Next</span> + </button> + + </div> + +</div> - <div class="col imgBox text-center"> - <img src="pildid/kogan.jpg" alt="Kogan img"> - <p> - "Interrinde üks loojatest (1988) ning hiljem selle esimees. NSVL Rahvasaadikute kongressi liige, osales impeeriumimeelse saadikuterühma “Sojuz” tegevuses." - </p> - <div id="kogan" class="list"></div> - </div> - - </div> - </div> - <script src="script.js"></script> <!-- JavaScript Bundle with Popper --> diff --git a/rannak/mangud/partorg/kuulsused/script.js b/rannak/mangud/partorg/kuulsused/script.js index 60c3ffa..1ab5cef 100644 --- a/rannak/mangud/partorg/kuulsused/script.js +++ b/rannak/mangud/partorg/kuulsused/script.js @@ -4,11 +4,15 @@ document.addEventListener('DOMContentLoaded', () => { }); + const list_items = document.querySelectorAll(".list-item"); const lists = document.querySelectorAll(".list"); let draggedItem = null; + +// Draggable Items + for (let i=0; i < list_items.length; i++){ const item = list_items[i]; @@ -16,25 +20,36 @@ for (let i=0; i < list_items.length; i++){ 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 */ +} + + + + +// Dropping spots + +for (let j=0; j < lists.length; j++){ + const list = lists[j]; + + /* Event Listeners */ - list.addEventListener("dragenter",e => (e.preventDefault())); + list.addEventListener("dragenter",e => (e.preventDefault())); list.addEventListener("dragover",e => { e.preventDefault(); - list.style.backgroundColor = "rgba(0,0,0,0.5)"; + list.style.backgroundColor = "rgba(0,0,0,0.9)"; }); @@ -46,12 +61,46 @@ for (let i=0; i < list_items.length; i++){ 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)"; + list.style.backgroundColor = "rgba(0,0,0,0.3)"; }) - } - } + + +// Smooth scroll stuff + +// const ekraaniPikkus = window.innerHeight; +// let d; +// if (ekraaniPikkus > 800) +// d = ekraaniPikkus / 8; +// else +// d = ekraaniPikkus / 4; +// +// console.log(ekraaniPikkus); +// console.log(document.body.scrollHeight); +// const maxScroll = document.body.scrollHeight; +// +// window.ondragover = function(e){ +// console.log("Pos: ",e.clientY); +// console.log(d); +// console.log("X: ", e.y); +// //console.log(e); +// +// if (e.clientY > (ekraaniPikkus - d)){ +// console.log("Should scroll down"); +// if (maxScroll > e.y+d) +// window.scrollTo(0, e.y + d); +// else +// window.scrollTo(0, maxScroll); +// } +// else if (e.clientY < (d)) +// window.scrollTo(0, e.y - d); +// } + + + + + function checkIfAllGood(){ let rightDone = []; @@ -73,3 +122,8 @@ function checkIfAllGood(){ btn.onclick = () => location.href = "../plakat"; } } + + + +/* The Scrolling on thing while dragging */ +// window.scrollTo(0, 500); diff --git a/rannak/mangud/partorg/kuulsused/styles.css b/rannak/mangud/partorg/kuulsused/styles.css index f4fb4c8..108bde9 100644 --- a/rannak/mangud/partorg/kuulsused/styles.css +++ b/rannak/mangud/partorg/kuulsused/styles.css @@ -65,21 +65,51 @@ button:disabled{ } -/* Other */ +/* Mainer */ +.mainer { + display: flex; + align-items: center; + border: 3px solid white; + border-radius: 10px; + margin: .7rem; + min-height: 80%; +} + +.mainer .startBasket { + width: 40%; + padding: 1rem; +} + + + +/* Carousel */ +.carousel { + border-left: 5px solid white; + padding: 1rem !important; + margin: auto !important; + width: 60% !important; + height: auto !important; -.row { - margin: 0 5% !important; } -img { - max-width: 15rem !important; +.carousel-item{text-align: center !important;} +.carousel-item .text{padding-top: 10px !important;} + +.carousel-item img{ + margin: auto !important; + max-width: 35% !important; height: auto !important; - padding: .3rem; } - -.lists .list .list-item { +.carousel-item .list { + background-color: rgba(0, 0, 0, 0.3); + min-height: 3.7rem; + margin: .5rem; + border-radius: 8px !important; +} + +.list-item { background-color: #b2beb5 !important; color: #21201E; margin: 0.5rem 0; @@ -88,11 +118,14 @@ img { cursor: pointer; } -.lists .list { - background-color: rgba(0, 0, 0, 0.3); - min-height: 2.5rem; - margin: .5rem; - border-radius: 8px !important; + + +/* Other */ + +.modal-header img { + max-width: 15rem !important; + height: auto !important; + padding: .3rem; } .startBasket { diff --git a/rannak/mangud/uliopilane/utlused/index.html b/rannak/mangud/uliopilane/utlused/index.html index 3619059..54c9548 100644 --- a/rannak/mangud/uliopilane/utlused/index.html +++ b/rannak/mangud/uliopilane/utlused/index.html @@ -79,7 +79,7 @@ </div> <div class="empty "> - <div class="drag draggable" draggable="true" style="color: #141414;" id="lauristin"> Marju Lauristin </div> + <div class="drag draggable" draggable="true" style="color: #F28C28;" id="lauristin"> Marju Lauristin </div> </div> diff --git a/rannak/mangud/uliopilane/utlused/main.js b/rannak/mangud/uliopilane/utlused/main.js index 07b8d27..653fb54 100644 --- a/rannak/mangud/uliopilane/utlused/main.js +++ b/rannak/mangud/uliopilane/utlused/main.js @@ -5,20 +5,8 @@ document.addEventListener('DOMContentLoaded', () => { -// 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"); @@ -91,127 +79,3 @@ if (`${isMobile() ? 'mobile' : 'not mobile'}` == 'not mobile') { } // 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 = "#"; - } - - } - 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/uliopilane/utlused/utlused.css b/rannak/mangud/uliopilane/utlused/utlused.css index 41b2ad0..3d967a9 100644 --- a/rannak/mangud/uliopilane/utlused/utlused.css +++ b/rannak/mangud/uliopilane/utlused/utlused.css @@ -168,3 +168,14 @@ button:disabled{ .draggable.dragged:hover { opacity: 0.1; } + + + + +/* Responssivness */ + +@media screen and (min-width: 1600px) { + .container { + margin-top: 4% !important; + } +} |
