Import from https://kk-nimilappu.vercel.app

2026-01-26 03:14:03 +00:00 · 2024-10-03 10:46:16 +03:00
commit 09f3f568cc
1 changed files with 97 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,97 @@
+
+<!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>
+      * {
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+      }
+      body {
+        margin: 10mm;
+      }
+    </style>
+    <script>
+      const handleDrop = (e) => {
+        e.preventDefault();
+        const element = e.currentTarget;
+        const file = e.dataTransfer.files[0];
+        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.');
+        }
+      };
+
+      const handleDragOver = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      };
+    </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;
+        "
+      >
+        <div style="text-align: center">
+          <figure
+            style="
+              width: 30%;
+              aspect-ratio: 1/1;
+              margin: 0 auto;
+              border-radius: 100%;
+              overflow: hidden;
+            "
+          >
+            <img
+              src="https://placehold.co/200x200"
+              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>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>