12 files changed, 517 insertions, 477 deletions
diff --git a/rannak/mangud/partorg/plakat/img/lenin.png b/rannak/mangud/partorg/plakat/img/lenin.png
deleted file mode 100644
index e36df3d..0000000
--- a/rannak/mangud/partorg/plakat/img/lenin.png
+++ /dev/null
diff --git a/rannak/mangud/partorg/plakat/img/malev.jpg b/rannak/mangud/partorg/plakat/img/malev.jpg
new file mode 100644
index 0000000..d88d950
--- /dev/null
+++ b/rannak/mangud/partorg/plakat/img/malev.jpg
diff --git a/rannak/mangud/partorg/plakat/img/nazi.png b/rannak/mangud/partorg/plakat/img/nazi.png
deleted file mode 100644
index 87e616e..0000000
--- a/rannak/mangud/partorg/plakat/img/nazi.png
+++ /dev/null
diff --git a/rannak/mangud/partorg/plakat/img/normalSelect.cur b/rannak/mangud/partorg/plakat/img/normalSelect.cur
deleted file mode 100644
index fdd943c..0000000
--- a/rannak/mangud/partorg/plakat/img/normalSelect.cur
+++ /dev/null
diff --git a/rannak/mangud/partorg/plakat/img/redStar.png b/rannak/mangud/partorg/plakat/img/redStar.png
deleted file mode 100644
index b6eee79..0000000
--- a/rannak/mangud/partorg/plakat/img/redStar.png
+++ /dev/null
diff --git a/rannak/mangud/partorg/plakat/img/stalinAddOn.png b/rannak/mangud/partorg/plakat/img/stalinAddOn.png
deleted file mode 100644
index d3e05fd..0000000
--- a/rannak/mangud/partorg/plakat/img/stalinAddOn.png
+++ /dev/null
diff --git a/rannak/mangud/partorg/plakat/img/viisAastak.jpg b/rannak/mangud/partorg/plakat/img/viisAastak.jpg
new file mode 100644
index 0000000..20be6ed
--- /dev/null
+++ b/rannak/mangud/partorg/plakat/img/viisAastak.jpg
diff --git a/rannak/mangud/partorg/plakat/index.html b/rannak/mangud/partorg/plakat/index.html
index 9f1416b..e65040a 100644
--- a/rannak/mangud/partorg/plakat/index.html
+++ b/rannak/mangud/partorg/plakat/index.html
@@ -2,81 +2,38 @@
 <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>Plakat</title>
+    <meta name="viewport" content="width=, initial-scale=1.0">
+    <title>Plakatid</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">
+    <link rel="stylesheet" href="styles.css">
 </head>
-<body>
-    <section class="wrapper">
 
-        <div id="toolbar">
+<body class="text-white">
 
-          <div class="intro">
-            <h1>Kujunda Plakatit</h1>
-            <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 -->
-            <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
-              Sissejuhatus
-            </button>
-
-            <button id="clear">Puhasta</button>
-          </div>
-
-          <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>
-
-
-
-          <!-- Image Pick-->
-          <h2 class="ValiTxt"> Vali Plakat </h2>
-          <div class="pickingSec">
-            <img id="stalin"   class="pickImg picked" alt="Jossup Saloninjo Plakat" src="img/stalin.jpg"/>
-            <img id="veekogud" class="pickImg" alt="Veekogude Plakat" src="img/veekogud.jpg"/>
-          </div>
+    <div class="container text-center text-white align-items-center pb-5">
+        <h1>Plakatid</h1>
+        <p>Leia iga plakati õige ajastu, ning muuda ka plakati teksti.
+          <br/>
+          Kui oled valinud õige ajastu ja muutunud plakati lause, muutub see roheliseks,
+          näitamaks, et sellega on kõik korras.
+        </p>
 
+		<div class="row">
+	  	  <div>
+            <button class="moveOn" disabled>Liigu Edasi</button>
+	  	  </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>
-
+		</div>
 
-    </section>
+        <!-- Button trigger modal -->
+        <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
+          Sissejuhatus
+        </button>
 
 
+    </div>
 
 
     <!-- Modal -->
@@ -92,7 +49,6 @@
           </div>
 
           <div class="modal-body">
-            
             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.
@@ -105,7 +61,6 @@
             <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>
 
         </div>
@@ -115,7 +70,188 @@
 
 
 
-    <script src="./main.js"></script>
+
+    <div class="main">
+        <nav>
+          <div class="nav nav-tabs" id="nav-tab" role="tablist">
+    
+            <button class="nav-link active" id="nav-60ndad-tab" data-bs-toggle="tab" data-bs-target="#nav-60ndad" type="button" role="tab" aria-controls="nav-60ndad" aria-selected="true">
+              Stalin
+            </button>
+    
+            <button class="nav-link" id="nav-70ndad-tab" data-bs-toggle="tab" data-bs-target="#nav-70ndad" type="button" role="tab" aria-controls="nav-70ndad" aria-selected="false">
+              Veekogud
+            </button>
+
+            <button class="nav-link" id="nav-90ndad-tab" data-bs-toggle="tab" data-bs-target="#nav-90ndad" type="button" role="tab" aria-controls="nav-90ndad" aria-selected="false">
+              Viisaastak
+            </button>
+    
+            <button class="nav-link" id="nav-80ndad-tab" data-bs-toggle="tab" data-bs-target="#nav-80ndad" type="button" role="tab" aria-controls="nav-80ndad" aria-selected="false">
+              Malev
+            </button>
+
+
+          </div>
+        </nav>
+
+        <div class="tab-content" id="nav-tabContent">
+
+    
+
+          <div class="tab-pane fade show active p-3 text-white" id="nav-60ndad" role="tabpanel" aria-labelledby="nav-60ndad-tab">
+              <div class="wrapper">
+
+                <div class="plakatWrapper stalin">
+                  <span class="addedText">Testing Testing</span>
+                </div>
+
+                <div class="innerWrapper">
+
+                  <select>
+                    <option disabled hidden selected>Vali</option>
+                    <option value="1950ndad">1950ndad</option>
+                    <option value="1960ndad">1960ndad</option>
+                    <option value="1960ndad">1970ndad</option>
+                    <option value="1970ndad">1980ndad</option>
+                  </select>
+
+                  <strong><label for="stalin">Lisa Tekst</label></strong>
+                  <input name="stalin" type="text" value=""/>
+                  <button class="muuda">Muuda</button>
+
+                  <div>
+                    <button class="ules">&uarr;</button>
+                    <button class="alla">&darr;</button>
+                    <button class="vasak">&larr;</button>
+                    <button class="parem">&rarr;</button>
+                  </div>
+
+                </div>
+
+            </div>
+          </div>
+
+
+    
+          <div class="tab-pane fade p-3 text-white" id="nav-70ndad" role="tabpanel" aria-labelledby="nav-70ndad-tab">
+              <div class="wrapper">
+
+                <div class="plakatWrapper veekogud">
+                  <span class="addedText">Veekogud</span>
+                </div>
+
+                <div class="innerWrapper">
+                  <select>
+                    <option disabled hidden selected>Vali</option>
+                    <option value="1950ndad">1950ndad</option>
+                    <option value="1960ndad">1960ndad</option>
+                    <option value="1960ndad">1970ndad</option>
+                    <option value="1970ndad">1980ndad</option>
+                  </select>
+
+                  <strong><label for="veekogud">Lisa Tekst</label></strong>
+                  <input name="veekogud" type="text" value=""/>
+                  <button class="muuda" >Muuda</button>
+                  
+                  <div>
+                    <button class="ules">&uarr;</button>
+                    <button class="alla">&darr;</button>
+                    <button class="vasak">&larr;</button>
+                    <button class="parem">&rarr;</button>
+                  </div>
+
+                </div>
+
+              </div>
+          </div>
+
+
+
+
+
+
+
+    
+          <div class="tab-pane fade p-3 text-white" id="nav-80ndad" role="tabpanel" aria-labelledby="nav-80ndad-tab">
+              <div class="wrapper">
+
+                <div class="plakatWrapper malev pikkPlakat">
+                  <span class="addedText">Malev</span>
+                </div>
+
+                <div class="innerWrapper">
+                  <select>
+                    <option disabled hidden selected>Vali</option>
+                    <option value="1950ndad">1950ndad</option>
+                    <option value="1960ndad">1960ndad</option>
+                    <option value="1960ndad">1970ndad</option>
+                    <option value="1970ndad">1980ndad</option>
+                  </select>
+
+                  <strong><label for="malev">Lisa Tekst</label></strong>
+                  <input name="malev" type="text" value=""/>
+                  <button class="muuda">Muuda</button>
+                  
+                  <div>
+                    <button class="ules">&uarr;</button>
+                    <button class="alla">&darr;</button>
+                    <button class="vasak">&larr;</button>
+                    <button class="parem">&rarr;</button>
+                  </div>
+
+
+                </div>
+
+              </div>
+          </div>
+
+
+
+          <div class="tab-pane fade p-3 text-white" id="nav-90ndad" role="tabpanel" aria-labelledby="nav-90ndad-tab">
+              <div class="wrapper">
+
+                <div class="plakatWrapper viisAastak pikkPlakat">
+                  <span class="addedText">ViisAastak</span>
+                </div>
+
+                <div class="innerWrapper">
+                  <select>
+                    <option disabled hidden selected>Vali</option>
+                    <option value="1950ndad">1950ndad</option>
+                    <option value="1960ndad">1960ndad</option>
+                    <option value="1960ndad">1970ndad</option>
+                    <option value="1970ndad">1980ndad</option>
+                  </select>
+
+                  <strong><label for="viisAastak">Lisa Tekst</label></strong>
+                  <input name="viisAastak" type="text" value=""/>
+                  <button class="muuda" >Muuda</button>
+                  
+                  <div>
+                    <button class="ules">&uarr;</button>
+                    <button class="alla">&darr;</button>
+                    <button class="vasak">&larr;</button>
+                    <button class="parem">&rarr;</button>
+                  </div>
+
+
+                </div>
+
+              </div>
+          </div>
+
+
+
+
+
+        </div>
+      </div>
+
+    
+
+
+    <script src="script.js"></script> 
 
     <!-- JavaScript Bundle with Popper -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
diff --git a/rannak/mangud/partorg/plakat/main.js b/rannak/mangud/partorg/plakat/main.js
deleted file mode 100644
index 9ae8e54..0000000
--- a/rannak/mangud/partorg/plakat/main.js
+++ /dev/null
@@ -1,222 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    let btn = document.querySelector('.modalButton');
-    btn.click();
-});
-
-
-console.log("FAAAAK");
-
-/* Inital Setup*/
-
-const canvas = document.getElementById('drawing-board');
-const toolbar = document.getElementById('toolbar');
-const ctx = canvas.getContext('2d');
-
-let canvasOffsetX = canvas.offsetLeft;
-let canvasOffsetY = canvas.offsetTop;
-
-let CurImage = document.getElementById("stalin");
-
-canvas.width = window.innerWidth - canvasOffsetX;
-canvas.height = window.innerHeight - canvasOffsetY;
-
-
-
-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;    
-    canvas.width = window.innerWidth - canvasOffsetX;
-    canvas.height = window.innerHeight - canvasOffsetY;
-    copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY);
-}
-
-
-
-
-/* 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");
-
-    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");
-        }
-        let newPicked = document.getElementById(e.target.id);
-        newPicked.classList.add("picked");
-
-        // Draw New Pick
-        CurImage = newPicked;
-        copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY);
-        moveOnDisable();
-    }
-
-
-    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;
-    }
-
-    if(e.target.id === 'lineWidth') {
-        lineWidth = e.target.value;
-    }
-    
-});
-
-
-
-const draw = (e) => {
-    if(!isPainting) {
-        return;
-    }
-
-    ctx.lineWidth = lineWidth;
-    ctx.lineCap = 'round';
-
-    ctx.lineTo(e.clientX -  canvasOffsetX, e.clientY);
-    //ctx.lineTo(e.clientX -  abiOffset, e.clientY);
-    ctx.stroke();
-
-    hasPainted = true;
-    if (addOnHasBeenAdded)
-        moveOnEnable();
-}
-
-
-
-canvas.addEventListener('mousedown', (e) => {
-    isPainting = true;
-    startX = e.clientX;
-    startY = e.clientY;
-});
-
-
-
-canvas.addEventListener('mouseup', e => {
-    isPainting = false;
-    ctx.stroke();
-    ctx.beginPath();
-});
-
-
-canvas.addEventListener('mousemove', draw);
-
-
-
-
-// Move On Stuff
-
-function moveOnEnable(){
-    const btn = document.querySelector(".moveOn");
-    btn.disabled = false;
-    btn.onclick = () => location.href = "../sonaragastik";
-}
-
-function moveOnDisable(){
-    const btn = document.querySelector(".moveOn");
-    btn.disabled = true;
-}
diff --git a/rannak/mangud/partorg/plakat/script.js b/rannak/mangud/partorg/plakat/script.js
new file mode 100644
index 0000000..4d4ee36
--- /dev/null
+++ b/rannak/mangud/partorg/plakat/script.js
@@ -0,0 +1,117 @@
+document.addEventListener('DOMContentLoaded', () => {
+    let btn = document.querySelector('.modalButton');
+    btn.click();
+});
+
+
+
+
+
+
+
+
+
+// FROM HERE TODO
+
+
+// Init Setup - to access later
+let dingDong = document.querySelector(".addedText");
+dingDong.style.top = "50%";
+dingDong.style.left = "50%";
+
+
+// Position
+const ules = document.querySelectorAll(".ules");
+const alla = document.querySelectorAll(".alla");
+const vasak = document.querySelectorAll(".vasak");
+const parem = document.querySelectorAll(".parem");
+
+ules.forEach(el => {
+    el.addEventListener("click" , e => {
+        let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1];
+        let curTop = theText.style["top"];
+        curTop = curTop.substring(0, curTop.length-1)
+        
+        if (Number(curTop) >= 5)
+            theText.style["top"] = Number(curTop)-5+"%";
+    });
+})
+
+alla.forEach(el => {
+    el.addEventListener("click" , e => {
+        let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1];
+        let curTop = theText.style["top"];
+        curTop = curTop.substring(0, curTop.length-1)
+        
+        if (Number(curTop) <= 85)
+            theText.style["top"] = Number(curTop)+5+"%";
+    });
+})
+
+vasak.forEach(el => {
+    el.addEventListener("click", e => {
+        let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1];
+        let curLeft = theText.style["left"];
+        curLeft = curLeft.substring(0, curLeft.length-1)
+
+        console.log("Vasak");
+        console.log(theText.innerHTML);
+        
+        if (Number(curLeft) >= 5)
+            theText.style["left"] = Number(curLeft)-5+"%";
+    });
+})
+
+parem.forEach(el => {
+    el.addEventListener("click", e => {
+        let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1];
+        let curLeft = theText.style["left"];
+        curLeft = curLeft.substring(0, curLeft.length-1)
+        
+        if (Number(curLeft) >= 5)
+            theText.style["left"] = Number(curLeft)+5+"%";
+    });
+})
+
+
+
+
+// Muuda Text button
+
+const muudaBtn = document.querySelector(".muuda");
+
+muudaBtn.addEventListener("click", e => {
+    console.log(e);
+});
+
+
+
+
+
+
+
+
+
+
+
+function checkIfAllGood(){
+	let rightDone = [];
+
+	for (let j=0; j < lists.length; j++){
+		const list = lists[j];
+		if (list.className.includes("startBasket"))
+			continue;
+		else if (list.children.length == 1){
+			if (list.id == list.children[0].id){
+				if (!rightDone.includes(list.id))
+					rightDone.push(list.id);
+			}
+		}
+	}  // For loop end
+
+	if (rightDone.length == 6) {
+        const btn = document.querySelector(".moveOn");
+        btn.disabled = false;
+        btn.onclick = () => location.href = "";
+	}
+}
diff --git a/rannak/mangud/partorg/plakat/style.css b/rannak/mangud/partorg/plakat/style.css
deleted file mode 100644
index 215c073..0000000
--- a/rannak/mangud/partorg/plakat/style.css
+++ /dev/null
@@ -1,188 +0,0 @@
-body {
-    height: 100%;
-    overflow: hidden;
-    color: white;
-    background-color: #43464b;
-}
-
-h1 {
-    color: #a1000e;
-    font-weight: bold;
-}
-
-
-/* Move on ja Sissejuhatus Button */
-                
-.avatar {
-    border-radius: 20px;
-    width: 100%;
-    max-width: 15rem;
-}
-
-
-.modalHeaderWrapper{
-    text-align: center;
-    margin: 0;
-    width: 100%;
-}
-
-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;
-}
-
-/* Modal Stuff */
-
-
-.closeModalButton {
-  border-radius: 50px;
-}
-
-.modalButton{
-    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);
-}
-
-
-
-/* Main */
-
-.wrapper {
-    height: 100%;
-    display: flex;
-}
-
-/* Toolbar */
-.intro{
-    text-align: center;
-    border-bottom: 2px solid gray;
-    padding: 7px;
-}
-
-
-#toolbar {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 5px;
-    width: 20%;
-    min-width:350px;
-    background-color: #43464b;
-}
-
-#clear{
-    background-color: #1565c0;
-    border: none;
-    border-radius: 4px;
-    font-size:1.3rem;
-    color:white;
-    padding: 2px;
-}
-
-#toolbar * {margin-bottom: 6px;}
-#toolbar input {width: 4rem;}
-
-.toolbarDiv {width: 100%;}
-
-form {
-    display: flex;
-    align-items: center;
-}
-
-label {
-    display: table-cell;
-    font-size: 1.2rem;
-}
-
-
-
-/* Img Picker */
-.pickingSec {
-    height: 50%;
-    overflow: hidden;
-    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;
-    padding: 10px;
-    margin-left: calc(25% - 5px);
-}
-
-
-
-/* Canvas */
-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/plakat/styles.css b/rannak/mangud/partorg/plakat/styles.css
new file mode 100644
index 0000000..7d974e1
--- /dev/null
+++ b/rannak/mangud/partorg/plakat/styles.css
@@ -0,0 +1,197 @@
+* {
+	box-sizing: border-box;
+}
+h1 {
+    color: #154734;
+    font-weight: bold;
+}
+body{
+    background-color: #4D5157;
+}
+
+.moveOn{
+    display: inline-block;
+    border: none;
+    padding: 6px 12px;
+    margin-botton: 0;
+    font-size: 1rem;
+    font-weight: normal;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 4px;
+    background-color: #4BB543;
+    color: white;
+}
+
+button:disabled{
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+
+
+
+
+/* Modal Stuff */
+
+.avatar {
+    border-radius: 20px;
+    width: 100%;
+    max-width: 15rem;
+}
+
+.modalHeaderWrapper{
+    text-align: center;
+    margin: 0;
+    width: 100%;
+}
+
+
+
+
+.closeModalButton {
+  border-radius: 50px;
+}
+
+.modalButton{
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 25px;
+    background-color: rgba(0,136,169,1);
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3 ease 0;
+    margin: 3%;
+    font-size: 1.2rem;
+}
+
+.modalButton:hover{
+    background-color: rgba(0,136,169,0.8);
+}
+
+
+
+
+
+/* Main Stuff*/
+.main{
+    background-color: #2f2f2f;
+    margin: 10 10%;
+}
+
+.nav-tabs {
+    display: flex;
+    justify-content: center;
+}
+
+.wrapper{
+    display: flex;
+    justify-content: center;
+}
+
+.plakatWrapper, .innerWrapper{
+    width: 48%;
+}
+
+
+.innerWrapper{
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+
+/* Input stuff*/
+
+select{
+    height: 3rem;
+    font-size: 2rem;
+}
+
+label{
+    padding: 1rem;
+    padding-top: 4rem;
+    font-size: 1.2rem;
+}
+
+input {
+    height: 2rem;
+    width: 75%;
+}
+
+.innerWrapper button {
+    margin-top: 1rem;
+}
+
+.innerWrapper button {
+    background-color: #596B6E;
+    border: none;
+    border-radius: 4px;
+    font-size:1.3rem;
+    color:white;
+    padding: 5px;
+}
+
+
+
+
+
+
+
+
+/*Plakatid*/
+
+.stalin {
+    background: url("img/stalin.jpg") no-repeat center;
+    background-size: 100%;
+    font-size: 2rem;
+    text-align: center;
+    color: black;
+}
+
+
+.veekogud {
+    background: url("img/veekogud.jpg") no-repeat center;
+    background-size: 100%;
+    font-size: 2rem;
+    text-align: center;
+    color: black;
+}
+
+
+.malev {
+    background: url("img/malev.jpg") no-repeat center;
+    background-size: 100% 100%;
+    font-size: 2rem;
+    text-align: center;
+    color: black;
+}
+
+
+.viisAastak {
+    background: url("img/viisAastak.jpg") no-repeat center;
+    background-size: 100% 100%;
+    font-size: 2rem;
+    text-align: center;
+    color: black;
+}
+
+.pikkPlakat{
+    height: 78vh;
+}
+
+.plakatWrapper{
+    position: relative;
+    overflow: hidden;
+    clear: both;
+}
+.addedText {
+    position: absolute;
+}
+
+
+