43 files changed, 519 insertions, 99 deletions
diff --git a/rannak/mangud/arimees/pood.bak/fonts/1001fonts-eutemia-i-eula.txt b/rannak/mangud/arimees/baks/pood.bak/fonts/1001fonts-eutemia-i-eula.txt
index b3cf91f..b3cf91f 100755
--- a/rannak/mangud/arimees/pood.bak/fonts/1001fonts-eutemia-i-eula.txt
+++ b/rannak/mangud/arimees/baks/pood.bak/fonts/1001fonts-eutemia-i-eula.txt
diff --git a/rannak/mangud/arimees/pood.bak/fonts/Eutemia.ttf b/rannak/mangud/arimees/baks/pood.bak/fonts/Eutemia.ttf
index c575e59..c575e59 100755
--- a/rannak/mangud/arimees/pood.bak/fonts/Eutemia.ttf
+++ b/rannak/mangud/arimees/baks/pood.bak/fonts/Eutemia.ttf
diff --git a/rannak/mangud/arimees/pood.bak/index.html b/rannak/mangud/arimees/baks/pood.bak/index.html
index 5b01902..5b01902 100755
--- a/rannak/mangud/arimees/pood.bak/index.html
+++ b/rannak/mangud/arimees/baks/pood.bak/index.html
diff --git a/rannak/mangud/arimees/pood.bak/pildid/avatar.png b/rannak/mangud/arimees/baks/pood.bak/pildid/avatar.png
index 3cb21cf..3cb21cf 100755
--- a/rannak/mangud/arimees/pood.bak/pildid/avatar.png
+++ b/rannak/mangud/arimees/baks/pood.bak/pildid/avatar.png
diff --git a/rannak/mangud/arimees/pood.bak/pildid/kingad.png b/rannak/mangud/arimees/baks/pood.bak/pildid/kingad.png
index ef106ae..ef106ae 100755
--- a/rannak/mangud/arimees/pood.bak/pildid/kingad.png
+++ b/rannak/mangud/arimees/baks/pood.bak/pildid/kingad.png
diff --git a/rannak/mangud/arimees/pood.bak/pildid/kohver.png b/rannak/mangud/arimees/baks/pood.bak/pildid/kohver.png
index 485b6db..485b6db 100755
--- a/rannak/mangud/arimees/pood.bak/pildid/kohver.png
+++ b/rannak/mangud/arimees/baks/pood.bak/pildid/kohver.png
diff --git a/rannak/mangud/arimees/pood.bak/pildid/kupsis.png b/rannak/mangud/arimees/baks/pood.bak/pildid/kupsis.png
index 2419f89..2419f89 100755
--- a/rannak/mangud/arimees/pood.bak/pildid/kupsis.png
+++ b/rannak/mangud/arimees/baks/pood.bak/pildid/kupsis.png
diff --git a/rannak/mangud/arimees/pood.bak/pildid/laud.png b/rannak/mangud/arimees/baks/pood.bak/pildid/laud.png
index e3036dc..e3036dc 100755
--- a/rannak/mangud/arimees/pood.bak/pildid/laud.png
+++ b/rannak/mangud/arimees/baks/pood.bak/pildid/laud.png
diff --git a/rannak/mangud/arimees/pood.bak/pildid/sai.png b/rannak/mangud/arimees/baks/pood.bak/pildid/sai.png
index 8add13c..8add13c 100755
--- a/rannak/mangud/arimees/pood.bak/pildid/sai.png
+++ b/rannak/mangud/arimees/baks/pood.bak/pildid/sai.png
diff --git a/rannak/mangud/arimees/pood.bak/pildid/tugitool.png b/rannak/mangud/arimees/baks/pood.bak/pildid/tugitool.png
index c48bd50..c48bd50 100755
--- a/rannak/mangud/arimees/pood.bak/pildid/tugitool.png
+++ b/rannak/mangud/arimees/baks/pood.bak/pildid/tugitool.png
diff --git a/rannak/mangud/arimees/pood.bak/script.js b/rannak/mangud/arimees/baks/pood.bak/script.js
index 3b3e67b..3b3e67b 100755
--- a/rannak/mangud/arimees/pood.bak/script.js
+++ b/rannak/mangud/arimees/baks/pood.bak/script.js
diff --git a/rannak/mangud/arimees/pood.bak/styles.css b/rannak/mangud/arimees/baks/pood.bak/styles.css
index 58bc290..58bc290 100755
--- a/rannak/mangud/arimees/pood.bak/styles.css
+++ b/rannak/mangud/arimees/baks/pood.bak/styles.css
diff --git a/rannak/mangud/arimees/pood/fonts/1001fonts-eutemia-i-eula.txt b/rannak/mangud/arimees/baks/pood/fonts/1001fonts-eutemia-i-eula.txt
index b3cf91f..b3cf91f 100755
--- a/rannak/mangud/arimees/pood/fonts/1001fonts-eutemia-i-eula.txt
+++ b/rannak/mangud/arimees/baks/pood/fonts/1001fonts-eutemia-i-eula.txt
diff --git a/rannak/mangud/arimees/pood/fonts/Eutemia.ttf b/rannak/mangud/arimees/baks/pood/fonts/Eutemia.ttf
index c575e59..c575e59 100755
--- a/rannak/mangud/arimees/pood/fonts/Eutemia.ttf
+++ b/rannak/mangud/arimees/baks/pood/fonts/Eutemia.ttf
diff --git a/rannak/mangud/arimees/baks/pood/index.html b/rannak/mangud/arimees/baks/pood/index.html
new file mode 100755
index 0000000..6c2f7b5
--- /dev/null
+++ b/rannak/mangud/arimees/baks/pood/index.html
@@ -0,0 +1,62 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> Pood </title>
+    <!-- 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">
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body class="text-white">
+
+    <div class="container text-center text-white align-items-center pb-1">
+        <h1 class="pb-1 pt-2"> Pood </h1>
+        <p> Leia toodete tolleaegne hind Eesti Markades, kasutades Rubla ja Marga vahelist kurssi.</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">
+            Lähen siin varsti Georg Otsaga Helsinki ostoksille.
+            <br/>
+            <strong>
+            Äkki saate vähe aidata mul plaani pidada, mida kõige kasulikum oleks 10 000 rutsiga ära tuua? Äkki tahate ise ka midagi, võin soodsalt tuua!
+            </strong>
+          </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/arimees/baks/pood/pildid/avatar.png b/rannak/mangud/arimees/baks/pood/pildid/avatar.png
new file mode 100755
index 0000000..3cb21cf
--- /dev/null
+++ b/rannak/mangud/arimees/baks/pood/pildid/avatar.png
diff --git a/rannak/mangud/arimees/pood/pildid/kingad.png b/rannak/mangud/arimees/baks/pood/pildid/kingad.png
index ef106ae..ef106ae 100755
--- a/rannak/mangud/arimees/pood/pildid/kingad.png
+++ b/rannak/mangud/arimees/baks/pood/pildid/kingad.png
diff --git a/rannak/mangud/arimees/pood/pildid/kohver.png b/rannak/mangud/arimees/baks/pood/pildid/kohver.png
index 485b6db..485b6db 100755
--- a/rannak/mangud/arimees/pood/pildid/kohver.png
+++ b/rannak/mangud/arimees/baks/pood/pildid/kohver.png
diff --git a/rannak/mangud/arimees/pood/pildid/kupsis.png b/rannak/mangud/arimees/baks/pood/pildid/kupsis.png
index 2419f89..2419f89 100755
--- a/rannak/mangud/arimees/pood/pildid/kupsis.png
+++ b/rannak/mangud/arimees/baks/pood/pildid/kupsis.png
diff --git a/rannak/mangud/arimees/pood/pildid/laud.png b/rannak/mangud/arimees/baks/pood/pildid/laud.png
index e3036dc..e3036dc 100755
--- a/rannak/mangud/arimees/pood/pildid/laud.png
+++ b/rannak/mangud/arimees/baks/pood/pildid/laud.png
diff --git a/rannak/mangud/arimees/pood/pildid/sai.png b/rannak/mangud/arimees/baks/pood/pildid/sai.png
index 8add13c..8add13c 100755
--- a/rannak/mangud/arimees/pood/pildid/sai.png
+++ b/rannak/mangud/arimees/baks/pood/pildid/sai.png
diff --git a/rannak/mangud/arimees/pood/pildid/tugitool.png b/rannak/mangud/arimees/baks/pood/pildid/tugitool.png
index c48bd50..c48bd50 100755
--- a/rannak/mangud/arimees/pood/pildid/tugitool.png
+++ b/rannak/mangud/arimees/baks/pood/pildid/tugitool.png
diff --git a/rannak/mangud/arimees/baks/pood/script.js b/rannak/mangud/arimees/baks/pood/script.js
new file mode 100755
index 0000000..3b3e67b
--- /dev/null
+++ b/rannak/mangud/arimees/baks/pood/script.js
@@ -0,0 +1,69 @@
+document.addEventListener('DOMContentLoaded', () => {
+    let btn = document.querySelector('.modalButton');
+    btn.click();
+});
+
+
+
+const kurss = 15.6;
+doneCounter = 0;
+
+
+const kontrollBtns = document.querySelectorAll(".kontrolliKaarti");
+for (let nupp of kontrollBtns){
+    nupp.addEventListener("click", (e) => {
+        let rublaHind = e.target.previousElementSibling.children[0].children[1].innerHTML;
+        let pakkumine = e.target.previousElementSibling.children[1].children[1].value;
+
+        if (pakkumine*kurss == rublaHind){
+
+            //Change color
+            e.target.offsetParent.style.background = "#288654";
+            e.target.previousElementSibling.children[0].style.borderRight = ".5rem solid #288654";
+            e.target.previousElementSibling.children[1].style.borderLeft = ".5rem solid #288654";
+
+            //Change Element
+
+            (e.target.previousElementSibling.children[1].children[1]).remove();
+            const newEl = document.createElement("span");
+            newEl.classList.add("symbol");
+            newEl.innerHTML = pakkumine + " M";
+            e.target.previousElementSibling.children[1].appendChild(newEl);
+
+            e.target.remove(); 
+            doneCounter++;
+
+
+            // InfoTxt
+            let infoTxt = document.querySelector(".infoTxt")
+            infoTxt.innerHTML = "";
+
+            if (doneCounter >= 6){
+                enableAllGood();
+            }
+        }
+
+
+        else{
+            // Inputvalue Reset
+            e.target.previousElementSibling.children[1].children[1].value = "";
+
+            // InfoTxt
+            let infoTxt = document.querySelector(".infoTxt")
+            infoTxt.style.color = "red";
+            infoTxt.innerHTML = "Proovi Uuesti!";
+
+        }
+
+
+
+    })
+}
+
+
+
+function enableAllGood(){
+    const btn = document.querySelector(".moveOn");
+    btn.disabled = false;
+    btn.onclick = () => location.href = "";
+}
diff --git a/rannak/mangud/arimees/pood/styles.css b/rannak/mangud/arimees/baks/pood/styles.css
index 58bc290..58bc290 100755
--- a/rannak/mangud/arimees/pood/styles.css
+++ b/rannak/mangud/arimees/baks/pood/styles.css
diff --git a/rannak/mangud/arimees/muusika/index.html b/rannak/mangud/arimees/muusika/index.html
index 916e7e9..e1e80ab 100755
--- a/rannak/mangud/arimees/muusika/index.html
+++ b/rannak/mangud/arimees/muusika/index.html
@@ -14,11 +14,6 @@
 <body>
 
 
-    <!-- Button trigger modal -->
-    <button id="testModal" type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
-      Sissejuhatus
-    </button>
-
     <div class="container text-white text-center">
 	  <h1>Muusika</h1>
 	  <p>
@@ -31,6 +26,11 @@
 
 		<div class="col">
           <button class="moveOn" disabled>Liigu Edasi</button>
+
+          <!-- Button trigger modal -->
+          <button id="testModal" type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
+            Sissejuhatus
+          </button>
 		</div>
 
 	  </div>
diff --git a/rannak/mangud/arimees/muusika/laulud/OhkKonnidTanaval.mp3 b/rannak/mangud/arimees/muusika/laulud/OhkKonnibTanaval.mp3
index 3fa9fbd..3fa9fbd 100644
--- a/rannak/mangud/arimees/muusika/laulud/OhkKonnidTanaval.mp3
+++ b/rannak/mangud/arimees/muusika/laulud/OhkKonnibTanaval.mp3
diff --git a/rannak/mangud/arimees/muusika/style.css b/rannak/mangud/arimees/muusika/style.css
index ab7c91d..3b7e248 100755
--- a/rannak/mangud/arimees/muusika/style.css
+++ b/rannak/mangud/arimees/muusika/style.css
@@ -54,18 +54,15 @@ button:disabled{
 }
 
 .modalButton{
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 6px;
-    padding: 9px 25px;
+    display: inline-block;
+    padding: 6px 12px;
+    margin-left: 30px;
     background-color: rgba(0,136,169,1);
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3 ease 0;
-    margin: 3%;
-    font-size: 1.2rem;
+    font-size: 1rem;
 }
 
 .modalButton:hover{
diff --git a/rannak/mangud/arimees/pood/index.html b/rannak/mangud/arimees/pood/index.html
index 6c2f7b5..1e83723 100755
--- a/rannak/mangud/arimees/pood/index.html
+++ b/rannak/mangud/arimees/pood/index.html
@@ -1,30 +1,39 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title> Pood </title>
-    <!-- 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">
-    <link rel="stylesheet" href="styles.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <title>Pood</title>
+  <!-- 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">
+
+  <link rel="stylesheet" href="style.css">
 </head>
 
-<body class="text-white">
+<body>
+
+
+    <!-- Button trigger modal -->
+    <button id="testModal" type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
+      Sissejuhatus
+    </button>
+
+    <div class="container text-white text-center">
+	  <h1>Pood</h1>
+	  <p>
+        Vali kataloogidest erineivaid tooteid, mida soovid osta
+        <br/>
+        ning arvuta ka nende kurss
+     </p>
 
-    <div class="container text-center text-white align-items-center pb-1">
-        <h1 class="pb-1 pt-2"> Pood </h1>
-        <p> Leia toodete tolleaegne hind Eesti Markades, kasutades Rubla ja Marga vahelist kurssi.</p>
-		<div class="row">
-	  	  <div>
-            <button class="moveOn" disabled>Liigu Edasi</button>
-	  	  </div>
+	  <div class="text-center">
 
+		<div class="col">
+          <button class="moveOn" disabled>Liigu Edasi</button>
 		</div>
 
-        <!-- Button trigger modal -->
-        <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
-          Sissejuhatus
-        </button>
+	  </div>
     </div>
 
 
@@ -41,10 +50,22 @@
           </div>
 
           <div class="modal-body">
-            Lähen siin varsti Georg Otsaga Helsinki ostoksille.
+
+            <p>
+              Lähen siin varsti Georg Otsaga Helsinki ostoksille. Uut kaupa oleks vaja.
+              Mul täie kuumaga äri käib praegu! Sirvisin veits uusi katalooge, ikka on
+              hea kaubal silm peal hoida.  Äkki saate nats aidata mul plaani pidada,
+              mida oleks kõige kasulikum 12 000 rutsiga ära tuua? Kurss on praegu päris
+              ilus - 1 FIM= 7,356 rubla. Põhiline, et oleks palju erinevaid kaupu ja
+              kogu raha saaks ära kulutatud! Aga sellega vist problat ei tule.
+              Äkki tahate ise ka midagi, võin soodsalt tuua!
+            </p>
             <br/>
             <strong>
-            Äkki saate vähe aidata mul plaani pidada, mida kõige kasulikum oleks 10 000 rutsiga ära tuua? Äkki tahate ise ka midagi, võin soodsalt tuua!
+              Selleks lappa katalooge, vali omale sobiv nodi välja ja pane
+              tabelisse - mida, kui palju, mis rahaga siin ja sealpool lahte arvestama peab.
+              Ole hea, vali erinevat kraami - ega ma kohalik kaubamaja ole,
+              et kümmet ühesugust kitlit müüma hakkan! Ole nüüd!
             </strong>
           </div>
 
@@ -53,10 +74,219 @@
     </div>
 
 
+    <!-- Main Stuff -->
+    <div class="main">
+      <h3>Sirvi ajakirja</h3>
+
+      <div class="ajakiriWrapper">
+
+
+
+        <ul class="nav nav-tabs" id="myTab" role="tablist">
+
+          <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="tab1" data-bs-toggle="tab" data-bs-target="#tab-pane1" type="button" role="tab" aria-controls="tab-pane1" aria-selected="true">1</button>
+          </li>
+
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="tab2" data-bs-toggle="tab" data-bs-target="#tab-pane2" type="button" role="tab" aria-controls="tab-pane2" aria-selected="false">2</button>
+          </li>
+
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="tab3" data-bs-toggle="tab" data-bs-target="#tab-pane3" type="button" role="tab" aria-controls="tab-pane3" aria-selected="false">3</button>
+          </li>
+
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="tab4" data-bs-toggle="tab" data-bs-target="#tab-pane4" type="button" role="tab" aria-controls="tab-pane4" aria-selected="false" >4</button>
+          </li>
+
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="tab5" data-bs-toggle="tab" data-bs-target="#tab-pane5" type="button" role="tab" aria-controls="tab-pane5" aria-selected="false" >5</button>
+          </li>
+
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="tab6" data-bs-toggle="tab" data-bs-target="#tab-pane6" type="button" role="tab" aria-controls="tab-pane6" aria-selected="false" >6</button>
+          </li>
+
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="tab7" data-bs-toggle="tab" data-bs-target="#tab-pane7" type="button" role="tab" aria-controls="tab-pane7" aria-selected="false" >7</button>
+          </li>
+
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="tab8" data-bs-toggle="tab" data-bs-target="#tab-pane8" type="button" role="tab" aria-controls="tab-pane8" aria-selected="false" >8</button>
+          </li>
+
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="tab9" data-bs-toggle="tab" data-bs-target="#tab-pane9" type="button" role="tab" aria-controls="tab-pane9" aria-selected="false" >9</button>
+          </li>
+
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="tab10" data-bs-toggle="tab" data-bs-target="#tab-pane10" type="button" role="tab" aria-controls="tab-pane10" aria-selected="false" >10</button>
+          </li>
+
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="tab11" data-bs-toggle="tab" data-bs-target="#tab-pane11" type="button" role="tab" aria-controls="tab-pane11" aria-selected="false" >11</button>
+          </li>
+
+        </ul>
+
+
+
+
+
+        <div class="tab-content" id="myTabContent">
+
+          <div class="tab-pane fade show active" id="tab-pane1" role="tabpanel" aria-labelledby="tab1" tabindex="0">
+            <img alt="Ajakirja lehekülg" src="pildid/1.jpg"/>
+          </div>
+
+          <div class="tab-pane fade" id="tab-pane2" role="tabpanel" aria-labelledby="2-tab" tabindex="0">
+            <img alt="Ajakirja lehekülg" src="pildid/2.jpg"/>
+          </div>
+
+          <div class="tab-pane fade" id="tab-pane3" role="tabpanel" aria-labelledby="3-tab" tabindex="0">
+            <img alt="Ajakirja lehekülg" src="pildid/3.jpg"/>
+          </div>
+
+          <div class="tab-pane fade" id="tab-pane4" role="tabpanel" aria-labelledby="4-tab" tabindex="0">
+            <img alt="Ajakirja lehekülg" src="pildid/4.jpg"/>
+          </div>
+
+          <div class="tab-pane fade" id="tab-pane5" role="tabpanel" aria-labelledby="5-tab" tabindex="0">
+            <img alt="Ajakirja lehekülg" src="pildid/5.jpg"/>
+          </div>
+
+          <div class="tab-pane fade" id="tab-pane6" role="tabpanel" aria-labelledby="6-tab" tabindex="0">
+            <img alt="Ajakirja lehekülg" src="pildid/6.jpg"/>
+          </div>
+
+          <div class="tab-pane fade" id="tab-pane7" role="tabpanel" aria-labelledby="7-tab" tabindex="0">
+            <img alt="Ajakirja lehekülg" src="pildid/7.jpg"/>
+          </div>
+
+          <div class="tab-pane fade" id="tab-pane8" role="tabpanel" aria-labelledby="8-tab" tabindex="0">
+            <img alt="Ajakirja lehekülg" src="pildid/8.jpg"/>
+          </div>
+
+          <div class="tab-pane fade" id="tab-pane9" role="tabpanel" aria-labelledby="9-tab" tabindex="0">
+            <img alt="Ajakirja lehekülg" src="pildid/9.jpg"/>
+          </div>
+
+          <div class="tab-pane fade" id="tab-pane10" role="tabpanel" aria-labelledby="10-tab" tabindex="0">
+            <img alt="Ajakirja lehekülg" src="pildid/10.jpg"/>
+          </div>
+
+          <div class="tab-pane fade" id="tab-pane11" role="tabpanel" aria-labelledby="11-tab" tabindex="0">
+            <img alt="Ajakirja lehekülg" src="pildid/11.jpg"/>
+          </div>
+
+        </div>
+
+
+
+      </div>
+      <!-- Ajakirja Wrapper End -->
+
+
+
+      <!-- Tabel -->
+      <h3>Ostunimekiri</h3>
+
+      <div class="tabelWrapper">
+        <table class="table table-dark table-striped">
+          <tr>
+            <th><strong>Toode</strong></th>
+            <th><strong>Hind(FIM)</strong></th>
+            <th><strong>Hind(Rubla)</strong></th>
+            <th><strong>Tükki</strong></th>
+            <th><strong>Summa(Rubla)</strong></th>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+        </table> 
+
+
+      </div>
+
+      <!-- Tabeli lõpp -->
+
+
+    </div>
+    <!-- Main End -->
+
+
+  <script src="script.js"></script>
 
-    <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>
 
-    <!-- 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/arimees/pood/pildid/1.jpg b/rannak/mangud/arimees/pood/pildid/1.jpg
new file mode 100644
index 0000000..fc78d01
--- /dev/null
+++ b/rannak/mangud/arimees/pood/pildid/1.jpg
diff --git a/rannak/mangud/arimees/pood/pildid/10.jpg b/rannak/mangud/arimees/pood/pildid/10.jpg
new file mode 100644
index 0000000..7eb4231
--- /dev/null
+++ b/rannak/mangud/arimees/pood/pildid/10.jpg
diff --git a/rannak/mangud/arimees/pood/pildid/11.jpg b/rannak/mangud/arimees/pood/pildid/11.jpg
new file mode 100644
index 0000000..e91c8b5
--- /dev/null
+++ b/rannak/mangud/arimees/pood/pildid/11.jpg
diff --git a/rannak/mangud/arimees/pood/pildid/2.jpg b/rannak/mangud/arimees/pood/pildid/2.jpg
new file mode 100644
index 0000000..aab350e
--- /dev/null
+++ b/rannak/mangud/arimees/pood/pildid/2.jpg
diff --git a/rannak/mangud/arimees/pood/pildid/3.jpg b/rannak/mangud/arimees/pood/pildid/3.jpg
new file mode 100644
index 0000000..9bfc7d6
--- /dev/null
+++ b/rannak/mangud/arimees/pood/pildid/3.jpg
diff --git a/rannak/mangud/arimees/pood/pildid/4.jpg b/rannak/mangud/arimees/pood/pildid/4.jpg
new file mode 100644
index 0000000..ec8a0af
--- /dev/null
+++ b/rannak/mangud/arimees/pood/pildid/4.jpg
diff --git a/rannak/mangud/arimees/pood/pildid/5.jpg b/rannak/mangud/arimees/pood/pildid/5.jpg
new file mode 100644
index 0000000..d728f57
--- /dev/null
+++ b/rannak/mangud/arimees/pood/pildid/5.jpg
diff --git a/rannak/mangud/arimees/pood/pildid/6.jpg b/rannak/mangud/arimees/pood/pildid/6.jpg
new file mode 100644
index 0000000..ce21865
--- /dev/null
+++ b/rannak/mangud/arimees/pood/pildid/6.jpg
diff --git a/rannak/mangud/arimees/pood/pildid/7.jpg b/rannak/mangud/arimees/pood/pildid/7.jpg
new file mode 100644
index 0000000..4a6c15d
--- /dev/null
+++ b/rannak/mangud/arimees/pood/pildid/7.jpg
diff --git a/rannak/mangud/arimees/pood/pildid/8.jpg b/rannak/mangud/arimees/pood/pildid/8.jpg
new file mode 100644
index 0000000..f63c3a0
--- /dev/null
+++ b/rannak/mangud/arimees/pood/pildid/8.jpg
diff --git a/rannak/mangud/arimees/pood/pildid/9.jpg b/rannak/mangud/arimees/pood/pildid/9.jpg
new file mode 100644
index 0000000..e49c49b
--- /dev/null
+++ b/rannak/mangud/arimees/pood/pildid/9.jpg
diff --git a/rannak/mangud/arimees/pood/script.js b/rannak/mangud/arimees/pood/script.js
index 3b3e67b..8803bbe 100755
--- a/rannak/mangud/arimees/pood/script.js
+++ b/rannak/mangud/arimees/pood/script.js
@@ -4,66 +4,29 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 
+const selectors = document.querySelectorAll('select');
 
-const kurss = 15.6;
-doneCounter = 0;
+for(el of selectors){
+    el.addEventListener('change', () => {
 
-
-const kontrollBtns = document.querySelectorAll(".kontrolliKaarti");
-for (let nupp of kontrollBtns){
-    nupp.addEventListener("click", (e) => {
-        let rublaHind = e.target.previousElementSibling.children[0].children[1].innerHTML;
-        let pakkumine = e.target.previousElementSibling.children[1].children[1].value;
-
-        if (pakkumine*kurss == rublaHind){
-
-            //Change color
-            e.target.offsetParent.style.background = "#288654";
-            e.target.previousElementSibling.children[0].style.borderRight = ".5rem solid #288654";
-            e.target.previousElementSibling.children[1].style.borderLeft = ".5rem solid #288654";
-
-            //Change Element
-
-            (e.target.previousElementSibling.children[1].children[1]).remove();
-            const newEl = document.createElement("span");
-            newEl.classList.add("symbol");
-            newEl.innerHTML = pakkumine + " M";
-            e.target.previousElementSibling.children[1].appendChild(newEl);
-
-            e.target.remove(); 
-            doneCounter++;
-
-
-            // InfoTxt
-            let infoTxt = document.querySelector(".infoTxt")
-            infoTxt.innerHTML = "";
-
-            if (doneCounter >= 6){
-                enableAllGood();
-            }
+        let selected = new Array();
+        for (el of selectors){
+            if (!selected.includes(el.value) && el.value != 'Vali')
+                selected.push(el.value);
         }
 
-
-        else{
-            // Inputvalue Reset
-            e.target.previousElementSibling.children[1].children[1].value = "";
-
-            // InfoTxt
-            let infoTxt = document.querySelector(".infoTxt")
-            infoTxt.style.color = "red";
-            infoTxt.innerHTML = "Proovi Uuesti!";
-
-        }
-
-
-
-    })
+        if (selected.length == 6)
+            moveOnEnable();
+        
+    });
 }
 
 
+// If All Else Done
 
-function enableAllGood(){
+function moveOnEnable(){
     const btn = document.querySelector(".moveOn");
     btn.disabled = false;
     btn.onclick = () => location.href = "";
 }
+
diff --git a/rannak/mangud/arimees/pood/style.css b/rannak/mangud/arimees/pood/style.css
new file mode 100755
index 0000000..e4de8d1
--- /dev/null
+++ b/rannak/mangud/arimees/pood/style.css
@@ -0,0 +1,102 @@
+* {box-sizing: border-box;}
+
+
+body{
+    background-color: #43464b;
+}
+
+
+h1 {
+    color: #2FF924;
+    font-weight: bold;
+}
+
+.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;
+}
+
+
+
+
+/* Modal Stuff */
+
+.avatar {
+    border-radius: 20px;
+    width: 100%;
+    max-width: 15rem;
+}
+
+.modalHeaderWrapper{
+    text-align: center;
+    margin: 0;
+    width: 100%;
+}
+
+
+
+.closeModalButton {
+  border-radius: 50px;
+}
+
+.modalButton{
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 6px;
+    padding: 9px 25px;
+    background-color: rgba(0,136,169,1);
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3 ease 0;
+    margin: 3%;
+    font-size: 1.2rem;
+}
+
+.modalButton:hover{
+    background-color: rgba(0,136,169,0.8);
+}
+
+
+
+
+
+/* Main */
+
+.main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.main h3 {
+    padding-top: 1rem;
+    color: white;
+}
+
+.tab-content img{
+    max-width : 50vw;
+    heigth: auto;
+}
+
+
+table {
+   padding-top: 1rem; 
+   font-size: 1.1rem;
+}
diff --git a/rannak/mangud/arimees/soome/index.html b/rannak/mangud/arimees/soome/index.html
index 9b14e25..824a450 100755
--- a/rannak/mangud/arimees/soome/index.html
+++ b/rannak/mangud/arimees/soome/index.html
@@ -14,11 +14,6 @@
 <body>
 
 
-    <!-- Button trigger modal -->
-    <button id="testModal" type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
-      Sissejuhatus
-    </button>
-
     <div class="container text-white text-center">
 	  <h1>Õpime soome keelt</h1>
 
@@ -32,6 +27,11 @@
 
 		<div class="col">
           <button class="moveOn" disabled>Liigu Edasi</button>
+
+          <!-- Button trigger modal -->
+          <button id="testModal" type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
+            Sissejuhatus
+          </button>
 		</div>
 
 	  </div>
diff --git a/rannak/mangud/arimees/soome/style.css b/rannak/mangud/arimees/soome/style.css
index 5912b9b..cb70806 100755
--- a/rannak/mangud/arimees/soome/style.css
+++ b/rannak/mangud/arimees/soome/style.css
@@ -59,18 +59,15 @@ button:disabled{
 }
 
 .modalButton{
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 6px;
-    padding: 9px 25px;
+    display: inline-block;
+    padding: 6px 12px;
+    margin-left: 30px;
     background-color: rgba(0,136,169,1);
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3 ease 0;
-    margin: 3%;
-    font-size: 1.2rem;
+    font-size: 1rem;
 }
 
 .modalButton:hover{