<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ristsõna</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>Ristsõna</h1>
<p>Lahenda ristsõna. Lahenduseks on kuulus
Eesti roog, mille retsepti jaoks vajalikud
koostiosad ongi vaja leida.
</p>
<div class="text-center">
<div class="col">
<button class="moveOn" disabled>Liigu Edasi</button>
</div>
<div class="text-center inputBox">
<label for="quantity">Nr:</label>
<input type="number" id="inputNr" name="number" min="1" max="12">
<input type="text" placeholder="Vastus " id="inputId">
<button type="button" class="subBtn subDisabled" onclick="getInputValue();">Proovi</button>
<div class="messageBox">
siia tekib info
</div>
</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">
Täna õhtul tulevad meile külalised - kolm töökaaslast abikaasadega. <br/>
Katan elutuppa linaga laua, nii saan oma uut kohviserviisi ning kristallkausse näidata! <br/>
Pakun neile suitsuvorsti ja juustuga võileibu, millele lõikan kenad tomatiroosid. Kindlasti täidetud mune, marineeritud tomateid ja seeni. <br/>
Magusaks küpsetan purukooki mustsõstramoosiga, muidugi pakun juurde ka kohvi. <br/>
<br/>
Ja muidugi ei puudu korralikult pidulaualt kartulisalat! Mul õnnestus täna poest kõik tarvilik hankida! <br/>
<strong>Pärast ristsõna lahendamist oskad sinagi salatit teha!</strong>
</div>
</div>
</div>
</div>
<!-- Crossword -->
<div class="main">
<div class="left text-center text-white">
<ol>
<li>
Köögivili, mida kasvatatakse nii kasvuhoones kui avamaal. Selles toidus kasutatakse nii
värskelt, marineeritult kui hapendatult.
</li>
<li>
Valmistatakse õlist, munakollasest ja äädikast (või sidrunimahlast).
</li>
<li>
Piklik oranžikas juurvili, mis sisaldab rikkalikult beeta-karoteeni.
</li>
<li>
Lihatoode, maitseb hästi võileival.
</li>
<li>
Puuvili, mis sai Lumivalgukesele saatuslikuks.
</li>
<li>
Sellel maitseainele olevat ehitatud keskaegne Tallinn.
</li>
</ol>
</div>
<table class="text-center text-white">
<!-- Essa Rida-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>8.</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>4.</td>
<td></td>
<td></td>
<td></td>
<td class="hernes"><span>H</span></td>
<td></td>
<td>10.</td>
<td></td>
<td></td>
</tr>
<!-- Teine Rida-->
<tr>
<td></td>
<td>1.</td>
<td></td>
<td></td>
<td class="vorst"><span>V</span></td>
<td></td>
<td>6.</td>
<td></td>
<td class="hernes"><span>E</span></td>
<td>9.</td>
<td class="sibul"><span>S</span></td>
<td></td>
<td>12.</td>
</tr>
<!-- Kolmas Rida-->
<tr>
<td></td>
<td class="kurk"><span>K</span></td>
<td></td>
<td>3.</td>
<td class="vorst"><span>O</span></td>
<td></td>
<td class="sool"><span>S</span></td>
<td></td>
<td class="hernes"><span>R</span></td>
<td class="muna"><span>M</span></td>
<td class="sibul"><span>I</span></td>
<td></td>
<td class="kartul"><span>K</span></td>
</tr>
<!-- Neljas Rida-->
<tr>
<td></td>
<td class="kurk"><span>U</span></td>
<td>2.</td>
<td class="porgand"><span>P</span></td>
<td class="vorst"><span>R</span></td>
<td>5.</td>
<td class="sool"><span>O</span></td>
<td>7.</td>
<td class="hernes"><span>N</span></td>
<td class="muna"><span>U</span></td>
<td class="sibul"><span>B</span></td>
<td>11.</td>
<td class="kartul"><span>A</span></td>
</tr>
<!-- Viies Rida-->
<tr>
<td></td>
<td class="kurk"><span>R</span></td>
<td class="majonees"><span>M</span></td>
<td class="porgand"><span>O</span></td>
<td class="vorst"><span>S</span></td>
<td class="õun"><span>Õ</span></td>
<td class="sool"><span>O</span></td>
<td class="pipar"><span>P</span></td>
<td class="hernes"><span>E</span></td>
<td class="muna"><span>N</span></td>
<td class="sibul"><span>U</span></td>
<td class="hapukoor"><span>H</span></td>
<td class="kartul"><span>R</span></td>
</tr>
<!-- Kuues Rida-->
<tr class="vastus">
<td>→</span></td>
<td class="kurk"><span>K</span></td>
<td class="majonees"><span>A</span></td>
<td class="porgand"><span>R</span></td>
<td class="vorst"><span>T</span></td>
<td class="õun"><span>U</span></td>
<td class="sool"><span>L</span></td>
<td class="pipar"><span>I</span></td>
<td class="hernes"><span>S</span></td>
<td class="muna"><span>A</span></td>
<td class="sibul"><span>L</span></td>
<td class="hapukoor"><span>A</span></td>
<td class="kartul"><span>T</span></td>
</tr>
<!-- Seitsmes Rida-->
<tr>
<td></td>
<td></td>
<td class="majonees"><span>J</span></td>
<td class="porgand"><span>G</span></td>
<td></td>
<td class="õun"><span>N</span></td>
<td></td>
<td class="pipar"><span>P</span></td>
<td></td>
<td></td>
<td></td>
<td class="hapukoor"><span>P</span></td>
<td class="kartul"><span>U</span></td>
</tr>
<!-- Kaheksas Rida-->
<tr>
<td></td>
<td></td>
<td class="majonees"><span>O</span></td>
<td class="porgand"><span>A</span></td>
<td></td>
<td></td>
<td></td>
<td class="pipar"><span>A</span></td>
<td></td>
<td></td>
<td></td>
<td class="hapukoor"><span>U</span></td>
<td class="kartul"><span>L</span></td>
</tr>
<!-- Üheksas Rida-->
<tr>
<td></td>
<td></td>
<td class="majonees"><span>N</span></td>
<td class="porgand"><span>N</span></td>
<td></td>
<td></td>
<td></td>
<td class="pipar"><span>R</span></td>
<td></td>
<td></td>
<td></td>
<td class="hapukoor"><span>K</span></td>
<td></td>
</tr>
<!-- Kümnes Rida-->
<tr>
<td></td>
<td></td>
<td class="majonees"><span>E</span></td>
<td class="porgand"><span>D</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="hapukoor"><span>O</span></td>
<td></td>
</tr>
<!-- 11 Rida-->
<tr>
<td></td>
<td></td>
<td class="majonees"><span>E</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="hapukoor"><span>O</span></td>
<td></td>
</tr>
<!-- 12 Rida-->
<tr>
<td></td>
<td></td>
<td class="majonees"><span>S</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="hapukoor"><span>R</span></td>
<td></td>
</tr>
</table>
<div class="right text-white">
<ol start="7">
<li>
Kõige tuntum vürts.
</li>
<li>
Seitse poissi ühes kindas? Eesti mõistatus
</li>
<li>
Kas enne oli kana või see toiduaine?
</li>
<li>
Siiruviiruline köögivili, mis paneb nutma.
</li>
<li>
Hapendatud piimatoode, mida eestlased armastavad süüa iga roaga.
</li>
<li>
Köögivili, mille Kolumbus Ameerikast Euroopasse tõi.
</li>
</ol>
</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>