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

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

8
package.json Normal file
View File

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