fix d'un bug sur mobile d'ouverture du live

Ajout du live
edit: post mastodon V2 en mode plus flexible (v0 un peu schlag mais ça marche x333)
2026-05-21 12:22:59 +02:00 · 2026-05-20 23:43:01 +02:00 · 2026-05-09 21:53:31 +02:00 · 2026-05-06 06:09:38 +02:00 · 2026-04-26 18:39:14 +02:00 · 2026-04-26 16:47:34 +02:00
19 changed files with 645 additions and 47 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>
@@ -1769,9 +1769,9 @@
      }
    },
    "node_modules/vite": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -1,3 +1,8 @@
 [
-  "vga_nar6_ta"
+  "vga_nar6_ta", 
+  "openup42",
+  "berthasse",
+  "arlsn",
+  "djstarheartzzz",
+  "openup42"
 ]
@@ -6,5 +6,25 @@
  {
    "name": "drags_nerds",
    "folder": 2
+  },
+  {
+    "name": "berthasse",
+    "folder": 1
+  },
+  {
+    "name": "berthasse",
+    "folder": 0
+  },
+  {
+    "name": "arlsn",
+    "folder": 1
+  },
+  {
+    "name": "djstarheartzzz",
+    "folder": 1
+  },
+  {
+    "name": "openup42",
+    "folder": 1
  }
 ]
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="Calque_1"
+   data-name="Calque 1"
+   viewBox="0 0 40.19 38.9"
+   version="1.1"
+   sodipodi:docname="live.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3" />
+  <sodipodi:namedview
+     id="namedview3"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="12.366161"
+     inkscape:cx="16.415765"
+     inkscape:cy="15.121912"
+     inkscape:window-width="1714"
+     inkscape:window-height="1081"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Calque_1" />
+  <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"
+     id="path2" />
+  <path
+     style="fill:currentColor;fill-opacity:1;stroke-width:1.51181;paint-order:stroke markers fill"
+     d="M 27.347382,19.189543 12.842618,10.815214 v 17.269572 z"
+     id="path3" />
+</svg>
@@ -91,7 +91,6 @@ a button{
 }

 p{
-  pointer-events: none;
  cursor: inherit;
 }

@@ -136,6 +135,7 @@ html, body{
  height: 100%;
  filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg);
  object-fit: cover;
+  transition: 7.77s ease-in;
 }

 #canvas .overlay {
@@ -293,6 +293,7 @@ html, body{
  border-radius: 21px;
  border-color: var(--main-color);
  overflow: hidden;
+  position: relative;
 }

 .zBase{
@@ -300,11 +301,16 @@ html, body{
 }

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

+#artistPannel.zFocus{
+  z-index: 3333;
+}
+
 .windowTitle{
  width:100%;
  height:50px;
@@ -316,11 +322,16 @@ html, body{
  display: flex;
  flex-direction: row;
  align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  cursor: move;
+  gap: 10px;
+}
+
+.windowTitle p:first-child {
+  flex: 1;
 }

 .windowTitleLower{
@@ -339,6 +350,11 @@ html, body{
  width: 50px;
  height: 33px;
  align-items: center;
+  position: relative;
+  z-index: 100;
+  text-align: center;
+  line-height: 38px;
+  padding: 0;
 }

 .closeBtn:hover{
@@ -359,3 +375,38 @@ html, body{
 .moveable-control-box {
  display: none !important;
 }
+
+/*===========================For some fckn reason lien en description artist pannel*/
+
+.itemDesc p a{
+  display: block;
+  pointer-events: all;
+  background-color: var(--back-color);
+  color: var(--main-color);
+  font-size: 13.12px;
+  font-family: 'lineal';
+  border-color: var(--main-color);
+  border-width: thin;
+  border-style: solid;
+  border-radius: 16.1px;
+
+  width: 161px;
+  height: 16.1px;
+  padding: 7.77px;
+  margin-bottom: 0;
+
+
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+
+}
+
+.itemDesc p a#text{
+  text-overflow: ellipsis;
+}
+
+.itemDesc p a:hover{
+  background-color: var(--main-color);
+  color: var(--back-color);
+}
@@ -10,10 +10,12 @@ function idAndDate(str){
 function titleAndContent(str){
  let data = str.split(" :");
  let title = "NO_TITLE";
+  let contentData = [""];
  if (data.length > 1){
    title = data[0];
+  } else {
+    contentData = data[0].split('<br>').filter(e => e);
  }
-  let contentData = [""];
  if (data[1]){
    contentData = data[1].split('<br>').filter(e => e);
  }
@@ -22,7 +24,7 @@ function titleAndContent(str){
  for(let line of contentData){
    if(line.includes('http')||line.includes('@')){
      let linkData = line.split("# ");
-      console.log(linkData[1]);
+      //console.log(linkData[1]);
      let linkNoFormat;
      let url = "";
      if (linkData[1].includes('http')){
@@ -31,7 +33,7 @@ function titleAndContent(str){
      } else if (linkData[1].includes('@')){
          url = 'mailto:' + linkData[1];
      }
-      console.log("url info", url)
+      //console.log("url info", url)
      src.push({
        caption: linkData[0],
        url: url
@@ -87,7 +89,14 @@ export async function loadPeopleData() {
  for (const user of pData){
    const pouet = filtered.find(p => p.account.username === user.name || p.reblog?.account.username === user.name);
    if (pouet){
-      description[user.name] = pouet.account.note;
+      let descData = pouet.account.note.split('<br>').filter(e => e);
+      if(descData.length > 0){
+          for (let line of descData){
+          description[user.name] += '\n' + line;
+        }
+      } else {
+        description[user.name] = 'NO DESCRIPTION'
+      }
    }
  }

@@ -129,7 +138,7 @@ export async function loadPeopleData() {
        dateInfo: selectedPouet.created_at,
        type: "link",
        author: displayName,
-        caption: textInfos.title + '.liens',
+        caption: textInfos.title + '.plus',
        links: textInfos.links,
        description: textInfos.content,
        isSelected: false
@@ -0,0 +1,149 @@
+function idAndType(obj){
+  let data = obj.dateInfo.split('T')
+  let keyData = data[1].split('.')[0].split(':')
+  let uniqueKey = keyData[1] + keyData[2]
+  let id = obj.author + uniqueKey
+  //type : post, video, images
+  if (obj.videoSrc){
+    obj.type = "video"
+    id += ".video"
+  }else if(obj.imgSrc){
+    obj.type = "image"
+    id += ".image"
+  }else {
+    obj.type = "post"
+    id += ".post"
+  }
+  obj.caption = id
+}
+
+
+export async function loadPostData(){
+        //liste des utilisateurice
+  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);
+          //création des dossiers
+  const files = {};
+  for (const user of pData) {
+    files[user.name] = [];
+  }
+  //console.log(files)
+          //récupérationn des descriptions/bio
+  const description = {};
+  for (const user of pData){
+    const pouet = filtered.find(p => p.account.username === user.name);
+    if(pouet?.account.note){
+        let data = pouet.account.note.split('<br>').filter(e => e)
+        let bio = "";
+        for (let line of data){
+          bio += line + '\n'
+        }
+        description[user.name] = bio
+    } else {
+      description[user.name] = 'NO DESCRIPTION'
+    }
+  }
+
+          //formattage des posts
+  for (const pouet of filtered){
+    let selectedPouet;
+    //si reblog chercher post origine
+    if(pouet.reblog){
+      selectedPouet = pouet.reblog;
+    } else {
+      selectedPouet = pouet;
+    }
+    //console.log(selectedPouet);
+    const username = selectedPouet.account.username;
+    const displayName = selectedPouet.account.display_name;
+    let date = selectedPouet.created_at;
+    let entry;
+
+    //ignorer réponses
+    if (selectedPouet.in_reply_to_account_id) {
+      continue;
+    }
+    //ignorer audio dans cette section
+    if (selectedPouet.media_attachments?.length > 0 &&selectedPouet.media_attachments[0].type.includes('audio')){
+      continue
+    }
+
+    // on commence par le texte du post
+    entry = {
+      type: "",
+      caption : "",
+      content : selectedPouet.content,
+      imgSrc : null,
+      videoSrc : null,
+      author : displayName,
+      dateInfo : date,
+      like : selectedPouet.favourites_count,
+      isSelected: false
+    }
+
+    if (selectedPouet.media_attachments?.length > 0){
+      if (selectedPouet.media_attachments[0].type.includes('video')){
+        entry.videoSrc = selectedPouet.media_attachments[0].url
+      } else if (selectedPouet.media_attachments[0].type.includes('image')){
+        entry.imgSrc = selectedPouet.media_attachments[0].url
+      }
+    }
+    //create id for title and unique name
+    idAndType(entry);
+    //console.log(entry);
+    //add to folder
+    files[username].push(entry);
+  }
+          //tri des post
+  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]);
+      //dossier final
+  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;
+}
@@ -5,7 +5,7 @@
  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'
+  import {loadPostData} from '@/data/postData.js'
 </script>

 <template>
@@ -36,20 +36,20 @@
        <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"/>
+            <component :is="item.type==='folder'? FolderIcon : item.type === 'post'? TextIcon : ImgIcon" class="icon"/>
            <p class="itemCaption">{{item.caption}}</p>
          </div>
        </div>
        <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"/>
+            <component :is="item.type==='folder'? FolderIcon : item.type === 'post'? TextIcon : 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>
-          <p>{{displayedDescription}}</p>
+          <p id="descText" ref="description">{{displayedDescription}}</p>
        </div>
      </div>
    </div>
@@ -72,7 +72,7 @@
  #artistPannel{
    position: fixed;
    width: 420px;
-    height: 600px;
+    height: auto;
    top: 16.1px;
    left: 16.1px;
    z-index: 33;
@@ -80,7 +80,7 @@

  #artistContent{
    width:100%;
-    height:87%;
+    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
@@ -127,7 +127,7 @@
    grid-auto-rows: 150px;
    gap: 16.1px;
    width: 97%;
-    height: 66%;
+    height: 333px;
    overflow-y: auto;
    align-items: center;
    margin-left: 5px;
@@ -137,12 +137,14 @@

  .itemDesc{
    width: 90%;
-    height: 23%;
+    height: 161px;
    border-radius: 16.1px;
    border-color: var(--main-color);
    border-style: solid;
    border-width: thin;
    margin-top: 2%;
+    margin-bottom: 13.12px;
+    overflow-y: scroll;

    color: var(--main-color);
    font-family: 'velvelyne';
@@ -241,7 +243,7 @@
    justify-content: flex-start;
    align-items: center;
    width: 95%;
-    height: 66%;
+    height: 444px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 7.77px;
@@ -251,6 +253,8 @@
    width:100%;
    height: 33px;
    display: flex;
+    flex-shrink: 0;
+
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
@@ -378,36 +382,28 @@
        if(e.type === 'image'){
            this.$emit('openImg');
            dataStorage.selectedImg = {
-              src: e.src,
+              src: e.imgSrc,
              caption: e.caption,
              like: e.like,
-              alt: e.alt,
              isLiked: e.isLiked
            }
-            this.displayedDescription = e.description;
-        }
-        if (e.type === 'link'){
-          this.$emit('openLink');
-          dataStorage.selectedLink = {
-            linksData: e.links,
-            caption: e.caption,
-            description: e.description
-          }
-          console.log(dataStorage.selectedLink);
+            this.$refs.description.innerHTML = e.content
        }
        if(e.type === 'video'){
            this.$emit('openVideo');
            dataStorage.selectedVideo = {
-              src: e.src,
+              src: e.videoSrc,
              caption: e.caption,
              like: e.like,
              alt: e.alt,
              format: e.format,
              isLiked: e.isLiked
            }
-            this.displayedDescription = e.description;
+            this.$refs.description.innerHTML = e.content
+        }
+        if (e.type === 'post'){
+          this.$refs.description.innerHTML = e.content
        }
-
        this.selectFile(e);

      },
@@ -418,7 +414,10 @@
          it.isSelected = false;
        })}
        e.isSelected = true;
-        this.displayedDescription = e.description;
+        if (e.description){
+          this.$refs.description.innerHTML = '{{displayedDescription}}'
+          this.displayedDescription = e.description;
+        }
      },
      itemIsClicked(e){
        if (!this.dblClickTimer || this.lastClickedItem !== e){
@@ -474,7 +473,7 @@
      }
    },
    async mounted(){
-      this.linksData = await loadPeopleData();
+      this.linksData = await loadPostData();
      this.target = this.$refs.artistPannel;
      this.dataFirstLoad();
      console.log("Artist pannel is loaded!");
@@ -23,10 +23,10 @@
        <div id="contactText">
          <p>Si tu veux nous contacter directement, tu peux:<br>&emsp;- nous envoyer un mail<br>&emsp;- ou un DM sur insta</p>
        </div>
-        <a href="mailto:drags-nerds@epickiwi.fr" class="textBtnStyle" @touchstart.stop @mousedown.stop>
+        <a href="mailto:drags-nerds@epickiwi.fr" class="textBtnStyle" @touchstart.stop @mousedown.stop target="_blank">
          E-MAIL
        </a>
-        <a href="https://www.instagram.com/drags_nerds/?utm_source=ig_web_button_share_sheet" class="textBtnStyle" @touchstart.stop @mousedown.stop>
+        <a href="https://www.instagram.com/drags_nerds/?utm_source=ig_web_button_share_sheet" class="textBtnStyle" @touchstart.stop @mousedown.stop  target="_blank">
          INSTA
        </a>
      </div>
@@ -20,11 +20,14 @@
        </button>
      </div>
      <div class="windowContent">
-          <p>On a besoin de ton aide ! <br><br> Si tu penses que tu as les moyens<br>de nous faire une petite donation,<br> toute participation est la bienvenue et<br>ça nous aiderait bien à démarrer le projet ^^</p>
+          <p>
+            Aujourd’hui, nous avons besoin<br>d’un coup de pouce pour<br>notre show du 22 mai.<br><br>
+            Cette cagnotte a pour objectif de financer<br>la rémunération des artistes drag et nerd participant·es, de soutenir le travail<br>de l’équipe l’orga, ainsi que d’investir dans le développement de Drags & Nerds<br>afin de vous proposer encore plus d’événements à l’avenir !<br><br>
+            Chaque don compte, vraiment.<br><br>
+            Merci du fond du cœur à tous·tes cell·eux qui prendront le temps de lire, de partager<br>et, bien sûr, de participer !
+          </p>
          <div id="linkRow">
-            <a href="#" class="textBtnStyle">Lydia</a>
-            <a href="#" class="textBtnStyle">Paypal</a>
-            <a href="#" class="textBtnStyle">SumUp</a>
+            <a href="https://pots.lydia.me/collect/pots?id=4298-appel-aux-dons-drags-nerds-2e-edition" class="textBtnStyle" target="_blank" @mousedown.stop @touchstart.stop>Cagnotte Lydia</a>
          </div>
      </div>
    </div>
@@ -76,7 +79,7 @@
  }

  #linkRow .textBtnStyle{
-    width: 27%;
+    width: 77.7%;
    height: 50px;
    margin-bottom: 16.1px;
  }
@@ -104,7 +104,7 @@
    emits: ['close','focus'],
    computed: {
      selectedLink(){
-        console.log(this.selectedLink);
+        //console.log(this.selectedLink);
        return dataStorage.selectedLink
      }
    },
@@ -0,0 +1,112 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+    import LinkIcon from "../assets/icons/link.svg"
+</script>
+
+<template>
+    <div id="livePannel" class="windowStyle" ref="livePannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          Drags&Nerds #2 en DIRECT!
+        </p>
+        <a type="button" @touchstart.capture.prevent="openLive()" ref="liveA" class="closeBtn" href="https://peertube.1312.media/w/jCDFda8rcm8heLwDN2u2HZ" target="_blank" data-tooltip="Ouvrir dans un nouvel onglet">
+          <LinkIcon name="Ouvrir dans une nouvelle fenêtre" class="icon"/>
+        </a>
+        <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">
+        <iframe title="Drags&Nerds #2 en DIRECT" src="https://peertube.1312.media/videos/embed/jCDFda8rcm8heLwDN2u2HZ" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+      </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){}
+  */
+
+  #livePannel{
+    position: fixed;
+    width: 80vw;
+    height: auto;
+    top: 100px;
+    left: min(50px, 10vw);
+    border-radius: 16.1px;
+    max-width: 1300px;
+    background: black;
+  }
+
+  #livePannel .windowContent {
+    position: relative;
+  }
+
+  #livePannel .windowContent::before {
+    content: "";
+    position: absolute;
+    top: -50px;
+    left: 0;
+    width: 100%;
+    height: 25%;
+    z-index: 10;
+  }
+
+  #livePannel iframe {
+    margin-top: -50px;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+  import { dataStorage } from '../dataExchange.js'
+
+  export default {
+    name : 'LivePannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    computed: {
+      selectedVideo(){
+        return dataStorage.selectedVideo
+      }
+    },
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      },
+      openLive(){
+        let clonedNode = this.$refs.liveA.cloneNode(false);
+        clonedNode.click();
+        console.log("Opened live window")
+      }
+    },
+    mounted(){
+      this.target = this.$refs.livePannel;
+      console.log("Live pannel is loaded!");
+    }
+  };
+</script>
@@ -21,7 +21,8 @@
        </button>
      </div>
      <div class="windowContent" id="visualizerContent">
-        <video controls id="displayedImgStyle" :src="selectedVideo.src"></video>
+        <video controls id="displayedImgStyle" :src="selectedVideo.src" :type="selectedVideo.format">
+        </video>
        <div class="reactBar">
          <p class="reactStatStyle">{{selectedVideo.like}}</p>
          <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedVideo.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
@@ -2,6 +2,7 @@
  import PeopleIcon from '../assets/icons/people.svg'
  import InstaIcon from '../assets/icons/insta.svg'
  import ContactIcon from '../assets/icons/contact.svg'
+  import LiveIcon from '../assets/icons/live.svg'
 </script>

 <template>
@@ -42,7 +43,7 @@
          si tu as envie de participer !
          </p>
        <button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
-        <button type="button" class="textBtnStyle" @click="openPannel('donation')" v-show="false">NOUS FAIRE UNE DONATION</button>
+        <button type="button" class="textBtnStyle" @click="openPannel('donation')">NOUS FAIRE UNE DONATION</button>
        <button type="button" class="textBtnStyle" id="ticketButton" @click="openPannel('ticket')" v-show="false">RÉSERVER MA PLACE!</button>
      </div>
      <div id="btnColumn">
@@ -58,6 +59,9 @@
        <button type="button" class="iconBtnStyle" id="btnContact" @click="openPannel('contact')" data-tooltip="nous contacter">
          <ContactIcon name="contact" class="icon"/>
        </button>
+        <button type="button" class="iconBtnStyle" id="btn" @click="openPannel('live')" data-tooltip="Drags&Nerds #2 en DIRECT!">
+          <LiveIcon name="live" class="icon"/>
+        </button>
      </div>
    </div>
    <!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link' 'follow' 'donation'-->
@@ -113,6 +117,12 @@
      @focus="focusPannel('video')"
      :class="{zBase: isFocused!=='video', zFocus: isFocused==='video'}">
    </VideoPan>
+    <LivePan
+      v-show="isActive.includes('live')"
+      @close="closePannel('live')"
+      @focus="focusPannel('live')"
+      :class="{zBase: isFocused!=='live', zFocus: isFocused==='live'}">
+      ></LivePan>
    <LinkPan
      v-show="isActive.includes('link')"
      @close="closePannel('link')"
@@ -315,6 +325,13 @@
    },
    mounted(){
      console.log("Info menu is loaded!");
+      const START_DATE = new Date("2026-05-22T16:00:00.000Z");
+      const END_DATE = new Date("2026-05-23T01:00:00.000Z");
+      const now = Date.now();
+
+      if(now > START_DATE.getTime() && now < END_DATE.getTime()) {
+        this.openPannel('live')
+      }
    }
  };
 </script>
@@ -23,6 +23,7 @@ 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 LivePannel from './indieComponents/LivePannel.vue'
 import LinkPannel from './indieComponents/LinkPannel.vue'
 import DonationPannel from './indieComponents/DonationPannel.vue'
 import TicketPannel from './indieComponents/TicketPannel.vue'
@@ -53,6 +54,7 @@ app.component('MessagePan', MessagePannel);
 app.component('FollowPan', FollowPannel);
 app.component('VisualizerPan', VisualizerPannel);
 app.component('VideoPan', VideoPannel);
+app.component('LivePan', LivePannel);
 app.component('LinkPan', LinkPannel);
 app.component('DonationPan', DonationPannel);
 app.component('TicketPan', TicketPannel);
@@ -20,6 +20,7 @@ export default defineConfig({
      input: {
        main: path.resolve(import.meta.dirname, 'index.html'),
        glitcher: path.resolve(import.meta.dirname, 'glitcher/index.html'),
+        cutter: path.resolve(import.meta.dirname, 'cutter/index.html')
      },
    },
  }
Author	SHA1	Message	Date
epickiwi	5b091c3140	fix d'un bug sur mobile d'ouverture du live	2026-05-21 12:22:59 +02:00
epickiwi	e0ae10c89d	Ajout du live	2026-05-20 23:43:01 +02:00
vgaNAR6ta	12e5befd42	edit: post mastodon V2 en mode plus flexible (v0 un peu schlag mais ça marche x333)	2026-05-09 21:53:31 +02:00
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
vgaNAR6ta	72a96a7d6c	edit: lien contact vers nouvel onglet	2026-04-20 17:45:00 +02:00