diff options
66 files changed, 1473 insertions, 80 deletions
diff --git a/rannak/mangud/arimees/hinnad/fonts/1001fonts-eutemia-i-eula.txt b/rannak/mangud/arimees/pood.bak/fonts/1001fonts-eutemia-i-eula.txt index b3cf91f..b3cf91f 100644 --- a/rannak/mangud/arimees/hinnad/fonts/1001fonts-eutemia-i-eula.txt +++ b/rannak/mangud/arimees/pood.bak/fonts/1001fonts-eutemia-i-eula.txt diff --git a/rannak/mangud/arimees/hinnad/fonts/Eutemia.ttf b/rannak/mangud/arimees/pood.bak/fonts/Eutemia.ttf Binary files differindex c575e59..c575e59 100644 --- a/rannak/mangud/arimees/hinnad/fonts/Eutemia.ttf +++ b/rannak/mangud/arimees/pood.bak/fonts/Eutemia.ttf diff --git a/rannak/mangud/arimees/hinnad/index.html b/rannak/mangud/arimees/pood.bak/index.html index 5b01902..5b01902 100644 --- a/rannak/mangud/arimees/hinnad/index.html +++ b/rannak/mangud/arimees/pood.bak/index.html diff --git a/rannak/mangud/arimees/hinnad/pildid/avatar.png b/rannak/mangud/arimees/pood.bak/pildid/avatar.png Binary files differindex 3cb21cf..3cb21cf 100644 --- a/rannak/mangud/arimees/hinnad/pildid/avatar.png +++ b/rannak/mangud/arimees/pood.bak/pildid/avatar.png diff --git a/rannak/mangud/arimees/hinnad/pildid/kingad.png b/rannak/mangud/arimees/pood.bak/pildid/kingad.png Binary files differindex ef106ae..ef106ae 100644 --- a/rannak/mangud/arimees/hinnad/pildid/kingad.png +++ b/rannak/mangud/arimees/pood.bak/pildid/kingad.png diff --git a/rannak/mangud/arimees/hinnad/pildid/kohver.png b/rannak/mangud/arimees/pood.bak/pildid/kohver.png Binary files differindex 485b6db..485b6db 100644 --- a/rannak/mangud/arimees/hinnad/pildid/kohver.png +++ b/rannak/mangud/arimees/pood.bak/pildid/kohver.png diff --git a/rannak/mangud/arimees/hinnad/pildid/kupsis.png b/rannak/mangud/arimees/pood.bak/pildid/kupsis.png Binary files differindex 2419f89..2419f89 100644 --- a/rannak/mangud/arimees/hinnad/pildid/kupsis.png +++ b/rannak/mangud/arimees/pood.bak/pildid/kupsis.png diff --git a/rannak/mangud/arimees/hinnad/pildid/laud.png b/rannak/mangud/arimees/pood.bak/pildid/laud.png Binary files differindex e3036dc..e3036dc 100644 --- a/rannak/mangud/arimees/hinnad/pildid/laud.png +++ b/rannak/mangud/arimees/pood.bak/pildid/laud.png diff --git a/rannak/mangud/arimees/hinnad/pildid/sai.png b/rannak/mangud/arimees/pood.bak/pildid/sai.png Binary files differindex 8add13c..8add13c 100644 --- a/rannak/mangud/arimees/hinnad/pildid/sai.png +++ b/rannak/mangud/arimees/pood.bak/pildid/sai.png diff --git a/rannak/mangud/arimees/hinnad/pildid/tugitool.png b/rannak/mangud/arimees/pood.bak/pildid/tugitool.png Binary files differindex c48bd50..c48bd50 100644 --- a/rannak/mangud/arimees/hinnad/pildid/tugitool.png +++ b/rannak/mangud/arimees/pood.bak/pildid/tugitool.png diff --git a/rannak/mangud/arimees/hinnad/script.js b/rannak/mangud/arimees/pood.bak/script.js index 3b3e67b..3b3e67b 100644 --- a/rannak/mangud/arimees/hinnad/script.js +++ b/rannak/mangud/arimees/pood.bak/script.js diff --git a/rannak/mangud/arimees/hinnad/styles.css b/rannak/mangud/arimees/pood.bak/styles.css index 5e02923..58bc290 100644 --- a/rannak/mangud/arimees/hinnad/styles.css +++ b/rannak/mangud/arimees/pood.bak/styles.css @@ -1,15 +1,7 @@ -@font-face { - font-family: 'fontDos'; - src: local('fonts/Eutemia.ttf'); -} - - - * {box-sizing: border-box;} body{ - background-color: #4D5157; - font-family: "fontDos" + background-color: #43464b; } h1{ color: #2FF924; diff --git a/rannak/mangud/arimees/pood/fonts/1001fonts-eutemia-i-eula.txt b/rannak/mangud/arimees/pood/fonts/1001fonts-eutemia-i-eula.txt new file mode 100644 index 0000000..b3cf91f --- /dev/null +++ b/rannak/mangud/arimees/pood/fonts/1001fonts-eutemia-i-eula.txt @@ -0,0 +1,31 @@ +1001Fonts Free For Commercial Use License (FFC) + +Preamble
+In this license, 'Eutemia I' refers to the given .zip file, which may contain one or numerous fonts. These fonts can be of any type (.ttf, .otf, ...) and together they form a 'font family' or in short a 'typeface'.
+
+1. Copyright
+Eutemia I is the intellectual property of its respective author, provided it is original, and is protected by copyright laws in many parts of the world.
+
+2. Usage
+Eutemia I may be downloaded and used free of charge for both personal and commercial use. Personal use refers to all usage that does not generate financial income in a business manner, for instance:
+
+ - personal scrapbooking for yourself
+ - recreational websites and blogs for friends and family
+ - prints such as flyers, posters, t-shirts for churches, charities, and non-profit organizations
+
+Commercial use refers to usage in a business environment, including:
+
+ - business cards, logos, advertising, websites for companies
+ - t-shirts, books, apparel that will be sold for money
+ - flyers, posters for events that charge admission
+ - freelance graphic design work
+ - anything that will generate direct or indirect income
+
+3. Modification
+Eutemia I may not be modified, altered, adapted or built upon without written permission by its respective author. This pertains all files within the downloadable font zip-file.
+
+4. Distribution
+While Eutemia I may freely be copied and passed along to other individuals for private use as its original downloadable zip-file, it may not be sold or published without written permission by its respective author.
+
+5. Disclaimer
+Eutemia I is offered 'as is' without any warranty. 1001fonts.com and the respective author of Eutemia I shall not be liable for any damage derived from using this typeface. By using Eutemia I you agree to the terms of this license.
\ No newline at end of file diff --git a/rannak/mangud/arimees/pood/fonts/Eutemia.ttf b/rannak/mangud/arimees/pood/fonts/Eutemia.ttf Binary files differnew file mode 100644 index 0000000..c575e59 --- /dev/null +++ b/rannak/mangud/arimees/pood/fonts/Eutemia.ttf diff --git a/rannak/mangud/arimees/pood/index.html b/rannak/mangud/arimees/pood/index.html new file mode 100644 index 0000000..6c2f7b5 --- /dev/null +++ b/rannak/mangud/arimees/pood/index.html @@ -0,0 +1,62 @@ +<html lang="en"> +<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> 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="styles.css"> +</head> + +<body class="text-white"> + + <div class="container text-center text-white align-items-center pb-1"> + <h1 class="pb-1 pt-2"> Pood </h1> + <p> Leia toodete tolleaegne hind Eesti Markades, kasutades Rubla ja Marga vahelist kurssi.</p> + <div class="row"> + <div> + <button class="moveOn" disabled>Liigu Edasi</button> + </div> + + </div> + + <!-- Button trigger modal --> + <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal"> + Sissejuhatus + </button> + </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"> + Lähen siin varsti Georg Otsaga Helsinki ostoksille. + <br/> + <strong> + Äkki saate vähe aidata mul plaani pidada, mida kõige kasulikum oleks 10 000 rutsiga ära tuua? Äkki tahate ise ka midagi, võin soodsalt tuua! + </strong> + </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> diff --git a/rannak/mangud/arimees/pood/pildid/avatar.png b/rannak/mangud/arimees/pood/pildid/avatar.png Binary files differnew file mode 100644 index 0000000..3cb21cf --- /dev/null +++ b/rannak/mangud/arimees/pood/pildid/avatar.png diff --git a/rannak/mangud/arimees/pood/pildid/kingad.png b/rannak/mangud/arimees/pood/pildid/kingad.png Binary files differnew file mode 100644 index 0000000..ef106ae --- /dev/null +++ b/rannak/mangud/arimees/pood/pildid/kingad.png diff --git a/rannak/mangud/arimees/pood/pildid/kohver.png b/rannak/mangud/arimees/pood/pildid/kohver.png Binary files differnew file mode 100644 index 0000000..485b6db --- /dev/null +++ b/rannak/mangud/arimees/pood/pildid/kohver.png diff --git a/rannak/mangud/arimees/pood/pildid/kupsis.png b/rannak/mangud/arimees/pood/pildid/kupsis.png Binary files differnew file mode 100644 index 0000000..2419f89 --- /dev/null +++ b/rannak/mangud/arimees/pood/pildid/kupsis.png diff --git a/rannak/mangud/arimees/pood/pildid/laud.png b/rannak/mangud/arimees/pood/pildid/laud.png Binary files differnew file mode 100644 index 0000000..e3036dc --- /dev/null +++ b/rannak/mangud/arimees/pood/pildid/laud.png diff --git a/rannak/mangud/arimees/pood/pildid/sai.png b/rannak/mangud/arimees/pood/pildid/sai.png Binary files differnew file mode 100644 index 0000000..8add13c --- /dev/null +++ b/rannak/mangud/arimees/pood/pildid/sai.png diff --git a/rannak/mangud/arimees/pood/pildid/tugitool.png b/rannak/mangud/arimees/pood/pildid/tugitool.png Binary files differnew file mode 100644 index 0000000..c48bd50 --- /dev/null +++ b/rannak/mangud/arimees/pood/pildid/tugitool.png diff --git a/rannak/mangud/arimees/pood/script.js b/rannak/mangud/arimees/pood/script.js new file mode 100644 index 0000000..3b3e67b --- /dev/null +++ b/rannak/mangud/arimees/pood/script.js @@ -0,0 +1,69 @@ +document.addEventListener('DOMContentLoaded', () => { + let btn = document.querySelector('.modalButton'); + btn.click(); +}); + + + +const kurss = 15.6; +doneCounter = 0; + + +const kontrollBtns = document.querySelectorAll(".kontrolliKaarti"); +for (let nupp of kontrollBtns){ + nupp.addEventListener("click", (e) => { + let rublaHind = e.target.previousElementSibling.children[0].children[1].innerHTML; + let pakkumine = e.target.previousElementSibling.children[1].children[1].value; + + if (pakkumine*kurss == rublaHind){ + + //Change color + e.target.offsetParent.style.background = "#288654"; + e.target.previousElementSibling.children[0].style.borderRight = ".5rem solid #288654"; + e.target.previousElementSibling.children[1].style.borderLeft = ".5rem solid #288654"; + + //Change Element + + (e.target.previousElementSibling.children[1].children[1]).remove(); + const newEl = document.createElement("span"); + newEl.classList.add("symbol"); + newEl.innerHTML = pakkumine + " M"; + e.target.previousElementSibling.children[1].appendChild(newEl); + + e.target.remove(); + doneCounter++; + + + // InfoTxt + let infoTxt = document.querySelector(".infoTxt") + infoTxt.innerHTML = ""; + + if (doneCounter >= 6){ + enableAllGood(); + } + } + + + else{ + // Inputvalue Reset + e.target.previousElementSibling.children[1].children[1].value = ""; + + // InfoTxt + let infoTxt = document.querySelector(".infoTxt") + infoTxt.style.color = "red"; + infoTxt.innerHTML = "Proovi Uuesti!"; + + } + + + + }) +} + + + +function enableAllGood(){ + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = ""; +} diff --git a/rannak/mangud/arimees/pood/styles.css b/rannak/mangud/arimees/pood/styles.css new file mode 100644 index 0000000..58bc290 --- /dev/null +++ b/rannak/mangud/arimees/pood/styles.css @@ -0,0 +1,167 @@ +* {box-sizing: border-box;} + +body{ + background-color: #43464b; +} +h1{ + color: #2FF924; + font-weight: bold; +} + +/* Modal Stuff */ + +.avatar { + border-radius: 20px; + width: 100%; +} + +.modalHeaderWrapper{ + text-align: center; + margin: 0; + width: 100%; +} + +.closeModalButton { + border-radius: 50px; +} + +.modalButton{ + position: absolute; + top: 0; + right: 0; + padding: 6px; + padding: 9px 25px; + background-color: rgba(0,136,169,1); + border: none; + border-radius: 50px; + cursor: pointer; + transition: all 0.3 ease 0; + margin: 3%; + font-size: 1.2rem; +} + +.modalButton:hover{ + background-color: rgba(0,136,169,0.8); +} + +/* To unduck chrome modal pic size */ +.modal-header img { + max-width: 15rem; + height: auto; + padding: .3rem; +} + + + + + +/* Move On */ + +.moveOn{ + display: inline-block; + border: none; + padding: 6px 12px; + margin-botton: 0; + font-size: 1rem; + font-weight: normal; + text-align: center; + cursor: pointer; + border-radius: 4px; + background-color: #4BB543; + color: white; +} + +button:disabled{ + opacity: 0.5; + cursor: not-allowed; +} + + + +/* Pood Itself */ +.main { + padding: 1% 10%; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +h3, h5 { + text-align: center; +} + + + + + +/* PoeKaart */ + +.card { + margin: 2rem .5rem; + padding: .5rem; + width: calc(20% - 1rem); + color: black; + background-color: #D22730; +} + +.card img { + height: 57%; +} + + +.card-body{ + padding: 0; + margin: 0; +} +.cardInnerWrapper { + background-color: white; + display:flex; + paddig: 0; + margin: 0; +} + +.rublaHind, .symbol{ + font-size: 1.5rem; +} + +.uno { + width: 50%; + border-right: .5rem solid #D22730; +} + +.dos { + border-left: .5rem solid #D22730; + width: 50%; +} + +.dos input { + width: 80%; + margin-bottom: 1rem; +} + +.kontrolliKaarti{ + margin-top: 1rem; + display: inline-block; + border: none; + padding: 3px 6px; + margin-botton: 0; + font-size: 1.07rem; + font-weight: normal; + text-align: center; + cursor: pointer; + border-radius: 4px; + background-color: #006E33; + color: white; +} + + + + + +/* Media Querries*/ + +@media screen and (max-width: 1650px) { + .card{ + width: calc(25% - 1rem); + } +} diff --git a/rannak/mangud/arimees/soome/fonts/OFL.txt b/rannak/mangud/arimees/soome/fonts/OFL.txt new file mode 100644 index 0000000..cdb3773 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/rannak/mangud/arimees/soome/fonts/README.txt b/rannak/mangud/arimees/soome/fonts/README.txt new file mode 100644 index 0000000..c5792a2 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/README.txt @@ -0,0 +1,77 @@ +Rubik Variable Font +=================== + +This download contains Rubik as both variable fonts and static fonts. + +Rubik is a variable font with this axis: + wght + +This means all the styles are contained in these files: + Rubik-VariableFont_wght.ttf + Rubik-Italic-VariableFont_wght.ttf + +If your app fully supports variable fonts, you can now pick intermediate styles +that aren’t available as static fonts. Not all apps support variable fonts, and +in those cases you can use the static font files for Rubik: + static/Rubik-Light.ttf + static/Rubik-Regular.ttf + static/Rubik-Medium.ttf + static/Rubik-SemiBold.ttf + static/Rubik-Bold.ttf + static/Rubik-ExtraBold.ttf + static/Rubik-Black.ttf + static/Rubik-LightItalic.ttf + static/Rubik-Italic.ttf + static/Rubik-MediumItalic.ttf + static/Rubik-SemiBoldItalic.ttf + static/Rubik-BoldItalic.ttf + static/Rubik-ExtraBoldItalic.ttf + static/Rubik-BlackItalic.ttf + +Get started +----------- + +1. Install the font files you want to use + +2. Use your app's font picker to view the font family and all the +available styles + +Learn more about variable fonts +------------------------------- + + https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts + https://variablefonts.typenetwork.com + https://medium.com/variable-fonts + +In desktop apps + + https://theblog.adobe.com/can-variable-fonts-illustrator-cc + https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts + +Online + + https://developers.google.com/fonts/docs/getting_started + https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide + https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts + +Installing fonts + + MacOS: https://support.apple.com/en-us/HT201749 + Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux + Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows + +Android Apps + + https://developers.google.com/fonts/docs/android + https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts + +License +------- +Please read the full license text (OFL.txt) to understand the permissions, +restrictions and requirements for usage, redistribution, and modification. + +You can use them in your products & projects – print or digital, +commercial or otherwise. + +This isn't legal advice, please consider consulting a lawyer and see the full +license for all details. diff --git a/rannak/mangud/arimees/soome/fonts/Rubik-Italic-VariableFont_wght.ttf b/rannak/mangud/arimees/soome/fonts/Rubik-Italic-VariableFont_wght.ttf Binary files differnew file mode 100644 index 0000000..58d5f50 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/Rubik-Italic-VariableFont_wght.ttf diff --git a/rannak/mangud/arimees/soome/fonts/Rubik-VariableFont_wght.ttf b/rannak/mangud/arimees/soome/fonts/Rubik-VariableFont_wght.ttf Binary files differnew file mode 100644 index 0000000..fa161b9 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/Rubik-VariableFont_wght.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-Black.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-Black.ttf Binary files differnew file mode 100644 index 0000000..1613299 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-Black.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-BlackItalic.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-BlackItalic.ttf Binary files differnew file mode 100644 index 0000000..fc12676 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-BlackItalic.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-Bold.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-Bold.ttf Binary files differnew file mode 100644 index 0000000..7ec66a6 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-Bold.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-BoldItalic.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-BoldItalic.ttf Binary files differnew file mode 100644 index 0000000..f6e0780 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-BoldItalic.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-ExtraBold.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-ExtraBold.ttf Binary files differnew file mode 100644 index 0000000..1ca9932 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-ExtraBold.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-ExtraBoldItalic.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-ExtraBoldItalic.ttf Binary files differnew file mode 100644 index 0000000..598f72a --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-ExtraBoldItalic.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-Italic.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-Italic.ttf Binary files differnew file mode 100644 index 0000000..0c6d991 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-Italic.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-Light.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-Light.ttf Binary files differnew file mode 100644 index 0000000..9229768 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-Light.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-LightItalic.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-LightItalic.ttf Binary files differnew file mode 100644 index 0000000..d3bba74 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-LightItalic.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-Medium.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-Medium.ttf Binary files differnew file mode 100644 index 0000000..0895d3e --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-Medium.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-MediumItalic.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-MediumItalic.ttf Binary files differnew file mode 100644 index 0000000..e839613 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-MediumItalic.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-Regular.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-Regular.ttf Binary files differnew file mode 100644 index 0000000..0967c8c --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-Regular.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-SemiBold.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-SemiBold.ttf Binary files differnew file mode 100644 index 0000000..b631487 --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-SemiBold.ttf diff --git a/rannak/mangud/arimees/soome/fonts/static/Rubik-SemiBoldItalic.ttf b/rannak/mangud/arimees/soome/fonts/static/Rubik-SemiBoldItalic.ttf Binary files differnew file mode 100644 index 0000000..f9eb73b --- /dev/null +++ b/rannak/mangud/arimees/soome/fonts/static/Rubik-SemiBoldItalic.ttf diff --git a/rannak/mangud/arimees/soome/index.html b/rannak/mangud/arimees/soome/index.html new file mode 100644 index 0000000..f178d55 --- /dev/null +++ b/rannak/mangud/arimees/soome/index.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + + <title>Soome</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>Soome</h1> + + <p> + Leia sõnastikust soomekeelsetele sõnadele vasted ja asenda need kirja. + </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"> + Tsau! + <br/> + Vaata, äri ajades peab ikka keelt oskama, vähemalt natukenegi - ilma soome keeleta tänapäeval enam bisnisit ei tee. + <br/> + Nali on aga selles, et meil on nii palju sarnaseid sõnu, mis võivad tähendada hoopis teisi asju. Nii et keelt tundmata võid vastu pükse saada. + Et paremini mõikaksid, millest ma räägin, kirjutasin sulle kirja. + <br/><br/> + <strong> + Leia sõnastikust soomekeelsetele sõnadele õiged tähendused ja kirjuta asemele eestikeelsed! Neid sõnu läheb sul nii Viru(o)s kui Soomes vaja! + </strong> + </div> + + </div> + </div> + </div> + + + <!-- Main Stuff --> + <div class="content"> + + <div class="leftSide"> + <h3>Sõnastik</h3> + + <ul> + <li>halba - odav</li> + <li>housut - püksid</li> + <li>kaikki kunnossa – kõik on korras</li> + <li>kaikki parhaat- kõike head</li> + <li>kassi - kott</li> + <li>kesä - suvi</li> + <li>moikkaa – tere</li> + <li>ostoksille - ostlema </li> + <li>pibo - kootud suusamüts</li> + <li>puhelin - telefon </li> + <li>puhuma - rääkima</li> + <li>pulma - probleem</li> + <li>purukummi - näts</li> + <li>pusero – sametist dressipluus</li> + <li>takki- jope</li> + <li>T-paita - T-särk</li> + </ul> + </div> + + + <div class="rightSide"> + <h2>Kiri</h2> + + <p> + <span id="Moikka" contenteditable="true">Moikka </span> + , jälle mina, Toits!! + Ma ei saa sinuga pikalt <span contenteditable="true" id="puhuda">puhuda </span>. + <span contenteditable="true" id="Pulma">Pulma </span> on + selles, et kiirustan laevale, sõidan Helsingisse <span contenteditable="true" id="ostoksille">ostoksille </span>, + sealt saab <span contenteditable="true" id="halba">halba </span> kraami! Kuluvaid on kindlasti juurde vaja ja + <span contenteditable="true" id="pibod">pibod </span> ning <span contenteditable="true" id="Tpaitad">T-paitad </span> + lähevad ka hästi kaubaks. + Eelmisest korrast on veel mõned <span contenteditable="true" id="puserod">puserod </span>, + <span contenteditable="true" id="takkid">takkid </span> ja veits <span contenteditable="true" id="purukummi">purukummi </span> + alles, aga nendega <span contenteditable="true" id="pulma">pulma </span> pole, kätte küll midagi ei jää. + Võtan seekord suurema <span contenteditable="true" id="kassi">kassi </span> - äkki saan kassette ka. + Ööbin Pekka juures, tal on <span contenteditable="true" id="puhelin">puhelin </span> - võtan ühendust. + Nii et praegu on <span contenteditable="true" id="kaikkiKunnossa">kaikki kunnossa </span>! + <br/> + <br/> + <span contenteditable="true" id="KaikkiParhaat">Kaikki parhaat </span> teile seniks! + </p> + + </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> diff --git a/rannak/mangud/arimees/soome/pildid/avatar.png b/rannak/mangud/arimees/soome/pildid/avatar.png Binary files differnew file mode 100644 index 0000000..3cb21cf --- /dev/null +++ b/rannak/mangud/arimees/soome/pildid/avatar.png diff --git a/rannak/mangud/arimees/soome/script.js b/rannak/mangud/arimees/soome/script.js new file mode 100644 index 0000000..25ffedd --- /dev/null +++ b/rannak/mangud/arimees/soome/script.js @@ -0,0 +1,66 @@ +document.addEventListener('DOMContentLoaded', () => { + let btn = document.querySelector('.modalButton'); + btn.click(); +}); + + +let map = {}; +map["Moikka"] = "tere"; +map["puhuda"] = "rääkida"; +map["Pulma"] = "probleem"; +map["ostoksille"] = "ostlema"; +map["halba"] = "odavat"; +map["pibod"] = "kootudsuusamütsid"; +map["Tpaitad"] = "t-särgid"; +//map["kesähousut"] = "t-särgid"; +map["puserod"] = "sametistdressipluusid" +map["takkid"] = "joped" +map["purukummi"] = "nätsu" +map["pulma"] = "probleemi"; +map["kassi"] = "koti"; +map["puhelin"] = "telefon"; +map["kaikkiKunnossa"] = "kõikkorras"; +map["KaikkiParhaat"] = "kõikehead"; + + +let total = Object.keys(map).length; +rightOnes = new Array(); + + +const words = document.querySelectorAll("span"); + +for (let w of words){ + w.addEventListener('DOMSubtreeModified', () => { + + sone = w.id; + + let x = w.innerText.replace(/\s/g, ""); + let ignoringSpaces = x.toLowerCase(); + + if (ignoringSpaces == map[sone]) { + + let index = rightOnes.indexOf(sone); + if (index == -1) { + rightOnes.push(sone); + } + + w.setAttribute("contenteditable", false); + w.style.color = "lime"; + } + + + if (rightOnes.length == total) + moveOnEnable(); + }); +} + + + +// If All Else Done + +function moveOnEnable(){ + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = ""; +} + diff --git a/rannak/mangud/arimees/soome/style.css b/rannak/mangud/arimees/soome/style.css new file mode 100644 index 0000000..5912b9b --- /dev/null +++ b/rannak/mangud/arimees/soome/style.css @@ -0,0 +1,130 @@ +@font-face { + font-family: 'fontUno'; + src: url('fonts/static/Rubik-Light.ttf'); +} +* {box-sizing: border-box;} + + +body{ + background-color: #43464b; + font-family: 'fontUno'; +} + + +h1 { + color: #2FF924; + font-weight: bold; +} + +.moveOn{ + display: inline-block; + border: none; + padding: 6px 12px; + margin-botton: 0; + font-size: 1rem; + font-weight: normal; + text-align: center; + cursor: pointer; + border-radius: 4px; + background-color: #4BB543; + color: white; +} + +button:disabled{ + opacity: 0.5; + cursor: not-allowed; +} + + + + +/* Modal Stuff */ + +.avatar { + border-radius: 20px; + width: 100%; + max-width: 15rem; +} + +.modalHeaderWrapper{ + text-align: center; + margin: 0; + width: 100%; +} + + + +.closeModalButton { + border-radius: 50px; +} + +.modalButton{ + position: absolute; + top: 0; + right: 0; + padding: 6px; + padding: 9px 25px; + background-color: rgba(0,136,169,1); + border: none; + border-radius: 50px; + cursor: pointer; + transition: all 0.3 ease 0; + margin: 3%; + font-size: 1.2rem; +} + +.modalButton:hover{ + background-color: rgba(0,136,169,0.8); +} + + + + + +/* Main */ +.content { + margin-top: 3rem; + display: flex; + height: 100%; +} + +.leftSide{ + width: 30%; + text-align: center; + color: white; +} +.rightSide{ + width: 70%; + text-align: center; + border-left: 7px solid black; + color: white; + padding-top: 2rem; +} + + + + +.rightSide p{ + padding: 0 3rem; + font-size: 1.8rem; +} + +h2, h3{ + font-weight: bold; + color: black; +} + +h2{ + font-size: 2.7rem; +} + +ul { + padding: 0; + font-size: 1.17rem; + list-style-type: none; +} + +span{ + color: #1fcfcf; + font-weight: bold +} diff --git a/rannak/mangud/index.html b/rannak/mangud/index.html index 9ce5578..8492c60 100644 --- a/rannak/mangud/index.html +++ b/rannak/mangud/index.html @@ -54,7 +54,7 @@ <div> <h3>Ärimees</h3> <ol> - <li><a href="arimees/hinnad">Hinnad</a></li> + <li><a href="arimees/soome">Soome</a></li> <li></li> <li></li> </ol> diff --git a/rannak/mangud/kaitseliitlane/sundmused/index.html b/rannak/mangud/kaitseliitlane/sundmused/index.html index 3e83187..70cd636 100644 --- a/rannak/mangud/kaitseliitlane/sundmused/index.html +++ b/rannak/mangud/kaitseliitlane/sundmused/index.html @@ -3,7 +3,7 @@ <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> - <title>Kuusused</title> + <title>Sündmused</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"> diff --git a/rannak/mangud/partorg/kuulsused/index.html b/rannak/mangud/partorg/kuulsused/index.html index 80fc8c9..4740414 100644 --- a/rannak/mangud/partorg/kuulsused/index.html +++ b/rannak/mangud/partorg/kuulsused/index.html @@ -13,7 +13,7 @@ <body class="text-white"> <div class="container text-center text-white align-items-center pb-5"> - <h1 class="pb-1 pt-2">Olulised isikud</h1> + <h1 class="pb-1 pt-2">Kuulsused</h1> <p>Vii kokku inimese nimi ja nägu.</p> <div class="row"> diff --git a/rannak/mangud/partorg/plakat.bak/img/avatar.png b/rannak/mangud/partorg/plakat.bak/img/avatar.png Binary files differnew file mode 100644 index 0000000..485a70c --- /dev/null +++ b/rannak/mangud/partorg/plakat.bak/img/avatar.png diff --git a/rannak/mangud/partorg/plakat/img/lenin.png b/rannak/mangud/partorg/plakat.bak/img/lenin.png Binary files differindex e36df3d..e36df3d 100644 --- a/rannak/mangud/partorg/plakat/img/lenin.png +++ b/rannak/mangud/partorg/plakat.bak/img/lenin.png diff --git a/rannak/mangud/partorg/plakat/img/nazi.png b/rannak/mangud/partorg/plakat.bak/img/nazi.png Binary files differindex 87e616e..87e616e 100644 --- a/rannak/mangud/partorg/plakat/img/nazi.png +++ b/rannak/mangud/partorg/plakat.bak/img/nazi.png diff --git a/rannak/mangud/partorg/plakat/img/normalSelect.cur b/rannak/mangud/partorg/plakat.bak/img/normalSelect.cur Binary files differindex fdd943c..fdd943c 100644 --- a/rannak/mangud/partorg/plakat/img/normalSelect.cur +++ b/rannak/mangud/partorg/plakat.bak/img/normalSelect.cur diff --git a/rannak/mangud/partorg/plakat/img/redStar.png b/rannak/mangud/partorg/plakat.bak/img/redStar.png Binary files differindex b6eee79..b6eee79 100644 --- a/rannak/mangud/partorg/plakat/img/redStar.png +++ b/rannak/mangud/partorg/plakat.bak/img/redStar.png diff --git a/rannak/mangud/partorg/plakat.bak/img/stalin.jpg b/rannak/mangud/partorg/plakat.bak/img/stalin.jpg Binary files differnew file mode 100644 index 0000000..bc0a3a5 --- /dev/null +++ b/rannak/mangud/partorg/plakat.bak/img/stalin.jpg diff --git a/rannak/mangud/partorg/plakat/img/stalinAddOn.png b/rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png Binary files differindex d3e05fd..d3e05fd 100644 --- a/rannak/mangud/partorg/plakat/img/stalinAddOn.png +++ b/rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png diff --git a/rannak/mangud/partorg/plakat.bak/img/testImg.jpg b/rannak/mangud/partorg/plakat.bak/img/testImg.jpg Binary files differnew file mode 100644 index 0000000..d88d950 --- /dev/null +++ b/rannak/mangud/partorg/plakat.bak/img/testImg.jpg diff --git a/rannak/mangud/partorg/plakat.bak/img/veekogud.jpg b/rannak/mangud/partorg/plakat.bak/img/veekogud.jpg Binary files differnew file mode 100644 index 0000000..23f04ab --- /dev/null +++ b/rannak/mangud/partorg/plakat.bak/img/veekogud.jpg diff --git a/rannak/mangud/partorg/plakat.bak/index.html b/rannak/mangud/partorg/plakat.bak/index.html new file mode 100644 index 0000000..4754c9b --- /dev/null +++ b/rannak/mangud/partorg/plakat.bak/index.html @@ -0,0 +1,125 @@ +<html lang="en"> +<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> + <!-- 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> + <section class="wrapper"> + + <div id="toolbar"> + + <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"/> + <img id="testing" class="pickImg" alt="Veekogude Plakat" src="img/testImg.jpg"/> + </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> + + + </section> + + + + + <!-- 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õ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. + <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õ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> + </div> + </div> + + + + + <script src="./main.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> diff --git a/rannak/mangud/partorg/plakat/main.js b/rannak/mangud/partorg/plakat.bak/main.js index 9ae8e54..11809cb 100644 --- a/rannak/mangud/partorg/plakat/main.js +++ b/rannak/mangud/partorg/plakat.bak/main.js @@ -68,9 +68,11 @@ toolbar.addEventListener('click', e => { //Plakatid const stalinImg = document.getElementById("stalin"); const veekogudImg = document.getElementById("veekogud"); + const testing = document.getElementById("testing"); pildid.push(stalinImg); pildid.push(veekogudImg); + pildid.push(testing); //Addons @@ -88,7 +90,7 @@ toolbar.addEventListener('click', e => { - if (e.target.id === "stalin" || e.target.id === "veekogud") { + if (e.target.id === "stalin" || e.target.id === "veekogud" || e.target.id === "testing") { for (el in pildid) { pildid[el].classList.remove("picked"); } diff --git a/rannak/mangud/partorg/plakat/style.css b/rannak/mangud/partorg/plakat.bak/style.css index 215c073..215c073 100644 --- a/rannak/mangud/partorg/plakat/style.css +++ b/rannak/mangud/partorg/plakat.bak/style.css diff --git a/rannak/mangud/partorg/plakat/img/malev.jpg b/rannak/mangud/partorg/plakat/img/malev.jpg Binary files differnew file mode 100644 index 0000000..d88d950 --- /dev/null +++ b/rannak/mangud/partorg/plakat/img/malev.jpg diff --git a/rannak/mangud/partorg/plakat/img/viisAastak.jpg b/rannak/mangud/partorg/plakat/img/viisAastak.jpg Binary files differnew file mode 100644 index 0000000..20be6ed --- /dev/null +++ b/rannak/mangud/partorg/plakat/img/viisAastak.jpg 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> diff --git a/rannak/mangud/partorg/plakat/script.js b/rannak/mangud/partorg/plakat/script.js new file mode 100644 index 0000000..4d4ee36 --- /dev/null +++ b/rannak/mangud/partorg/plakat/script.js @@ -0,0 +1,117 @@ +document.addEventListener('DOMContentLoaded', () => { + let btn = document.querySelector('.modalButton'); + btn.click(); +}); + + + + + + + + + +// FROM HERE TODO + + +// Init Setup - to access later +let dingDong = document.querySelector(".addedText"); +dingDong.style.top = "50%"; +dingDong.style.left = "50%"; + + +// Position +const ules = document.querySelectorAll(".ules"); +const alla = document.querySelectorAll(".alla"); +const vasak = document.querySelectorAll(".vasak"); +const parem = document.querySelectorAll(".parem"); + +ules.forEach(el => { + el.addEventListener("click" , e => { + let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; + let curTop = theText.style["top"]; + curTop = curTop.substring(0, curTop.length-1) + + if (Number(curTop) >= 5) + theText.style["top"] = Number(curTop)-5+"%"; + }); +}) + +alla.forEach(el => { + el.addEventListener("click" , e => { + let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; + let curTop = theText.style["top"]; + curTop = curTop.substring(0, curTop.length-1) + + if (Number(curTop) <= 85) + theText.style["top"] = Number(curTop)+5+"%"; + }); +}) + +vasak.forEach(el => { + el.addEventListener("click", e => { + let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; + let curLeft = theText.style["left"]; + curLeft = curLeft.substring(0, curLeft.length-1) + + console.log("Vasak"); + console.log(theText.innerHTML); + + if (Number(curLeft) >= 5) + theText.style["left"] = Number(curLeft)-5+"%"; + }); +}) + +parem.forEach(el => { + el.addEventListener("click", e => { + let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; + let curLeft = theText.style["left"]; + curLeft = curLeft.substring(0, curLeft.length-1) + + if (Number(curLeft) >= 5) + theText.style["left"] = Number(curLeft)+5+"%"; + }); +}) + + + + +// Muuda Text button + +const muudaBtn = document.querySelector(".muuda"); + +muudaBtn.addEventListener("click", e => { + console.log(e); +}); + + + + + + + + + + + +function checkIfAllGood(){ + let rightDone = []; + + for (let j=0; j < lists.length; j++){ + const list = lists[j]; + if (list.className.includes("startBasket")) + continue; + else if (list.children.length == 1){ + if (list.id == list.children[0].id){ + if (!rightDone.includes(list.id)) + rightDone.push(list.id); + } + } + } // For loop end + + if (rightDone.length == 6) { + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = ""; + } +} diff --git a/rannak/mangud/partorg/plakat/styles.css b/rannak/mangud/partorg/plakat/styles.css new file mode 100644 index 0000000..7d974e1 --- /dev/null +++ b/rannak/mangud/partorg/plakat/styles.css @@ -0,0 +1,197 @@ +* { + box-sizing: border-box; +} +h1 { + color: #154734; + font-weight: bold; +} +body{ + background-color: #4D5157; +} + +.moveOn{ + display: inline-block; + border: none; + padding: 6px 12px; + margin-botton: 0; + font-size: 1rem; + font-weight: normal; + text-align: center; + cursor: pointer; + border-radius: 4px; + background-color: #4BB543; + color: white; +} + +button:disabled{ + opacity: 0.5; + cursor: not-allowed; +} + + + + + +/* Modal Stuff */ + +.avatar { + border-radius: 20px; + width: 100%; + max-width: 15rem; +} + +.modalHeaderWrapper{ + text-align: center; + margin: 0; + width: 100%; +} + + + + +.closeModalButton { + border-radius: 50px; +} + +.modalButton{ + position: absolute; + top: 0; + right: 0; + padding: 25px; + background-color: rgba(0,136,169,1); + border: none; + border-radius: 50px; + cursor: pointer; + transition: all 0.3 ease 0; + margin: 3%; + font-size: 1.2rem; +} + +.modalButton:hover{ + background-color: rgba(0,136,169,0.8); +} + + + + + +/* Main Stuff*/ +.main{ + background-color: #2f2f2f; + margin: 10 10%; +} + +.nav-tabs { + display: flex; + justify-content: center; +} + +.wrapper{ + display: flex; + justify-content: center; +} + +.plakatWrapper, .innerWrapper{ + width: 48%; +} + + +.innerWrapper{ + padding: 2rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + + +/* Input stuff*/ + +select{ + height: 3rem; + font-size: 2rem; +} + +label{ + padding: 1rem; + padding-top: 4rem; + font-size: 1.2rem; +} + +input { + height: 2rem; + width: 75%; +} + +.innerWrapper button { + margin-top: 1rem; +} + +.innerWrapper button { + background-color: #596B6E; + border: none; + border-radius: 4px; + font-size:1.3rem; + color:white; + padding: 5px; +} + + + + + + + + +/*Plakatid*/ + +.stalin { + background: url("img/stalin.jpg") no-repeat center; + background-size: 100%; + font-size: 2rem; + text-align: center; + color: black; +} + + +.veekogud { + background: url("img/veekogud.jpg") no-repeat center; + background-size: 100%; + font-size: 2rem; + text-align: center; + color: black; +} + + +.malev { + background: url("img/malev.jpg") no-repeat center; + background-size: 100% 100%; + font-size: 2rem; + text-align: center; + color: black; +} + + +.viisAastak { + background: url("img/viisAastak.jpg") no-repeat center; + background-size: 100% 100%; + font-size: 2rem; + text-align: center; + color: black; +} + +.pikkPlakat{ + height: 78vh; +} + +.plakatWrapper{ + position: relative; + overflow: hidden; + clear: both; +} +.addedText { + position: absolute; +} + + + |
