12 files changed, 498 insertions, 0 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);
+    }
+}