<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pood</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>Pood</h1>
<p>
Vali kataloogidest erineivaid tooteid, mida soovid osta
<br/>
ning arvuta ka nende kurss
</p>
<div class="text-center">
<div class="col">
<button class="moveOn" disabled>Liigu Edasi</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>
Lähen siin varsti Georg Otsaga Helsinki ostoksille. Uut kaupa oleks vaja.
Mul täie kuumaga äri käib praegu! Sirvisin veits uusi katalooge, ikka on
hea kaubal silm peal hoida. Äkki saate nats aidata mul plaani pidada,
mida oleks kõige kasulikum 12 000 rutsiga ära tuua? Kurss on praegu päris
ilus - 1 FIM= 7,356 rubla. Põhiline, et oleks palju erinevaid kaupu ja
kogu raha saaks ära kulutatud! Aga sellega vist problat ei tule.
Äkki tahate ise ka midagi, võin soodsalt tuua!
</p>
<br/>
<strong>
Selleks lappa katalooge, vali omale sobiv nodi välja ja pane
tabelisse - mida, kui palju, mis rahaga siin ja sealpool lahte arvestama peab.
Ole hea, vali erinevat kraami - ega ma kohalik kaubamaja ole,
et kümmet ühesugust kitlit müüma hakkan! Ole nüüd!
</strong>
</div>
</div>
</div>
</div>
<!-- Main Stuff -->
<div class="main">
<h3>Sirvi ajakirja</h3>
<div class="ajakiriWrapper">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="tab1" data-bs-toggle="tab" data-bs-target="#tab-pane1" type="button" role="tab" aria-controls="tab-pane1" aria-selected="true">1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab2" data-bs-toggle="tab" data-bs-target="#tab-pane2" type="button" role="tab" aria-controls="tab-pane2" aria-selected="false">2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab3" data-bs-toggle="tab" data-bs-target="#tab-pane3" type="button" role="tab" aria-controls="tab-pane3" aria-selected="false">3</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab4" data-bs-toggle="tab" data-bs-target="#tab-pane4" type="button" role="tab" aria-controls="tab-pane4" aria-selected="false" >4</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab5" data-bs-toggle="tab" data-bs-target="#tab-pane5" type="button" role="tab" aria-controls="tab-pane5" aria-selected="false" >5</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab6" data-bs-toggle="tab" data-bs-target="#tab-pane6" type="button" role="tab" aria-controls="tab-pane6" aria-selected="false" >6</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab7" data-bs-toggle="tab" data-bs-target="#tab-pane7" type="button" role="tab" aria-controls="tab-pane7" aria-selected="false" >7</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab8" data-bs-toggle="tab" data-bs-target="#tab-pane8" type="button" role="tab" aria-controls="tab-pane8" aria-selected="false" >8</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab9" data-bs-toggle="tab" data-bs-target="#tab-pane9" type="button" role="tab" aria-controls="tab-pane9" aria-selected="false" >9</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab10" data-bs-toggle="tab" data-bs-target="#tab-pane10" type="button" role="tab" aria-controls="tab-pane10" aria-selected="false" >10</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab11" data-bs-toggle="tab" data-bs-target="#tab-pane11" type="button" role="tab" aria-controls="tab-pane11" aria-selected="false" >11</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="tab-pane1" role="tabpanel" aria-labelledby="tab1" tabindex="0">
<img alt="Ajakirja lehekülg" src="pildid/1.jpg"/>
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel" aria-labelledby="2-tab" tabindex="0">
<img alt="Ajakirja lehekülg" src="pildid/2.jpg"/>
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel" aria-labelledby="3-tab" tabindex="0">
<img alt="Ajakirja lehekülg" src="pildid/3.jpg"/>
</div>
<div class="tab-pane fade" id="tab-pane4" role="tabpanel" aria-labelledby="4-tab" tabindex="0">
<img alt="Ajakirja lehekülg" src="pildid/4.jpg"/>
</div>
<div class="tab-pane fade" id="tab-pane5" role="tabpanel" aria-labelledby="5-tab" tabindex="0">
<img alt="Ajakirja lehekülg" src="pildid/5.jpg"/>
</div>
<div class="tab-pane fade" id="tab-pane6" role="tabpanel" aria-labelledby="6-tab" tabindex="0">
<img alt="Ajakirja lehekülg" src="pildid/6.jpg"/>
</div>
<div class="tab-pane fade" id="tab-pane7" role="tabpanel" aria-labelledby="7-tab" tabindex="0">
<img alt="Ajakirja lehekülg" src="pildid/7.jpg"/>
</div>
<div class="tab-pane fade" id="tab-pane8" role="tabpanel" aria-labelledby="8-tab" tabindex="0">
<img alt="Ajakirja lehekülg" src="pildid/8.jpg"/>
</div>
<div class="tab-pane fade" id="tab-pane9" role="tabpanel" aria-labelledby="9-tab" tabindex="0">
<img alt="Ajakirja lehekülg" src="pildid/9.jpg"/>
</div>
<div class="tab-pane fade" id="tab-pane10" role="tabpanel" aria-labelledby="10-tab" tabindex="0">
<img alt="Ajakirja lehekülg" src="pildid/10.jpg"/>
</div>
<div class="tab-pane fade" id="tab-pane11" role="tabpanel" aria-labelledby="11-tab" tabindex="0">
<img alt="Ajakirja lehekülg" src="pildid/11.jpg"/>
</div>
</div>
</div>
<!-- Ajakirja Wrapper End -->
<!-- Tabel -->
<h3>Ostunimekiri</h3>
<div class="tabelWrapper">
<table class="table table-dark table-striped">
<tr>
<th><strong>Toode</strong></th>
<th><strong>Hind(FIM)</strong></th>
<th><strong>Hind(Rubla)</strong></th>
<th><strong>Tükki</strong></th>
<th><strong>Summa(Rubla)</strong></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<!-- Tabeli lõpp -->
</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>