diff options
Diffstat (limited to 'rannak/mangud/test')
| -rw-r--r-- | rannak/mangud/test/img/shirtImg.jpg | bin | 323806 -> 0 bytes | |||
| -rw-r--r-- | rannak/mangud/test/img/tshirt.svg | 131 | ||||
| -rw-r--r-- | rannak/mangud/test/index.html | 110 | ||||
| -rw-r--r-- | rannak/mangud/test/main.js | 281 | ||||
| -rw-r--r-- | rannak/mangud/test/style.css | 146 |
5 files changed, 0 insertions, 668 deletions
diff --git a/rannak/mangud/test/img/shirtImg.jpg b/rannak/mangud/test/img/shirtImg.jpg Binary files differdeleted file mode 100644 index b469eee..0000000 --- a/rannak/mangud/test/img/shirtImg.jpg +++ /dev/null diff --git a/rannak/mangud/test/img/tshirt.svg b/rannak/mangud/test/img/tshirt.svg deleted file mode 100644 index 19a7205..0000000 --- a/rannak/mangud/test/img/tshirt.svg +++ /dev/null @@ -1,131 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<!-- Created with Inkscape (http://www.inkscape.org/) --> -<svg - xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" - xmlns="http://www.w3.org/2000/svg" - xmlns:cc="http://creativecommons.org/ns#" - xmlns:dc="http://purl.org/dc/elements/1.1/" - xmlns:svg="http://www.w3.org/2000/svg" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" - xmlns:ns1="http://sozi.baierouge.fr" - xmlns:xlink="http://www.w3.org/1999/xlink" - id="svg10099" - viewBox="0 0 512 512" - version="1.1" - > - <g - id="layer1" - transform="translate(0,448)" - > - <path - id="path8691-8-9" - style="fill:#7f7f7f" - 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" - /> - </g - > - <metadata - > - <rdf:RDF - > - <cc:Work - > - <dc:format - >image/svg+xml</dc:format - > - <dc:type - rdf:resource="http://purl.org/dc/dcmitype/StillImage" - /> - <cc:license - rdf:resource="http://creativecommons.org/licenses/publicdomain/" - /> - <dc:publisher - > - <cc:Agent - rdf:about="http://openclipart.org/" - > - <dc:title - >Openclipart</dc:title - > - </cc:Agent - > - </dc:publisher - > - <dc:title - >t-shirt outline</dc:title - > - <dc:date - >2011-06-06T12:54:55</dc:date - > - <dc:description - >a blank t-shirt outline</dc:description - > - <dc:source - >https://openclipart.org/detail/142771/t-shirt-outline-by-andy</dc:source - > - <dc:creator - > - <cc:Agent - > - <dc:title - >Andy</dc:title - > - </cc:Agent - > - </dc:creator - > - <dc:subject - > - <rdf:Bag - > - <rdf:li - >blank</rdf:li - > - <rdf:li - >clothes</rdf:li - > - <rdf:li - >design</rdf:li - > - <rdf:li - >fashion</rdf:li - > - <rdf:li - >outline</rdf:li - > - <rdf:li - >shirt</rdf:li - > - <rdf:li - >t-shirt</rdf:li - > - <rdf:li - >template</rdf:li - > - </rdf:Bag - > - </dc:subject - > - </cc:Work - > - <cc:License - rdf:about="http://creativecommons.org/licenses/publicdomain/" - > - <cc:permits - rdf:resource="http://creativecommons.org/ns#Reproduction" - /> - <cc:permits - rdf:resource="http://creativecommons.org/ns#Distribution" - /> - <cc:permits - rdf:resource="http://creativecommons.org/ns#DerivativeWorks" - /> - </cc:License - > - </rdf:RDF - > - </metadata - > -</svg -> diff --git a/rannak/mangud/test/index.html b/rannak/mangud/test/index.html deleted file mode 100644 index 11a25a0..0000000 --- a/rannak/mangud/test/index.html +++ /dev/null @@ -1,110 +0,0 @@ -<html> - <head> - <title>Särgi Kujundus</title> - <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> - - <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 id="sarkTekst" x="200" y="-200" transform="rotate(0)" >Testing</text> - </g> - </svg> - - - - <!-- 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 "Särk Valmis". - </p> - - <div> - <button class="checkMoveOn">Särk Valmis</button> - <button class="moveOn" disabled>Liigu Edasi</button> - </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> - - <div class="textAddWrapper"> - <span class="ules">↑</span> - <span class="alla">↓</span> - <span class="vasak">←</span> - <span class="parem">→</span> - - <span class="vertVasak">↶</span> - <span class="vertParem">↷</span> - - <span class="plus">+</span> - <span class="minus">-</span> - - <input id="colorText" type="color" value="#000000"/> - - </div> - - </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> diff --git a/rannak/mangud/test/main.js b/rannak/mangud/test/main.js deleted file mode 100644 index 7d16bb4..0000000 --- a/rannak/mangud/test/main.js +++ /dev/null @@ -1,281 +0,0 @@ -/*Muutused Stuff*/ - -// Särgi color - -let colorFill = document.querySelector("#colorFiller"); -let colorStroke = document.querySelector("#colorStroke"); - -colorFill.addEventListener("input", () => { - let color = colorFill.value; - document.querySelector("#sark").style.fill = color; - - if (!stuffDone.includes("sarkColor")) - stuffDone.push("sarkColor"); -}) - -colorStroke.addEventListener("input", () => { - let color = colorStroke.value; - document.querySelector("#sark").style.stroke = color; - - if (!stuffDone.includes("sarkColor")) - stuffDone.push("sarkColor"); -}) - - -// Img upload - -const image_input = document.querySelector("#image_input"); -let uploadedImg = ""; - -image_input.addEventListener("change", () => { - const reader = new FileReader(); - reader.readAsDataURL(image_input.files[0]) - reader.addEventListener("load", () => { - uploadedImg = reader.result; - document.querySelector(".item").style.backgroundImage = `url(${uploadedImg})` - }); - - if (!stuffDone.includes("newImg")) - stuffDone.push("newImg"); -}) - - -/* Teksti Teema */ - -// Input -function getInputValue() { - // Selecting the input element and get its value - let inputVal = document.getElementById("sargiText").value; - let sarkTekst = document.querySelector("#sarkTekst"); - sarkTekst.innerHTML = inputVal; - - if (!stuffDone.includes("newTxt")) - stuffDone.push("newTxt"); -} - -function enterSubmit(){ - document.getElementById('sargiText') - .addEventListener('keyup', event => { - if (event.code === 'Enter') - { - event.preventDefault(); - getInputValue(); - } - }); -} -enterSubmit() - - -// Color - -let colorText = document.querySelector("#colorText"); -colorText.addEventListener("input", () => { - let color = colorText.value; - document.querySelector("#sarkTekst").style.fill = color; - - if (!stuffDone.includes("txtColor")) - stuffDone.push("txtColor"); -}) - -// Position -const ules = document.querySelector(".ules"); -const alla = document.querySelector(".alla"); -const vasak = document.querySelector(".vasak"); -const parem = document.querySelector(".parem"); - -let tmpX = document.querySelector("#sarkTekst").x; -let tmpY = document.querySelector("#sarkTekst").y; - -ules.addEventListener("click" , () => { - tmpY.baseVal[0].value-=10; - - if (!stuffDone.includes("txtPos")) - stuffDone.push("txtPos"); -}); - -alla.addEventListener("click" , () => { - tmpY.baseVal[0].value+=10; - - if (!stuffDone.includes("txtPos")) - stuffDone.push("txtPos"); -}); - -vasak.addEventListener("click", () => { - tmpX.baseVal[0].value-=10; - - if (!stuffDone.includes("txtPos")) - stuffDone.push("txtPos"); -}); - -parem.addEventListener("click", () => { - tmpX.baseVal[0].value+=10; - - if (!stuffDone.includes("txtPos")) - stuffDone.push("txtPos"); -}); - - -// Vertical Pos -const vasakule = document.querySelector(".vertVasak"); -const paremale = document.querySelector(".vertParem"); -let testing = document.querySelector("#sarkTekst"); - -let angle=0; -vasakule.addEventListener("click" , () => { - angle +=5 - testing.setAttribute("transform", "rotate("+angle+")"); - - if (!stuffDone.includes("txtPos")) - stuffDone.push("txtPos"); -}); - -paremale.addEventListener("click" , () => { - angle -=5 - testing.setAttribute("transform", "rotate("+angle+")"); - - if (!stuffDone.includes("txtPos")) - stuffDone.push("txtPos"); -}); - - - -// FontZise - -const plus = document.querySelector(".plus"); -const minus = document.querySelector(".minus"); -let sarkForText = document.querySelector("#sarkTekst"); -let sarkFontSize = 20; - -plus.addEventListener("click" , () => { - sarkFontSize +=2; - sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+""); - - if (!stuffDone.includes("tekstFont")) - stuffDone.push("tekstFont"); -}); - -minus.addEventListener("click" , () => { - sarkFontSize-=2; - sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+""); - - if (!stuffDone.includes("tekstFont")) - stuffDone.push("tekstFont"); -}); - - -/* Rezisable Image Stuff */ - -const el = document.querySelector(".item"); - -let isResizing = false; - -el.addEventListener("mousedown", mousedown); - -function mousedown(e) { - window.addEventListener("mousemove", mousemove); - window.addEventListener("mouseup", mouseup); - - let prevX = e.clientX; - let prevY = e.clientY; - - function mousemove(e) { - if (!isResizing) { - let newX = prevX - e.clientX; - let newY = prevY - e.clientY; - - const rect = el.getBoundingClientRect(); - - el.style.left = rect.left - newX + "px"; - el.style.top = rect.top - newY + "px"; - - prevX = e.clientX; - prevY = e.clientY; - } - } - - function mouseup() { - window.removeEventListener("mousemove", mousemove); - window.removeEventListener("mouseup", mouseup); - } -} - - - -const resizers = document.querySelectorAll(".resizer"); -let currentResizer; - -for (let resizer of resizers) { - resizer.addEventListener("mousedown", mousedown); - - function mousedown(e) { - currentResizer = e.target; - isResizing = true; - - let prevX = e.clientX; - let prevY = e.clientY; - - window.addEventListener("mousemove", mousemove); - window.addEventListener("mouseup", mouseup); - - function mousemove(e) { - const rect = el.getBoundingClientRect(); - - if (currentResizer.classList.contains("se")) { - el.style.width = rect.width - (prevX - e.clientX) + "px"; - el.style.height = rect.height - (prevY - e.clientY) + "px"; - } - - else if (currentResizer.classList.contains("sw")) { - el.style.width = rect.width + (prevX - e.clientX) + "px"; - el.style.height = rect.height - (prevY - e.clientY) + "px"; - el.style.left = rect.left - (prevX - e.clientX) + "px"; - } - - else if (currentResizer.classList.contains("ne")) { - el.style.width = rect.width - (prevX - e.clientX) + "px"; - el.style.height = rect.height + (prevY - e.clientY) + "px"; - el.style.top = rect.top - (prevY - e.clientY) + "px"; - } - - else { - el.style.width = rect.width + (prevX - e.clientX) + "px"; - el.style.height = rect.height + (prevY - e.clientY) + "px"; - el.style.top = rect.top - (prevY - e.clientY) + "px"; - el.style.left = rect.left - (prevX - e.clientX) + "px"; - } - - prevX = e.clientX; - prevY = e.clientY; - } - - function mouseup() { - window.removeEventListener("mousemove", mousemove); - window.removeEventListener("mouseup", mouseup); - isResizing = false; - } - - } // Resizing mousedown end - -} - - - -/* Move on Button*/ - -let stuffDone = new Array(); - -const chkBtn = document.querySelector(".checkMoveOn"); - -chkBtn.addEventListener("click", () => { - if (stuffDone.length == 6) - moveOnEnable(); - console.log(stuffDone.length); -}); - -function moveOnEnable(){ - const btn = document.querySelector(".moveOn"); - btn.disabled = false; - btn.onclick = () => location.href = ""; -} - -// 6 diff --git a/rannak/mangud/test/style.css b/rannak/mangud/test/style.css deleted file mode 100644 index 822f048..0000000 --- a/rannak/mangud/test/style.css +++ /dev/null @@ -1,146 +0,0 @@ -body{ - background-color: #E3D4AD; - box-sizing: border-box; - margin: 0; - padding: 0; -} - -.containeraa { - width: 100%; - height: 100vh; - display: flex; - justify-content: center; - align-items:center; -} - -.side { - border-left: 2px solid gray; - width: 50%; - height: 100vh; - text-align: center; - background-color: #D3BC8D; -} - - - -/* Move on Button */ - -button:disabled{ - opacity: 0.5; - cursor: not-allowed; -} - -.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; -} - - - -/* Svg stuff*/ - -svg { - width: 100% !important; - height: 100% !important; -} - -#sark { - fill: white; - stroke: black; - stroke-width: 5px; -} - -#sarkTekst { - fontSize: 20px; - fill: black; - transform-box: fill-box; - transform-origin: center; -} - - - -/*Muutuste osa*/ - -.muutused { - margin-top: 10px; - border-top: 2px solid gray; - width: 100%; - text-align: center; -} - -.fileUpload { - margin-top: 5px; -} - -.textPos { - margin-top: 10px; -} - -.textAddWrapper{ - margin: 10px; -} - -.textAddWrapper *{ - font-size: 2rem; - margin: 2px; - border: 2px solid black; - background-color: gray; - cursor: pointer; -} - - - -/* Img item stuff */ - -.item { - height: 300px; - width: 300px; - position: absolute; - background-image: url("img/shirtImg.jpg"); - background-repeat: no-repeat; - background-size: 100%; - top: 60%; - right: 50%; -} - -.resizer { - height: 7px; - width: 7px; - position: absolute; - border-radius: 3px; - background: #000; - z-index: 2; -} - -.resizer.ne { - top: -1px; - right: -1px; - cursor: ne-resize; -} - -.resizer.nw { - top: -1px; - left: -1px; - cursor: nw-resize; -} - -.resizer.se { - bottom: -1px; - right: -1px; - cursor: se-resize; -} - -.resizer.sw { - bottom: -1px; - left: -1px; - cursor: sw-resize; -} |
