From f05f15dbe108e3fd10af8d15fb15c1b27e689f96 Mon Sep 17 00:00:00 2001
From: Rasmus <rasmus.luha@gmail.com>
Date: Fri, 10 Mar 2023 19:09:53 +0200
Subject: added Muusika and Kuulamine
---
rannak/mangud/arimees/muusika/index.html | 269 +++++++++++++++++++++
.../muusika/laulud/AppiMaVajanArmastust.mp3 | Bin 0 -> 2415021 bytes
.../mangud/arimees/muusika/laulud/EestlaneOlen.mp3 | Bin 0 -> 4435629 bytes
.../mangud/arimees/muusika/laulud/MagedeHaal.mp3 | Bin 0 -> 4089645 bytes
.../arimees/muusika/laulud/OhkKonnidTanaval.mp3 | Bin 0 -> 4577709 bytes
.../arimees/muusika/laulud/TerePerestroika.mp3 | Bin 0 -> 2587821 bytes
rannak/mangud/arimees/muusika/laulud/TulgeKoik.mp3 | Bin 0 -> 2833581 bytes
rannak/mangud/arimees/muusika/pildid/avatar.png | Bin 0 -> 73556 bytes
rannak/mangud/arimees/muusika/script.js | 32 +++
rannak/mangud/arimees/muusika/style.css | 148 ++++++++++++
10 files changed, 449 insertions(+)
create mode 100755 rannak/mangud/arimees/muusika/index.html
create mode 100644 rannak/mangud/arimees/muusika/laulud/AppiMaVajanArmastust.mp3
create mode 100644 rannak/mangud/arimees/muusika/laulud/EestlaneOlen.mp3
create mode 100644 rannak/mangud/arimees/muusika/laulud/MagedeHaal.mp3
create mode 100644 rannak/mangud/arimees/muusika/laulud/OhkKonnidTanaval.mp3
create mode 100644 rannak/mangud/arimees/muusika/laulud/TerePerestroika.mp3
create mode 100644 rannak/mangud/arimees/muusika/laulud/TulgeKoik.mp3
create mode 100755 rannak/mangud/arimees/muusika/pildid/avatar.png
create mode 100755 rannak/mangud/arimees/muusika/script.js
create mode 100755 rannak/mangud/arimees/muusika/style.css
(limited to 'rannak/mangud/arimees/muusika')
diff --git a/rannak/mangud/arimees/muusika/index.html b/rannak/mangud/arimees/muusika/index.html
new file mode 100755
index 0000000..916e7e9
--- /dev/null
+++ b/rannak/mangud/arimees/muusika/index.html
@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+ <title>Muusika</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>Muusika</h1>
+ <p>
+ Vajuta lingile ja vaata muusikavideosid, või kuula siinsamas,
+ <br/>
+ ning järjesta siis need vastavalt oma eelistustele.
+ </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>
+ Tsau jälle! Ma sain eelmisel nädalal tutika playeri! Sellega on nüüd süngelt
+ hea mussi kuulata. Kui laeval olen või Viru juures somme ootan, siis panen
+ musa peale ja väga mõnus on. Eks ma kuulan rohkem välismaa punte, lindistan
+ neid otse Luxembourgi raadiost või Soome televisioonist, aga Eestis on ka
+ päris kuulatavat kraami. Valisin mõned lood oma kassetidelt kuulata.
+ Vaata, kas tunned ära, kes laulab? Ühe loo panin oma mampsi kassetilt ka.
+ </p>
+ <br/>
+ <p>
+ <strong>
+ Ja noh, minul on siin nimekirjas omad lemmikud, aga millised on sinu?
+ Tee oma edetabel ning põhjenda paari lausega esikoha valikut.
+ </strong>
+ </p>
+
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Main Stuff -->
+ <div class="main">
+ <ul>
+
+ <li>
+ <div class="laul">
+ <select>
+ <option disabled hidden selected>Vali</option>
+ <option value="1">1.</option>
+ <option value="2">2.</option>
+ <option value="3">3.</option>
+ <option value="4">4.</option>
+ <option value="5">5.</option>
+ <option value="6">6.</option>
+ </select>
+
+ <div class="info">
+ <h2>Ivo Linna ja In Spe</h2>
+ <a target="_blank" href="https://www.youtube.com/watch?v=Wcf7it9O0OU">
+ "Eestlane olen ja eestlaseks jään"
+ </a>
+ </div>
+
+ <audio controls>
+ <source src="laulud/EestlaneOlen.mp3" type="audio/mpeg">
+ Your browser does not support the audio element.
+ </audio>
+
+ </div>
+ </li>
+
+
+
+
+ <li>
+ <div class="laul">
+ <select>
+ <option disabled hidden selected>Vali</option>
+ <option value="1">1.</option>
+ <option value="2">2.</option>
+ <option value="3">3.</option>
+ <option value="4">4.</option>
+ <option value="5">5.</option>
+ <option value="6">6.</option>
+ </select>
+
+ <div class="info">
+ <h2>JMKE</h2>
+ <a target="_blank" href="https://www.youtube.com/watch?v=HDUFL_HW_7A">
+ "Tere, perestroika!"
+ </a>
+ </div>
+
+ <audio controls>
+ <source src="laulud/TerePerestroika.mp3" type="audio/mpeg">
+ Your browser does not support the audio element.
+ </audio>
+
+ </div>
+ </li>
+
+
+
+
+ <li>
+ <div class="laul">
+ <select>
+ <option disabled hidden selected>Vali</option>
+ <option value="1">1.</option>
+ <option value="2">2.</option>
+ <option value="3">3.</option>
+ <option value="4">4.</option>
+ <option value="5">5.</option>
+ <option value="6">6.</option>
+ </select>
+
+ <div class="info">
+ <h2>Jäääär</h2>
+ <a target="_blank" href="https://www.youtube.com/watch?v=85rgjwf2ZtQ">
+ "Õhk kõnnib tänaval"
+ </a>
+ </div>
+
+ <audio controls>
+ <source src="laulud/OhkKonnibTanaval.mp3" type="audio/mpeg">
+ Your browser does not support the audio element.
+ </audio>
+
+ </div>
+ </li>
+
+
+
+
+ <li>
+ <div class="laul">
+ <select>
+ <option disabled hidden selected>Vali</option>
+ <option value="1">1.</option>
+ <option value="2">2.</option>
+ <option value="3">3.</option>
+ <option value="4">4.</option>
+ <option value="5">5.</option>
+ <option value="6">6.</option>
+ </select>
+
+ <div class="info">
+ <h2>Kare Kauks</h2>
+ <a target="_blank" href="https://www.youtube.com/watch?v=VlORhJq3UKE">
+ "Mägede hääl"
+ </a>
+ </div>
+
+ <audio controls>
+ <source src="laulud/MagedeHaal.mp3" type="audio/mpeg">
+ Your browser does not support the audio element.
+ </audio>
+
+ </div>
+ </li>
+
+
+
+
+ <li>
+ <div class="laul">
+ <select>
+ <option disabled hidden selected>Vali</option>
+ <option value="1">1.</option>
+ <option value="2">2.</option>
+ <option value="3">3.</option>
+ <option value="4">4.</option>
+ <option value="5">5.</option>
+ <option value="6">6.</option>
+ </select>
+
+ <div class="info">
+ <h2>Sõnajalg</h2>
+ <a target="_blank" href="https://www.youtube.com/watch?v=Zd6fwliA7_k">
+ "Tulge kõik"
+ </a>
+ </div>
+
+ <audio controls>
+ <source src="laulud/TulgeKoik.mp3" type="audio/mpeg">
+ Your browser does not support the audio element.
+ </audio>
+
+ </div>
+ </li>
+
+
+
+
+ <li>
+ <div class="laul">
+ <select>
+ <option disabled hidden selected>Vali</option>
+ <option value="1">1.</option>
+ <option value="2">2.</option>
+ <option value="3">3.</option>
+ <option value="4">4.</option>
+ <option value="5">5.</option>
+ <option value="6">6.</option>
+ </select>
+
+ <div class="info">
+ <h2>Vennaskond</h2>
+ <a target="_blank" href="https://www.youtube.com/watch?v=AnBPT4hEPM4">
+ "Appi, ma vajan armastust"
+ </a>
+ </div>
+
+ <audio controls>
+ <source src="laulud/AppiMaVajanArmastust.mp3" type="audio/mpeg">
+ Your browser does not support the audio element.
+ </audio>
+
+ </div>
+ </li>
+
+ </ul>
+ </div>
+ <!-- Main End -->
+
+
+ <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/muusika/laulud/AppiMaVajanArmastust.mp3 b/rannak/mangud/arimees/muusika/laulud/AppiMaVajanArmastust.mp3
new file mode 100644
index 0000000..fbb335b
Binary files /dev/null and b/rannak/mangud/arimees/muusika/laulud/AppiMaVajanArmastust.mp3 differ
diff --git a/rannak/mangud/arimees/muusika/laulud/EestlaneOlen.mp3 b/rannak/mangud/arimees/muusika/laulud/EestlaneOlen.mp3
new file mode 100644
index 0000000..416d251
Binary files /dev/null and b/rannak/mangud/arimees/muusika/laulud/EestlaneOlen.mp3 differ
diff --git a/rannak/mangud/arimees/muusika/laulud/MagedeHaal.mp3 b/rannak/mangud/arimees/muusika/laulud/MagedeHaal.mp3
new file mode 100644
index 0000000..245faa4
Binary files /dev/null and b/rannak/mangud/arimees/muusika/laulud/MagedeHaal.mp3 differ
diff --git a/rannak/mangud/arimees/muusika/laulud/OhkKonnidTanaval.mp3 b/rannak/mangud/arimees/muusika/laulud/OhkKonnidTanaval.mp3
new file mode 100644
index 0000000..3fa9fbd
Binary files /dev/null and b/rannak/mangud/arimees/muusika/laulud/OhkKonnidTanaval.mp3 differ
diff --git a/rannak/mangud/arimees/muusika/laulud/TerePerestroika.mp3 b/rannak/mangud/arimees/muusika/laulud/TerePerestroika.mp3
new file mode 100644
index 0000000..2936f6e
Binary files /dev/null and b/rannak/mangud/arimees/muusika/laulud/TerePerestroika.mp3 differ
diff --git a/rannak/mangud/arimees/muusika/laulud/TulgeKoik.mp3 b/rannak/mangud/arimees/muusika/laulud/TulgeKoik.mp3
new file mode 100644
index 0000000..649866d
Binary files /dev/null and b/rannak/mangud/arimees/muusika/laulud/TulgeKoik.mp3 differ
diff --git a/rannak/mangud/arimees/muusika/pildid/avatar.png b/rannak/mangud/arimees/muusika/pildid/avatar.png
new file mode 100755
index 0000000..3cb21cf
Binary files /dev/null and b/rannak/mangud/arimees/muusika/pildid/avatar.png differ
diff --git a/rannak/mangud/arimees/muusika/script.js b/rannak/mangud/arimees/muusika/script.js
new file mode 100755
index 0000000..8803bbe
--- /dev/null
+++ b/rannak/mangud/arimees/muusika/script.js
@@ -0,0 +1,32 @@
+document.addEventListener('DOMContentLoaded', () => {
+ let btn = document.querySelector('.modalButton');
+ btn.click();
+});
+
+
+const selectors = document.querySelectorAll('select');
+
+for(el of selectors){
+ el.addEventListener('change', () => {
+
+ let selected = new Array();
+ for (el of selectors){
+ if (!selected.includes(el.value) && el.value != 'Vali')
+ selected.push(el.value);
+ }
+
+ if (selected.length == 6)
+ moveOnEnable();
+
+ });
+}
+
+
+// If All Else Done
+
+function moveOnEnable(){
+ const btn = document.querySelector(".moveOn");
+ btn.disabled = false;
+ btn.onclick = () => location.href = "";
+}
+
diff --git a/rannak/mangud/arimees/muusika/style.css b/rannak/mangud/arimees/muusika/style.css
new file mode 100755
index 0000000..ab7c91d
--- /dev/null
+++ b/rannak/mangud/arimees/muusika/style.css
@@ -0,0 +1,148 @@
+* {box-sizing: border-box;}
+
+
+body{
+ background-color: #43464b;
+}
+
+
+h1 {
+ color: #2FF924;
+ 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%;
+}
+
+
+
+.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);
+}
+
+
+
+/* Main */
+
+.main {
+ margin-top: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+ul{
+ width: 67vw;
+ background-color: #fff;
+ border-radius: 1rem;
+ list-style: none;
+ overflow: hidden;
+ padding: 0;
+}
+
+
+
+li{
+ display: flex;
+ align-items: center;
+ transition: .3s ease;
+}
+
+li:nth-child(even){background-color: #eee8;}
+li:hover{transform: scale(1.03);}
+
+
+.laul{
+ display: flex;
+ align-items: center;
+ padding: 1rem;
+ min-width: 100%;
+}
+
+.laulInner {
+ display: flex;
+ justify-content: space-between;
+
+}
+
+
+
+.info {
+ padding-left: 1rem;
+ text-align: center;
+ border-left: .3rem solid #000;
+ width: 50%;
+}
+
+.audioWrap{
+ width: 50%;
+}
+
+.info a {
+ text-decoration: underline;
+ font-weight: bold;
+ color: #000;
+}
+
+.info h2{font-size: 1.2rem;}
+select{margin-right: 1rem;}
+
+select {
+ -webkit-appearance: menulist-button;
+ height: 3rem;
+ width: 5rem;
+ font-size: 1.5rem;
+
+}
--
cgit v1.2.3