summaryrefslogtreecommitdiff
path: root/rannak/mangud/uliopilane/tSark
diff options
context:
space:
mode:
Diffstat (limited to 'rannak/mangud/uliopilane/tSark')
-rw-r--r--rannak/mangud/uliopilane/tSark/img/picLink.txt1
-rw-r--r--rannak/mangud/uliopilane/tSark/img/shirtImg.jpgbin0 -> 26450 bytes
-rw-r--r--rannak/mangud/uliopilane/tSark/img/tshirt.svg131
-rw-r--r--rannak/mangud/uliopilane/tSark/index.html117
-rw-r--r--rannak/mangud/uliopilane/tSark/main.js433
-rw-r--r--rannak/mangud/uliopilane/tSark/style.css168
6 files changed, 850 insertions, 0 deletions
diff --git a/rannak/mangud/uliopilane/tSark/img/picLink.txt b/rannak/mangud/uliopilane/tSark/img/picLink.txt
new file mode 100644
index 0000000..091d2df
--- /dev/null
+++ b/rannak/mangud/uliopilane/tSark/img/picLink.txt
@@ -0,0 +1 @@
+https://www.freepik.com/premium-vector/stylized-simple-outline-map-estonia-icon-blue-sketch-map-estonia-vector-illustration_18650569.html
diff --git a/rannak/mangud/uliopilane/tSark/img/shirtImg.jpg b/rannak/mangud/uliopilane/tSark/img/shirtImg.jpg
new file mode 100644
index 0000000..93f10de
--- /dev/null
+++ b/rannak/mangud/uliopilane/tSark/img/shirtImg.jpg
Binary files differ
diff --git a/rannak/mangud/uliopilane/tSark/img/tshirt.svg b/rannak/mangud/uliopilane/tSark/img/tshirt.svg
new file mode 100644
index 0000000..19a7205
--- /dev/null
+++ b/rannak/mangud/uliopilane/tSark/img/tshirt.svg
@@ -0,0 +1,131 @@
+<?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/uliopilane/tSark/index.html b/rannak/mangud/uliopilane/tSark/index.html
new file mode 100644
index 0000000..382c382
--- /dev/null
+++ b/rannak/mangud/uliopilane/tSark/index.html
@@ -0,0 +1,117 @@
+<html lang"ee">
+ <head>
+ <title>Särgi Kujundus</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <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 class="sarkTekst doneTekst" x="200" y="-200" transform="rotate(0)" >Tekst</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, kas särk on valmis".
+ </p>
+
+ <div>
+ <button class="checkMoveOn">Kontrolli, kas särk valmis</button>
+ <button class="moveOn" disabled>Liigu Edasi</button>
+
+ <div class="messageBox">
+ </div>
+ </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>
+ -->
+ <button id="nextTekstBtn" onclick="nextText();">Veel üks Tekst</button>
+
+ <div class="textAddWrapper">
+ <span class="ules">&uarr;</span>
+ <span class="alla">&darr;</span>
+ <span class="vasak">&larr;</span>
+ <span class="parem">&rarr;</span>
+
+ <span class="vertVasak">&cularr;</span>
+ <span class="vertParem">&curarr;</span>
+
+ <span class="plus">+</span>
+ <span class="minus">-</span>
+
+ <input id="colorText" type="color" value="#000000"/>
+
+ </div>
+
+ </div> <!-- TextPos End -->
+
+ <div class="nulliBtn">
+ <label for="nulliBtn">Nulli Särk:</label>
+ <button class="nulliBtn">Nulli särk</button>
+ </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/uliopilane/tSark/main.js b/rannak/mangud/uliopilane/tSark/main.js
new file mode 100644
index 0000000..98786f2
--- /dev/null
+++ b/rannak/mangud/uliopilane/tSark/main.js
@@ -0,0 +1,433 @@
+/*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 */
+
+// Uus Tekst
+
+function nextText() {
+ document.querySelector("#sargiText").value = "";
+
+ let curText = document.querySelector(".sarkTekst")
+ let newText = curText.cloneNode(true);
+ curText.classList.remove("sarkTekst")
+
+ //Reset Stuff
+ let angle=0;
+ let sarkFontSize = 20;
+
+ let gi6 = document.querySelector("g")
+ newText.classList.add("sarkTekst")
+ newText.innerHTML = "Uus Tekst";
+ gi6.appendChild(newText);
+}
+
+
+
+// Input
+
+function chgTxt() {
+
+ let tekstVali = document.querySelector("#sargiText");
+ tekstVali.addEventListener("keyup", () => {
+ let sarkTekst = document.querySelector(".sarkTekst");
+ sarkTekst.innerHTML = tekstVali.value;
+
+ if (!stuffDone.includes("txt"))
+ stuffDone.push("txt");
+ });
+}
+
+chgTxt()
+
+
+/*
+function getInputValue() {
+ // Selecting the input element and get its value
+
+ //Btn
+ let inputVal = document.getElementById("sargiText").value;
+ //Txt
+ 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("txt"))
+ stuffDone.push("txt");
+})
+
+// Position
+const ules = document.querySelector(".ules");
+const alla = document.querySelector(".alla");
+const vasak = document.querySelector(".vasak");
+const parem = document.querySelector(".parem");
+
+ules.addEventListener("click" , () => {
+ let tmpX = document.querySelector(".sarkTekst").x;
+ let tmpY = document.querySelector(".sarkTekst").y;
+
+ tmpY.baseVal[0].value-=10;
+
+ if (!stuffDone.includes("txt"))
+ stuffDone.push("txt");
+});
+
+alla.addEventListener("click" , () => {
+ let tmpX = document.querySelector(".sarkTekst").x;
+ let tmpY = document.querySelector(".sarkTekst").y;
+
+ tmpY.baseVal[0].value+=10;
+
+ if (!stuffDone.includes("txt"))
+ stuffDone.push("txt");
+});
+
+vasak.addEventListener("click", () => {
+ let tmpX = document.querySelector(".sarkTekst").x;
+ let tmpY = document.querySelector(".sarkTekst").y;
+
+ tmpX.baseVal[0].value-=10;
+
+ if (!stuffDone.includes("txt"))
+ stuffDone.push("txt");
+});
+
+parem.addEventListener("click", () => {
+ let tmpX = document.querySelector(".sarkTekst").x;
+ let tmpY = document.querySelector(".sarkTekst").y;
+
+ tmpX.baseVal[0].value+=10;
+
+ if (!stuffDone.includes("txt"))
+ stuffDone.push("txt");
+});
+
+
+// Vertical Pos
+const vasakule = document.querySelector(".vertVasak");
+const paremale = document.querySelector(".vertParem");
+let angle=0;
+
+vasakule.addEventListener("click" , () => {
+ let testing = document.querySelector(".sarkTekst");
+
+ angle -=5
+ testing.setAttribute("transform", "rotate("+angle+")");
+
+ if (!stuffDone.includes("txt"))
+ stuffDone.push("txt");
+});
+
+paremale.addEventListener("click" , () => {
+ let testing = document.querySelector(".sarkTekst");
+
+ angle +=5
+ testing.setAttribute("transform", "rotate("+angle+")");
+
+ if (!stuffDone.includes("txt"))
+ stuffDone.push("txt");
+});
+
+
+
+// FontZise
+
+const plus = document.querySelector(".plus");
+const minus = document.querySelector(".minus");
+let sarkFontSize = 20;
+
+plus.addEventListener("click" , () => {
+ let sarkForText = document.querySelector(".sarkTekst");
+
+ sarkFontSize +=2;
+ sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");
+
+ if (!stuffDone.includes("txt"))
+ stuffDone.push("txt");
+});
+
+minus.addEventListener("click" , () => {
+ let sarkForText = document.querySelector(".sarkTekst");
+
+ sarkFontSize-=2;
+ sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+"");
+
+ if (!stuffDone.includes("txt"))
+ stuffDone.push("txt");
+});
+
+
+
+
+/* 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 item = document.querySelector(".item");
+ item.style.pointerEvents = "none";
+ let posers = document.elementFromPoint(e.x, e.y).id;
+ item.style.pointerEvents = "";
+
+ if (posers != "sark"){
+ console.log(posers);
+
+ 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;
+
+ mouseup()
+ }
+
+ else {
+
+ 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
+
+}
+
+// Seting up resize Pic Pos
+let brr = document.querySelector("#sark").getBoundingClientRect();
+let it = document.querySelector(".item");
+it.style.left = brr.left + 200;
+//it.style.top = brr.top + 300;
+
+
+
+/* Move on Button*/
+function message(msg, color){
+ messageBox = document.querySelector(".messageBox");
+ messageBox.innerHTML = msg;
+ messageBox.style.color = color;
+}
+
+
+let stuffDone = new Array();
+
+const chkBtn = document.querySelector(".checkMoveOn");
+
+chkBtn.addEventListener("click", (e) => {
+
+ if (stuffDone.length >= 3){
+ message("Korras! Soovi korral tee screenshot (Win+Shift+S)", "green");
+ moveOnEnable();
+ }
+ else
+ message("valikuid kasutatud " + stuffDone.length + "/" + "3.", "Red");
+});
+
+function moveOnEnable(){
+ const btn = document.querySelector(".moveOn");
+ btn.disabled = false;
+ btn.onclick = () => location.href = "";
+}
+
+// 6
+
+
+
+// Reset Everything
+
+const nulliBtn = document.querySelector(".nulliBtn");
+nulliBtn.addEventListener("click", () => {
+
+ stuffDone = new Array();
+
+ //SarkColor
+ document.querySelector("#sark").style.fill = "white";
+
+ document.querySelector("#sark").style.stroke = "black";
+
+
+
+ // Tekstid
+ document.querySelector("#sargiText").value = "";
+
+ curText = document.querySelector(".sarkTekst");
+ newText = curText.cloneNode(true);
+ curText.classList.remove("sarkTekst");
+
+ let koikTekstid = document.querySelectorAll(".doneTekst");
+
+ for (let i = 0; i < koikTekstid.length; i++) {
+ koikTekstid[i].innerHTML = "";
+ }
+
+ //Reset Stuff
+ angle=0;
+ sarkFontSize = 20;
+
+ let brro = document.querySelector("g")
+ newText.classList.add("sarkTekst")
+ newText.innerHTML = "Tekst";
+
+ brro.appendChild(newText);
+ document.querySelector(".sarkTekst").style.fill = "black";
+
+
+ // Seting up resize Pic Pos
+ let brr = document.querySelector("#sark").getBoundingClientRect();
+ let it = document.querySelector(".item");
+ it.style.left = brr.left + 200;
+ //it.style.top = brr.top + 300;
+
+})
diff --git a/rannak/mangud/uliopilane/tSark/style.css b/rannak/mangud/uliopilane/tSark/style.css
new file mode 100644
index 0000000..0bac36a
--- /dev/null
+++ b/rannak/mangud/uliopilane/tSark/style.css
@@ -0,0 +1,168 @@
+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;
+}
+
+.checkMoveOn{
+ margin: 0 25px;
+}
+
+.messageBox {
+ padding-top: 7px;
+}
+
+
+
+/* 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;
+}
+
+
+.doneTekst{
+ 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, .nulliBtn{
+ margin-top: 10px;
+}
+
+.textAddWrapper{
+ margin: 10px;
+}
+
+.textAddWrapper *{
+ font-size: 2rem;
+ margin: 2px;
+ border: 2px solid black;
+ background-color: gray;
+ cursor: pointer;
+}
+
+.nulliBtn {
+ font-size: 1.2rem;
+}
+
+
+
+/* Img item stuff */
+
+.item {
+ height: 20%;
+ width: 20%;
+ position: absolute;
+ background-image: url("img/shirtImg.jpg");
+ background-repeat: no-repeat;
+ background-size: 100%;
+ top: 50vh;
+ /*
+ top: 50%;
+ right: 50%;
+ top: calc(50% - 300px);
+ right: calc(50% - 300px);
+ */
+}
+
+.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;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 04:32:27 +0000