Hinnad mäng for Arimees + fonts

author: Rasmus Luha <rasmus.luha@gmail.com> 2023-02-05 20:43:17 +0200
committer: Rasmus Luha <rasmus.luha@gmail.com> 2023-02-05 20:43:17 +0200
commit: 209b1915b0f1879d0055ea17f76464dddcf8089b (patch)
tree: a7b4077a0c239dba3f0e40b6463e2fb368b65eb3 /rannak/mangud
parent: ea90f1c8a5fb5b666113ee21f81a5530127a0517 (diff)
66 files changed, 1768 insertions, 344 deletions
diff --git a/rannak/mangud/arimees/hinnad/fonts/1001fonts-eutemia-i-eula.txt b/rannak/mangud/arimees/hinnad/fonts/1001fonts-eutemia-i-eula.txt
new file mode 100644
index 0000000..b3cf91f
--- /dev/null
+++ b/rannak/mangud/arimees/hinnad/fonts/1001fonts-eutemia-i-eula.txt
@@ -0,0 +1,31 @@
+1001Fonts Free For Commercial Use License (FFC)
+
+Preamble
+In this license, 'Eutemia I' refers to the given .zip file, which may contain one or numerous fonts. These fonts can be of any type (.ttf, .otf, ...) and together they form a 'font family' or in short a 'typeface'.
+
+1. Copyright
+Eutemia I is the intellectual property of its respective author, provided it is original, and is protected by copyright laws in many parts of the world.
+
+2. Usage
+Eutemia I may be downloaded and used free of charge for both personal and commercial use. Personal use refers to all usage that does not generate financial income in a business manner, for instance:
+
+ - personal scrapbooking for yourself
+ - recreational websites and blogs for friends and family
+ - prints such as flyers, posters, t-shirts for churches, charities, and non-profit organizations
+
+Commercial use refers to usage in a business environment, including:
+
+ - business cards, logos, advertising, websites for companies
+ - t-shirts, books, apparel that will be sold for money
+ - flyers, posters for events that charge admission
+ - freelance graphic design work
+ - anything that will generate direct or indirect income
+
+3. Modification
+Eutemia I may not be modified, altered, adapted or built upon without written permission by its respective author. This pertains all files within the downloadable font zip-file.
+
+4. Distribution
+While Eutemia I may freely be copied and passed along to other individuals for private use as its original downloadable zip-file, it may not be sold or published without written permission by its respective author.
+
+5. Disclaimer
+Eutemia I is offered 'as is' without any warranty. 1001fonts.com and the respective author of Eutemia I shall not be liable for any damage derived from using this typeface. By using Eutemia I you agree to the terms of this license.
+\ No newline at end of file
diff --git a/rannak/mangud/arimees/hinnad/fonts/Eutemia.ttf b/rannak/mangud/arimees/hinnad/fonts/Eutemia.ttf
new file mode 100644
index 0000000..c575e59
--- /dev/null
+++ b/rannak/mangud/arimees/hinnad/fonts/Eutemia.ttf
diff --git a/rannak/mangud/arimees/hinnad/index.html b/rannak/mangud/arimees/hinnad/index.html
new file mode 100644
index 0000000..5b01902
--- /dev/null
+++ b/rannak/mangud/arimees/hinnad/index.html
@@ -0,0 +1,223 @@
+<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> Hinnad </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"> Hinnad </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>
+
+
+
+    <h3>Kurss: 1 Mark = 15.6 Rubla</h3>
+    <h5 class="infoTxt"></h5>
+
+
+    <!-- Main stuff -->
+    <div class="main">
+
+      <div class="card text-center">
+          <img class="card-img-top" src="pildid/tugitool.png" alt="Tugitool">
+          <div class="card-body">
+              <h3 class="card-title">Tugitool</h5>
+
+              <div class="cardInnerWrapper">
+                <div class="uno">
+                  <h4>Rublades</h4>
+                  <span class="rublaHind">109.2</span>
+                  <span class="symbol" >&#8381;</span>
+                </div>
+                <div class="dos">
+                  <h4>Markades</h4>
+                  <input name="" type="text" value=""/>
+                </div>
+              </div>
+
+            <button class="kontrolliKaarti">Kontrolli</button>
+
+          </div>
+      </div>         
+
+
+
+
+      <div class="card text-center">
+          <img class="card-img-top" src="pildid/laud.png" alt="Laud">
+          <div class="card-body">
+              <h3 class="card-title">Laud</h5>
+
+              <div class="cardInnerWrapper">
+                <div class="uno">
+                  <h4>Rublades</h4>
+                  <span class="rublaHind">62.4</span>
+                  <span class="symbol" >&#8381;</span>
+                </div>
+                <div class="dos">
+                  <h4>Markades</h4>
+                  <input name="" type="text" value=""/>
+                </div>
+              </div>
+
+            <button class="kontrolliKaarti">Kontrolli</button>
+
+          </div>
+      </div>         
+
+
+
+
+
+      <div class="card text-center">
+          <img class="card-img-top" src="pildid/kupsis.png" alt="Küpsised">
+          <div class="card-body">
+              <h3 class="card-title">Küpsised</h5>
+
+              <div class="cardInnerWrapper">
+                <div class="uno">
+                  <h4>Rublades</h4>
+                  <span class="rublaHind">140.4</span>
+                  <span class="symbol" >&#8381;</span>
+                </div>
+                <div class="dos">
+                  <h4>Markades</h4>
+                  <input name="" type="text" value=""/>
+                </div>
+              </div>
+
+            <button class="kontrolliKaarti">Kontrolli</button>
+
+          </div>
+      </div>         
+
+
+
+
+      <div class="card text-center">
+          <img class="card-img-top" src="pildid/sai.png" alt="Sai">
+          <div class="card-body">
+              <h3 class="card-title">Saiapäts</h5>
+
+              <div class="cardInnerWrapper">
+                <div class="uno">
+                  <h4>Rublades</h4>
+                  <span class="rublaHind">78</span>
+                  <span class="symbol" >&#8381;</span>
+                </div>
+                <div class="dos">
+                  <h4>Markades</h4>
+                  <input name="" type="text" value=""/>
+                </div>
+              </div>
+
+            <button class="kontrolliKaarti">Kontrolli</button>
+
+          </div>
+      </div>         
+
+
+
+
+      <div class="card text-center">
+          <img class="card-img-top" src="pildid/kohver.png" alt="Kohver">
+          <div class="card-body">
+              <h3 class="card-title">Kohver</h5>
+
+              <div class="cardInnerWrapper">
+                <div class="uno">
+                  <h4>Rublades</h4>
+                  <span class="rublaHind">156</span>
+                  <span class="symbol" >&#8381;</span>
+                </div>
+                <div class="dos">
+                  <h4>Markades</h4>
+                  <input name="" type="text" value=""/>
+                </div>
+              </div>
+
+            <button class="kontrolliKaarti">Kontrolli</button>
+
+          </div>
+      </div>         
+
+
+
+
+
+      <div class="card text-center">
+          <img class="card-img-top" src="pildid/kingad.png" alt="Kingad">
+          <div class="card-body">
+              <h3 class="card-title">Kingad</h5>
+
+              <div class="cardInnerWrapper">
+                <div class="uno">
+                  <h4>Rublades</h4>
+                  <span class="rublaHind">312</span>
+                  <span class="symbol" >&#8381;</span>
+                </div>
+                <div class="dos">
+                  <h4>Markades</h4>
+                  <input name="" type="text" value=""/>
+                </div>
+              </div>
+
+            <button class="kontrolliKaarti">Kontrolli</button>
+
+          </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/hinnad/pildid/avatar.png b/rannak/mangud/arimees/hinnad/pildid/avatar.png
new file mode 100644
index 0000000..3cb21cf
--- /dev/null
+++ b/rannak/mangud/arimees/hinnad/pildid/avatar.png
diff --git a/rannak/mangud/arimees/hinnad/pildid/kingad.png b/rannak/mangud/arimees/hinnad/pildid/kingad.png
new file mode 100644
index 0000000..ef106ae
--- /dev/null
+++ b/rannak/mangud/arimees/hinnad/pildid/kingad.png
diff --git a/rannak/mangud/arimees/hinnad/pildid/kohver.png b/rannak/mangud/arimees/hinnad/pildid/kohver.png
new file mode 100644
index 0000000..485b6db
--- /dev/null
+++ b/rannak/mangud/arimees/hinnad/pildid/kohver.png
diff --git a/rannak/mangud/arimees/hinnad/pildid/kupsis.png b/rannak/mangud/arimees/hinnad/pildid/kupsis.png
new file mode 100644
index 0000000..2419f89
--- /dev/null
+++ b/rannak/mangud/arimees/hinnad/pildid/kupsis.png
diff --git a/rannak/mangud/arimees/hinnad/pildid/laud.png b/rannak/mangud/arimees/hinnad/pildid/laud.png
new file mode 100644
index 0000000..e3036dc
--- /dev/null
+++ b/rannak/mangud/arimees/hinnad/pildid/laud.png
diff --git a/rannak/mangud/arimees/hinnad/pildid/sai.png b/rannak/mangud/arimees/hinnad/pildid/sai.png
new file mode 100644
index 0000000..8add13c
--- /dev/null
+++ b/rannak/mangud/arimees/hinnad/pildid/sai.png
diff --git a/rannak/mangud/arimees/hinnad/pildid/tugitool.png b/rannak/mangud/arimees/hinnad/pildid/tugitool.png
new file mode 100644
index 0000000..c48bd50
--- /dev/null
+++ b/rannak/mangud/arimees/hinnad/pildid/tugitool.png
diff --git a/rannak/mangud/arimees/hinnad/script.js b/rannak/mangud/arimees/hinnad/script.js
new file mode 100644
index 0000000..3b3e67b
--- /dev/null
+++ b/rannak/mangud/arimees/hinnad/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/hinnad/styles.css b/rannak/mangud/arimees/hinnad/styles.css
new file mode 100644
index 0000000..5e02923
--- /dev/null
+++ b/rannak/mangud/arimees/hinnad/styles.css
@@ -0,0 +1,175 @@
+@font-face {
+    font-family: 'fontDos';
+    src: local('fonts/Eutemia.ttf');
+}
+
+
+
+* {box-sizing: border-box;}
+
+body{
+    background-color: #4D5157;
+    font-family: "fontDos"
+}
+h1{
+    color: #2FF924;
+    font-weight: bold;
+}
+
+/* Modal Stuff */
+
+.avatar {
+    border-radius: 20px;
+    width: 100%;
+}
+
+.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);
+}
+
+/* To unduck chrome modal pic size */
+.modal-header img {
+	max-width: 15rem;
+	height: auto;
+	padding: .3rem;
+}
+
+
+
+
+
+/* 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;
+}
+
+
+
+/* Pood Itself */
+.main {
+    padding: 1% 10%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+h3, h5 {
+    text-align: center;
+}
+
+
+
+
+
+/* PoeKaart */
+
+.card {
+    margin: 2rem .5rem;
+    padding: .5rem;
+    width: calc(20% - 1rem);
+    color: black;
+    background-color: #D22730;
+}
+
+.card img {
+    height: 57%;
+}
+
+
+.card-body{
+    padding: 0;
+    margin: 0;
+}
+.cardInnerWrapper {
+    background-color: white;
+    display:flex;
+    paddig: 0;
+    margin: 0;
+}
+
+.rublaHind, .symbol{
+    font-size: 1.5rem;
+}
+
+.uno {
+    width: 50%;
+    border-right: .5rem solid #D22730;
+}
+
+.dos {
+    border-left: .5rem solid #D22730;
+    width: 50%;
+}
+
+.dos input {
+    width: 80%;
+    margin-bottom: 1rem;
+}
+
+.kontrolliKaarti{
+    margin-top: 1rem;
+    display: inline-block;
+    border: none;
+    padding: 3px 6px;
+    margin-botton: 0;
+    font-size: 1.07rem;
+    font-weight: normal;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 4px;
+    background-color: #006E33;
+    color: white;
+}
+
+
+
+
+
+/* Media Querries*/
+
+@media screen and (max-width: 1650px) {
+    .card{
+        width: calc(25% - 1rem);
+    }
+}
diff --git a/rannak/mangud/index.html b/rannak/mangud/index.html
index 9d592d2..9ce5578 100644
--- a/rannak/mangud/index.html
+++ b/rannak/mangud/index.html
@@ -1,5 +1,7 @@
 <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">
@@ -52,7 +54,7 @@
 	<div>
       <h3>Ärimees</h3>
 	  <ol>
-		<li></li>
+        <li><a href="arimees/hinnad">Hinnad</a></li>
 		<li></li>
 		<li></li>
 	  </ol>
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrs-monster.zip b/rannak/mangud/kaitseliitlane/salakood/fonts/mrs-monster.zip
new file mode 100644
index 0000000..2addc91
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrs-monster.zip
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonster.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonster.ttf
new file mode 100644
index 0000000..1d91c69
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonster.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonster.txt b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonster.txt
new file mode 100644
index 0000000..822341c
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonster.txt
@@ -0,0 +1,15 @@
+Mrs. Monster Version 1.0 Truetype Font for Windows
+
+2013 Iconian Fonts - Daniel Zadorozny
+
+http://www.iconian.com/
+
+This font comes with the following 17 versions: Regular, Italic, Condensed, Condensed Italic, Expanded, Expanded Italic, Outline, Outline Italic, Bold Outline, Bold Outline Italic, 3D, 3D Italic, Academy, Rotated, Rotated 2, Rotalic and Leftalic.  
+
+This font may be freely distributed and is free for all non-commercial uses.  Use of the fonts are at your own risk. 
+
+For commercial use of the font please visit http://iconian.com/commercial.html for additional information.
+
+This font is e-mailware; that is, if you like it, please e-mail the author at:
+
+iconian@aol.com
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonster3d.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonster3d.ttf
new file mode 100644
index 0000000..475464a
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonster3d.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonster3dital.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonster3dital.ttf
new file mode 100644
index 0000000..81a1270
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonster3dital.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsteracad.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsteracad.ttf
new file mode 100644
index 0000000..0dcc133
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsteracad.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterboldout.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterboldout.ttf
new file mode 100644
index 0000000..78c7b2a
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterboldout.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterboldoutital.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterboldoutital.ttf
new file mode 100644
index 0000000..d020cdb
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterboldoutital.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonstercond.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonstercond.ttf
new file mode 100644
index 0000000..ee09ea5
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonstercond.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonstercondital.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonstercondital.ttf
new file mode 100644
index 0000000..4df768e
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonstercondital.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterexpand.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterexpand.ttf
new file mode 100644
index 0000000..71d0c61
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterexpand.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterexpandital.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterexpandital.ttf
new file mode 100644
index 0000000..9595754
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterexpandital.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterital.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterital.ttf
new file mode 100644
index 0000000..1926ba8
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterital.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterleft.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterleft.ttf
new file mode 100644
index 0000000..1ad20b9
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterleft.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterout.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterout.ttf
new file mode 100644
index 0000000..7c8b324
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterout.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsteroutital.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsteroutital.ttf
new file mode 100644
index 0000000..bb3b52f
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsteroutital.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterrotal.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterrotal.ttf
new file mode 100644
index 0000000..f6aa01c
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterrotal.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterrotate.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterrotate.ttf
new file mode 100644
index 0000000..b58d711
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterrotate.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterrotate2.ttf b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterrotate2.ttf
new file mode 100644
index 0000000..48ad7e7
--- /dev/null
+++ b/rannak/mangud/kaitseliitlane/salakood/fonts/mrsmonsterrotate2.ttf
diff --git a/rannak/mangud/kaitseliitlane/salakood/index.html b/rannak/mangud/kaitseliitlane/salakood/index.html
index 44bac05..72db2ff 100644
--- a/rannak/mangud/kaitseliitlane/salakood/index.html
+++ b/rannak/mangud/kaitseliitlane/salakood/index.html
@@ -5,9 +5,10 @@
 
   <title>Salakood</title>
 
-  <link rel="stylesheet" href="style.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">
+
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
@@ -82,7 +83,7 @@
 
           <div class="modal-header">
             <div class="modalHeaderWrapper">
-              <h3 class="modal-title" id="myModalLabel">Sissejuhatus</h5>
+              <h2 class="modal-title" id="myModalLabel">Sissejuhatus</h2>
             </div>
             <img class="avatar" alt="avatar" src="pildid/avatar.jpg"/>
           </div>
@@ -105,11 +106,10 @@
 
 
 
+    <h2>Sõnum... </h2>
 
 	<!-- Crossword -->
-
 	<div class="main">
-
 	  <table class="text-center text-white">
         <!-- Essa Rida-->
 	    <tr>
diff --git a/rannak/mangud/kaitseliitlane/salakood/script.js b/rannak/mangud/kaitseliitlane/salakood/script.js
index 1945187..5925a0b 100644
--- a/rannak/mangud/kaitseliitlane/salakood/script.js
+++ b/rannak/mangud/kaitseliitlane/salakood/script.js
@@ -31,6 +31,11 @@ function clickEventAdder(){
                 if (node != curNode && node.classList.contains("selected"))
                     node.classList.remove("selected");
             }
+
+            // Bring cursor to input
+            document.querySelector("input").focus();
+            document.querySelector("input").select();
+
         });
 
     } // outerFor
diff --git a/rannak/mangud/kaitseliitlane/salakood/style.css b/rannak/mangud/kaitseliitlane/salakood/style.css
index 8a084d2..5da43dc 100644
--- a/rannak/mangud/kaitseliitlane/salakood/style.css
+++ b/rannak/mangud/kaitseliitlane/salakood/style.css
@@ -3,13 +3,22 @@
     src: url('fonts/28DaysLater.ttf');
 }
 
+@font-face {
+    font-family: 'fontUno';
+    src: url('fonts/mrsmonster.ttf');
+}
+
+
 
 * {
   box-sizing: border-box;
 }
 
 body{
-    background-color: #212121 !important;
+    background-color: #4D5157;
+}
+h1 {
+    color: #154734;
 }
 
 .moveOn{
@@ -31,30 +40,20 @@ button:disabled{
     cursor: not-allowed;
 }
 
-/* Retsept Lõpus*/
-
-.retsept {
-    margin-top: 5%;
-    width:60%;
-    color: #AFFF80;
-    text-align: center;
-    font-size: 1.2rem;
-}
-
 
 
 /* Modal Stuff */
 
 .avatar {
     border-radius: 20px;
-    width: 100% !important;
-    max-width: 15rem !important;
+    width: 100%;
+    max-width: 15rem;
 }
 
 .modalHeaderWrapper{
     text-align: center;
-    margin: 0 !important;
-    width: 100% !important;
+    margin: 0;
+    width: 100%;
 }
 
 
@@ -69,17 +68,17 @@ button:disabled{
     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;
+    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) !important;
+    background-color: rgba(0,136,169,0.8);
 }
 
 
@@ -90,7 +89,7 @@ input {
 }
 
 .inputBox{
-    margin-top: 10px !important;
+    margin-top: 10px;
 }
 
 .subBtn{
@@ -117,13 +116,24 @@ input {
 .infoWrapper{
     color: white;
     margin: 1rem;
+    font-size: 1.4rem;
+}
+
+.infoWrapper .infoTxt {
+    font-size: 1.1rem;
 }
 
-span, h6, table, h1{
+span, h6, table, h1, h2{
     font-family:'fontUno';
 }
 
 
+h2 {
+    color: white;
+    margin-left: 7%;
+}
+
+
 /* Main */
 
 .main {
@@ -142,36 +152,44 @@ span, h6, table, h1{
 }
 
 td {
-	width: 4rem !important;
-	height: 4rem !important;
+	width: 4rem;
+	height: 4rem;
 	font-weight: bold;
-    border-radius: 20px !important;
+    border-radius: 20px;
 }
 
 
+
 /* Responsivness */
 
 
 @media screen and (max-width: 1700px) {
     td {
-	    width: 3rem !important;
-	    height: 3rem !important;
+	    width: 4.5rem;
+	    height: 4.5rem;
+        font-size: 1.5rem;
     }
-    .main {margin-top: 4rem;}
+    h2 {margin-top: 4rem;}
+    .infoWrapper{font-size: 1.6rem;}
 }
 
 
 @media screen and (max-width: 1500px) {
     td {
-	    width: 2rem !important;
-	    height: 2rem !important;
+	    width: 4rem;
+	    height: 4rem;
+        font-size: 1.4rem;
     }
+
+    .infoWrapper{font-size: 1.5rem;}
 }
 
 
 
 @media screen and (min-width: 1900px) {
-    .main {
-        margin-top: 5rem;
+    h2{
+        margin-top: 5.5rem;
     }
+    .infoWrapper{font-size: 1.7rem;}
+    id {font-size: 1.6rem;}
 }
diff --git a/rannak/mangud/kaitseliitlane/sundmused/index.html b/rannak/mangud/kaitseliitlane/sundmused/index.html
index d2225b6..3e83187 100644
--- a/rannak/mangud/kaitseliitlane/sundmused/index.html
+++ b/rannak/mangud/kaitseliitlane/sundmused/index.html
@@ -4,12 +4,13 @@
     <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">
+
+    <link rel="stylesheet" href="styles.css">
 </head>
 
-<body class="bg-dark text-white">
+<body class="text-white">
 
     <div class="container text-center text-white align-items-center pb-5">
         <h1 class="pb-1 pt-2">Sündmused</h1>
diff --git a/rannak/mangud/kaitseliitlane/sundmused/styles.css b/rannak/mangud/kaitseliitlane/sundmused/styles.css
index 5e2d661..fe4f0f9 100644
--- a/rannak/mangud/kaitseliitlane/sundmused/styles.css
+++ b/rannak/mangud/kaitseliitlane/sundmused/styles.css
@@ -1,5 +1,12 @@
 * {
-	box-sizing: border-box !important;
+	box-sizing: border-box;
+}
+h1 {
+    color: #154734;
+    font-weight: bold;
+}
+body{
+    background-color: #4D5157;
 }
 
 .moveOn{
@@ -22,22 +29,22 @@ button:disabled{
 }
 
 .row {
-    margin: 0 5% !important;
+    margin: 0 5%;
 }
 
 img {
-	max-width: 100% !important;
-	height: auto !important;
+	max-width: 100%;
+	height: auto;
 	padding: .3rem;
 }
 
   
 .lists .list .list-item {
-	background-color: #b2beb5 !important;
+	background-color: #b2beb5;
 	color: #21201E;
 	margin: 0.5rem 0;
 	height: 2.5rem;
-	border-radius: 8px !important;
+	border-radius: 8px;
     cursor: pointer;
 }
 
@@ -45,11 +52,11 @@ img {
 	background-color: rgba(0, 0, 0, 0.3);
 	min-height: 2.5rem;
 	margin: .5rem;
-	border-radius: 8px !important;
+	border-radius: 8px;
 }
 
 .startBasket {
-	height: 100% !important;
+	height: 100%;
 	min-height: 2rem;
 }
 
@@ -58,14 +65,14 @@ img {
 
 .avatar {
     border-radius: 20px;
-    width: 100% !important;
-    max-width: 15rem !important;
+    width: 100%;
+    max-width: 15rem;
 }
 
 .modalHeaderWrapper{
     text-align: center;
-    margin: 0 !important;
-    width: 100% !important;
+    margin: 0;
+    width: 100%;
 }
 
 
@@ -79,16 +86,16 @@ img {
     position: absolute;
     top: 0;
     right: 0;
-    padding: 25px !important;
-    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;
+    padding: 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) !important;
+    background-color: rgba(0,136,169,0.8);
 }
diff --git a/rannak/mangud/partorg/kuulsused/index.html b/rannak/mangud/partorg/kuulsused/index.html
index b0503a2..80fc8c9 100644
--- a/rannak/mangud/partorg/kuulsused/index.html
+++ b/rannak/mangud/partorg/kuulsused/index.html
@@ -4,12 +4,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <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">
+
+    <link rel="stylesheet" href="styles.css">
 </head>
 
-<body class="bg-dark text-white">
+<body class="text-white">
 
     <div class="container text-center text-white align-items-center pb-5">
         <h1 class="pb-1 pt-2">Olulised isikud</h1>
diff --git a/rannak/mangud/partorg/kuulsused/styles.css b/rannak/mangud/partorg/kuulsused/styles.css
index 108bde9..f05f71d 100644
--- a/rannak/mangud/partorg/kuulsused/styles.css
+++ b/rannak/mangud/partorg/kuulsused/styles.css
@@ -1,22 +1,28 @@
 * {
-	box-sizing: border-box !important;
+	box-sizing: border-box;
+}
+body{background-color: #4D5157;}
+
+h1 {
+    color: #a1000e;
+    font-weight: bold;
 }
 
 .lists{
-    margin-bottom: 20px !important;
+    margin-bottom: 20px;
 }
 /* Modal Stuff */
 
 
 .avatar {
     border-radius: 20px;
-    width: 100% !important;
+    width: 100%;
 }
 
 .modalHeaderWrapper{
     text-align: center;
-    margin: 0 !important;
-    width: 100% !important;
+    margin: 0;
+    width: 100%;
 }
 
 .closeModalButton {
@@ -29,17 +35,17 @@
     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;
+    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) !important;
+    background-color: rgba(0,136,169,0.8);
 }
 
 
@@ -86,35 +92,35 @@ button:disabled{
 
 .carousel {
     border-left: 5px solid white;
-    padding: 1rem !important;
-    margin: auto !important;
-    width: 60% !important;
-    height: auto !important;
+    padding: 1rem;
+    margin: auto;
+    width: 60%;
+    height: auto;
 
 }
 
-.carousel-item{text-align: center !important;}
-.carousel-item .text{padding-top: 10px !important;}
+.carousel-item{text-align: center;}
+.carousel-item .text{padding-top: 10px;}
 
 .carousel-item img{
-    margin: auto !important;
-    max-width: 35%   !important;
-	height: auto !important;
+    margin: auto;
+    max-width: 35%  ;
+	height: auto;
 }
 
 .carousel-item .list {
 	background-color: rgba(0, 0, 0, 0.3);
 	min-height: 3.7rem;
 	margin: .5rem;
-	border-radius: 8px !important;
+	border-radius: 8px;
 }
 
 .list-item {
-	background-color: #b2beb5 !important;
+	background-color: #b2beb5;
 	color: #21201E;
 	margin: 0.5rem 0;
 	height: 2.5rem;
-	border-radius: 8px !important;
+	border-radius: 8px;
     cursor: pointer;
 }
 
@@ -123,12 +129,12 @@ button:disabled{
 /* Other */
 
 .modal-header img {
-	max-width: 15rem !important;
-	height: auto !important;
+	max-width: 15rem;
+	height: auto;
 	padding: .3rem;
 }
 
 .startBasket {
-	height: 100% !important;
+	height: 100%;
 	min-height: 2rem;
 }
diff --git a/rannak/mangud/partorg/plakat/img/lenin.png b/rannak/mangud/partorg/plakat/img/lenin.png
new file mode 100644
index 0000000..e36df3d
--- /dev/null
+++ b/rannak/mangud/partorg/plakat/img/lenin.png
diff --git a/rannak/mangud/partorg/plakat/img/nazi.png b/rannak/mangud/partorg/plakat/img/nazi.png
new file mode 100644
index 0000000..87e616e
--- /dev/null
+++ b/rannak/mangud/partorg/plakat/img/nazi.png
diff --git a/rannak/mangud/partorg/plakat/img/normalSelect.cur b/rannak/mangud/partorg/plakat/img/normalSelect.cur
new file mode 100644
index 0000000..fdd943c
--- /dev/null
+++ b/rannak/mangud/partorg/plakat/img/normalSelect.cur
diff --git a/rannak/mangud/partorg/plakat/img/redStar.png b/rannak/mangud/partorg/plakat/img/redStar.png
new file mode 100644
index 0000000..b6eee79
--- /dev/null
+++ b/rannak/mangud/partorg/plakat/img/redStar.png
diff --git a/rannak/mangud/partorg/plakat/img/stalinAddOn.png b/rannak/mangud/partorg/plakat/img/stalinAddOn.png
new file mode 100644
index 0000000..d3e05fd
--- /dev/null
+++ b/rannak/mangud/partorg/plakat/img/stalinAddOn.png
diff --git a/rannak/mangud/partorg/plakat/index.html b/rannak/mangud/partorg/plakat/index.html
index a15849e..9f1416b 100644
--- a/rannak/mangud/partorg/plakat/index.html
+++ b/rannak/mangud/partorg/plakat/index.html
@@ -3,12 +3,11 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
     <title>Plakat</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>
     <section class="wrapper">
@@ -17,7 +16,7 @@
 
           <div class="intro">
             <h1>Kujunda Plakatit</h1>
-            <p>Vali Välja Üks plakat ja muuda/lisa selle kujundust vastavalt enda äranägemise järgi</p>
+            <p>Vali välja üks plakat ja muuda/lisa selle kujundust vastavalt enda äranägemisele.</p>
             <button class="moveOn" disabled>Liigu Edasi</button>
 
             <!-- Button trigger modal -->
@@ -25,22 +24,27 @@
               Sissejuhatus
             </button>
 
+            <button id="clear">Puhasta</button>
           </div>
 
-          <form>
-          <p class="toolbarDiv">
-            <label for="stroke">Värv</label>
-            <input id="stroke" name='stroke' type="color">
-          </p>
-
-          <p class="toolbarDiv">
-            <label for="lineWidth">Joone Paksus</label>
-            <input id="lineWidth" name='lineWidth' type="number" value="5">
-          </p>
-
-          </form>
+          <div class="inputs">
+            <form>
+              <p class="toolbarDiv">
+                <label for="stroke">Värv</label>
+                <input id="stroke" name='stroke' type="color">
+              </p>
+
+              <p class="toolbarDiv">
+                <label for="lineWidth">Joone Paksus</label>
+                <input id="lineWidth" name='lineWidth' type="number" value="5" maxlength="1">
+              </p>
+
+              <!--
+              <button id="clear">Puhasta</button>
+              -->
+            </form>
+          </div>
 
-          <button id="clear">Puhasta</button>
 
 
           <!-- Image Pick-->
@@ -50,8 +54,21 @@
             <img id="veekogud" class="pickImg" alt="Veekogude Plakat" src="img/veekogud.jpg"/>
           </div>
 
+
+          <!-- Add-Ons Pick-->
+          <h2 class="ValiTxt"> Vali Lisasid </h2>
+          <div class="pickingSec">
+            <img id="redStar" class="pickImg" alt="red star" src="img/redStar.png"/>
+            <img id="lenin" class="pickImg" alt="lenin" src="img/lenin.png"/>
+            <img id="nazi" class="pickImg" alt="Nazi Flag" src="img/nazi.png"/>
+            <img id="stalinAddOn" class="pickImg" alt="Stalin" src="img/stalinAddOn.png"/>
+          </div>
+
         </div>
-        
+
+
+
+
         <div class="canvasWrap">
           <canvas id="drawing-board"></canvas>
         </div>
@@ -76,7 +93,18 @@
 
           <div class="modal-body">
             
-            Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo urna, molestie at elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing!
+            Peale ajalehe väljalõigete olen aastate jooksul kogunud ja säilitanud meeleolukaid plakateid nõukogudeaja kuldsest elust.
+            <br/>
+            Jagan siinkohal teiega, seltsimehed noored, nelja nendest. Plakatid on pärit erinevatest aastakümnetest: <br/>1950ndad, 1960ndad, 1970ndad ja 1980ndad aastad.
+            <br/>
+            <br/>
+            Palun uurige nende plakatite sisu ja vormi.
+            <br/>
+            Õppige, õppige, õppige! Kas tajute, millisesse kümnendisse iga plakat kuulub?
+            <br/> <br/>
+            <strong>
+            Mõelge plakatitele välja uus, kaasaega sobiv lööklause. Samuti kaunistage ja täiendage plakatit kaasaegsete kunsiliste detailidega. Ka huumor on lubatud!
+            </strong>
 
           </div>
 
diff --git a/rannak/mangud/partorg/plakat/main.js b/rannak/mangud/partorg/plakat/main.js
index 48626c6..9ae8e54 100644
--- a/rannak/mangud/partorg/plakat/main.js
+++ b/rannak/mangud/partorg/plakat/main.js
@@ -4,6 +4,7 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 
+console.log("FAAAAK");
 
 /* Inital Setup*/
 
@@ -25,12 +26,16 @@ function copyImageToCanvas(image, x, y) {
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
 }
 
+
+
+
 // Initial Drawring
 setTimeout(() => {
     copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY);
 }, 300);
 
 
+
 window.onresize = () => {
     canvasOffsetX = canvas.offsetLeft;
     canvasOffsetY = canvas.offsetTop;    
@@ -44,20 +49,45 @@ window.onresize = () => {
 
 /* EventHandlers and stuff*/
 
+let addOnHasBeenAdded = false;
+let addOnActive = false;
+let newAddOn;
+let hasPainted = false;
+
 let isPainting = false;
 let lineWidth = 5;
 let startX;
 let startY;
 
+const pildid = new Array();
+const addOns = new Array();
+
 toolbar.addEventListener('click', e => {
 
+
+    //Plakatid
     const stalinImg = document.getElementById("stalin");
     const veekogudImg = document.getElementById("veekogud");
 
-    const pildid = new Array();
     pildid.push(stalinImg);
     pildid.push(veekogudImg);
 
+
+   //Addons 
+
+    const naziImg = document.getElementById("nazi");
+    const lenin = document.getElementById("lenin");
+    const redStar = document.getElementById("redStar");
+    const stalinAddOn = document.getElementById("stalinAddOn");
+
+    addOns.push(naziImg);
+    addOns.push(lenin);
+    addOns.push(redStar);
+    addOns.push(stalinAddOn);
+
+
+
+
     if (e.target.id === "stalin" || e.target.id === "veekogud") {
         for (el in pildid) {
             pildid[el].classList.remove("picked");
@@ -72,17 +102,60 @@ toolbar.addEventListener('click', e => {
     }
 
 
-    if (e.target.id === 'clear') {
+    else if (e.target.id === 'clear') {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY);
         moveOnDisable();
     }
 
+
+    else if (e.target.id === 'nazi' || e.target.id === 'lenin' || e.target.id === 'redStar' || e.target.id === 'stalinAddOn') {
+        addOnActive = true;
+        document.body.style.cursor =  "url('img/normalSelect.cur'), auto";
+
+        for (el in addOns) {
+            addOns[el].classList.remove("addOnPicked");
+        }
+
+        newAddOn = document.getElementById(e.target.id);
+        newAddOn.classList.add("addOnPicked");
+    }
+
+
+});
+
+
+
+canvas.addEventListener('click', e => {
+
+    if(addOnActive == true){
+        addOnActive = false;
+        document.body.style.cursor = "auto";
+
+        for (el in addOns) {
+            addOns[el].classList.remove("addOnPicked");
+        }
+
+        let xCord = e.offsetX - (newAddOn.clientWidth / 2)
+        let yCord = e.offsetY - (newAddOn.clientHeight / 2)
+        ctx.drawImage(newAddOn, xCord, yCord, newAddOn.clientWidth, newAddOn.clientHeight);
+
+
+        addOnHasBeenAdded = true;
+        if (hasPainted)
+            moveOnEnable();
+    }
 });
 
 
 
+
+
+
+
+
 /* Drawing stuff from here */
+
 toolbar.addEventListener('change', e => {
     if(e.target.id === 'stroke') {
         ctx.strokeStyle = e.target.value;
@@ -108,7 +181,9 @@ const draw = (e) => {
     //ctx.lineTo(e.clientX -  abiOffset, e.clientY);
     ctx.stroke();
 
-    moveOnEnable();
+    hasPainted = true;
+    if (addOnHasBeenAdded)
+        moveOnEnable();
 }
 
 
@@ -132,8 +207,8 @@ canvas.addEventListener('mousemove', draw);
 
 
 
-// Move On Stuff
 
+// Move On Stuff
 
 function moveOnEnable(){
     const btn = document.querySelector(".moveOn");
diff --git a/rannak/mangud/partorg/plakat/style.css b/rannak/mangud/partorg/plakat/style.css
index bc5c2c4..215c073 100644
--- a/rannak/mangud/partorg/plakat/style.css
+++ b/rannak/mangud/partorg/plakat/style.css
@@ -1,7 +1,13 @@
 body {
-    height: 100% !important;
-    overflow: hidden !important;
-    color: white !important;
+    height: 100%;
+    overflow: hidden;
+    color: white;
+    background-color: #43464b;
+}
+
+h1 {
+    color: #a1000e;
+    font-weight: bold;
 }
 
 
@@ -9,15 +15,15 @@ body {
                 
 .avatar {
     border-radius: 20px;
-    width: 100% !important;
-    max-width: 15rem !important;
+    width: 100%;
+    max-width: 15rem;
 }
 
 
 .modalHeaderWrapper{
     text-align: center;
-    margin: 0 !important;
-    width: 100% !important;
+    margin: 0;
+    width: 100%;
 }
 
 button:disabled{
@@ -47,18 +53,18 @@ button:disabled{
 }
 
 .modalButton{
-    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;
-    font-size: 1.2rem !important;
-	text-align: center !important;
-    margin-left: 30px !important;
+    background-color: rgba(0,136,169,1);
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3 ease 0;
+    font-size: 1.2rem;
+	text-align: center;
+    margin-left: 30px;
 }
 
 .modalButton:hover{
-    background-color: rgba(0,136,169,0.8) !important;
+    background-color: rgba(0,136,169,0.8);
 }
 
 
@@ -71,7 +77,6 @@ button:disabled{
 }
 
 /* Toolbar */
-
 .intro{
     text-align: center;
     border-bottom: 2px solid gray;
@@ -86,7 +91,7 @@ button:disabled{
     padding: 5px;
     width: 20%;
     min-width:350px;
-    background-color: #202020;
+    background-color: #43464b;
 }
 
 #clear{
@@ -99,14 +104,18 @@ button:disabled{
 }
 
 #toolbar * {margin-bottom: 6px;}
-#toolbar input {width: 50%;}
+#toolbar input {width: 4rem;}
+
+.toolbarDiv {width: 100%;}
+
+form {
+    display: flex;
+    align-items: center;
+}
 
-form  { display: table !important;}
-input { display: table-cell !important;}
-.toolbarDiv {width: 100% !important;}
 label {
-    display: table-cell !important;
-    font-size: 1.2rem !important;
+    display: table-cell;
+    font-size: 1.2rem;
 }
 
 
@@ -118,15 +127,24 @@ label {
     overflow-y: scroll;
 }
 
+
 .valiTxt {
     border-bottom: 4px solid gray;
     padding-top: 10px;
 }
 
+
 .picked{
     border: 2px solid lime;
 }
 
+
+.addOnPicked{
+    border: 2px solid aqua;
+}
+
+
+
 .pickImg {
     width: 50%;
     height: auto;
@@ -141,3 +159,30 @@ canvas{
     display: block;
     margin: 0 auto;
 }
+
+
+
+
+
+/* Responsivness */
+
+@media screen and (max-width: 1400px) {
+    .pickImg {
+        width: 30%;
+        height: auto;
+        padding: 7px;
+        margin-left: calc(7% - 21px);
+    }
+
+}
+
+
+@media screen and (max-width: 900px) {
+    .pickImg {
+        width: 24%;
+        height: auto;
+        padding: 3px;
+        margin-left: calc(1% - 10px);
+    }
+
+}
diff --git a/rannak/mangud/partorg/sonaragastik/index.html b/rannak/mangud/partorg/sonaragastik/index.html
index 11d31ec..be6093e 100644
--- a/rannak/mangud/partorg/sonaragastik/index.html
+++ b/rannak/mangud/partorg/sonaragastik/index.html
@@ -4,10 +4,10 @@
   <meta charset="UTF-8">
 
   <title>Sõnarägastik</title>
-
-  <link rel="stylesheet" href="style.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">
+
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
@@ -34,16 +34,11 @@
 	  </div>
     </div>
 
-
-
     <!-- Button trigger modal -->
     <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
       Sissejuhatus
     </button>
 
-
-
-
     <!-- 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">
@@ -63,6 +58,8 @@
             Meie kaasaeg ja kuulsusrikas nõukogude lähiminevik on ellu kutsunud mitmed huvitavad mõisted ja uudissõnad, kas ka teie tunnete neid?
             <br/>
             <strong>Leidke need mõisted ja uudissõnad sõnarägastikust.</strong>
+            <br/>
+            <strong>NB! Kontrolli sõnu ükshaaval.</strong>
 
 
           </div>
@@ -108,10 +105,6 @@
           </li>
 
 		  <li>
-            <strong class="Vtuusik">TUUSIK</strong>. Neid jagasid töökohtade ametiühingukomiteed. Olenevalt tuusikust sai minna kas mõne vennasvabariigi puhkekodusse, sanatooriumisse või turismibaasi või näiteks turismirongiga Poola, Saksa Demokraatlikku Vabariiki vm sotsmaale.
-          </li>
-
-		  <li>
             <strong class="Vplaanimajandus">PLAANIMAJANDUS.</strong> Kuna riik otsustas, kui palju mingit kaupa toodetakse,
             oli asju tavaliselt kas üle (nt povidlo) või puudu (nt viinerid, defitsiit!).
           </li>
@@ -135,6 +128,7 @@
 
 
 	<!-- Sõnarägastik -->
+      <div class="tableWrapper">
 	<table class="text-center text-white">
 
       <!-- Essa Rida-->
@@ -162,7 +156,7 @@
 		<td></td>
 		<td></td>
 		<td class="tsaika"><span>Š</span></td>
-		<td class="tuusik"><span>T</span></td>
+		<td></td>
 		<td></td>
 		<td></td>
 		<td></td>
@@ -181,7 +175,7 @@
 		<td></td>
 		<td class="tsaika"><span>A</span></td>
 		<td></td>
-		<td class="tuusik"><span>U</span></td>
+		<td></td>
 		<td></td>
 		<td></td>
 		<td class="redis"><span>R</span></td>
@@ -200,7 +194,7 @@
 		<td class="letialuneKaup tsaika"><span>I</span></td>
 		<td class="letialuneKaup"><span>A</span></td>
 		<td class="letialuneKaup"><span>L</span></td>
-		<td class="letialuneKaup tuusik"><span>U</span></td>
+		<td class="letialuneKaup"><span>U</span></td>
 		<td class="letialuneKaup"><span>N</span></td>
 		<td class="letialuneKaup redis"><span>E</span></td>
 		<td class="letialuneKaup"><span>K</span></td>
@@ -219,7 +213,7 @@
 		<td></td>
 		<td></td>
 		<td></td>
-		<td class="tuusik"><span>S</span></td>
+		<td></td>
 		<td class="redis"><span>D</span></td>
 		<td></td>
 		<td class="plaanimajandus"><span>N</span></td>
@@ -238,7 +232,7 @@
 		<td></td>
 		<td></td>
 		<td></td>
-		<td class="redis tuusik"><span>I</span></td>
+		<td class="redis"><span>I</span></td>
 		<td></td>
 		<td class="plaanimajandus"><span>I</span></td>
 		<td class="rubla"><span>L</span></td>
@@ -257,7 +251,7 @@
 		<td class="talongid"><span>I</span></td>
 		<td class="talongid"><span>D</span></td>
 		<td class="redis"><span>S</span></td>
-		<td class="tuusik"><span>K</span></td>
+		<td></td>
 		<td class="plaanimajandus"><span>M</span></td>
 		<td class="rubla"><span>A</span></td>
 		<td></td>
@@ -390,7 +384,8 @@
 	  </tr>
 
 	  </tr>
-    </table>
+</table>
+</div>
 
 	</div> <!-- End of main class-->
 
diff --git a/rannak/mangud/partorg/sonaragastik/script.js b/rannak/mangud/partorg/sonaragastik/script.js
index 33626b1..2e6ffb4 100644
--- a/rannak/mangud/partorg/sonaragastik/script.js
+++ b/rannak/mangud/partorg/sonaragastik/script.js
@@ -40,7 +40,7 @@ function message(msg, color){
 
 // Main stuff
 
-const vastused = ["valuuta", "tuusik", "tsaika", "redis", "plaanimajandus",
+const vastused = ["valuuta", "tsaika", "redis", "plaanimajandus",
                   "rubla", "letialuneKaup", "talongid", "maantee",
                   "piiritsoon", "defitsiit"];
 
@@ -98,7 +98,7 @@ function proovi(){
                 õigedCounter++;
                 //console.log(õigedCounter);
             }
-            if (õigedCounter >= 11)
+            if (õigedCounter >= 10)
                 moveOnEnable();
 
 
diff --git a/rannak/mangud/partorg/sonaragastik/style.css b/rannak/mangud/partorg/sonaragastik/style.css
index 73bfa90..690ad14 100644
--- a/rannak/mangud/partorg/sonaragastik/style.css
+++ b/rannak/mangud/partorg/sonaragastik/style.css
@@ -3,7 +3,12 @@
 }
 
 body{
-    background-color: #212121 !important;
+    background-color: #4D5157;
+}
+
+h1{
+    color: #a1000e;
+    font-weight: bold;
 }
 
 .moveOn{
@@ -30,14 +35,14 @@ button:disabled{
 
 .avatar {
     border-radius: 20px;
-    width: 100% !important;
-    max-width: 15rem !important;
+    width: 100%;
+    max-width: 15rem;
 }
 
 .modalHeaderWrapper{
     text-align: center;
-    margin: 0 !important;
-    width: 100% !important;
+    margin: 0;
+    width: 100%;
 }
 
 
@@ -53,17 +58,17 @@ button:disabled{
     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;
+    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) !important;
+    background-color: rgba(0,136,169,0.8);
 }
 
 /* Input Box styles */
@@ -94,15 +99,15 @@ button:disabled{
 
 /* Adding classes */
 .selected {
-    background-color: lime !important;
+    background-color: #ECAC76;
 }
 
 .doneV{
-    background-color: #562ABF;
+    background-color: #284F8F;
 }
 
 .doneH{
-    background-color: #FF0883;
+    background-color: #C5E17A;
 }
 
 .done{
@@ -115,51 +120,57 @@ button:disabled{
 
 .main{
 	display: flex;
+    justify-content: center;
 }
 
 .left {
 	margin: 10px;
-	width: calc((100vw - (14*3rem) - 10rem)/ 2) !important;
+	width: 35%;
     font-size: .8rem;
+    padding: 1rem;
+    margin: 0;
 }
 
 .left strong{
     font-size: 1rem;
 }
 
+.tableWrapper {
+    width: 65%; 
+}
+
 table{ 
-    margin: 10px auto;
-    margin-left: 5rem;
+    margin: 10px ;
 }
 
 td {
-	border: 4px solid white !important;
-	width: 3.5rem !important;
+	border: 4px solid white;
+	width: 3.5rem;
 	font-weight: bold;
 }
 
 
 /*
 td {
-    display: block !important;
-    float: left !important;
-    border: 2px solid white !important;
-    width: 5% !important;
-    padding-bottom: 5% !important;
+    display: block;
+    float: left;
+    border: 2px solid white;
+    width: 5%;
+    padding-bottom: 5%;
 }
 
-td span { position: absolute !important}
+td span { position: absolute}
 table {
-    display: block !important;
-    width: 100% !important;
+    display: block;
+    width: 100%;
 }
 tr {
-    display: block !important; 
-    width: 100% !important;
+    display: block; 
+    width: 100%;
 }
 
 tbody {
-    display: block !important;
-    width: 100% !important;
+    display: block;
+    width: 100%;
 }
 */
diff --git a/rannak/mangud/perenaine/memori/img/alko.svg b/rannak/mangud/perenaine/memori/img/alko.svg
index e7bcc31..6d54db5 100644
--- a/rannak/mangud/perenaine/memori/img/alko.svg
+++ b/rannak/mangud/perenaine/memori/img/alko.svg
@@ -1 +1,37 @@
-<?xml version="1.0" ?><svg width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#bcc2d7;}.cls-2{fill:#ab7c73;}.cls-3{fill:#6e5b5e;}.cls-4{fill:#eff3fe;}</style></defs><g id="main"><path class="cls-1" d="M55,20H49a1,1,0,0,0-1,1V48a1,1,0,0,0,1,1A11,11,0,0,0,60,38V25A5,5,0,0,0,55,20ZM50,42.9V26h3a1,1,0,0,1,1,1V38A5,5,0,0,1,50,42.9Z"/><path class="cls-2" d="M48.66,18.71A4.91,4.91,0,0,1,47,19H36a1,1,0,0,0-1,1v7a2,2,0,0,1-4,0V23a4,4,0,0,0-8,0V34a2,2,0,0,1-4,0V20a1,1,0,0,0-1-1H9a1,1,0,0,0-1,1V54a9,9,0,0,0,9,9H41a9,9,0,0,0,9-9V19.65A1,1,0,0,0,48.66,18.71Z"/><path class="cls-3" d="M20,59H17a5,5,0,0,1-5-5V51a1,1,0,0,1,2,0v3a3,3,0,0,0,3,3h3a1,1,0,0,1,0,2Z"/><path class="cls-4" d="M48,7.07A7.09,7.09,0,0,0,41.4,5.19,7,7,0,0,0,29.51,3.65a7,7,0,0,0-8.42-.45A7,7,0,0,0,9.16,6.52,8,8,0,0,0,7.89,20.86,1,1,0,0,0,8.4,21H17V34a4,4,0,0,0,8,0V23a2,2,0,0,1,4,0v4a4,4,0,0,0,8,0V21H47A7,7,0,0,0,48,7.07Z"/></g></svg>
-\ No newline at end of file
+<?xml version="1.0" ?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<g>
+
+<path d="M23.8535156,1.6464844l-1.5-1.5c-0.1953125-0.1953125-0.5117188-0.1953125-0.7070312,0L19.729126,2.0638428   c-0.1885986-0.098999-0.4240723-0.0759277-0.5826416,0.0826416l-3.7880859,3.7880859   c-1.9462891-0.5317383-4.0078125,0.0078125-5.4482422,1.4477539l-9.0566406,9.0571289C0.3027344,16.9892578,0,17.7211914,0,18.5   s0.3027344,1.5107422,0.8535156,2.0605469l2.5859375,2.5859375C3.9902344,23.6967773,4.7226562,24,5.5,24   s1.5097656-0.3032227,2.0605469-0.8535156l9.0566406-9.0571289c1.4404297-1.4394531,1.9814453-3.5014648,1.4482422-5.4477539   l3.7880859-3.7880859c0.1585693-0.1585693,0.1816406-0.394043,0.0826416-0.5826416l1.9173584-1.9173584   C24.0488281,2.1582031,24.0488281,1.8417969,23.8535156,1.6464844z" fill="#303C42"/>
+
+<rect fill="#9F614B" height="7.4853883" transform="matrix(0.7071068 -0.7071068 0.7071068 0.7071068 -8.4705124 10.5501308)" width="7.4853883" x="4.757184" y="11.757184"/>
+
+<path d="M6.8535156,22.4394531c-0.7246094,0.7226562-1.9824219,0.7226562-2.7070312,0l-2.5859375-2.5859375   C1.1992188,19.4921875,1,19.0117188,1,18.5s0.1992188-0.9921875,0.5605469-1.3535156L2.5,16.2070312L7.7929688,21.5   L6.8535156,22.4394531z" fill="#676F4B"/>
+
+<path d="M17.1464844,8.1464844c-0.1337891,0.1337891-0.1806641,0.3320312-0.1210938,0.5117188   c0.5576172,1.6699219,0.1298828,3.4799805-1.1152344,4.7241211l-1.4103394,1.4104614L9.2068481,9.4998169l1.4103394-1.4104614   c0.8837891-0.8833008,2.0527344-1.3549805,3.2548828-1.3549805c0.4902344,0,0.9863281,0.0786133,1.4697266,0.2397461   c0.1806641,0.0615234,0.3779297,0.0131836,0.5117188-0.1206055L19.5,3.2070312L20.7929688,4.5L17.1464844,8.1464844z" fill="#676F4B"/>
+
+<polygon opacity="0.1" points="8.4998169,10.2068481 3.2069702,15.499939 3.7162476,16.0092163 8.9930134,10.7000446  "/>
+
+<path d="M2.0605469,17.6650391L3,16.7070312l-0.5-0.5l-0.9394531,0.9394531   C1.1992188,17.5078125,1,17.9882812,1,18.5s0.1992188,0.9921875,0.5605469,1.3535156l0.4143677,0.4143677   C1.6724243,19.920105,1.5,19.4846191,1.5,19.0185547C1.5,18.5068359,1.6992188,18.0263672,2.0605469,17.6650391z" opacity="0.1"/>
+
+<path d="M14.3720703,7.2529297c0.4902344,0,0.9863281,0.0786133,1.4697266,0.2397461   c0.1806641,0.0615234,0.3779297,0.0131836,0.5117188-0.1206055l3.6578121-3.6537108L19.5,3.2070312l-3.6464844,3.6464844   c-0.1337891,0.1337891-0.3310547,0.1821289-0.5117188,0.1206055c-0.4833984-0.1611328-0.9794922-0.2397461-1.4697266-0.2397461   c-1.2021484,0-2.3710938,0.4716797-3.2548828,1.3549805L9.2068481,9.4998169l0.5092773,0.5092773l1.401062-1.4011841   C12.0009766,7.7246094,13.1699219,7.2529297,14.3720703,7.2529297z" opacity="0.1"/>
+
+<rect fill="#FFFFFF" height="0.7202339" opacity="0.2" transform="matrix(0.7025585 -0.711626 0.711626 0.7025585 -9.4893856 13.0718641)" width="7.4876971" x="7.1486149" y="17.5274487"/>
+
+<path d="M6.3550715,21.9159241c-0.7246094,0.7226562-1.9824219,0.7226562-2.7070312,0l0.5,0.5185547   c0.7246094,0.7226562,1.9824219,0.7226562,2.7070312,0L7.7929688,21.5l-0.5113282-0.5113277L6.3550715,21.9159241z" fill="#FFFFFF" opacity="0.2"/>
+
+<path d="M17.1480408,8.14151l3.6464844-3.6464849l-0.5125713-0.5060406l-3.633913,3.6339703   c-0.1337891,0.1337891-0.1806641,0.3320312-0.1210938,0.5117192c0.5576172,1.6699219,0.1298828,3.4799805-1.1152344,4.7241211   l-1.4258442,1.420042l0.5155048,0.5089741l1.4103394-1.4104614c1.2451172-1.2441406,1.6728516-3.0541992,1.1152344-4.7241211   C16.9673767,8.4735413,17.0142517,8.2752991,17.1480408,8.14151z" fill="#FFFFFF" opacity="0.2"/>
+
+<rect fill="#FED4A3" height="1.1214272" transform="matrix(0.7071068 -0.7071068 0.7071068 0.7071068 4.6544371 15.9868059)" width="2.1820874" x="20.5339565" y="1.8142865"/>
+
+<linearGradient gradientUnits="userSpaceOnUse" id="SVGID_1_" x1="4.6483169" x2="18.3335743" y1="7.8812494" y2="14.2627897">
+
+<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2"/>
+
+<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+
+</linearGradient>
+
+<path d="M23.8535156,1.6464844l-1.5-1.5c-0.1953125-0.1953125-0.5117188-0.1953125-0.7070312,0   L19.729126,2.0638428c-0.1885986-0.098999-0.4240723-0.0759277-0.5826416,0.0826416l-3.7880859,3.7880859   c-1.9462891-0.5317383-4.0078125,0.0078125-5.4482422,1.4477539l-9.0566406,9.0571289C0.3027344,16.9892578,0,17.7211914,0,18.5   s0.3027344,1.5107422,0.8535156,2.0605469l2.5859375,2.5859375C3.9902344,23.6967773,4.7226562,24,5.5,24   s1.5097656-0.3032227,2.0605469-0.8535156l9.0566406-9.0571289c1.4404297-1.4394531,1.9814453-3.5014648,1.4482422-5.4477539   l3.7880859-3.7880859c0.1585693-0.1585693,0.1816406-0.394043,0.0826416-0.5826416l1.9173584-1.9173584   C24.0488281,2.1582031,24.0488281,1.8417969,23.8535156,1.6464844z" fill="url(#SVGID_1_)"/>
+
+</g>
+
+<g/>
+
+<g/>
+
+<g/>
+
+<g/>
+
+<g/>
+
+<g/>
+
+<g/>
+
+<g/>
+
+<g/>
+
+<g/>
+
+<g/>
+
+<g/>
+
+<g/>
+
+<g/>
+
+<g/>
+
+</svg>
+\ No newline at end of file
diff --git a/rannak/mangud/perenaine/memori/img/alko.svg.bak b/rannak/mangud/perenaine/memori/img/alko.svg.bak
new file mode 100644
index 0000000..e7bcc31
--- /dev/null
+++ b/rannak/mangud/perenaine/memori/img/alko.svg.bak
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#bcc2d7;}.cls-2{fill:#ab7c73;}.cls-3{fill:#6e5b5e;}.cls-4{fill:#eff3fe;}</style></defs><g id="main"><path class="cls-1" d="M55,20H49a1,1,0,0,0-1,1V48a1,1,0,0,0,1,1A11,11,0,0,0,60,38V25A5,5,0,0,0,55,20ZM50,42.9V26h3a1,1,0,0,1,1,1V38A5,5,0,0,1,50,42.9Z"/><path class="cls-2" d="M48.66,18.71A4.91,4.91,0,0,1,47,19H36a1,1,0,0,0-1,1v7a2,2,0,0,1-4,0V23a4,4,0,0,0-8,0V34a2,2,0,0,1-4,0V20a1,1,0,0,0-1-1H9a1,1,0,0,0-1,1V54a9,9,0,0,0,9,9H41a9,9,0,0,0,9-9V19.65A1,1,0,0,0,48.66,18.71Z"/><path class="cls-3" d="M20,59H17a5,5,0,0,1-5-5V51a1,1,0,0,1,2,0v3a3,3,0,0,0,3,3h3a1,1,0,0,1,0,2Z"/><path class="cls-4" d="M48,7.07A7.09,7.09,0,0,0,41.4,5.19,7,7,0,0,0,29.51,3.65a7,7,0,0,0-8.42-.45A7,7,0,0,0,9.16,6.52,8,8,0,0,0,7.89,20.86,1,1,0,0,0,8.4,21H17V34a4,4,0,0,0,8,0V23a2,2,0,0,1,4,0v4a4,4,0,0,0,8,0V21H47A7,7,0,0,0,48,7.07Z"/></g></svg>
+\ No newline at end of file
diff --git a/rannak/mangud/perenaine/memori/img/riis.svg.bak b/rannak/mangud/perenaine/memori/img/riis.svg.bak
deleted file mode 100644
index 8376e61..0000000
--- a/rannak/mangud/perenaine/memori/img/riis.svg.bak
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="72px" height="72px" viewBox="0 0 72 72" id="emoji" xmlns="http://www.w3.org/2000/svg">
-  <g id="color">
-    <path fill="#FFFFFF" stroke="none" d="M8.1221,36v-3.5859c-0.1543-0.4287,0.8281-0.9073,0.999-1.3672c0.126-0.336,0.3379-0.6114,0.5957-0.8272 c-0.4834-0.5361-0.666-1.3095-0.3965-2.0332c0.3067-0.8232,1.0986-1.3154,1.9307-1.292c-0.1895-0.4521-0.2188-0.9736-0.0342-1.4697 c0.1865-0.5,0.5537-0.8769,0.998-1.0937c-0.2265-0.4727-0.2714-1.0332-0.0742-1.5635c0.3291-0.8809,1.2119-1.3867,2.1065-1.2822 c-0.1446-0.419-0.1651-0.8838,0.0029-1.3331c0.3857-1.0351,1.5381-1.5615,2.5723-1.1757c0.0947,0.0351,0.1787,0.083,0.2646,0.1308 c-0.0654-0.3467-0.0469-0.7129,0.085-1.0674c0.2099-0.5625,0.6494-0.9677,1.1699-1.165c-0.2647-0.4902-0.332-1.083-0.1221-1.6465 c0.3858-1.0342,1.5371-1.5605,2.5723-1.1758c0.3545,0.1328,0.6435,0.3594,0.8623,0.6348c0.0205-0.0947,0.04-0.1904,0.0752-0.2852 c0.3047-0.8173,1.0889-1.3085,1.915-1.2929c-0.0908-0.375-0.0752-0.7793,0.0694-1.168c0.3857-1.0351,1.5381-1.5615,2.5722-1.1758 c0.3555,0.1319,0.6436,0.3584,0.8633,0.6348c0.0195-0.0957,0.0391-0.1914,0.0742-0.2852c0.334-0.8974,1.2461-1.4101,2.1563-1.2798 C29.7432,9.3315,30.3311,9,31,9c0.873,0,1.6074,0.563,1.8799,1.3428C33.2002,10.1265,33.585,10,34,10 c0.0898,0,0.1768,0.0151,0.2627,0.0264C34.6055,9.417,35.251,9,36,9s1.3945,0.417,1.7373,1.0264C37.8232,10.0151,37.9102,10,38,10 c0.415,0,0.7998,0.1265,1.1201,0.3428C39.3926,9.563,40.127,9,41,9c0.6689,0,1.2568,0.3315,1.6201,0.8354 c0.9102-0.1303,1.8223,0.3824,2.1563,1.2798c0.0351,0.0938,0.0547,0.1895,0.0742,0.2852c0.2197-0.2764,0.5078-0.5029,0.8633-0.6348 c1.0341-0.3857,2.1865,0.1407,2.5722,1.1758c0.1446,0.3887,0.1602,0.793,0.0694,1.168c0.8261-0.0156,1.6103,0.4756,1.915,1.2929 c0.0352,0.0948,0.0547,0.1905,0.0752,0.2852c0.2188-0.2754,0.5078-0.502,0.8623-0.6348c1.0352-0.3847,2.1865,0.1416,2.5723,1.1758 c0.2099,0.5635,0.1426,1.1563-0.1221,1.6465c0.5205,0.1973,0.96,0.6025,1.1699,1.165c0.1319,0.3545,0.1504,0.7207,0.085,1.0674 c0.0859-0.0478,0.1699-0.0957,0.2646-0.1308c1.0342-0.3858,2.1866,0.1406,2.5723,1.1757c0.168,0.4493,0.1475,0.9141,0.0029,1.3331 c0.8946-0.1045,1.7774,0.4013,2.1065,1.2822c0.1972,0.5303,0.1523,1.0908-0.0742,1.5635c0.4443,0.2168,0.8115,0.5937,0.998,1.0937 c0.1846,0.4961,0.1553,1.0176-0.0342,1.4697c0.8321-0.0234,1.624,0.4688,1.9307,1.292c0.2695,0.7237,0.0869,1.4971-0.3965,2.0332 c0.2578,0.2158,0.4697,0.4912,0.5957,0.8272c0.1709,0.4599,1.1533,0.9385,0.999,1.3672V36"/>
-    <path fill="#FFFFFF" stroke="none" d="M65,36c0,16.0156-12.9834,29-29,29S7,52.0156,7,36H65z"/>
-    <path fill="#d0cfce" stroke="none" d="M49,36c0,16.0156-4,29-13,29c16.0166,0,29-12.9844,29-29H49z"/>
-  </g>
-  <g id="hair"/>
-  <g id="skin"/>
-  <g id="skin-shadow"/>
-  <g id="line">
-    <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M62.8779,32.4141c0.1543-0.4287,0.1719-0.9073,0.001-1.3672c-0.126-0.336-0.3379-0.6114-0.5957-0.8272 c0.4834-0.5361,0.666-1.3095,0.3965-2.0332c-0.3067-0.8232-1.0986-1.3154-1.9307-1.292c0.1895-0.4521,0.2188-0.9736,0.0342-1.4697 c-0.1865-0.5-0.5537-0.8769-0.998-1.0937c0.2265-0.4727,0.2714-1.0332,0.0742-1.5635c-0.3291-0.8809-1.2119-1.3867-2.1065-1.2822 c0.1446-0.419,0.1651-0.8838-0.0029-1.3331c-0.3857-1.0351-1.5381-1.5615-2.5723-1.1757c-0.0947,0.0351-0.1787,0.083-0.2646,0.1308 c0.0654-0.3467,0.0469-0.7129-0.085-1.0674c-0.2099-0.5625-0.6494-0.9677-1.1699-1.165c0.2647-0.4902,0.332-1.083,0.1221-1.6465 c-0.3858-1.0342-1.5371-1.5605-2.5723-1.1758c-0.3545,0.1328-0.6435,0.3594-0.8623,0.6348 c-0.0205-0.0947-0.04-0.1904-0.0752-0.2852c-0.3047-0.8173-1.0889-1.3085-1.915-1.2929c0.0908-0.375,0.0752-0.7793-0.0694-1.168 c-0.3857-1.0351-1.5381-1.5615-2.5722-1.1758c-0.3555,0.1319-0.6436,0.3584-0.8633,0.6348 c-0.0195-0.0957-0.0391-0.1914-0.0742-0.2852c-0.334-0.8974-1.2461-1.4101-2.1563-1.2798C42.2568,9.3315,41.6689,9,41,9 c-0.873,0-1.6074,0.563-1.8799,1.3428C38.7998,10.1265,38.415,10,38,10c-0.0898,0-0.1768,0.0151-0.2627,0.0264 C37.3945,9.417,36.749,9,36,9s-1.3945,0.417-1.7373,1.0264C34.1768,10.0151,34.0898,10,34,10c-0.415,0-0.7998,0.1265-1.1201,0.3428 C32.6074,9.563,31.873,9,31,9c-0.6689,0-1.2568,0.3315-1.6201,0.8354c-0.9102-0.1303-1.8223,0.3824-2.1563,1.2798 c-0.0351,0.0938-0.0547,0.1895-0.0742,0.2852c-0.2197-0.2764-0.5078-0.5029-0.8633-0.6348 c-1.0341-0.3857-2.1865,0.1407-2.5722,1.1758c-0.1446,0.3887-0.1602,0.793-0.0694,1.168c-0.8261-0.0156-1.6103,0.4756-1.915,1.2929 c-0.0352,0.0948-0.0547,0.1905-0.0752,0.2852c-0.2188-0.2754-0.5078-0.502-0.8623-0.6348 c-1.0352-0.3847-2.1865,0.1416-2.5723,1.1758c-0.2099,0.5635-0.1426,1.1563,0.1221,1.6465c-0.5205,0.1973-0.96,0.6025-1.1699,1.165 c-0.1319,0.3545-0.1504,0.7207-0.085,1.0674c-0.0859-0.0478-0.1699-0.0957-0.2646-0.1308 c-1.0342-0.3858-2.1866,0.1406-2.5723,1.1757c-0.168,0.4493-0.1475,0.9141-0.0029,1.3331 c-0.8946-0.1045-1.7774,0.4013-2.1065,1.2822c-0.1972,0.5303-0.1523,1.0908,0.0742,1.5635 c-0.4443,0.2168-0.8115,0.5937-0.998,1.0937c-0.1846,0.4961-0.1553,1.0176,0.0342,1.4697c-0.8321-0.0234-1.624,0.4688-1.9307,1.292 c-0.2695,0.7237-0.0869,1.4971,0.3965,2.0332c-0.2578,0.2158-0.4697,0.4912-0.5957,0.8272 c-0.1709,0.4599-0.1533,0.9385,0.001,1.3672"/>
-    <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M65,36c0,16.0156-12.9834,29-29,29S7,52.0156,7,36H65z"/>
-  </g>
-</svg>
diff --git a/rannak/mangud/perenaine/memori/index.html b/rannak/mangud/perenaine/memori/index.html
index c8fd288..21c3583 100644
--- a/rannak/mangud/perenaine/memori/index.html
+++ b/rannak/mangud/perenaine/memori/index.html
@@ -4,10 +4,10 @@
   <meta charset="UTF-8">
 
   <title>Memori</title>
-
-  <link rel="stylesheet" href="style.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">
+
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
diff --git a/rannak/mangud/perenaine/memori/style.css b/rannak/mangud/perenaine/memori/style.css
index fa7a05a..f76cfda 100644
--- a/rannak/mangud/perenaine/memori/style.css
+++ b/rannak/mangud/perenaine/memori/style.css
@@ -7,7 +7,16 @@
 body {
   height: 100vh;
   display: flex;
+  background-color: #43464b;
+  color: white;
+  /*
   background: #eeee90 !important;
+  */
+}
+
+h1 {
+    color: #FEDD00;
+    font-weight: bold;
 }
 
 .moveOn{
diff --git a/rannak/mangud/perenaine/ristsona/index.html b/rannak/mangud/perenaine/ristsona/index.html
index e4de94f..cb8ce41 100644
--- a/rannak/mangud/perenaine/ristsona/index.html
+++ b/rannak/mangud/perenaine/ristsona/index.html
@@ -4,10 +4,10 @@
   <meta charset="UTF-8">
 
   <title>Ristsõna</title>
-
-  <link rel="stylesheet" href="style.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">
+
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
@@ -45,13 +45,10 @@
 
         </div>
 
-
 	  </div>
     </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">
diff --git a/rannak/mangud/perenaine/ristsona/script.js b/rannak/mangud/perenaine/ristsona/script.js
index e6f56c7..a76eda3 100644
--- a/rannak/mangud/perenaine/ristsona/script.js
+++ b/rannak/mangud/perenaine/ristsona/script.js
@@ -172,6 +172,11 @@ function getInputValue() {
     else{
         kontrolliVastus(inputNr, inputVal.toLowerCase());
     }
+
+    // Clear input value
+    let inputs = document.querySelectorAll("input");
+    for (let ipt of inputs)
+        ipt.value = "";
 }
 
 
diff --git a/rannak/mangud/perenaine/ristsona/style.css b/rannak/mangud/perenaine/ristsona/style.css
index 4807294..a7732c6 100644
--- a/rannak/mangud/perenaine/ristsona/style.css
+++ b/rannak/mangud/perenaine/ristsona/style.css
@@ -3,7 +3,12 @@
 }
 
 body{
-    background-color: #212121 !important;
+    background-color: #43464b;
+}
+
+h1 {
+    color: #FEDD00;
+    font-weight: bold;
 }
 
 .moveOn{
@@ -41,14 +46,14 @@ button:disabled{
 
 .avatar {
     border-radius: 20px;
-    width: 100% !important;
-    max-width: 15rem !important;
+    width: 100%;
+    max-width: 15rem;
 }
 
 .modalHeaderWrapper{
     text-align: center;
-    margin: 0 !important;
-    width: 100% !important;
+    margin: 0;
+    width: 100%;
 }
 
 
@@ -63,32 +68,32 @@ button:disabled{
     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;
+    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) !important;
+    background-color: rgba(0,136,169,0.8);
 }
 
 
 /* Input Box styles */
 
 .inputBox{
-    margin-top: 10px !important;
+    margin-top: 10px;
 }
 
 #inputNr {
-  width: 3em !important;
+  width: 3em;
 }
 
 .messageBox{
-    color: #212121;
+    color: #43464b;
 }
 
 .subBtn{
@@ -127,27 +132,27 @@ table{
 }
 
 td {
-	border: 4px solid #212121 !important;
-	width: 40px !important;
-	height: 40px !important;
+	border: 4px solid #43464b;
+	width: 40px;
+	height: 40px;
 	font-weight: bold;
 }
 
 .left, .right{
 	margin: 10px;
-	width: calc((100vw - (13*40px) - 40px) / 2) !important;
+	width: calc((100vw - (13*40px) - 40px) / 2);
 }
 
 /* Ristsõna */
 
 .vastus td{
-	border: 5px solid lime !important;
+	border: 5px solid lime;
 }
 
 .kurk, .majonees, .vorst,
 .porgand, .õun, .sool, .pipar, .hernes,
 .muna, .sibul, .hapukoor, .kartul {
-    border: 5px solid white !important;
+    border: 5px solid white;
     color: white;
 }
 
diff --git a/rannak/mangud/uliopilane/ajatelg/index.html b/rannak/mangud/uliopilane/ajatelg/index.html
index c310b40..ba3fc81 100644
--- a/rannak/mangud/uliopilane/ajatelg/index.html
+++ b/rannak/mangud/uliopilane/ajatelg/index.html
@@ -4,6 +4,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=, initial-scale=1.0">
     <title>Ajatelg</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">
@@ -73,9 +74,9 @@
 	  	  <div id="iseseisvus" class="list-item" draggable="true">Ülemnõukogu otsus Eesti riiklikust iseseisvusest</div>
 	  	  <div id="kett" class="list-item" draggable="true">Balti kett Tallinnast Vilniuseni</div>
 	  	  <div id="august" class="list-item" draggable="true">Augustiputš</div>
-	  	  <div id="lipp" class="list-item" draggable="true">Sinine, must ja valge lipp esimest korda Pika Hermanni tornis</div>
+	  	  <div id="lipp" class="list-item" draggable="true">„Eesti lipp taas pika Hermani tornis</div>
 	  	  <div id="muinsuskaitse" class="list-item" draggable="true">Tartu muinsuskaitsepäevad</div>
-	  	  <div id="fosforiit" class="list-item" draggable="true">Fosforiidi Sõda</div>
+	  	  <div id="fosforiit" class="list-item" draggable="true">FosforiidiSõda</div>
 	  	  <div id="interrinne" class="list-item" draggable="true">Interrinne ründab Toompead</div>
 	  	  <div id="kongress" class="list-item" draggable="true">Eesti Kongress</div>
 	  	  <div id="laulevRev" class="list-item" draggable="true">Laulev revolutsioon, öölaulupeod</div>
diff --git a/rannak/mangud/uliopilane/ajatelg/styles.css b/rannak/mangud/uliopilane/ajatelg/styles.css
index 15b93d8..e43c9d2 100644
--- a/rannak/mangud/uliopilane/ajatelg/styles.css
+++ b/rannak/mangud/uliopilane/ajatelg/styles.css
@@ -9,7 +9,11 @@ html {
 	box-sizing: border-box !important;
 }
 
-body{background-color: #111 !important;}
+body{background-color: #4D5157 !important;}
+h1 {
+    font-weight: bold !important;
+    color: #4169E1;
+   }
 .pealkiri {width: 100vw !important;}
 
 
@@ -82,7 +86,7 @@ button:disabled{
 
 
 .list .list-item {
-    background-color: #1e1f22 !important;
+    background-color: #2a2b30 !important;
 	color: white;
     font-weight: bold;
 	border-radius: 8px !important;
@@ -130,9 +134,9 @@ button:disabled{
 
 .timeline ul li {
   padding: 7px;
-  background-color: #1e1f22;
+  background-color: #2a2b30;
   color: white;
-  margin-bottom: 15px;
+  margin-bottom: 7px !important;
 }
 
 .timeline ul li:last-child {
@@ -140,8 +144,8 @@ button:disabled{
 }
 
 .timeline-content .list {
-    background-color: #1e1f22 !important;
-	min-height: 4rem;
+    background-color: #2a2b30 !important;
+	min-height: 3rem;
 	border-radius: 8px !important;
     margin: 10px !important;
     text-align: center !important;
diff --git a/rannak/mangud/uliopilane/tSark/index.html b/rannak/mangud/uliopilane/tSark/index.html
index 789ad8f..655c8b1 100644
--- a/rannak/mangud/uliopilane/tSark/index.html
+++ b/rannak/mangud/uliopilane/tSark/index.html
@@ -2,9 +2,9 @@
   <head>
     <title>Särgi Kujundus</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <link href="style.css" rel="stylesheet"/>
-
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+
+    <link href="style.css" rel="stylesheet"/>
   </head>
 
   <body class="text-white">
@@ -15,7 +15,13 @@
       <svg viewBox="0 0 512 512">
         <g transform="translate(0,448)">
           <path id="sark" d="m114.43-400.52-98.703 78.981 66.018 88.962 30.599-23.608v272.7h288.51v-272.7l29.397 23.608 66.026-88.282-95.992-76.942-74.453-0.70374c-0.58384 37.58-35.742 54.937-68.92 67.881-32.896-13.591-68.984-30.886-68.984-68.969 0.00036-0.0748-0.00033-0.14911 0-0.22393z" />
-          <text class="sarkTekst doneTekst" x="200" y="-200" transform="rotate(0)" >Tekst</text>
+          <text class="sarkTekst doneTekst" x="237" y="-77" transform="rotate(0)" >Tekst</text>
+
+          <!-- To avoid Text overflow -->
+            <clipPath id="clip1">
+                <path id="clip1Path" d="m114.43-400.52-98.703 78.981 66.018 88.962 30.599-23.608v272.7h288.51v-272.7l29.397 23.608 66.026-88.282-95.992-76.942-74.453-0.70374c-0.58384 37.58-35.742 54.937-68.92 67.881-32.896-13.591-68.984-30.886-68.984-68.969 0.00036-0.0748-0.00033-0.14911 0-0.22393z" />
+            </clipPath>
+
         </g>
       </svg>
 
@@ -66,6 +72,11 @@
             Kujunda enda T-särk. Edasi liikumiseks peab olema
             kasutatud kõik kujundamise võimalused. Kui arvad, et särk on valmis,
             siis kontorlli nupuga, kas särk on valmis".
+            <br/>
+            Pilti võid otsida veebist või valida ka oma arvutist.
+
+            <br/> <br/>
+            <span class="kuiEiLeiaTeksti">Kui sa ei leia teksti, siis tõenöoliselt on see pildi all :)</span>
           </p>
 
           <div>
diff --git a/rannak/mangud/uliopilane/tSark/main.js b/rannak/mangud/uliopilane/tSark/main.js
index ddbd533..cc7ef3a 100644
--- a/rannak/mangud/uliopilane/tSark/main.js
+++ b/rannak/mangud/uliopilane/tSark/main.js
@@ -65,6 +65,15 @@ function nextText() {
     let gi6 = document.querySelector("g")
     newText.classList.add("sarkTekst")
     newText.innerHTML = "Uus Tekst";
+
+    // Move a little, so that new txt isnt exatly on top of old.
+    let newYVal = newText.y.baseVal[0].value;
+    if (newYVal < -150)
+        newText.y.baseVal[0].value += 50;
+    else
+        newText.y.baseVal[0].value -= 50;
+    //console.log(newText.y.baseVal[0].value);
+
     gi6.appendChild(newText);
 }
 
@@ -229,10 +238,18 @@ minus.addEventListener("click" , () => {
 
 
 
+
+
+
+
+
+
+
+
+
 /* Rezisable Image Stuff */
 
 const el = document.querySelector(".item");
-let isResizing = false;
 
 el.addEventListener("mousedown", mousedown);
 
@@ -246,42 +263,57 @@ function mousedown(e) {
   function mousemove(e) {
     if (!isResizing) {
 
-      let item = document.querySelector(".item");
-      item.style.pointerEvents = "none";
-      let posers = document.elementFromPoint(e.x, e.y).id;
-      item.style.pointerEvents = "";
 
-      if (posers != "sark"){
-          console.log(posers);
+        const rect = el.getBoundingClientRect();
+
+        let item = document.querySelector(".item");
+        item.style.pointerEvents = "none";
+        //let posers = document.elementFromPoint(e.x, e.y).id;
+
+        // New Stuff
+        let posers = document.elementFromPoint(rect.left, rect.top).id;
+        let posers2 = document.elementFromPoint(rect.right, rect.top).id;
+        let posers3 = document.elementFromPoint(rect.right, rect.bottom).id;
+        let posers4 = document.elementFromPoint(rect.left, rect.bottom).id;
+        // /// /////
+
+        console.log(posers, posers2, posers3, posers4);
+
+
+        item.style.pointerEvents = "";
 
-          let newX = prevX - e.clientX;
-          let newY = prevY - e.clientY;
 
-          const rect = el.getBoundingClientRect();
 
-          el.style.left = rect.left - newX + "px";
-          el.style.top = rect.top - newY + "px";
+        if (posers != "sark" || posers2 != "sark" || posers3 != "sark" || posers4 != "sark"){
 
-          prevX = e.clientX;
-          prevY = e.clientY;
+            let newX = prevX - e.clientX;
+            let newY = prevY - e.clientY;
 
-          mouseup()
-      }
+            // Pic back to Center
+            let brr = document.querySelector("#sark").getBoundingClientRect();
+            el.style.left = brr.left + (brr.right - brr.left)/2 - (rect.right - rect.left)/2 + "px";
+            el.style.top  = brr.top +  (brr.bottom - brr.top)/2 - (rect.bottom - rect.top)/2 + "px";
+            //el.style.top  = brr.bottom - 2*(rect.bottom - rect.top) + "px";
 
-      else {
 
-      let newX = prevX - e.clientX;
-      let newY = prevY - e.clientY;
+            prevX = e.clientX;
+            prevY = e.clientY;
+            mouseup()
+        }
 
-      const rect = el.getBoundingClientRect();
+        else {
 
-      el.style.left = rect.left - newX + "px";
-      el.style.top = rect.top - newY + "px";
+            let newX = prevX - e.clientX;
+            let newY = prevY - e.clientY;
 
-      prevX = e.clientX;
-      prevY = e.clientY;
-          
-      }
+            const rect = el.getBoundingClientRect();
+
+            el.style.left = rect.left - newX + "px";
+            el.style.top = rect.top - newY + "px";
+
+            prevX = e.clientX;
+            prevY = e.clientY;
+        }
     }
   }
 
@@ -294,8 +326,11 @@ function mousedown(e) {
 
 
 
+
 const resizers = document.querySelectorAll(".resizer");
 let currentResizer;
+let isResizing = false;
+
 
 for (let resizer of resizers) {
   resizer.addEventListener("mousedown", mousedown);
@@ -312,35 +347,69 @@ for (let resizer of resizers) {
 
     function mousemove(e) {
 
-      const rect = el.getBoundingClientRect();
-
-      if (currentResizer.classList.contains("se")) {
-        el.style.width = rect.width - (prevX - e.clientX) + "px";
-        el.style.height = rect.height - (prevY - e.clientY) + "px";
-      }
-        
-      else if (currentResizer.classList.contains("sw")) {
-        el.style.width = rect.width + (prevX - e.clientX) + "px";
-        el.style.height = rect.height - (prevY - e.clientY) + "px";
-        el.style.left = rect.left - (prevX - e.clientX) + "px";
-      }
-
-      else if (currentResizer.classList.contains("ne")) {
-        el.style.width = rect.width - (prevX - e.clientX) + "px";
-        el.style.height = rect.height + (prevY - e.clientY) + "px";
-        el.style.top = rect.top - (prevY - e.clientY) + "px";
-      }
-
-      else {
-        el.style.width = rect.width + (prevX - e.clientX) + "px";
-        el.style.height = rect.height + (prevY - e.clientY) + "px";
-        el.style.top = rect.top - (prevY - e.clientY) + "px";
-        el.style.left = rect.left - (prevX - e.clientX) + "px";
-      }
-
-      prevX = e.clientX;
-      prevY = e.clientY;
-    }
+        const rect = el.getBoundingClientRect();
+
+
+
+        let item = document.querySelector(".item");
+        item.style.pointerEvents = "none";
+        let posers = document.elementFromPoint(rect.left, rect.top).id;
+        let posers2 = document.elementFromPoint(rect.right, rect.top).id;
+        let posers3 = document.elementFromPoint(rect.right, rect.bottom).id;
+        let posers4 = document.elementFromPoint(rect.left, rect.bottom).id;
+        item.style.pointerEvents = "";
+
+
+
+        if ( !(posers != "sark" || posers2 != "sark" || posers3 != "sark" || posers4 != "sark")){
+
+            
+            if (currentResizer.classList.contains("se")) {
+                el.style.width = rect.width - (prevX - e.clientX) + "px";
+                el.style.height = rect.height - (prevY - e.clientY) + "px";
+            }
+            
+            else if (currentResizer.classList.contains("sw")) {
+                el.style.width = rect.width + (prevX - e.clientX) + "px";
+                el.style.height = rect.height - (prevY - e.clientY) + "px";
+                el.style.left = rect.left - (prevX - e.clientX) + "px";
+            }
+
+            else if (currentResizer.classList.contains("ne")) {
+                el.style.width = rect.width - (prevX - e.clientX) + "px";
+                el.style.height = rect.height + (prevY - e.clientY) + "px";
+                el.style.top = rect.top - (prevY - e.clientY) + "px";
+            }
+
+            else {
+                el.style.width = rect.width + (prevX - e.clientX) + "px";
+                el.style.height = rect.height + (prevY - e.clientY) + "px";
+                el.style.top = rect.top - (prevY - e.clientY) + "px";
+                el.style.left = rect.left - (prevX - e.clientX) + "px";
+            }
+
+        }
+
+        // If resizing out of boundaries
+        else{
+
+            if (currentResizer.classList.contains("se") || currentResizer.classList.contains("sw")) {
+                el.style.width = rect.width - 15 + "px";
+                el.style.height = rect.height - 15 + "px";
+                mouseup();
+            }
+            
+            if (currentResizer.classList.contains("ne") || currentResizer.classList.contains("nw")) {
+                el.style.width = rect.width - 15 + "px";
+                el.style.height = rect.height - 15 + "px";
+                mouseup();
+            }
+
+        }
+            prevX = e.clientX;
+            prevY = e.clientY;
+
+    } // Function mousemove end
 
     function mouseup() {
       window.removeEventListener("mousemove", mousemove);
@@ -354,9 +423,11 @@ for (let resizer of resizers) {
 
 // Seting up resize Pic Pos
 let brr = document.querySelector("#sark").getBoundingClientRect();
-let it = document.querySelector(".item");
-it.style.left = brr.left + 200;
-//it.style.top = brr.top + 300;
+let it = document.querySelector(".item").getBoundingClientRect();
+let Boop = document.querySelector(".item");
+//it.style.left = brr.left + 200;
+Boop.style.left = brr.left + (brr.right - brr.left)/2 - (it.right - it.left)/2 + "px";
+Boop.style.top  = brr.top +  (brr.bottom - brr.top)/2 - (it.bottom - it.top)/2 + "px";
 
 
 
@@ -438,11 +509,13 @@ nulliBtn.addEventListener("click", () => {
     document.querySelector(".sarkTekst").style.fill = "black";
 
 
-    // Seting up resize Pic Pos
-    let brr = document.querySelector("#sark").getBoundingClientRect();
-    let it = document.querySelector(".item");
-    it.style.left = brr.left + 200;
-    //it.style.top = brr.top + 300;
+
+    // Pic back to Center
+    let brr =  document.querySelector("#sark").getBoundingClientRect();
+    let rect = document.querySelector(".item").getBoundingClientRect();
+    el.style.left = brr.left + (brr.right - brr.left)/2 - (rect.right - rect.left)/2 + "px";
+    el.style.top  = brr.top +  (brr.bottom - brr.top)/2 - (rect.bottom - rect.top)/2 + "px";
+
 
 
     // Moving IMg Corners
diff --git a/rannak/mangud/uliopilane/tSark/main.js.bak b/rannak/mangud/uliopilane/tSark/main.js.bak
new file mode 100644
index 0000000..2685ad4
--- /dev/null
+++ b/rannak/mangud/uliopilane/tSark/main.js.bak
@@ -0,0 +1,537 @@
+document.addEventListener('DOMContentLoaded', () => {
+    let btn = document.querySelector('.modalButton');
+    btn.click();
+});
+
+
+
+/*Muutused Stuff*/
+
+// Särgi color
+
+let colorFill = document.querySelector("#colorFiller");
+let colorStroke = document.querySelector("#colorStroke");
+
+colorFill.addEventListener("input", () => {
+    let color = colorFill.value;
+    document.querySelector("#sark").style.fill = color;
+
+    if (!stuffDone.includes("sarkColor"))
+        stuffDone.push("sarkColor");
+})
+
+colorStroke.addEventListener("input", () => {
+    let color = colorStroke.value;
+    document.querySelector("#sark").style.stroke = color;
+
+    if (!stuffDone.includes("sarkColor"))
+        stuffDone.push("sarkColor");
+})
+
+
+// Img upload
+
+const image_input = document.querySelector("#image_input");
+let uploadedImg = "";
+
+image_input.addEventListener("change", () => {
+    const reader = new FileReader();
+    reader.readAsDataURL(image_input.files[0])
+    reader.addEventListener("load", () => {
+        uploadedImg = reader.result;
+        document.querySelector(".item").style.backgroundImage = `url(${uploadedImg})`
+    });
+
+    if (!stuffDone.includes("newImg"))
+        stuffDone.push("newImg");
+})
+
+
+/* Teksti Teema */
+
+// Uus Tekst
+
+function nextText() {
+    document.querySelector("#sargiText").value = "";
+
+    let curText = document.querySelector(".sarkTekst")
+    let newText = curText.cloneNode(true);
+    curText.classList.remove("sarkTekst")
+
+    //Reset Stuff
+    let angle=0;
+    let sarkFontSize = 20;
+    
+    let gi6 = document.querySelector("g")
+    newText.classList.add("sarkTekst")
+    newText.innerHTML = "Uus Tekst";
+    gi6.appendChild(newText);
+}
+
+
+
+// Input
+
+function chgTxt() {
+
+    let tekstVali = document.querySelector("#sargiText");
+    tekstVali.addEventListener("keyup", () => {
+        let sarkTekst = document.querySelector(".sarkTekst");
+        sarkTekst.innerHTML = tekstVali.value;
+
+        if (!stuffDone.includes("txt"))
+            stuffDone.push("txt");
+    });
+}
+
+chgTxt()
+
+
+/*
+function getInputValue() {
+    // Selecting the input element and get its value 
+
+    //Btn
+    let inputVal = document.getElementById("sargiText").value;
+    //Txt
+    let sarkTekst = document.querySelector(".sarkTekst");
+    sarkTekst.innerHTML = inputVal;
+
+    if (!stuffDone.includes("newTxt"))
+        stuffDone.push("newTxt");
+}
+
+function enterSubmit(){
+    document.getElementById('sargiText')
+    .addEventListener('keyup', event => {
+            if (event.code === 'Enter')
+            {
+                event.preventDefault();
+                getInputValue();
+            }
+        });
+}
+enterSubmit()
+*/
+
+
+// Color
+
+let colorText = document.querySelector("#colorText");
+colorText.addEventListener("input", () => {
+    let color = colorText.value;
+    document.querySelector(".sarkTekst").style.fill = color;
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+})
+
+// Position
+const ules = document.querySelector(".ules");
+const alla = document.querySelector(".alla");
+const vasak = document.querySelector(".vasak");
+const parem = document.querySelector(".parem");
+
+ules.addEventListener("click" , () => {
+    let tmpX = document.querySelector(".sarkTekst").x;
+    let tmpY = document.querySelector(".sarkTekst").y;
+
+    tmpY.baseVal[0].value-=10;
+    
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+alla.addEventListener("click" , () => {
+    let tmpX = document.querySelector(".sarkTekst").x;
+    let tmpY = document.querySelector(".sarkTekst").y;
+
+    tmpY.baseVal[0].value+=10;
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+vasak.addEventListener("click", () => {
+    let tmpX = document.querySelector(".sarkTekst").x;
+    let tmpY = document.querySelector(".sarkTekst").y;
+
+    tmpX.baseVal[0].value-=10;
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+parem.addEventListener("click", () => {
+    let tmpX = document.querySelector(".sarkTekst").x;
+    let tmpY = document.querySelector(".sarkTekst").y;
+
+    tmpX.baseVal[0].value+=10;
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+
+// Vertical Pos
+const vasakule = document.querySelector(".vertVasak");
+const paremale = document.querySelector(".vertParem");
+let angle=0;
+
+vasakule.addEventListener("click" , () => {
+    let testing = document.querySelector(".sarkTekst");
+
+    angle -=5
+    testing.setAttribute("transform", "rotate("+angle+")");
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+paremale.addEventListener("click" , () => {
+    let testing = document.querySelector(".sarkTekst");
+
+    angle +=5
+    testing.setAttribute("transform", "rotate("+angle+")");
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+
+
+// FontZise
+
+const plus = document.querySelector(".plus");
+const minus = document.querySelector(".minus");
+let sarkFontSize = 20;
+
+plus.addEventListener("click" , () => {
+    let sarkForText = document.querySelector(".sarkTekst");
+
+    sarkFontSize +=2;
+    sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+minus.addEventListener("click" , () => {
+    let sarkForText = document.querySelector(".sarkTekst");
+
+    sarkFontSize-=2;
+    sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");
+
+    if (!stuffDone.includes("txt"))
+        stuffDone.push("txt");
+});
+
+
+
+
+// https://stackoverflow.com/questions/54076532/how-to-test-if-a-point-is-inside-an-svg-closed-path
+
+
+// Funcs to check whether draggable el inside Svg path
+
+function oMousePos(elmt, evt) {
+  let ClientRect = elmt.getBoundingClientRect();
+  return {
+    //object
+    x: Math.round(evt.clientX - ClientRect.left),
+    y: Math.round(evt.clientY - ClientRect.top)
+  };
+}
+
+function draggablePoints(m) {
+  //top left
+  draggable.p0s[0][0] = m.x - draggable.delta.x - 1;
+  draggable.p0s[0][1] = m.y - draggable.delta.y - 1;
+  //top right
+  draggable.p0s[1][0] = m.x - draggable.delta.x + draggable.w + 1;
+  draggable.p0s[1][1] = m.y - draggable.delta.y + 1;
+  //bottom right
+  draggable.p0s[2][0] = m.x - draggable.delta.x + draggable.w + 1;
+  draggable.p0s[2][1] = m.y - draggable.delta.y + draggable.h + 1;
+  //bottom left
+  draggable.p0s[3][0] = m.x - draggable.delta.x + 1;
+  draggable.p0s[3][1] = m.y - draggable.delta.y + draggable.h + 1;
+}
+
+
+m = {},// the mouse position
+thePath = document.querySelector("path"),
+
+/* Rezisable Image Stuff */
+draggable = document.querySelector(".item");
+
+draggable.addEventListener("mousedown", mousedown);
+
+// NEw stuff
+draggable.w = draggable.getBoundingClientRect().width;
+draggable.h = draggable.getBoundingClientRect().height;
+draggable.p0s = [[], [], [], []];//one array for every corner
+draggable.delta = {};// distance between the click point and the left upper corner
+
+
+
+function mousedown(e) {
+  window.addEventListener("mousemove", mousemove);
+  window.addEventListener("mouseup", mouseup);
+
+  // NEw stuff
+  draggable.delta = oMousePos(draggable, e);
+  //
+
+
+  let prevX = e.clientX;
+  let prevY = e.clientY;
+
+  function mousemove(e) {
+    if (!isResizing) {
+
+      let item = document.querySelector(".item");
+      //item.style.pointerEvents = "none";
+
+       /*
+      let posers = document.elementFromPoint(e.x, e.y).id;
+      item.style.pointerEvents = "";
+
+      if (posers != "sark"){
+          console.log(posers);
+
+          let newX = prevX - e.clientX;
+          let newY = prevY - e.clientY;
+
+          const rect = el.getBoundingClientRect();
+
+          el.style.left = rect.left - newX + "px";
+          el.style.top = rect.top - newY + "px";
+
+          prevX = e.clientX;
+          prevY = e.clientY;
+
+          mouseup()
+      }
+      */
+
+      let counter = 0;// how many corners are in path
+      //m = oMousePos(drag_parent, e);
+      m = oMousePos(thePath, e);
+      draggablePoints(m);
+      draggable.style.left = draggable.p0s[0][0] + 1 + "px";
+      draggable.style.top = draggable.p0s[0][1] + 1 + "px";
+
+      draggable.p0s.map(p => {
+          if (document.elementFromPoint(p[0], p[1]) && document.elementFromPoint(p[0], p[1]).id == "sark") {
+              counter++;
+          }
+          console.log(counter, document.elementFromPoint(p[0], p[1]).id == "sark");
+      });
+
+      if (counter == 4){
+          console.log("moving");
+          let newX = prevX - e.clientX;
+          let newY = prevY - e.clientY;
+
+          const rect = draggable.getBoundingClientRect();
+
+          draggable.style.left = rect.left - newX + "px";
+          draggable.style.top = rect.top - newY + "px";
+
+          prevX = e.clientX;
+          prevY = e.clientY;
+      }
+
+      else {
+          console.log("Out of Bounds!");
+          //console.log(counter);
+          // Set it to init pos; from downtown
+          // it.style.left = brr.left + 200;
+          console.log(draggable.p0s);
+      }
+
+    }
+  }
+
+  function mouseup() {
+    window.removeEventListener("mousemove", mousemove);
+    window.removeEventListener("mouseup", mouseup);
+    //D = false;
+  }
+
+}
+
+
+
+
+// Resizing Pic
+
+
+let isResizing = false;
+const resizers = document.querySelectorAll(".resizer");
+let currentResizer;
+
+for (let resizer of resizers) {
+  resizer.addEventListener("mousedown", mousedown);
+
+  function mousedown(e) {
+    currentResizer = e.target;
+    isResizing = true;
+
+    let prevX = e.clientX;
+    let prevY = e.clientY;
+
+    window.addEventListener("mousemove", mousemove);
+    window.addEventListener("mouseup", mouseup);
+
+    function mousemove(e) {
+
+      const rect = draggable.getBoundingClientRect();
+
+      if (currentResizer.classList.contains("se")) {
+        draggable.style.width = rect.width - (prevX - e.clientX) + "px";
+        draggable.style.height = rect.height - (prevY - e.clientY) + "px";
+      }
+        
+      else if (currentResizer.classList.contains("sw")) {
+        draggable.style.width = rect.width + (prevX - e.clientX) + "px";
+        draggable.style.height = rect.height - (prevY - e.clientY) + "px";
+        draggable.style.left = rect.left - (prevX - e.clientX) + "px";
+      }
+
+      else if (currentResizer.classList.contains("ne")) {
+        draggable.style.width = rect.width - (prevX - e.clientX) + "px";
+        draggable.style.height = rect.height + (prevY - e.clientY) + "px";
+        draggable.style.top = rect.top - (prevY - e.clientY) + "px";
+      }
+
+      else {
+        draggable.style.width = rect.width + (prevX - e.clientX) + "px";
+        draggable.style.height = rect.height + (prevY - e.clientY) + "px";
+        draggable.style.top = rect.top - (prevY - e.clientY) + "px";
+        draggable.style.left = rect.left - (prevX - e.clientX) + "px";
+      }
+
+      prevX = e.clientX;
+      prevY = e.clientY;
+    }
+
+    function mouseup() {
+      window.removeEventListener("mousemove", mousemove);
+      window.removeEventListener("mouseup", mouseup);
+      isResizing = false;
+    }
+
+  } // Resizing mousedown end
+
+}
+
+// Seting up resize Pic Pos
+let brr = document.querySelector("#sark").getBoundingClientRect();
+let it = document.querySelector(".item");
+it.style.left = brr.left + 200;
+//it.style.top = brr.top + 300;
+
+
+
+
+
+
+
+/* Ending stuff + Reset */
+
+
+// Move on Button
+function message(msg, color){
+    messageBox = document.querySelector(".messageBox");
+    messageBox.innerHTML = msg;
+    messageBox.style.color = color;
+}
+
+
+let stuffDone = new Array();
+
+const chkBtn = document.querySelector(".checkMoveOn");
+
+chkBtn.addEventListener("click", (e) => {
+
+    if (stuffDone.length >= 3){
+        message("Korras! Soovi korral tee screenshot (Win+Shift+S)", "#4BB543");
+        moveOnEnable();
+    }
+    else
+        message("valikuid kasutatud " + stuffDone.length + "/" + "3.", "Red");
+});
+
+function moveOnEnable(){
+    const btn = document.querySelector(".moveOn");
+    btn.disabled = false;
+    btn.onclick = () => location.href = "../utlused";
+
+    let tst = document.querySelectorAll(".resizer");
+    for (elinjo of tst){
+        elinjo.style.height = 0;
+        elinjo.style.width = 0;
+    }
+
+}
+
+// 6
+
+
+
+// Reset Everything
+
+const nulliBtn = document.querySelector(".nulliBtn");
+nulliBtn.addEventListener("click", () => {
+
+    stuffDone = new Array();
+
+    //SarkColor
+    document.querySelector("#sark").style.fill = "white";
+
+    document.querySelector("#sark").style.stroke = "black";
+
+
+
+    // Tekstid
+    document.querySelector("#sargiText").value = "";
+
+    curText = document.querySelector(".sarkTekst");
+    newText = curText.cloneNode(true);
+    curText.classList.remove("sarkTekst");
+
+    let koikTekstid = document.querySelectorAll(".doneTekst");
+
+    for (let i = 0; i < koikTekstid.length; i++) {
+        koikTekstid[i].innerHTML = "";
+    }
+
+    //Reset Stuff
+    angle=0;
+    sarkFontSize = 20;
+    
+    let brro = document.querySelector("g")
+    newText.classList.add("sarkTekst")
+    newText.innerHTML = "Tekst";
+
+    brro.appendChild(newText);
+    document.querySelector(".sarkTekst").style.fill = "black";
+
+
+    // Seting up resize Pic Pos
+    let brr = document.querySelector("#sark").getBoundingClientRect();
+    let it = document.querySelector(".item");
+    it.style.left = brr.left + 200;
+    //it.style.top = brr.top + 300;
+
+
+    // Moving IMg Corners
+    let tst = document.querySelectorAll(".resizer");
+    for (elinjo of tst){
+        elinjo.style.height = "7px";
+        elinjo.style.width = "7px";
+    }
+
+})
diff --git a/rannak/mangud/uliopilane/tSark/style.css b/rannak/mangud/uliopilane/tSark/style.css
index 1179fb0..fd6c352 100644
--- a/rannak/mangud/uliopilane/tSark/style.css
+++ b/rannak/mangud/uliopilane/tSark/style.css
@@ -1,10 +1,15 @@
 body{
-    background-color: #FADFCA !important;
+    background-color: #FADFCA;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
 
+h1{
+    color: #4169E1;
+    font-weight: bold;
+}
+
 .containeraa {
     width: 100%;
     height: 100vh;
@@ -19,10 +24,13 @@ body{
     height: 100vh;
     text-align: center;
     background-color: #544B44;
+    overflow: scroll;
+    overflow-x: hidden
 }
 
 
 
+
 /* Move on Button */
 
 button:disabled{
@@ -58,25 +66,31 @@ button:disabled{
     padding-top: 7px;
 }
 
+.kuiEiLeiaTeksti {font-size: .87rem;}
+
+
+
+
+
 
 
 /* Modal Stuff */
 
 .avatar {
     border-radius: 20px;
-    width: 100% !important;
-    max-width: 15rem !important;
+    width: 100%;
+    max-width: 15rem;
 }
 
 .modalHeaderWrapper{
     text-align: center;
-    margin: 0 !important;
-    width: 100% !important;
+    margin: 0;
+    width: 100%;
 }
 
 
 .modal{
-    color: black !important;
+    color: black;
 }
 
 .closeModalButton {
@@ -84,29 +98,45 @@ button:disabled{
 }
 
 .modalButton{
-    padding: 5px !important;
-    margin-left: 30px !important;
-    margin-top: 3px !important;
-    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;
-    font-size: 1.1rem !important;
+    padding: 5px;
+    margin-left: 30px;
+    margin-top: 3px;
+    background-color: rgba(0,136,169,1);
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3 ease 0;
+    font-size: 1.1rem;
 }
 
 .modalButton:hover{
-    background-color: rgba(0,136,169,0.8) !important;
+    background-color: rgba(0,136,169,0.8);
 }
 
 
 
 
+
+
+
+
+/* Clipping for text overflow */
+
+g {
+    clip-path: url(#clip1);
+}
+
 /* Svg stuff*/
 
+path {
+    maring: 0;
+    padding: 0;
+}
+
 svg {
-    width: 100% !important;
-    height: 100% !important;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
 }
 
 #sark {
@@ -149,16 +179,20 @@ svg {
     text-align: center;
 }
 
+.muutused h4 {
+    padding-top: .5rem;
+}
+
 .fileUpload  {
-    margin-top: 5px;
+    margin-top: 2px;
 }
 
 .textPos, .nulliBtn{
-    margin-top: 10px;
+    margin-top: 5px;
 }
 
 .textAddWrapper{
-    margin: 10px;
+    margin: 5px;
 }
 
 .textAddWrapper *{
@@ -170,7 +204,7 @@ svg {
 }
 
 .nulliBtn {
-    background-color: red !important;
+    background-color: red;
 }
 
 .textAddWrapper button {
@@ -179,7 +213,7 @@ svg {
     border-radius: 4px;
     font-size:1.3rem;
     color:white;
-    padding: 10px;
+    padding: 5px;
     margin: 0 2px;
 }
 
diff --git a/rannak/mangud/uliopilane/utlused/index.html b/rannak/mangud/uliopilane/utlused/index.html
index 54c9548..867bb00 100644
--- a/rannak/mangud/uliopilane/utlused/index.html
+++ b/rannak/mangud/uliopilane/utlused/index.html
@@ -7,13 +7,13 @@
   <title>Kuulsad Ütlused</title>
   <link rel="stylesheet" href="utlused.css">
 
-    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
     <link rel="stylesheet" type=text/css href="utlused.css">
     <!-- Bootstrap - CSS only -->
+    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
     <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">
+<body>
 
 
 
@@ -52,6 +52,14 @@
 
 
 
+    <div class="text-center text-white align-items-center pealkiri">
+        <h1 class="pb-1 pt-2">Ütlused</h1>
+        <div class="upperWrapper">
+          <p>Ühenda omavahel tsitaadid ja nende autorid.</p>
+          <button class="moveOn" disabled>Liigu Edasi</button>
+        </div>
+    </div>
+
 
 
   <div class="wrapper container draggable-elements align-items-center">
@@ -70,7 +78,7 @@
       </div>
 
       <div class="empty ">
-        <div class="drag draggable" draggable="true" style="color: #69359c;" id="runnel"> Hando Runnel </div>
+        <div class="drag draggable" draggable="true" style="color: #29359c;" id="runnel"> Hando Runnel </div>
       </div>
 
 
@@ -82,12 +90,7 @@
         <div class="drag draggable" draggable="true" style="color: #F28C28;" id="lauristin"> Marju Lauristin </div>
       </div>
 
-
-	  <div class="row">
-		<div>
-              <button class="moveOn" disabled>Liigu Edasi</button>
-		</div>
-      </div> <!-- Row End -->
+      <!-- Row End -->
 
 	  
 	  
diff --git a/rannak/mangud/uliopilane/utlused/utlused.css b/rannak/mangud/uliopilane/utlused/utlused.css
index 3d967a9..47e0574 100644
--- a/rannak/mangud/uliopilane/utlused/utlused.css
+++ b/rannak/mangud/uliopilane/utlused/utlused.css
@@ -9,16 +9,23 @@
 
 body {
   font-family: 'Montserrat', sans-serif;
-  background-color: #eee;
+  background-color: #4D5157 !important;
   color: #111;
   touch-action: none;
 }
 
+h1{
+    font-weight: bold !important;
+    color: #4169E1 !important;
+}
+
+
+
 .moveOn{
+    margin-left: 3rem;
     display: inline-block;
     border: none;
     padding: 6px 12px;
-    margin-left: 11%;
     font-size: 1rem;
     font-weight: normal;
     text-align: center;
@@ -33,6 +40,14 @@ button:disabled{
     cursor: not-allowed;
 }
 
+.upperWrapper{
+    display: flex;
+    justify-content: center;
+}
+
+
+
+
 
 /* Modal Stuff */
 .avatar {
author	Rasmus Luha <rasmus.luha@gmail.com>	2023-02-05 20:43:17 +0200
committer	Rasmus Luha <rasmus.luha@gmail.com>	2023-02-05 20:43:17 +0200
commit	209b1915b0f1879d0055ea17f76464dddcf8089b (patch)
tree	a7b4077a0c239dba3f0e40b6463e2fb368b65eb3 /rannak/mangud
parent	ea90f1c8a5fb5b666113ee21f81a5530127a0517 (diff)