<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Plakatid</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="styles.css">
</head>
<body class="text-white">
<div class="container text-center text-white align-items-center pb-5">
<h1>Plakatid</h1>
<p>
Plakati kujundamiseks määra esmalt õige ajastu ning seejärel kirjuta uus loosung
</p>
<div class="row">
<div>
<button class="moveOn" disabled>Liigu Edasi</button>
<!-- Button trigger modal -->
<button 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="img/avatar.png"/>
</div>
<div class="modal-body">
Peale ajalehe väljalõigete olen aastate jooksul kogunud ja säilitanud meeleolukaid plakateid nõukogude aja kuldsest elust.
<br/>
Jagan siinkohal teiega, seltsimehed noored, nelja nendest. Plakatid on pärit erinevatest aastakümnetest: <br/>1950., 1960., 1970. ja 1980. aastad.
<br/>
<br/>
Palun uurige nende plakatite sisu ja vormi.
<br/>
Õppige, õppige, õppige! Kas tajute, millisesse kümnendisse iga plakat kuulub?
<br/> <br/>
<strong>
Mõetle igale plakatitele välja uus, kaasaega sobiv loosungi tekst!
</strong>
</div>
</div>
</div>
</div>
<div class="main">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-70ndad-tab" data-bs-toggle="tab" data-bs-target="#nav-70ndad" type="button" role="tab" aria-controls="nav-70ndad" aria-selected="true">
1
</button>
<button class="nav-link" id="nav-90ndad-tab" data-bs-toggle="tab" data-bs-target="#nav-90ndad" type="button" role="tab" aria-controls="nav-90ndad" aria-selected="false">
2
</button>
<button class="nav-link" id="nav-60ndad-tab" data-bs-toggle="tab" data-bs-target="#nav-60ndad" type="button" role="tab" aria-controls="nav-60ndad" aria-selected="false">
3
</button>
<button class="nav-link" id="nav-80ndad-tab" data-bs-toggle="tab" data-bs-target="#nav-80ndad" type="button" role="tab" aria-controls="nav-80ndad" aria-selected="false">
4
</button>
</div>
</nav>
<!-- Containers -->
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active p-3 p-3 text-white" id="nav-70ndad" role="tabpanel" aria-labelledby="nav-70ndad-tab">
<div class="wrapper">
<div class="plakatWrapper veekogud"></div>
<div id="veekogud" class="inputWrapper">
<select id="veekogud" class="60">
<option disabled hidden selected>Vali</option>
<option value="50">1950ndad</option>
<option value="60">1960ndad</option>
<option value="70">1970ndad</option>
<option value="80">1980ndad</option>
</select>
<strong><label for="veekogud">Lisa Tekst</label></strong>
<input disabled name="veekogud" type="text" value=""/>
<button disabled class="muuda">Lisa</button>
<div>
<button disabled class="ules">↑</button>
<button disabled class="alla">↓</button>
<button disabled class="vasak">←</button>
<button disabled class="parem">→</button>
<button disabled class="pluss">+</button>
<button disabled class="miinus">-</button>
</div>
<label for="color">Värv:</label>
<input disabled size="1" type="color" id="color" value="#ffffff"/>
<button disabled class="reset">Taasta</button>
</div>
</div>
</div>
<div class="tab-pane fade p-3 text-white" id="nav-80ndad" role="tabpanel" aria-labelledby="nav-80ndad-tab">
<div class="wrapper">
<div class="plakatWrapper malev pikkPlakat"></div>
<div id="malev" class="inputWrapper">
<select id="malev" class="70">
<option disabled hidden selected>Vali</option>
<option value="50">1950ndad</option>
<option value="60">1960ndad</option>
<option value="70">1970ndad</option>
<option value="80">1980ndad</option>
</select>
<strong><label for="malev">Lisa Tekst</label></strong>
<input disabled name="malev" type="text" value=""/>
<button disabled class="muuda">Lisa</button>
<div>
<button disabled class="ules">↑</button>
<button disabled class="alla">↓</button>
<button disabled class="vasak">←</button>
<button disabled class="parem">→</button>
<button disabled class="pluss">+</button>
<button disabled class="miinus">-</button>
</div>
<label for="color">Värv:</label>
<input disabled size="1" type="color" id="color" value="#ffffff"/>
<button disabled class="reset">Taasta</button>
</div>
</div>
</div>
<div class="tab-pane fade text-white" id="nav-60ndad" role="tabpanel" aria-labelledby="nav-60ndad-tab">
<div class="wrapper">
<div class="plakatWrapper stalin"></div>
<div id="stalin" class="inputWrapper">
<select id="stalin" class="50">
<option disabled hidden selected>Vali</option>
<option value="50">1950ndad</option>
<option value="60">1960ndad</option>
<option value="70">1970ndad</option>
<option value="80">1980ndad</option>
</select>
<strong><label for="stalin">Lisa Tekst</label></strong>
<input disabled name="stalin" type="text" value=""/>
<button disabled class="muuda">Lisa</button>
<div>
<button disabled class="ules">↑</button>
<button disabled class="alla">↓</button>
<button disabled class="vasak">←</button>
<button disabled class="parem">→</button>
<button disabled class="pluss">+</button>
<button disabled class="miinus">-</button>
</div>
<label for="color">Värv:</label>
<input disabled size="1" type="color" id="color" value="#ffffff"/>
<button disabled class="reset">Taasta</button>
</div>
</div>
</div>
<div class="tab-pane fade p-3 text-white" id="nav-90ndad" role="tabpanel" aria-labelledby="nav-90ndad-tab">
<div class="wrapper">
<div class="plakatWrapper viisAastak pikkPlakat"></div>
<div id="viisAastak" class="inputWrapper">
<select id="viisAastak" class="80">
<option disabled hidden selected>Vali</option>
<option value="50">1950ndad</option>
<option value="60">1960ndad</option>
<option value="70">1970ndad</option>
<option value="80">1980ndad</option>
</select>
<strong><label for="viisAastak">Lisa Tekst</label></strong>
<input disabled name="viisAastak" type="text" value=""/>
<button disabled class="muuda">Lisa</button>
<div>
<button disabled class="ules">↑</button>
<button disabled class="alla">↓</button>
<button disabled class="vasak">←</button>
<button disabled class="parem">→</button>
<button disabled class="pluss">+</button>
<button disabled class="miinus">-</button>
</div>
<label for="color">Värv:</label>
<input disabled size="1" type="color" id="color" value="#ffffff"/>
<button disabled class="reset">Taasta</button>
</div>
</div>
</div>
</div>
</div>
<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>