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
104 changed files with 3032 additions and 734 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
+}
@@ -4,6 +4,7 @@
    <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">
@@ -12,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-->
@@ -28,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,8 +8,10 @@
      "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",
        "vue3-moveable": "^0.28.0"
      },
      "devDependencies": {
@@ -1068,6 +1070,17 @@
      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
      "license": "ISC"
    },
+    "node_modules/clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "license": "MIT",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
    "node_modules/commander": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -1239,6 +1252,12 @@
        }
      }
    },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "license": "MIT"
+    },
    "node_modules/dom-serializer": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -1415,6 +1434,27 @@
        "@scena/event-emitter": "^1.0.2"
      }
    },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "license": "MIT",
+      "dependencies": {
+        "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",
@@ -1513,9 +1553,9 @@
      "license": "ISC"
    },
    "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -1647,6 +1687,12 @@
        "node": ">=11.0.0"
      }
    },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==",
+      "license": "MIT"
+    },
    "node_modules/selecto": {
      "version": "1.26.3",
      "resolved": "https://registry.npmjs.org/selecto/-/selecto-1.26.3.tgz",
@@ -1699,6 +1745,12 @@
        "url": "https://opencollective.com/svgo"
      }
    },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "license": "MIT"
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -1717,9 +1769,9 @@
      }
    },
    "node_modules/vite": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -1825,6 +1877,18 @@
        }
      }
    },
+    "node_modules/vue3-clipboard": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue3-clipboard/-/vue3-clipboard-1.0.0.tgz",
+      "integrity": "sha512-GUqKh1oO79xDpq0z+cCv/NDVTpcJGNDzeNgT3PmTdTp/WJh3gcTrDqIYKycKhzMFOtIFJ7hO/+usgyWtT+fNhA==",
+      "license": "ISC",
+      "dependencies": {
+        "clipboard": "^2.0.6"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/vue3-moveable": {
      "version": "0.28.0",
      "resolved": "https://registry.npmjs.org/vue3-moveable/-/vue3-moveable-0.28.0.tgz",
@@ -9,8 +9,10 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "intrinsic-scale": "^5.0.0",
    "vite-svg-loader": "^5.1.1",
    "vue": "^3.5.25",
+    "vue3-clipboard": "^1.0.0",
    "vue3-moveable": "^0.28.0"
  },
  "devDependencies": {
@@ -1,17 +1,8 @@
 [
-  {
-    "track":"L'Inverse",
-    "artist":"Surprise",
-    "src":"./DATA/Son/1.mp3"
-  },
-  {
-    "track":"Yummy",
-    "artist":"Ayesha Erotica",
-    "src":"./DATA/Son/2.mp3"
-  },
-  {
-    "track":"M le Maudit",
-    "artist":"Mauvais Exemple",
-    "src":"./DATA/Son/3.mp3"
-  }
+  "vga_nar6_ta", 
+  "openup42",
+  "berthasse",
+  "arlsn",
+  "djstarheartzzz",
+  "openup42"
 ]
@@ -1,38 +0,0 @@
-[
-  {
-    "title": "Atelier Meetup 1/3",
-    "date": "21/03",
-    "content": "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. \n\n Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-    "like": 0,
-    "isLiked": false,
-    "going": 0,
-    "isGoing": false,
-    "wasRead": false,
-    "isSelected": false,
-    "isEvent": true
-  },
-  {
-    "title": "Atelier Meetup 1/3",
-    "date": "21/03",
-    "content": "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. \n\n Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-    "like": 0,
-    "isLiked": false,
-    "going": 0,
-    "isGoing": false,
-    "wasRead": false,
-    "isSelected": false,
-    "isEvent": true
-  },
-  {
-    "title": "Atelier Meetup 1/3",
-    "date": "21/03",
-    "content": "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. \n\n Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-    "like": 0,
-    "isLiked": false,
-    "going": 0,
-    "isGoing": false,
-    "wasRead": false,
-    "isSelected": false,
-    "isEvent": true
-  }
-]
@@ -1,125 +1,30 @@
 [
  {
-    "type": "folder",
-    "date": "33/33",
-    "isSelected": false,
-    "caption": "Artistes DRAGs",
-    "description": "Si tu veux en savoir plus sur nos artistes drags, c'est par ici !",
-    "children": [
-      {
-        "type": "folder",
-        "date": "33/33",
-        "isSelected": false,
-        "caption": "Urazoria",
-        "description": "Urazoria est une Drag Creature de Limoges, et aussi une des fondatrice de drags & nerds, host de la 1ère édition",
-        "children": [
-          {
-            "type": "image",
-            "date": "33/33",
-            "isSelected": false,
-            "caption": "Urazoria003.star",
-            "description": "Urazoria dans son show à XXXX pour XXXX en 2025",
-            "src":"./DATA/Images/ura-bleu.png",
-            "like": 0,
-            "isLiked": false
-          },
-          {
-            "type": "text",
-            "date": "33/33",
-            "isSelected": false,
-            "caption": "Urazoria.loveMsg",
-            "description": "Coucou !"
-          }
-        ]
-      },
-      {
-        "type": "text",
-        "date": "33/33",
-        "isSelected": false,
-        "caption": "Urazoria.loveMsg",
-        "description": "Coucou !"
-      }
-    ]
+    "name": "vga_nar6_ta",
+    "folder": 2
  },
  {
-    "type": "folder",
-    "date": "33/33",
-    "isSelected": false,
-    "caption": "Artistes NERDs",
-    "description": "Si tu veux en savoir plus sur nos artistes nerds, c'est par là !",
-    "children": [
-      {
-        "type": "folder",
-        "date": "33/33",
-        "isSelected": false,
-        "caption": "Théo",
-        "description": "Theo est un musicien qui construit des synthés modulaires",
-        "children": [
-          {
-            "type": "link",
-            "date": "33/33",
-            "isSelected": false,
-            "caption": "Theo.web",
-            "description": "Réseaux de Theo",
-            "links":[
-              {
-                "caption":"site web",
-                "url":"https://drags-nerds.net"
-              },
-              {
-                "caption":"site web",
-                "url":"https://drags-nerds.net"
-              }
-            ]
-          },
-          {
-            "type": "text",
-            "date": "33/33",
-            "isSelected": false,
-            "caption": "Theo.loveMsg",
-            "description": "Hello !"
-          }
-        ]
-      }
-    ]
+    "name": "drags_nerds",
+    "folder": 2
  },
  {
-    "type": "folder",
-    "date": "33/33",
-    "isSelected": false,
-    "caption": "Autres",
-    "description": "Dans ce dossier on met en vrac plein de trucs, qu'on trouve cool, sur nous (ou pas), nos valeurs etc. Allez fouiller si vous avez le temps ^^",
-    "children": [
-      {
-        "type": "link",
-        "date": "33/33",
-        "isSelected": false,
-        "caption": "Background.web",
-        "description": "Site internet du fond animé, en open source, allez checker ça l'équipe ! (et payer un café à son créateur si vous pouvez hihi)",
-        "links":[
-          {
-            "caption":"site web",
-            "url":"https://collidingscopes.github.io/liquid-shape-distortions"
-          }
-        ]
-      },
-      {
-        "type": "text",
-        "date": "33/33",
-        "isSelected": false,
-        "caption": "DNN.loveMsg",
-        "description": "Hello again!"
-      },
-      {
-        "type": "image",
-        "date": "33/33",
-        "isSelected": false,
-        "caption": "Urazoria003.star",
-        "description": "Urazoria dans son show à XXXX pour XXXX en 2025",
-        "src":"./DATA/Images/ura-vert.png",
-        "like": 0,
-        "isLiked": false
-      }
-    ]
+    "name": "berthasse",
+    "folder": 1
+  },
+  {
+    "name": "berthasse",
+    "folder": 0
+  },
+  {
+    "name": "arlsn",
+    "folder": 1
+  },
+  {
+    "name": "djstarheartzzz",
+    "folder": 1
+  },
+  {
+    "name": "openup42",
+    "folder": 1
  }
 ]
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.57 33.57">
+  <polygon points="23.83 12.81 23.83 15.51 23.86 15.53 18.05 15.53 18.05 9.71 18.07 9.74 20.77 9.74 16.79 4.02 16.77 4.02 12.81 9.74 15.51 9.74 15.53 9.71 15.53 15.53 9.71 15.53 9.74 15.51 9.74 12.81 4.02 16.78 4.02 16.81 9.74 20.77 9.74 18.07 9.71 18.05 15.53 18.05 15.53 23.86 15.51 23.83 12.81 23.83 16.78 29.56 16.81 29.56 20.77 23.83 18.07 23.83 18.05 23.86 18.05 18.05 23.86 18.05 23.83 18.07 23.83 20.77 29.56 16.79 29.56 16.77 23.83 12.81"/>
+</svg>
@@ -13,10 +13,10 @@ function togglePlayPause() {
 // Function to refresh the pattern with a new random seed
 const selectedSeeds = [53, 118, 506];
 var seedCount = 2;
-function refreshPattern() {
+function refreshPattern(seed) {
  timeOffset = performance.now();
  //randomSeed = Math.floor(Math.random() * 1000,0);
-  randomSeed = selectedSeeds[seedCount];
+  randomSeed = seed;
  gl.uniform1f(seedLocation, randomSeed);
  if(!isPlaying){
    isPlaying = true;
@@ -114,9 +114,10 @@ const params = {
 };

 // Also refresh on page load
-window.addEventListener('load', refreshPattern);
+window.addEventListener('load', refreshPattern(506));
 window.addEventListener('resize', updateCanvasSize);

+
 // Initialize dat.gui
 const gui = new dat.GUI({ autoplace: false });
 gui.close();
@@ -192,9 +193,12 @@ function render(timestamp) {
      animationID = requestAnimationFrame(render);
  }
 }
+function refreshBackground(seed){
+  isPlaying = true;
+  refreshPattern(seed);
+  updateUniforms();
+  animationID = requestAnimationFrame(render);
+}

 // Start the animation loop
-isPlaying = true;
-refreshPattern();
-updateUniforms();
-animationID = requestAnimationFrame(render);
+refreshBackground(506);
@@ -3,6 +3,7 @@
      <Infobulle></Infobulle>
      <TitleDiv></TitleDiv>
      <InfoDiv></InfoDiv>
+      <GraffOver></GraffOver>
    </div>
 </template>

@@ -25,7 +26,7 @@
    width:100%;
    position:absolute;
    inset:0;
-    height:200%;
+    height:233%;
    display: flex;
    flex-direction: column;
    align-items: center;
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.38 72.65">
+  <path d="M24.78,6.98s.2.01.24.06c.03.03.39.69.43.78.71,1.7-.29,3.63-.45,5.36-.15,1.59-.06,3.34-.16,4.99-.07,1.17-.48,2.58-.7,3.81-1.24,6.81-2.37,13.69-3.45,20.54-.16,1-.27,2.03-.43,3.02l.19.12c.82-.37,1.7-.61,2.53-.93,3.5-1.34,7.27-3.2,10.86-4.14,2.03-.53,3.79,1.3,3.8,3.27,0,1.72-.47,2.78-1.47,4.09-.55.72-1.3,1.51-2.06,1.94-.04.74,0,1.74-.17,2.44-.15.6-.66,1.36-.87,1.97-.42,1.24.21,2.06-.52,3.57-.59,1.21-1.76,1.39-1.84-.16-.02-.37.01-1.69.06-2.02.13-.88,1.1-1.79,1.16-2.82.02-.37-.21-1.74-.38-2.06-.1-.19-.65-.15-.82-.05-.46.75-.04,1.95-.25,2.63-.11.37-1.21.86-1.6.81-.47-.07-1-.84-1.01-1.32,0-.32.21-.43.18-.68-.03-.28-.19-.63-.52-.6-.38.03-1.46.39-1.87.53-1.89.63-4.1,1.42-5.38,3.01-.89,1.11-.89,3.08-2.32,3.66-.31.13-.81.06-.93.32-.31,1.33.24,2.6,0,3.98-.14.81-.71,1.96-1.7,1.49-.73-.34-.32-1.52-.34-2.07-.01-.48-.32-1.15-.32-1.58,0-.51.52-.88.3-1.56-.6-.67-1.37.4-1.42.94-.01.13.08.28.07.41-.17,1.85-.19,3.77-.44,5.64-.13.95-.81,2.16-.91,3.08-.09.86.71,1.19.04,2.45-.58,1.1-2.62.9-2.47-.04.04-.25.28-.26.41-.44.52-.7-.04-1.86.14-2.58.1-.37.8-1.04.96-1.45.47-1.18.3-2.15.38-3.29s.33-1.7.11-2.84c-.02-.11.36-1.96.42-2.17.03-.08.18-.07.24-.3.07-.26.12-.57.02-.83-.22-.37-.9-.08-1.21.05-2.69,1.15-8.23,4.94-10.53,1.62-1.21-1.75-.99-4.14.39-5.72,2.14-2.42,6.79-3.66,9.8-4.73.64-.23,1.29-.47,1.92-.73,1.02-5.61,1.36-11.3,2-16.96l1.25-7.56-.21-.11c-.26.11-.33.54-.45.66-2.45,2.43-4.99,4.76-7.28,7.4-1.12,1.29-1.52,2.75-3.46,2.89-.88.06-1.59-.01-2.36-.45-.23-.13-1.45-1.13-1.56-1.3-.3-.44-.3-1.54-.18-2.05s1.56-2.77,1.97-3.18c.15-.15.29-.04.3-.06.5-.64,1.15-2.09,1.75-2.91,2.01-2.71,4.45-5.28,6.61-7.97,2.59-3.23,4.76-6.69,7.25-9.94.38-.5,1.97-1.6,2.55-1.76s1.63.07,2.15.37c.63.36,1.09.91,1.56,1.43Z"/>
+  <path d="M58.97,1.1c.05.07.23.09.26.21s-.08.28-.06.39c.26,1.31.38,1.63-.33,2.86-.96,1.69-2.74,3.33-3.93,4.78-1.08,1.31-1.78,2.66-2.74,4.02-.19.27-.74.52-.69.98.57-.53,1.33-.81,2.07-1.02,4.58-1.3,9.23-.43,12.96,2.51,4.45,3.5,5.59,8.35,4.09,13.72-1.1,3.94-2.34,7.64-5.4,10.62-4.33,4.22-11.12,7.45-17.05,4.29-1.46-.78-3.25-2.37-4.21-3.76-4.56-6.56-6.05-13.55-3.38-21.27,1.08-3.12,2.55-6.39,4.01-9.31.95-1.91,3.13-3.6,4.64-5.22.57-.62.99-1.26,1.59-1.87C51.75,2.08,54.24.05,55.63,0c.95-.04,2.75.33,3.34,1.1ZM63.09,33.6c2.99-4.01,1.75-9.87-2.17-12.8-1.45-1.08-4.51-.93-6.17-.42-4.2,1.27-6.76,3.65-8.22,7.82-.84,2.39.43,6.09,2.35,7.68,2.11,1.75,4.05,2.6,6.85,2.25,2.56-.32,3.61-2.19,5.73-3.29.23-.12.5-.1.73-.22.09-.05.82-.89.91-1.02Z"/>
+  <path d="M97.29,3.48c.35.28.35,2.13.34,2.65-.04,1.78-.8,3.69-1.05,5.45-.39,2.82-.32,5.9-.66,8.78-.37,3.15-.68,5.88-.91,9.05-.16,2.18-.42,4.36-.53,6.55,1.03-.2,2.07-.36,3.11-.51,3.08-.43,6.13-.95,9.19-1.51,1.04-.19,2.31-.65,3.31-.78.9-.12,1.3.05,1.95.62.87.78,1.47,2.29,1.33,3.49-.04.39-.97,1.94-1.31,2.15-1.2.76-3.79.71-5.22.97-.98.18-2.37.56-3.35.84-.5.14-1.11.54-1.63.58-.31.02-.57-.11-.91-.09-.89.06-2.66.58-3.61.8-.53.12-2.26.42-2.62.73-.16.14-.36,1.11-.41,1.38-.13.76.02,1.8-.18,2.44-.22.68-1.1,1.76-1.8,1.97-.76.23-2.52.21-3.07-.44-.22-.26-.72-1.88-.83-2.31-.13-.48-.14-1.37-.34-1.76-.07-.14-.09-.15-.24-.18-.19-.03-2.13.46-2.49.56-2.55.65-5.28,1.26-7.73,2.23-.17.07-.37.03-.53.1l-.04.38c-.11.16-.47.03-.64.2-.26.26.09.67-.67.54-.19.37.07.8.05,1.1-.03.55-1.06.75-1.51,1.01-.06.09-.23,1.89-.21,2.12.05.51.59,1.68-.28,1.84-.76.15-1.19-.23-1.21-.99-.03-1.03.44-2.57.43-3.67-.08-1.31.18-2.12-.26-3.4-.16-.47-.68-1.25-.76-1.65-.06-.29-.12-1.54-.11-1.87.01-.38,1-1.87,1.3-2.14.59-.52,1.47-.39,2.07-.55.15-.04.35-.31.54-.4.69-.34,2.15-.21,3.02-.34,2.73-.41,6.23-1.3,8.85-2.17.1-.03.24,0,.35,0,.11-.6-.22-1.15-.22-1.73,0-4.04.03-8.13.65-12.15.09-.58.99-4.39.83-4.57-.19-.03-.31.13-.42.26-.37.44-.78,1.2-1.15,1.68-.97,1.23-2.05,2.37-3.08,3.52-1.41,1.58-2.65,3.34-4.05,4.97-.78.92-1.33,2.21-2.86,1.5-.2-.1-1.51-1.2-1.65-1.39-.16-.22-.82-1.42-.93-1.69-.46-1.11-.04-1.83.57-2.76,1.16-1.77,3.18-3.31,4.56-4.91s2.37-3.37,3.56-5.01c2.15-2.95,4.41-5.83,6.85-8.5.94-1.04,2.33-2.67,3.72-3.05.14-.04,1.94-.25,2.05-.24.14.02.78.27.87.34Z"/>
+</svg>
@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.29 109.29">
-  <path d="M26.84,102.1c-8.31-4.79-14.87-11.36-19.66-19.72C2.4,74.02,0,64.76,0,54.58s2.4-19.42,7.19-27.74c4.79-8.31,11.34-14.86,19.66-19.66C35.16,2.4,44.44,0,54.71,0s19.42,2.4,27.73,7.19c8.31,4.79,14.86,11.34,19.66,19.66,4.79,8.31,7.19,17.56,7.19,27.74v42.75h-12.72v-7.89c-2.97,2.46-6.3,4.37-9.99,5.72-3.69,1.36-7.53,2.04-11.51,2.04-7.21,0-13.78-2.16-19.72-6.49l.64,18.45c-.34.08-.76.13-1.27.13-10.26,0-19.55-2.4-27.86-7.19ZM24.75,71.56c2.84,5.13,6.74,9.25,11.71,12.34,4.96,3.1,10.5,4.77,16.6,5.02-3.56-3.22-6.36-7.02-8.4-11.39-2.04-4.37-3.05-9.05-3.05-14.06,0-6.02,1.5-11.58,4.52-16.67,3.01-5.09,7.08-9.14,12.21-12.15,5.13-3.01,10.71-4.52,16.73-4.52.85,0,2.2.08,4.07.25-3.05-3.14-6.7-5.58-10.94-7.32-4.24-1.74-8.74-2.61-13.49-2.61-6.36,0-12.15,1.49-17.37,4.45-5.22,2.97-9.33,7.06-12.34,12.28-3.01,5.22-4.52,11.01-4.52,17.37s1.42,11.85,4.26,16.99ZM84.29,72.71c2.59-2.5,3.88-5.49,3.88-8.97s-1.29-6.59-3.88-9.1c-2.59-2.5-5.66-3.75-9.22-3.75s-6.57,1.25-9.03,3.75c-2.46,2.5-3.69,5.53-3.69,9.1s1.23,6.57,3.69,9.03c2.46,2.46,5.47,3.69,9.03,3.69s6.64-1.25,9.22-3.75Z"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.96 38.9">
+  <path d="M7.99,22.5c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26,1.41-.94,2.31-.94,1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96ZM17.17,22.5c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31c-.64.64-1.41.96-2.31.96s-1.67-.32-2.31-.96ZM26.34,22.5c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96Z"/>
+  <path d="M36.39,9.59c-1.71-2.97-4.05-5.31-7.02-7.02-2.97-1.71-6.25-2.57-9.86-2.57s-6.94.86-9.91,2.57c-2.97,1.71-5.31,4.05-7.02,7C.86,12.52,0,15.81,0,19.45s.86,6.93,2.57,9.88c.04.07.08.13.12.19l-.86,5.81.03.03,5.31-.7c.76.6,1.56,1.16,2.43,1.66,2.97,1.71,6.27,2.57,9.91,2.57s6.89-.86,9.86-2.57c2.97-1.71,5.31-4.05,7.02-7.02,1.71-2.97,2.57-6.25,2.57-9.86s-.86-6.89-2.57-9.86ZM19.48,33.98c-3.73,0-7.12-1.42-9.69-3.72l-3.44.6-.03-.03.74-3.85c-1.34-2.2-2.12-4.77-2.12-7.53,0-8.03,6.51-14.53,14.53-14.53s14.53,6.51,14.53,14.53-6.51,14.53-14.53,14.53Z"/>
 </svg>
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.01 34.53">
+  <path d="M10.91,27.58c-1.85-1.07-3.31-2.52-4.37-4.36-1.07-1.84-1.6-3.89-1.6-6.16s.53-4.32,1.6-6.15c1.07-1.84,2.52-3.29,4.37-4.36,1.85-1.07,3.91-1.6,6.17-1.6s4.29.53,6.14,1.6c1.85,1.07,3.3,2.52,4.37,4.37,1.07,1.85,1.6,3.89,1.6,6.14s-.53,4.29-1.6,6.14c-1.07,1.85-2.52,3.31-4.37,4.37-1.85,1.07-3.89,1.6-6.14,1.6s-4.32-.53-6.17-1.6ZM20.51,22.94c1.03-.59,1.85-1.41,2.44-2.44s.89-2.18.89-3.43-.3-2.4-.89-3.43-1.41-1.85-2.44-2.44c-1.04-.59-2.18-.89-3.43-.89s-2.43.3-3.46.89c-1.03.59-1.85,1.41-2.44,2.44-.59,1.03-.89,2.18-.89,3.43s.3,2.4.89,3.43c.59,1.03,1.41,1.85,2.44,2.44,1.03.59,2.19.89,3.46.89s2.4-.3,3.43-.89Z"/>
+  <path d="M15.29.08l3.31-.08-.15,3.71h-2.86s-.31-3.63-.31-3.63Z"/>
+  <path d="M19.13,34.43l-3.97.1.18-4.45h3.42s.37,4.35.37,4.35Z"/>
+  <path d="M30.95,28.29l-2.37,2.49-2.61-2.83,2.08-2.1,2.9,2.44Z"/>
+  <path d="M33.93,15.34l.08,3.31-3.71-.15v-2.86s3.63-.31,3.63-.31Z"/>
+  <path d="M28.48,3.38l2.47,2.35-2.81,2.59-2.08-2.07,2.42-2.87Z"/>
+  <path d="M5.79,30.92l-2.49-2.37,2.83-2.62,2.1,2.09-2.45,2.9Z"/>
+  <path d="M.08,18.76l-.08-3.35,3.76.15v2.89s-3.68.31-3.68.31Z"/>
+  <path d="M3.46,5.82l2.29-2.41,2.53,2.74-2.02,2.03-2.8-2.37Z"/>
+</svg>
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.5 103.19">
-  <path d="M78.75,24.59c-1.86-.06-3.42-.72-4.65-1.99-1.3-1.33-1.95-2.97-1.95-4.9V0H10.95v24.59H0v78.6h118.5V24.59h-39.75ZM102.5,87.19H16v-46.29h11.55v-24.9h27.8v1.05c0,4.4,1.03,8.38,3.1,11.95,2.07,3.57,4.92,6.38,8.55,8.45,3.55,2.02,7.47,3.04,11.75,3.09v.05h23.75v46.6Z"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.67">
+  <path d="M36,15.81c-.66,0-1.21-.22-1.63-.66-.43-.44-.64-.98-.64-1.62v-3.66L3.28,0v10.09H0v28.58h40.19V15.81h-4.18ZM32.3,33.39H5.28V15.37h2.33l-.03-.13h1.17v-7.59l19.43,5.85v.03c0,1.45.34,2.77,1.02,3.94.68,1.18,1.62,2.11,2.82,2.79.89.51,1.85.82,2.88.95v12.17h-2.61Z"/>
 </svg>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.9">
+  <path d="M33.56,0H0v38.9h40.19V0h-6.62ZM6.2,33.62h-.92V5.28h2.61s24.41,0,24.41,0h0s2.61,0,2.61,0v19.57l-5.89-14.74-6.79,17.11-4.83-10.08h-.07l-7.87,16.48h-3.26ZM19.42,33.62h-4.08l2.03-4.6,2.05,4.6ZM25.3,33.62l-.02-.04,3.78-9.64,3.74,9.69h-7.5Z"/>
+  <path d="M11.89,14.3c.9,0,1.67-.31,2.31-.94s.96-1.38.96-2.26-.32-1.67-.96-2.31c-.64-.64-1.41-.96-2.31-.96s-1.67.32-2.31.96-.96,1.41-.96,2.31.32,1.63.96,2.26c.64.63,1.41.94,2.31.94Z"/>
+</svg>
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.9">
+  <path d="M15.72,28.19c-1.34-.78-2.4-1.84-3.18-3.18-.78-1.34-1.17-2.81-1.17-4.39s.39-3.04,1.17-4.37c.78-1.33,1.84-2.39,3.18-3.17,1.34-.78,2.8-1.17,4.39-1.17s3.04.39,4.37,1.17c1.33.78,2.39,1.84,3.17,3.17.78,1.33,1.17,2.79,1.17,4.37s-.39,3.05-1.17,4.39-1.84,2.4-3.17,3.18c-1.33.78-2.79,1.17-4.37,1.17s-3.05-.39-4.39-1.17ZM22.54,23.05c.67-.68,1.01-1.5,1.01-2.44s-.34-1.75-1.01-2.43c-.67-.67-1.48-1.01-2.43-1.01s-1.76.34-2.44,1.01c-.68.67-1.02,1.48-1.02,2.43s.34,1.76,1.02,2.44c.68.68,1.5,1.02,2.44,1.02s1.75-.34,2.43-1.02Z"/>
+  <path d="M33.56,0H0v38.9h40.19V0h-6.62ZM32.3,33.62H5.28V5.28h2.61s24.41,0,24.41,0h0s2.61,0,2.61,0v28.34h-2.61Z"/>
+  <path d="M27.2,12.71c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26,1.41-.94,2.31-.94,1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96Z"/>
+</svg>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.31 24.54">
+  <path d="M29.31,8.82c0-1.65-.39-3.14-1.16-4.49-.77-1.35-1.83-2.41-3.16-3.18-1.33-.77-2.82-1.16-4.47-1.16s-3.18.39-4.54,1.16c-.48.27-.92.6-1.33.95-.41-.35-.84-.67-1.33-.95-1.36-.77-2.87-1.16-4.54-1.16s-3.13.39-4.47,1.16c-1.33.77-2.39,1.83-3.16,3.18-.77,1.35-1.16,2.84-1.16,4.49s.39,3.15,1.16,4.51c.41.72.91,1.36,1.48,1.92l11.56,9.29h.17l12.62-9.63c.22-.24.43-.49.62-.76l.08-.1h-.01c.16-.24.33-.47.47-.72.77-1.36,1.16-2.86,1.16-4.51ZM22.36,10.66l-.28.33-7.18,6.34c-.35.31-.87.29-1.2-.03l-6.75-6.64h0c-.49-.48-.74-1.09-.74-1.83s.24-1.36.73-1.85,1.1-.73,1.85-.73,1.38.24,1.89.73c.11.11.21.26.3.44.46.92,1.36,1.53,2.39,1.53h2.59c1.03,0,1.93-.61,2.39-1.53.09-.18.19-.33.3-.44.51-.49,1.14-.73,1.89-.73s1.36.24,1.85.73.73,1.1.73,1.85-.25,1.35-.74,1.84h0Z"/>
+</svg>
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.15 105.63">
-  <path d="M35.16,0h23.64L23.64,105.63H0L35.16,0Z"/>
-  <path d="M74.51,0h23.64l-35.16,105.63h-23.64L74.51,0Z"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.83 37.87">
+  <path d="M16.91,30.56l1.95,3.36,5.02-2.9,3.97,6.85,9.94-5.75-3.97-6.85,5.02-2.9-1.95-3.36L12.5,0l4.41,30.56ZM33.34,21.05l-4.98,2.88.66,1.14h0s3.27,5.65,3.27,5.65l-2.95,1.68-1.98-3.41h.02s-1.95-3.37-1.95-3.37l-4.97,2.88-2.84-19.71,15.72,12.26Z"/>
+  <path d="M3.53,12.35H0v-3.53h3.53v-3.47h3.53v3.47h3.45v3.53h-3.45v3.5h-3.53v-3.5Z"/>
 </svg>
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 143.42 54">
+  <path d="M74.88,9.2c1.86-1.55,3.62-3.18,5.44-4.78,2.1-1.85,5.55-3.7,8.4-4.08,2.87-.39,4.68-.03,6.15,2.54.3.52.3.74.7,1.24.02.03-.2.5-.07.7.05.08.59.11.61.48,0,.2-.21.51-.21.84,0,1.02.43,1.57.19,2.91-.41,2.29-1.7,3.42-2.44,5.32-.28.71-.43,1.9-.76,2.6-.16.34-.61.26-.66.6-.03.22.12.6.11.94-.03,1.05-.41,2.41-.43,3.36,0,.4.2.6.21.83.01.34-.28.77-.35,1.1-.32,1.53-.13,2.97-.06,4.47.05,1.13-.55,2.92-.89,3.97s.75,1.56,1.18,2.34c.47.85.62,3.24.36,4.18-.09.31-.3.5-.39.77-.13.4.03,1.05-.48,1.2-1.05.32-1.02-1.23-.94-1.89.07-.62.43-1.72.27-2.36-.18-.71-.95-1.62-1.18-2.39-.46-1.51.24-2.27.29-3.53.02-.49-.18-.83-.22-1.26-.13-1.66.33-4.02.42-5.76,0-.15.06-.49-.07-.59-.21-.17-1.33-.44-1.49-.18-.26,1.08.05,2.19-.17,3.24-.04.19-.25.9-.32,1.04-.17.31-.6.32-.67.69-.1.5.17.71.22,1.14.11.98-.09,3.24-1.48,1.9-.72-.7-.49-1.87-.32-2.74.03-.14-.07-.31-.06-.41.03-.18.67-1.01.75-1.3.08-.32.26-1.58-.22-1.66-.11-.02-.26.08-.4.07-.26-.02-.5-.21-.76,0-.2.17-.09.45-.2.64-.04.07-.42.31-.57.48-.37.42-.35.74-.58,1.1-.18.27-.49.31-.66.7-.23.51-.25.56-.64,1-.49.55-.34.59-.62,1.08-.14.25-.66.54-.83.85-1.04,1.84-1.99,3.82-3.01,5.69-1.3,2.38-2.18,5.61-5.52,4.6-2.42-.73-3.23-1.68-5.12-3.06-1.28-.94-2.73-1.64-3.98-2.63-5.4-4.29-9.46-10.26-12.45-16.39-1.98-4.06-3.49-8.65-1.68-13.04.79-1.91,3.68-4.97,5.73-5.49,7.32-1.83,9.83,6.15,13.34,10.68.62.8.98,1.09,2.02,1.12,1.38.05,3.07-1.78,4.09-2.63.14-.12.32-.14.44-.24ZM84.07,16.82c.69-.88,1.57-1.67,2.25-2.62.89-1.24,2.22-3.61,2.58-5.06.02-.06.07-1.22.06-1.3-.13-1.13-1.14-1.5-2.15-1.42-2.42.18-4.56,3.52-5.98,5.24-.68.82-1.43,1.28-2,2.19-.78,1.24-3.67,3.59-4.94,4.4-2.09,1.34-6.11,2.05-8.29.67-2.72-1.72-4.83-5.85-6.8-8.4-.73-.95-1.41-1.23-2.6-1.36-.72.55-.8,1.46-.68,2.32.29,1.99,2.55,5.23,3.71,6.99,3.09,4.71,6.46,6.71,10.39,10.43.48.46.99,1.23,1.5,1.7.6.55,1.31,1.02,1.97,1.5l.66-.27c3.4-4.83,6.54-10.02,10.17-14.65.08-.1.08-.24.14-.33Z"/>
+  <path d="M115.04,2.88c2.3,1.62,3.06,5.4,4.05,7.85.09.21.62,1.4.7,1.48.13.13.51.16.72.25.25.11.06.35.79.21,1.25-.24,1.65-.81,2.6-1.49,1.63-1.16,3.21-2.4,4.81-3.58,1.15-.85,1.32-1.17,2.71-1.7,1.16-.44,1.93-1.05,3.26-1.25,1.86-.29,4.1-.51,5.81.32.21.1.62.46.78.48s.41-.31.66-.19v.3s.42.01.42.01c-.63.73.15,1.18.46,1.89,1.72,3.92-.52,8.67-2.33,12.12-2.67,5.09-6.51,9.68-9.71,14.51-1.13,1.7-2.88,4.84-4.49,5.99-.3.21-.78.38-1.01.56-.18.15-.23.4-.5.55s-.88.17-.99.29c-.33.36-.44,1.99-.41,2.5.02.37.19.79.2,1.16.03.7-.67,1.71-1.46,1.35-.43-.19-.46-1.04-.4-1.44.14-.95.35-.71.21-1.84-.06-.47.02-1.9-.02-2.05-.03-.11-.25-.09-.3-.24-.09-.25,0-.53-.18-.87-.28-.5-2.36-2.08-2.93-2.63-1.99-1.9-3.69-3.45-5.76-5.25-1.64-1.43-2.95-3.02-4.41-4.61-2.22-2.42-4.88-5.04-6.34-8.03-1.84-3.78-3.09-11.02-.73-14.75.36-.56.81-.67,1.24-1.17.73-.87.48-1.1,1.76-1.59,3.95-1.5,7.2-1.68,10.79.85ZM114.73,17.45c-1.03-.99-2.06-1.99-2.78-3.25-.44-.77-.73-2.09-1.15-2.94-.57-1.16-1.42-2.26-2.58-2.87s-1.36,1.22-1.42,2.05c-.08,1.07.03,1.01.37,1.83.24.58.28,1.42.54,2.08,1.45,3.82,5.38,7.13,7.8,10.34.68.9,1.2,1.78,2.09,2.41.58.41,1.27.91,2,.68l.04.42c.26.18.55.02.86.2.17.1.77.91,1.04,1.16.42.39.98.77,1.44,1.16.67.56,1.7,1.99,2.71,1.1.7-.62,1.69-2,2.24-2.79,2.05-2.94,4.03-6.32,5.74-9.46,1-1.85,2.89-4.91,2.76-7.04-.04-.59-.15-1.41-.78-1.58-1.98-.52-5.05,1.94-6.57,3.13s-3.22,2.49-4.83,3.77c-1.2.95-2.09,1.66-3.68,2.03s-3.67-.46-4.94-1.5c-.36-.29-.59-.67-.88-.95Z"/>
+  <path d="M16.67,6.03c.44.42.93.82,1.37,1.25.7.68,3.25,3.86,4.15,3.72.33-.05,1.62-.85,1.96-1.09,1.2-.84,2.36-2.07,3.52-2.98,2.43-1.9,5.81-3.88,8.65-5.09.47-.2,1.95-.79,2.38-.87,1.34-.23,3.7-.08,4.69.93.64.65,1.85,2.5,1.95,3.4s.16,2.05.21,2.93c.08,1.29-.08,2.35-.45,3.55-.08.27-1.1,1.6-1.34,1.91-2.48,3.14-4.85,4.95-8,7.31-4.17,3.11-7.07,6.27-9.69,10.76-.6,1.02-.87,2.47-2.16,2.87-.49.15-1.58.11-1.85.24-.21.1-.22.41-.35.55s-.35.19-.49.4c-.48.72-.08,2.57-.1,3.46-.01.54-.31,1.33-.31,1.78,0,.8.8,2.14-.15,2.68-.9.51-1.4-.35-1.51-1.13-.04-.34.12-.59.08-.9-.03-.27-.28-.51-.28-.83,0-.67.45-1.89.49-2.75.05-1.04-.22-1.99-.1-3.02-.04-.19-.98-.27-1.11-.08-.05.07-.23,1.41-.25,1.63-.14,1.48-.08,3.13-.24,4.59-.2,1.81-1.57,2.59-1.07,4.59.2.79.84,1.71.97,2.49.18,1.06-.22,2.01-.38,3.03-.14.92.18,2.28-.95,2.62-.85.26-.91-.73-1.13-1.28.19-1.26.97-3.23.69-4.47-.07-.31-1-1.49-1.21-2.04-.46-1.2.15-1.96.71-2.99.93-1.7,1.14-6.06.54-7.91-.38-1.19.2-1.22.05-2.15-.07-.43-.47-1.06-.49-1.29-.02-.26.31-.93.2-1.09-.03-.04-.27-.05-.38-.14-.24-.21-.22-.67-.35-.94-.07-.14-1.99-1.91-2.29-2.17-3.2-2.81-7.05-5.25-9.92-8.5C.02,15.92-.83,11.29.9,7.63,2.34,4.57,3.82,1.18,7.75.85c3.56-.3,6.53,2.91,8.92,5.18ZM38.6,8.96c-.65-.7-2.53-.05-3.35.21-3.55,1.12-6.91,4.65-9.73,7.05-1.11.94-2.68,2.39-4.15,2.56-3.18.37-5.98-2.82-8.06-4.81-.74-.7-1.48-1.28-2.19-2.01-.32-.32-1.38-1.67-1.71-1.76-.61-.16-1.23.89-1.45,1.35-.07.16-.05.4-.13.6-.19.47-.47.38-.33,1.23.24,1.44,1.32,2.33,2.3,3.25.69.66.9.94,1.79,1.46,1.35.79,2.98,2.16,4.19,3.26.82.75,1.53,1.85,2.62,2.3.21.09.46.02.62.11.21.12,1.64,1.57,1.99,1.89.11.1.08.28.13.33.05.05,1.12.48,1.23.5,1.03.23.81-.26,1.28-.83.96-1.16,1.98-2.33,2.98-3.41,2.48-2.67,5.19-5.11,8.02-7.4,1.18-.95,1.94-1.45,2.96-2.7.26-.32.44-.48.64-.72.04-.05.4-.65.43-.73.19-.47.28-1.36-.09-1.75Z"/>
+</svg>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.9">
+  <path d="M33.56,0H0v38.9h40.19V0h-6.62ZM34.91,33.62H5.28V8.09l15.05,19.04,14.58-18.56v25.05ZM11.12,5.28h18.39l-9.25,12.02L11.12,5.28Z"/>
+</svg>
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.03 53.1">
-  <polygon points="24.73 0 24.73 17.46 0 17.46 0 35.64 24.73 35.64 24.73 53.1 80.03 26.6 80.03 26.4 24.73 0"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.25 17.52">
+  <polygon points="12.97 .23 12.97 6.19 0 0 0 5.94 6.37 8.75 0 11.58 0 17.52 12.97 11.31 12.97 17.29 18.25 17.29 18.25 8.78 18.25 8.71 18.25 .23 12.97 .23"/>
 </svg>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.8 30.75">
+  <path d="M4.06,8.45l-2.47,1.39-1.58-2.84,2.41-1.39-2.41-1.39L1.58,1.39l2.47,1.35V0h3.23v2.74l2.51-1.35,1.55,2.84-2.38,1.39,2.38,1.39-1.55,2.84-2.51-1.39v2.8h-3.23v-2.8Z"/>
+  <path d="M31.8,18.58c0-2.12-.52-4.11-1.57-5.97-1.03-1.8-2.48-3.26-4.36-4.39-.06-.03-.1-.07-.16-.11-1.64-.96-3.35-1.5-5.11-1.67,0,1.22-.12,2.45-.42,3.71-.13.54-.28,1.07-.45,1.6-.49,1.51-1.16,3.01-2.03,4.49-1.18,2.01-2.55,3.73-4.1,5.15-.04.04-.09.07-.13.11-1.41,1.26-2.93,2.21-4.58,2.86.11.21.22.42.34.62.88,1.38,2.03,2.54,3.43,3.5.26.18.52.37.8.53,1.96,1.14,4,1.72,6.13,1.74,2.13.01,4.13-.5,5.97-1.55,1.85-1.05,3.35-2.55,4.49-4.5s1.72-4,1.73-6.12ZM22.95,24.51c-1.04.59-2.15.88-3.34.87-.68,0-1.34-.13-1.98-.34,2-1.74,3.67-3.72,4.97-5.94.9-1.55,1.62-3.2,2.15-4.95.3.34.57.69.79,1.08.59,1.03.88,2.15.87,3.34-.01,1.19-.33,2.33-.97,3.41s-1.47,1.92-2.5,2.51Z"/>
+</svg>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.67 16.63">
+  <path d="M5.28,0v16.63H0V0h5.28Z"/>
+  <path d="M13.67,0v16.63h-5.28V0h5.28Z"/>
+</svg>
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.92 39.51">
+  <path d="M16.09,24.94c-.54-.92-1.27-1.64-2.21-2.17-.94-.53-1.98-.79-3.14-.79s-2.15.26-3.08.79c-.93.53-1.66,1.26-2.2,2.19-.54.93-.81,1.95-.81,3.05v11.5h12.24v-11.5c0-1.13-.27-2.15-.81-3.07ZM8.83,35.39v-7.3c0-.51.19-.97.57-1.35.38-.39.83-.58,1.34-.58.55,0,1.01.19,1.4.57.39.38.58.84.58,1.37v7.3h-3.9Z"/>
+  <path d="M31.13,35.3l-2.72-17.3h-6.16l-2.72,17.3h-.04v4.12h11.67v-4.12h-.04ZM25.33,22.42l1.56,12.88h-3.12l1.56-12.88Z"/>
+  <g>
+    <polygon points="38.56 29.52 38.56 22.21 38.36 22.21 34.76 22.21 32.47 22.21 32.47 26.16 34.76 26.16 34.76 29.52 32.54 29.52 32.54 33.47 40.92 33.47 40.92 29.52 38.56 29.52"/>
+    <path d="M36.73,20.99c.63,0,1.17-.22,1.59-.65.43-.44.64-.97.64-1.61s-.22-1.12-.65-1.56-.96-.65-1.58-.65-1.13.22-1.57.67-.67.96-.67,1.55c0,.63.22,1.17.67,1.61.44.44.97.65,1.57.65Z"/>
+  </g>
+  <path d="M17.29,11.84s-.01,0-.02-.01c.08-.24.13-.5.13-.77,0-.22-.04-.43-.09-.63.05-.21.09-.42.09-.64,0-.43-.11-.82-.32-1.17.2-.36.32-.75.32-1.19,0-.66-.24-1.23-.72-1.7-.34-.33-.73-.54-1.17-.64-.08-.49-.3-.93-.68-1.31-.48-.47-1.06-.71-1.74-.71-.32,0-.62.06-.89.16-.47-.43-1.02-.65-1.67-.65-.61,0-1.13.2-1.58.58-.41-.3-.89-.46-1.43-.46-.68,0-1.26.24-1.74.71-.22.21-.38.45-.49.7-.2-.05-.4-.08-.62-.08-.68,0-1.26.24-1.74.71-.48.47-.72,1.04-.72,1.7-.26.12-.5.28-.72.49-.48.47-.72,1.04-.72,1.7,0,.33.06.63.17.91-.07.06-.15.11-.22.18C.24,10.18,0,10.75,0,11.41s.24,1.26.72,1.74c.02.02.04.03.06.05-.21.35-.32.75-.32,1.18,0,.68.24,1.26.72,1.74.41.41.89.63,1.43.69.12.33.3.63.57.9.39.39.86.62,1.38.69.57.9,1.31,1.63,2.24,2.16,1.01.59,2.11.88,3.3.88s2.29-.29,3.29-.88c1-.59,1.8-1.39,2.38-2.4.44-.75.71-1.56.82-2.41.24-.12.47-.27.68-.48.48-.48.72-1.06.72-1.74s-.24-1.23-.72-1.7ZM10.09,19c-1.97,0-3.56-1.6-3.56-3.56s1.6-3.56,3.56-3.56,3.56,1.6,3.56,3.56-1.6,3.56-3.56,3.56Z"/>
+  <path d="M31.69,12.54l4.65-3.36v-.02s-4.89-1.01-4.89-1.01l2.43-4.54v-.02s-5.27,1.35-5.27,1.35L29.74.01h-.02s-5.93,4.41-5.93,4.41l-1.13-2.82h-.02s-2.56,5.33-2.56,5.33c-.16.21-.31.43-.45.66-.59,1-.88,2.1-.88,3.29s.29,2.29.88,3.3c.59,1.01,1.39,1.81,2.4,2.4,1.01.59,2.11.88,3.3.88s2.29-.29,3.29-.88c.37-.22.71-.48,1.03-.76l5.11-.61v-.02s-3.08-2.65-3.08-2.65c0,0,0,0,0,0ZM31.89,10.12l-.04.03s0-.02,0-.03h.04ZM25.33,15.46c-1.97,0-3.56-1.6-3.56-3.56,0-1.73,1.24-3.18,2.88-3.49.22-.06.45-.1.69-.1s.48.04.7.1c.01,0,.02,0,.03,0,.09.03.18.05.27.08,1.47.44,2.55,1.79,2.55,3.4,0,1.97-1.6,3.56-3.56,3.56Z"/>
+</svg>
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.5 73.4">
-  <path d="M18.1,68.55c-5.6-3.23-10.02-7.63-13.25-13.2C1.62,49.78,0,43.57,0,36.7s1.62-13.08,4.85-18.65c3.23-5.57,7.65-9.97,13.25-13.2C23.7,1.62,29.93,0,36.8,0s13,1.62,18.6,4.85c5.6,3.23,10.02,7.65,13.25,13.25,3.23,5.6,4.85,11.8,4.85,18.6s-1.62,13-4.85,18.6c-3.23,5.6-7.65,10.02-13.25,13.25-5.6,3.23-11.8,4.85-18.6,4.85s-13.1-1.62-18.7-4.85ZM47.2,54.5c3.13-1.8,5.6-4.27,7.4-7.4,1.8-3.13,2.7-6.6,2.7-10.4s-.9-7.27-2.7-10.4c-1.8-3.13-4.27-5.6-7.4-7.4-3.13-1.8-6.6-2.7-10.4-2.7s-7.37.9-10.5,2.7c-3.13,1.8-5.6,4.27-7.4,7.4-1.8,3.13-2.7,6.6-2.7,10.4s.9,7.27,2.7,10.4c1.8,3.13,4.27,5.6,7.4,7.4,3.13,1.8,6.63,2.7,10.5,2.7s7.27-.9,10.4-2.7Z"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.25 17.52">
+  <path d="M0,17.52v-5.94l6.37-2.84L0,5.94V0l18.25,8.71v.07L0,17.52Z"/>
 </svg>
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.03 53.1">
-  <polygon points="55.3 53.1 55.3 35.64 80.03 35.64 80.03 17.46 55.3 17.46 55.3 0 0 26.5 0 26.7 55.3 53.1"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.25 17.52">
+  <polygon points="18.25 0 5.28 6.21 5.28 .23 0 .23 0 8.75 0 8.81 0 17.29 5.28 17.29 5.28 11.33 18.25 17.52 18.25 11.58 11.88 8.78 18.25 5.94 18.25 0"/>
 </svg>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.9">
+  <path d="M8.61,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26,1.41-.94,2.31-.94,1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96ZM17.78,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31c-.64.64-1.41.96-2.31.96s-1.67-.32-2.31-.96ZM26.96,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96Z"/>
+  <path d="M34.91,7.2l-1.92-1.92L27.71,0H0v38.9h40.19V12.48l-5.28-5.28ZM32.3,33.62H5.28V5.28h2.61s17.64,0,17.64,0v9.84h9.38v18.5h-2.61Z"/>
+</svg>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.03 86.17">
+  <path d="M5.75,15.92c-.06.54-.58,2.36-.86,2.81-.53.84-1.61,1.02-2.52.78-.67-.18-1.78-.54-2.01-1.25-.04-.14-.36-1.52-.36-1.6-.03-1.59.1-3.73.19-5.35.04-.7.28-1.65.32-2.4.07-1.53-.25-3.88.44-5.23.29-.56,1.04-.66,1.61-.71,2.19-.18,4.27.21,6.39.21,1.79,0,3.01-.43,4.88-.06.57.11.89.3,1.19.8.28.47.39,1.38.38,1.93,0,.28-1.09,2.34-1.32,2.57-.51.51-1.8.78-2.46,1-.14.05-.25,0-.21.21.7.6,1.49,1.13,2.16,1.77.61.58,1.89,2.34,2.66,2.54.72.19.77-.29,1.23-.56,2.06-1.26,5.01-2.09,7.42-2.22,3.93-.21,8.05,1.01,10.91,3.67.28.26.56.84.94.85.13,0,1.61-1.57,1.78-1.79.55-.69.58-.73.1-1.46-.77-1.16-1.99-1.86-2.93-2.83-.15-.15-.94-1.12-.97-1.23-.13-.42,0-1.47.13-1.92.63-2.23,2.31-1.72,3.9-.85s2.8,2.33,4.29,3.38c.07.01.54-.47.6-.56.2-.27.26-.53.39-.73.14-.21.63-.31.31-.54-.76-.37-1.53-.76-2.25-1.21-.48-.3-1.09-.68-1.52-1-.64-.47-1.13-2.27-.94-3.02.02-.08.21-.06.21-.14,0-.1-.09-.23-.08-.31.02-.1.21-.11.26-.18.07-.11.02-.29.13-.45.58-.84,1.14-.9,2.12-.75,1.34.19,2.74.71,4.12.86.53.06.65-.13.95-.15.72-.06,3.42,1.02,4.08,1.47.24.16.43.38.65.56.02.31.23.51.32.78.47,1.35.55,2.88.91,4.22.47,1.73,1.77,3.74,1.72,5.5,0,.11-.37.9-.44.96-.24.21-1.36.55-1.7.55-.25,0-1.27-.18-1.52-.26-1.25-.4-1.98-2.38-2.53-3.45l-.24-.17-1.19,1.84c0,.05.57.47.66.56.3.3.65.77.97,1.06.69.63,2.08,1.39,2.53,2.16.53.92.26,2.42-.56,3.08-1.68,1.36-3.24-.59-4.85-1.03l-2.6-1.67c-.2.24-.55.39-.74.6-.11.12-.11.3-.19.39-.79.91-1.6,1.79-2.35,2.74-.15.52.26,1.47.37,1.99.66,3.06,1.03,5.06.54,8.25-.39,2.55-1.36,7.7-3.04,9.62-.58.67-1.47,1.23-2.08,1.84-.21.21-.4.65-.65.81s-1.28.63-1.68.84c-1.47.75-3.05,1.31-4.5,2.11l-.1.21c-.03,1.32-.18,2.73.21,3.99,2,.13,4.02-.58,6.01-.03,1.28.36,1.63,1.59,1.8,2.79.06.48-.12,1.25-.27,1.72-.07.22-.27.2-.36.32-.06.07-.05.23-.14.32-1.02,1.01-4.55,1.58-6.03,1.74-.35.04-.76-.1-1.05.1-.07.09.04.85.02,1.02-.15,1.61-.27,3.19-.29,4.81,0,.25.14.48.11.72-.01.14-.52.94-.63,1.06-.15.17-.55.31-.6.39-.23.34,0,1.79-.07,2.31-.14,1.03-.56,2.89-.25,3.87.08.25.28.4.35.6.4,1.22-1.55,2.38-2,.43-.07-.32-.09-1.48-.05-1.83.03-.27.24-.59.28-.97.07-.9-.14-1.85-.06-2.8.02-.25.39-1.11-.07-1.22-.48-.11-.77,1.63-.78,1.96-.03,1.35.14,2.66-.38,4.02-.13.35-1.16,1.35-.97,1.67.02.04.21.04.31.26.3.7,0,1.33-.25,1.98-.23.59-.66,1.44-.7,2.14-.03.58.35,1.27.31,1.97-.07,1.34-1.28,3.15-1.23,4.12,0,.2.21.31.26.53.09.35.05,1.33-.23,1.6-.75.73-1.37-.17-1.57-.85-.26-.87.15-2.95.41-3.88.34-1.2.79-1.23.69-2.77-.02-.3-.23-.65-.19-.92.07-.51.47-1.64.64-2.2.11-.37.48-.92.49-1.3.01-.32-.25-.53-.3-.83-.11-.69.33-1.86.65-2.48.14-.28.64-.83.68-.99.03-.12.3-1.93.31-2.1.02-.53-.29-1.3-.3-1.86,0-.43.22-.61.23-1.05.02-.59-.15-1.3-.16-1.89-.02-1.51.14-3.08-.07-4.6-.09-.67-.35-.99-1.01-1.08-1.41-.21-2.57.75-4.01-.19-.31-.2-1.01-1.15-1.13-1.49-.05-.13-.32-1.51-.32-1.62,0-.21,0-.62.02-.75,0-.04.23-.6.27-.63.09-.1.31-.1.42-.21.1-.1.08-.26.18-.37.37-.38,2.05-.7,2.6-.73s.82-.04,1.37-.1c.39-.04.83.1,1.15-.11.22-.22.03-1.64-.07-1.93-.07-.19-.3-.13-.3-.22.6-.05.33-1.75.11-1.89-1.24-.17-2.47-.53-3.64-.97-2.51-.95-5.16-2.36-6.96-4.37-.27-.3-1.63-1.92-1.73-2.16-.06-.13.05-.28,0-.42-.23-.68-.73-1.33-.97-2.18-1.24-4.34-1.23-7.83.23-12.08.6-1.74,1.27-3.45,1.92-5.17-.04-.16-.13-.28-.24-.39-1.44-1.6-3.64-3.17-5.26-4.64-.22-.2-.33-.67-.77-.59-.05.65.07,1.4,0,2.04ZM25.99,17.33c-.48.24-.9,0-1.31,0s-1.39.16-1.78.11c-.26-.03-.39-.22-.6-.2-1.03.1-3.85,1.94-4.7,2.66-4.51,3.82-5.6,8.34-3.81,13.98.55,1.71,3.33,5.35,5.14,5.77,2.96.68,6,1.36,9.06.71,1.42-.3,4.62-2.6,5.61-3.73,1.06-1.2,2.7-4.22,2.78-5.81.21-4.46-.97-9.18-4.85-11.72-.3-.2-1.57-.91-1.85-.97-.89-.18-1.93-.17-2.89-.51-.06-.02-.05-.17-.13-.18-.24-.03-.51.15-.77.11l.11-.21Z"/>
+</svg>
@@ -4,12 +4,14 @@
  --back-color: black;
  --main-color: white;
  --accent-color: #3CFF00;
+  --neon-color: #3CFF00;
 }

 :root[data-theme="light"]{
  --back-color: white;
  --main-color: black;
-  --accent-color: #C303FF;
+  --accent-color: #FFA64D;
+  --neon-color: black;
 }

 /*=============Typo*/
@@ -38,11 +40,11 @@
 /*===================Animation*/
@keyframes blink {
  0%   { color: var(--accent-color);}
-  15%  { color: var(--back-color);}
-  35%  { color: var(--back-color);}
+  15%  { color: var(--main-color);}
+  35%  { color: var(--main-color);}
  50%  { color: var(--accent-color);}
-  65%  { color: var(--back-color);}
-  85%  { color: var(--back-color);}
+  65%  { color: var(--main-color);}
+  85%  { color: var(--main-color);}
  100%  { color: var(--accent-color);}
 }

@@ -116,7 +118,7 @@ html, body{
  scrollbar-width: thin;
 }

-canvas {
+#canvas {
    display: block;
    max-width: 100%;
    position: fixed;
@@ -124,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");
 }


@@ -225,7 +247,7 @@ canvas {
 }
 /*==================Reaction Bar for indi pannels*/
 .reactBar{
-  margin-left: -16.1%;
+  margin-left: 3.33%;
  width: 77%;
  display: flex;
  flex-direction: row;
@@ -279,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;
@@ -304,7 +331,7 @@ canvas {

 .windowTitleLower{
  font-family: 'velvelyne';
-  font-weight: lighter;
+  font-weight: bold;
  font-size: 13.12px;
 }

@@ -23,7 +23,7 @@
    background-color: transparent;
    width:100%;
    position: relative;
-    height:100%;
+    height:117%;
    display: flex;
    flex-direction: column;
    align-items: center;
@@ -1,4 +1,63 @@
-export async function loadAudioData() {
-  const aData = await fetch('/DATA/audioData.json');
-  return await aData.json();
+function inlineContent(str){
+  let data = str.split("<br>");
+  let content = "";
+  for (let line of data){
+    content += line + '\n';
+  }
+  return content
+}
+
+function creditsContent(str){
+  let data = str.split("<br>")
+  let credits = data[0].split(" - ");
+  return {
+    track: credits[0],
+    artist: credits[1]
+  }
+}
+
+export async function loadAudioData() {
+  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.username === user || p.reblog?.account.username === user.name));
+  //console.log(filtered);
+  const files = {};
+  for (const user of aData) {
+    files[user] = [];
+  }
+
+  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 (selectedPouet.media_attachments?.length > 0 &&
+        !selectedPouet.media_attachments[0].type.includes('audio')) {
+      continue;
+    }
+
+    if(selectedPouet.media_attachments?.length > 0){
+        let credits = creditsContent(selectedPouet.content);
+      let entry = {
+        track: credits.track,
+        artist: credits.artist,
+        src: selectedPouet.media_attachments[0].url
+      }
+      audioFiles.push(entry);
+    }
+  }
+
+  //console.log(audioFiles);
+  return audioFiles
 }
@@ -1,10 +1,59 @@
-//ecrire les messages dans /public/DATA/msgData.json avec 6 paramètres : title, content, likes, going, isSelected, isEvent
-// like & going à 0 par défaut (fonctionnel)
-// isLiked & isGoing local pour cette session: false par default (fonctionnel)
-// isSelected: false par défault (fonctionnel)
-// wasRead: false par défault (fonctionnel)
-// isEvent: true si le message concerne un évènement
-export async function loadMsgData() {
-  const data = await fetch('/DATA/msgData.json');
-  return await data.json();
+function idAndDate(str){
+  let data = str.split("T");
+  let date = data[0].split("-");
+  return {
+    date: date[2] +'/'+ date[1],
+    id: date[2] + date[1]
+  }
+}
+
+function titleAndContent(str){
+  let data = str.split(" :");
+  let title = data[0];
+  let contentData = data[1].split("<br>").filter(e => e);
+  let content = "";
+  for(let line of contentData){
+      content += line + '\n';
+  }
+  return {
+      title: title,
+      content: content
+    }
+  }
+
+export async function loadMsgData() {
+  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();
+  //console.log("POUETS :" , pouets);
+  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 selectedPouet;
+    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: selectedPouet.created_at,
+      content: textInfos.content,
+      like: selectedPouet.favourites_count,
+      isLiked: false,
+      wasRead: false,
+      isSelected: false
+    }
+    msgContent.push(entry);
+  }
+
+  return msgContent;
 }
@@ -1,4 +1,242 @@
-export async function loadPeopleData() {
-  const pData = await fetch('/DATA/peopleData.json');
-  return await pData.json();
+function idAndDate(str){
+  let data = str.split("T");
+  let date = data[0].split("-");
+  return {
+    date: date[2] +'/'+ date[1],
+    id: date[2] + date[1]
+  }
+}
+
+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);
+  }
+  if (data[1]){
+    contentData = data[1].split('<br>').filter(e => e);
+  }
+  let content = "";
+  let src = [];
+  for(let line of contentData){
+    if(line.includes('http')||line.includes('@')){
+      let linkData = line.split("# ");
+      //console.log(linkData[1]);
+      let linkNoFormat;
+      let url = "";
+      if (linkData[1].includes('http')){
+        linkNoFormat = linkData[1].split("\"");
+        url = linkNoFormat[1];
+      } else if (linkData[1].includes('@')){
+          url = 'mailto:' + linkData[1];
+      }
+      //console.log("url info", url)
+      src.push({
+        caption: linkData[0],
+        url: url
+      })
+    } else {
+      content += line + '\n';
+    }
+  }
+  return {
+    title: title,
+    content: content.split('/333/')[0],
+    links: src,
+  }
+}
+
+function exceptionKey(user, content){
+  let data = content.split('/333/');
+  let key = "";
+  if (data.length > 1) key = data[1].split('<br>')[0];
+  //console.log(key);
+  if (key === "bm90X3dlYnNpdGVfY29udGVudA==" && user !=="drags_nerds") return true;
+  if (user === "drags_nerds"){
+    if(key != "c2VuZF9tZXNzYWdlX3RvX3dlYnNpdGU="){
+      return true;
+    }
+  }
+  return false;
+}
+
+function videoExt(str){
+  let data = str.split('.');
+  return data.at(-1)
+}
+
+export async function loadPeopleData() {
+  const usernamesRes = await fetch('/DATA/peopleData.json');
+  const pData = await usernamesRes.json();
+  //console.log("USERS :", pData);
+  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();
+  //console.log("POUETS :" , pouets);
+  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) {
+    files[user.name] = [];
+  }
+  const description = {};
+  for (const user of pData){
+    const pouet = filtered.find(p => p.account.username === user.name || p.reblog?.account.username === user.name);
+    if (pouet){
+      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) {
+    let selectedPouet;
+    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 (selectedPouet.media_attachments?.length > 0 &&
+        !pouet.media_attachments[0].type.includes('image') &&
+        !pouet.media_attachments[0].type.includes('video')) {
+      continue;
+    }
+    //ignorer réponses
+    if (selectedPouet.in_reply_to_account_id) {
+      continue;
+    }
+    //ignorer exceptions
+    let exception = exceptionKey(username, selectedPouet.content);
+    //console.log(exception)
+    if(exception){
+      continue;
+    }
+
+    if (selectedPouet.content.includes('http')) {
+      let textInfos = titleAndContent(selectedPouet.content);
+      entry = {
+        id: 'link' + displayName + infos.id,
+        date: infos.date,
+        dateInfo: selectedPouet.created_at,
+        type: "link",
+        author: displayName,
+        caption: textInfos.title + '.plus',
+        links: textInfos.links,
+        description: textInfos.content,
+        isSelected: false
+      };
+    } else if (selectedPouet.media_attachments?.length > 0) {
+          let textInfos = titleAndContent(selectedPouet.content);
+          //console.log(pouet);
+          if (pouet.media_attachments[0].type.includes('image')){
+              entry = {
+              id: 'img' + displayName + infos.id,
+              date: infos.date,
+              dateInfo: selectedPouet.created_at,
+              type: "image",
+              author: displayName,
+              caption: textInfos.title + '.star',
+              src: selectedPouet.media_attachments[0].url,
+              alt: selectedPouet.media_attachments[0].description,
+              description: textInfos.content,
+              like: selectedPouet.favourites_count,
+              isSelected: false
+            }
+          }
+          if (pouet.media_attachments[0].type.includes('video')){
+              let videoType = videoExt(selectedPouet.media_attachments[0].url)
+              entry = {
+              id: 'vid' + displayName + infos.id,
+              date: infos.date,
+              dateInfo: selectedPouet.created_at,
+              type: "video",
+              format: selectedPouet.media_attachments[0].type + '/' + videoType,
+              author: displayName,
+              caption: textInfos.title + '.move',
+              src: selectedPouet.media_attachments[0].url,
+              alt: selectedPouet.media_attachments[0].description,
+              description: textInfos.content,
+              like: selectedPouet.favourites_count,
+              isSelected: false
+            }
+          }
+    } else {
+      let textInfos = titleAndContent(selectedPouet.content);
+      entry = {
+        id: 'txt' + displayName + infos.id,
+        date: infos.date,
+        dateInfo: selectedPouet.created_at,
+        type: "text",
+        author: displayName,
+        caption: textInfos.title + '.msg',
+        description: textInfos.content,
+        isSelected: false
+      };
+    }
+    //console.log(entry);
+    files[username].push(entry);
+  }
+
+  const dragContent = pData.filter(user => user.folder === 0).map(user => (
+    {
+      type: "folder",
+      caption: user.name + '.info',
+      children: files[user.name],
+      description: description[user.name],
+      isSelected: false
+  }));
+  const nerdContent = pData.filter(user => user.folder === 1).map(user => (
+    {
+      type: "folder",
+      caption: user.name + '.info',
+      children: files[user.name],
+      description: description[user.name],
+      isSelected: false
+  }));
+
+  const otherContent = pData.filter(user => user.folder === 2).flatMap(user => files[user.name]);
+
+
+  const sortedContent = [
+    {
+    type: "folder",
+    caption : "Artistes Drags",
+    description:"Pour en savoir plus sur nos artistes drags, c'est par ici !",
+    children: dragContent,
+    isSelected: false
+    },
+    {
+    type: "folder",
+    caption : "Artistes Nerds",
+    description:"Pour en savoir plus sur nos artistes nerds, c'est par là !",
+    children: nerdContent,
+    isSelected: false
+    },
+    {
+    type: "folder",
+    caption : "Autres contenus",
+    description:"Dans cette section, on place pleins de contenu, en vrac, \n sur nous, nos copaines, des trucs qu'on trouve cool, etc.",
+    children: otherContent,
+    isSelected: false
+    }
+  ];
+  return sortedContent;
 }
@@ -1,26 +1,33 @@
 import { reactive } from 'vue'

 export const dataStorage = reactive({
-  selectedMsg: { //empty msg template
+  selectedMsg: {
    title: '',
    date: '',
+    dateInfo: '',
    content: '',
    like: 0,
    isLiked: false,
-    going: 0,
-    isGoing: false,
    wasRead: false,
-    isSelected: false,
-    isEvent: false
+    isSelected: false
  },
  selectedImg: {
    src: "",
    caption: "",
    like: 0,
+    alt: "",
    isLiked: false
  },
  selectedLink:{
    linksData: [],
    description: ''
+  },
+  selectedVideo: {
+    src: "",
+    caption: "",
+    like: 0,
+    alt: "",
+    format:"",
+    isLiked: false
  }
 })
@@ -1,9 +1,9 @@
 <script setup>
  import CloseIcon from '../assets/icons/close.svg'
  import FolderIcon from '../assets/icons/folder.svg'
-  import FileIcon from '../assets/icons/file.svg'
-  import ReloadIcon from '../assets/icons/reload.svg'
-  import AboutIcon from '../assets/icons/about.svg'
+  import TextIcon from '../assets/icons/text.svg'
+  import ImgIcon from '../assets/icons/img.svg'
+  import LinkIcon from '../assets/icons/link.svg'
  import BackIcon from '../assets/icons/back.svg'
  import { loadPeopleData } from '@/data/peopleData.js'
 </script>
@@ -33,19 +33,19 @@
        </div>
      </div>
      <div class="windowContent" id="artistContent">
-        <p id="emptyFolderText" v-show="emptyFolder">Oops! There is nothing to display here...</p>
-        <div v-show="gridDisplay" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
-          <div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
-            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
+        <p id="emptyFolderText" v-show="emptyFolder">Oopsi! Il n'y a rien  à afficher ici<br>(pour l'instant...)</p>
+        <div v-show="gridDisplay" class="theMatrix" @mousedown.stop @reload="dataFirstLoad" @click="deselectAll" touchstart="deselectAll">
+          <div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.id" @click.stop="openFile(item)" @touchstart="openFile(item)">
+            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
            <p class="itemCaption">{{item.caption}}</p>
          </div>
        </div>
-        <div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
-          <div class="listItemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
-            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
-            <p class="itemCaption">{{item.caption}}</p>
-            <p class="itemCaption">*auteurice*</p>
-            <p class="itemCaption">{{item.date}}</p>
+        <div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @reload="dataFirstLoad" @click="deselectAll" touchstart="deselectAll">
+          <div class="listItemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.id" @click.stop="openFile(item)" @touchstart="openFile(item)">
+            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
+            <p class="itemCaption" id="listTitle">{{item.caption}}</p>
+            <p class="itemCaption" id="listAuthor">{{item.author}}</p>
+            <p class="itemCaption" id="listDate"><time :timedate="item.dateInfo">{{item.date}}</time></p>
          </div>
        </div>
        <div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.stop>
@@ -71,10 +71,11 @@

  #artistPannel{
    position: fixed;
-    width: 333px;
-    height: 500px;
+    width: 420px;
+    height: 600px;
    top: 16.1px;
    left: 16.1px;
+    z-index: 33;
  }

  #artistContent{
@@ -111,6 +112,7 @@
  #emptyFolderText{
    align-self:center;
    margin-top: 33px;
+    margin-left: 0;
    pointer-events: none;
    color: var(--accent-color);
    font-family: 'lineal';
@@ -122,14 +124,15 @@
  .theMatrix{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    grid-auto-rows: 133px;
-    gap: 10px;
+    grid-auto-rows: 150px;
+    gap: 16.1px;
    width: 97%;
    height: 66%;
    overflow-y: auto;
    align-items: center;
    margin-left: 5px;
    margin-top: 5px;
+    padding-top: 10px;
  }

  .itemDesc{
@@ -258,6 +261,7 @@
    border-width: thin;
    border-color: transparent;
    border-radius: 16.1px;
+    overflow: hidden;
  }

  .listItemStyle:hover{
@@ -267,7 +271,7 @@
  .listItemStyle .icon{
    height: 16.1px;
    width: 33px;
-    margin-left: 16.1px;
+    margin-left: 3.33px;
    margin-right: 16.1px;
    margin-top: 0;
  }
@@ -275,10 +279,10 @@
  .listItemStyle .itemCaption{
    font-family: 'velvelyne';
    font-weight: bold;
-    font-size: 16.1px;
+    font-size: 13.12px;
    pointer-events: none;
    cursor:inherit;
-    width: 30%;
+    width: 20%;
    height: 100%;
    text-align: left;
    display: flex;
@@ -288,6 +292,17 @@
    user-select: none;
  }

+  #listTitle{
+    width: 50%;
+  }
+
+  #listAuthor{
+    width: 33%;
+  }
+
+  #listDate{
+    width: 33px;
+  }

 </style>

@@ -317,14 +332,14 @@
        rootDepth: 0
      }
    },
-    emits: ['close','focus','openImg','openLink'],
+    emits: ['close','focus','openImg','openLink','openVideo'],
    methods:{
      onDrag({ target, transform }) {
        target.style.transform = transform;
      },
      dataFirstLoad(){
        this.displayedItems = [...this.linksData];
-        console.log(this.displayedItems);
+        //console.log(this.displayedItems);
        this.isNotRoot = false;
        this.checkEmptyFolder();
        this.deselectAll();
@@ -339,7 +354,7 @@
          it.isSelected = false;
        });
        if(!this.isNotRoot){
-          this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
+          this.displayedDescription = "Clique sur un dossier pour accéder au contenu !";
        }else{
          this.displayedDescription = this.rootFolderContent.at(-1).description;
        }
@@ -354,9 +369,10 @@
          this.isNotRoot = true;
          this.displayedDescription = e.description
          this.fileName += e.caption + '/';
-          if (e.caption === 'Autres'){
+          if (e.caption === 'Autres contenus'){
            this.gridDisplay = false;
            this.listDisplay = true;
+            this.organizeItems();
          }
        }
        if(e.type === 'image'){
@@ -365,6 +381,7 @@
              src: e.src,
              caption: e.caption,
              like: e.like,
+              alt: e.alt,
              isLiked: e.isLiked
            }
            this.displayedDescription = e.description;
@@ -378,16 +395,28 @@
          }
          console.log(dataStorage.selectedLink);
        }
-        if (e.type === 'text'){
-          this.selectFile(e);
+        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);
+
      },
      selectFile(e){
-        this.$emit('focus');
-        this.displayedItems.forEach(it => {
+        //console.log(e);
+        if(!this.emptyFolder){
+          this.displayedItems.forEach(it => {
          it.isSelected = false;
-        })
+        })}
        e.isSelected = true;
        this.displayedDescription = e.description;
      },
@@ -399,7 +428,7 @@
            this.selectFile(e);
            this.dblClickTimer = null;
            this.lastClickedItem = null;
-          }, 200);
+          }, 161);
        }else{
          clearTimeout(this.dblClickTimer);
          this.dblClickTimer = null;
@@ -417,20 +446,27 @@
          this.emptyFolder = false;
        }
      },
+      organizeItems(){
+        this.displayedItems.sort((a,b) => b.dateInfo.localeCompare(a.dateInfo));
+      },
      backToRoot(){
        this.displayedItems = this.rootFolderContent.at(-1).content;
        this.fileName = this.rootFolderContent.at(-1).directory;
-        this.displayedDescription = this.rootFolderContent.at(-1).description;
+        if(this.emptyFolder){
+          this.emptyFolder = false;
+          this.gridDisplay = true;
+        }
+        if(this.listDisplay){
+          this.listDisplay = false;
+          this.gridDisplay = true;
+        }
+        this.deselectAll();
        this.rootFolderContent.splice(this.rootFolderContent.length-1,1);
        this.rootDepth = this.rootFolderContent.length
        if (this.rootDepth === 0){
          this.isNotRoot = false;
        }
-        this.checkEmptyFolder();
-        if(this.listDisplay){
-          this.listDisplay = false;
-          this.gridDisplay = true;
-        }
+        //console.log(this.rootDepth);
      },
      closeClicked(){
        this.dataFirstLoad();
@@ -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="#" 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="#" 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>
@@ -0,0 +1,121 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="donationPannel" class="windowStyle" ref="donationPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          Nous faire une donation:
+        </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">
+          <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="https://pots.lydia.me/collect/pots?id=4298-appel-aux-dons-drags-nerds-2e-edition" class="textBtnStyle" target="_blank" @mousedown.stop @touchstart.stop>Cagnotte Lydia</a>
+          </div>
+      </div>
+    </div>
+</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){}
+  */
+
+  #donationPannel{
+    position: fixed;
+    width: 333px;
+    height: auto;
+    top: 366px;
+    left: 66px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  #donationPannel .windowContent p{
+    width: 90%;
+    text-align: left;
+    margin-bottom: 16.1px;
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+    color: var(--main-color);
+    font-weight: bold;
+    line-height: 1.2em;
+  }
+
+  #linkRow{
+    width:100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  #linkRow .textBtnStyle{
+    width: 77.7%;
+    height: 50px;
+    margin-bottom: 16.1px;
+  }
+
+
+
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #donationPannel{
+      left:366px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'DonationPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.donationPannel;
+      console.log("Donation pannel is loaded!");
+    }
+  };
+</script>
@@ -15,12 +15,44 @@
          Nous Suivre Hors des Réseaux !
        </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="closeClicked" @touchstart.capture="closeClicked" data-tooltip="fermer">
          <CloseIcon name="close" class="icon"/>
        </button>
      </div>
      <div class="windowContent" id="followContent">
-
+        <div class="tutoStepStyle" id="createAccount" :class="{closedStep: hasAccount}">
+          <div class="tutoStepTitle" @mousedown.stop @click="backToAccount" @touchstart.stop="backToAccount">
+            <p>1 &rarr; Créer un compte</p>
+          </div>
+          <div class="tutoStepContent">
+            <div class="substepStyle" :class="{closedStep: hasAccount || isCreatingAccount}">
+              <p>As-tu déjà un compte sur une instance mastodon ?</p>
+              <div class="tutoAnswers">
+                <button type="button" name="yesAcc" class="textBtnStyle" @mousedown.stop @click="userHasAccount" @touchstart.stop="userHasAccount">Oui!</button>
+                <button type="button" name="noAcc" class="textBtnStyle" @mousedown.stop @click="userNoAccount" @touchstart.stop="userNoAccount">Non, pas encore!</button>
+              </div>
+            </div>
+            <div class="substepStyle" :class="{closedStep: !noAccount}">
+              <p>Pour commencer, il faut te créer un compte sur une instance, n'importe laquelle ! Si tu n'as pas d'idées, tu peux utiliser celle-ci :</p>
+              <a href="https://piaille.fr/" class="textBtnStyle">piaille.fr</a>
+              <p>Et si tu veux choisir exactement l'instance qui te convient, tu peux faire un tour ici :</p>
+              <a href="https://joinmastodon.org/fr/servers" class="textBtnStyle">joinmastodon.org/fr/servers</a>
+              <button type="button" name="nextStep" class="textBtnStyle" id="nextStep" @mousedown.stop @click="userHasAccount" @touchstart.stop="userHasAccount">J'ai crée mon compte!</button>
+            </div>
+          </div>
+        </div>
+        <div class="tutoStepStyle" id="followAccount" :class="{closedStep: !hasAccount}">
+          <div class="tutoStepTitle" @mousedown.stop @click="userHasAccount" @touchstart.stop="userHasAccount">
+            <p>2 &rarr; Nous Suivre</p>
+          </div>
+          <div class="tutoStepContent">
+            <div class="substepStyle">
+              <p>Maintenant que tu as un compte<br>(ou si tu en avais déjà un), il te suffit<br>de nous chercher :</p>
+              <button type="button" name="copyLink" class="textBtnStyle" ref="textCopy" @mousedown.stop @click="textCopy" @touchstart.stop="textCopy" :class="{alert: alertActive}" data-tooltip="copier le texte">{{textContent}}</button>
+              <p>et de cliquer sur "Suivre" pour rester<br>inform&#xF1920; des dernières nouvelles<br>de Drags and Nerds !</p>
+            </div>
+          </div>
+        </div>
      </div>
    </div>
 </template>
@@ -47,6 +79,116 @@
    left: 50px;
  }

+  #followContent{
+    position: relative;
+    width: 100%;
+    height: 200%;
+    overflow-y: scroll;
+    margin-bottom: 7.77px;
+  }
+
+  .tutoStepStyle{
+    position: relative;
+    width: 95%;
+    height: auto;
+    border-radius: 16.1px;
+    border-style: solid;
+    border-color: var(--main-color);
+    border-width: thin;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    overflow: hidden;
+    margin-top: 3.33px;
+    transition: 3.33s ease;
+  }
+  .tutoStepStyle.closedStep{
+    height: 33px;
+  }
+
+  .tutoStepTitle{
+    width: 100%;
+    height: 33px;
+    font-family: 'lineal';
+    font-size: 16.1px;
+    color: var(--main-color);
+    padding-left: 16.1px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-align: left;
+    background-color: var(--accent-color);
+    box-sizing: border-box;
+  }
+
+  .tutoStepContent{
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .tutoStepContent p{
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+    font-weight: bold;
+    color: var(--main-color);
+    padding-left: 16.1px;
+    padding-right: 16.1px;
+    width: 90%;
+  }
+  .tutoStepContent .textBtnStyle{
+    width: 90%;
+    height: 33px;
+    font-size: 13.12px;
+    margin-left: 0;
+    margin-top: -3.33px;
+  }
+
+  #nextStep{
+    margin-top: 13.12px;
+    width: 50%;
+    background-color: var(--accent-color);
+  }
+
+  .substepStyle{
+    width: 100%;
+    height: auto;
+    padding-bottom: 16.1px;
+    margin-top: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    visibility: visible;
+  }
+  .substepStyle.closedStep{
+    height:0;
+    overflow-y: hidden;
+    visibility: hidden;
+    position: absolute;
+  }
+
+  .tutoAnswers{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+  }
+  .tutoAnswers .textBtnStyle{
+    height: 33px;
+    width: 43%;
+  }
+
+  .textBtnStyle.alert{
+    background-color: var(--accent-color);
+    color: var(--main-color);
+  }
+
  /*================ PC LARGE*/
  @media(min-width:1300px){
    #followPannel{
@@ -60,22 +202,81 @@

  export default {
    name : 'FollowPannel',
+    setup() {
+      const message = this.textContent;
+
+
+      return { message, onCopy, onError }
+    },
    components:{
      Moveable
    },
    data(){
      return{
-        target: null
+        target: null,
+        hasAccount: false,
+        isCreatingAccount: false,
+        noAccount : false,
+        textContent: "@drags-nerds@pouet.drags-nerds.net",
+        hideTimer: null,
+        alertActive: false
      }
    },
    emits: ['close','focus'],
    methods:{
      onDrag({ target, transform }) {
        target.style.transform = transform;
+      },
+      closeClicked(){
+        this.$emit('close');
+        this.backToAccount();
+      },
+      userHasAccount(){
+        this.hasAccount = true;
+        //console.log(this.noAccount, this.hasAccount);
+      },
+      userNoAccount(){
+        this.noAccount = true;
+        this.isCreatingAccount = true;
+        //console.log(this.noAccount, this.hasAccount);
+      },
+      backToAccount(){
+        this.noAccount = false;
+        this.hasAccount = false;
+        this.isCreatingAccount = false;
+        //console.log(this.noAccount, this.hasAccount);
+      },
+      textCopy(){
+        if(!this.alertActive){
+          const text = this.textContent;
+
+          const textarea = document.createElement("textarea");
+          textarea.value = text;
+
+          document.body.appendChild(textarea);
+          textarea.select();
+
+          document.execCommand("copy");
+
+          document.body.removeChild(textarea);
+
+          this.alertMsg();
+        }
+      },
+      async alertMsg(){
+        this.alertActive = true;
+        this.textContent = "Le texte a été copié !";
+        clearTimeout(this.hideTimer)
+
+        this.hideTimer = setTimeout(() => {
+          this.alertActive = false;
+          this.textContent = "@drags-nerds@pouet.drags-nerds.net";
+        }, 1610)
      }
    },
    mounted(){
      this.target = this.$refs.followPannel;
+      //console.log(this.noAccount, this.hasAccount);
      console.log("Follow off-socials pannel is loaded!");
    }
  };
@@ -0,0 +1,169 @@
+<script setup>
+  import TsGraff from '../assets/icons/tsG.svg'
+  import TsNeon from '../assets/icons/tsN.svg'
+  import AfaGraff from '../assets/icons/afaG.svg'
+  import AfaNeon from '../assets/icons/afaN.svg'
+  import LoveGraff from '../assets/icons/loveG.svg'
+  import LoveNeon from '../assets/icons/loveN.svg'
+</script>
+
+<template>
+    <Teleport to="#playerContainer" defer>
+      <div class="graffContainer" id="TsContainer">
+        <TsGraff name="graffTs" class="graff" id="graffTs"/>
+        <TsNeon name="neonTs" class="neon" id="neonTs"/>
+      </div>
+    </Teleport>
+    <Teleport to="#inboxContainer" defer>
+      <div class="graffContainer" id="AfaContainer">
+        <AfaGraff name="graffAfa" class="graff" id="graffAfa"/>
+        <AfaNeon name="neonAfa" class="neon" id="neonAfa"/>
+      </div>
+      <div class="graffContainer" id="LoveContainer">
+        <LoveGraff name="graffLove" class="graff" id="graffLove"/>
+        <LoveNeon name="neonLove" class="neon" id="neonLove"/>
+      </div>
+    </Teleport>
+</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){}
+  */
+  .graffContainer{
+    position: absolute;
+    background-color: transparent;
+    width:auto;
+    height: auto;
+  }
+
+  .graff{
+    fill: currentColor;
+    position: absolute;
+    color: var(--main-color);
+    z-index: 1;
+  }
+  .neon{
+    fill: currentColor;
+    position: absolute;
+    animation: none;
+    color: var(--neon-color);
+    mix-blend-mode: exclusion;
+    transition: 3.33s ease;
+    z-index: 2;
+  }
+
+  #TsContainer{
+    top: 66px;
+    left: 131.2px;
+  }
+  #graffTs{
+    width: 77px;
+    height: auto;
+  }
+  #neonTs{
+    width: 77px;
+    height: auto;
+    margin-left: -7.77px;
+    margin-top: -3.33px;
+  }
+
+  #AfaContainer{
+    top: -33px;
+    left: 266px;
+  }
+  #graffAfa{
+    width: 131.2px;
+    height: auto;
+  }
+  #neonAfa{
+    width: 131.2px;
+    height: auto;
+    margin-left: -7.77px;
+    margin-top: -7.77px;
+  }
+
+  #LoveContainer{
+    top: 250px;
+    left: 33px;
+  }
+  #graffLove{
+    width: 250px;
+    height: auto;
+  }
+  #neonLove{
+    width: 250px;
+    height: auto;
+    margin-left: -7.77px;
+    margin-top: -7.77px;
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #TsContainer{
+      top: 55px;
+      left: 300px;
+    }
+    #graffTs{
+      width: 100px;
+      height: auto;
+    }
+    #neonTs{
+      width: 100px;
+      height: auto;
+      margin-left: -7.77px;
+      margin-top: -3.33px;
+    }
+
+    #AfaContainer{
+      top: -16.1%;
+      left: unset;
+      right: 200px;
+    }
+    #graffAfa{
+      width: 161px;
+      height: auto;
+    }
+    #neonAfa{
+      width: 161px;
+      height: auto;
+      margin-left: -7.77px;
+      margin-top: -7.77px;
+    }
+
+    #LoveContainer{
+      top: 90%;
+      left: unset;
+      right: 444px;
+    }
+    #graffLove{
+      width: 300px;
+      height: auto;
+    }
+    #neonLove{
+      width: 300px;
+      height: auto;
+      margin-left: -7.77px;
+      margin-top: -7.77px;
+    }
+
+  }
+</style>
+
+<script>
+  export default{
+    name: 'GraffOverlay',
+    mounted(){
+      console.log('Graff overlay is loaded!');
+    }
+  }
+</script>
@@ -1,5 +1,5 @@
 <template>
-    <div id="infoBulleContainer" :style="{top: posY + 'px', left: posX + 'px'}">
+    <div id="infoBulleContainer" :style="{top: posY + 'px', left: posX + 'px'}" @closeInfo="hideBubble">
      <div v-show="isActive">{{bubbleContent}}</div>
    </div>
 </template>
@@ -28,7 +28,7 @@
  }

  #infoBulleContainer div{
-    visibility: hidden;
+    visibility: visible;
    text-align: center;
    width: 100%;
    height: 100%;
@@ -70,11 +70,12 @@
        isActive: false,
        posX: 0,
        posY: 0,
-        bubbleContent:""
+        bubbleContent:"",
+        hideTimer: null
      }
    },
    methods:{
-      loadBubble(event){
+      async loadBubble(event){
        let item = event.target
        if (!item.dataset.tooltip) {
          this.hideBubble();
@@ -87,6 +88,11 @@
        }
        this.posY = event.clientY + 13.12;
        this.isActive = true;
+        clearTimeout(this.hideTimer)
+
+        this.hideTimer = setTimeout(() => {
+          this.hideBubble();
+        }, 1312)
      },
      hideBubble(){
        this.isActive = false
@@ -23,7 +23,7 @@
        <div id="warnText">
          <p>Vous allez quiter le site<br>pour aller sur <strong>Instragram!</strong></p>
        </div>
-        <a href="#" class="textBtnStyle" @mousedown.stop @touchstart.stop target="_blank" @click="$emit('close')">
+        <a href="https://www.instagram.com/drags_nerds/?utm_source=ig_web_button_share_sheet" class="textBtnStyle" @mousedown.stop @touchstart.stop target="_blank" @click="$emit('close')">
          OK !
        </a>
      </div>
@@ -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
      }
    },
@@ -1,5 +1,6 @@
 <script setup>
    import CloseIcon from '../assets/icons/close.svg'
+    import LikeIcon from '../assets/icons/like.svg'
 </script>

 <template>
@@ -21,15 +22,11 @@
        <CloseIcon name="close" class="icon"/>
      </button>
    </div>
-    <div class="windowContent">
+    <div class="windowContent" id="msgContent">
      <div class="reactBar">
        <p class="reactStatStyle">{{selectedMsg.like}}</p>
        <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
-          <CloseIcon name="test" class="icon"/>
-        </button>
-        <p v-show="selectedMsg.isEvent" class="reactStatStyle">{{selectedMsg.going}}</p>
-        <button v-show="selectedMsg.isEvent" type="button" class="textBtnStyle" :class="{reactedStyle: selectedMsg.isGoing}" @mousedown.capture="goingToEvent" @touchstart.capture="goingToEvent">
-          JE PARTICIPE!
+          <LikeIcon name="test" class="icon"/>
        </button>
      </div>
      <p id="selectedMsgText" @touchstart.stop>{{selectedMsg.content}}</p>
@@ -54,9 +51,19 @@
    position: fixed;
    top:50%;
    left:3.33%;
-    width: 333px;
-    height: 333px;
+    width: 400px;
+    height: 400px;
  }
+
+  #msgContent{
+    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{
@@ -75,6 +82,7 @@
    padding-left: 7.77px;
    margin-top: 0;
    height: 77%;
+    pointer-events: all;
    overflow-y: scroll;
  }
 </style>
@@ -106,9 +114,6 @@
      likeMsg(){
        dataStorage.selectedMsg.isLiked = !dataStorage.selectedMsg.isLiked
      },
-      goingToEvent(){
-        dataStorage.selectedMsg.isGoing = !dataStorage.selectedMsg.isGoing;
-      },
      closeMsg(){
        this.$emit('close');
        dataStorage.selectedMsg.isSelected = false;
@@ -0,0 +1,136 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="ticketPannel" class="windowStyle" ref="ticketPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          Réserver une place
+        </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">
+          <p>
+            Afin de pouvoir estimer le nombre
+            <br>
+            de participation, nous avons mis en place
+            <br>
+            un système de <strong>"prévente à prix libre"</strong>
+            <br>
+            <br>
+            Lors de la réservation, tu indiques
+            <br>
+            une intention de don le jour même,
+            <br>
+            c'est-à-dire la somme que tu penses
+            <br>
+            pouvoir donner le jour J.
+            <br>
+            <br>
+            Cette réservation ne t'engage
+            <br>
+            <strong>à rien en terme de paiement,</strong>
+            <br>
+            et tu pourras toujours revenir sur le montant indiqué, lors de l'évènement.
+            <br>
+            <br>
+            De notre coté, on s'engage à te garder une place <strong>jusqu'au début des shows,</strong>
+            <br>
+            si jamais la jauge est atteinte.
+          </p>
+          <a href="#" class="textBtnStyle">Je veux une place !</a>
+      </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){}
+  */
+
+  #ticketPannel{
+    position: fixed;
+    width: 333px;
+    height: auto;
+    top: 200px;
+    left: 33px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  #ticketPannel .windowContent p{
+    width: 90%;
+    text-align: left;
+    margin-bottom: 16.1px;
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+    color: var(--main-color);
+    font-weight: bold;
+    line-height: 1.2em;
+  }
+
+    #ticketPannel .windowContent p strong{
+      font-family: 'lineal';
+      font-weight: normal;
+    }
+
+  #ticketPannel .textBtnStyle{
+    width: 77%;
+    height: 50px;
+    margin-bottom: 16.1px;
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #ticketPannel{
+      left:399px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'DonationPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.ticketPannel;
+      console.log("Donation pannel is loaded!");
+    }
+  };
+</script>
@@ -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>
@@ -1,5 +1,6 @@
 <script setup>
    import CloseIcon from '../assets/icons/close.svg'
+    import LikeIcon from '../assets/icons/like.svg'
 </script>

 <template>
@@ -20,13 +21,13 @@
        </button>
      </div>
      <div class="windowContent" id="visualizerContent">
-        <img :src="selectedImg.src" id="displayedImgStyle">
-      </div>
-      <div class="reactBar">
-        <p class="reactStatStyle">{{selectedImg.like}}</p>
-        <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedImg.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
-          <CloseIcon name="test" class="icon"/>
-        </button>
+        <img :src="selectedImg.src" id="displayedImgStyle" :alt="selectedImg.alt">
+        <div class="reactBar">
+          <p class="reactStatStyle">{{selectedImg.like}}</p>
+          <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedImg.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
+            <LikeIcon name="test" class="icon"/>
+          </button>
+        </div>
      </div>
    </div>
 </template>
@@ -54,6 +55,10 @@
    border-radius: 16.1px;
  }

+  #visualizerContent{
+    align-items: flex-start;
+  }
+
  #displayedImgStyle{
    width:100%;
    height:auto;
@@ -1,5 +1,6 @@
 <script setup>
-  import CloseIcon from '../assets/icons/close.svg'
+  import MsgIcon from '../assets/icons/msg.svg'
+  import LikeIcon from '../assets/icons/like.svg'
  import { loadMsgData } from '@/data/msgData.js'
 </script>

@@ -7,9 +8,13 @@
    <div id="inboxContainer" class="uiStyle">
      <div id="inboxHeader">
        <div id="inboxTitle">
-          <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
+          <p>
+            DERNIÈRES NOUVELLES DE L'ORGA/<br>
+            <strong>Ici on poste des petits messages<br>pour vous tenir au courant <br>de l'organisation de la soirée !</strong>
+          </p>
        </div>
        <div id="msgNumberStyle" data-tooltip="message.s non lu.s">
+          <MsgIcon name="msg" class="icon"/>
          <p>{{msgNumber}}</p>
        </div>
      </div>
@@ -21,10 +26,8 @@
          </div>
          <div class="msgReact">
            <p class="reactStatStyle">{{item.like}}</p>
-            <CloseIcon name="testLike" class="icon" :class="{reactedStyle: item.isLiked}"/>
+            <LikeIcon name="testLike" class="icon" :class="{reactedStyle: item.isLiked}"/>
            <p class="reactStatStyle"v-show="item.isEvent">{{item.going}}</p>
-            <p v-show="item.isEvent && !item.isGoing" >PARTICIPAN.X.S</p>
-            <p v-show="item.isEvent && item.isGoing" class="reactedStyle">JE PARTICIPE!</p>
          </div>
        </div>
      </div>
@@ -48,18 +51,19 @@
  #inboxContainer{
    width:100%;
    position:relative;
-    height:50%;
+    height:33.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
+    z-index: 33;
  }
  #inboxHeader{
    width: 100%;
-    height: 20%;
+    height: 100px;
    position: relative;
-    background-color: var(--main-color);
-    color: var(--back-color);
+    background-color: var(--accent-color);
+    color: black;
    font-size: 16.1px;
    display: flex;
    flex-direction: row;
@@ -68,14 +72,25 @@
  }

  #inboxTitle{
+    font-family: 'lineal';
+    font-weight: normal;
+    padding-left: 16.1px;
+    line-height: 1em;
+  }
+  #inboxTitle strong{
    font-family: 'velvelyne';
    font-weight: bold;
-    padding-left: 33px;
  }
+
  #msgNumberStyle{
    font-family: 'lineal';
    font-size: 33px;
-    padding-right: 44px;
+    padding-right: 50px;
+    width: 44px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
  }

  #msgNumberStyle p{
@@ -141,7 +156,7 @@

  .msgTitle{
    padding-left: 33px;
-    width: 47%;
+    width: 77%;
    font-size: 16.1px;
    align-items: center;
    opacity: 0.333;
@@ -158,7 +173,7 @@
  .msgReact{
    padding-right: 33px;
    padding-top:16.1px;
-    width: 47%;
+    width: 16.1%;
    height: 33.3%;
    display: flex;
    flex-direction: row;
@@ -229,6 +244,9 @@
          if (!this.msgList[j].wasRead)
          this.msgNumber += 1;
        }
+      },
+      organizeItems(){
+        this.msgList.sort((a,b) => b.dateInfo.localeCompare(a.dateInfo));
      }
    },
    data(){
@@ -241,17 +259,15 @@
            content: '',
            like: 0,
            isLiked: false,
-            going: 0,
-            isGoing: false,
            wasRead: false,
-            isSelected: false,
-            isEvent: false
+            isSelected: false
          }
      }
    },
    async mounted(){
      this.msgList = await loadMsgData();
-      console.log(this.msgList);
+      this.organizeItems();
+      //console.log(this.msgList);
      this.msgNumber = this.msgList.length
      console.log("Inbox content is loaded!");
    }
@@ -1,39 +1,72 @@
 <script setup>
-  import CloseIcon from '../assets/icons/close.svg'
+  import PeopleIcon from '../assets/icons/people.svg'
+  import InstaIcon from '../assets/icons/insta.svg'
+  import ContactIcon from '../assets/icons/contact.svg'
 </script>

 <template>
    <div id="infoMenuContainer" class="uiStyle">
      <div id="welcomeTextContainer">
        <p id="welcomeText">
-          Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+          À tou&#xF47D0;s les queers, tou&#xF47D0;s les nerds,
+          <br>
+          et  tou&#xF47D0;s les personnes entres les deux,
          <br>
          <br>
-          Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
-        </p>
+          Vous êtes convi&#xF1920;s à la 2ème édition
+          <br>
+          de <strong>Drags and Nerds !</strong>
+          <br>
+          Au programme, drags shows & performances nerds,
+          <br>
+          musique électronique, vjing, live-coding, synthés vidéos, etc.
+          <br>
+          <br>
+          Nous voulons également<br>centrer notre soirée
+          autour de l'inclusivité.<br>Pour ce faire,
+          le port du<br><strong>masque FFP2 sera<br>obligatoire à l'intérieur</strong>,
+          <br>
+          afin de protéger les plus vulnérables d'entres nous.
+          <br>
+          Les masques seront distribués gratuitement à l'entrée !
+          <br>
+          <br>
+          Également,<br>
+          afin de créer du lien entre nos commus,
+          plusieurs assos seront présentes, afin de partager et d'échanger nos valeurs et nos savoir-faires
+          <br>
+          <br>
+          Enfin,<br>
+          (pour les courageu&#xF57B0;s qui ont lu jusque là ^^),
+          notre collectif est très ouvert à s'agrandir et à se compléter, alors n'hésite pas à nous contacter,
+          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')">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">
        <button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')" data-tooltip="à propos de nous">
-          <CloseIcon name="test" class="icon"/>
+          <PeopleIcon name="people" class="icon"/>
        </button>
        <!--<button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')" data-tooltip="newsletter">
          <CloseIcon name="test" class="icon"/>
        </button>-->
        <button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')" data-tooltip="instagram">
-          <CloseIcon name="test" class="icon"/>
+          <InstaIcon name="insta" class="icon"/>
        </button>
        <button type="button" class="iconBtnStyle" id="btnContact" @click="openPannel('contact')" data-tooltip="nous contacter">
-          <CloseIcon name="test" class="icon"/>
+          <ContactIcon name="contact" class="icon"/>
        </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'}">
@@ -74,12 +107,30 @@
      @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')"
      @focus="focusPannel('link')"
      :class="{zBase: isFocused!=='link', zFocus: isFocused==='link'}">
    </LinkPan>
+    <DonationPan
+      v-show="isActive.includes('donation')"
+      @close="closePannel('donation')"
+      @focus="focusPannel('donation')"
+      :class="{zBase: isFocused!=='donation', zFocus: isFocused==='donation'}">
+    </DonationPan>
+    <TicketPan
+      v-show="isActive.includes('ticket')"
+      @close="closePannel('ticket')"
+      @focus="focusPannel('ticket')"
+      :class="{zBase: isFocused!=='ticket', zFocus: isFocused==='ticket'}">
+    </TicketPan>
 </template>

 <style scoped>
@@ -99,11 +150,12 @@
  #infoMenuContainer{
    width:100%;
    position:relative;
-    height:40%;
+    height:55%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
+    z-index: 33;
  }

  #btnColumn{
@@ -126,12 +178,12 @@
  }

  #btnColumn .icon{
-    width: 33px;
+    width: 50px;
  }

  #welcomeTextContainer{
    width:77%;
-    height:100%;
+    height:90%;
    background-color: transparent;
    position: relative;
    padding: 16.1px;
@@ -142,21 +194,49 @@
  }

  #welcomeText{
-    overflow-y: scroll;
-    height: 73%;
+    pointer-events: all;
+    height: 100%;
    font-size: 16.1px;
    font-family: 'velvelyne';
    color: var(--main-color);
    font-weight: bold;
    padding-right: 16.1px;
    margin-top: -7.77px;
+    overflow-y: scroll;
+    line-height: 1.1em
+  }
+
+  #welcomeText strong{
+    font-family: 'lineal';
+    font-weight: normal;
+    font-size: 22.2px;
+    animation: blink 7.77s infinite;
  }

  #welcomeTextContainer .textBtnStyle{
    height:44.4px;
    width: 70%;
+    margin-bottom: 7.77px;
  }

+  #ticketButton.textBtnStyle{
+    position: absolute;
+    top: -80px;
+    left: 64%;
+    /*animation: float 1.61s infinite;*/
+    color: var(--main-color);
+    background-color: var(--accent-color);
+    width: 50%;
+  }
+  /*
+  #ticketButton.textBtnStyle:hover{
+    background-color: var(--main-color);
+    animation: none;
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+  }
+  */
+
  /*================ MID FORMAT*/
  @media(min-width:500px){
    #welcomeText{
@@ -174,7 +254,7 @@
  /*================ PC LARGE*/
  @media(min-width:1300px){
    #welcomeText{
-      height:71%;
+      height:80%;
    }

    #btnColumn .iconBtnStyle{
@@ -182,6 +262,15 @@
      margin-left: -13.12%;
      margin-top: 13.12%;
    }
+    #welcomeText strong{
+      font-size: 22.2px;
+    }
+
+    #ticketButton.textBtnStyle{
+      top: unset;
+      bottom: -85%;
+      left: -300px;
+    }

  }
 </style>
@@ -189,6 +278,7 @@
 <script>
  export default {
    name : 'InfoMenu',
+    emits: ['closeInfo'],
    data(){
      return{
        isActive: [],
@@ -196,12 +286,17 @@
      }
    },
    methods:{
-      openPannel(name){
+      delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+      },
+      async openPannel(name){
        console.log(name);
        if(!this.isActive.includes(name)){
          this.isActive.push(name);
        }
        this.isFocused = name;
+        this.delay(33);
+        this.$emit('closeInfo');
      },
      focusPannel(name){
        if(this.isActive.includes(name)){
@@ -22,10 +22,15 @@ 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'

 import Infobubble from './indieComponents/Infobulle.vue'

+import GraffOverlay from './indieComponents/GraffOverlay.vue'
+
 // création app racine
 const app = createApp(App);

@@ -47,11 +52,14 @@ 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);

 app.component('Infobulle', Infobubble);
 app.component('ColorPan', ColorBtn);
-
+app.component('GraffOver', GraffOverlay);

 //Montage dans div#app de index.html
 app.mount('#app');
@@ -1,15 +1,16 @@
 <script setup>
-    import CloseIcon from '../assets/icons/close.svg'
+    import DayIcon from '../assets/icons/day.svg'
+    import NightIcon from '../assets/icons/night.svg'
 </script>

 <template>
    <div id="colorBtnContainer">
-      <CloseIcon name="cyber" class="icon" :class="{checkedIcon: isChecked}"/>
+      <NightIcon name="cyber" class="icon" :class="{checkedIcon: isChecked}"/>
      <label class="switch">
        <input type="checkbox" @click="toggleTheme">
        <span class="slider" data-tooltip="thème"></span>
      </label>
-      <CloseIcon name="solar" class="icon" :class="{checkedIcon: !isChecked}"/>
+      <DayIcon name="solar" class="icon" :class="{checkedIcon: !isChecked}"/>
    </div>
 </template>

@@ -79,6 +80,7 @@
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
+    cursor: cell;
  }

  .slider:before {
@@ -92,6 +94,7 @@
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
+    cursor: cell;
  }

  input:checked + .slider {
@@ -119,23 +122,30 @@
 <script>
  export default {
    name : 'InfoContent',
+    emits: ['themeDark', 'themeLight'],
    data(){
      return{
-        isChecked: false
+        isChecked: false,
+        target: null
      }
    },
    methods:{
      toggleTheme(){
        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!");
    }
  };
--- a/Show More
+++ b/Show More
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
vgaNAR6ta	3f9b63309d	edit: tri des messages plus récent en haut	2026-04-04 19:18:32 +02:00
vgaNAR6ta	f56ee81f6d	edit: alt text dans panneau image, gestion des messages vides	2026-04-04 19:08:45 +02:00
vgaNAR6ta	c94b22444a	edit: ajout des panneaux donations et tickets	2026-04-04 04:14:10 +02:00
vgaNAR6ta	7c6e33d624	tunnel: intiation de la com officielle major_edits: mail dans liens + graff overlay + simple click dans panneau 'à propos'	2026-04-04 02:04:40 +02:00
vgaNAR6ta	a5c9c73d51	edit: ajout d'une première série d'image de nos artistes drags	2026-04-01 09:43:07 +02:00
vgaNAR6ta	eaf1e1bbcb	edit: lien entre player & message + mastodon	2026-04-01 09:42:27 +02:00
vgaNAR6ta	54731b6721	edit: lien entre panneau à propos et mastodon pour permettre à artiste et orga d'y déposer du contenu	2026-03-31 08:27:59 +02:00
vgaNAR6ta	f5ed2a7d9c	edit: ajout icon & bug fix infobulle timer	2026-03-30 04:14:53 +02:00
vgaNAR6ta	a50c2d82c8	edit: chemin relatif pour JSON	2026-03-23 13:24:56 +01:00
vgaNAR6ta	064e265809	edit: fichiers dans ./preview sur le serveur	2026-03-23 13:16:26 +01:00