<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loosung</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>Loosung</h1>
<p>
Vali üks oluline sündmus ja koosta loosung!
</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>
Eestimaa on ärganud uuele poliitilisele elule. Pidevalt toimub
mõni rahvuslikult meelestatud üritus. Ole sinagi aktiivne ja
tegutse Eesti hüvanguks! Mõtle, millisest üritusest soovid
osa võtta: Hirvepargi miiting, Tartu muinsuskaitsepäevad,
Roheliste rattaretk Virumaal, Öölaulupidu, Balti kett,
Teletorni kaitsmine… ?
<br><br>
<strong>
Et meeleolu oleks kohe alguses õige ja sinu mõtted
kaugele näha, vali üks sündmus ning pane kirja loosung!
</strong>
<p>
</div>
</div>
</div>
</div>
<!-- Mainy -->
<div class="main">
<div class="options">
<label for="fondid">Vali font:</label>
<select id="fontPick" name="fondid">
<option value="tavaline" selected>Tavaline</option>
<option value="alkatara">Alkatara</option>
<option value="bebas">Bebas</option>
<option value="changa">Changa</option>
<option value="handrawn">Handrawn</option>
</select>
<label for="fontSize">Teksti suurus:</label>
<input type="number" value="20" size="5" id="fontSize" name="fontSize" min="10" max="50">
<label for="fontColor">Teksti värv:</label>
<input type="color" id="fontColor" value="#ffffff"/>
<button id="resetBtn">Taasta</button>
</div>
<div class="loosungWrapper">
<h3 id="loosung" contenteditable=true>Muuda loosung enda omaks!</h3>
</div>
<div class="info">
<h4>Loe sündmustest lähemalt siin:</h4>
<div class="innerWrapper">
<div>
<input type="radio" id="sundmus" name="sundmuseValik" value="hirvepark">
<a href="https://et.wikipedia.org/wiki/Hirvepargi_miiting" target="_blank">Hirvepargi miiting 1987</a>
</div>
<div>
<input type="radio" id="sundmus" name="sundmuseValik" value="muinsus">
<a href="https://et.wikipedia.org/wiki/Tartu_muinsuskaitsep%C3%A4evad" target="_blank">Tartu muinsuskaitsepäevad 1988</a>
</div>
<div>
<input type="radio" id="sundmus" name="sundmuseValik" value="ratas">
<a href="https://et.wikipedia.org/wiki/Roheliste_rattaretk" target="_blank">Roheliste rattaretk 1988</a>
</div>
<div>
<input type="radio" id="sundmus" name="sundmuseValik" value="laulupidu">
<a href="https://et.wikipedia.org/wiki/%C3%96%C3%B6laulupidu" target="_blank">Öölaulupidu 1988</a>
</div>
<div>
<input type="radio" id="sundmus" name="sundmuseValik" value="baltikett">
<a href="https://et.wikipedia.org/wiki/Balti_kett" target="_blank">Balti kett 1989</a>
</div>
<div>
<input type="radio" id="sundmus" name="sundmuseValik" value="teletorn">
<a href="https://et.wikipedia.org/wiki/Augustiput%C5%A1_Eestis" target="_blank">Teletorni kaitsmine 1991</a>
</div>
</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>