From cdb5d44c00117de607befe36d3ef98ba806c2f46 Mon Sep 17 00:00:00 2001
From: Aarni Koskela <akx@iki.fi>
Date: Thu, 3 Oct 2024 10:47:41 +0300
Subject: [PATCH] Multilappu

---
 .gitignore   |   4 ++
 index.html   | 158 +++++++++++++++++++++++++++++++++++----------------
 package.json |   8 +++
 3 files changed, 122 insertions(+), 48 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 package.json
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4521b94
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
diff --git a/index.html b/index.html
index 820e71d..7b1d5f7 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e524a2d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,8 @@
+{
+  "devDependencies": {
+    "prettier": "^3.3.3"
+  },
+  "prettier": {
+    "trailingComma": "all"
+  }
+}
