4 files changed, 255 insertions, 0 deletions
diff --git a/rannak/mangud/direktor/kone/index.html b/rannak/mangud/direktor/kone/index.html
new file mode 100644
index 0000000..b00a94b
--- /dev/null
+++ b/rannak/mangud/direktor/kone/index.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+
+  <title>Koosta Kõne</title>
+  <!-- Bootstrap - CSS only -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+
+    <div class="container text-white text-center">
+	  <h1>Koosta Kõne</h1>
+
+	  <p>
+        Loe 1984. aasta kõne, ning kirjuta see ümber, nii, et see sobituks tänapäeva.
+      </p>
+
+	  <div class="text-center">
+
+		<div class="col">
+          <button class="moveOn" disabled>Liigu Edasi</button>
+
+          <!-- Button trigger modal -->
+          <button id="testModal" type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
+            Sissejuhatus
+          </button>
+		</div>
+
+	  </div>
+    </div>
+
+
+
+
+    <!-- Modal -->
+    <div class="modal fade text-black" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <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">
+            <p>
+            Head ja usinad õpilased! 1. september on tähtis päev, mil pean alati sütitava kõne kooliaasta alguseks.
+            Olen ajast-aega kasutanud üht kõnepõhja, mille põhjal on igal aastal hea uut kõnet üles ehitada.
+            Ent sel aastal seisab meil ees täiesti teistsugune 1. september! Esimene aktus, mis toimub vabas Eestis!
+            Eesti Vabariigis ei saa ju õppeaastat alustada nii, kuis varem!  
+            </p>
+            <p>
+            <strong>
+              Palun aidake mul kõne ümber teha! Võtke välja kõik, mis on tagurlik,
+              asendage kommunistlikud pöördumised eestimeelsetega ja leidke õiged sõnad,
+              mis sobivad uude ajastusse - esitamiseks 1. septembril 1991.
+            </strong>
+            </p>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+
+
+
+	<!-- Mainy -->
+
+	<div class="main">
+
+
+      <div class="vasak">
+        <h3>Kõne aastast 1984</h2>
+
+        <p>
+          <strong>Seltsimehed lapsed, meie eluõied, kommunismiehitajad! </strong> 
+          Täna, sellel kuldsel sügispäeval, on kogu meie töökal
+          kollektiivil hea meel, et taas on särasilmsed nõukogude
+          noored kogunenud meie ühisesse koju, V. I. Lenini nimelise
+          kolhoosi keskkooli punalippudega kaunistatud aulasse!
+          <br/><br/>
+          Loodan, et olete veetnud suvevaheaja, mis oli täis timurlust,
+          lõbusaid õhtuid lõkke ääres ning põnevaid  lugemiselamusi meie
+          suure kodumaa parimate poegade ja tütarde kirjutatud teostest.
+          <br/><br/>
+          Meie suur juht V.I .Lenin on öelnud: “Õppida, õppida, õppida!”.
+          On suur rõõm, et saame taas üheskoos asuda tarkust taga nõudma.
+          <br/>
+          Käesolev õppeaasta on pühendatud NLKP 27. kongressile.
+          <br/><br/>
+          ”Teie kui tulevased kommunistid, peate koondama peatähelepanu sellele,
+          et põhjalikult omandada teaduste alused, kujundada endas kindlaid
+          kommunistlikke veendumusi, tööarmastust, kõlbelist puhtust, et te
+          kasvaksite meie sotsialistliku paljurahvuselise kodumaa armastamise
+          ja tema kaitseks valmisoleku vaimus, proletaarse internatsionalismi
+          vaimus”. Nii tervitas teid, meie poolt palavalt armastatud,
+          1984. aastal uus NLKP peasekretäri Konstantin Tšernenko.
+          Ja nende kuldsete sõnadega ongi paslik meie selleaastast
+          uut õppeaastat alustada ja ikka julgelt edasi, seltsimehed õpilased!
+          <br/><br/>
+          Olge valmis usinaks tööks ja kodumaa kaitseks!
+        </p>
+
+      </div>
+      
+
+
+      <div class="parem">
+        <h3>Sinu kõne</h2>
+        <div class="kone" contenteditable="true">
+          Sinu kõne siia...
+        </div>
+      </div>
+
+
+
+	</div> <!-- End of main class-->
+
+
+
+  <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/direktor/kone/pildid/avatar.png b/rannak/mangud/direktor/kone/pildid/avatar.png
new file mode 100644
index 0000000..94d7a31
--- /dev/null
+++ b/rannak/mangud/direktor/kone/pildid/avatar.png
diff --git a/rannak/mangud/direktor/kone/script.js b/rannak/mangud/direktor/kone/script.js
new file mode 100644
index 0000000..ba1d77b
--- /dev/null
+++ b/rannak/mangud/direktor/kone/script.js
@@ -0,0 +1,25 @@
+document.addEventListener('DOMContentLoaded', () => {
+    let btn = document.querySelector('.modalButton');
+    btn.click();
+});
+
+
+
+const kone = document.querySelector(".kone");
+kone.addEventListener('input', () => {
+    let koneWordCount = document.querySelector(".kone").innerHTML.split(' ').length;
+    
+    if (koneWordCount > 100)
+        moveOnEnable();
+})
+
+
+
+// If Done
+
+function moveOnEnable(){
+    const btn = document.querySelector(".moveOn");
+    btn.disabled = false;
+    btn.onclick = () => location.href = "";
+}
+
diff --git a/rannak/mangud/direktor/kone/style.css b/rannak/mangud/direktor/kone/style.css
new file mode 100644
index 0000000..fa58e1d
--- /dev/null
+++ b/rannak/mangud/direktor/kone/style.css
@@ -0,0 +1,95 @@
+* {
+  box-sizing: border-box;
+}
+
+body{
+    background-color: #43464b;
+    color: white;
+}
+
+h1 {
+    color: #ED8B00;
+    font-weight: bold;
+}
+
+.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%;
+}
+
+.modalButton{
+    display: inline-block;
+    padding: 6px 12px;
+    margin-left: 30px;
+    background-color: rgba(0,136,169,1);
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3 ease 0;
+    font-size: 1rem;
+}
+
+.modalButton:hover{
+    background-color: rgba(0,136,169,0.8);
+}
+
+
+
+/* Main styles*/
+
+.main{
+    display: flex; 
+    margin: 3% 0;
+    justify-content: center;
+    text-align: center;
+}
+
+.vasak{
+    margin: 1rem;
+    width: 45%;
+           
+}
+
+.parem{
+    margin: 1rem;
+    width: 45%
+}
+
+.kone{
+    width: 100%;
+    height: 90%;
+    color: white;
+    background-color: #43464b;
+    border: none;
+    text-align: left;
+}