Tsark, rolliValik, Map update

18 files changed, 357 insertions, 84 deletions

diff --git a/lehed/rollid/index.html b/lehed/rollid/index.html
index 5529cd6..1bdc369 100644
--- a/lehed/rollid/index.html
+++ b/lehed/rollid/index.html
@@ -97,29 +97,82 @@
     
           <div class="tab-pane fade show active p-3 text-white" id="nav-opilane" role="tabpanel" aria-labelledby="nav-opilane-tab">
             <div class="row">
-              <div class="col-lg-8">
-                <h2>Üliõpilane</h2>
-                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p>
-                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p>
+              <div>
+                <h2>TÕNU, üliõpilane. Sündinud 1969, 22-aastane</h2>
+
+                <video controls >
+                  <source src="vids/uliopilane.mp4" type="video/mp4" />
+                </video>
+
+                <p>Olen Virumaa poiss – täpsemalt Lääne-Viru maakonnast Rakke alevikust. See on üks selline
+                   keskmise suurusega raudteeasula, mille suur osa elanikest töötab kohalikus lubjatehases.
+                   <br/><br/>
+                   1987. aasta kevadel, kui keskkooli lõpueksamiteks valmistusin, käisin Tartu
+                   levimuusikapäevadel, kus esitati noore helilooja Alo Mattiiseni ja luuletaja Jüri Leesmendi
+                   laulu “Ei ole üksi ükski maa”. See laul oli mõeldud toetuseks Virumaa fosforiidikaevanduste-
+                   vastasele liikumisele ning mõjus mulle väga. Ikkagi ju peaaegu kodukant!
+                   <br/><br/>
+                   Samal aastal asusin õppima Tartu Riiklikusse Ülikooli ajaloo erialale. Kohe õpingute algul
+                   sattusin omasuguste rahvuslikult meelestatud üliõpilaste seltskonda. Korraldasime
+                   koosviibimisi ja arutasime, milline võiks olla Eesti tulevik ja mida ise selle heaks kohe nüüd
+                   ära teha saaksime. 1988. aasta kevadel toimusid üksteise järel erinevad rahvaüritused, millest
+                   isegi osa võtsin: aprillis Tartu muinsuskaitsepäevad, mais rattamatk “Kuidas elad, Virumaa”,
+                   juunis Öölaulupeod Tallinna lauluväljakul. Igal pool lehvisid siis juba sinimustvalged lipud!
+                   <br/><br/>
+                   1989. aasta 23. augustil korraldati Balti Kett läbi Eesti, Läti ja Leedu; vedasin sinna ka oma
+                   isa ja ema. Tulid kaasa ja olid toimunust väga liigutatud.
+                   <br/><br/>
+                   Mida ma siis praegusest olukorrast arvan? Tegelikult on ju kõik selgemast selge – Eesti riiklik
+                   iseseisvus tuleb taastada. Ainult ise oma asjade üle otsustades jääme väikerahvana püsima.
+                   Kes on julge ja tark, oskab ära tunda õiget hetke ning olud enda kasuks pöörata. Usun, et just
+                   praegu on see aeg Eesti rahva jaoks käes.</p>
               </div>
               
-              <div class="col-lg-4">
-                <img src="pildid/opilane.jpg" alt="must-valge õpilane" class="img-fluid">
-              </div>
             </div>
           </div>
     
           <div class="tab-pane fade p-3 text-white" id="nav-partorg" role="tabpanel" aria-labelledby="nav-partorg-tab">
             <div class="row">
-              <div class="col-lg-8">
-                <h2>Partorg</h2>
-                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p>
-                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p>
+              <div>
+                <h2>MARIA, partorg. Sündinud 1933, 58-aastane</h2>
+
+                <video controls >
+                  <source src="vids/partorg.mp4" type="video/mp4" />
+                </video>
+
+                <p>Olen sündinud Nõukogude Liidus 1933. aastal ning Suure Isamaasõja keerises sattusin 11-
+                   aastasena koos vanematega oma esiisade maale, Eesti NSVsse.
+                   <br/><br/>
+                   Minu vanemad andsid kogu oma jõu ja tervise kommunismi ülesehitamise ja rahvaste sõpruse
+                   hüvanguks Eesti Nõukogude Sotsialistlikus Vabariigis, töötades kuni pensionipõlveni
+                   Tallinnas Dvigateli tehases ning täites ja ületades viisaastakuplaane alati nelja aastaga!
+                   <br/><br/>
+                   Minu ametlik haridustee jäi esialgu lünklikuks. Õppisin iseseisvalt ning 1955. aastal astusin
+                   Marksismi-Leninismi õhtuülikooli, kus olin oma kursuse üks eesrindlikumaid lõpetajaid.
+                   <br/><br/>
+                   Järgnesid põnevad aastad erinevates tööliskollektiivides, kus olin ametis partorgina. Hiljem
+                   töötasin EKP keskkomitees mitmetel huvitavatel ning vastutusrikastel ametikohtadel.
+                   <br/><br/>
+                   Töötades maailmavaatelt lähedaste inimestega, leidsin palju häid ja kasulikke sõpru, kes
+                   aitasid hankida defitsiiti. Suviti puhkasin Krimmi või Sotši kuurortides. 1979. aastal õnnestus
+                   mul külastada isegi kapitalistlikku Rootsi kuningriiki. Millestki puudus pole mul olnud – mul
+                   on kodus kõik importasjad: Tšehhi kristall, värviteler, Poola mikser, Bulgaaria konservid,
+                   Saksa Demokraatliku Vabariigi köögimööbel, Jugoslaavia vaibad, Soome pestav tapeet.
+                   Korter on kõigi mugavustega kolmetoaline ja maja ees seisab minu isiklik helesinine
+                   Moskvitš 412. Vaikselt olen kogunud ehitusmaterjali, sest olen hankinud suvilakrundi Klooga
+                   mändide all.
+                   <br/><br/>
+                   Viimastel aastatel on vaatamata minu jõupingutustele hakanud kõik kiiva kiskuma. Eesti
+                   NSV-s on hakanud pead tõstma natsionalism. Tahetakse häbiväärselt hävitada kogu
+                   sotsialistlik heaolu ja turvalisus, mille oleme saavutanud maailma suurima ja võimsama riigi
+                   kaitsel ja toel! Oleme vajumas kodanlik-kapitalislikku mülkasse.
+                   <br/><br/>
+                   Mis saab minu suvila krundist, kokkuhangitud materjalidest? Mis saab minu auväärsest
+                   töökohast EKP keskkomitees? Kas edaspidi on siis mitu parteid? Miks neid nii palju vaja on?
+                   <br/><br/>
+                   Inimesed, tulge mõistusele, oleme ikka edasi sõbrad Nõukogude Liidu vennalikus peres!</p>
               </div>
               
-              <div class="col-lg-4">
-                <img src="pildid/partorg.jpg" alt="must-valge partorg" class="img-fluid">
-              </div>
             </div>
           </div>
     
@@ -139,19 +192,36 @@
 
           <div class="tab-pane fade p-3 text-white" id="nav-perenaine" role="tabpanel" aria-labelledby="nav-perenaine-tab">
             <div class="row">
-              <div class="col-lg-8">
-                <h2>Perenaine</h2>
-                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p>
-                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam provident dignissimos ad, culpa corporis tempora ipsa eaque placeat saepe, quod nam? Voluptate ex nulla nemo.</p>
-                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, tempore!</p>
-                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio quasi temporibus ad deserunt qui ratione!</p>
-                <p>Lorem ipsum dolor sit amet.</p>
+              <div>
+                <h2>VIRGE, apteeker. Sündinud 1955, 35-aastane</h2>
+
+                <video controls >
+                  <source src="vids/perenaine.mp4" type="video/mp4" />
+                </video>
+
+                <p>Olen tüüpiline tänapäeva naine – päeval tööl, õhtul kodus. Abielus, kaks last. Igapäevaelu
+                   nõuab päris suuri oskusi, et ära elada. Poed on kaupadest tühjad, paljalt talongidest ära ei ela.
+                   Kogu augustikuu olen ainult sisse teinud – hakkinud ja vekkinud. Õnneks on minu töö
+                   apteekrina võimaldanud eluga ikka paremini toime tulla – vahetuskaup niinimetatud vorst
+                   vorsti vastu. Kui kohaliku kooperatiivi juhataja emal on tervisemured, siis ravimite saamiseks
+                   pöördutakse ikka minu poole – saan purgi või kaks kõrvale panna. Vastutasuks kutsub tema
+                   mind enne kauba väljapanekut omale paremat välja valima. Nii saingi eile pojale värvilise
+                   tuulepluusi. Tšehhi kaup, selliseid tuli kaubandusse vaid kolm tükki.
+                   <br/><br/>
+                   Need uue aja imed – kirikuabi ja välismaised kataloogid – on muidugi põnevad, aga vaat seda
+                   abi on küll piinlik piiluma minna! Ega me ju nii vaesed ka ei ole! Kuigi pidi puha välismaa
+                   kaup olema. Aga esimese kataloogitellimuse tegin Soomes elava sõbranna kaudu igatahes
+                   ära. Tellisin mehele kivipesuteksad, lastele tossud ja dressipüksid ja endale siidist
+                   hommikumantli ja neoonlauvärvid. Kolme nädala pärast peaks pakk postkontorisse jõudma!
+                   Loodetavasti saab kataloogikaupa varsti ka Eestis osta!
+                   <br/><br/>
+                   Praeguse aja sündmustest võtame mehega alati osa. Kui lastele hoidja saame ning kui bensiini
+                   on. Balti ketis käisime ja öölaulupidudel ja... Eileõhtune uudis, et ülemnõukogu Eesti
+                   iseseisvuse välja kuulutas, võttis mu kohe rõõmust hingetuks! Et Leedu tegi selle juba ära,
+                   nüüd meie, küllap varsti Lätigi! Aga ei saa ju nii äreval ajal pikalt rõõmustada, sest hirm on
+                   ka. Et kuidas kõik laheneb. Tankid ju tänagi Tallinnas.</p>
               </div>
               
-              <div class="col-lg-4">
-                <img src="pildid/perenaine.jpg" alt="must-valge perenaine" class="img-fluid">
-              </div>
             </div>
           </div>
 
@@ -173,15 +243,36 @@
 
           <div class="tab-pane fade p-3 text-white" id="nav-direktor" role="tabpanel" aria-labelledby="nav-direktor-tab">
             <div class="row">
-              <div class="col-lg-8">
-                <h2>direktor</h2>
-                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p>
-                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio provident corporis aut, ipsa tenetur vel illo excepturi voluptate molestiae magnam, totam est id alias dicta a assumenda corrupti et repellat.</p>
+              <div>
+                <h2>ELLE, koolidirektor. Sündinud 1948, 43-aastane</h2>
+
+                <video controls >
+                  <source src="vids/direktor.mp4" type="video/mp4" />
+                </video>
+
+                <p>Olen sündinud väga segastel aegadel 7. novembril 1948. aastal Põltsamaa lähedal Umbusi
+                  külas. Vanemad olid kooliõpetajad Põltsamaal, vanavanemad aga talupidajad.
+                   <br/><br/>
+                   Vanavanemad küüditati 25. märtsil 1949. aastal Siberisse. Pidime kodust lahkuma ja asusime
+                   elama Põltsamaale üürikorterisse. Kooliteed alustasin samas koolis, kus vanemad töötasid.
+                   Olin väga tubli õpilane, sain alati kiituskirju. Esimeses klassis astusin oktoobrilapseks, 5.
+                   klassis pioneeriks. Olin kooli pioneeride malevanõukogu esimees. Keskkoolis astusin
+                   komsomoli. Seal ma väga aktiivne ei olnud, aga kuna vanavanemad olid küüditatud, siis sain
+                   aru, et kasulik on olla komnoor. Edasi läksin õppima Tartu Pedagoogiline Kool, sest tahtsin
+                   väga saada algklasside õpetajaks.
+                   <br/><br/>
+                   Tööle saingi õpetajaks sinnasamma Põltsamaale, kus töötasid mu vanemad. Edasi tegin
+                   karjääri: olin õppealajuhataja ja seejärel sain kooli direktoriks, sest endine direktor, minu isa,
+                   läks pensionile. Tõsi küll, et direktoriks saada, pidin astuma kommunistlikkusse parteisse.
+                   <br/><br/>
+                   Väga ootamatud olid minu jaoks 1988. aasta kevadel Tartus toimunud muinsuskaitsepäevad.
+                   Olin juhuslikult Tartus ja nägin rongkäiku, kus lehvisid kõrvuti kolm lippu: üks sinine, teine
+                   must ja kolmas valge. Kodus rääkisime sellest vanematega. Nad andsid nõu, et on vaja uute
+                   tuultega kaasa minna ja parteist välja astuda.  Samal ajal lõpetas mu tütar Põltsamaa
+                   keskkooli. Minu soovitusel saime ta kirikus ristida ja leeritada. Lõime Põltsamaal Kodanike
+                   Komitee. Minust sai uue aja direktor.</p>
               </div>
               
-              <div class="col-lg-4">
-                <img src="pildid/direktor.jpg" alt="must-valge kooli direktor" class="img-fluid">
-              </div>
             </div>
           </div>
 
diff --git a/lehed/rollid/styles.css b/lehed/rollid/styles.css
index 5240092..2885825 100644
--- a/lehed/rollid/styles.css
+++ b/lehed/rollid/styles.css
@@ -1,3 +1,8 @@
+@font-face {
+    font-family: 'fontUno';
+    src: url('fonts/FirstSchool.ttf');
+}
+
 body{
     font-family: 'Cormorant SC', serif !important;
 }
@@ -5,4 +10,17 @@ body{
 button{
     color: black !important;
     font-weight: bold !important;
-}
\ No newline at end of file
+    font-size: 1.2rem !important;
+}
+
+p, h2, button {
+    font-family: 'fontUno' !important;
+}
+
+video {
+    float: right;
+    width: 50%;
+    border-radius: 20px;
+    margin-left: 20px;
+    margin-bottom: 20px;
+}
diff --git a/rannak/endPage/main.js b/rannak/endPage/main.js
index b38f354..1f4a3c5 100644
--- a/rannak/endPage/main.js
+++ b/rannak/endPage/main.js
@@ -1,8 +1,7 @@
 let rollSpan = document.querySelector("span"); ;
 
-if (rollSpan.roll !=undefined){
+if (localStorage.roll != undefined){
     rollSpan.innerHTML = localStorage.roll;
-    console.log(localStorage.roll);
     delete localStorage.roll;
 }
 
diff --git a/rannak/kaart/css/kaart.css b/rannak/kaart/css/kaart.css
index 60bb1f9..1329303 100644
--- a/rannak/kaart/css/kaart.css
+++ b/rannak/kaart/css/kaart.css
@@ -1,20 +1,35 @@
-svg path{
-    fill: #00394f;
-    stroke: #eee !important; 
-    stroke-width: .25 !important;
+body {
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
 }
 
-svg path:hover {
-    fill: #006284;
-    transition: 0.6s !important;
-    cursor: pointer !important;
-    
+/* Upper Container Stuff*/
+.upperContainer{
+    text-align: center;
 }
 
+
+.upperContainer .movementBtn{
+    background-color: #687494;
+    border: none;
+    border-radius: 4px;
+    font-size:1.3rem;
+    color:white;
+    padding: 10px;
+    margin: 0 2px;
+}
+
+
+
+
+/* Move On Stuff*/
+
 .moveOn{
     display: inline-block;
     border: none;
     padding: 6px 12px;
+    margin-left: 50px;
     margin-botton: 0;
     font-size: 1rem;
     font-weight: normal;
@@ -29,3 +44,31 @@ button:disabled{
     opacity: 0.5;
 }
 
+
+
+/* Kaart Stuff */
+
+
+.svgContainer {
+    overflow: hidden;
+    border: 2px solid #E3D4AD;
+    border-radius: 10px;
+    margin: 1.5%;
+    background-color: #434854;
+}
+
+ /* #00394f, #006284 */
+
+svg {transition: transform 0.1s linear 0.1s;}
+svg path{
+    fill: #767F94;
+    stroke: #eee !important; 
+    stroke-width: .25 !important;
+}
+
+svg path:hover {
+    fill: #A9B5D4;
+    transition: 0.6s !important;
+    cursor: pointer !important;
+    
+}
diff --git a/rannak/kaart/index.html b/rannak/kaart/index.html
index 9160fd4..bba5c51 100644
--- a/rannak/kaart/index.html
+++ b/rannak/kaart/index.html
@@ -12,24 +12,30 @@
 
 <body class="bg-dark">
 
-    <div class="container">
-        <div class="row align-items-center">
-            <div class="col-8 text-center text-white">
+    <div class="upperContainer text-white">
+            <div>
                 <h1>Kaardimäng</h1>
                 <p>Leia esimesed kümme riiki, kes tunnustasid De Facto Eesti iseseisvust
-                <br>(testiks leia Eesti, Holland ja Portugal)</p>
+                <br>(Praegu testiks leia Eesti, Holland ja Portugal)</p>
             </div>
 
-            <div class="col-4">
+            <div>
+
+              <button class="movementBtn" id="left-button">&larr;</button>
+              <button class="movementBtn" id="right-button">&rarr;</button>
+              <button class="movementBtn" id="up-button">&uarr;</button>
+              <button class="movementBtn" id="down-button">&darr;</button>
+              <button class="movementBtn" id="zoom-in-button">&plus;</button>
+              <button class="movementBtn" id="zoom-out-button">&minus;</button>
+
               <button class="moveOn" disabled>Liigu Edasi</button>
-            </div>
-        </div>
+
+          </div>
     </div>
 
 
-    <?xml version="1.0"?>
     <!--
-      *************Map created by Simplemaps.com********************		
+    *************Map created by Simplemaps.com********************		
     *************Attribution is highly appreciated!***************
     *************http://simplemaps.com****************************
 
@@ -54,8 +60,8 @@
     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
-
-  -->
+    -->
+  <div class="svgContainer">
     <svg baseprofile="tiny" stroke-linecap="round" stroke-linejoin="round" version="1.2" viewbox="0 0 2000 857" xmlns="http://www.w3.org/2000/svg">
           <path d="M1383 261.6l1.5 1.8-2.9 0.8-2.4 1.1-5.9 0.8-5.3 1.3-2.4 2.8 1.9 2.7 1.4 3.2-2 2.7 0.8 2.5-0.9 2.3-5.2-0.2 3.1 4.2-3.1 1.7-1.4 3.8 1.1 3.9-1.8 1.8-2.1-0.6-4 0.9-0.2 1.7-4.1 0-2.3 3.7 0.8 5.4-6.6 2.7-3.9-0.6-0.9 1.4-3.4-0.8-5.3 1-9.6-3.3 3.9-5.8-1.1-4.1-4.3-1.1-1.2-4.1-2.7-5.1 1.6-3.5-2.5-1 0.5-4.7 0.6-8 5.9 2.5 3.9-0.9 0.4-2.9 4-0.9 2.6-2-0.2-5.1 4.2-1.3 0.3-2.2 2.9 1.7 1.6 0.2 3 0 4.3 1.4 1.8 0.7 3.4-2 2.1 1.2 0.9-2.9 3.2 0.1 0.6-0.9-0.2-2.6 1.7-2.2 3.3 1.4-0.1 2 1.7 0.3 0.9 5.4 2.7 2.1 1.5-1.4 2.2-0.6 2.5-2.9 3.8 0.5 5.4 0z" id="AF" name="Afghanistan">
         </path>
@@ -1004,6 +1010,7 @@
          <circle cx="1798.2" cy="719.3" id="2">
         </circle>
         </svg>
+    </div>
 
     <!-- javascript -->
     <script src="js/kaart.js"></script>
diff --git a/rannak/kaart/js/kaart.js b/rannak/kaart/js/kaart.js
index 4bb0afe..f0921b5 100644
--- a/rannak/kaart/js/kaart.js
+++ b/rannak/kaart/js/kaart.js
@@ -1,3 +1,74 @@
+// ******************** Zoom Stuff **************************** //
+
+const svg = document.querySelector("svg");
+
+const getTransformParameters = (element) => {
+  const transform = element.style.transform;
+  let scale = 1, x = 0, y = 0;
+
+  if (transform.includes("scale"))
+    scale = parseFloat(transform.slice(transform.indexOf("scale") + 6));
+  if (transform.includes("translateX"))
+    x = parseInt(transform.slice(transform.indexOf("translateX") + 11));
+  if (transform.includes("translateY"))
+    y = parseInt(transform.slice(transform.indexOf("translateY") + 11));
+
+  return { scale, x, y };
+};
+
+
+const getTransformString = (scale, x, y) =>
+  "scale(" + scale + ") " + "translateX(" + x + "%) translateY(" + y + "%)";
+
+
+// Pan and Zoom funcs
+
+const pan = (direction) => {
+  const { scale, x, y } = getTransformParameters(svg);
+  let dx = 0, dy = 0;
+
+  switch (direction) {
+    case "left":
+      dx = 3;
+      break;
+    case "right":
+      dx = -3;
+      break;
+    case "up":
+      dy = 3;
+      break;
+    case "down":
+      dy = -3;
+      break;
+  }
+
+  svg.style.transform = getTransformString(scale, x + dx, y + dy);
+};
+
+
+const zoom = (direction) => {
+  const { scale, x, y } = getTransformParameters(svg);
+  let dScale = 0.1;
+  if (direction == "out") dScale *= -1;
+  if (scale == 0.1 && direction == "out") dScale = 0;
+  svg.style.transform = getTransformString(scale + dScale, x, y);
+};
+
+
+// Event Listeners
+
+document.getElementById("left-button").onclick = () => pan("left");
+document.getElementById("right-button").onclick = () => pan("right");
+document.getElementById("up-button").onclick = () => pan("up");
+document.getElementById("down-button").onclick = () => pan("down");
+
+document.getElementById("zoom-in-button").onclick = () => zoom("in");
+document.getElementById("zoom-out-button").onclick = () => zoom("out");
+
+
+
+// ******************** Other Stuff **************************** //
+
 const riigid = document.querySelectorAll("svg path")
 
 // Praegu Eesti, Portugal, Holland
diff --git a/rannak/mangud/partorg/sonaragastik/index.html b/rannak/mangud/partorg/sonaragastik/index.html
index f2aabe8..095c110 100644
--- a/rannak/mangud/partorg/sonaragastik/index.html
+++ b/rannak/mangud/partorg/sonaragastik/index.html
@@ -26,7 +26,6 @@
         <div class="text-center inputBox">
           <button type="button" class="subBtn subDisabled" onclick="proovi();">Proovi</button>
           <div class="messageBox">
-            siia tekib info
           </div>
 
         </div>
diff --git a/rannak/mangud/partorg/sonaragastik/script.js b/rannak/mangud/partorg/sonaragastik/script.js
index c08aef8..33626b1 100644
--- a/rannak/mangud/partorg/sonaragastik/script.js
+++ b/rannak/mangud/partorg/sonaragastik/script.js
@@ -119,7 +119,7 @@ function proovi(){
 function moveOnEnable(){
     const btn = document.querySelector(".moveOn");
     btn.disabled = false;
-    localStorage.setItem('roll', "Partogi");
+    localStorage.setItem('roll', "Partorgi");
     btn.onclick = () => location.href = "../../../endPage";
 
     // submit btn
diff --git a/rannak/mangud/uliopilane/tSark/index.html b/rannak/mangud/uliopilane/tSark/index.html
index 1de96dd..9fcbef6 100644
--- a/rannak/mangud/uliopilane/tSark/index.html
+++ b/rannak/mangud/uliopilane/tSark/index.html
@@ -7,7 +7,7 @@
     <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>
+  <body class="text-white">
 
     <div class="containeraa">
 
@@ -22,7 +22,7 @@
 
 
     <!-- Modal -->
-    <div class="modal fade text-black" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
 
@@ -112,16 +112,16 @@
               <button id="nextTekstBtn" onclick="nextText();">Veel üks Tekst</button>
 
               <div class="textAddWrapper">
-                <span class="ules">&uarr;</span>
-                <span class="alla">&darr;</span>
-                <span class="vasak">&larr;</span>
-                <span class="parem">&rarr;</span>
+                <button class="ules">&uarr;</button>
+                <button class="alla">&darr;</button>
+                <button class="vasak">&larr;</button>
+                <button class="parem">&rarr;</button>
 
-                <span class="vertVasak">&cularr;</span>
-                <span class="vertParem">&curarr;</span>
+                <button class="vertVasak">&cularr;</button>
+                <button class="vertParem">&curarr;</button>
 
-                <span class="plus">+</span>
-                <span class="minus">-</span>
+                <button class="plus">&plus;</button>
+                <button class="minus">&minus;</button>
 
                 <input id="colorText" type="color" value="#000000"/>
 
@@ -129,7 +129,7 @@
 
             </div>  <!-- TextPos End -->
 
-            <div class="nulliBtn">
+            <div>
               <label for="nulliBtn">Nulli Särk:</label>
               <button class="nulliBtn">Nulli särk</button>
             </div>
diff --git a/rannak/mangud/uliopilane/tSark/main.js b/rannak/mangud/uliopilane/tSark/main.js
index 485c189..ddbd533 100644
--- a/rannak/mangud/uliopilane/tSark/main.js
+++ b/rannak/mangud/uliopilane/tSark/main.js
@@ -375,7 +375,7 @@ const chkBtn = document.querySelector(".checkMoveOn");
 chkBtn.addEventListener("click", (e) => {
 
     if (stuffDone.length >= 3){
-        message("Korras! Soovi korral tee screenshot (Win+Shift+S)", "green");
+        message("Korras! Soovi korral tee screenshot (Win+Shift+S)", "#4BB543");
         moveOnEnable();
     }
     else
@@ -386,6 +386,13 @@ 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
@@ -437,4 +444,12 @@ nulliBtn.addEventListener("click", () => {
     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 6d1f5fb..ff8a478 100644
--- a/rannak/mangud/uliopilane/tSark/style.css
+++ b/rannak/mangud/uliopilane/tSark/style.css
@@ -1,5 +1,5 @@
 body{
-    background-color: #fffcc9 !important;
+    background-color: #FADFCA !important;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
@@ -18,7 +18,7 @@ body{
     width: 50%;
     height: 100vh;
     text-align: center;
-    background-color: #B3B07B;
+    background-color: #544B44;
 }
 
 
@@ -61,6 +61,9 @@ button:disabled{
 
 
 /* Modal Stuff */
+.modal{
+    color: black !important;
+}
 
 .closeModalButton {
   border-radius: 50px;
@@ -69,6 +72,7 @@ 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;
@@ -113,6 +117,17 @@ svg {
 
 /*Muutuste osa*/
 
+.muutused button {
+    background-color: #596B6E;
+    border: none;
+    border-radius: 4px;
+    font-size:1.3rem;
+    color:white;
+    padding: 10px;
+    margin: 0 2px;
+    font-size: 0.9rem;
+}
+
 .muutused {
     margin-top: 10px;
     border-top: 2px solid gray;
@@ -141,7 +156,17 @@ svg {
 }
 
 .nulliBtn {
-    font-size: 1.2rem;
+    background-color: red !important;
+}
+
+.textAddWrapper button {
+    background-color: #596B6E;
+    border: none;
+    border-radius: 4px;
+    font-size:1.3rem;
+    color:white;
+    padding: 10px;
+    margin: 0 2px;
 }
 
 
diff --git a/rannak/rolliValik/index.html b/rannak/rolliValik/index.html
index 9118aae..95d6b41 100644
--- a/rannak/rolliValik/index.html
+++ b/rannak/rolliValik/index.html
@@ -22,10 +22,10 @@
 
         <div class="col">
           <div class="card h-100">
-            <img src="pildid/opilane.jpg" class="card-img-top" alt="...">
+            <img src="pildid/uliopilane.png" class="card-img-top" alt="...">
             <div class="card-body">
-              <h5 class="card-title">Üliõpilane</h5>
-              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis expedita nihil quam possimus quidem iure rerum eius ut, et ducimus tempora, temporibus officia modi. Quas!</p>
+              <h5 class="card-title"><strong>Üliõpilane</strong></h5>
+              <p class="card-text">Olen Virumaa poiss – täpsemalt Lääne-Viru maakonnast Rakke alevikust. See on üks selline keskmise suurusega raudteeasula, mille suur osa elanikest töötab kohalikus lubjatehases. </p>
               <a href="../mangud/uliopilane/ajatelg" class="btn btn-lg btn-dark">Vali!</a>
             </div>
           </div>
@@ -33,10 +33,11 @@
 
         <div class="col">
           <div class="card h-100">
-            <img src="pildid/partorg.jpg" class="card-img-top" alt="...">
+            <img src="pildid/partorg.png" class="card-img-top" alt="...">
             <div class="card-body">
-              <h5 class="card-title">Partorg</h5>
-              <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia debitis dignissimos esse odio quaerat. Neque suscipit asperiores repellendus, quo fugit nam amet vero reprehenderit obcaecati.</p>
+              <h5 class="card-title"><strong>Partorg</strong></h5>
+              <br/>
+              <p class="card-text">Olen sündinud Nõukogude Liidus 1933. aastal ning Suure Isamaasõja keerises sattusin 11- aastasena koos vanematega oma esiisade maale, Eesti NSVsse.</p>
               <a href="../mangud/partorg/kuulsused" class="btn btn-lg btn-dark">Vali!</a>
             </div>
           </div>
@@ -44,10 +45,13 @@
 
         <div class="col">
           <div class="card h-100">
-            <img src="pildid/direktor.jpg" class="card-img-top" alt="...">
+            <img src="pildid/direktor.png" class="card-img-top" alt="...">
             <div class="card-body">
-              <h5 class="card-title">Direktor</h5>
-              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum voluptatem fugit minima eum labore. Amet, nobis? Cupiditate inventore quo voluptatem soluta! Sapiente excepturi deleniti assumenda!</p>
+              <h5 class="card-title"><strong>Direktor</strong></h5>
+              <p class="card-text">
+                <br/>
+                Olen sündinud väga segastel aegadel 7. novembril 1948. aastal Põltsamaa lähedal Umbusi külas. Vanemad olid kooliõpetajad Põltsamaal, vanavanemad aga talupidajad.
+              </p>
               <!--<a href="#" class="btn btn-lg btn-dark">Vali!</a> -->
             </div>
           </div>
@@ -55,10 +59,11 @@
 
         <div class="col">
           <div class="card h-100">
-            <img src="pildid/perenaine.jpg" class="card-img-top" alt="...">
+            <img src="pildid/perenaine.png" class="card-img-top" alt="...">
             <div class="card-body">
-              <h5 class="card-title">Perenaine</h5>
-              <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim alias officia tempore, veritatis provident consectetur voluptatem ea labore. Maxime porro vero omnis perspiciatis accusantium sint!</p>
+              <h5 class="card-title"><strong>Perenaine</strong></h5>
+              <br/>
+              <p class="card-text">Olen tüüpiline tänapäeva naine – päeval tööl, õhtul kodus. Abielus, kaks last. Igapäevaelu nõuab päris suuri oskusi, et ära elada.</p>
               <!--<a href="#" class="btn btn-lg btn-dark">Vali!</a> -->
             </div>
           </div>
diff --git a/rannak/rolliValik/pildid/arimees.jpg b/rannak/rolliValik/pildid/arimees.jpg
deleted file mode 100644
index 3cb21cf..0000000
--- a/rannak/rolliValik/pildid/arimees.jpg
+++ /dev/null
diff --git a/rannak/rolliValik/pildid/direktor.jpg b/rannak/rolliValik/pildid/direktor.jpg
deleted file mode 100644
index 74f2cf5..0000000
--- a/rannak/rolliValik/pildid/direktor.jpg
+++ /dev/null
diff --git a/rannak/rolliValik/pildid/kaitseliitlane.jpg b/rannak/rolliValik/pildid/kaitseliitlane.jpg
deleted file mode 100644
index 37ae271..0000000
--- a/rannak/rolliValik/pildid/kaitseliitlane.jpg
+++ /dev/null
diff --git a/rannak/rolliValik/pildid/opilane.jpg b/rannak/rolliValik/pildid/opilane.jpg
deleted file mode 100644
index 7e42755..0000000
--- a/rannak/rolliValik/pildid/opilane.jpg
+++ /dev/null
diff --git a/rannak/rolliValik/pildid/partorg.jpg b/rannak/rolliValik/pildid/partorg.jpg
deleted file mode 100644
index 2df392c..0000000
--- a/rannak/rolliValik/pildid/partorg.jpg
+++ /dev/null
diff --git a/rannak/rolliValik/pildid/perenaine.jpg b/rannak/rolliValik/pildid/perenaine.jpg
deleted file mode 100644
index 94c5b54..0000000
--- a/rannak/rolliValik/pildid/perenaine.jpg
+++ /dev/null