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

Multilappu

Browse Source
This commit is contained in:
Aarni Koskela
2024-10-03 10:47:41 +03:00
parent 09f3f568cc
commit cdb5d44c00
3 changed files with 122 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
node_modules
package-lock.json
pnpm-lock.yaml
yarn.lock

158
index.html
View File

@@ -1,18 +1,93 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Koodiklinikka nimilappu generaattori</title> <title>Koodiklinikka nimilappu generaattori</title>
<style> <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; box-sizing: border-box;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
body { body {
margin: 10mm; 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;
}
}
.lappu {
width: 85mm;
height: 54mm;
border: 1px solid black;
padding: 10mm;
display: flex;
align-items: center;
justify-content: center;
}
.lappu figure {
user-select: none;
width: 30%;
aspect-ratio: 1/1;
margin: 0 auto;
border-radius: 100%;
overflow: hidden;
}
.lappu .username {
font-size: 16px;
font-weight: 400;
opacity: 0.8;
margin-top: 0.5rem;
}
.lappu .nimi {
font-size: 21px;
margin-top: 1rem;
} }
</style> </style>
<script> <script>
@@ -20,7 +95,7 @@
e.preventDefault(); e.preventDefault();
const element = e.currentTarget; const element = e.currentTarget;
const file = e.dataTransfer.files[0]; const file = e.dataTransfer.files[0];
if (file && file.type.startsWith('image/')) { if (file && file.type.startsWith("image/")) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (event) => { reader.onload = (event) => {
if (event.target) { if (event.target) {
@@ -29,7 +104,7 @@
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} else { } else {
alert('Please drop an image file.'); alert("Please drop an image file.");
} }
}; };
@@ -37,61 +112,48 @@
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); 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> </script>
</head> </head>
<body <body onload="handleBoot()">
style=" <div class="laput">
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', <button class="lisalappu" onclick="handleAdd()">+</button>
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', </div>
sans-serif; <template id="lappu-template">
" <div class="lappu" ondblclick="handleYeet(event)">
>
<div>
<div
style="
width: 85mm;
height: 54mm;
border: 1px solid black;
padding: 10mm;
display: flex;
align-items: center;
justify-content: center;
"
>
<div style="text-align: center"> <div style="text-align: center">
<figure <figure>
style="
width: 30%;
aspect-ratio: 1/1;
margin: 0 auto;
border-radius: 100%;
overflow: hidden;
"
>
<img <img
src="https://placehold.co/200x200" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg=="
alt="Matti Meikäläinen" alt="Matti Meikäläinen"
style="width: 100%; height: 100%; object-fit: cover" style="width: 100%; height: 100%; object-fit: cover"
onDrop="handleDrop(event)" onDrop="handleDrop(event)"
onDragOver="handleDragOver(event)" onDragOver="handleDragOver(event)"
/> />
</figure> </figure>
<h1 contenteditable style="font-size: 21px; margin-top: 1rem"> <h1 contenteditable class="nimi">Matti Meikäläinen</h1>
Matti Meikäläinen <h2 class="username" contenteditable>@mattimeikalainen</h2>
</h1>
<h2
contenteditable
style="
font-size: 16px;
font-weight: 400;
opacity: 0.8;
margin-top: 0.5rem;
"
>
@mattimeikalainen
</h2>
</div> </div>
</div> </div>
</div> </template>
</body> </body>
</html> </html>

8
package.json Normal file
View File

@@ -0,0 +1,8 @@
{
"devDependencies": {
"prettier": "^3.3.3"
},
"prettier": {
"trailingComma": "all"
}
}