<html lang"ee">
<head>
<title>Särgi Kujundus</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="text-white">
<div class="containeraa">
<!-- Tshirt SVG -->
<svg viewBox="0 0 512 512">
<g transform="translate(0,448)">
<path id="sark" d="m114.43-400.52-98.703 78.981 66.018 88.962 30.599-23.608v272.7h288.51v-272.7l29.397 23.608 66.026-88.282-95.992-76.942-74.453-0.70374c-0.58384 37.58-35.742 54.937-68.92 67.881-32.896-13.591-68.984-30.886-68.984-68.969 0.00036-0.0748-0.00033-0.14911 0-0.22393z" />
<text class="sarkTekst doneTekst" x="200" y="-200" transform="rotate(0)" >Tekst</text>
</g>
</svg>
<!-- Modal -->
<div class="modal fade" 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">
1987. aastal kursakaaslastega rattaretkele “Kuidas elad, Virumaa?” minnes, tegime omale kollased <a target="#" href="https://www.muis.ee/museaalview/524370">särgid</a> sõnumiga “Fosforiit? Tänan, ei!”.
<br/>
Et sõnum oleks selge ja nähtav - me oleme fosforiidikaevanduse vastu!
<br/>
Järgmisel aastal Uderna arheoloogilistel väljakaevamistel anti meile ristkülikukujulised kangatükid, <a target="#" href="https://www.muis.ee/museaalview/3159061">mille</a> esiküljele oli trükitud sinimustvalge lipp ja keraamiline pott ja tagaküljele tekst “Uderna arheoloogiline ekspeditsioon”.
<br/>
See tähendas, et ajame ka välitöödel eesti asja! Sellest kangast tuli siis ise särk õmmelda, nii et lõikelt kujunesid need üsna erinevateks.
<br/>
Kandsin särki ka hiljem uhkusega mitmesugustel üritustel, tundsin end vaprana ja repressioone ei kartnud.
<br/> <br/>
<strong>Milline laulva revolutsiooni sündmustest sulle kõige tähelepanuväärsem tundub? Kujunda meelsuse väljendamiseks omale T-särk, mõtle välja loosung ja kujundus.</strong>
</div>
</div>
</div>
</div>
<!-- Side panel stuff-->
<div class="side">
<h1>T-särgi Kujundamine</h1>
<p>
Kujunda enda T-särk. Edasi liikumiseks peab olema
kasutatud kõik kujundamise võimalused. Kui arvad, et särk on valmis,
siis kontorlli nupuga, kas särk on valmis".
</p>
<div>
<button class="checkMoveOn">Kontrolli, kas särk valmis</button>
<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 class="messageBox">
</div>
</div>
<div class="muutused">
<div class="sargiVarv">
<h4>Vali Värv</h4>
<label for="colorFiller">Särgi värv:</label>
<input id="colorFiller"type="color" value="#ffffff"/>
<label for="colorStroke">Särgi äär:</label>
<input id="colorStroke" type="color" value="#000000"/>
</div>
<div class="fileUpload">
<h4>Lisa Pilt</h4>
<label for="image_input">Vali Pilt:</label>
<input type="file" id="image_input" accept="image/jpg, image/png"/>
</div>
<div class="textPos">
<h4>Tekst</h4>
<label for="sargiText">Vali tekst:</label>
<input id="sargiText" type="text" placeholder="Sinu tekst siia"/>
<!--
<button id="tekstBtn" onclick="getInputValue();">Muuda Teksti</button>
-->
<button id="nextTekstBtn" onclick="nextText();">Veel üks Tekst</button>
<div class="textAddWrapper">
<button class="ules">↑</button>
<button class="alla">↓</button>
<button class="vasak">←</button>
<button class="parem">→</button>
<button class="vertVasak">↶</button>
<button class="vertParem">↷</button>
<button class="plus">+</button>
<button class="minus">−</button>
<input id="colorText" type="color" value="#000000"/>
</div>
</div> <!-- TextPos End -->
<div>
<label for="nulliBtn">Nulli Särk:</label>
<button class="nulliBtn">Nulli särk</button>
</div>
</div>
</div>
<!-- Resizable Img -->
<div class="item">
<div class="resizer ne"></div>
<div class="resizer nw"></div>
<div class="resizer se"></div>
<div class="resizer sw"></div>
</div>
</div>
<script src="main.js"></script>
<!-- -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>