sargiKujundus as Test

9 files changed, 696 insertions, 28 deletions

diff --git a/rannak/mangud/partorg/sonaragastik/index.html b/rannak/mangud/partorg/sonaragastik/index.html
index fc37a4b..6bb6797 100644
--- a/rannak/mangud/partorg/sonaragastik/index.html
+++ b/rannak/mangud/partorg/sonaragastik/index.html
@@ -64,7 +64,7 @@
           </li>
 
 	      <li>
-            <strong class="Vmaanteemuhk">MAANTEEMUHK.</strong> Väikeauto, ametliku nimega Zaporožets. ( või ZAZ 965)
+            <strong class="Vmaantee">MAANTEEMUHK.</strong> Väikeauto, ametliku nimega Zaporožets. ( või ZAZ 965)
           </li>
 
 		  <li>
@@ -87,7 +87,7 @@
           </li>
 
 		  <li>
-            <strong class="Vredis">RUBLA.</strong> Nõukogude Liidu valuuta. 1991. aastaks sisuliselt maksejõuetu raha.
+            <strong class="Vrubla">RUBLA.</strong> Nõukogude Liidu valuuta. 1991. aastaks sisuliselt maksejõuetu raha.
           </li>
 
 		</ol>
@@ -110,7 +110,7 @@
 		<td></td>
 		<td></td>
 		<td></td>
-		<td class="plaanimajadnus"><span>P</span></td>
+		<td class="plaanimajandus"><span>P</span></td>
 		<td></td>
 		<td></td>
 	  </tr>
@@ -128,7 +128,7 @@
 		<td></td>
 		<td></td>
 		<td></td>
-		<td class="plaanimajadnus"><span>L</span></td>
+		<td class="plaanimajandus"><span>L</span></td>
 		<td></td>
 		<td></td>
 	  </tr>
@@ -146,7 +146,7 @@
 		<td></td>
 		<td class="redis"><span>R</span></td>
 		<td></td>
-		<td class="plaanimajadnus"><span>A</span></td>
+		<td class="plaanimajandus"><span>A</span></td>
 		<td class="rubla"><span>R</span></td>
 		<td></td>
 	  </tr>
@@ -164,7 +164,7 @@
 		<td class="letialuneKaup"><span>N</span></td>
 		<td class="letialuneKaup redis"><span>E</span></td>
 		<td class="letialuneKaup"><span>K</span></td>
-		<td class="letialuneKaup plaanimajadnus"><span>A</span></td>
+		<td class="letialuneKaup plaanimajandus"><span>A</span></td>
 		<td class="letialuneKaup rubla"><span>U</span></td>
 		<td class="letialuneKaup"><span>P</span></td>
 	  </tr>
@@ -182,7 +182,7 @@
 		<td class="tuusik"><span>S</span></td>
 		<td class="redis"><span>D</span></td>
 		<td></td>
-		<td class="plaanimajadnus"><span>N</span></td>
+		<td class="plaanimajandus"><span>N</span></td>
 		<td class="rubla"><span>B</span></td>
 		<td></td>
 	  </tr>
@@ -200,7 +200,7 @@
 		<td></td>
 		<td class="redis tuusik"><span>I</span></td>
 		<td></td>
-		<td class="plaanimajadnus"><span>I</span></td>
+		<td class="plaanimajandus"><span>I</span></td>
 		<td class="rubla"><span>L</span></td>
 		<td></td>
 	  </tr>
@@ -218,7 +218,7 @@
 		<td class="talongid"><span>D</span></td>
 		<td class="redis"><span>S</span></td>
 		<td class="tuusik"><span>K</span></td>
-		<td class="plaanimajadnus"><span>M</span></td>
+		<td class="plaanimajandus"><span>M</span></td>
 		<td class="rubla"><span>A</span></td>
 		<td></td>
 	  </tr>
@@ -236,7 +236,7 @@
 		<td class="maantee"><span>U</span></td>
 		<td class="maantee"><span>H</span></td>
 		<td class="maantee"><span>K</span></td>
-		<td class="plaanimajadnus"><span>A</span></td>
+		<td class="plaanimajandus"><span>A</span></td>
 		<td></td>
 		<td></td>
 	  </tr>
@@ -254,7 +254,7 @@
 		<td></td>
 		<td></td>
 		<td></td>
-		<td class="plaanimajadnus"><span>J</span></td>
+		<td class="plaanimajandus"><span>J</span></td>
 		<td></td>
 		<td></td>
 	  </tr>
@@ -272,7 +272,7 @@
 		<td></td>
 		<td></td>
 		<td></td>
-		<td class="plaanimajadnus"><span>A</span></td>
+		<td class="plaanimajandus"><span>A</span></td>
 		<td></td>
 		<td></td>
 	  </tr>
@@ -290,7 +290,7 @@
 		<td class="piiritsoon"><span>S</span></td>
 		<td class="piiritsoon"><span>O</span></td>
 		<td class="piiritsoon"><span>O</span></td>
-		<td class="piiritsoon plaanimajadnus"><span>N</span></td>
+		<td class="piiritsoon plaanimajandus"><span>N</span></td>
 		<td></td>
 		<td></td>
 	  </tr>
@@ -308,7 +308,7 @@
 		<td class="defitsiit"><span>I</span></td>
 		<td class="defitsiit"><span>T</span></td>
 		<td></td>
-		<td class="plaanimajadnus"><span>D</span></td>
+		<td class="plaanimajandus"><span>D</span></td>
 		<td></td>
 		<td></td>
 	  </tr>
@@ -326,7 +326,7 @@
 		<td></td>
 		<td></td>
 		<td></td>
-		<td class="plaanimajadnus"><span>U</span></td>
+		<td class="plaanimajandus"><span>U</span></td>
 		<td></td>
 		<td></td>
 	  </tr>
@@ -344,7 +344,7 @@
 		<td></td>
 		<td></td>
 		<td></td>
-		<td class="plaanimajadnus"><span>S</span></td>
+		<td class="plaanimajandus"><span>S</span></td>
 		<td></td>
 		<td></td>
 	  </tr>
diff --git a/rannak/mangud/partorg/sonaragastik/script.js b/rannak/mangud/partorg/sonaragastik/script.js
index ab5ebe4..af16488 100644
--- a/rannak/mangud/partorg/sonaragastik/script.js
+++ b/rannak/mangud/partorg/sonaragastik/script.js
@@ -34,7 +34,7 @@ function message(msg, color){
 
 // Main stuff
 
-const vastused = ["valuuta", "tuusik", "tsaika", "redis", "plaanimajadnus",
+const vastused = ["valuuta", "tuusik", "tsaika", "redis", "plaanimajandus",
                   "rubla", "letialuneKaup", "talongid", "maantee",
                   "piiritsoon", "defitsiit"]
 let õiged = new Array();
@@ -65,12 +65,13 @@ function proovi(){
                     hetkeKlass = ruut.classList[0];
             }
 
+            console.log(hetkeKlass);
             document.querySelector(".V"+hetkeKlass).classList.add("done");
         
             if (!õiged.includes(hetkeKlass)) {
                 õiged.push(hetkeKlass);
                 õigedCounter++;
-                console.log("DicoDisco GoodGood")
+                console.log(õigedCounter);
             }
             if (õigedCounter >= 11)
                 moveOnEnable();
diff --git a/rannak/mangud/test/img/shirtImg.jpg b/rannak/mangud/test/img/shirtImg.jpg
new file mode 100644
index 0000000..b469eee
--- /dev/null
+++ b/rannak/mangud/test/img/shirtImg.jpg
diff --git a/rannak/mangud/test/img/tshirt.svg b/rannak/mangud/test/img/tshirt.svg
new file mode 100644
index 0000000..19a7205
--- /dev/null
+++ b/rannak/mangud/test/img/tshirt.svg
@@ -0,0 +1,131 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:cc="http://creativecommons.org/ns#"
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+    xmlns:svg="http://www.w3.org/2000/svg"
+    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    xmlns:ns1="http://sozi.baierouge.fr"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    id="svg10099"
+    viewBox="0 0 512 512"
+    version="1.1"
+  >
+  <g
+      id="layer1"
+      transform="translate(0,448)"
+    >
+    <path
+        id="path8691-8-9"
+        style="fill:#7f7f7f"
+        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"
+    />
+  </g
+  >
+  <metadata
+    >
+    <rdf:RDF
+      >
+      <cc:Work
+        >
+        <dc:format
+          >image/svg+xml</dc:format
+        >
+        <dc:type
+            rdf:resource="http://purl.org/dc/dcmitype/StillImage"
+        />
+        <cc:license
+            rdf:resource="http://creativecommons.org/licenses/publicdomain/"
+        />
+        <dc:publisher
+          >
+          <cc:Agent
+              rdf:about="http://openclipart.org/"
+            >
+            <dc:title
+              >Openclipart</dc:title
+            >
+          </cc:Agent
+          >
+        </dc:publisher
+        >
+        <dc:title
+          >t-shirt outline</dc:title
+        >
+        <dc:date
+          >2011-06-06T12:54:55</dc:date
+        >
+        <dc:description
+          >a blank t-shirt outline</dc:description
+        >
+        <dc:source
+          >https://openclipart.org/detail/142771/t-shirt-outline-by-andy</dc:source
+        >
+        <dc:creator
+          >
+          <cc:Agent
+            >
+            <dc:title
+              >Andy</dc:title
+            >
+          </cc:Agent
+          >
+        </dc:creator
+        >
+        <dc:subject
+          >
+          <rdf:Bag
+            >
+            <rdf:li
+              >blank</rdf:li
+            >
+            <rdf:li
+              >clothes</rdf:li
+            >
+            <rdf:li
+              >design</rdf:li
+            >
+            <rdf:li
+              >fashion</rdf:li
+            >
+            <rdf:li
+              >outline</rdf:li
+            >
+            <rdf:li
+              >shirt</rdf:li
+            >
+            <rdf:li
+              >t-shirt</rdf:li
+            >
+            <rdf:li
+              >template</rdf:li
+            >
+          </rdf:Bag
+          >
+        </dc:subject
+        >
+      </cc:Work
+      >
+      <cc:License
+          rdf:about="http://creativecommons.org/licenses/publicdomain/"
+        >
+        <cc:permits
+            rdf:resource="http://creativecommons.org/ns#Reproduction"
+        />
+        <cc:permits
+            rdf:resource="http://creativecommons.org/ns#Distribution"
+        />
+        <cc:permits
+            rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
+        />
+      </cc:License
+      >
+    </rdf:RDF
+    >
+  </metadata
+  >
+</svg
+>
diff --git a/rannak/mangud/test/index.html b/rannak/mangud/test/index.html
new file mode 100644
index 0000000..11a25a0
--- /dev/null
+++ b/rannak/mangud/test/index.html
@@ -0,0 +1,110 @@
+<html>
+  <head>
+    <title>Särgi Kujundus</title>
+    <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">
+      -->
+  </head>
+
+  <body>
+
+    <div class="containeraa">
+
+
+      <!-- Tshirt SVG -->
+      <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 id="sarkTekst" x="200" y="-200" transform="rotate(0)" >Testing</text>
+        </g>
+      </svg>
+
+
+
+      <!-- Side panel stuff-->
+
+      <div class="side">
+
+          <h1>T-särgi Kujundamine</h1>
+	      <p>
+            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 "Särk Valmis".
+          </p>
+
+          <div>
+            <button class="checkMoveOn">Särk Valmis</button>
+            <button class="moveOn" disabled>Liigu Edasi</button>
+          </div>
+
+          <div class="muutused">
+
+            <div class="sargiVarv">
+              <h4>Vali Värv</h4>
+              <label for="colorFiller">Särgi värv:</label>
+              <input id="colorFiller"type="color" value="#ffffff"/>
+
+              <label for="colorStroke">Särgi äär:</label>
+              <input id="colorStroke" type="color" value="#000000"/>
+            </div>
+
+
+            <div class="fileUpload">
+              <h4>Lisa Pilt</h4>
+              <label for="image_input">Vali Pilt:</label>
+              <input type="file" id="image_input" accept="image/jpg, image/png"/>
+            </div>
+
+
+            <div class="textPos">
+              <h4>Tekst</h4>
+
+              <label for="sargiText">Vali tekst:</label>
+              <input id="sargiText" type="text" placeholder="Sinu tekst siia"/>
+              <button id="tekstBtn" onclick="getInputValue();">Muuda Teksti</button>
+
+              <div class="textAddWrapper">
+                <span class="ules">&uarr;</span>
+                <span class="alla">&darr;</span>
+                <span class="vasak">&larr;</span>
+                <span class="parem">&rarr;</span>
+
+                <span class="vertVasak">&cularr;</span>
+                <span class="vertParem">&curarr;</span>
+
+                <span class="plus">+</span>
+                <span class="minus">-</span>
+
+                <input id="colorText" type="color" value="#000000"/>
+
+              </div>
+
+            </div>
+            
+
+          </div>
+
+          
+      </div>
+
+
+      <!-- Resizable Img -->
+
+      <div class="item">
+        <div class="resizer ne"></div>
+        <div class="resizer nw"></div>
+        <div class="resizer se"></div>
+        <div class="resizer sw"></div>
+      </div>
+        
+    </div>
+
+    
+    <script src="main.js"></script>
+     <!-- 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+      -->
+ </body>
+</html>
diff --git a/rannak/mangud/test/main.js b/rannak/mangud/test/main.js
new file mode 100644
index 0000000..7d16bb4
--- /dev/null
+++ b/rannak/mangud/test/main.js
@@ -0,0 +1,281 @@
+/*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 */
+
+// Input
+function getInputValue() {
+    // Selecting the input element and get its value 
+    let inputVal = document.getElementById("sargiText").value;
+    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("txtColor"))
+        stuffDone.push("txtColor");
+})
+
+// Position
+const ules = document.querySelector(".ules");
+const alla = document.querySelector(".alla");
+const vasak = document.querySelector(".vasak");
+const parem = document.querySelector(".parem");
+
+let tmpX = document.querySelector("#sarkTekst").x;
+let tmpY = document.querySelector("#sarkTekst").y;
+
+ules.addEventListener("click" , () => {
+    tmpY.baseVal[0].value-=10;
+    
+    if (!stuffDone.includes("txtPos"))
+        stuffDone.push("txtPos");
+});
+
+alla.addEventListener("click" , () => {
+    tmpY.baseVal[0].value+=10;
+
+    if (!stuffDone.includes("txtPos"))
+        stuffDone.push("txtPos");
+});
+
+vasak.addEventListener("click", () => {
+    tmpX.baseVal[0].value-=10;
+
+    if (!stuffDone.includes("txtPos"))
+        stuffDone.push("txtPos");
+});
+
+parem.addEventListener("click", () => {
+    tmpX.baseVal[0].value+=10;
+
+    if (!stuffDone.includes("txtPos"))
+        stuffDone.push("txtPos");
+});
+
+
+// Vertical Pos
+const vasakule = document.querySelector(".vertVasak");
+const paremale = document.querySelector(".vertParem");
+let testing = document.querySelector("#sarkTekst");
+
+let angle=0;
+vasakule.addEventListener("click" , () => {
+    angle +=5
+    testing.setAttribute("transform", "rotate("+angle+")");
+
+    if (!stuffDone.includes("txtPos"))
+        stuffDone.push("txtPos");
+});
+
+paremale.addEventListener("click" , () => {
+    angle -=5
+    testing.setAttribute("transform", "rotate("+angle+")");
+
+    if (!stuffDone.includes("txtPos"))
+        stuffDone.push("txtPos");
+});
+
+
+
+// FontZise
+
+const plus = document.querySelector(".plus");
+const minus = document.querySelector(".minus");
+let sarkForText = document.querySelector("#sarkTekst");
+let sarkFontSize = 20;
+
+plus.addEventListener("click" , () => {
+    sarkFontSize +=2;
+    sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");
+
+    if (!stuffDone.includes("tekstFont"))
+        stuffDone.push("tekstFont");
+});
+
+minus.addEventListener("click" , () => {
+    sarkFontSize-=2;
+    sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");
+
+    if (!stuffDone.includes("tekstFont"))
+        stuffDone.push("tekstFont");
+});
+
+
+/* Rezisable Image Stuff */
+
+const el = document.querySelector(".item");
+
+let isResizing = false;
+
+el.addEventListener("mousedown", mousedown);
+
+function mousedown(e) {
+  window.addEventListener("mousemove", mousemove);
+  window.addEventListener("mouseup", mouseup);
+
+  let prevX = e.clientX;
+  let prevY = e.clientY;
+
+  function mousemove(e) {
+    if (!isResizing) {
+      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;
+    }
+  }
+
+  function mouseup() {
+    window.removeEventListener("mousemove", mousemove);
+    window.removeEventListener("mouseup", mouseup);
+  }
+}
+
+
+
+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 = 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;
+    }
+
+    function mouseup() {
+      window.removeEventListener("mousemove", mousemove);
+      window.removeEventListener("mouseup", mouseup);
+      isResizing = false;
+    }
+
+  } // Resizing mousedown end
+
+}
+
+
+
+/* Move on Button*/
+
+let stuffDone = new Array();
+
+const chkBtn = document.querySelector(".checkMoveOn");
+
+chkBtn.addEventListener("click", () => {
+    if (stuffDone.length == 6)
+        moveOnEnable();
+    console.log(stuffDone.length);
+});
+
+function moveOnEnable(){
+    const btn = document.querySelector(".moveOn");
+    btn.disabled = false;
+    btn.onclick = () => location.href = "";
+}
+
+// 6
diff --git a/rannak/mangud/test/style.css b/rannak/mangud/test/style.css
new file mode 100644
index 0000000..822f048
--- /dev/null
+++ b/rannak/mangud/test/style.css
@@ -0,0 +1,146 @@
+body{
+    background-color: #E3D4AD;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+.containeraa {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items:center;
+}
+
+.side {
+    border-left: 2px solid gray;
+    width: 50%;
+    height: 100vh;
+    text-align: center;
+    background-color: #D3BC8D;
+}
+
+
+
+/* Move on Button */
+
+button:disabled{
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.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;
+}
+
+
+
+/* Svg stuff*/
+
+svg {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+#sark {
+    fill: white;
+    stroke: black;
+    stroke-width: 5px;
+}
+
+#sarkTekst {
+    fontSize: 20px;
+    fill: black;
+    transform-box: fill-box;
+    transform-origin: center;
+}
+
+
+
+/*Muutuste osa*/
+
+.muutused {
+    margin-top: 10px;
+    border-top: 2px solid gray;
+    width: 100%;
+    text-align: center;
+}
+
+.fileUpload  {
+    margin-top: 5px;
+}
+
+.textPos {
+    margin-top: 10px;
+}
+
+.textAddWrapper{
+    margin: 10px;
+}
+
+.textAddWrapper *{
+    font-size: 2rem;
+    margin: 2px;
+    border: 2px solid black;
+    background-color: gray;
+    cursor: pointer;
+}
+
+
+
+/* Img item stuff */
+
+.item {
+    height: 300px;
+    width: 300px;
+    position: absolute;
+    background-image: url("img/shirtImg.jpg");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    top: 60%;
+    right: 50%;
+}
+
+.resizer {
+    height: 7px;
+    width: 7px;
+    position: absolute; 
+    border-radius: 3px;
+    background: #000;
+    z-index: 2;
+}
+
+.resizer.ne {
+    top: -1px;
+    right: -1px;
+    cursor: ne-resize;
+}
+
+.resizer.nw {
+    top: -1px;
+    left: -1px;
+    cursor: nw-resize;
+}
+
+.resizer.se {
+    bottom: -1px;
+    right: -1px;
+    cursor: se-resize;
+}
+
+.resizer.sw {
+    bottom: -1px;
+    left: -1px;
+    cursor: sw-resize;
+}
diff --git a/rannak/mangud/uliopilane/ajatelg/index.html b/rannak/mangud/uliopilane/ajatelg/index.html
index 2dd308e..156d28d 100644
--- a/rannak/mangud/uliopilane/ajatelg/index.html
+++ b/rannak/mangud/uliopilane/ajatelg/index.html
@@ -30,23 +30,22 @@
 
       <div class="col-3 position-fixed">
 		<div class="list col startBasket text-center">
-	  	  <div id="fosforiit" class="list-item" draggable="true">Fosforiidi Sõda</div>
-
-	  	  <div id="muusikapaevad" class="list-item" draggable="true">
-            9. Tartu levimuusikapäevad
-            <p>(esmakordselt kõlas “Ei ole üksi ükski maa)”</p>
-          </div>
-
-	  	  <div id="lipp" class="list-item" draggable="true">Sinine, must ja valge lipp esimest korda Pika Hermanni tornis</div>
-	  	  <div id="muinsuskaitse" class="list-item" draggable="true">Tartu muinsuskaitsepäevad</div>
 	  	  <div id="eestiKeel" class="list-item" draggable="true">ENSV Keeleseadus, eesti keel riigikeeleks</div>
 	  	  <div id="hirvepark" class="list-item" draggable="true">Hirvepargi meeleavaldus</div>
 	  	  <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="muinsuskaitse" class="list-item" draggable="true">Tartu muinsuskaitsepäevad</div>
+	  	  <div id="fosforiit" class="list-item" draggable="true">Fosforiidi Sõ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>
+	  	  <div id="muusikapaevad" class="list-item" draggable="true">
+            9. Tartu levimuusikapäevad
+            <p>(esmakordselt kõlas “Ei ole üksi ükski maa)”</p>
+          </div>
+
 
 		</div>
       </div>
diff --git a/rannak/mangud/uliopilane/utlused/js/main.js b/rannak/mangud/uliopilane/utlused/js/main.js
index 4262d41..4a14230 100644
--- a/rannak/mangud/uliopilane/utlused/js/main.js
+++ b/rannak/mangud/uliopilane/utlused/js/main.js
@@ -180,7 +180,7 @@ else{
 				if (counter == 6){
                     const btn = document.querySelector(".moveOn");
                     btn.disabled = false;
-                    btn.onclick = () => location.href = "../../rolliValik";
+                    btn.onclick = () => location.href = "#";
 				}
 				
 			}