diff options
Diffstat (limited to 'rannak/mangud/partorg/plakat/index.html')
| -rw-r--r-- | rannak/mangud/partorg/plakat/index.html | 270 |
1 files changed, 203 insertions, 67 deletions
diff --git a/rannak/mangud/partorg/plakat/index.html b/rannak/mangud/partorg/plakat/index.html index 9f1416b..e65040a 100644 --- a/rannak/mangud/partorg/plakat/index.html +++ b/rannak/mangud/partorg/plakat/index.html @@ -2,81 +2,38 @@ <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Plakat</title> + <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="style.css"> + <link rel="stylesheet" href="styles.css"> </head> -<body> - <section class="wrapper"> - <div id="toolbar"> +<body class="text-white"> - <div class="intro"> - <h1>Kujunda Plakatit</h1> - <p>Vali välja üks plakat ja muuda/lisa selle kujundust vastavalt enda äranägemisele.</p> - <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> - - <button id="clear">Puhasta</button> - </div> - - <div class="inputs"> - <form> - <p class="toolbarDiv"> - <label for="stroke">Värv</label> - <input id="stroke" name='stroke' type="color"> - </p> - - <p class="toolbarDiv"> - <label for="lineWidth">Joone Paksus</label> - <input id="lineWidth" name='lineWidth' type="number" value="5" maxlength="1"> - </p> - - <!-- - <button id="clear">Puhasta</button> - --> - </form> - </div> - - - - <!-- Image Pick--> - <h2 class="ValiTxt"> Vali Plakat </h2> - <div class="pickingSec"> - <img id="stalin" class="pickImg picked" alt="Jossup Saloninjo Plakat" src="img/stalin.jpg"/> - <img id="veekogud" class="pickImg" alt="Veekogude Plakat" src="img/veekogud.jpg"/> - </div> + <div class="container text-center text-white align-items-center pb-5"> + <h1>Plakatid</h1> + <p>Leia iga plakati õige ajastu, ning muuda ka plakati teksti. + <br/> + Kui oled valinud õige ajastu ja muutunud plakati lause, muutub see roheliseks, + näitamaks, et sellega on kõik korras. + </p> + <div class="row"> + <div> + <button class="moveOn" disabled>Liigu Edasi</button> + </div> - <!-- Add-Ons Pick--> - <h2 class="ValiTxt"> Vali Lisasid </h2> - <div class="pickingSec"> - <img id="redStar" class="pickImg" alt="red star" src="img/redStar.png"/> - <img id="lenin" class="pickImg" alt="lenin" src="img/lenin.png"/> - <img id="nazi" class="pickImg" alt="Nazi Flag" src="img/nazi.png"/> - <img id="stalinAddOn" class="pickImg" alt="Stalin" src="img/stalinAddOn.png"/> - </div> - - </div> - - - - - <div class="canvasWrap"> - <canvas id="drawing-board"></canvas> - </div> - + </div> - </section> + <!-- Button trigger modal --> + <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal"> + Sissejuhatus + </button> + </div> <!-- Modal --> @@ -92,7 +49,6 @@ </div> <div class="modal-body"> - Peale ajalehe väljalõigete olen aastate jooksul kogunud ja säilitanud meeleolukaid plakateid nõukogudeaja kuldsest elust. <br/> Jagan siinkohal teiega, seltsimehed noored, nelja nendest. Plakatid on pärit erinevatest aastakümnetest: <br/>1950ndad, 1960ndad, 1970ndad ja 1980ndad aastad. @@ -105,7 +61,6 @@ <strong> Mõelge plakatitele välja uus, kaasaega sobiv lööklause. Samuti kaunistage ja täiendage plakatit kaasaegsete kunsiliste detailidega. Ka huumor on lubatud! </strong> - </div> </div> @@ -115,7 +70,188 @@ - <script src="./main.js"></script> + + <div class="main"> + <nav> + <div class="nav nav-tabs" id="nav-tab" role="tablist"> + + <button class="nav-link active" id="nav-60ndad-tab" data-bs-toggle="tab" data-bs-target="#nav-60ndad" type="button" role="tab" aria-controls="nav-60ndad" aria-selected="true"> + Stalin + </button> + + <button class="nav-link" id="nav-70ndad-tab" data-bs-toggle="tab" data-bs-target="#nav-70ndad" type="button" role="tab" aria-controls="nav-70ndad" aria-selected="false"> + Veekogud + </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"> + Viisaastak + </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"> + Malev + </button> + + + </div> + </nav> + + <div class="tab-content" id="nav-tabContent"> + + + + <div class="tab-pane fade show active p-3 text-white" id="nav-60ndad" role="tabpanel" aria-labelledby="nav-60ndad-tab"> + <div class="wrapper"> + + <div class="plakatWrapper stalin"> + <span class="addedText">Testing Testing</span> + </div> + + <div class="innerWrapper"> + + <select> + <option disabled hidden selected>Vali</option> + <option value="1950ndad">1950ndad</option> + <option value="1960ndad">1960ndad</option> + <option value="1960ndad">1970ndad</option> + <option value="1970ndad">1980ndad</option> + </select> + + <strong><label for="stalin">Lisa Tekst</label></strong> + <input name="stalin" type="text" value=""/> + <button class="muuda">Muuda</button> + + <div> + <button class="ules">↑</button> + <button class="alla">↓</button> + <button class="vasak">←</button> + <button class="parem">→</button> + </div> + + </div> + + </div> + </div> + + + + <div class="tab-pane fade p-3 text-white" id="nav-70ndad" role="tabpanel" aria-labelledby="nav-70ndad-tab"> + <div class="wrapper"> + + <div class="plakatWrapper veekogud"> + <span class="addedText">Veekogud</span> + </div> + + <div class="innerWrapper"> + <select> + <option disabled hidden selected>Vali</option> + <option value="1950ndad">1950ndad</option> + <option value="1960ndad">1960ndad</option> + <option value="1960ndad">1970ndad</option> + <option value="1970ndad">1980ndad</option> + </select> + + <strong><label for="veekogud">Lisa Tekst</label></strong> + <input name="veekogud" type="text" value=""/> + <button class="muuda" >Muuda</button> + + <div> + <button class="ules">↑</button> + <button class="alla">↓</button> + <button class="vasak">←</button> + <button class="parem">→</button> + </div> + + </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"> + <span class="addedText">Malev</span> + </div> + + <div class="innerWrapper"> + <select> + <option disabled hidden selected>Vali</option> + <option value="1950ndad">1950ndad</option> + <option value="1960ndad">1960ndad</option> + <option value="1960ndad">1970ndad</option> + <option value="1970ndad">1980ndad</option> + </select> + + <strong><label for="malev">Lisa Tekst</label></strong> + <input name="malev" type="text" value=""/> + <button class="muuda">Muuda</button> + + <div> + <button class="ules">↑</button> + <button class="alla">↓</button> + <button class="vasak">←</button> + <button class="parem">→</button> + </div> + + + </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"> + <span class="addedText">ViisAastak</span> + </div> + + <div class="innerWrapper"> + <select> + <option disabled hidden selected>Vali</option> + <option value="1950ndad">1950ndad</option> + <option value="1960ndad">1960ndad</option> + <option value="1960ndad">1970ndad</option> + <option value="1970ndad">1980ndad</option> + </select> + + <strong><label for="viisAastak">Lisa Tekst</label></strong> + <input name="viisAastak" type="text" value=""/> + <button class="muuda" >Muuda</button> + + <div> + <button class="ules">↑</button> + <button class="alla">↓</button> + <button class="vasak">←</button> + <button class="parem">→</button> + </div> + + + </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> |