Parorg Kuulsused New

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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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
new 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;
+    }
+}