edit: position logo ts + correction z-index, filtrage par username, gamme colorée adaptée + changement du fond avec le thème

This commit is contained in:
2026-04-08 05:32:16 +02:00
parent 195fd10424
commit 275fd74ca9
14 changed files with 44 additions and 38 deletions
+1 -1
View File
@@ -1,3 +1,3 @@
[
"vega"
"vga_nar6_ta"
]
@@ -1,10 +1,10 @@
[
{
"name": "vega",
"name": "vga_nar6_ta",
"folder": 2
},
{
"name": "Drags and Nerds /",
"name": "drags_nerds",
"folder": 2
}
]
+2 -1
View File
@@ -10,7 +10,7 @@
:root[data-theme="light"]{
--back-color: white;
--main-color: black;
--accent-color: #C303FF;
--accent-color: #FFA64D;
--neon-color: black;
}
@@ -134,6 +134,7 @@ html, body{
#canvas video {
width: 100%;
height: 100%;
filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg);
object-fit: cover;
}
+1 -1
View File
@@ -24,7 +24,7 @@ export async function loadAudioData() {
if(!res.ok) throw new Error(`Server responded with ${res.status} ${res.statusText}`);
const pouets = await res.json();
const filtered = pouets.filter(p => aData.some(user => p.account.display_name === user));
const filtered = pouets.filter(p => aData.some(user => p.account.username === user));
//console.log(filtered);
const files = {};
for (const user of aData) {
+1 -1
View File
@@ -27,7 +27,7 @@ export async function loadMsgData() {
if(!res.ok) throw new Error(`Server responded with ${res.status} ${res.statusText}`);
const pouets = await res.json();
const filtered = pouets.filter(p => p.account.display_name === 'Drags and Nerds /Live');
const filtered = pouets.filter(p => p.account.username === 'drags_nerds_live');
//console.log(filtered);
let msgContent = [];
+14 -13
View File
@@ -56,8 +56,8 @@ function exceptionKey(user, content){
let key = "";
if (data.length > 1) key = data[1].split('<br>')[0];
//console.log(key);
if (key === "bm90X3dlYnNpdGVfY29udGVudA==" && user !=="Drags and Nerds /") return true;
if (user === "Drags and Nerds /"){
if (key === "bm90X3dlYnNpdGVfY29udGVudA==" && user !=="drags_nerds") return true;
if (user === "drags_nerds"){
if(key != "c2VuZF9tZXNzYWdlX3RvX3dlYnNpdGU="){
return true;
}
@@ -75,23 +75,24 @@ export async function loadPeopleData() {
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);
console.log("POUETS :" , pouets);
const filtered = pouets.filter(p => pData.some(user => p.account.username === user.name));
console.log("FILTERED :" , filtered);
const files = {};
for (const user of pData) {
files[user.name] = [];
}
const description = {};
for (const user of pData){
const pouet = filtered.find(p => p.account.display_name === user.name);
const pouet = filtered.find(p => p.account.username === user.name);
if (pouet){
description[user.name] = pouet.account.note;
}
}
for (const pouet of filtered) {
const username = pouet.account.display_name;
const username = pouet.account.username;
const displayName = pouet.account.display_name;
let infos = idAndDate(pouet.created_at);
let entry;
//console.log(pouet);
@@ -114,11 +115,11 @@ export async function loadPeopleData() {
if (pouet.content.includes('http')) {
let textInfos = titleAndContent(pouet.content);
entry = {
id: 'link' + username + infos.id,
id: 'link' + displayName + infos.id,
date: infos.date,
dateInfo: pouet.created_at,
type: "link",
author: username,
author: displayName,
caption: textInfos.title + '.liens',
links: textInfos.links,
description: textInfos.content,
@@ -128,11 +129,11 @@ export async function loadPeopleData() {
let textInfos = titleAndContent(pouet.content);
console.log(pouet);
entry = {
id: 'img' + username + infos.id,
id: 'img' + displayName + infos.id,
date: infos.date,
dateInfo: pouet.created_at,
type: "image",
author: username,
author: displayName,
caption: textInfos.title + '.star',
src: pouet.media_attachments[0].url,
alt: pouet.media_attachments[0].description,
@@ -143,11 +144,11 @@ export async function loadPeopleData() {
} else {
let textInfos = titleAndContent(pouet.content);
entry = {
id: 'txt' + username + infos.id,
id: 'txt' + displayName + infos.id,
date: infos.date,
dateInfo: pouet.created_at,
type: "text",
author: username,
author: displayName,
caption: textInfos.title + '.msg',
description: textInfos.content,
isSelected: false
@@ -71,10 +71,11 @@
#artistPannel{
position: fixed;
width: 380px;
height: 500px;
width: 420px;
height: 600px;
top: 16.1px;
left: 16.1px;
z-index: 33;
}
#artistContent{
@@ -123,14 +124,15 @@
.theMatrix{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: 133px;
gap: 10px;
grid-auto-rows: 150px;
gap: 16.1px;
width: 97%;
height: 66%;
overflow-y: auto;
align-items: center;
margin-left: 5px;
margin-top: 5px;
padding-top: 10px;
}
.itemDesc{
@@ -8,7 +8,7 @@
</script>
<template>
<Teleport to="#infoMenuContainer" defer>
<Teleport to="#playerContainer" defer>
<div class="graffContainer" id="TsContainer">
<TsGraff name="graffTs" class="graff" id="graffTs"/>
<TsNeon name="neonTs" class="neon" id="neonTs"/>
@@ -63,7 +63,7 @@
}
#TsContainer{
top: -155%;
top: 66px;
left: 131.2px;
}
#graffTs{
@@ -106,17 +106,12 @@
margin-left: -7.77px;
margin-top: -7.77px;
}
/*================ TINY PHONE*/
@media(max-width:350px){
#TsContainer{
top: -133%;
}
}
/*================ PC LARGE*/
@media(min-width:1300px){
#TsContainer{
top: 50px;
left: -144%;
top: 55px;
left: 300px;
}
#graffTs{
width: 100px;
@@ -56,6 +56,7 @@
flex-direction: column;
align-items: center;
justify-content: flex-start;
z-index: 33;
}
#inboxHeader{
width: 100%;
@@ -60,7 +60,7 @@
</button>
</div>
</div>
<!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link'-->
<!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link' 'follow' 'donation'-->
<InboxDiv @open="openPannel('msg')"></InboxDiv>
<ArtistPan
v-show="isActive.includes('artist')"
@@ -148,6 +148,7 @@
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
z-index: 33;
}
#btnColumn{
@@ -125,7 +125,8 @@
emits: ['themeDark', 'themeLight'],
data(){
return{
isChecked: false
isChecked: false,
target: null
}
},
methods:{
@@ -133,15 +134,18 @@
if(this.isChecked){
this.isChecked = false;
this.$emit('themeLight');
this.target.style.filter = 'invert(1) saturate(333%) brightness(93%) hue-rotate(90deg)'
return document.documentElement.setAttribute("data-theme", "light")
}else{
this.isChecked = true;
this.$emit('themeDark');
this.target.style.filter = 'invert(0) saturate(161%) brightness(117%) hue-rotate(1.61deg)'
return document.documentElement.setAttribute("data-theme", "dark")
}
}
},
mounted(){
async mounted(){
this.target = await document.querySelector('#canvas video');
console.log("Theme button is loaded!");
}
};
@@ -4,7 +4,7 @@
<template>
<div id="generatedContainer" ref="generatorContainer">
<div class="loadingOverlay" v-show="overlayIsActive"><p id="loadingOText">ça charge...</p></div>
<div class="loadingOverlay" v-show="false"><p id="loadingOText">ça charge...</p></div>
<div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" v-for="item in randomImgList" :key="item.id" :style="{
left: item.x + 'px',
top: item.y + 'px'
@@ -52,6 +52,7 @@
align-items: center;
justify-content: flex-start;
padding-top: 13.12px;
z-index: 0;
}
#playerContainer .iconBtnStyle{
@@ -30,7 +30,7 @@
<br>
20h/ Début des shows
<br>
&emsp;&emsp;&emsp; &rarr; &rarr; &rarr; jusqu'à 1h
&emsp;&emsp; &rarr; &rarr; &rarr; jusqu'à 1h
</p>
</time>
</div>