add: nouvelle page /cutter pour découper post insta (juste interface sans script)

edit: liens affichés en '.plus'
2026-04-21 21:10:25 +02:00
parent 43bbc053eb
commit 9a2c9bae86
5 changed files with 145 additions and 1 deletions
@@ -0,0 +1,72 @@
+/*=============Typo*/
+@font-face {
+  font-family: 'lineal';
+  src: url('../typo/Lineal-Heavy.ttf');
+}
+
+@font-face {
+  font-family: 'pressStart2P';
+  src: url('../typo/PressStart2P-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src: url('../typo/Velvelyne-Light.ttf') format('truetype');
+  font-weight:lighter;
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src:url('../typo/Velvelyne-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+
+/*============General*/
+
+body, html {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+:root {
+    --back-color: black;
+    --main-color: white;
+    --accent-color: #3CFF00;
+    --neon-color: #3CFF00;
+
+    color: var(--main-color);
+    font-size: 1rem;
+    background: var(--back-color);
+    font-family: 'velvelyne', sans-serif;
+    font-weight: bold;
+}
+
+body > *{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 15px;
+}
+
+#welcome-panel {
+  text-align: center;
+}
+
+h1 {
+    font-family: 'lineal', sans-serif;
+    font-weight: bolder;
+}
+
+#ui-canvas {
+  display: block;
+  height: 1350px;
+  width: 1080px;
+  margin-left: auto;
+  margin-right: auto;
+}
@@ -0,0 +1,42 @@
+const CANVAS = document.getElementById("ui-canvas")
+const UI_CUTTER = new Image(CANVAS)
+const FORM = document.getElementById("cutter-form")
+
+async function updateFromForm(){
+    let data = new FormData(FORM)
+
+    let image = data.get("image")
+    if(image.size > 0){
+        if(UI_CUTTER.currentImageFile != image){
+            await UI_CUTTER.setImage(image)
+            UI_CUTTER.clearGlitch()
+        }
+    } else {
+        UI_CUTTER.clearImage()
+    }
+
+    document.getElementById("welcome-panel").hidden = image.size > 0
+    document.getElementById("glitch-panel").hidden = image.size == 0
+
+    UI_CUTTER.render()
+}
+
+FORM.addEventListener("submit", e => {
+        e.preventDefault()
+        updateFromForm()
+    })
+
+FORM.addEventListener("reset", e => {
+        FORM.elements["image"].value = ""
+        updateFromForm()
+    })
+
+document.getElementById("download-btn").addEventListener("click", async e => {
+    e.preventDefault();
+    let data = await UI_CUTTER.toBlob("image/jpeg", 1);
+    let a = document.createElement('a')
+    a.href = URL.createObjectURL(data)
+    a.download = UI_CUTTER.currentImageFile.name
+    a.click()
+    setTimeout(() => URL.revokeObjectURL(a.href), 10000)
+})
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="cutter.css">
+    <title>Insta Ninja</title>
+</head>
+<body>
+
+    <form id="cutter-form">
+        <div id="welcome-panel">
+            <h1>Insta Ninja</h1>
+            <p>Séléctionne un photo pour la découper<br>en une grille au format du feed insta</p>
+
+            <input type="file" name="image" accept="image/jpg,image/jpeg,image/png,image/webp" />
+        </div>
+        <div id="cutter-panel" hidden>
+            <canvas id="ui-canvas"></canvas>
+            <nav>
+                <button type="reset">Reset</button>
+                <button type="button" id="download-btn">Télécharger</button>
+            </nav>
+        </div>
+    </form>
+
+    <script type="module" src="cutter.js"></script>
+</body>
+</html>
@@ -129,7 +129,7 @@ export async function loadPeopleData() {
        dateInfo: selectedPouet.created_at,
        type: "link",
        author: displayName,
-        caption: textInfos.title + '.liens',
+        caption: textInfos.title + '.plus',
        links: textInfos.links,
        description: textInfos.content,
        isSelected: false
@@ -20,6 +20,7 @@ export default defineConfig({
      input: {
        main: path.resolve(import.meta.dirname, 'index.html'),
        glitcher: path.resolve(import.meta.dirname, 'glitcher/index.html'),
+        cutter: path.resolve(import.meta.dirname, 'cutter/index.html')
      },
    },
  }