<!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>
<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>
<!-- 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>
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>