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
40 changed files with 1666 additions and 482 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
 }
@@ -13,8 +13,6 @@
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:type" content="website">
    <!--GUI for background experiments haha-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
  </head>
  <body>
    <!--TEST REFERENCE-->
@@ -29,379 +27,13 @@
      <strong>nerds</strong>
    </h1>
    <!--BACKGROUND CONTAINER-->
-    <canvas id="canvas"></canvas>
+    <div id="canvas">
        <video autoplay muted loop src="./background.webm"></video>
        <div class="overlay"></div>
    </div>
    <!--VUE ROOT APP CONTAINER-->
    <div id="app"></div>
    <!--SCRIPT BACKGROUND SHADER-->
    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec2 position;
        void main() {
            gl_Position = vec4(position, 0.0, 1.0);
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        precision highp float;
        uniform vec2 resolution;
        uniform float time;
        uniform float seed;
        // GUI-controlled parameters
        uniform float timeScale;
        uniform float patternAmp;
        uniform float patternFreq;
        uniform float bloomStrength;
        uniform float saturation;
        uniform float grainAmount;
        uniform vec3 colorTint;
        uniform float minCircleSize;
        uniform float circleStrength;
        uniform float distortX;
        uniform float distortY;
        // Noise functions for 3D simplex noise
        vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
        vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
        vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
        vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
        // Random function that uses the seed
        float rand(vec3 co) {
            return fract(sin(dot(co.xyz + vec3(seed * 0.1), vec3(12.9898, 78.233, 53.539))) * 43758.5453);
        }
        // Pseudo-random function for noise generation
        float random(vec2 st) {
            return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
        }
        // 3D Simplex noise implementation
        float snoise3D(vec3 v) {
          const vec2 C = vec2(1.0/6.0, 1.0/3.0);
          const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
          // First corner
          vec3 i  = floor(v + dot(v, C.yyy));
          vec3 x0 = v - i + dot(i, C.xxx);
          // Other corners
          vec3 g = step(x0.yzx, x0.xyz);
          vec3 l = 1.0 - g;
          vec3 i1 = min(g.xyz, l.zxy);
          vec3 i2 = max(g.xyz, l.zxy);
          vec3 x1 = x0 - i1 + C.xxx;
          vec3 x2 = x0 - i2 + C.yyy;
          vec3 x3 = x0 - D.yyy;
          // Permutations
          i = mod289(i);
          vec4 p = permute(permute(permute(
                    i.z + vec4(0.0, i1.z, i2.z, 1.0))
                  + i.y + vec4(0.0, i1.y, i2.y, 1.0))
                  + i.x + vec4(0.0, i1.x, i2.x, 1.0));
          // Gradients: 7x7 points over a square, mapped onto an octahedron.
          // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
          float n_ = 0.142857142857; // 1.0/7.0
          vec3 ns = n_ * D.wyz - D.xzx;
          vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
          vec4 x_ = floor(j * ns.z);
          vec4 y_ = floor(j - 7.0 * x_);
          vec4 x = x_ *ns.x + ns.yyyy;
          vec4 y = y_ *ns.x + ns.yyyy;
          vec4 h = 1.0 - abs(x) - abs(y);
          vec4 b0 = vec4(x.xy, y.xy);
          vec4 b1 = vec4(x.zw, y.zw);
          vec4 s0 = floor(b0)*2.0 + 1.0;
          vec4 s1 = floor(b1)*2.0 + 1.0;
          vec4 sh = -step(h, vec4(0.0));
          vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
          vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
          vec3 p0 = vec3(a0.xy, h.x);
          vec3 p1 = vec3(a0.zw, h.y);
          vec3 p2 = vec3(a1.xy, h.z);
          vec3 p3 = vec3(a1.zw, h.w);
          // Normalise gradients
          vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
          p0 *= norm.x;
          p1 *= norm.y;
          p2 *= norm.z;
          p3 *= norm.w;
          // Mix final noise value
          vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
          m = m * m;
          return 42.0 * dot(m*m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
        }
        // Modified fbm function to use 3D noise
        float fbm3D(vec3 p) {
            float sum = 0.0;
            float amp = patternAmp;
            float freq = patternFreq;
            // Create seed-based offsets using prime multipliers
            vec3 seedOffset = vec3(
                sin(seed * 0.731) * cos(seed * 0.293) * 1.0,
                cos(seed * 0.897) * sin(seed * 0.413) * 1.0,
                sin(seed * 0.529) * cos(seed * 0.671) * 1.0
            );
            // Use octaves with better frequency scaling
            for(int i = 0; i < 2; i++) {
                // Create unique rotation for each octave to break grid patterns
                float angle = seed * 0.1 + float(i) * 0.01;
                mat2 rotation = mat2(
                    cos(angle), -sin(angle),
                    sin(angle), cos(angle)
                );
                // Rotate coordinates slightly for each octave
                vec2 rotatedP = rotation * p.xy;
                vec3 rotated3D = vec3(rotatedP, p.z);
                // Use prime-number-based offsets to avoid repeating patterns
                vec3 octaveOffset = seedOffset + vec3(
                    sin(float(i) * 1.731 + seed * 0.47),
                    cos(float(i) * 1.293 + seed * 0.83),
                    sin(float(i) * 1.453 + seed * 0.61)
                );
                // Apply progressive domain warping for more organic results
                vec3 warpedP = rotated3D + octaveOffset;
                if (i > 0) {
                    // Add slight domain warping based on previous octave
                    warpedP += vec3(
                        sin(sum * 2.14 + warpedP.y * 1.5),
                        cos(sum * 1.71 + warpedP.x * 1.5),
                        sin(sum * 1.93 + warpedP.z * 1.5)
                    ) * 0.1 * float(i);
                }
                // Add contribution from this octave
                sum += amp * snoise3D(warpedP * freq);
                // Use better persistence values (slower amplitude reduction)
                amp *= 0.8;
                // Use better lacunarity values (more moderate frequency increase)
                freq *= 0.8;
            }
            // Normalize and add slight contrast adjustment
            return sum * 0.5 + 0.5;
        }
        void main() {
            vec2 uv = gl_FragCoord.xy / resolution.xy;
            // Adjust aspect ratio
            uv.x *= resolution.x / resolution.y;
            // Apply timeScale from GUI
            float slowTime = time * timeScale;
            // Create seed-influenced flow vectors for different pattern on each refresh
            vec2 flow1 = vec2(
                sin(slowTime * 0.25 + seed * 0.42) * 0.3 + sin(slowTime * 0.14 + seed * 0.23) * 0.2,
                cos(slowTime * 0.22 + seed * 0.31) * 0.3 + cos(slowTime * 0.11 + seed * 0.17) * 0.2
            );
            vec2 flow2 = vec2(
                sin(slowTime * 0.16 + 1.7 + seed * 0.13) * 0.4 + sin(slowTime * 0.18 + seed * 0.29) * 0.1,
                cos(slowTime * 0.19 + 2.3 + seed * 0.19) * 0.4 + cos(slowTime * 0.11 + seed * 0.33) * 0.1
            );
            vec2 flow3 = vec2(
                sin(slowTime * 0.13 + 3.4 + seed * 0.25) * 0.25 + sin(slowTime * 0.22 + seed * 0.11) * 0.15,
                cos(slowTime * 0.18 + 1.2 + seed * 0.37) * 0.25 + cos(slowTime * 0.25 + seed * 0.27) * 0.15
            );
            float noiseScale1 = 10000.0;
            // Main light layer with enhanced 3D liquid motion - using 3D noise
            // The third component determines how the pattern changes over time
            float timeComponent = slowTime * 5.5 + sin(seed * 0.63) * 0.2;
            float lightPattern = fbm3D(vec3(uv * noiseScale1, timeComponent));
            float combinedPattern = lightPattern * 0.25;
            // Start with a seed-influenced base color
            vec3 baseColor = vec3(
                0.6 + sin(seed * 0.4) * 0.1,
                0.9 + cos(seed * 0.3) * 0.05,
                0.92 + sin(seed * 0.5) * 0.05
            );
            // Define pastel colors with slight seed-based variations
            float colorSeed1 = sin(seed * 0.73) * 0.88;
            float colorSeed2 = cos(seed * 0.51) * 0.28;
            float colorSeed3 = sin(seed * 0.92) * 0.48;
            vec3 pastelGreen = vec3(0.85 + colorSeed1, 0.95 + colorSeed2, 0.85 + colorSeed3);
            vec3 pastelBlue = vec3(0.85 + colorSeed3, 0.9 + colorSeed1, 0.98 + colorSeed2);
            vec3 pastelPink = vec3(0.98 + colorSeed2, 0.88 + colorSeed3, 0.92 + colorSeed1);
            vec3 pastelYellow = vec3(0.98 + colorSeed3, 0.95 + colorSeed1, 0.85 + colorSeed2);
            vec3 brightPink = vec3(0.98 + colorSeed1, 0.85 + colorSeed2, 0.92 + colorSeed3);
            vec3 pastelLavender = vec3(0.92 + colorSeed2, 0.88 + colorSeed3, 0.98 + colorSeed1);
            vec3 pastelPeach = vec3(0.98 + colorSeed3, 0.92 + colorSeed1, 0.87 + colorSeed2);
            vec3 pastelTeal = vec3(0.85 + colorSeed1, 0.95 + colorSeed2, 0.95 + colorSeed3);
            vec3 pastelCoral = vec3(0.98 + colorSeed2, 0.88 + colorSeed1, 0.85 + colorSeed3);
            vec3 pastelMint = vec3(0.88 + colorSeed3, 0.98 + colorSeed2, 0.91 + colorSeed1);
            vec3 pastelLilac = vec3(0.91 + colorSeed1, 0.85 + colorSeed3, 0.98 + colorSeed2);
            vec3 pastelSkyBlue = vec3(0.85 + colorSeed2, 0.91 + colorSeed1, 0.98 + colorSeed3);
            // Using larger color patches with 3D liquid-like noise and seed influence
            float verticalFlow = sin(uv.y * 3.0 + slowTime * 0.2 + seed * 0.4) * 1.0;
            // Creating more complex flow patterns for liquid movement
            vec2 liquidFlow1 = flow1 + vec2(verticalFlow, sin(uv.x * 2.5 + slowTime * 0.10 + seed * 0.3) * 0.2);
            vec2 liquidFlow2 = flow2 + vec2(cos(uv.y * 2.2 + slowTime * 0.05 + seed * 0.5) * 0.15, verticalFlow);
            vec2 liquidFlow3 = flow3 + vec2(verticalFlow * 0.5, cos(uv.x * 1.8 - slowTime * 0.07 + seed * 0.7) * 0.25);
            // Add seed-dependent scale factors for noise
            float noiseSeedFactor1 = 0.15 * (1.0 + sin(seed * 0.3) * 0.3);
            float noiseSeedFactor2 = 0.2 * (1.0 + cos(seed * 0.5) * 0.3);
            float noiseSeedFactor3 = 0.12 * (1.0 + sin(seed * 0.7) * 0.3);
            // Using 3D noise for color patterns with different time components for variety
            float colorNoise1 = fbm3D(vec3(uv * noiseSeedFactor1 + liquidFlow1 * 0.03, slowTime * 0.02 + seed * 0.27));
            // Adjust thresholds with seed influence for variety
            float threshSeed1 = 0.0 + sin(seed * 0.4) * 0.15;
            float threshSeed2 = 0.15 + cos(seed * 0.6) * 0.15;
            float threshSeed3 = 0.25 + sin(seed * 0.8) * 0.15;
            float colorMixValue1 = smoothstep(0.0, threshSeed1, colorNoise1);
            float colorMixValue2 = smoothstep(0.0, threshSeed2, colorNoise1);
            float colorMixValue3 = smoothstep(0.0, threshSeed3, colorNoise1);
            // Start with base color and mix in expanded pastel palette
            vec3 colorVariation = baseColor;
            // Layer 1: Primary colors with seed-influenced mix factors
            float mixFactor1 = 2.2 + sin(seed * 0.3) * 0.5;
            float mixFactor2 = 2.0 + cos(seed * 0.5) * 0.5;
            float mixFactor3 = 2.0 + sin(seed * 0.7) * 0.5;
            float mixFactor4 = 2.0 + cos(seed * 0.9) * 0.5;
            colorVariation = mix(colorVariation, pastelBlue, colorMixValue1 * mixFactor1);
            colorVariation = mix(colorVariation, pastelPink, (1.0 - colorMixValue1) * colorMixValue2 * mixFactor2);
            colorVariation = mix(colorVariation, pastelGreen, colorMixValue2 * (1.0 - colorMixValue1) * mixFactor3);
            colorVariation = mix(colorVariation, pastelYellow, (1.0 - colorMixValue2) * colorMixValue1 * mixFactor4);
            // Layer 2: New pastel colors with seed-influenced mix factors
            float mixFactor5 = 1.8 + sin(seed * 1.1) * 0.4;
            float mixFactor6 = 1.8 + cos(seed * 1.3) * 0.4;
            float mixFactor7 = 1.7 + sin(seed * 1.5) * 0.4;
            float mixFactor8 = 1.6 + cos(seed * 1.7) * 0.4;
            float mixFactor9 = 1.5 + sin(seed * 1.9) * 0.4;
            colorVariation = mix(colorVariation, brightPink, (colorMixValue1 * colorMixValue2) * mixFactor5);
            colorVariation = mix(colorVariation, pastelLavender, (1.0 - colorMixValue3) * colorMixValue1 * mixFactor6);
            colorVariation = mix(colorVariation, pastelPeach, colorMixValue3 * (1.0 - colorMixValue2) * mixFactor7);
            colorVariation = mix(colorVariation, pastelTeal, (colorMixValue2 * colorMixValue3) * mixFactor8);
            colorVariation = mix(colorVariation, pastelCoral, ((1.0 - colorMixValue1) * colorMixValue3) * mixFactor9);
            // Layer 3: Additional colors with seed-influenced noise combinations
            float seedOffset1 = sin(seed * 2.1) * 0.05;
            float seedOffset2 = cos(seed * 2.3) * 0.05;
            float mixValue4 = smoothstep(0.0, 1.0, float(uv * (0.18 + seedOffset1)));
            float mixValue5 = mixValue4 - (sin(seed*0.6)*0.4);
            float mixFactor10 = 1.7 + sin(seed * 2.5) * 0.4;
            float mixFactor11 = 1.8 + cos(seed * 2.7) * 0.4;
            float mixFactor12 = 1.5 + sin(seed * 2.9) * 0.4;
            colorVariation = mix(colorVariation, pastelMint, mixValue4 * (1.0 - mixValue5) * mixFactor10);
            colorVariation = mix(colorVariation, pastelLilac, (1.0 - mixValue4) * mixValue5 * mixFactor11);
            colorVariation = mix(colorVariation, pastelSkyBlue, mixValue4 * mixValue5 * mixFactor12);
            // Adjust pattern brightness with seed influence
            float brightnessFactor = 1.0 + sin(seed * 0.5) * 2.1;
            combinedPattern = pow(combinedPattern * 0.2 + 0.8, brightnessFactor);
            // Create light spots with seed-influenced threshold
            float lightThreshold = 1.0 + sin(seed * 0.6) * 0.8;
            float lightSpots = smoothstep(0.0, lightThreshold, combinedPattern);
            // Enhanced circular light patterns with seed-influenced distortion
            float distortionAmount = 1.0 + cos(seed * 0.7) * 5.05;
            float distortion = sin(slowTime * 0.1 + seed) * distortionAmount;
            vec2 distortedUV = fract(uv * 1.0 + vec2(
                sin(uv.y * 2.0 + slowTime * 0.15 + seed * 0.8) * distortY,
                cos(uv.x * 1.8 + slowTime * 0.1 + seed * 0.9) * distortX
            ));
            // Adjust circular spots with seed influence
            float circleSize = minCircleSize + sin(seed) * 1.3;
            float circleThreshold = 0.0 + cos(seed * 1.3) * 2.05;
            float circularSpots = smoothstep(0.0, circleThreshold, 1.0 - length((distortedUV - 0.5) * (circleSize + distortion)));
            // Mix with liquid movement
            float mixRatio = 0.0 + sin(seed * 1.5) * circleStrength;
            lightSpots = mix(lightSpots, circularSpots * lightSpots, mixRatio);
            // Apply liquid-like diffusion with seed influence and 3D noise
            float diffusionScale = 0.0 + cos(seed * 1.7) * 5.0;
            float diffusedLightSpots = fbm3D(vec3(
                uv * diffusionScale + vec2(
                    sin(slowTime * 0.03 + uv.x + seed * 1.9) * 0.2,
                    cos(slowTime * 0.02 + uv.y + seed * 2.1) * 0.2
                ),
                slowTime * 0.05 + sin(seed * 0.76) * 0.5
            )) * lightSpots;
            // Mix diffusion with seed influence
            //float diffusionMix = 0.7 + sin(seed * 2.3) * 0.1;
            float diffusionMix = 1.0;
            lightSpots = mix(lightSpots, diffusedLightSpots, diffusionMix);
            // Final pattern mix
            float patternMix = 1.0;
            combinedPattern = mix(combinedPattern, lightSpots, patternMix);
            float finalValue = combinedPattern;
            // Use the color variation and apply color tint from GUI
            vec3 color = finalValue * colorVariation * colorTint;
            // Bloom with GUI-controlled bloomStrength
            float bloomThreshold = 1.0;
            float bloom = smoothstep(0.0, bloomThreshold, finalValue) * bloomStrength;
            color += bloom;
            // Grain with GUI-controlled grainAmount
            vec2 noiseCoord = uv;
            float noise = random(noiseCoord + time * 0.0015) * grainAmount;
            color = color + vec3(noise);
            // Saturation with GUI control
            float luminance = dot(color, vec3(0.299, 0.587, 0.114));
            vec3 saturatedColor = mix(vec3(luminance), color, saturation);
            float satMix = 1.0;
            color = mix(color, saturatedColor, satMix);
            gl_FragColor = vec4(color, 1.0);
        }
    </script>
    <!--LINK SCRIPT VUE ROOT APP-->
    <script type="module" src="/src/main.js"></script>
  </body>
  <!--LINK SCRIPT BACKGROUND-->
  <script src="mp4-muxer-main/build/mp4-muxer.js"></script>
  <script src="helperFunctions.js"></script>
  <script src="canvasVideoExport.js"></script>
  <script src="main.js"></script>
 </html>
@@ -0,0 +1,408 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DRAGS AND NERDS #2</title>
    <link rel="icon" type="image/x-icon" href="./favicon.jpg">
    <!--OPENGRAPH-->
    <meta property="og:title" content="Drags and Nerds #2">
    <meta property="og:description" content="Drag shows, musique électronique, synthés vidéos et autre performances nerds">
    <meta property="og:url" content="https://drags-nerds.net/">
    <meta property="og:image" content="https://drags-nerds.net/dnn-screen.png">
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:type" content="website">
    <!--GUI for background experiments haha-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
  </head>
  <body>
    <!--TEST REFERENCE-->
    <h1 class="referenceText">
      <strong>drags and nerds</strong>
      <p>
        Drag shows, musique électronique, synthés vidéos et autre performances nerds
      </p>
      <strong>drag</strong>
      <strong>nerd</strong>
      <strong>drags</strong>
      <strong>nerds</strong>
    </h1>
    <!--BACKGROUND CONTAINER-->
    <canvas id="canvas"></canvas>
    <!--VUE ROOT APP CONTAINER-->
    <div id="app"></div>
    <!--SCRIPT BACKGROUND SHADER-->
    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec2 position;
        void main() {
            gl_Position = vec4(position, 0.0, 1.0);
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        precision highp float;
        uniform vec2 resolution;
        uniform float time;
        uniform float seed;
        // GUI-controlled parameters
        uniform float timeScale;
        uniform float patternAmp;
        uniform float patternFreq;
        uniform float bloomStrength;
        uniform float saturation;
        uniform float grainAmount;
        uniform vec3 colorTint;
        uniform float minCircleSize;
        uniform float circleStrength;
        uniform float distortX;
        uniform float distortY;
        // Noise functions for 3D simplex noise
        vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
        vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
        vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
        vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
        // Random function that uses the seed
        float rand(vec3 co) {
            return fract(sin(dot(co.xyz + vec3(seed * 0.1), vec3(12.9898, 78.233, 53.539))) * 43758.5453);
        }
        // Pseudo-random function for noise generation
        float random(vec2 st) {
            return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
        }
        // 3D Simplex noise implementation
        float snoise3D(vec3 v) {
          const vec2 C = vec2(1.0/6.0, 1.0/3.0);
          const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
          // First corner
          vec3 i  = floor(v + dot(v, C.yyy));
          vec3 x0 = v - i + dot(i, C.xxx);
          // Other corners
          vec3 g = step(x0.yzx, x0.xyz);
          vec3 l = 1.0 - g;
          vec3 i1 = min(g.xyz, l.zxy);
          vec3 i2 = max(g.xyz, l.zxy);
          vec3 x1 = x0 - i1 + C.xxx;
          vec3 x2 = x0 - i2 + C.yyy;
          vec3 x3 = x0 - D.yyy;
          // Permutations
          i = mod289(i);
          vec4 p = permute(permute(permute(
                    i.z + vec4(0.0, i1.z, i2.z, 1.0))
                  + i.y + vec4(0.0, i1.y, i2.y, 1.0))
                  + i.x + vec4(0.0, i1.x, i2.x, 1.0));
          // Gradients: 7x7 points over a square, mapped onto an octahedron.
          // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
          float n_ = 0.142857142857; // 1.0/7.0
          vec3 ns = n_ * D.wyz - D.xzx;
          vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
          vec4 x_ = floor(j * ns.z);
          vec4 y_ = floor(j - 7.0 * x_);
          vec4 x = x_ *ns.x + ns.yyyy;
          vec4 y = y_ *ns.x + ns.yyyy;
          vec4 h = 1.0 - abs(x) - abs(y);
          vec4 b0 = vec4(x.xy, y.xy);
          vec4 b1 = vec4(x.zw, y.zw);
          vec4 s0 = floor(b0)*2.0 + 1.0;
          vec4 s1 = floor(b1)*2.0 + 1.0;
          vec4 sh = -step(h, vec4(0.0));
          vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
          vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
          vec3 p0 = vec3(a0.xy, h.x);
          vec3 p1 = vec3(a0.zw, h.y);
          vec3 p2 = vec3(a1.xy, h.z);
          vec3 p3 = vec3(a1.zw, h.w);
          // Normalise gradients
          vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
          p0 *= norm.x;
          p1 *= norm.y;
          p2 *= norm.z;
          p3 *= norm.w;
          // Mix final noise value
          vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
          m = m * m;
          return 42.0 * dot(m*m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
        }
        // Modified fbm function to use 3D noise
        float fbm3D(vec3 p) {
            float sum = 0.0;
            float amp = patternAmp;
            float freq = patternFreq;
            // Create seed-based offsets using prime multipliers
            vec3 seedOffset = vec3(
                sin(seed * 0.731) * cos(seed * 0.293) * 1.0,
                cos(seed * 0.897) * sin(seed * 0.413) * 1.0,
                sin(seed * 0.529) * cos(seed * 0.671) * 1.0
            );
            // Use octaves with better frequency scaling
            for(int i = 0; i < 2; i++) {
                // Create unique rotation for each octave to break grid patterns
                float angle = seed * 0.1 + float(i) * 0.01;
                mat2 rotation = mat2(
                    cos(angle), -sin(angle),
                    sin(angle), cos(angle)
                );
                // Rotate coordinates slightly for each octave
                vec2 rotatedP = rotation * p.xy;
                vec3 rotated3D = vec3(rotatedP, p.z);
                // Use prime-number-based offsets to avoid repeating patterns
                vec3 octaveOffset = seedOffset + vec3(
                    sin(float(i) * 1.731 + seed * 0.47),
                    cos(float(i) * 1.293 + seed * 0.83),
                    sin(float(i) * 1.453 + seed * 0.61)
                );
                // Apply progressive domain warping for more organic results
                vec3 warpedP = rotated3D + octaveOffset;
                if (i > 0) {
                    // Add slight domain warping based on previous octave
                    warpedP += vec3(
                        sin(sum * 2.14 + warpedP.y * 1.5),
                        cos(sum * 1.71 + warpedP.x * 1.5),
                        sin(sum * 1.93 + warpedP.z * 1.5)
                    ) * 0.1 * float(i);
                }
                // Add contribution from this octave
                sum += amp * snoise3D(warpedP * freq);
                // Use better persistence values (slower amplitude reduction)
                amp *= 0.8;
                // Use better lacunarity values (more moderate frequency increase)
                freq *= 0.8;
            }
            // Normalize and add slight contrast adjustment
            return sum * 0.5 + 0.5;
        }
        void main() {
            vec2 uv = gl_FragCoord.xy / resolution.xy;
            // Adjust aspect ratio
            uv.x *= resolution.x / resolution.y;
            // Apply timeScale from GUI
            float slowTime = time * timeScale;
            // Create seed-influenced flow vectors for different pattern on each refresh
            vec2 flow1 = vec2(
                sin(slowTime * 0.25 + seed * 0.42) * 0.3 + sin(slowTime * 0.14 + seed * 0.23) * 0.2,
                cos(slowTime * 0.22 + seed * 0.31) * 0.3 + cos(slowTime * 0.11 + seed * 0.17) * 0.2
            );
            vec2 flow2 = vec2(
                sin(slowTime * 0.16 + 1.7 + seed * 0.13) * 0.4 + sin(slowTime * 0.18 + seed * 0.29) * 0.1,
                cos(slowTime * 0.19 + 2.3 + seed * 0.19) * 0.4 + cos(slowTime * 0.11 + seed * 0.33) * 0.1
            );
            vec2 flow3 = vec2(
                sin(slowTime * 0.13 + 3.4 + seed * 0.25) * 0.25 + sin(slowTime * 0.22 + seed * 0.11) * 0.15,
                cos(slowTime * 0.18 + 1.2 + seed * 0.37) * 0.25 + cos(slowTime * 0.25 + seed * 0.27) * 0.15
            );
            float noiseScale1 = 10000.0;
            // Main light layer with enhanced 3D liquid motion - using 3D noise
            // The third component determines how the pattern changes over time
            float timeComponent = slowTime * 5.5 + sin(seed * 0.63) * 0.2;
            float lightPattern = fbm3D(vec3(uv * noiseScale1, timeComponent));
            //float lightPattern = 1.0;//fbm3D(vec3(uv * noiseScale1, timeComponent));
            float combinedPattern = lightPattern * 0.25;
            // Start with a seed-influenced base color
            vec3 baseColor = vec3(
                0.6 + sin(seed * 0.4) * 0.1,
                0.9 + cos(seed * 0.3) * 0.05,
                0.92 + sin(seed * 0.5) * 0.05
            );
            // Define pastel colors with slight seed-based variations
            float colorSeed1 = sin(seed * 0.73) * 0.88;
            float colorSeed2 = cos(seed * 0.51) * 0.28;
            float colorSeed3 = sin(seed * 0.92) * 0.48;
            vec3 pastelGreen = vec3(0.85 + colorSeed1, 0.95 + colorSeed2, 0.85 + colorSeed3);
            vec3 pastelBlue = vec3(0.85 + colorSeed3, 0.9 + colorSeed1, 0.98 + colorSeed2);
            vec3 pastelPink = vec3(0.98 + colorSeed2, 0.88 + colorSeed3, 0.92 + colorSeed1);
            vec3 pastelYellow = vec3(0.98 + colorSeed3, 0.95 + colorSeed1, 0.85 + colorSeed2);
            vec3 brightPink = vec3(0.98 + colorSeed1, 0.85 + colorSeed2, 0.92 + colorSeed3);
            vec3 pastelLavender = vec3(0.92 + colorSeed2, 0.88 + colorSeed3, 0.98 + colorSeed1);
            vec3 pastelPeach = vec3(0.98 + colorSeed3, 0.92 + colorSeed1, 0.87 + colorSeed2);
            vec3 pastelTeal = vec3(0.85 + colorSeed1, 0.95 + colorSeed2, 0.95 + colorSeed3);
            vec3 pastelCoral = vec3(0.98 + colorSeed2, 0.88 + colorSeed1, 0.85 + colorSeed3);
            vec3 pastelMint = vec3(0.88 + colorSeed3, 0.98 + colorSeed2, 0.91 + colorSeed1);
            vec3 pastelLilac = vec3(0.91 + colorSeed1, 0.85 + colorSeed3, 0.98 + colorSeed2);
            vec3 pastelSkyBlue = vec3(0.85 + colorSeed2, 0.91 + colorSeed1, 0.98 + colorSeed3);
            // Using larger color patches with 3D liquid-like noise and seed influence
            float verticalFlow = sin(uv.y * 3.0 + slowTime * 0.2 + seed * 0.4) * 1.0;
            // Creating more complex flow patterns for liquid movement
            vec2 liquidFlow1 = flow1 + vec2(verticalFlow, sin(uv.x * 2.5 + slowTime * 0.10 + seed * 0.3) * 0.2);
            vec2 liquidFlow2 = flow2 + vec2(cos(uv.y * 2.2 + slowTime * 0.05 + seed * 0.5) * 0.15, verticalFlow);
            vec2 liquidFlow3 = flow3 + vec2(verticalFlow * 0.5, cos(uv.x * 1.8 - slowTime * 0.07 + seed * 0.7) * 0.25);
            // Add seed-dependent scale factors for noise
            float noiseSeedFactor1 = 0.15 * (1.0 + sin(seed * 0.3) * 0.3);
            float noiseSeedFactor2 = 0.2 * (1.0 + cos(seed * 0.5) * 0.3);
            float noiseSeedFactor3 = 0.12 * (1.0 + sin(seed * 0.7) * 0.3);
            // Using 3D noise for color patterns with different time components for variety
            float colorNoise1 = fbm3D(vec3(uv * noiseSeedFactor1 + liquidFlow1 * 0.03, slowTime * 0.02 + seed * 0.27));
            // Adjust thresholds with seed influence for variety
            float threshSeed1 = 0.0 + sin(seed * 0.4) * 0.15;
            float threshSeed2 = 0.15 + cos(seed * 0.6) * 0.15;
            float threshSeed3 = 0.25 + sin(seed * 0.8) * 0.15;
            float colorMixValue1 = smoothstep(0.0, threshSeed1, colorNoise1);
            float colorMixValue2 = smoothstep(0.0, threshSeed2, colorNoise1);
            float colorMixValue3 = smoothstep(0.0, threshSeed3, colorNoise1);
            // Start with base color and mix in expanded pastel palette
            vec3 colorVariation = baseColor;
            // Layer 1: Primary colors with seed-influenced mix factors
            float mixFactor1 = 2.2 + sin(seed * 0.3) * 0.5;
            float mixFactor2 = 2.0 + cos(seed * 0.5) * 0.5;
            float mixFactor3 = 2.0 + sin(seed * 0.7) * 0.5;
            float mixFactor4 = 2.0 + cos(seed * 0.9) * 0.5;
            colorVariation = mix(colorVariation, pastelBlue, colorMixValue1 * mixFactor1);
            colorVariation = mix(colorVariation, pastelPink, (1.0 - colorMixValue1) * colorMixValue2 * mixFactor2);
            colorVariation = mix(colorVariation, pastelGreen, colorMixValue2 * (1.0 - colorMixValue1) * mixFactor3);
            colorVariation = mix(colorVariation, pastelYellow, (1.0 - colorMixValue2) * colorMixValue1 * mixFactor4);
            // Layer 2: New pastel colors with seed-influenced mix factors
            float mixFactor5 = 1.8 + sin(seed * 1.1) * 0.4;
            float mixFactor6 = 1.8 + cos(seed * 1.3) * 0.4;
            float mixFactor7 = 1.7 + sin(seed * 1.5) * 0.4;
            float mixFactor8 = 1.6 + cos(seed * 1.7) * 0.4;
            float mixFactor9 = 1.5 + sin(seed * 1.9) * 0.4;
            colorVariation = mix(colorVariation, brightPink, (colorMixValue1 * colorMixValue2) * mixFactor5);
            colorVariation = mix(colorVariation, pastelLavender, (1.0 - colorMixValue3) * colorMixValue1 * mixFactor6);
            colorVariation = mix(colorVariation, pastelPeach, colorMixValue3 * (1.0 - colorMixValue2) * mixFactor7);
            colorVariation = mix(colorVariation, pastelTeal, (colorMixValue2 * colorMixValue3) * mixFactor8);
            colorVariation = mix(colorVariation, pastelCoral, ((1.0 - colorMixValue1) * colorMixValue3) * mixFactor9);
            // Layer 3: Additional colors with seed-influenced noise combinations
            float seedOffset1 = sin(seed * 2.1) * 0.05;
            float seedOffset2 = cos(seed * 2.3) * 0.05;
            float mixValue4 = smoothstep(0.0, 1.0, float(uv * (0.18 + seedOffset1)));
            float mixValue5 = mixValue4 - (sin(seed*0.6)*0.4);
            float mixFactor10 = 1.7 + sin(seed * 2.5) * 0.4;
            float mixFactor11 = 1.8 + cos(seed * 2.7) * 0.4;
            float mixFactor12 = 1.5 + sin(seed * 2.9) * 0.4;
            colorVariation = mix(colorVariation, pastelMint, mixValue4 * (1.0 - mixValue5) * mixFactor10);
            colorVariation = mix(colorVariation, pastelLilac, (1.0 - mixValue4) * mixValue5 * mixFactor11);
            colorVariation = mix(colorVariation, pastelSkyBlue, mixValue4 * mixValue5 * mixFactor12);
            // Adjust pattern brightness with seed influence
            float brightnessFactor = 1.0 + sin(seed * 0.5) * 2.1;
            combinedPattern = pow(combinedPattern * 0.2 + 0.8, brightnessFactor);
            // Create light spots with seed-influenced threshold
            float lightThreshold = 1.0 + sin(seed * 0.6) * 0.8;
            float lightSpots = smoothstep(0.0, lightThreshold, combinedPattern);
            // Enhanced circular light patterns with seed-influenced distortion
            float distortionAmount = 1.0 + cos(seed * 0.7) * 5.05;
            float distortion = sin(slowTime * 0.1 + seed) * distortionAmount;
            vec2 distortedUV = fract(uv * 1.0 + vec2(
                sin(uv.y * 2.0 + slowTime * 0.15 + seed * 0.8) * distortY,
                cos(uv.x * 1.8 + slowTime * 0.1 + seed * 0.9) * distortX
            ));
            // Adjust circular spots with seed influence
            float circleSize = minCircleSize + sin(seed) * 1.3;
            float circleThreshold = 0.0 + cos(seed * 1.3) * 2.05;
            float circularSpots = smoothstep(0.0, circleThreshold, 1.0 - length((distortedUV - 0.5) * (circleSize + distortion)));
            // Mix with liquid movement
            float mixRatio = 0.0 + sin(seed * 1.5) * circleStrength;
            lightSpots = mix(lightSpots, circularSpots * lightSpots, mixRatio);
            // Apply liquid-like diffusion with seed influence and 3D noise
            float diffusionScale = 0.0 + cos(seed * 1.7) * 5.0;
            float diffusedLightSpots = fbm3D(vec3(
                uv * diffusionScale + vec2(
                    sin(slowTime * 0.03 + uv.x + seed * 1.9) * 0.2,
                    cos(slowTime * 0.02 + uv.y + seed * 2.1) * 0.2
                ),
                slowTime * 0.05 + sin(seed * 0.76) * 0.5
            )) * lightSpots;
            // Mix diffusion with seed influence
            //float diffusionMix = 0.7 + sin(seed * 2.3) * 0.1;
            float diffusionMix = 1.0;
            lightSpots = mix(lightSpots, diffusedLightSpots, diffusionMix);
            // Final pattern mix
            float patternMix = 1.0;
            combinedPattern = mix(combinedPattern, lightSpots, patternMix);
            float finalValue = combinedPattern;
            // Use the color variation and apply color tint from GUI
            vec3 color = finalValue * colorVariation * colorTint;
            // Bloom with GUI-controlled bloomStrength
            float bloomThreshold = 1.0;
            float bloom = smoothstep(0.0, bloomThreshold, finalValue) * bloomStrength;
            color += bloom;
            // Grain with GUI-controlled grainAmount
            vec2 noiseCoord = uv;
            float noise =  random(noiseCoord + time * 0.0015) * grainAmount;
            color = color + vec3(noise);
            // Saturation with GUI control
            float luminance = dot(color, vec3(0.299, 0.587, 0.114));
            vec3 saturatedColor = mix(vec3(luminance), color, saturation);
            float satMix = 1.0;
            color = mix(color, saturatedColor, satMix);
            gl_FragColor = vec4(color, 1.0);
        }
    </script>
    <!--LINK SCRIPT VUE ROOT APP-->
    <script type="module" src="/src/main.js"></script>
  </body>
  <!--LINK SCRIPT BACKGROUND-->
  <script src="mp4-muxer-main/build/mp4-muxer.js"></script>
  <script src="helperFunctions.js"></script>
  <script src="canvasVideoExport.js"></script>
  <script src="main.js"></script>
 </html>
@@ -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",
+      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "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 @@
 [
-  "vega"
+  "vga_nar6_ta", 
  "openup42",
  "berthasse",
  "arlsn",
  "djstarheartzzz",
  "openup42"
 ]
@@ -1,10 +1,30 @@
 [
  {
-    "name": "vega",
+    "name": "vga_nar6_ta",
    "folder": 2
  },
  {
-    "name": "Drags and Nerds /",
+    "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
  }
 ]
@@ -10,7 +10,7 @@
 :root[data-theme="light"]{
  --back-color: white;
  --main-color: black;
-  --accent-color: #C303FF;
+  --accent-color: #FFA64D;
  --neon-color: black;
 }
@@ -118,7 +118,7 @@ html, body{
  scrollbar-width: thin;
 }
-canvas {
+#canvas {
    display: block;
    max-width: 100%;
    position: fixed;
@@ -126,7 +126,27 @@ canvas {
    padding: 0;
    /* margin-top: 0vh; */
    text-align: center;
-    /* height: 100vh; */
+    height: 100vh;
    width: 100vw;
    overflow: hidden;
 }
 #canvas video {
  width: 100%;
  height: 100%;
  filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg);
  object-fit: cover;
  transition: 7.77s ease-in;
 }
 #canvas .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background: url("./background-noise.png");
 }
@@ -281,11 +301,16 @@ canvas {
 }
 .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;
@@ -17,14 +17,15 @@ function creditsContent(str){
 }
 export async function loadAudioData() {
-  const audioRes = await fetch('./DATA/audioData.json');
+  const audioRes = await fetch('/DATA/audioData.json');
  const aData = await audioRes.json();
  //console.log("MUSIC :", aData);
  const res = await fetch("https://pouet.drags-nerds.net/api/v1/timelines/public?local=true&limit=40");
  if(!res.ok) throw new Error(`Server responded with ${res.status} ${res.statusText}`);
  const pouets = await res.json();
-  const filtered = pouets.filter(p => aData.some(user => p.account.display_name === user));
+  const filtered = pouets.filter(p => aData.some(user => p.account.username === user || p.reblog?.account.username === user.name));
  //console.log(filtered);
  const files = {};
  for (const user of aData) {
@@ -34,18 +35,24 @@ export async function loadAudioData() {
  let audioFiles = [];
  for (const pouet of filtered){
    let selectedPouet;
    if (pouet.reblog){
      selectedPouet = pouet.reblog;
    } else {
      selectedPouet = pouet;
    }
    //ignorer les PJ autres que audio
-    if (pouet.media_attachments?.length > 0 &&
+    if (selectedPouet.media_attachments?.length > 0 &&
-        !pouet.media_attachments[0].type.includes('audio')) {
+        !selectedPouet.media_attachments[0].type.includes('audio')) {
      continue;
    }
-    if(pouet.media_attachments?.length > 0){
+    if(selectedPouet.media_attachments?.length > 0){
-        let credits = creditsContent(pouet.content);
+        let credits = creditsContent(selectedPouet.content);
      let entry = {
        track: credits.track,
        artist: credits.artist,
-        src: pouet.media_attachments[0].url
+        src: selectedPouet.media_attachments[0].url
      }
      audioFiles.push(entry);
    }
@@ -27,20 +27,27 @@ export async function loadMsgData() {
  if(!res.ok) throw new Error(`Server responded with ${res.status} ${res.statusText}`);
  const pouets = await res.json();
-  const filtered = pouets.filter(p => p.account.display_name === 'Drags and Nerds /Live');
+  //console.log("POUETS :" , pouets);
-  //console.log(filtered);
+  const filtered = pouets.filter(p => p.account.username === 'drags_nerds_live' || p.reblog?.account.username === 'drags_nerds_live');
  //console.log("FILTERED :" , filtered);
  let msgContent = [];
  for (let pouet of filtered){
-    let textInfos = titleAndContent(pouet.content);
+    let selectedPouet;
-    let dateInfos = idAndDate(pouet.created_at);
+    if (pouet.reblog){
      selectedPouet = pouet.reblog;
    } else {
      selectedPouet = pouet;
    }
    let textInfos = titleAndContent(selectedPouet.text);
    let dateInfos = idAndDate(selectedPouet.created_at);
    let entry = {
      title: textInfos.title,
      date: dateInfos.date,
-      dateInfo: pouet.created_at,
+      dateInfo: selectedPouet.created_at,
      content: textInfos.content,
-      like: pouet.favourites_count,
+      like: selectedPouet.favourites_count,
      isLiked: false,
      wasRead: false,
      isSelected: false
@@ -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,20 +24,16 @@ function titleAndContent(str){
  for(let line of contentData){
    if(line.includes('http')||line.includes('@')){
      let linkData = line.split("# ");
-      console.log(linkData);
+      //console.log(linkData[1]);
-      let linkNoFormat = linkData[1].split("\"");
+      let linkNoFormat;
      let url = "";
-      for(let el of linkNoFormat){
+      if (linkData[1].includes('http')){
-        if(el.includes('http')){
+        linkNoFormat = linkData[1].split("\"");
-          url = el;
+        url = linkNoFormat[1];
-          break
+      } else if (linkData[1].includes('@')){
-        } else if(el.includes('@')){
+          url = 'mailto:' + linkData[1];
          url = 'mailto:' + el;
          break
        } else {
          continue
        }
      }
      //console.log("url info", url)
      src.push({
        caption: linkData[0],
        url: url
@@ -56,8 +54,8 @@ function exceptionKey(user, content){
  let key = "";
  if (data.length > 1) key = data[1].split('<br>')[0];
  //console.log(key);
-  if (key === "bm90X3dlYnNpdGVfY29udGVudA==" && user !=="Drags and Nerds /") return true;
+  if (key === "bm90X3dlYnNpdGVfY29udGVudA==" && user !=="drags_nerds") return true;
-  if (user === "Drags and Nerds /"){
+  if (user === "drags_nerds"){
    if(key != "c2VuZF9tZXNzYWdlX3RvX3dlYnNpdGU="){
      return true;
    }
@@ -65,8 +63,13 @@ 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 usernamesRes = await fetch('/DATA/peopleData.json');
  const pData = await usernamesRes.json();
  //console.log("USERS :", pData);
  const res = await fetch("https://pouet.drags-nerds.net/api/v1/timelines/public?local=true&limit=40");
@@ -76,7 +79,7 @@ export async function loadPeopleData() {
  const pouets = await res.json();
  //console.log("POUETS :" , pouets);
-  const filtered = pouets.filter(p => pData.some(user => p.account.display_name === user.name));
+  const filtered = pouets.filter(p => pData.some(user => p.account.username === user.name || p.reblog?.account.username === user.name));
  //console.log("FILTERED :" , filtered);
  const files = {};
  for (const user of pData) {
@@ -84,75 +87,111 @@ export async function loadPeopleData() {
  }
  const description = {};
  for (const user of pData){
-    const pouet = filtered.find(p => p.account.display_name === user.name);
+    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'
      }
    }
  }
  for (const pouet of filtered) {
-    const username = pouet.account.display_name;
+    let selectedPouet;
-    let infos = idAndDate(pouet.created_at);
+    if(pouet.reblog){
      selectedPouet = pouet.reblog;
    } else {
      selectedPouet = pouet;
    }
    //console.log(selectedPouet);
    const username = selectedPouet.account.username;
    const displayName = selectedPouet.account.display_name;
    let infos = idAndDate(selectedPouet.created_at);
    let entry;
    //console.log(pouet);
    //ignorer autres que images
-    if (pouet.media_attachments?.length > 0 &&
+    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
-    if (pouet.in_reply_to_account_id) {
+    if (selectedPouet.in_reply_to_account_id) {
      continue;
    }
    //ignorer exceptions
-    let exception = exceptionKey(username, pouet.content);
+    let exception = exceptionKey(username, selectedPouet.content);
    //console.log(exception)
    if(exception){
      continue;
    }
-    if (pouet.content.includes('http')) {
+    if (selectedPouet.content.includes('http')) {
-      let textInfos = titleAndContent(pouet.content);
+      let textInfos = titleAndContent(selectedPouet.content);
      entry = {
-        id: 'link' + username + infos.id,
+        id: 'link' + displayName + infos.id,
        date: infos.date,
-        dateInfo: pouet.created_at,
+        dateInfo: selectedPouet.created_at,
        type: "link",
-        author: username,
+        author: displayName,
-        caption: textInfos.title + '.liens',
+        caption: textInfos.title + '.plus',
        links: textInfos.links,
        description: textInfos.content,
        isSelected: false
      };
-    } else if (pouet.media_attachments?.length > 0) {
+    } else if (selectedPouet.media_attachments?.length > 0) {
-          let textInfos = titleAndContent(pouet.content);
+          let textInfos = titleAndContent(selectedPouet.content);
-          console.log(pouet);
+          //console.log(pouet);
          if (pouet.media_attachments[0].type.includes('image')){
              entry = {
-            id: 'img' + username + infos.id,
+              id: 'img' + displayName + infos.id,
              date: infos.date,
-            dateInfo: pouet.created_at,
+              dateInfo: selectedPouet.created_at,
              type: "image",
-            author: username,
+              author: displayName,
              caption: textInfos.title + '.star',
-            src: pouet.media_attachments[0].url,
+              src: selectedPouet.media_attachments[0].url,
-            alt: pouet.media_attachments[0].description,
+              alt: selectedPouet.media_attachments[0].description,
              description: textInfos.content,
-            like: pouet.favourites_count,
+              like: selectedPouet.favourites_count,
              isSelected: false
            }
-    } else {
+          }
-      let textInfos = titleAndContent(pouet.content);
+          if (pouet.media_attachments[0].type.includes('video')){
              let videoType = videoExt(selectedPouet.media_attachments[0].url)
              entry = {
-        id: 'txt' + username + infos.id,
+              id: 'vid' + displayName + infos.id,
              date: infos.date,
-        dateInfo: pouet.created_at,
+              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 = {
        id: 'txt' + displayName + infos.id,
        date: infos.date,
        dateInfo: selectedPouet.created_at,
        type: "text",
-        author: username,
+        author: displayName,
        caption: textInfos.title + '.msg',
        description: textInfos.content,
        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
  }
 })
@@ -71,10 +71,11 @@
  #artistPannel{
    position: fixed;
-    width: 380px;
+    width: 420px;
-    height: 500px;
+    height: 600px;
    top: 16.1px;
    left: 16.1px;
    z-index: 33;
  }
  #artistContent{
@@ -123,14 +124,15 @@
  .theMatrix{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    grid-auto-rows: 133px;
+    grid-auto-rows: 150px;
-    gap: 10px;
+    gap: 16.1px;
    width: 97%;
    height: 66%;
    overflow-y: auto;
    align-items: center;
    margin-left: 5px;
    margin-top: 5px;
    padding-top: 10px;
  }
  .itemDesc{
@@ -330,7 +332,7 @@
        rootDepth: 0
      }
    },
-    emits: ['close','focus','openImg','openLink'],
+    emits: ['close','focus','openImg','openLink','openVideo'],
    methods:{
      onDrag({ target, transform }) {
        target.style.transform = transform;
@@ -391,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="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>
            <a href="#" class="textBtnStyle">Paypal</a>
            <a href="#" class="textBtnStyle">SumUp</a>
          </div>
      </div>
    </div>
@@ -76,7 +79,7 @@
  }
  #linkRow .textBtnStyle{
-    width: 27%;
+    width: 77.7%;
    height: 50px;
    margin-bottom: 16.1px;
  }
@@ -8,7 +8,7 @@
 </script>
 <template>
-    <Teleport to="#infoMenuContainer" defer>
+    <Teleport to="#playerContainer" defer>
      <div class="graffContainer" id="TsContainer">
        <TsGraff name="graffTs" class="graff" id="graffTs"/>
        <TsNeon name="neonTs" class="neon" id="neonTs"/>
@@ -63,7 +63,7 @@
  }
  #TsContainer{
-    top: -155%;
+    top: 66px;
    left: 131.2px;
  }
  #graffTs{
@@ -106,17 +106,12 @@
    margin-left: -7.77px;
    margin-top: -7.77px;
  }
-  /*================ TINY PHONE*/
+
  @media(max-width:350px){
    #TsContainer{
      top: -133%;
    }
  }
  /*================ PC LARGE*/
  @media(min-width:1300px){
    #TsContainer{
-      top: 50px;
+      top: 55px;
-      left: -144%;
+      left: 300px;
    }
    #graffTs{
      width: 100px;
@@ -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
      }
    },
@@ -51,17 +51,19 @@
    position: fixed;
    top:50%;
    left:3.33%;
-    width: 333px;
+    width: 400px;
-    height: 333px;
+    height: 400px;
  }
  #msgContent{
-    width: 100%;
+    width: 95%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: scroll;
  }
  /*================ PC LARGE*/
  @media(min-width:1000px){
    #msgVisualizer{
@@ -80,6 +82,7 @@
    padding-left: 7.77px;
    margin-top: 0;
    height: 77%;
    pointer-events: all;
    overflow-y: scroll;
  }
 </style>
@@ -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>
@@ -56,6 +56,7 @@
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 33;
  }
  #inboxHeader{
    width: 100%;
@@ -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">
@@ -60,12 +60,13 @@
        </button>
      </div>
    </div>
-    <!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link'-->
+    <!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link' 'follow' 'donation'-->
    <InboxDiv @open="openPannel('msg')"></InboxDiv>
    <ArtistPan
      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')"
@@ -148,6 +155,7 @@
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 33;
  }
  #btnColumn{
@@ -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);
@@ -125,7 +125,8 @@
    emits: ['themeDark', 'themeLight'],
    data(){
      return{
-        isChecked: false
+        isChecked: false,
        target: null
      }
    },
    methods:{
@@ -133,15 +134,18 @@
        if(this.isChecked){
          this.isChecked = false;
          this.$emit('themeLight');
          this.target.style.filter = 'invert(1) saturate(333%) brightness(93%) hue-rotate(90deg)'
          return document.documentElement.setAttribute("data-theme", "light")
        }else{
          this.isChecked = true;
          this.$emit('themeDark');
          this.target.style.filter = 'invert(0) saturate(161%) brightness(117%) hue-rotate(1.61deg)'
          return document.documentElement.setAttribute("data-theme", "dark")
        }
      }
    },
-    mounted(){
+    async mounted(){
      this.target = await document.querySelector('#canvas video');
      console.log("Theme button is loaded!");
    }
  };
@@ -4,7 +4,7 @@
 <template>
    <div id="generatedContainer" ref="generatorContainer">
-    <div class="loadingOverlay" v-show="overlayIsActive"><p id="loadingOText">ça charge...</p></div>
+    <div class="loadingOverlay" v-show="false"><p id="loadingOText">ça charge...</p></div>
      <div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" v-for="item in randomImgList" :key="item.id" :style="{
                                                                                                  left: item.x + 'px',
                                                                                                  top: item.y + 'px'
@@ -52,6 +52,7 @@
    align-items: center;
    justify-content: flex-start;
    padding-top: 13.12px;
    z-index: 0;
  }
  #playerContainer .iconBtnStyle{
@@ -30,7 +30,7 @@
              <br>
              20h/ Début des shows
              <br>
-              &emsp;&emsp;&emsp; &rarr; &rarr; &rarr; jusqu'à 1h
+              &emsp;&emsp; &rarr; &rarr; &rarr; jusqu'à 1h
              </p>
            </time>
          </div>
@@ -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>
@@ -5,7 +5,6 @@ import svgLoader from 'vite-svg-loader'
 // https://vite.dev/config/
 export default defineConfig({
  base: './',
  plugins: [vue(), svgLoader()],
  server: {
    host: '0.0.0.0',
@@ -15,5 +14,14 @@ export default defineConfig({
    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
vgaNAR6ta	e9b4b79eff	edit : gestion du ptn de REBLOG aaaaah xD	2026-04-09 17:13:18 +02:00
vgaNAR6ta	823b723a43	edit: bug dans la lecture des msg de l'orga de mastodon + réglages avant prod	2026-04-09 03:55:00 +02:00
vgaNAR6ta	275fd74ca9	edit: position logo ts + correction z-index, filtrage par username, gamme colorée adaptée + changement du fond avec le thème	2026-04-08 05:32:16 +02:00
vgaNAR6ta	195fd10424	Merge pull request 'Optimisation de l'arrière plan' (#1 ) from epickiwi/drags-and-nerds:opti-background into vgaNAR6ta Reviewed-on: #1	2026-04-08 00:43:03 +02:00
epickiwi	914061eb92	Removed screenshot	2026-04-07 23:33:02 +02:00
epickiwi	958c5ca8dd	Added video and noise	2026-04-07 23:30:50 +02:00