diff options
Diffstat (limited to 'rannak/mangud/perenaine/kuulamine')
| -rw-r--r-- | rannak/mangud/perenaine/kuulamine/Perenaine.mp3 | bin | 0 -> 6020492 bytes | |||
| -rwxr-xr-x | rannak/mangud/perenaine/kuulamine/index.html | 247 | ||||
| -rwxr-xr-x | rannak/mangud/perenaine/kuulamine/pildid/avatar.png | bin | 0 -> 703680 bytes | |||
| -rwxr-xr-x | rannak/mangud/perenaine/kuulamine/script.js | 92 | ||||
| -rwxr-xr-x | rannak/mangud/perenaine/kuulamine/style.css | 88 |
5 files changed, 427 insertions, 0 deletions
diff --git a/rannak/mangud/perenaine/kuulamine/Perenaine.mp3 b/rannak/mangud/perenaine/kuulamine/Perenaine.mp3 Binary files differnew file mode 100644 index 0000000..0c793fb --- /dev/null +++ b/rannak/mangud/perenaine/kuulamine/Perenaine.mp3 diff --git a/rannak/mangud/perenaine/kuulamine/index.html b/rannak/mangud/perenaine/kuulamine/index.html new file mode 100755 index 0000000..3e88521 --- /dev/null +++ b/rannak/mangud/perenaine/kuulamine/index.html @@ -0,0 +1,247 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + + <title>Kuulamine</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> + + <!-- Button trigger modal --> + <button id="testModal" type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal"> + Sissejuhatus + </button> + + <div class="container text-white text-center"> + <h1>Kuulamine</h1> + + <p> + Kuula helifaili ja/või loe teksti ning vasta allolevatele küsimustele. + </p> + + <div class="text-center"> + + <div class="col"> + <button class="moveOn" disabled>Liigu Edasi</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> + Pidev defitsiidi- ja talongimajanduses elamine on teinud minust väga nutika hankija. + Olen oma perele muretsenud kõik, mida igapäevaelus vaja läheb ja mis moes on. + </p> + <br/> + <p> + Aga nüüd on mul mustriga importsukkpükse vaja! Läheme perega laupäeval onutütre sünnipäevale + ja tuleb välja, et just selliseid sukkpükse ongi ta igatsenud. + Ta nägi neid moekataloogis - OTTO või Burda või Siluett, + ei mäletagi enam täpselt kus. + </p> + <br/> + <p> + Igatahes on mul neid sukkpükse vaja. Poest selliseid loomulikult ei saa, aga nn vorst-vorsti vastu, + vahetuskaubana, on see kindlasti võimalik. Apteekrina on mul ligipääs defitsiitsetele ravimitele, + <strong> + aga kellega ma peaksin neid vahetama, et lõpuks sukkpüksid kätte saada? + </strong> + </p> + </div> + + </div> + </div> + </div> + + + + + <!-- Mainy --> + + <div class="main container"> + + + <audio controls> + <source src="Perenaine.mp3" type="audio/mpeg"> + Your browser does not support the audio element. + </audio> + + + <p> + Tean, et <strong>traktorist Jüril</strong> on radikuliit. + Temale saaksin küll ravimeid viia, aga tal ei ole sukkpükse, + temal on ainult bensiini, millega ta vaikselt äri teeb. + Aga äkki kui ma vahetan ravimid bensiini vastu, ehk saan + siis omakorda bensiini vahetada millegi muu vastu ja selle + omakorda veel millegi muu vastu kuni lõpuks jõuangi sukkpüksteni? + </p> + <p> + Palun aidake mind! Tuletan meelde kõik oma tuttavad, kelle kaudu + defitsiitseid kaupu liigub, aidake mul vahetuste kaudu sukkpüksteni jõuda! + </p> + + <h3 class="niisiis">Niisiis...</h3> + + <p> + <strong>Poe Kati. Katil</strong> on võimalik vorsti, juustu ja Fantat saada. + Ta rääkis mulle, et otsib uut kodu looduskaunis kohas, nojah, + romantik on ta alati olnud. + </p> + + <p> + <strong>Raamatukogu Rita. Rital</strong> on raamatukogus koopiamasin. + Nad said Rootsist humanitaarabi korras ühe sealse raamatukogu vana masina. + Rita teeb Soome televisiooni kavade koopiaid. Ükspäev poe järjekorras ta + rääkis, et tahab Tartusse „Sõnajala“ kontserdile sõita, aga mehel on vana + autoloks ja kütust pole. + </p> + + <p> + <strong>Riidepoe Mari. Maril</strong> on võimalik saada teksakangast, + millest saab Burda lõigete järgi pükse või seelikuid õmmelda. + Mõnikord liigub ka importsukkpükse. Ja tema otsib tubli meest, + kellega abielluda. Tegelikult on ta isegi mõelnud, et äkki tal + õnnestub tutvudamõne välismaa mehega, näiteks soomlasega, + ja siis ta saaks ju Helsingisse elama minna, mõtelge! + </p> + + <p> + <strong>Kolhoosnik Juuli. Juulil</strong> on sealiha ja talle maitseb fanta. + Aga seda pole ju saada! + </p> + + <p> + <strong>Tööline Märt. Sohvoosi õunaaias töötab Märt</strong>, + kellel on palju antoonovkaid. Tema teeb õunamahla ja müüb seda turul. + Temal oleks vaja purgikaasi. Klaaspurgid, kuhu mahla villida, on tal + olemas, aga plekk-kaasi pole ju kusagilt saada. + </p> + + <p> + <strong>Kultuurimaja juhataja Tiiu. Tiiu</strong> tunneb palju kuulsaid inimesi, + kes on meie kandis esinemas käinud. Tiiu tahaks ise ka kuulsaks saada. + </p> + + <p> + <strong>Õpetaja Juta. Juta</strong> tunneb palju tarku õpilasi ja + tal on kirjasõber Soomes. Juta on mulle saladuskatte all öelnud, + et tegelikult tahaks see sõber temaga abielluda, aga Juta ei taha. + Jutale meeldib hoopis telekat vaadata, eriti Soome YLE1 kanalit. + Aga kui ometi teaks mida seal näidatakse! Soome telekavasid ju + meie ajalehekioskites ei müüda. + </p> + + <p> + <strong>Metsavaht Jaan. Jaan</strong> saab metsaga äri teha, + siin liiguvad päris suured summad. Jaan kogub raha maja ehitamiseks, + palgid on küll omast käest, aga palju muud läheb ka vaja. + </p> + + <p> + No ongi justkui kõik, kes mulle meelde tulevad. + </p> + + <div class="tableWrapper"> + <h3 class="minuPlaan">MINU SUKKPÜKSTE HANKIMISE PLAAN:</h3> + <p>NB: Sisesta vastused õigetes käänetes. Kui veerg on korrektne, muutub see roheliseks.</p> + + + <table class="table table-dark table-striped"> + <tr> + <td></td> + <td><strong>I Vahetus</strong></td> + <td><strong>II Vahetus</strong></td> + <td><strong>III Vahetus</strong></td> + <td><strong>IV Vahetus</strong></td> + </tr> + <tr> + <td><strong>Annan</strong></td> + + <td> + <table class="table table-dark table-striped"> + <tr> + <td class="toBeEdited">Kellele </td> + </tr> + <tr> + <td class="toBeEdited">Mida </td> + </tr> + </table> + </td> + + <td> + <table class="table table-dark table-striped"> + <tr> + <td class="toBeEdited">Kellele </td> + </tr> + <tr> + <td class="toBeEdited">Mida </td> + </tr> + </table> + </td> + + <td> + <table class="table table-dark table-striped"> + <tr> + <td class="toBeEdited">Kellele </td> + </tr> + <tr> + <td class="toBeEdited">Mida </td> + </tr> + </table> + </td> + + <td> + <table class="table table-dark table-striped"> + <tr> + <td class="toBeEdited">Kellele </td> + </tr> + <tr> + <td class="toBeEdited">Mida </td> + </tr> + </table> + </td> + + </tr> + + <tr> + <td><strong>Saan</strong></td> + <td class="toBeEdited">Mille</td> + <td class="toBeEdited">Mille</td> + <td class="toBeEdited">Mille</td> + <td><strong>Käes</strong></td> + </tr> + </table> + </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/perenaine/kuulamine/pildid/avatar.png b/rannak/mangud/perenaine/kuulamine/pildid/avatar.png Binary files differnew file mode 100755 index 0000000..60987d3 --- /dev/null +++ b/rannak/mangud/perenaine/kuulamine/pildid/avatar.png diff --git a/rannak/mangud/perenaine/kuulamine/script.js b/rannak/mangud/perenaine/kuulamine/script.js new file mode 100755 index 0000000..19debea --- /dev/null +++ b/rannak/mangud/perenaine/kuulamine/script.js @@ -0,0 +1,92 @@ +document.addEventListener('DOMContentLoaded', () => { + let btn = document.querySelector('.modalButton'); + btn.click(); +}); + + + +const cells = document.querySelectorAll(".toBeEdited"); +console.log(cells); + +for (let i=0;i < cells.length; i++){ + cells[i].onclick = function(){ + console.log('Clicked'); + + if (this.hasAttribute('data-clicked')) + return; + + this.setAttribute('data-clicked', 'yes') + this.setAttribute('data-text', this.innerHTML) + + let input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.value = this.innerHTML; + input.style.width = this.offsetWidth - (this.clientLeft * 2) + 'px'; + input.style.height = this.offsetHeight - (this.clientTop * 2) + 'px'; + input.style.border = '0px'; + input.fontFamily = 'inherit'; + input.fontSize = 'inherit'; + input.textAlign = 'inherit'; + input.style.backgroundColor = 'LightGoldenRodYellow'; + + + // On offclick + input.onblur = function(){ + let td = input.parentElement; + let origText = input.parentElement.getAttribute('data-text'); + let curText = this.value; + + if (origText != curText){ + td.removeAttribute('data-clicked'); + td.removeAttribute('data-text'); + td.innerHTML = curText; + td.style.cssText = 'padding: .5rem .5rem'; + console.log('Sth Change'); + } + else { + td.removeAttribute('data-clicked'); + td.removeAttribute('data-text'); + td.innerHTML = origText; + td.style.cssText = 'padding: .5rem .5rem'; + } + + + // Here Check if Done + //TODO + + + + } // onblur func end + + + input.onkeypress = function (){ + if (event.keyCode == 13) + this.onblur(); + } + + this.innerHTML = ''; + this.style.cssText = 'padding: 0px'; + this.append(input); + this.firstElementChild.select(); + + + + + + } // OnClick Loop +} //ForLoop + + + + + + + +// If Done + +function moveOnEnable(){ + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = ""; +} + diff --git a/rannak/mangud/perenaine/kuulamine/style.css b/rannak/mangud/perenaine/kuulamine/style.css new file mode 100755 index 0000000..380bc00 --- /dev/null +++ b/rannak/mangud/perenaine/kuulamine/style.css @@ -0,0 +1,88 @@ +* { + box-sizing: border-box; +} + +body{ + background-color: #43464b; +} + +h1 { + color: #FEDD00; + 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{ + 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); +} + + + + +/* Main styles*/ + +audio{padding-bottom: 2rem;} + +strong{font-size: 1.1rem;} +.main{ + padding: 3rem 10% 0 10%; + text-align: center; + color: white; +} + +.niisiis{padding: 2rem 0 1rem 0;} +.tableWrapper{padding-bottom: 2rem;} +.tableWrapper h3 { + padding: 2rem 0 1rem 0; + border-top: 4px solid white; + color: #FEDD00; +} |
