From c525b29ceb91c0abacfe9916aafb1b0b48d47880 Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Fri, 24 Feb 2023 17:31:06 +0200 Subject: =?UTF-8?q?Soome=20m=C3=A4ng=20added?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- rannak/mangud/partorg/kuulsused/index.html | 2 +- rannak/mangud/partorg/plakat.bak/img/avatar.png | Bin 0 -> 657556 bytes rannak/mangud/partorg/plakat.bak/img/lenin.png | Bin 0 -> 37366 bytes rannak/mangud/partorg/plakat.bak/img/nazi.png | Bin 0 -> 20381 bytes .../mangud/partorg/plakat.bak/img/normalSelect.cur | Bin 0 -> 4286 bytes rannak/mangud/partorg/plakat.bak/img/redStar.png | Bin 0 -> 39590 bytes rannak/mangud/partorg/plakat.bak/img/stalin.jpg | Bin 0 -> 168805 bytes .../mangud/partorg/plakat.bak/img/stalinAddOn.png | Bin 0 -> 976997 bytes rannak/mangud/partorg/plakat.bak/img/testImg.jpg | Bin 0 -> 498451 bytes rannak/mangud/partorg/plakat.bak/img/veekogud.jpg | Bin 0 -> 223291 bytes rannak/mangud/partorg/plakat.bak/index.html | 125 ++++++++++ rannak/mangud/partorg/plakat.bak/main.js | 224 +++++++++++++++++ rannak/mangud/partorg/plakat.bak/style.css | 188 ++++++++++++++ rannak/mangud/partorg/plakat/img/lenin.png | Bin 37366 -> 0 bytes rannak/mangud/partorg/plakat/img/malev.jpg | Bin 0 -> 498451 bytes rannak/mangud/partorg/plakat/img/nazi.png | Bin 20381 -> 0 bytes rannak/mangud/partorg/plakat/img/normalSelect.cur | Bin 4286 -> 0 bytes rannak/mangud/partorg/plakat/img/redStar.png | Bin 39590 -> 0 bytes rannak/mangud/partorg/plakat/img/stalinAddOn.png | Bin 976997 -> 0 bytes rannak/mangud/partorg/plakat/img/viisAastak.jpg | Bin 0 -> 13173619 bytes rannak/mangud/partorg/plakat/index.html | 270 ++++++++++++++++----- rannak/mangud/partorg/plakat/main.js | 222 ----------------- rannak/mangud/partorg/plakat/script.js | 117 +++++++++ rannak/mangud/partorg/plakat/style.css | 188 -------------- rannak/mangud/partorg/plakat/styles.css | 197 +++++++++++++++ 25 files changed, 1055 insertions(+), 478 deletions(-) create mode 100644 rannak/mangud/partorg/plakat.bak/img/avatar.png create mode 100644 rannak/mangud/partorg/plakat.bak/img/lenin.png create mode 100644 rannak/mangud/partorg/plakat.bak/img/nazi.png create mode 100644 rannak/mangud/partorg/plakat.bak/img/normalSelect.cur create mode 100644 rannak/mangud/partorg/plakat.bak/img/redStar.png create mode 100644 rannak/mangud/partorg/plakat.bak/img/stalin.jpg create mode 100644 rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png create mode 100644 rannak/mangud/partorg/plakat.bak/img/testImg.jpg create mode 100644 rannak/mangud/partorg/plakat.bak/img/veekogud.jpg create mode 100644 rannak/mangud/partorg/plakat.bak/index.html create mode 100644 rannak/mangud/partorg/plakat.bak/main.js create mode 100644 rannak/mangud/partorg/plakat.bak/style.css delete mode 100644 rannak/mangud/partorg/plakat/img/lenin.png create mode 100644 rannak/mangud/partorg/plakat/img/malev.jpg delete mode 100644 rannak/mangud/partorg/plakat/img/nazi.png delete mode 100644 rannak/mangud/partorg/plakat/img/normalSelect.cur delete mode 100644 rannak/mangud/partorg/plakat/img/redStar.png delete mode 100644 rannak/mangud/partorg/plakat/img/stalinAddOn.png create mode 100644 rannak/mangud/partorg/plakat/img/viisAastak.jpg delete mode 100644 rannak/mangud/partorg/plakat/main.js create mode 100644 rannak/mangud/partorg/plakat/script.js delete mode 100644 rannak/mangud/partorg/plakat/style.css create mode 100644 rannak/mangud/partorg/plakat/styles.css (limited to 'rannak/mangud/partorg') 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 @@

Olulised isikud

Kuulsused

Vii kokku inimese nimi ja nägu.

diff --git a/rannak/mangud/partorg/plakat.bak/img/avatar.png b/rannak/mangud/partorg/plakat.bak/img/avatar.png new file mode 100644 index 0000000..485a70c Binary files /dev/null and b/rannak/mangud/partorg/plakat.bak/img/avatar.png differ diff --git a/rannak/mangud/partorg/plakat.bak/img/lenin.png b/rannak/mangud/partorg/plakat.bak/img/lenin.png new file mode 100644 index 0000000..e36df3d Binary files /dev/null and b/rannak/mangud/partorg/plakat.bak/img/lenin.png differ diff --git a/rannak/mangud/partorg/plakat.bak/img/nazi.png b/rannak/mangud/partorg/plakat.bak/img/nazi.png new file mode 100644 index 0000000..87e616e Binary files /dev/null and b/rannak/mangud/partorg/plakat.bak/img/nazi.png differ diff --git a/rannak/mangud/partorg/plakat.bak/img/normalSelect.cur b/rannak/mangud/partorg/plakat.bak/img/normalSelect.cur new file mode 100644 index 0000000..fdd943c Binary files /dev/null and b/rannak/mangud/partorg/plakat.bak/img/normalSelect.cur differ diff --git a/rannak/mangud/partorg/plakat.bak/img/redStar.png b/rannak/mangud/partorg/plakat.bak/img/redStar.png new file mode 100644 index 0000000..b6eee79 Binary files /dev/null and b/rannak/mangud/partorg/plakat.bak/img/redStar.png differ diff --git a/rannak/mangud/partorg/plakat.bak/img/stalin.jpg b/rannak/mangud/partorg/plakat.bak/img/stalin.jpg new file mode 100644 index 0000000..bc0a3a5 Binary files /dev/null and b/rannak/mangud/partorg/plakat.bak/img/stalin.jpg differ diff --git a/rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png b/rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png new file mode 100644 index 0000000..d3e05fd Binary files /dev/null and b/rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png differ diff --git a/rannak/mangud/partorg/plakat.bak/img/testImg.jpg b/rannak/mangud/partorg/plakat.bak/img/testImg.jpg new file mode 100644 index 0000000..d88d950 Binary files /dev/null and b/rannak/mangud/partorg/plakat.bak/img/testImg.jpg differ diff --git a/rannak/mangud/partorg/plakat.bak/img/veekogud.jpg b/rannak/mangud/partorg/plakat.bak/img/veekogud.jpg new file mode 100644 index 0000000..23f04ab Binary files /dev/null and b/rannak/mangud/partorg/plakat.bak/img/veekogud.jpg differ 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 @@ + + + + + + Plakat + + + + + + +

+ + + + + + +

+ + +

+ + + + + + + + + + + + + + + + diff --git a/rannak/mangud/partorg/plakat.bak/main.js b/rannak/mangud/partorg/plakat.bak/main.js new file mode 100644 index 0000000..11809cb --- /dev/null +++ b/rannak/mangud/partorg/plakat.bak/main.js @@ -0,0 +1,224 @@ +document.addEventListener('DOMContentLoaded', () => { + let btn = document.querySelector('.modalButton'); + btn.click(); +}); + + +console.log("FAAAAK"); + +/* Inital Setup*/ + +const canvas = document.getElementById('drawing-board'); +const toolbar = document.getElementById('toolbar'); +const ctx = canvas.getContext('2d'); + +let canvasOffsetX = canvas.offsetLeft; +let canvasOffsetY = canvas.offsetTop; + +let CurImage = document.getElementById("stalin"); + +canvas.width = window.innerWidth - canvasOffsetX; +canvas.height = window.innerHeight - canvasOffsetY; + + + +function copyImageToCanvas(image, x, y) { + ctx.drawImage(image, 0, 0, canvas.width, canvas.height) +} + + + + +// Initial Drawring +setTimeout(() => { + copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); +}, 300); + + + +window.onresize = () => { + canvasOffsetX = canvas.offsetLeft; + canvasOffsetY = canvas.offsetTop; + canvas.width = window.innerWidth - canvasOffsetX; + canvas.height = window.innerHeight - canvasOffsetY; + copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); +} + + + + +/* EventHandlers and stuff*/ + +let addOnHasBeenAdded = false; +let addOnActive = false; +let newAddOn; +let hasPainted = false; + +let isPainting = false; +let lineWidth = 5; +let startX; +let startY; + +const pildid = new Array(); +const addOns = new Array(); + +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 + + const naziImg = document.getElementById("nazi"); + const lenin = document.getElementById("lenin"); + const redStar = document.getElementById("redStar"); + const stalinAddOn = document.getElementById("stalinAddOn"); + + addOns.push(naziImg); + addOns.push(lenin); + addOns.push(redStar); + addOns.push(stalinAddOn); + + + + + if (e.target.id === "stalin" || e.target.id === "veekogud" || e.target.id === "testing") { + for (el in pildid) { + pildid[el].classList.remove("picked"); + } + let newPicked = document.getElementById(e.target.id); + newPicked.classList.add("picked"); + + // Draw New Pick + CurImage = newPicked; + copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); + moveOnDisable(); + } + + + else if (e.target.id === 'clear') { + ctx.clearRect(0, 0, canvas.width, canvas.height); + copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); + moveOnDisable(); + } + + + else if (e.target.id === 'nazi' || e.target.id === 'lenin' || e.target.id === 'redStar' || e.target.id === 'stalinAddOn') { + addOnActive = true; + document.body.style.cursor = "url('img/normalSelect.cur'), auto"; + + for (el in addOns) { + addOns[el].classList.remove("addOnPicked"); + } + + newAddOn = document.getElementById(e.target.id); + newAddOn.classList.add("addOnPicked"); + } + + +}); + + + +canvas.addEventListener('click', e => { + + if(addOnActive == true){ + addOnActive = false; + document.body.style.cursor = "auto"; + + for (el in addOns) { + addOns[el].classList.remove("addOnPicked"); + } + + let xCord = e.offsetX - (newAddOn.clientWidth / 2) + let yCord = e.offsetY - (newAddOn.clientHeight / 2) + ctx.drawImage(newAddOn, xCord, yCord, newAddOn.clientWidth, newAddOn.clientHeight); + + + addOnHasBeenAdded = true; + if (hasPainted) + moveOnEnable(); + } +}); + + + + + + + + +/* Drawing stuff from here */ + +toolbar.addEventListener('change', e => { + if(e.target.id === 'stroke') { + ctx.strokeStyle = e.target.value; + } + + if(e.target.id === 'lineWidth') { + lineWidth = e.target.value; + } + +}); + + + +const draw = (e) => { + if(!isPainting) { + return; + } + + ctx.lineWidth = lineWidth; + ctx.lineCap = 'round'; + + ctx.lineTo(e.clientX - canvasOffsetX, e.clientY); + //ctx.lineTo(e.clientX - abiOffset, e.clientY); + ctx.stroke(); + + hasPainted = true; + if (addOnHasBeenAdded) + moveOnEnable(); +} + + + +canvas.addEventListener('mousedown', (e) => { + isPainting = true; + startX = e.clientX; + startY = e.clientY; +}); + + + +canvas.addEventListener('mouseup', e => { + isPainting = false; + ctx.stroke(); + ctx.beginPath(); +}); + + +canvas.addEventListener('mousemove', draw); + + + + +// Move On Stuff + +function moveOnEnable(){ + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = "../sonaragastik"; +} + +function moveOnDisable(){ + const btn = document.querySelector(".moveOn"); + btn.disabled = true; +} diff --git a/rannak/mangud/partorg/plakat.bak/style.css b/rannak/mangud/partorg/plakat.bak/style.css new file mode 100644 index 0000000..215c073 --- /dev/null +++ b/rannak/mangud/partorg/plakat.bak/style.css @@ -0,0 +1,188 @@ +body { + height: 100%; + overflow: hidden; + color: white; + background-color: #43464b; +} + +h1 { + color: #a1000e; + font-weight: bold; +} + + +/* Move on ja Sissejuhatus Button */ + +.avatar { + border-radius: 20px; + width: 100%; + max-width: 15rem; +} + + +.modalHeaderWrapper{ + text-align: center; + margin: 0; + width: 100%; +} + +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; +} + +/* Modal Stuff */ + + +.closeModalButton { + border-radius: 50px; +} + +.modalButton{ + background-color: rgba(0,136,169,1); + border: none; + border-radius: 50px; + cursor: pointer; + transition: all 0.3 ease 0; + font-size: 1.2rem; + text-align: center; + margin-left: 30px; +} + +.modalButton:hover{ + background-color: rgba(0,136,169,0.8); +} + + + +/* Main */ + +.wrapper { + height: 100%; + display: flex; +} + +/* Toolbar */ +.intro{ + text-align: center; + border-bottom: 2px solid gray; + padding: 7px; +} + + +#toolbar { + display: flex; + flex-direction: column; + align-items: center; + padding: 5px; + width: 20%; + min-width:350px; + background-color: #43464b; +} + +#clear{ + background-color: #1565c0; + border: none; + border-radius: 4px; + font-size:1.3rem; + color:white; + padding: 2px; +} + +#toolbar * {margin-bottom: 6px;} +#toolbar input {width: 4rem;} + +.toolbarDiv {width: 100%;} + +form { + display: flex; + align-items: center; +} + +label { + display: table-cell; + font-size: 1.2rem; +} + + + +/* Img Picker */ +.pickingSec { + height: 50%; + overflow: hidden; + overflow-y: scroll; +} + + +.valiTxt { + border-bottom: 4px solid gray; + padding-top: 10px; +} + + +.picked{ + border: 2px solid lime; +} + + +.addOnPicked{ + border: 2px solid aqua; +} + + + +.pickImg { + width: 50%; + height: auto; + padding: 10px; + margin-left: calc(25% - 5px); +} + + + +/* Canvas */ +canvas{ + display: block; + margin: 0 auto; +} + + + + + +/* Responsivness */ + +@media screen and (max-width: 1400px) { + .pickImg { + width: 30%; + height: auto; + padding: 7px; + margin-left: calc(7% - 21px); + } + +} + + +@media screen and (max-width: 900px) { + .pickImg { + width: 24%; + height: auto; + padding: 3px; + margin-left: calc(1% - 10px); + } + +} diff --git a/rannak/mangud/partorg/plakat/img/lenin.png b/rannak/mangud/partorg/plakat/img/lenin.png deleted file mode 100644 index e36df3d..0000000 Binary files a/rannak/mangud/partorg/plakat/img/lenin.png and /dev/null differ diff --git a/rannak/mangud/partorg/plakat/img/malev.jpg b/rannak/mangud/partorg/plakat/img/malev.jpg new file mode 100644 index 0000000..d88d950 Binary files /dev/null and b/rannak/mangud/partorg/plakat/img/malev.jpg differ diff --git a/rannak/mangud/partorg/plakat/img/nazi.png b/rannak/mangud/partorg/plakat/img/nazi.png deleted file mode 100644 index 87e616e..0000000 Binary files a/rannak/mangud/partorg/plakat/img/nazi.png and /dev/null differ diff --git a/rannak/mangud/partorg/plakat/img/normalSelect.cur b/rannak/mangud/partorg/plakat/img/normalSelect.cur deleted file mode 100644 index fdd943c..0000000 Binary files a/rannak/mangud/partorg/plakat/img/normalSelect.cur and /dev/null differ diff --git a/rannak/mangud/partorg/plakat/img/redStar.png b/rannak/mangud/partorg/plakat/img/redStar.png deleted file mode 100644 index b6eee79..0000000 Binary files a/rannak/mangud/partorg/plakat/img/redStar.png and /dev/null differ diff --git a/rannak/mangud/partorg/plakat/img/stalinAddOn.png b/rannak/mangud/partorg/plakat/img/stalinAddOn.png deleted file mode 100644 index d3e05fd..0000000 Binary files a/rannak/mangud/partorg/plakat/img/stalinAddOn.png and /dev/null differ diff --git a/rannak/mangud/partorg/plakat/img/viisAastak.jpg b/rannak/mangud/partorg/plakat/img/viisAastak.jpg new file mode 100644 index 0000000..20be6ed Binary files /dev/null and b/rannak/mangud/partorg/plakat/img/viisAastak.jpg differ 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 @@ - - Plakat + + Plakatid - + - -

+ + +

@@ -92,7 +49,6 @@

@@ -115,7 +70,188 @@ - + +

+ + +

+ + + +

+ +

+ Testing Testing +

+ +

+ + + + Lisa Tekst + + + +

+ + + + +

+ +

+ + + +

+ +

+ Veekogud +

+ +

+ + + Lisa Tekst + + + +

+ + + + +

+ +

+ + + + + + + + +

+ +

+ Malev +

+ +

+ + + Lisa Tekst + + + +

+ + + + +

+ + +

+ +

+ + + +

+ +

+ ViisAastak +

+ +

+ + + Lisa Tekst + + + +

+ + + + +

+ + +

+ +

+ + + + + +

+ + + + + diff --git a/rannak/mangud/partorg/plakat/main.js b/rannak/mangud/partorg/plakat/main.js deleted file mode 100644 index 9ae8e54..0000000 --- a/rannak/mangud/partorg/plakat/main.js +++ /dev/null @@ -1,222 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - let btn = document.querySelector('.modalButton'); - btn.click(); -}); - - -console.log("FAAAAK"); - -/* Inital Setup*/ - -const canvas = document.getElementById('drawing-board'); -const toolbar = document.getElementById('toolbar'); -const ctx = canvas.getContext('2d'); - -let canvasOffsetX = canvas.offsetLeft; -let canvasOffsetY = canvas.offsetTop; - -let CurImage = document.getElementById("stalin"); - -canvas.width = window.innerWidth - canvasOffsetX; -canvas.height = window.innerHeight - canvasOffsetY; - - - -function copyImageToCanvas(image, x, y) { - ctx.drawImage(image, 0, 0, canvas.width, canvas.height) -} - - - - -// Initial Drawring -setTimeout(() => { - copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); -}, 300); - - - -window.onresize = () => { - canvasOffsetX = canvas.offsetLeft; - canvasOffsetY = canvas.offsetTop; - canvas.width = window.innerWidth - canvasOffsetX; - canvas.height = window.innerHeight - canvasOffsetY; - copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); -} - - - - -/* EventHandlers and stuff*/ - -let addOnHasBeenAdded = false; -let addOnActive = false; -let newAddOn; -let hasPainted = false; - -let isPainting = false; -let lineWidth = 5; -let startX; -let startY; - -const pildid = new Array(); -const addOns = new Array(); - -toolbar.addEventListener('click', e => { - - - //Plakatid - const stalinImg = document.getElementById("stalin"); - const veekogudImg = document.getElementById("veekogud"); - - pildid.push(stalinImg); - pildid.push(veekogudImg); - - - //Addons - - const naziImg = document.getElementById("nazi"); - const lenin = document.getElementById("lenin"); - const redStar = document.getElementById("redStar"); - const stalinAddOn = document.getElementById("stalinAddOn"); - - addOns.push(naziImg); - addOns.push(lenin); - addOns.push(redStar); - addOns.push(stalinAddOn); - - - - - if (e.target.id === "stalin" || e.target.id === "veekogud") { - for (el in pildid) { - pildid[el].classList.remove("picked"); - } - let newPicked = document.getElementById(e.target.id); - newPicked.classList.add("picked"); - - // Draw New Pick - CurImage = newPicked; - copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); - moveOnDisable(); - } - - - else if (e.target.id === 'clear') { - ctx.clearRect(0, 0, canvas.width, canvas.height); - copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); - moveOnDisable(); - } - - - else if (e.target.id === 'nazi' || e.target.id === 'lenin' || e.target.id === 'redStar' || e.target.id === 'stalinAddOn') { - addOnActive = true; - document.body.style.cursor = "url('img/normalSelect.cur'), auto"; - - for (el in addOns) { - addOns[el].classList.remove("addOnPicked"); - } - - newAddOn = document.getElementById(e.target.id); - newAddOn.classList.add("addOnPicked"); - } - - -}); - - - -canvas.addEventListener('click', e => { - - if(addOnActive == true){ - addOnActive = false; - document.body.style.cursor = "auto"; - - for (el in addOns) { - addOns[el].classList.remove("addOnPicked"); - } - - let xCord = e.offsetX - (newAddOn.clientWidth / 2) - let yCord = e.offsetY - (newAddOn.clientHeight / 2) - ctx.drawImage(newAddOn, xCord, yCord, newAddOn.clientWidth, newAddOn.clientHeight); - - - addOnHasBeenAdded = true; - if (hasPainted) - moveOnEnable(); - } -}); - - - - - - - - -/* Drawing stuff from here */ - -toolbar.addEventListener('change', e => { - if(e.target.id === 'stroke') { - ctx.strokeStyle = e.target.value; - } - - if(e.target.id === 'lineWidth') { - lineWidth = e.target.value; - } - -}); - - - -const draw = (e) => { - if(!isPainting) { - return; - } - - ctx.lineWidth = lineWidth; - ctx.lineCap = 'round'; - - ctx.lineTo(e.clientX - canvasOffsetX, e.clientY); - //ctx.lineTo(e.clientX - abiOffset, e.clientY); - ctx.stroke(); - - hasPainted = true; - if (addOnHasBeenAdded) - moveOnEnable(); -} - - - -canvas.addEventListener('mousedown', (e) => { - isPainting = true; - startX = e.clientX; - startY = e.clientY; -}); - - - -canvas.addEventListener('mouseup', e => { - isPainting = false; - ctx.stroke(); - ctx.beginPath(); -}); - - -canvas.addEventListener('mousemove', draw); - - - - -// Move On Stuff - -function moveOnEnable(){ - const btn = document.querySelector(".moveOn"); - btn.disabled = false; - btn.onclick = () => location.href = "../sonaragastik"; -} - -function moveOnDisable(){ - const btn = document.querySelector(".moveOn"); - btn.disabled = true; -} 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/style.css b/rannak/mangud/partorg/plakat/style.css deleted file mode 100644 index 215c073..0000000 --- a/rannak/mangud/partorg/plakat/style.css +++ /dev/null @@ -1,188 +0,0 @@ -body { - height: 100%; - overflow: hidden; - color: white; - background-color: #43464b; -} - -h1 { - color: #a1000e; - font-weight: bold; -} - - -/* Move on ja Sissejuhatus Button */ - -.avatar { - border-radius: 20px; - width: 100%; - max-width: 15rem; -} - - -.modalHeaderWrapper{ - text-align: center; - margin: 0; - width: 100%; -} - -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; -} - -/* Modal Stuff */ - - -.closeModalButton { - border-radius: 50px; -} - -.modalButton{ - background-color: rgba(0,136,169,1); - border: none; - border-radius: 50px; - cursor: pointer; - transition: all 0.3 ease 0; - font-size: 1.2rem; - text-align: center; - margin-left: 30px; -} - -.modalButton:hover{ - background-color: rgba(0,136,169,0.8); -} - - - -/* Main */ - -.wrapper { - height: 100%; - display: flex; -} - -/* Toolbar */ -.intro{ - text-align: center; - border-bottom: 2px solid gray; - padding: 7px; -} - - -#toolbar { - display: flex; - flex-direction: column; - align-items: center; - padding: 5px; - width: 20%; - min-width:350px; - background-color: #43464b; -} - -#clear{ - background-color: #1565c0; - border: none; - border-radius: 4px; - font-size:1.3rem; - color:white; - padding: 2px; -} - -#toolbar * {margin-bottom: 6px;} -#toolbar input {width: 4rem;} - -.toolbarDiv {width: 100%;} - -form { - display: flex; - align-items: center; -} - -label { - display: table-cell; - font-size: 1.2rem; -} - - - -/* Img Picker */ -.pickingSec { - height: 50%; - overflow: hidden; - overflow-y: scroll; -} - - -.valiTxt { - border-bottom: 4px solid gray; - padding-top: 10px; -} - - -.picked{ - border: 2px solid lime; -} - - -.addOnPicked{ - border: 2px solid aqua; -} - - - -.pickImg { - width: 50%; - height: auto; - padding: 10px; - margin-left: calc(25% - 5px); -} - - - -/* Canvas */ -canvas{ - display: block; - margin: 0 auto; -} - - - - - -/* Responsivness */ - -@media screen and (max-width: 1400px) { - .pickImg { - width: 30%; - height: auto; - padding: 7px; - margin-left: calc(7% - 21px); - } - -} - - -@media screen and (max-width: 900px) { - .pickImg { - width: 24%; - height: auto; - padding: 3px; - margin-left: calc(1% - 10px); - } - -} 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; +} + + + -- cgit v1.2.3

Olulised isikud

Kuulsused

Kujunda Plakatit

Vali Plakat

Kujunda Plakatit

Vali Plakat

Plakatid

Vali Lisasid