edit: insta cutter maintenant ajusté à tous les trucs de merde d'insta x333

edit: description vide et parsing du texte
edit: donations + modif gestion post non-formaté
2026-05-06 06:09:38 +02:00 · 2026-04-26 18:39:14 +02:00 · 2026-04-26 16:47:34 +02:00 · 2026-04-22 01:22:33 +02:00 · 2026-04-21 21:10:25 +02:00 · 2026-04-21 21:08:28 +02:00
28 changed files with 1143 additions and 51 deletions
@@ -0,0 +1,112 @@
+/*=============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 {
+  min-width: 100vw;
+  min-height: 100vh;
+  overflow: auto;
+}
+
+: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;
+}
+
+/*===================Animation*/
+@keyframes blink {
+  0%   { color: var(--accent-color);}
+  15%  { color: var(--main-color);}
+  35%  { color: var(--main-color);}
+  50%  { color: var(--accent-color);}
+  65%  { color: var(--main-color);}
+  85%  { color: var(--main-color);}
+  100%  { color: var(--accent-color);}
+}
+
+/*===================Layout*/
+#welcome-panel {
+  text-align: center;
+}
+
+#welcome-panel strong{
+  font-family:'lineal';
+  font-weight: normal;
+  font-size: 22.2px;
+}
+
+h1 {
+    font-family: 'lineal', sans-serif;
+    font-weight: bolder;
+}
+
+h2{
+  font-family: 'pressStart2P';
+  font-size: 13.12px;
+  font-weight: normal;
+  animation: blink 1.61s infinite;
+}
+
+#ui-canvas {
+  display: block;
+  height: 1350px;
+  width: 1080px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+canvas{
+  max-width: 100%;
+}
+
+#cutter-panel{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 3.33px;
+  margin-top: 13.12px;
+}
+
+#download{
+  margin: 7.77px;
+}
@@ -0,0 +1,47 @@
+const FORM = document.getElementById("cutter-form")
+const BUTTON = document.getElementById("download")
+const IMAGE = new Image()
+let rowCount
+let maxCount
+
+FORM.addEventListener("submit", e => {
+        e.preventDefault()
+        const data = new FormData(FORM)
+        IMAGE.src = URL.createObjectURL(data.get('image'))
+        rowCount = data.get('rows')
+        console.log('ça marche :', data)
+    })
+
+IMAGE.addEventListener('load', e => {
+    document.getElementById('cutter-panel').replaceChildren()
+    for(let i = 0; i<rowCount; i++){
+        for (let j = 0; j<3; j++){
+            let e = document.createElement('canvas')
+            e.width = 1080
+            e.height = 1350
+            let context = e.getContext('2d')
+            context.fillStyle = 'black'
+            context.drawImage(IMAGE,
+                j*(1080*0.94), i*1350,
+                1080*0.94, 1350,
+                1080*0.03, 0,
+                1080*0.94, 1350
+            )
+            document.getElementById('cutter-panel').append(e)
+        }
+    }
+})
+
+BUTTON.addEventListener('click', e => {
+    let imgList = document.querySelectorAll('canvas')
+    maxCount = imgList.length
+    for (let [i, img] of imgList.entries()){
+        img.toBlob(b => {
+            let aEl = document.createElement('a')
+            let index = maxCount - i
+            aEl.href = URL.createObjectURL(b)
+            aEl.download = 'img-' + index + '.jpg'
+            aEl.click()
+        },'image/jpeg',1)
+    }
+})
@@ -0,0 +1,30 @@
+<!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>
+            <h2>Séléctionne un photo pour la découper<br>en une grille au format du feed insta<br></h2>
+            <p><strong>Attention :</strong> pour un permettre le bon affichage de la miniature sur le feed,<br>
+              il faut que <strong>la largeur de l'image d'entrée soit de 3 x (1080 x 0.94) = 3045 px</strong><br><br>
+              Pour la hauteur, il suffit de multiplier 1350 par le nombre de ligne voulu<br><br>
+              Ex : pour 6 post, soit <strong>2 lignes sur les 3 colonnes</strong> qui sont imposées par insta<br>
+              il faut que le format de l'image que tu crée soit <strong>3045 px de large par 2700 px de haut</strong></p>
+                <input type="number" name="rows" value="2" min="1">
+            <input type="file" name="image" accept="image/jpg,image/jpeg,image/png,image/webp" required/>
+            <button>Cut !</button>
+        </div>
+        <div id="cutter-panel">
+        </div>
+        <button id="download">Télécharger !</button>
+    </form>
+
+    <script type="module" src="cutter.js"></script>
+</body>
+</html>
@@ -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;
+  max-width: calc(100vw - 30px);
+  max-height: calc(100vh - 30px);
+  margin-left: auto;
+  margin-right: auto;
+}
@@ -0,0 +1,112 @@
+import { Glitcher } from "./lib/glitcher";
+
+const CANVAS = document.getElementById("ui-canvas")
+const UI_GLITCHER = new Glitcher(CANVAS)
+const FORM = document.getElementById("glitcher-form")
+
+async function updateFromForm(){
+    let data = new FormData(FORM)
+    
+    let image = data.get("image")
+    if(image.size > 0){
+        if(UI_GLITCHER.currentImageFile != image){
+            await UI_GLITCHER.setImage(image)
+            UI_GLITCHER.clearGlitch()
+        }
+    } else {
+        UI_GLITCHER.clearImage()
+    }
+
+    document.getElementById("welcome-panel").hidden = image.size > 0
+    document.getElementById("glitch-panel").hidden = image.size == 0
+    
+    UI_GLITCHER.render()
+}
+
+for(let el of FORM.elements){
+    el.addEventListener("change", () => FORM.requestSubmit())
+}
+
+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_GLITCHER.toBlob("image/jpeg", 0.9);
+    let a = document.createElement('a')
+    a.href = URL.createObjectURL(data)
+    a.download = UI_GLITCHER.currentImageFile.name
+    a.click()
+    setTimeout(() => URL.revokeObjectURL(a.href), 10000)
+})
+
+CANVAS.addEventListener("pointerdown", e => {
+    let pointerId = e.pointerId;
+
+    let lastX = undefined;
+    let lastY = undefined;
+    let lastCommit = null;
+
+    function applyGlitch(e){
+        if(e.pointerId != pointerId){
+            return
+        }
+
+        let canvasRect = CANVAS.getBoundingClientRect()
+        let x = e.clientX - canvasRect.left
+        let y = e.clientY - canvasRect.top
+
+        let now = Date.now()
+
+        if(lastCommit === null || now - lastCommit > 100){
+            let width = 50;
+            if(e.pointerType == "touch"){
+                width *= 2
+            }
+            
+            let deltaX = lastX !== undefined ? x - lastX : 0
+            let deltaY = lastY !== undefined ? y - lastY : 0
+
+            width += Math.max(Math.abs(deltaX), Math.abs(deltaY))
+            width += Math.random()*2
+
+            UI_GLITCHER.addGlitch(x, y, width)
+            UI_GLITCHER.render()
+
+            lastCommit = now
+        }
+
+        lastX = x
+        lastY = y
+    }
+
+    function endGlitch(e){
+        if(e.pointerId != pointerId){
+            return
+        }
+
+        window.removeEventListener("pointermove", applyGlitch)
+        window.removeEventListener("pointerup", endGlitch)
+    }
+
+    window.addEventListener("pointerup", endGlitch)
+    window.addEventListener("pointermove", applyGlitch)
+
+    applyGlitch(e)
+})
+
+/*function startRendering(){
+    UI_GLITCHER.render()
+    requestAnimationFrame(startRendering)
+}
+startRendering()*/
+
+setInterval(() => UI_GLITCHER.render(), 500)
+updateFromForm()
@@ -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="glitcher.css">
+    <title>Drags&Nerds Glitcher</title>
+</head>
+<body>
+
+    <form id="glitcher-form">
+        <div id="welcome-panel">
+            <h1>Glitcher</h1>
+            <p>Séléctionne un photo pour la glitcher</p>
+
+            <input type="file" name="image" accept="image/jpg, image/jpeg,image/png,image/webp" />
+        </div>
+        <div id="glitch-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="glitcher.js"></script>
+</body>
+</html>
@@ -0,0 +1,7 @@
+varying highp vec2 vTextureCoord;
+uniform sampler2D uImageSampler;
+uniform highp vec2 uWindowSize;
+
+void main() {
+    gl_FragColor = texture2D(uImageSampler, vTextureCoord);
+}
@@ -0,0 +1,9 @@
+attribute vec2 aVertexPosition;
+attribute vec2 aTextureCoord;
+
+varying highp vec2 vTextureCoord;
+
+void main() {
+    gl_Position = vec4(aVertexPosition, 0.0, 1.0);
+    vTextureCoord = aTextureCoord;
+}
@@ -0,0 +1,10 @@
+uniform highp vec2 uWindowSize;
+uniform sampler2D uVideoSampler;
+uniform sampler2D uNoiseSampler;
+uniform lowp vec4 uRandom;
+
+void main() {
+    gl_FragColor = texture2D(uVideoSampler, gl_FragCoord.xy/uWindowSize.xy)
+        + (texture2D(uNoiseSampler, (gl_FragCoord.xy/vec2(128, 128))+uRandom.zw) - 0.75)
+        * texture2D(uNoiseSampler, (gl_FragCoord.xy/vec2(128, 128))+uRandom.xw);
+}
@@ -0,0 +1,22 @@
+attribute vec2 aVertexPosition;
+attribute vec2 aTextureCoord;
+
+uniform vec2 uGlitchPosition;
+uniform float uGlitchWidth;
+uniform lowp vec4 uRandom;
+uniform vec2 uImageRatio;
+
+varying highp vec2 vTextureCoord;
+
+void main() {
+    vec2 vertex = aVertexPosition.xy;
+
+    vertex *= uImageRatio;
+    vertex *= 0.001;
+    vertex *= uGlitchWidth;
+    vertex += uGlitchPosition;
+    vertex += uRandom.xy*0.01;
+
+    gl_Position = vec4(vertex, -1.0, 1.0);
+}
+
@@ -0,0 +1,416 @@
+import resizeToFit from 'intrinsic-scale'
+
+import noiseUrl from "../noise-power.png"
+
+import baseVertSource from "./base.vert?raw"
+import baseFragSource from "./base.frag?raw"
+
+import glitchVertSource from "./glitch.vert?raw"
+import glitchFragSource from "./glitch.frag?raw"
+
+export class Glitcher {
+
+    /** @type {HTMLCanvasElement} */
+    canvas
+
+    glitches = []
+
+    /**
+     * @param {HTMLCanvasElement} canvas
+     */
+    constructor(canvas) {
+        this.canvas = canvas
+        this.videoCanvas = new OffscreenCanvas(10, 10);
+        this.video = document.createElement("video")
+        this.init()
+    }
+
+    init(){
+        this.video.muted = true
+        this.video.loop = true
+        this.video.autoplay = true
+        this.video.src = "/background.webm"
+        this.video.addEventListener("canplay", e => this.video.play())
+
+        this.ctx = this.canvas.getContext("webgl")
+        if(!this.ctx){
+            throw new Error("WebGL isn't supported")
+        }
+
+        let baseProgram = createProgram(this.ctx, baseVertSource, baseFragSource);
+
+        let panelPositionBuffer = this.ctx.createBuffer()
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, panelPositionBuffer)
+        const positions = [
+              -1.0,  1.0,
+               1.0,  1.0,
+              -1.0, -1.0,
+               1.0, -1.0,
+        ]
+        this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(positions), this.ctx.STATIC_DRAW)
+
+        let panelUVBuffer = this.ctx.createBuffer()
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, panelUVBuffer)
+        const uv = [
+              0.0, 0.0,
+              1.0, 0.0,
+              0.0, 1.0,
+              1.0, 1.0,
+        ]
+        this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(uv), this.ctx.STATIC_DRAW)
+
+        let imageTexture = this.ctx.createTexture()
+
+        this.base = {
+            program: baseProgram,
+            aVertexPosition: this.ctx.getAttribLocation(baseProgram, "aVertexPosition"),
+            aTextureCoord: this.ctx.getAttribLocation(baseProgram, "aTextureCoord"),
+            uImageSampler: this.ctx.getUniformLocation(baseProgram, "uImageSampler"),
+            uWindowSize: this.ctx.getUniformLocation(baseProgram, "uWindowSize"),
+            imageTexture: imageTexture,
+            panelUVBuffer: panelUVBuffer,
+            panelPositionsBuffer: panelPositionBuffer,
+        }
+        this.clearImage();
+
+        let glitchPositionBuffer = this.ctx.createBuffer()
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, glitchPositionBuffer)
+        const glitchPosition = [
+            -1.0,  1.0,
+            1.0,  1.0,
+            -1.0, -1.0,
+            1.0, -1.0,
+        ]
+        this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(glitchPosition), this.ctx.STATIC_DRAW)
+        
+        let glitchProgram = createProgram(this.ctx, glitchVertSource, glitchFragSource)
+        let videoFrameTexture = this.ctx.createTexture()
+
+        let noiseTexture = this.ctx.createTexture()
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, noiseTexture)
+        this.ctx.texImage2D(
+            this.ctx.TEXTURE_2D,
+            0,
+            this.ctx.RGBA,
+            1, 1,
+            0,
+            this.ctx.RGBA,
+            this.ctx.UNSIGNED_BYTE,
+            new Uint8Array([0, 0, 0, 0])
+        )
+
+        let noiseImage = new Image()
+        noiseImage.addEventListener("load", () => {
+            this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.noiseTexture)
+            this.ctx.texImage2D(
+                this.ctx.TEXTURE_2D,
+                0,
+                this.ctx.RGBA,
+                this.ctx.RGBA,
+                this.ctx.UNSIGNED_BYTE,
+                noiseImage
+            )
+
+            this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.REPEAT);
+            this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.REPEAT);
+            this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.NEAREST);
+            this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.NEAREST);
+        })
+        noiseImage.src = noiseUrl
+
+        this.glitch = {
+            program: glitchProgram,
+            aVertexPosition: this.ctx.getAttribLocation(glitchProgram, "aVertexPosition"),
+            uGlitchPosition: this.ctx.getUniformLocation(glitchProgram, "uGlitchPosition"),
+            uGlitchWidth: this.ctx.getUniformLocation(glitchProgram, "uGlitchWidth"),
+            uImageRatio: this.ctx.getUniformLocation(glitchProgram, "uImageRatio"),
+            uWindowSize: this.ctx.getUniformLocation(glitchProgram, "uWindowSize"),
+            uVideoSampler: this.ctx.getUniformLocation(glitchProgram, "uVideoSampler"),
+            uNoiseSampler: this.ctx.getUniformLocation(glitchProgram, "uNoiseSampler"),
+            uRandom: this.ctx.getUniformLocation(glitchProgram, "uRandom"),
+            glitchPositionBuffer: glitchPositionBuffer,
+            videoFrameTexture: videoFrameTexture,
+            noiseTexture: noiseTexture
+        }
+
+        console.log(this.glitch)
+    }
+
+    clearImage(){
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.base.imageTexture)
+        this.ctx.texImage2D(
+            this.ctx.TEXTURE_2D,
+            0,
+            this.ctx.RGBA,
+            1, 1,
+            0,
+            this.ctx.RGBA,
+            this.ctx.UNSIGNED_BYTE,
+            new Uint8Array([0, 0, 0, 0])
+        )
+    }
+
+    clearGlitch(){
+        this.glitches = []
+    }
+
+    addGlitch(x, y, width=1){
+        let computedStyle = window.getComputedStyle(this.canvas)
+        let clientWidth = parseFloat(computedStyle.width)
+        let clientHeight = parseFloat(computedStyle.height)
+
+        this.glitches.push({
+            x: ((x*2)/clientWidth)-1,
+            y: (((y*2)/clientHeight)-1)*-1,
+            width
+        })
+    }
+
+    /**
+     * @param {File} imageFile 
+     */
+    async setImage(imageFile){
+        if(imageFile == this.currentImageFile){
+            return
+        }
+
+        if(this.currentImage){
+            URL.revokeObjectURL(this.currentImage.src)
+        }
+
+        let image = new Image()
+        const loadProm = new Promise((res, rej) => {
+            function ok(){
+                image.removeEventListener("error", nok)
+                res()
+            }
+
+            function nok(){
+                image.removeEventListener("load", ok)
+                rej()
+            }
+
+            image.addEventListener("load", ok)
+            image.addEventListener("error", nok)
+        })
+        image.src = URL.createObjectURL(imageFile)
+
+        try {
+            await loadProm
+        } catch(e) {
+            URL.revokeObjectURL(image.src)
+            throw e
+        }
+        this.resize(image.width, image.height)
+
+        this.currentImageFile = imageFile
+        this.currentImage = image
+
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.base.imageTexture)
+        this.ctx.texImage2D(
+            this.ctx.TEXTURE_2D,
+            0,
+            this.ctx.RGBA,
+            this.ctx.RGBA,
+            this.ctx.UNSIGNED_BYTE,
+            this.currentImage
+        )
+
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR);
+    }
+
+    async toBlob(type, quality) {
+        this.resize(this.currentImage.width, this.currentImage.height, true)
+        this.render()
+        let blob = await new Promise((res, rej) => this.canvas.toBlob((imageBlob) => {
+            if(imageBlob){
+                res(imageBlob)
+            } else {
+                rej()
+            }
+        }, type, quality))
+        this.resize(this.currentImage.width, this.currentImage.height, false)
+        return blob
+    }
+
+    resize(width, height, force=false){
+        if(!force){
+
+            let computedStyle = window.getComputedStyle(this.canvas)
+            let maxWidth = parseFloat(computedStyle["max-width"])
+            let maxHeight = parseFloat(computedStyle["max-height"])
+            
+            if(window.devicePixelRatio){
+                maxWidth *= window.devicePixelRatio
+                maxHeight *= window.devicePixelRatio
+            }
+
+            if(Number.isNaN(maxWidth)){
+                maxWidth = width
+            }
+
+            if(Number.isNaN(maxHeight)){
+                maxHeight = height
+            }
+
+            let resize = resizeToFit("contain", {width, height}, {width: maxWidth, height: maxHeight})
+
+            this.canvas.width = resize.width
+            this.canvas.height = resize.height
+
+        } else {
+            this.canvas.width = width
+            this.canvas.height = height
+        }
+
+        this.videoCanvas.width = this.canvas.width
+        this.videoCanvas.height = this.canvas.height
+        this.ctx.viewport(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    updateVideoTexture(){
+        let vctx = this.videoCanvas.getContext("2d")
+        vctx.clearRect(0, 0, this.videoCanvas.width, this.videoCanvas.height)
+        vctx.drawImage(this.video, 0, 0, this.videoCanvas.width, this.videoCanvas.height);
+
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.videoFrameTexture)
+        this.ctx.texImage2D(
+            this.ctx.TEXTURE_2D,
+            0,
+            this.ctx.RGBA,
+            this.ctx.RGBA,
+            this.ctx.UNSIGNED_BYTE,
+            this.videoCanvas
+        )
+
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.LINEAR);
+    }
+
+    render(){
+        if(!this.ctx){
+            throw new Error("Glitcher not initialized, please run init()")
+        }
+
+        this.updateVideoTexture()
+
+        this.ctx.clearColor(0.0, 0.0, 0.0, 0.0)
+        this.ctx.clearDepth(1.0)
+        this.ctx.enable(this.ctx.DEPTH_TEST)
+        this.ctx.enable(this.ctx.LEQUAL)
+
+        this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT)
+
+        { // Base rendering
+            this.ctx.useProgram(this.base.program)
+            this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.base.panelPositionsBuffer)
+            this.ctx.vertexAttribPointer(
+                this.base.aVertexPosition,
+                2, // N components per iteration
+                this.ctx.FLOAT,
+                false, //Normalize,
+                0, // (stride) how many bytes to get from one set of values to the next
+                0, // Start offset
+            )
+            this.ctx.enableVertexAttribArray(this.base.aVertexPosition)
+            
+            this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.base.panelUVBuffer)
+            this.ctx.vertexAttribPointer(
+                this.base.aTextureCoord,
+                2,
+                this.ctx.FLOAT,
+                false,
+                0,
+                0,
+            )
+            this.ctx.enableVertexAttribArray(this.base.aTextureCoord)
+
+            this.ctx.activeTexture(this.ctx.TEXTURE0)
+            this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.base.imageTexture)
+
+            this.ctx.uniform2f(this.base.uWindowSize, this.canvas.width, this.canvas.height)
+            this.ctx.uniform1i(this.base.uImageSampler, 0)
+            
+            this.ctx.drawArrays(
+                this.ctx.TRIANGLE_STRIP,
+                0, // Vertex offset
+                4, // Total vertex
+            );
+        }
+
+        { // Glitch rendering
+            this.ctx.useProgram(this.glitch.program)
+            this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.glitch.glitchPositionBuffer)
+            this.ctx.vertexAttribPointer(
+                this.glitch.glitchPositionBuffer,
+                2, // N components per iteration
+                this.ctx.FLOAT,
+                false, //Normalize,
+                0, // (stride) how many bytes to get from one set of values to the next
+                0, // Start offset
+            )
+            this.ctx.enableVertexAttribArray(this.glitch.aVertexPosition)
+
+            this.ctx.activeTexture(this.ctx.TEXTURE0)
+            this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.videoFrameTexture)
+            this.ctx.uniform1i(this.glitch.uVideoSampler, 0)
+
+            this.ctx.activeTexture(this.ctx.TEXTURE1)
+            this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.noiseTexture)
+            this.ctx.uniform1i(this.glitch.uNoiseSampler, 1)
+
+            this.ctx.uniform2f(this.glitch.uWindowSize, this.canvas.width, this.canvas.height)
+            if(this.canvas.width > this.canvas.height){
+                this.ctx.uniform2f(this.glitch.uImageRatio, 1.0, this.canvas.width/this.canvas.height)
+            } else {
+                this.ctx.uniform2f(this.glitch.uImageRatio, this.canvas.height/this.canvas.width, 1.0)
+            }
+
+            for(let glitch of this.glitches) {
+                this.ctx.uniform4f(this.glitch.uRandom,
+                    Math.random(), Math.random(), Math.random(), Math.random()
+                )
+                this.ctx.uniform2f(this.glitch.uGlitchPosition, glitch.x, glitch.y)
+                this.ctx.uniform1f(this.glitch.uGlitchWidth, glitch.width)
+                this.ctx.drawArrays(
+                    this.ctx.TRIANGLE_STRIP,
+                    0, // Vertex offset
+                    4, // Total vertex
+                );
+            }
+        }
+    }
+}
+
+function createProgram(gl, vertSource, fragSource){
+        let vertShader = gl.createShader(gl.VERTEX_SHADER)
+        gl.shaderSource(vertShader, vertSource)
+        gl.compileShader(vertShader)
+
+        if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
+            throw new Error(`failed to compile vertex: ${gl.getShaderInfoLog(vertShader)}`)
+        }
+
+        let fragShader = gl.createShader(gl.FRAGMENT_SHADER)
+        gl.shaderSource(fragShader, fragSource)
+        gl.compileShader(fragShader)
+
+        if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
+            throw new Error(`failed to compile fragment: ${gl.getShaderInfoLog(fragShader)}`)
+        }
+
+        let program = gl.createProgram()
+        gl.attachShader(program, vertShader)
+        gl.attachShader(program, fragShader)
+        gl.linkProgram(program)
+
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            throw new Error(`failed to link shader: ${gl.getProgramInfoLog(program)}`)
+        }
+
+        return program
+}
@@ -8,6 +8,7 @@
      "name": "v1-com-officielle",
      "version": "0.0.0",
      "dependencies": {
+        "intrinsic-scale": "^5.0.0",
        "vite-svg-loader": "^5.1.1",
        "vue": "^3.5.25",
        "vue3-clipboard": "^1.0.0",
@@ -1442,6 +1443,18 @@
        "delegate": "^3.1.2"
      }
    },
+    "node_modules/intrinsic-scale": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/intrinsic-scale/-/intrinsic-scale-5.0.0.tgz",
+      "integrity": "sha512-NJY7170uG8gYkaGGV0ddakq5VAWSvM2FKhARgXj8OQwod1hQFRBWCXn7dk35bGd+vsRYYnJQw/Qpebk8MWp4dg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fregante"
+      }
+    },
    "node_modules/keycode": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
@@ -1756,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": {
@@ -9,6 +9,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "intrinsic-scale": "^5.0.0",
    "vite-svg-loader": "^5.1.1",
    "vue": "^3.5.25",
    "vue3-clipboard": "^1.0.0",
@@ -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;
@@ -10,10 +10,12 @@ function idAndDate(str){
 function titleAndContent(str){
  let data = str.split(" :");
  let title = "NO_TITLE";
+  let contentData = [""];
  if (data.length > 1){
    title = data[0];
+  } else {
+    contentData = data[0].split('<br>').filter(e => e);
  }
-  let contentData = [""];
  if (data[1]){
    contentData = data[1].split('<br>').filter(e => e);
  }
@@ -22,25 +24,16 @@ function titleAndContent(str){
  for(let line of contentData){
    if(line.includes('http')||line.includes('@')){
      let linkData = line.split("# ");
-      //console.log(title, linkData);
+      //console.log(linkData[1]);
      let linkNoFormat;
-      if (linkData.includes('http')){
-        linkNoFormat = linkData[1].split("\"");
-      } else {
-        linkNoFormat = linkData[0]
-      }
      let url = "";
-      for(let el of linkNoFormat){
-        if(el.includes('http')){
-          url = el;
-          break
-        } else if(el.includes('@')){
-          url = 'mailto:' + el;
-          break
-        } else {
-          continue
-        }
+      if (linkData[1].includes('http')){
+        linkNoFormat = linkData[1].split("\"");
+        url = linkNoFormat[1];
+      } else if (linkData[1].includes('@')){
+          url = 'mailto:' + linkData[1];
      }
+      //console.log("url info", url)
      src.push({
        caption: linkData[0],
        url: url
@@ -70,6 +63,11 @@ function exceptionKey(user, content){
  return false;
 }

+function videoExt(str){
+  let data = str.split('.');
+  return data.at(-1)
+}
+
 export async function loadPeopleData() {
  const usernamesRes = await fetch('/DATA/peopleData.json');
  const pData = await usernamesRes.json();
@@ -91,7 +89,14 @@ export async function loadPeopleData() {
  for (const user of pData){
    const pouet = filtered.find(p => p.account.username === user.name || p.reblog?.account.username === user.name);
    if (pouet){
-      description[user.name] = pouet.account.note;
+      let descData = pouet.account.note.split('<br>').filter(e => e);
+      if(descData.length > 0){
+          for (let line of descData){
+          description[user.name] += '\n' + line;
+        }
+      } else {
+        description[user.name] = 'NO DESCRIPTION'
+      }
    }
  }

@@ -110,7 +115,8 @@ export async function loadPeopleData() {
    //console.log(pouet);
    //ignorer autres que images
    if (selectedPouet.media_attachments?.length > 0 &&
-        !pouet.media_attachments[0].type.includes('image')) {
+        !pouet.media_attachments[0].type.includes('image') &&
+        !pouet.media_attachments[0].type.includes('video')) {
      continue;
    }
    //ignorer réponses
@@ -132,7 +138,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
@@ -140,6 +146,7 @@ export async function loadPeopleData() {
    } else if (selectedPouet.media_attachments?.length > 0) {
          let textInfos = titleAndContent(selectedPouet.content);
          //console.log(pouet);
+          if (pouet.media_attachments[0].type.includes('image')){
              entry = {
              id: 'img' + displayName + infos.id,
              date: infos.date,
@@ -153,6 +160,24 @@ export async function loadPeopleData() {
              like: selectedPouet.favourites_count,
              isSelected: false
            }
+          }
+          if (pouet.media_attachments[0].type.includes('video')){
+              let videoType = videoExt(selectedPouet.media_attachments[0].url)
+              entry = {
+              id: 'vid' + displayName + infos.id,
+              date: infos.date,
+              dateInfo: selectedPouet.created_at,
+              type: "video",
+              format: selectedPouet.media_attachments[0].type + '/' + videoType,
+              author: displayName,
+              caption: textInfos.title + '.move',
+              src: selectedPouet.media_attachments[0].url,
+              alt: selectedPouet.media_attachments[0].description,
+              description: textInfos.content,
+              like: selectedPouet.favourites_count,
+              isSelected: false
+            }
+          }
    } else {
      let textInfos = titleAndContent(selectedPouet.content);
      entry = {
@@ -166,6 +191,7 @@ export async function loadPeopleData() {
        isSelected: false
      };
    }
+    //console.log(entry);
    files[username].push(entry);
  }

@@ -21,5 +21,13 @@ export const dataStorage = reactive({
  selectedLink:{
    linksData: [],
    description: ''
+  },
+  selectedVideo: {
+    src: "",
+    caption: "",
+    like: 0,
+    alt: "",
+    format:"",
+    isLiked: false
  }
 })
@@ -332,7 +332,7 @@
        rootDepth: 0
      }
    },
-    emits: ['close','focus','openImg','openLink'],
+    emits: ['close','focus','openImg','openLink','openVideo'],
    methods:{
      onDrag({ target, transform }) {
        target.style.transform = transform;
@@ -393,7 +393,19 @@
            caption: e.caption,
            description: e.description
          }
-          //console.log(dataStorage.selectedLink);
+          console.log(dataStorage.selectedLink);
+        }
+        if(e.type === 'video'){
+            this.$emit('openVideo');
+            dataStorage.selectedVideo = {
+              src: e.src,
+              caption: e.caption,
+              like: e.like,
+              alt: e.alt,
+              format: e.format,
+              isLiked: e.isLiked
+            }
+            this.displayedDescription = e.description;
        }

        this.selectFile(e);
@@ -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>
@@ -20,11 +20,14 @@
        </button>
      </div>
      <div class="windowContent">
-          <p>Si tu penses que tu as les moyens<br>de nous faire une petite donation,<br> toute participation est la bienvenue et<br>ça nous aiderait bien à démarrer le projet ^^</p>
+          <p>
+            Aujourd’hui, nous avons besoin<br>d’un coup de pouce pour<br>notre show du 22 mai.<br><br>
+            Cette cagnotte a pour objectif de financer<br>la rémunération des artistes drag et nerd participant·es, de soutenir le travail<br>de l’équipe l’orga, ainsi que d’investir dans le développement de Drags & Nerds<br>afin de vous proposer encore plus d’événements à l’avenir !<br><br>
+            Chaque don compte, vraiment.<br><br>
+            Merci du fond du cœur à tous·tes cell·eux qui prendront le temps de lire, de partager<br>et, bien sûr, de participer !
+          </p>
          <div id="linkRow">
-            <a href="#" class="textBtnStyle">Lydia</a>
-            <a href="#" class="textBtnStyle">Paypal</a>
-            <a href="#" class="textBtnStyle">SumUp</a>
+            <a href="https://pots.lydia.me/collect/pots?id=4298-appel-aux-dons-drags-nerds-2e-edition" class="textBtnStyle" target="_blank" @mousedown.stop @touchstart.stop>Cagnotte Lydia</a>
          </div>
      </div>
    </div>
@@ -76,7 +79,7 @@
  }

  #linkRow .textBtnStyle{
-    width: 27%;
+    width: 77.7%;
    height: 50px;
    margin-bottom: 16.1px;
  }
@@ -15,13 +15,13 @@
          {{selectedLink.caption}}
        </p>
        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
-        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.stop="$emit('close')" data-tooltip="fermer">
          <CloseIcon name="close" class="icon"/>
        </button>
      </div>
      <div class="windowContent" id="linkContent">
        <p id="linkTextStyle">{{selectedLink.description}}</p>
-        <a class="textBtnStyle" v-for="item in selectedLink.linksData" :href="item.url" target="_blank">{{item.caption}}</a>
+        <a class="textBtnStyle" v-for="item in selectedLink.linksData" :href="item.url" target="_blank" @mousedown.stop @touchstart.stop>{{item.caption}}</a>
      </div>
    </div>
 </template>
@@ -104,6 +104,7 @@
    emits: ['close','focus'],
    computed: {
      selectedLink(){
+        //console.log(this.selectedLink);
        return dataStorage.selectedLink
      }
    },
@@ -0,0 +1,113 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+    import LikeIcon from '../assets/icons/like.svg'
+</script>
+
+<template>
+    <div id="videoPannel" class="windowStyle" ref="videoPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          {{selectedVideo.caption}}
+        </p>
+        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent" id="visualizerContent">
+        <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">
+            <LikeIcon name="test" class="icon"/>
+          </button>
+        </div>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:650px){}
+      ================ PC LARGE
+      @media(min-width:1300px){}
+  */
+
+  #videoPannel{
+    position: fixed;
+    width: 333px;
+    height: auto;
+    top: 500px;
+    left: 16.1px;
+    border-radius: 16.1px;
+  }
+
+  #videoContent{
+    align-items: flex-start;
+  }
+
+  #displayedImgStyle{
+    width:100%;
+    height:auto;
+    margin: 0;
+    padding: 0;
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #videoPannel{
+      top: 333px;
+      left: 161px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+  import { dataStorage } from '../dataExchange.js'
+
+  export default {
+    name : 'VideoPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    computed: {
+      selectedVideo(){
+        return dataStorage.selectedVideo
+      }
+    },
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      },
+      likeImg(){
+        this.selectedVideo.isLiked = !this.selectedVideo.isLiked;
+        console.log(this.selectedVideo);
+      }
+    },
+    mounted(){
+      this.target = this.$refs.videoPannel;
+      console.log("Video pannel is loaded!");
+    }
+  };
+</script>
@@ -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">
@@ -66,6 +66,7 @@
      v-show="isActive.includes('artist')"
      @openImg = "openPannel('visual')"
      @openLink = "openPannel('link')"
+      @openVideo = "openPannel('video')"
      @close="closePannel('artist')"
      @focus="focusPannel('artist')"
      :class="{zBase: isFocused!=='artist', zFocus: isFocused==='artist'}">
@@ -106,6 +107,12 @@
      @focus="focusPannel('visual')"
      :class="{zBase: isFocused!=='visual', zFocus: isFocused==='visual'}">
    </VisualizerPan>
+    <VideoPan
+      v-show="isActive.includes('video')"
+      @close="closePannel('video')"
+      @focus="focusPannel('video')"
+      :class="{zBase: isFocused!=='video', zFocus: isFocused==='video'}">
+    </VideoPan>
    <LinkPan
      v-show="isActive.includes('link')"
      @close="closePannel('link')"
@@ -22,6 +22,7 @@ import InstaPannel from './indieComponents/InstaPannel.vue'
 import MessagePannel from './indieComponents/MessagePannel.vue'
 import FollowPannel from './indieComponents/FollowPannel.vue'
 import VisualizerPannel from './indieComponents/VisualizerPannel.vue'
+import VideoPannel from './indieComponents/VideoPannel.vue'
 import LinkPannel from './indieComponents/LinkPannel.vue'
 import DonationPannel from './indieComponents/DonationPannel.vue'
 import TicketPannel from './indieComponents/TicketPannel.vue'
@@ -51,6 +52,7 @@ app.component('InstaPan', InstaPannel);
 app.component('MessagePan', MessagePannel);
 app.component('FollowPan', FollowPannel);
 app.component('VisualizerPan', VisualizerPannel);
+app.component('VideoPan', VideoPannel);
 app.component('LinkPan', LinkPannel);
 app.component('DonationPan', DonationPannel);
 app.component('TicketPan', TicketPannel);
@@ -38,7 +38,7 @@
            <a href="https://grrrndzero.org/" target="_blank">
              <p><strong>Grrrnd Zero</strong></p>
              <p>60 Avenue de Bohlen</p>
-              <p>69110 Vaux-en-Velin</p>
+              <p>69120 Vaux-en-Velin</p>
            </a>
          </div>
        </div>
@@ -6,13 +6,22 @@ import svgLoader from 'vite-svg-loader'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [vue(), svgLoader()],
-  server:{
+  server: {
    host: '0.0.0.0',
-    port:8080
+    port: 8080
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
+  },
+  build: {
+    rollupOptions: {
+      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	2cc2862503	edit: insta cutter maintenant ajusté à tous les trucs de merde d'insta x333	2026-05-06 06:09:38 +02:00
vgaNAR6ta	56f1255078	edit: description vide et parsing du texte	2026-04-26 18:39:14 +02:00
vgaNAR6ta	7273e998ae	edit: donations + modif gestion post non-formaté	2026-04-26 16:47:34 +02:00
vgaNAR6ta	11de8e4265	edit: creation du script découpe	2026-04-22 01:22:33 +02:00
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
epickiwi	13df9c0601	Ajustement pour une interface minimale	2026-04-21 01:50:53 +02:00
epickiwi	4a1c77121b	Ajout du noise	2026-04-21 01:08:11 +02:00
epickiwi	3d5bef4153	Ajout d'entités "glitch" a la scene	2026-04-20 23:11:05 +02:00
epickiwi	f1229866d1	Creation de la base du glitcher	2026-04-20 19:00:08 +02:00
vgaNAR6ta	72a96a7d6c	edit: lien contact vers nouvel onglet	2026-04-20 17:45:00 +02:00
epickiwi	c10ce7e8d7	Fix vidéo	2026-04-20 16:16:22 +02:00
vgaNAR6ta	f9d65f2d46	edit: intégration video mastodon + bug fix liens	2026-04-18 16:39:45 +02:00
vgaNAR6ta	d77bbdbb41	edit: code postal de vaux	2026-04-09 17:24:14 +02:00