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

edit: liens affichés en '.plus'
edit: mise à jour des profils artistes
2026-04-21 21:10:25 +02:00 · 2026-04-21 21:08:28 +02:00 · 2026-04-21 02:26:01 +02:00 · 2026-04-21 02:00:22 +02:00 · 2026-04-21 01:59:10 +02:00 · 2026-04-21 01:56:41 +02:00
14 changed files with 189 additions and 14 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>
@@ -1769,9 +1769,9 @@
      }
    },
    "node_modules/vite": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -1,3 +1,8 @@
 [
-  "vga_nar6_ta"
+  "vga_nar6_ta", 
+  "openup42",
+  "berthasse",
+  "arlsn",
+  "djstarheartzzz",
+  "openup42"
 ]
@@ -6,5 +6,25 @@
  {
    "name": "drags_nerds",
    "folder": 2
+  },
+  {
+    "name": "berthasse",
+    "folder": 1
+  },
+  {
+    "name": "berthasse",
+    "folder": 0
+  },
+  {
+    "name": "arlsn",
+    "folder": 1
+  },
+  {
+    "name": "djstarheartzzz",
+    "folder": 1
+  },
+  {
+    "name": "openup42",
+    "folder": 1
  }
 ]
@@ -136,6 +136,7 @@ html, body{
  height: 100%;
  filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg);
  object-fit: cover;
+  transition: 7.77s ease-in;
 }

 #canvas .overlay {
@@ -300,11 +301,16 @@ html, body{
 }

 .zFocus{
+  z-index: revert;
  z-index: 1312;
  border-color: var(--accent-color);
  border-width: thick;
 }

+#artistPannel.zFocus{
+  z-index: 3333;
+}
+
 .windowTitle{
  width:100%;
  height:50px;
@@ -22,7 +22,7 @@ function titleAndContent(str){
  for(let line of contentData){
    if(line.includes('http')||line.includes('@')){
      let linkData = line.split("# ");
-      console.log(linkData[1]);
+      //console.log(linkData[1]);
      let linkNoFormat;
      let url = "";
      if (linkData[1].includes('http')){
@@ -31,7 +31,7 @@ function titleAndContent(str){
      } else if (linkData[1].includes('@')){
          url = 'mailto:' + linkData[1];
      }
-      console.log("url info", url)
+      //console.log("url info", url)
      src.push({
        caption: linkData[0],
        url: url
@@ -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
@@ -23,10 +23,10 @@
        <div id="contactText">
          <p>Si tu veux nous contacter directement, tu peux:<br>&emsp;- nous envoyer un mail<br>&emsp;- ou un DM sur insta</p>
        </div>
-        <a href="mailto:drags-nerds@epickiwi.fr" class="textBtnStyle" @touchstart.stop @mousedown.stop>
+        <a href="mailto:drags-nerds@epickiwi.fr" class="textBtnStyle" @touchstart.stop @mousedown.stop target="_blank">
          E-MAIL
        </a>
-        <a href="https://www.instagram.com/drags_nerds/?utm_source=ig_web_button_share_sheet" class="textBtnStyle" @touchstart.stop @mousedown.stop>
+        <a href="https://www.instagram.com/drags_nerds/?utm_source=ig_web_button_share_sheet" class="textBtnStyle" @touchstart.stop @mousedown.stop  target="_blank">
          INSTA
        </a>
      </div>
@@ -24,7 +24,6 @@
          <div id="linkRow">
            <a href="#" class="textBtnStyle">Lydia</a>
            <a href="#" class="textBtnStyle">Paypal</a>
-            <a href="#" class="textBtnStyle">SumUp</a>
          </div>
      </div>
    </div>
@@ -76,7 +75,7 @@
  }

  #linkRow .textBtnStyle{
-    width: 27%;
+    width: 40%;
    height: 50px;
    margin-bottom: 16.1px;
  }
@@ -104,7 +104,7 @@
    emits: ['close','focus'],
    computed: {
      selectedLink(){
-        console.log(this.selectedLink);
+        //console.log(this.selectedLink);
        return dataStorage.selectedLink
      }
    },
@@ -21,7 +21,8 @@
        </button>
      </div>
      <div class="windowContent" id="visualizerContent">
-        <video controls id="displayedImgStyle" :src="selectedVideo.src"></video>
+        <video controls id="displayedImgStyle" :src="selectedVideo.src" :type="selectedVideo.format">
+        </video>
        <div class="reactBar">
          <p class="reactStatStyle">{{selectedVideo.like}}</p>
          <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedVideo.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
@@ -42,7 +42,7 @@
          si tu as envie de participer !
          </p>
        <button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
-        <button type="button" class="textBtnStyle" @click="openPannel('donation')" v-show="false">NOUS FAIRE UNE DONATION</button>
+        <button type="button" class="textBtnStyle" @click="openPannel('donation')">NOUS FAIRE UNE DONATION</button>
        <button type="button" class="textBtnStyle" id="ticketButton" @click="openPannel('ticket')" v-show="false">RÉSERVER MA PLACE!</button>
      </div>
      <div id="btnColumn">
@@ -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')
      },
    },
  }
Author	SHA1	Message	Date
vgaNAR6ta	9a2c9bae86	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
vgaNAR6ta	43bbc053eb	edit: mise à jour des profils artistes	2026-04-21 21:08:28 +02:00
vgaNAR6ta	ace3588b8c	edit: added missing packages	2026-04-21 02:26:01 +02:00
vgaNAR6ta	c346673bd9	edit: merge conflict solved	2026-04-21 02:00:22 +02:00
vgaNAR6ta	1ec359f546	Merge branch 'vgaNAR6ta' of https://git.labolyon.fr/vgaNAR6ta/drags-and-nerds into vgaNAR6ta	2026-04-21 01:59:10 +02:00
vgaNAR6ta	5507942029	edit: bug fix z-index + video pannel + minor other bugs	2026-04-21 01:56:41 +02:00
vgaNAR6ta	72a96a7d6c	edit: lien contact vers nouvel onglet	2026-04-20 17:45:00 +02:00