tunnel: intiation de la com officielle

major_edits: mail dans liens + graff overlay + simple click dans panneau 
'à propos'

v1-com-officielle/index.html

@@ -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">

v1-com-officielle/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "vite-svg-loader": "^5.1.1",
         "vue": "^3.5.25",
+        "vue3-clipboard": "^1.0.0",
         "vue3-moveable": "^0.28.0"
       },
       "devDependencies": {
@@ -1068,6 +1069,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 +1251,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 +1433,15 @@
         "@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/keycode": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
@@ -1513,9 +1540,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
+      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1647,6 +1674,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 +1732,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",
@@ -1825,6 +1864,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",

v1-com-officielle/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "vite-svg-loader": "^5.1.1",
     "vue": "^3.5.25",
+    "vue3-clipboard": "^1.0.0",
     "vue3-moveable": "^0.28.0"
   },
   "devDependencies": {

v1-com-officielle/public/DATA/peopleData.json

@@ -2,5 +2,9 @@
   {
     "name": "vega",
     "folder": 2
+  },
+  {
+    "name": "Drags and Nerds /",
+    "folder": 2
   }
 ]

v1-com-officielle/public/favicon.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 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>

v1-com-officielle/public/helperFunctions.js

@@ -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;

v1-com-officielle/public/main.js

@@ -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){
-// Start the animation loop
   isPlaying = true;
-refreshPattern();
+  refreshPattern(seed);
   updateUniforms();
   animationID = requestAnimationFrame(render);
+}
+
+// Start the animation loop
+refreshBackground(506);

v1-com-officielle/src/App.vue

@@ -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;

v1-com-officielle/src/assets/icons/afaG.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 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>

v1-com-officielle/src/assets/icons/loveG.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>

v1-com-officielle/src/assets/icons/msg.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 40.19 38.9">
-  <path d="M34.25,0H0v38.9h40.19V0h-5.94ZM31.49,5.28l-11.38,21.74L8.85,5.28h22.63ZM7.89,33.62h-2.61V9.97l12.1,23.65H7.89ZM32.3,33.62h-9.44l12.04-23.37v23.37h-2.61Z"/>
+  <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>

v1-com-officielle/src/assets/icons/tsG.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>

v1-com-officielle/src/assets/style.css

@@ -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;
+  --neon-color: black;
 }
 
 /*=============Typo*/
@@ -38,11 +40,11 @@
 /*===================Animation*/
 @keyframes blink {
   0%   { color: var(--accent-color);}
-  15%  { color: #000000;}
+  15%  { color: var(--main-color);}
-  35%  { color: #000000;}
+  35%  { color: var(--main-color);}
   50%  { color: var(--accent-color);}
-  65%  { color: #000000;}
+  65%  { color: var(--main-color);}
-  85%  { color: #000000;}
+  85%  { color: var(--main-color);}
   100%  { color: var(--accent-color);}
 }
 
@@ -304,7 +306,7 @@ canvas {
 
 .windowTitleLower{
   font-family: 'velvelyne';
-  font-weight: lighter;
+  font-weight: bold;
   font-size: 13.12px;
 }
 

v1-com-officielle/src/components/TitleContent.vue

@@ -23,7 +23,7 @@
     background-color: transparent;
     width:100%;
     position: relative;
-    height:100%;
+    height:117%;
     display: flex;
     flex-direction: column;
     align-items: center;

v1-com-officielle/src/data/audioData.js

@@ -25,7 +25,7 @@ export async function loadAudioData() {
 
   const pouets = await res.json();
   const filtered = pouets.filter(p => aData.some(user => p.account.display_name === user));
-  console.log(filtered);
+  //console.log(filtered);
   const files = {};
   for (const user of aData) {
     files[user] = [];
@@ -51,6 +51,6 @@ export async function loadAudioData() {
     }
   }
 
-  console.log(audioFiles);
+  //console.log(audioFiles);
   return audioFiles
 }

v1-com-officielle/src/data/msgData.js

@@ -28,7 +28,7 @@ export async function loadMsgData() {
 
   const pouets = await res.json();
   const filtered = pouets.filter(p => p.account.display_name === 'Drags and Nerds /Live');
-  console.log(filtered);
+  //console.log(filtered);
 
   let msgContent = [];
 

v1-com-officielle/src/data/peopleData.js

@@ -14,14 +14,18 @@ function titleAndContent(str){
   let content = "";
   let src = [];
   for(let line of contentData){
-    if(line.includes('http')){
+    if(line.includes('http')||line.includes('@')){
-      let linkData = line.split("@");
+      let linkData = line.split("# ");
+      console.log(linkData);
       let linkNoFormat = linkData[1].split("\"");
       let url = "";
       for(let el of linkNoFormat){
         if(el.includes('http')){
           url = el;
           break
+        } else if(el.includes('@')){
+          url = 'mailto:' + el;
+          break
         } else {
           continue
         }
@@ -36,21 +40,38 @@ function titleAndContent(str){
   }
   return {
     title: title,
-    content: content,
+    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 and Nerds /") return true;
+  if (user === "Drags and Nerds /"){
+    if(key != "c2VuZF9tZXNzYWdlX3RvX3dlYnNpdGU="){
+      return true;
+    }
+  }
+  return false;
+}
+
 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.display_name === user.name));
+  //console.log("FILTERED :" , filtered);
   const files = {};
   for (const user of pData) {
     files[user.name] = [];
@@ -73,10 +94,16 @@ export async function loadPeopleData() {
         !pouet.media_attachments[0].type.includes('image')) {
       continue;
     }
-
+    //ignorer réponses
     if (pouet.in_reply_to_account_id) {
       continue;
     }
+    //ignorer exceptions
+    let exception = exceptionKey(username, pouet.content);
+    //console.log(exception)
+    if(exception){
+      continue;
+    }
 
     if (pouet.content.includes('http')) {
       let textInfos = titleAndContent(pouet.content);

v1-com-officielle/src/indieComponents/ArtistPannel.vue

@@ -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>
+        <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 @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
+        <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="itemIsClicked(item)">
+          <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 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="itemIsClicked(item)">
+          <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">{{item.author}}</p>
+            <p class="itemCaption" id="listAuthor">{{item.author}}</p>
-            <p class="itemCaption"><time :timedate="item.dateInfo">{{item.date}}</time></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,7 +71,7 @@
 
   #artistPannel{
     position: fixed;
-    width: 333px;
+    width: 380px;
     height: 500px;
     top: 16.1px;
     left: 16.1px;
@@ -111,6 +111,7 @@
   #emptyFolderText{
     align-self:center;
     margin-top: 33px;
+    margin-left: 0;
     pointer-events: none;
     color: var(--accent-color);
     font-family: 'lineal';
@@ -268,7 +269,7 @@
   .listItemStyle .icon{
     height: 16.1px;
     width: 33px;
-    margin-left: 16.1px;
+    margin-left: 3.33px;
     margin-right: 16.1px;
     margin-top: 0;
   }
@@ -276,7 +277,7 @@
   .listItemStyle .itemCaption{
     font-family: 'velvelyne';
     font-weight: bold;
-    font-size: 16.1px;
+    font-size: 13.12px;
     pointer-events: none;
     cursor:inherit;
     width: 20%;
@@ -293,6 +294,14 @@
     width: 50%;
   }
 
+  #listAuthor{
+    width: 33%;
+  }
+
+  #listDate{
+    width: 33px;
+  }
+
 </style>
 
 <script>
@@ -328,7 +337,7 @@
       },
       dataFirstLoad(){
         this.displayedItems = [...this.linksData];
-        console.log(this.displayedItems);
+        //console.log(this.displayedItems);
         this.isNotRoot = false;
         this.checkEmptyFolder();
         this.deselectAll();
@@ -343,7 +352,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;
         }
@@ -381,14 +390,14 @@
             caption: e.caption,
             description: e.description
           }
-          console.log(dataStorage.selectedLink);
+          //console.log(dataStorage.selectedLink);
         }
 
         this.selectFile(e);
 
       },
       selectFile(e){
-        console.log(e);
+        //console.log(e);
         if(!this.emptyFolder){
           this.displayedItems.forEach(it => {
           it.isSelected = false;
@@ -404,7 +413,7 @@
             this.selectFile(e);
             this.dblClickTimer = null;
             this.lastClickedItem = null;
-          }, 200);
+          }, 161);
         }else{
           clearTimeout(this.dblClickTimer);
           this.dblClickTimer = null;
@@ -442,7 +451,7 @@
         if (this.rootDepth === 0){
           this.isNotRoot = false;
         }
-        console.log(this.rootDepth);
+        //console.log(this.rootDepth);
       },
       closeClicked(){
         this.dataFirstLoad();

v1-com-officielle/src/indieComponents/ContactPannel.vue

@@ -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>
           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>
           INSTA
         </a>
       </div>

v1-com-officielle/src/indieComponents/FollowPannel.vue

@@ -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!");
     }
   };

v1-com-officielle/src/indieComponents/GraffOverlay.vue

@@ -0,0 +1,174 @@
+<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="#infoMenuContainer" 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: -161%;
+    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;
+  }
+  /*================ TINY PHONE*/
+  @media(max-width:350px){
+    #TsContainer{
+      top: -133%;
+    }
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #TsContainer{
+      top: 50px;
+      left: -144%;
+    }
+    #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>

v1-com-officielle/src/indieComponents/Infobulle.vue

@@ -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>
@@ -92,7 +92,7 @@
 
         this.hideTimer = setTimeout(() => {
           this.hideBubble();
-        }, 3333)
+        }, 1312)
       },
       hideBubble(){
         this.isActive = false

v1-com-officielle/src/indieComponents/InstaPannel.vue

@@ -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>

v1-com-officielle/src/indieComponents/VisualizerPannel.vue

@@ -22,7 +22,6 @@
       </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">
@@ -30,6 +29,7 @@
           </button>
         </div>
       </div>
+    </div>
 </template>
 
 <style scoped>
@@ -55,6 +55,10 @@
     border-radius: 16.1px;
   }
 
+  #visualizerContent{
+    align-items: flex-start;
+  }
+
   #displayedImgStyle{
     width:100%;
     height:auto;

v1-com-officielle/src/infoComponents/InboxContent.vue

@@ -8,7 +8,10 @@
     <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"/>
@@ -48,7 +51,7 @@
   #inboxContainer{
     width:100%;
     position:relative;
-    height:50%;
+    height:33.3%;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -56,7 +59,7 @@
   }
   #inboxHeader{
     width: 100%;
-    height: 20%;
+    height: 100px;
     position: relative;
     background-color: var(--accent-color);
     color: black;
@@ -68,10 +71,16 @@
   }
 
   #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;
@@ -146,7 +155,7 @@
 
   .msgTitle{
     padding-left: 33px;
-    width: 47%;
+    width: 77%;
     font-size: 16.1px;
     align-items: center;
     opacity: 0.333;
@@ -163,7 +172,7 @@
   .msgReact{
     padding-right: 33px;
     padding-top:16.1px;
-    width: 47%;
+    width: 16.1%;
     height: 33.3%;
     display: flex;
     flex-direction: row;
@@ -253,7 +262,7 @@
     },
     async mounted(){
       this.msgList = await loadMsgData();
-      console.log(this.msgList);
+      //console.log(this.msgList);
       this.msgNumber = this.msgList.length
       console.log("Inbox content is loaded!");
     }

v1-com-officielle/src/infoComponents/InfoMenu.vue

@@ -8,10 +8,38 @@
     <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.
+          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>
       </div>
@@ -101,7 +129,7 @@
   #infoMenuContainer{
     width:100%;
     position:relative;
-    height:40%;
+    height:55%;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -133,7 +161,7 @@
 
   #welcomeTextContainer{
     width:77%;
-    height:100%;
+    height:90%;
     background-color: transparent;
     position: relative;
     padding: 16.1px;
@@ -144,14 +172,23 @@
   }
 
   #welcomeText{
-    overflow-y: scroll;
+    pointer-events: all;
-    height: 73%;
+    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{
@@ -176,7 +213,7 @@
   /*================ PC LARGE*/
   @media(min-width:1300px){
     #welcomeText{
-      height:71%;
+      height:80%;
     }
 
     #btnColumn .iconBtnStyle{
@@ -184,6 +221,9 @@
       margin-left: -13.12%;
       margin-top: 13.12%;
     }
+    #welcomeText strong{
+      font-size: 22.2px;
+    }
 
   }
 </style>
@@ -191,6 +231,7 @@
 <script>
   export default {
     name : 'InfoMenu',
+    emits: ['closeInfo'],
     data(){
       return{
         isActive: [],
@@ -198,12 +239,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)){

v1-com-officielle/src/main.js

@@ -26,6 +26,8 @@ import LinkPannel from './indieComponents/LinkPannel.vue'
 
 import Infobubble from './indieComponents/Infobulle.vue'
 
+import GraffOverlay from './indieComponents/GraffOverlay.vue'
+
 // création app racine
 const app = createApp(App);
 
@@ -51,7 +53,7 @@ app.component('LinkPan', LinkPannel);
 
 app.component('Infobulle', Infobubble);
 app.component('ColorPan', ColorBtn);
-
+app.component('GraffOver', GraffOverlay);
 
 //Montage dans div#app de index.html
 app.mount('#app');

v1-com-officielle/src/titleComponents/ColorBtn.vue

@@ -122,6 +122,7 @@
 <script>
   export default {
     name : 'InfoContent',
+    emits: ['themeDark', 'themeLight'],
     data(){
       return{
         isChecked: false
@@ -131,9 +132,11 @@
       toggleTheme(){
         if(this.isChecked){
           this.isChecked = false;
+          this.$emit('themeLight');
           return document.documentElement.setAttribute("data-theme", "light")
         }else{
           this.isChecked = true;
+          this.$emit('themeDark');
           return document.documentElement.setAttribute("data-theme", "dark")
         }
       }

v1-com-officielle/src/titleComponents/GeneratedContent.vue

@@ -14,7 +14,7 @@
       </div>
     </div>
     <PlayerDiv></PlayerDiv>
-    <ColorPan></ColorPan>
+    <ColorPan ref="colorBtn"></ColorPan>
     <button type="button" name="reload" data-tooltip="recharger" id="reloadBtnStyle" class="iconBtnStyle" @click="startContentReload">
       <ReloadIcon name="close" class="icon"/>
     </button>
@@ -37,7 +37,7 @@
   #generatedContainer{
     background-color: transparent;
     width:100%;
-    height:90%;
+    height:70%;
     position:relative;
   }
 
@@ -94,7 +94,7 @@
 
   .imgStyle{
     position: absolute;
-    width:77px;
+    width:100px;
     height:auto;
     z-index:-1;
     border-style: solid;
@@ -103,13 +103,13 @@
   }
   .imgStyle.highlightItem{
     border-color: transparent;
-    width:117px;
+    width:131.2px;
     height:auto;
     z-index:-1;
   }
   .imgStyle.highlightMax{
     border-color: transparent;
-    width:200px;
+    width:250px;
     height:auto;
     z-index:-1;
   }
@@ -166,7 +166,7 @@
           isHighlight: 0
         })),
         randomImgList: null,
-        marjTop:0,
+        marjTop:77,
         marjBot:161,
         marjSide:200,
         overlayIsActive: false
@@ -193,7 +193,7 @@
         do{
           c = this.getRandomInt(0,imgCount);
         } while (a == c || c == b);
-        console.log(a,b,c);
+        //console.log(a,b,c);
         this.randomImgList[a].isHighlight = 1;
         this.randomImgList[b].isHighlight = 1;
         this.randomImgList[c].isHighlight = 2;
@@ -213,7 +213,7 @@
           chain[i].y = y;
           //calc nouvelle position
             // distance contrôlée
-          const distance = this.getRandomInt(100, this.marjSide);
+          const distance = this.getRandomInt(161, 333);
           // perturbation continue
           dirX += (Math.random() - 0.5) * 1.2;
           dirY += (Math.random() - 0.5) * 0.5;
@@ -256,14 +256,14 @@
         this.randomImgList = structuredClone(toRaw(this.imgList)).sort(() => Math.random()-0.5);
         this.selectHighlight();
         this.genCoord(this.randomImgList);
-        console.log('Layout has been generated!');
+        //console.log('Layout has been generated!');
       },
       async reloadAnimation(){
         this.overlayIsActive = true;
-        for (let i = 0; i < 34; i++) {
+        for (let i = 0; i < 3; i++) {
           this.generateContent();
-          await this.delay(44);
+          await this.delay(333);
-          if(i===33){
+          if(i===2){
             this.overlayIsActive = false;
           };
         }
@@ -283,7 +283,7 @@
         const rect = entries[0].contentRect;
         this.containerWidth = rect.width;
         this.containerHeight = rect.height;
-        console.log(rect.width, rect.height);
+        //console.log(rect.width, rect.height);
         this.generateContent();
       });
       observer.observe(displayContainer);

v1-com-officielle/src/titleComponents/MusicPlayer.vue

@@ -123,7 +123,7 @@
     },
     methods:{
       loadAudio(){
-        console.log(this.target);
+        //console.log(this.target);
         this.target.pause();
         this.selectedSong = this.audioData[this.trackCount];
         this.audioFile = this.selectedSong.src;
@@ -147,7 +147,7 @@
         if (this.trackCount<0){
           this.trackCount = this.audioData.length - 1;
         }
-        console.log('prev:', this.trackCount);
+        //console.log('prev:', this.trackCount);
         this.loadAudio();
       },
       nextTrack(){
@@ -155,14 +155,14 @@
         if (this.trackCount>=this.audioData.length){
           this.trackCount = 0;
         }
-        console.log('next:', this.trackCount);
+        //console.log('next:', this.trackCount);
         this.loadAudio();
       }
     },
     async mounted(){
       this.audioData = await loadAudioData();
       this.target = this.$refs.selectedAudio;
-      console.log('AUDIO/', this.audioData);
+      //console.log('AUDIO/', this.audioData);
       this.loadAudio();
       console.log("Music player is loaded!");
     }

v1-com-officielle/src/titleComponents/TitleText.vue

@@ -17,17 +17,20 @@
         <TwoGraff name="graffTwo" class="numberTwo" id="graffTwo"/>
         <TwoExtra name="extraTwo" class="numberTwo" id="extraTwo"/>
         <div class="subtitleTextStyle">
-          <p id="subAccent">Drag shows + musique électronique,<br>synthés vidéos et autre performances nerds</p>
+          <p id="subAccent">Drag shows + musique électronique,<br>synthés vidéos et autres performances nerds</p>
+          <p>Thème / cyberpunk vs solarpunk</p>
         </div>
         <div id="infoContainer">
           <div class="subtitleTextStyle">
-            <time datetime="2026-05-22T16:00" id="timeInfo">
+            <time datetime="2026-05-22T18:00" id="timeInfo">
               <p><strong>22 Mai</strong></p>
               <p>2026</p>
               <p>
-              &emsp;&emsp;&emsp;&emsp;&emsp;&ensp;16h00
+              &emsp;&emsp;&emsp;&ensp;18h/ Forum
               <br>
-              &emsp;&emsp;&emsp;&emsp;&emsp;&emsp; - 01h00
+              20h/ Début des shows
+              <br>
+              &emsp;&emsp;&emsp; &rarr; &rarr; &rarr; jusqu'à 1h
               </p>
             </time>
           </div>
@@ -75,8 +78,10 @@
     width: auto;
     margin-left: 285px;
     margin-top: -99px;
-    animation: blink 3.33s infinite;
+    animation: none;
+    color: var(--neon-color);
     mix-blend-mode: exclusion;
+    transition: 3.33s ease;
   }
 
   /*================ PC HAUT/IPAD*/
@@ -209,6 +214,10 @@
     justify-content: flex-start;
   }
 
+  #placeInfo a:hover{
+  color: var(--accent-color);
+  }
+
   /*================ MID FORMAT*/
   @media(min-width:650px){
     .titleTextStyle{