11 files changed, 205 insertions, 0 deletions
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 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=, initial-scale=1.0">
+    <title>Kuusused</title>
+    <link rel="stylesheet" href="styles.css">
+    <!-- Bootstrap - CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+</head>
+
+<body class="bg-dark text-white">
+
+    <div class="container text-center text-white align-items-center pb-5">
+        <h1 class="pb-1 pt-2">Kuulsused</h1>
+        <p>Vii kokku inimese nimi ja nägu.</p>
+
+		<div class="row">
+	  	  <div>
+	  		<a href="../rolliValik/index.html" class="btn-success btn disabled" role="button" aria-disabled="true">Liigu Edasi</a>
+	  	  </div>
+		</div>
+
+    </div>
+
+	<!-- Esimene rida -->
+	<div class="container-fluid lists">
+	  <div class="row">
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/pats.jpg" alt="Konstantin Päts img">
+		  <div id="pats" class="list"></div>
+		</div>
+
+		<div class="list col startBasket text-center">
+	  	  <div id="pats" class="list-item" draggable="true">Konstantin Päts</div>
+	  	  <div id="karis" class="list-item" draggable="true">Alar Karis</div>
+	  	  <div id="meri" class="list-item" draggable="true">Lennart Meri</div>
+	  	  <div id="ruutel" class="list-item" draggable="true">Arnold Rüütel</div>
+	  	  <div id="ilves" class="list-item" draggable="true">Toomas Hendrik Ilves</div>
+	  	  <div id="kaljulaid" class="list-item" draggable="true">Kersti Kaljulaid</div>
+	  	  <div id="queen" class="list-item" draggable="true">Elizabth II</div>
+	  	  <div id="galileo" class="list-item" draggable="true">Galileo Galilei</div>
+		</div>
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/karis.jpg" alt="Alar Karis img">
+		  <div id="karis" class="list"></div>
+		</div>
+
+	  </div>
+	</div>
+
+	<!-- Teine rida -->
+
+	<div class="container-fluid lists">
+	  <div class="row">
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/ruutel.jpg" alt="Arnold Rüütel img">
+		  <div id="ruutel" class="list"></div>
+		</div>
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/galileo.jpg" alt="Galileo img">
+		  <div id="galileo" class="list"></div>
+		</div>
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/queen.jpg" alt="Queen img">
+		  <div id="queen" class="list"></div>
+		</div>
+			
+		  </div>
+		</div>
+
+	<!-- Kolmas Rida -->
+
+	<div class="container-fluid lists">
+	  <div class="row">
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/kaljulaid.jpg" alt="Kersti Kaljulaid img">
+		  <div id="kaljulaid" class="list"></div>
+		</div>
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/ilves.jpg" alt="Toomas Hendrik Ilves img">
+		  <div id="ilves" class="list"></div>
+		</div>
+
+		<div class="col imgBox text-center">
+		  <img src="pildid/meri.jpg" alt="Lennart Meri img">
+		  <div id="meri" class="list"></div>
+		</div>
+
+	  </div>
+	</div>
+    
+    <script src="script.js"></script>    
+
+    <!-- JavaScript Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/rannak/mangud/kaitseliitlane/kuulsused/pildid/galileo.jpg b/rannak/mangud/kaitseliitlane/kuulsused/pildid/galileo.jpg
new file mode 100644
index 0000000..311780c
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/kuulsused/pildid/galileo.jpg
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
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/kuulsused/pildid/ilves.jpg
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
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/kuulsused/pildid/kaljulaid.jpg
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
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/kuulsused/pildid/karis.jpg
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
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/kuulsused/pildid/meri.jpg
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
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/kuulsused/pildid/pats.jpg
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
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/kuulsused/pildid/queen.jpg
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
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/kuulsused/pildid/ruutel.jpg
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;
+}