koodiklinikka/nimilaput
1
0
Fork 0
mirror of https://github.com/koodiklinikka/nimilaput.git synced 2026-01-26 03:14:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Split

Browse Source
This commit is contained in:
Aarni Koskela
2024-10-03 12:32:02 +03:00
parent ce3d2a5d1a
commit aeed56da6e
4 changed files with 151 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,3 +1,4 @@
/_scripts
node_modules
package-lock.json
pnpm-lock.yaml

155
index.html
View File

@@ -4,159 +4,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Koodiklinikka nimilappu generaattori</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
margin: 10mm;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
}
.laput {
display: flex;
flex-wrap: wrap;
gap: 5mm;
}
.lisalappu {
width: 85mm;
height: 54mm;
color: #aaa;
background: transparent;
border: 1px dashed #aaa;
font-size: 3em;
cursor: pointer;
}
.lisalappu:hover {
background: #f0f0f0;
}
@media print {
.lisalappu {
display: none;
}
body {
margin: unset;
}
input {
display: none;
}
}
.lappu {
width: 85mm;
height: 54mm;
border: 1px solid black;
padding: 10mm;
display: flex;
align-items: center;
justify-content: center;
}
.lappu figure {
position: relative;
user-select: none;
width: 30%;
aspect-ratio: 1/1;
margin: 0 auto;
border-radius: 100%;
overflow: hidden;
}
.lappu figure input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.lappu .username {
font-size: 16px;
font-weight: 400;
opacity: 0.8;
margin-top: 0.5rem;
}
.lappu .nimi {
font-size: 21px;
margin-top: 1rem;
}
</style>
<script>
function handleImage(file, element) {
if (file && file.type.startsWith("image/")) {
const reader = new FileReader();
reader.onload = (event) => {
if (event.target) {
element.src = event.target.result;
}
};
reader.readAsDataURL(file);
} else {
alert("Please drop an image file.");
}
}
function handleUpload(event) {
event.preventDefault();
const element = event.target.parentElement.querySelector("img");
handleImage(event.target.files[0], element);
}
const handleDrop = (e) => {
e.preventDefault();
const element = e.currentTarget;
const file = e.dataTransfer.files[0];
handleImage(file, element);
};
const handleDragOver = (e) => {
e.stopPropagation();
e.preventDefault();
};
const handleAdd = () => {
const laput = document.querySelector(".laput");
const template = document.querySelector("#lappu-template");
const lisalappuButton = document.querySelector(".lisalappu");
const clone = template.content.cloneNode(true);
laput.insertBefore(clone, lisalappuButton);
};
const handleYeet = (event) => {
const lappu = event.target;
if (lappu.classList.contains("lappu")) {
lappu.parentNode.removeChild(lappu);
event.preventDefault();
}
};
const handleBoot = () => {
handleAdd();
};
</script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body onload="handleBoot()">
<div class="laput">

51
script.js Normal file
View File

@@ -0,0 +1,51 @@
function handleImage(file, element) {
if (file && file.type.startsWith("image/")) {
const reader = new FileReader();
reader.onload = (event) => {
if (event.target) {
element.src = event.target.result;
}
};
reader.readAsDataURL(file);
} else {
alert("Please drop an image file.");
}
}
function handleUpload(event) {
event.preventDefault();
const element = event.target.parentElement.querySelector("img");
handleImage(event.target.files[0], element);
}
const handleDrop = (e) => {
e.preventDefault();
const element = e.currentTarget;
const file = e.dataTransfer.files[0];
handleImage(file, element);
};
const handleDragOver = (e) => {
e.stopPropagation();
e.preventDefault();
};
const handleAdd = () => {
const laput = document.querySelector(".laput");
const template = document.querySelector("#lappu-template");
const lisalappuButton = document.querySelector(".lisalappu");
const clone = template.content.cloneNode(true);
laput.insertBefore(clone, lisalappuButton);
};
const handleYeet = (event) => {
const lappu = event.target;
if (lappu.classList.contains("lappu")) {
lappu.parentNode.removeChild(lappu);
event.preventDefault();
}
};
const handleBoot = () => {
handleAdd();
};

97
style.css Normal file
View File

@@ -0,0 +1,97 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
margin: 10mm;
font-family: Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
}
.laput {
display: flex;
flex-wrap: wrap;
gap: 5mm;
}
.lisalappu {
width: 85mm;
height: 54mm;
color: #aaa;
background: transparent;
border: 1px dashed #aaa;
font-size: 3em;
cursor: pointer;
}
.lisalappu:hover {
background: #f0f0f0;
}
@media print {
.lisalappu {
display: none;
}
body {
margin: unset;
}
input {
display: none;
}
}
.lappu {
width: 85mm;
height: 54mm;
border: 1px solid black;
padding: 10mm;
display: flex;
align-items: center;
justify-content: center;
}
.lappu figure {
position: relative;
user-select: none;
width: 30%;
aspect-ratio: 1/1;
margin: 0 auto;
border-radius: 100%;
overflow: hidden;
}
.lappu figure input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.lappu .username {
font-size: 16px;
font-weight: 400;
opacity: 0.8;
margin-top: 0.5rem;
}
.lappu .nimi {
font-size: 21px;
margin-top: 1rem;
}