Compare commits

...

12 Commits

16 changed files with 462 additions and 46 deletions
+112
View File
@@ -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;
}
+47
View File
@@ -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)
}
})
+30
View File
@@ -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>
+3 -3
View File
@@ -1769,9 +1769,9 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "7.3.1", "version": "7.3.2",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
+6 -1
View File
@@ -1,3 +1,8 @@
[ [
"vga_nar6_ta" "vga_nar6_ta",
"openup42",
"berthasse",
"arlsn",
"djstarheartzzz",
"openup42"
] ]
@@ -6,5 +6,25 @@
{ {
"name": "drags_nerds", "name": "drags_nerds",
"folder": 2 "folder": 2
},
{
"name": "berthasse",
"folder": 1
},
{
"name": "berthasse",
"folder": 0
},
{
"name": "arlsn",
"folder": 1
},
{
"name": "djstarheartzzz",
"folder": 1
},
{
"name": "openup42",
"folder": 1
} }
] ]
+41 -1
View File
@@ -91,7 +91,6 @@ a button{
} }
p{ p{
pointer-events: none;
cursor: inherit; cursor: inherit;
} }
@@ -136,6 +135,7 @@ html, body{
height: 100%; height: 100%;
filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg); filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg);
object-fit: cover; object-fit: cover;
transition: 7.77s ease-in;
} }
#canvas .overlay { #canvas .overlay {
@@ -300,11 +300,16 @@ html, body{
} }
.zFocus{ .zFocus{
z-index: revert;
z-index: 1312; z-index: 1312;
border-color: var(--accent-color); border-color: var(--accent-color);
border-width: thick; border-width: thick;
} }
#artistPannel.zFocus{
z-index: 3333;
}
.windowTitle{ .windowTitle{
width:100%; width:100%;
height:50px; height:50px;
@@ -359,3 +364,38 @@ html, body{
.moveable-control-box { .moveable-control-box {
display: none !important; 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);
}
+14 -5
View File
@@ -10,10 +10,12 @@ function idAndDate(str){
function titleAndContent(str){ function titleAndContent(str){
let data = str.split(" :"); let data = str.split(" :");
let title = "NO_TITLE"; let title = "NO_TITLE";
let contentData = [""];
if (data.length > 1){ if (data.length > 1){
title = data[0]; title = data[0];
} else {
contentData = data[0].split('<br>').filter(e => e);
} }
let contentData = [""];
if (data[1]){ if (data[1]){
contentData = data[1].split('<br>').filter(e => e); contentData = data[1].split('<br>').filter(e => e);
} }
@@ -22,7 +24,7 @@ function titleAndContent(str){
for(let line of contentData){ for(let line of contentData){
if(line.includes('http')||line.includes('@')){ if(line.includes('http')||line.includes('@')){
let linkData = line.split("# "); let linkData = line.split("# ");
console.log(linkData[1]); //console.log(linkData[1]);
let linkNoFormat; let linkNoFormat;
let url = ""; let url = "";
if (linkData[1].includes('http')){ if (linkData[1].includes('http')){
@@ -31,7 +33,7 @@ function titleAndContent(str){
} else if (linkData[1].includes('@')){ } else if (linkData[1].includes('@')){
url = 'mailto:' + linkData[1]; url = 'mailto:' + linkData[1];
} }
console.log("url info", url) //console.log("url info", url)
src.push({ src.push({
caption: linkData[0], caption: linkData[0],
url: url url: url
@@ -87,7 +89,14 @@ export async function loadPeopleData() {
for (const user of pData){ for (const user of pData){
const pouet = filtered.find(p => p.account.username === user.name || p.reblog?.account.username === user.name); const pouet = filtered.find(p => p.account.username === user.name || p.reblog?.account.username === user.name);
if (pouet){ 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, dateInfo: selectedPouet.created_at,
type: "link", type: "link",
author: displayName, author: displayName,
caption: textInfos.title + '.liens', caption: textInfos.title + '.plus',
links: textInfos.links, links: textInfos.links,
description: textInfos.content, description: textInfos.content,
isSelected: false isSelected: false
+149
View File
@@ -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 ImgIcon from '../assets/icons/img.svg'
import LinkIcon from '../assets/icons/link.svg' import LinkIcon from '../assets/icons/link.svg'
import BackIcon from '../assets/icons/back.svg' import BackIcon from '../assets/icons/back.svg'
import { loadPeopleData } from '@/data/peopleData.js' import {loadPostData} from '@/data/postData.js'
</script> </script>
<template> <template>
@@ -36,20 +36,20 @@
<p id="emptyFolderText" v-show="emptyFolder">Oopsi! Il n'y a rien à afficher ici<br>(pour l'instant...)</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 @reload="dataFirstLoad" @click="deselectAll" touchstart="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="openFile(item)" @touchstart="openFile(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"/> <component :is="item.type==='folder'? FolderIcon : item.type === 'post'? TextIcon : ImgIcon" class="icon"/>
<p class="itemCaption">{{item.caption}}</p> <p class="itemCaption">{{item.caption}}</p>
</div> </div>
</div> </div>
<div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @reload="dataFirstLoad" @click="deselectAll" touchstart="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="openFile(item)" @touchstart="openFile(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"/> <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="listTitle">{{item.caption}}</p>
<p class="itemCaption" id="listAuthor">{{item.author}}</p> <p class="itemCaption" id="listAuthor">{{item.author}}</p>
<p class="itemCaption" id="listDate"><time :timedate="item.dateInfo">{{item.date}}</time></p> <p class="itemCaption" id="listDate"><time :timedate="item.dateInfo">{{item.date}}</time></p>
</div> </div>
</div> </div>
<div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.stop> <div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.stop>
<p>{{displayedDescription}}</p> <p id="descText" ref="description">{{displayedDescription}}</p>
</div> </div>
</div> </div>
</div> </div>
@@ -72,7 +72,7 @@
#artistPannel{ #artistPannel{
position: fixed; position: fixed;
width: 420px; width: 420px;
height: 600px; height: auto;
top: 16.1px; top: 16.1px;
left: 16.1px; left: 16.1px;
z-index: 33; z-index: 33;
@@ -80,7 +80,7 @@
#artistContent{ #artistContent{
width:100%; width:100%;
height:87%; height:100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@@ -127,7 +127,7 @@
grid-auto-rows: 150px; grid-auto-rows: 150px;
gap: 16.1px; gap: 16.1px;
width: 97%; width: 97%;
height: 66%; height: 333px;
overflow-y: auto; overflow-y: auto;
align-items: center; align-items: center;
margin-left: 5px; margin-left: 5px;
@@ -137,12 +137,14 @@
.itemDesc{ .itemDesc{
width: 90%; width: 90%;
height: 23%; height: 161px;
border-radius: 16.1px; border-radius: 16.1px;
border-color: var(--main-color); border-color: var(--main-color);
border-style: solid; border-style: solid;
border-width: thin; border-width: thin;
margin-top: 2%; margin-top: 2%;
margin-bottom: 13.12px;
overflow-y: scroll;
color: var(--main-color); color: var(--main-color);
font-family: 'velvelyne'; font-family: 'velvelyne';
@@ -241,7 +243,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
width: 95%; width: 95%;
height: 66%; height: 444px;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
padding-right: 7.77px; padding-right: 7.77px;
@@ -251,6 +253,8 @@
width:100%; width:100%;
height: 33px; height: 33px;
display: flex; display: flex;
flex-shrink: 0;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
@@ -378,36 +382,28 @@
if(e.type === 'image'){ if(e.type === 'image'){
this.$emit('openImg'); this.$emit('openImg');
dataStorage.selectedImg = { dataStorage.selectedImg = {
src: e.src, src: e.imgSrc,
caption: e.caption, caption: e.caption,
like: e.like, like: e.like,
alt: e.alt,
isLiked: e.isLiked isLiked: e.isLiked
} }
this.displayedDescription = e.description; this.$refs.description.innerHTML = e.content
}
if (e.type === 'link'){
this.$emit('openLink');
dataStorage.selectedLink = {
linksData: e.links,
caption: e.caption,
description: e.description
}
console.log(dataStorage.selectedLink);
} }
if(e.type === 'video'){ if(e.type === 'video'){
this.$emit('openVideo'); this.$emit('openVideo');
dataStorage.selectedVideo = { dataStorage.selectedVideo = {
src: e.src, src: e.videoSrc,
caption: e.caption, caption: e.caption,
like: e.like, like: e.like,
alt: e.alt, alt: e.alt,
format: e.format, format: e.format,
isLiked: e.isLiked 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); this.selectFile(e);
}, },
@@ -418,7 +414,10 @@
it.isSelected = false; it.isSelected = false;
})} })}
e.isSelected = true; e.isSelected = true;
this.displayedDescription = e.description; if (e.description){
this.$refs.description.innerHTML = '{{displayedDescription}}'
this.displayedDescription = e.description;
}
}, },
itemIsClicked(e){ itemIsClicked(e){
if (!this.dblClickTimer || this.lastClickedItem !== e){ if (!this.dblClickTimer || this.lastClickedItem !== e){
@@ -474,7 +473,7 @@
} }
}, },
async mounted(){ async mounted(){
this.linksData = await loadPeopleData(); this.linksData = await loadPostData();
this.target = this.$refs.artistPannel; this.target = this.$refs.artistPannel;
this.dataFirstLoad(); this.dataFirstLoad();
console.log("Artist pannel is loaded!"); console.log("Artist pannel is loaded!");
@@ -23,10 +23,10 @@
<div id="contactText"> <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> <p>Si tu veux nous contacter directement, tu peux:<br>&emsp;- nous envoyer un mail<br>&emsp;- ou un DM sur insta</p>
</div> </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 E-MAIL
</a> </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 INSTA
</a> </a>
</div> </div>
@@ -20,11 +20,14 @@
</button> </button>
</div> </div>
<div class="windowContent"> <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>
Aujourdhui, nous avons besoin<br>dun 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 lorga, ainsi que dinvestir dans le développement de Drags & Nerds<br>afin de vous proposer encore plus dévénements à lavenir !<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"> <div id="linkRow">
<a href="#" class="textBtnStyle">Lydia</a> <a href="https://pots.lydia.me/collect/pots?id=4298-appel-aux-dons-drags-nerds-2e-edition" class="textBtnStyle" target="_blank" @mousedown.stop @touchstart.stop>Cagnotte Lydia</a>
<a href="#" class="textBtnStyle">Paypal</a>
<a href="#" class="textBtnStyle">SumUp</a>
</div> </div>
</div> </div>
</div> </div>
@@ -76,7 +79,7 @@
} }
#linkRow .textBtnStyle{ #linkRow .textBtnStyle{
width: 27%; width: 77.7%;
height: 50px; height: 50px;
margin-bottom: 16.1px; margin-bottom: 16.1px;
} }
@@ -104,7 +104,7 @@
emits: ['close','focus'], emits: ['close','focus'],
computed: { computed: {
selectedLink(){ selectedLink(){
console.log(this.selectedLink); //console.log(this.selectedLink);
return dataStorage.selectedLink return dataStorage.selectedLink
} }
}, },
@@ -21,7 +21,8 @@
</button> </button>
</div> </div>
<div class="windowContent" id="visualizerContent"> <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"> <div class="reactBar">
<p class="reactStatStyle">{{selectedVideo.like}}</p> <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"> <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedVideo.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
@@ -42,7 +42,7 @@
si tu as envie de participer ! si tu as envie de participer !
</p> </p>
<button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button> <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> <button type="button" class="textBtnStyle" id="ticketButton" @click="openPannel('ticket')" v-show="false">RÉSERVER MA PLACE!</button>
</div> </div>
<div id="btnColumn"> <div id="btnColumn">
+1
View File
@@ -20,6 +20,7 @@ export default defineConfig({
input: { input: {
main: path.resolve(import.meta.dirname, 'index.html'), main: path.resolve(import.meta.dirname, 'index.html'),
glitcher: path.resolve(import.meta.dirname, 'glitcher/index.html'), glitcher: path.resolve(import.meta.dirname, 'glitcher/index.html'),
cutter: path.resolve(import.meta.dirname, 'cutter/index.html')
}, },
}, },
} }