edit: ajout du 2 animé + MAXI REGLAGE (responsive, couleur, positionnement etc.) + ajout vue liste panneau dans panneau à propos + likes dans images + class gen reactBar

This commit is contained in:
vgaNAR6ta committed 2026-03-23 09:05:45 +01:00
1 parent 7ccede8b51
commit e399584e4b
14 files changed
+307 -74

No files matched your search

+19 -2
View File
@@ -1,25 +1,31 @@
[
{
"type": "folder",
"date": "33/33",
"isSelected": false,
"caption": "Artistes DRAGs",
"description": "Si tu veux en savoir plus sur nos artistes drags, c'est par ici !",
"children": [
{
"type": "folder",
"date": "33/33",
"isSelected": false,
"caption": "Urazoria",
"description": "Urazoria est une Drag Creature de Limoges, et aussi une des fondatrice de drags & nerds, host de la 1ère édition",
"children": [
{
"type": "image",
"date": "33/33",
"isSelected": false,
"caption": "Urazoria003.star",
"description": "Urazoria dans son show à XXXX pour XXXX en 2025",
"src":"./DATA/Images/ura-bleu.png"
"src":"./DATA/Images/ura-bleu.png",
"like": 0,
"isLiked": false
},
{
"type": "text",
"date": "33/33",
"isSelected": false,
"caption": "Urazoria.loveMsg",
"description": "Coucou !"
@@ -28,6 +34,7 @@
},
{
"type": "text",
"date": "33/33",
"isSelected": false,
"caption": "Urazoria.loveMsg",
"description": "Coucou !"
@@ -36,18 +43,21 @@
},
{
"type": "folder",
"date": "33/33",
"isSelected": false,
"caption": "Artistes NERDs",
"description": "Si tu veux en savoir plus sur nos artistes nerds, c'est par là !",
"children": [
{
"type": "folder",
"date": "33/33",
"isSelected": false,
"caption": "Théo",
"description": "Theo est un musicien qui construit des synthés modulaires",
"children": [
{
"type": "link",
"date": "33/33",
"isSelected": false,
"caption": "Theo.web",
"description": "Réseaux de Theo",
@@ -64,6 +74,7 @@
},
{
"type": "text",
"date": "33/33",
"isSelected": false,
"caption": "Theo.loveMsg",
"description": "Hello !"
@@ -74,12 +85,14 @@
},
{
"type": "folder",
"date": "33/33",
"isSelected": false,
"caption": "Autres",
"description": "Dans ce dossier on met en vrac plein de trucs, qu'on trouve cool, sur nous (ou pas), nos valeurs etc. Allez fouiller si vous avez le temps ^^",
"children": [
{
"type": "link",
"date": "33/33",
"isSelected": false,
"caption": "Background.web",
"description": "Site internet du fond animé, en open source, allez checker ça l'équipe ! (et payer un café à son créateur si vous pouvez hihi)",
@@ -92,16 +105,20 @@
},
{
"type": "text",
"date": "33/33",
"isSelected": false,
"caption": "DNN.loveMsg",
"description": "Hello again!"
},
{
"type": "image",
"date": "33/33",
"isSelected": false,
"caption": "Urazoria003.star",
"description": "Urazoria dans son show à XXXX pour XXXX en 2025",
"src":"./DATA/Images/ura-vert.png"
"src":"./DATA/Images/ura-vert.png",
"like": 0,
"isLiked": false
}
]
}
@@ -0,0 +1,45 @@
<?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 167.96 184.75">
<path d="M93.22,10.93c.43-.38.79-.29,1.24,0-.1-.8.66-1.39,1.42-1.37,1,.02,2.53,1.4,1.3,2.24,1.11.38,3.51,0,2.78,1.86l1,.99c.36-.45.53-.53,1.11-.49,1.78.11,1.92,2.15.6,2.95-.43.26-.9.18-1.16.51.38.09.77.48.87.87.87-.74,2.78.56,2.38,1.58l-1.2,1.64c-.04.69-.12.99-.68,1.42,0,.17,1.98.71,1.55,2.05-.11.34-.7.67-.67.9.09.59.54.38.88.48.18.05.3.32.39.32.05,0,.24-.21.5-.23.73-.05.87.4,1.31.68.14.09.37.07.55.19.68.43.77,1.1.06,1.56-.8.52-.88-.1-1.2-.16-.15-.03-.44.13-.72.1-.31-.04-.48-.31-.65-.34-.31-.05-.75.26-1.16-.16-.3.69-1.22,1.37-1.98,1.49,1.08.77.22,2.26-.92,2.1-.26-.04-.74-.39-.94-.3-.37.37-.44.75-.86,1.11-.33.29-1.04.52-1.2.71-.19.22-.28.9-.44,1.23-1.62,3.3-4.16,5.98-6.34,8.89-.27.57.69,1.58.95,2.14,1.64,3.54,1.5,8.43.44,12.12-.15.5-.67,1.21-.68,1.29-.03.17.11.43.05.8-.08.43-1.3,2.7-1.19,2.84,1.45-.74,3-1.26,3.96-2.66.44-.64.62-1.82,1.61-1.92-.74-.64-.12-1.42.09-2.19.07-.25,0-.55.06-.81.12-.5,1.19-1.31,1.22-1.64.06-.58-.92-.51-.72-1.82.17-1.12.75-2.24,1.58-3,1.24-1.13,2.47-1.63,3.66-.07.85,1.12.65,2.02.43,3.29-.13.73-.22,1.45-.43,2.17-.57,1.97-1.55,3.91-2.3,5.81l1.62-1.42,2.77-3.05c.51-.42,1.27.31,1.32.81.08.8-.52.78-.61,1.14-.08.29.18.59.09.93-.17.6-1.3.89-1.48,1.13-.15.21-.08.47-.18.69-.46.98-1.71.48-1.9.64l-.25.64c.78.46.46,1.59,1.35,1.81-.59-1.67,1.42-2.36,2.48-3.19.33-.31.02-.66.18-1.02.07-.15.68-.71.87-.74.49-.09,1.75.38,1.97.87.31.68-.19,1.4-.17,1.53.04.22.57.32.49.88-.05.35-1.26,1.6-1.74,1.06-.03.59-.68,1.58-1.17,1.87-.38.22-.68.35-1.12.61-.9.55-1.85,1.05-2.87,1.34-2.22.61-4.46,1.58-6.72,2.31-.59.19-2.83.89-3.27.81-.92-.17-.79-1.75-1.36-1.73-.16,0-.31.21-.5.24-.84.14-1.81-.19-2.28.62.7-.11.88.62,1.34.95,1.48,1.06,6.31,2.5,8.13,2.64,1.01.08,2.09-.35,2.72.62.25-.19.41-.55.75-.61.42-.08,2.22-.06,2.72-.01.27.03.49.26.6.25.27-.05,1.1-1.26,1.75-.24.25-.48,1.52-.48,1.96-.34.29.09.37.56.95.28.4-.19.22-.57,1.05-.57,1.41.01,2.66,1.02,1.67,2.42-.38.54-1.23,1.11-1.83,1.39-.16.07-.43,0-.65.1-.25.11-.53.54-1.02.72-.36.13-2.65.72-2.85.68-.1-.02-.22-.19-.28-.19-.08,0-.21.26-.4.32-.98.31-4.43.42-5.39.12-.18-.06-.31-.32-.4-.31-.07,0-.36.24-.87.22-2.83-.15-5.16-1.9-7.53-3-.74-.34-1.54-.6-2.32-.84.25,1.48,1.15,3.56,1.13,5.02,0,.36-.22.51-.23.71-.13,2.9.39,7.39-.72,9.99-.51,1.19-1.63,2.18-2.72,2.85-.55.34-1.55.59-2.16.31-.06-.03-.96-.91-1-.98-.45-.79.66-2.42.97-3.25.83-2.24,1.71-6.76,1.44-9.08-.02-.21-.75-1.97-.86-1.97-.58.5-.58,1.28-.84,1.89-.48,1.16-1.69,2.45-2.42,3.52-4.65,6.83-9.35,13.69-13.41,20.88-2.6,4.6-5,9.24-7.3,13.99-1.11,2.29-2.24,4.58-3.45,6.83,0,.06.82.41.99.73s.06.67.13.8c.19.31,6.33,1,7.19,1.16,5.6,1.06,11,3.31,16.78,4.26.98.16,2.03.26,2.99.35l5.57-6.69c3.29-2.83,6.18-6.12,9.67-8.78.47-1.06,1.47-1.85,2.34-2.61-.44-.11-.91-1-1.11-1.11-.06-.04-1.26-.2-1.42-.2-.29,0-2.87,1.09-3.29,1.3-.25.13-4.21,3.33-4.45,3.59-.91.98-1.31,2.82-2.48,3.71-1.45,1.1-2.87,2.32-4.54,3.13-2.75,1.34-7.26,2.99-10.05,1.08-1.1-.75-3.23-3.87-3.23-5.2,0-1.83.01-4.42,1.15-5.92,1-1.32,1.5-.69,2.5-1.21.44-.23,2.25-2.26,2.46-2.74.43-.99-.83-1.7-.99-2.53-.24-1.2.1-1.82.9-2.64.58-.59,1.22-.85,2.08-.59.12.03.95.85,1.01.97.23.49.38,1.57.63,2.09.23.49.89.73,1.04,1.68.38,2.45-1.4,3.94-2.96,5.44-.55.52-.96.56-1.39,1.34-.24.45-1.3,3.61-1.09,3.8.48-.14,1.02.36,1.43.32.21-.02.36-.27.62-.31.41-.08.92.05,1.35-.01.53-.08,1.56-.56,2.12-.61.25-.02.49.14.7.1.98-.19,1.74-1.77,2.27-2.44,1.19-1.52,2.07-2.36,3.1-4.09.17-.29.56-.44.64-.84.12-.54.25-1.97.28-2.57.09-1.75-.09-4.7-.41-6.41-.12-.65-.87-2.71-.65-3.18.06-.12.87-.9,1.02-.97.77-.37,1.44.03,1.79.75.64,1.29,1.05,3.53,1.61,4.95.39.98,1.44,2.96,2.67,2.61,3.69-1.05,4.61-7.88,5.25-11.09.19-.94.55-1.92.68-2.91.18-1.38.02-3.71.56-4.89.49-1.09,2.16-1.33,2.82-.16.18.31.15.76.11,1.11-.31,2.44-.61,5.1-.73,7.56-.11,2.26.06,4.17,1,6.24.26.18.82-.49.98-.68.93-1.07,1.46-2.54,2.23-3.59.18-.25.81-.66.84-.71.07-.12.12-1.01.22-1.33.39-1.31,1.17-2.83,1.67-4.14.37-.95.9-3.41,1.85-3.84.65-.3,1.74.02,2.04.68.5,1.1-1.4,4.94-1.85,6.19-.27.75-.4,1.72-.68,2.42-.66,1.62-.75,2.6-1.01,4.31-.15.99-.62,1.54.72,1.9.76.21,1.29.29,2.06.67.19.09.33.35.57.43.53.17.65-.18,1.05-.33,2-.72,4.73-2.31,6.44-3.58,1-.74,1.06-1.16,2.34-1.87.84-.47,1.54-1.05,2.58-.95,1.16.11,2.65,1.6,3.69.53.07-.31-.9-.56-.56-1.3.02-.05.68-.72.73-.75.38-.22,1.06-.15,1.46.03.34.16.73.83.8.84.1.02,1.59.14,1.71.13.29-.02.58-.26.92-.33.91-.18,1.35,0,2.03.56.16-.03.53-.6.77-.72.28-.14.55-.1.78-.21.54-.25,1-1.31,1.55-1.31.38,0,1.38.84,1.43,1.2.07.46-.22.47-.31.68-.21.51-.16.8-.69,1.23,1.19-.16,3.06,1.67,2.6,2.85.51-.07.76.04,1.11.37-.15-.55.55-1.65,1.06-1.74.83-.14,2.18.8,1.84,1.73-.1.26-.95,1.16-1.2,1.27-.79.35-.9-.3-1.45-.65.15.47-.37.81-.44,1.1-.13.58.85.83,1.18,1.25-.15-.57.98-1.73,1.42-1.74.74-.02,2.04.78,1.74,1.61-.32.87-1.38,1.24-2.22,1.37l-.75-.62c-.4.63-.86,1.38-1.67,1.48.38.52,1.17.42,1.67.74.43.28.93.82.75,1.37-.07.21-.96,1.15-1.15,1.21-.64.19-.77-.16-1.27-.35-.18.46-.24,1.05-.45,1.47-.59,1.2-3.09,2.75-3.15,4.04-.03.53.18,1.1.13,1.73-.09,1.33-.94,3.37-1.98,4.21s-2.27.36-3.28-.31c-.33.7-.93,1.44-1.55,1.92-.53.41-1.09.5-1.55.8-.62.4-1.12,1.56-1.95,1.89-.45.18-.8Line truncated
<path d="M110.84,58.75c-.08.08-.07.32-.21.47-.36.37-.75.93-1.31.67-.06-.03-.59-.55-.63-.61-.14-.24-.08-.48-.18-.68-.11-.22-.52-.42-.61-.63-.39-.91.84-1.8.8-2.03-.52-.48-1.39-.66-1.24-1.56-.58.14-1.4-.54-1.22-1.15.04-.14.67-.76.81-.81.76-.23.93.51,1.2.46l.57-.55c-.16-.12-.39-.03-.62-.12-1.66-.75.5-3.53,1.36-1.3,1.07-.91,1.24-2.16,2.6-.62-.02-.37-.34-.37-.38-.8s.29-.84.2-1.05l-.32-.5c-.88.73-1.98-.41-1.66-1.36.34-1.01,2.42-3.9,3.21-4.71.13-.14.36-.42.52-.47.35-.1.46.07.7.12.66.15-.12-.35-.05-.82.05-.37,1.31-1.42,1.68-1.44.47-.03.92.63,1.29.37.14-.1.37-1.48,1.29-1.2.2.06,1.3,1.04,1.33,1.29-.17.58.06,1.28,0,1.84-.02.18-.21.3-.23.41-.02.14.19.3.23.48.11.61-.3.66-.34.87-.08.45.03.87-.18,1.56s-.36,1.47-.61,2.23c-.2.6-.97,2.64-1.55,2.79-.25.07-.5-.09-.66-.04-.27.1-1.11,1.15-1.6,1.23,1.12.57,1.36,1.61.19,2.3-.79.47-.93-.42-1.3-.56-.16-.06-1.68.03-1.86.12-.05.02-.85.49-.94.55-.82.54-.09.75.12,1.13.12.21.09.51.26.73.22.28.49.21.75.37,1.36.86-.22,2.07-.93,2.8-.14.15-.39.13-.47.21Z"/>
<path d="M138.31,96.01c-.07.06-.24.71-.65.9-.74.34-1.62-.97-1.62-1.61s.99-1.54,1.68-1.42c.1.02.98.27,1.06.31.78.33.8,1.21.07,1.68-.19.13-.46.08-.54.14Z"/>
<path d="M109.04,19.13c.36-.07.62-.05.95.11.21.11.98.99,1.04,1.19.3,1.01-1.04,1.63-1.96,1.34-.18-.06-1.1-.91-1.17-1.06-.32-.69.53-1.46,1.14-1.58Z"/>
<path d="M88.48,2.16c.71-.21,1.85-.04,2.27.65s.23,1.52-.5,1.86c-.82.38-2.78-.74-2.45-1.83.04-.14.54-.64.68-.68Z"/>
<path d="M152.12,103.68c.72-.21,2.19.69,1.99,1.5-.08.3-.88,1.34-1.18,1.43-.95.29-2-1.14-1.7-1.95.07-.2.69-.92.89-.98Z"/>
<path d="M9.25,40.17c.83-.17,1.92,1.08,1.58,1.83-.09.19-.66.67-.89.72-.79.18-2.79-.31-2.15-1.41.17-.3,1.11-1.07,1.46-1.14Z"/>
<path d="M110.4,22.84c.22-.06.44-.06.65.04.11.05,1.18,1.16,1.22,1.26.2.67-.72,1.62-1.37,1.5-.7-.14-2.03-.98-1.64-1.83.07-.15.98-.92,1.14-.97Z"/>
<path d="M17.3,39.18c.7-.09,1.48.72,1.17,1.43-.1.23-.9,1.02-1.14,1.09-.63.19-1.75.07-1.97-.65-.25-.86,1.22-1.77,1.93-1.87Z"/>
<path d="M100.74,5.13c.91-.27,2.64.49,2.17,1.55-.53,1.21-2.58.95-3.06-.09-.23-.49.51-1.35.89-1.46Z"/>
<path d="M95.54,6.49c.25-.07.66-.06.9.04.12.05,1.06,1.15,1.1,1.26.18.59-.82,1.48-1.39,1.4-.29-.04-1.33-.94-1.41-1.2-.15-.51.35-1.36.81-1.5Z"/>
<path d="M77.59.06c.92-.28,2.44.5,2.09,1.59-.21.64-1.02,1.08-1.68.8-.1-.04-1.13-.95-1.18-1.05-.22-.48.38-1.22.77-1.33Z"/>
<path d="M108.41,9.09c.85-.26,2.2.85,1.8,1.8-.07.17-.57.7-.74.75-.7.21-2.37-.79-1.95-1.71.05-.1.78-.81.89-.84Z"/>
<path d="M19.52,36.83c.85-.2,1.87.72,1.4,1.53s-2.11,1.63-2.67.42c-.3-.64.66-1.81,1.26-1.95Z"/>
<path d="M29.69,25.82c.92-.21,1.48.73,1.21,1.58-.46,1.48-3.14.94-2.77-.29.1-.32,1.21-1.21,1.56-1.29Z"/>
<path d="M83.04,7.85c.74-.23,2.19,1.04,1.83,1.83-.05.1-.65.68-.77.72-.8.24-2.37-.8-1.95-1.71.05-.1.78-.81.89-.84Z"/>
<path d="M18.53,30.64c.7-.21,1.38.38,1.49,1.06.32,1.91-3.25,1.75-2.8.24.04-.13,1.17-1.26,1.3-1.3Z"/>
<path d="M20.52,26.68c.78-.21,1.69.82,1.28,1.53-.59,1.02-2.27,1.31-2.79.18-.32-.69.95-1.55,1.51-1.7Z"/>
<path d="M29.93,11.82c.47-.06,1.05.32,1.14.78.2,1.04-1.12,1.87-2.14,1.39-1.58-.74-.18-2.01.99-2.18Z"/>
<path d="M23.11,35.22c.81-.25,1.86.73,1.4,1.53-.04.07-.82.83-.87.86-.69.31-1.85-.2-1.74-.98.04-.25.97-1.33,1.21-1.41Z"/>
<path d="M24.73,27.79c.54-.14,1.2.54,1.27,1.04.16,1.22-2.05,2.1-2.66.79-.27-.58.92-1.71,1.39-1.83Z"/>
<path d="M36,20.86c.73-.07,1.47.47,1.24,1.24-.03.11-.74.84-.84.89-.61.28-1.64-.08-1.92-.68-.38-.82.85-1.39,1.52-1.45Z"/>
<path d="M12.6,29.03c.52-.09,1.16.24,1.27.78.32,1.63-1.67,2.26-2.48.87-.38-.66.6-1.55,1.21-1.65Z"/>
<path d="M152.49,93.91c1.55-.46,2.33,1.52,1.02,2.25-1.78.99-2.34-1.86-1.02-2.25Z"/>
<path d="M23.61,22.96c.81-.24,1.73.62,1.28,1.4-.49.85-1.8,1.22-2.36.25-.36-.62.59-1.51,1.08-1.65Z"/>
<path d="M29.31,20.98c.83-.22,1.59.76,1.15,1.53-.03.04-.64.65-.68.68-.82.47-2-.56-1.56-1.31.11-.18.88-.84,1.09-.89Z"/>
<path d="M133.18,90.43c.68-.2,1.94.84,1.75,1.5-.03.11-.5.6-.6.65-.74.34-2.2-.66-1.79-1.55.05-.1.53-.57.64-.6Z"/>
<path d="M105.94,30.51c.44-.13,1.27.59,1.37.93.25.84-.64,1.71-1.46,1.33-.1-.05-.69-.66-.72-.77-.14-.48.37-1.37.81-1.5Z"/>
<path d="M148.65,97.74c.55-.17,1.29.4,1.29.9,0,.47-1,1.65-1.62,1.36-1.09-.51-.45-2.03.33-2.26Z"/>
<path d="M143.7,95.51c.55-.17,1.29.4,1.29.9,0,.36-.94,1.31-1.31,1.31-.43,0-.97-.62-.94-1.07.02-.29.71-1.07.97-1.15Z"/>
<path d="M147.41,86.6c.51-.15,1.12.45,1.16.9.07.68-.77,1.57-1.44,1.18-.91-.53-.47-1.86.28-2.09Z"/>
<path d="M98.01,119.96c.48-.45.93-1.08,1.47-1.56.98-.88,5.64-4.68,6.59-4.93,2.2-.56,2.41,1.78,2.25,3.36-.27,2.69-1.02,3.39-2.39,5.41-2.75,4.02-4.18,5.9-8.61,8.23-2.38,1.25-4.14,1.62-6.66,2.37-.86.26-2.32,1.16-3.19.66-.06-.03-.71-.7-.73-.75-.66-1.46,1.88-3.38,2.72-4.33,1.54-1.75,2.99-3.71,4.7-5.33,1.2-1.13,2.65-2,3.86-3.14ZM89.01,131.39c1.84-.74,3.94-.98,5.76-1.73.63-.26,1.49-.76,2.12-1.1,3.96-2.1,4.72-3.23,7.17-6.82.37-.53.98-1.06,1.32-1.66.69-1.22,1.02-3.27,1.09-4.67-.23-.31-5.75,4.26-6.19,4.64-1.28,1.12-2.54,2.26-3.83,3.36-2.41,2.05-4.34,4.64-6.53,6.9-.3.31-.6.75-.91,1.07Z"/>
<path d="M44.42,129.94c.49-.01,1.61-.15,2,.03.52.24,1.29,1.32.97,1.95-3.64,4.95-7.58,10.59-12.1,14.76-1.05.97-1.69,1.68-3.23,1.37-.73-.15-2.51-.89-3.09-1.37-1.82-1.51-1.77-3.65-1.48-5.82.25-1.92,1.27-3.24,2.53-4.65,3.45-3.84,9.31-6.15,14.4-6.28ZM45.19,131.77c-1.63.25-3.14-.04-4.74.52-5.09,1.79-11.36,4.41-11.23,10.8.01.51.32,1.67.69,2.04.21.22,2.67,1.14,2.95,1.12.75-.05,3.82-3.47,4.47-4.2,2.59-2.94,5.54-6.52,7.66-9.79.1-.15.23-.28.2-.48Z"/>
<path d="M107.8,109.26c.25-.07.79-.07,1.03.04.1.05.93.91.97,1.01.35,1.17-.98,2.33-2.08,1.83-.66-.3-1.12-1.34-.8-2.04.05-.1.78-.81.89-.84Z"/>
<path d="M103.34,126.96c1.1-.33,2.31.89,1.83,1.95-.05.1-.78.81-.89.84-1.1.33-2.31-.89-1.83-1.95.05-.1.78-.81.89-.84Z"/>
<path d="M58.9,55.53c.76-.17,1.5.08,1.89.76.37.65-.22,3.44-.44,4.28-.12.47-.49,1.78-.7,2.14-.08.14-.86.96-.97,1.01-1.01.46-1.5-.31-2.2-.65-.85-.41-2.55-.79-3.01-1.57-.21-.37-.08-1.65.01-2.11.1-.48,1.35-1.4,1.8-1.66.87-.5.94-.66,1.67-1.18.25-.18,1.7-.97,1.94-1.03ZM55.36,60.55c.86.41,1.76.66,2.51,1.26.29-.06,1.04-3.67,1.05-4.21l-1.48.75c.4.7-.3,1.61-1.04,1.48-.19-.03-.33-.23-.5-.24-.51-.03-.67.54-.54.96Z"/>
<path d="M45.28,28.16c.23-.07.71-.05.97-.02,1,.11,1.83,1.07,1.48,2.1-.08.22-1.06,1.28-1.26,1.34-.25.07-.91.07-1.15-.04-.1-.05-1.06-1.03-1.09-1.14-.07-.25-.07-1.03.04-1.27.05-.1.91-.94,1.01-.97Z"/>
<path d="M58.89,46.24c.25-.07.91-.07,1.15.04.66.3,1.12,1.34.8,2.04-.05.1-.91.93-1.01.97-1.24.37-2.21-.94-1.87-2.12.04-.14.79-.89.93-.93Z"/>
<path d="M59.88,51.56c1.17-.35,2.33.98,1.83,2.08-.3.66-1.34,1.12-2.04.8-.61-.28-1.11-1.24-.8-1.91.05-.1.91-.93,1.01-.97Z"/>
<path d="M57.16,64.31c1.17-.35,2.33.98,1.83,2.08-.3.66-1.34,1.12-2.04.8-.61-.28-1.11-1.24-.8-1.91.05-.1.91-.93,1.01-.97Z"/>
<path d="M69.66,40.05c1.1-.33,2.31.89,1.83,1.95-.05.1-.78.81-.89.84-1.1.33-2.31-.89-1.83-1.95.05-.1.78-.81.89-.84Z"/>
<path d="M63.85,45.25c1.1-.33,2.31.89,1.83,1.95-.05.1-.78.81-.89.84-1.1.33-2.31-.89-1.83-1.95.05-.1.78-.81.89-.84Z"/>
</svg>

After

Width:  |  Height:  |  Size: 38 KiB

@@ -0,0 +1,9 @@
<?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 151.46 237.38">
<path d="M0,172.87c.59-.73.36-1.55.76-2.37.25-.51.8-.85,1.1-1.28.66-.95,1.28-2.16,1.91-3.17,1.66-2.67,3.37-5.35,4.91-8.18,1.9-3.5,3.8-6.92,5.79-10.33.75-1.28,1.42-2.59,2.25-3.82.89-1.31,2.1-2.74,3.09-4.08,2.04-2.78,5.12-5.78,6.68-8.69.7-1.31,1.52-1.79,2.18-2.81,1.1-1.7,2-3.66,3.27-5.34.6-.79,1.47-1.5,2.07-2.2,1.16-1.36,2.25-3.14,3.44-4.55s2.67-3.03,3.97-4.33c3.33-3.34,5.74-8.51,8.61-12.32,1.51-2,2.84-4.27,4.17-6.47,1.19-1.97,2.49-3.32,3.94-5.1,2.44-2.97,4.95-6.34,6.99-9.6.97-1.55,1.64-3.22,2.58-4.72s2.11-2.92,2.86-4.6c.68-1.55,1.59-3.54,2.52-4.95.07-.1.34-.15.47-.34.26-.38.41-2.04.07-2.31-.2-.16-1.91-.17-2.25-.12-.22.03-.15.21-.27.25-2.08.65-4.85.93-6.7,1.95-3.15,1.74-5.44,3.15-8.19,5.55-2.52,2.19-5.18,4.3-7.55,6.56-3.23,3.08-5.99,6.44-8.96,9.81-1.71,1.94-3.5,3.76-5.15,5.81-.5.62-.83,1.12-1.24,1.73-.16.25-.55.48-.75.74-1.36,1.83-2.85,3.25-4.01,5.27s-1.75,4.37-2.29,6.75c-.34,1.48-.51,2.84-.76,4.32,0,.04-.24.8-.25.84-.19.44-1.7,2.09-2.09,2.26-.31.14-.62.01-.92.07-.26.05-.38.3-.74.25-.67-.1-1.69-.38-2.29-.69-.46-.24-.9-.5-1.38-.72-1.04-.48-1.11-.66-2.22-.89-.17-.04-1.02-.84-1.24-.97-.59-.34-2.49-.78-2.83-1.41-.08-.15-.07-.38-.16-.55-.13-.25-.43-.48-.52-.72-.36-.94-.46-3.5-.32-4.52.07-.5.44-1.35.51-1.84.19-1.3-.06-2.9.11-4.1.24-1.7.39-3.48.63-5.19.08-.54-.11-1.33,0-1.84.02-.1.25-.08.32-.32.12-.44-.03-.92.06-1.29.27-1.13.9-2.22,1.11-3.62.23-1.61.31-3.09.78-4.67.42-1.41.42-1.89.59-3.37.21-1.81.3-3.81.6-5.59.24-1.41.17-2.94.37-4.33.26-1.82,1.02-3.52,1.46-5.23.4-1.53.54-3.24,1.03-4.64.04-.11.2-.11.23-.19.52-1.4.56-2.49,2.31-2.99,1.01-.29,1.95-.52,2.94-.77.47-.11,1.32-.42,1.75-.48,1.77-.23,3.63-.06,5.15.87.17.1,1.83,1.62,1.89,1.73.16.3.51,1.1.66,1.45,1.01,2.38.48,5.64.15,8.14-.11.88-.84,2.32.68,2.17.52-.05.79-.33,1.13-.67.2-.2.76-.97.95-1.15.12-.11.71-.32.84-.46.39-.44.38-.62,1.01-1.19,2.24-2.07,5.02-3.81,7.24-5.98.05-.05,0-.25.06-.3.08-.07.8-.17,1.04-.39.18-.17.15-.45.19-.49.1-.08.41.05.58-.04.04-.02.36-.54.58-.72.23-.19,1.01-.45,1.24-.61.33-.23.66-.78.98-1,1.55-1,3.12-1.97,4.68-3,1.13-.75,2.18-1.28,3.26-1.99.11-.07.12-.3.37-.43.33-.17.78-.08,1.03-.21s.21-.5.26-.54c.09-.07.36.03.51-.02.13-.04,1.18-.73,1.42-.85,1.44-.69,3.15-1.27,4.51-2,.35-.19,1.18-.92,1.45-1.04.11-.04.87-.11,1.23-.26,1.4-.58,2.76-1.26,4.09-1.85.43-.19.4-.79,1.4-.55.1.02.03.22.26.25,1.39.18,3.35-.09,4.72.11.52.07,1.46.47,1.98.51.58.04,1.33-.46,2.2-.25.09.02.07.21.17.24,3.15.84,6.85,2.36,8.05,5.8.1.27.27.57.28.61.21.94.15,5.64,0,6.67-.06.42-.44,1.21-.5,1.61-.15,1.03-.07,1.85-.41,2.94-.12.38-.75,1.43-.81,1.66-.15.52-.25,1.7-.4,2.32-.47,1.95-.96,3.83-1.57,5.61-.34.98-.52,1.96-.95,3.01-.74,1.84-1.52,3.71-2.37,5.55-.08.17-.34.27-.4.47-.08.29.05.61-.09.9-.1.23-.46.29-.55.47-1.77,3.26-2.97,5.75-5.2,8.76-1.85,2.5-3.93,4.97-5.77,7.54-1.45,2.04-2.65,4.44-4.08,6.32-.7.92-1.32,2.11-1.9,3.15-1.7,3.02-3.69,5.97-5.44,8.92-1.48,2.49-2.88,4.87-4.32,7.41-.67,1.17-1.34,2.42-2.02,3.64-.31.55-.69,1.54-1.04,2.08-.72,1.08-1.63,1.31-1.42,2.92.07.53,1.13.51,1.53.42.16-.04,1.82-1.22,2.2-1.41,1.11-.57,2.46-1.02,3.73-1.44.15-.05.31-.44.44-.48.92-.26,1.82-.33,2.61-.98,3.13-1.18,5.97-2.85,8.89-4.33,2.54-1.28,5.12-2.59,7.56-3.9.13-.07.75-.7.9-.76.13-.05.3.09.47.03.02,0,.22-.37.32-.42,1.01-.55,2.01-.79,3.04-1.37,4.33-2.47,8.79-4.75,13.13-7.05,1.62-.86,3.28-1.65,4.86-2.44.92-.46,1.1-.58,2.09-.89.73-.22,1.84-1.17,2.6-1.48,1.77-.71,2.97-1.16,4.71-2.07.53-.28.39-.11.88-.23.07-.02.93-.86,1.08-.93.76-.35,1.39-.75,2.1-1.09.45-.22,1.2-.33,1.6-.53.09-.05.35-.48.41-.51.26-.1.55-.05.86-.2.77-.35,1.78-.89,1.54-1.85-.07-.29-1.56-2.76-1.82-3.13-.96-1.36-2.91-2.7-3.68-4.05-.08-.14-.01-.39-.1-.58-.1-.21-1.43-1.89-1.73-2.36-1.37-2.17-2.59-4.46-3.65-6.75-.24-.51-.6-1.04-.8-1.55-.29-.76-.86-3.65-.69-4.36.02-.09.21-.07.24-.17.16-.59.22-1.56.4-2.18.1-.34,1-.88,1.15-1.2.56-1.24,1.61-2.13,2.72-2.97,1.23-.93,1.49-1.07,2.94-1.52.18-.06.27-.27.43-.31.33-.1,3.32.03,3.82.09.88.11,2.78,2.26,3.52,2.92,2.84,2.53,5.9,5.02,8.42,7.8.44.49.19,0,.64.82.22.42,1.21,1.24,1.59,1.65.78.82,1.32,1.5,2.17,2.29s1.7,1.6,2.55,2.39c.54.5.3.4.6.77.2.25,1.52,1.15,1.87,1.5.45.45,2.89,2.86,3.06,3.16.07.13,0,.39.09.59s.44.32.53.59c.2.61-.02,1.12,1.02,1.02.05.05-.06,1.01.02,1.28.1.31.8,1.33.84,1.51.59,3.12-1.36,6.34-3.22,8.66-.1.13-.1.39-.13.42-.1.08-.39-.05-.57.05-.24.13-.69.94-.83,1.08-1.09,1.04-2.55,1.76-3.81,2.63-.86.6-.81.73-1.85,1.12-.85.32-.67.66-.86.81-.06.05-1.14.2-1.49.4-.39.22-2.03,1.62-2.23,1.7-.14.06-.64-.03-1.08.22-1.75,1.01-3.27,2.2-5.06,3.01-1.03.47-2.03,1.06-3.09,1.59-.13.06-.36-.02-.5.06-.12.06-.37.74-.6.82-.27.09-.65-.05-.95.04-.9.27-1.96,1.02-2.74,1.46-1.86,1.06-3.74,2.07-5.49,3.05-.55.31-1.4.59-1.88.98-.26.21-.45.64-.63.73-.35.18-.98.1-1.33.23-.07.02-.86.87-.99.96-.91.62-2.7,1.27-3.44,1.85-.19.14-.27.43-.34.47-.14.08-.59.06-.86.16-.13.05-.3.39-.44.48-3.53,2.2-7.02,4.46-10.49,6.57-2,1.32-4.04,2.39-6.11,3.66-1.8,1.11-3.63,2.21-5.39,3.39-.69.46-.4.21-.9.4-.1.04-.7.62-.84.71-4.2,2.73-8.43,5.11-12.75,7.8-.55.34-1.16.81-1.7,1.15-2.39,1.49-4.63,2.88-6.93,4.43-1.02.69-1.9,1.63-2.84,2.26-.67.45-1.56.78-2.2,1.15-.16.09Line truncated
<path d="M143.85,0c.36.56.95.26,1.4.4.65.19.87.2,1.49.35.06.01.9.55,1.04.59.18.06.63,0,.66.02.03.03-.04.5.06.74.14.32.8.47,1,.79.14.22.33.96.45,1.16.07.11.41.17.52.41.16.35,0,.85.1,1.27.11.51.74,1.37.83,1.9.07.44.12,3.22,0,3.57-.08.22-.34.15-.45.23-.52.41-.35,1.89-.68,2.6-.02.05-.59.76-.63.79-.54.48-1.11.32-1.44.47-.18.08-.32.42-.5.5-1.65.74-3.69.86-5.48,1.56-.88.34-1.82.25-2.87.37-.19.02-.35.21-.62.25-.4.06-1.72.06-2.12,0-.23-.03-.16-.23-.26-.26-.25-.05-.54.05-.82-.03-1.02-.28-1.68-1.59-2.36-2.17-.07-.06-.28,0-.31-.04-.06-.07.03-.49-.08-.73-.27-.6-1.05-1.36-1.35-2-.39-.84-.26-1.42-.46-2.24-.03-.11-.22-.05-.25-.27-.06-.46-.07-2.44.01-2.85.01-.07.59-1.15.66-1.26.23-.33.9-.74,1.14-1.09.29-.41.32-.88.46-1.15.06-.11.61-.81.7-.84.16-.06.36.12.62,0,.42-.19.86-.89.99-.99.09-.07,1.05-.71,1.12-.74.41-.17.87.04,1.17-.57.08-.16.05-.46.07-.48.08-.09,2.08-.11,2.4-.11.19,0,.33.16.44-.15h3.34Z"/>
<path d="M119.04,123.88c.33.15,2.53,1.15,2.64,1.26.59.57.53.46,1.18.92.52.37,1.68,1.81,1.79,2.42.09.54.09,2.78.02,3.34-.03.23-.23.16-.25.26-.18.78-.14,1.95-.35,2.84-.48,2.06-2.53,4.35-4.17,5.62-.77.6-1.47.91-2.32,1.25-.14.06-.31.42-.44.47-1.59.63-2.94,1.46-4.45,2.23-1.21.61-2.48,1.14-3.74,1.68-.22.09-.49.58-.75.73-.48.27-.85.43-1.37.74-1.43.84-2.85,1.52-4.35,2.31-.53.28-.36.12-.87.24-.1.02-.13.26-.3.34-3.41,1.83-6.52,3.83-9.76,5.85-.86.54-2.37,1.72-3.12,1.98-2.39.82-6.59,4.15-8.76,5.82s-3.3,4.07-3.78,6.74c-1.11,6.1,0,12.44-.48,18.59-.1,1.23-.73,2.33-.75,3.7-.03,1.83.06,4.85.38,6.56.11.6.23.34.24,1.24.03,2.88-.28,5.71-.49,8.56-.05.63-.26,1.08-.37,1.61-.47,2.15-.02,4.49-.38,6.67s-.62,4.21-.99,6.31c-.06.36-.44.68-.49,1.12-.25,1.88.2,2.37.8,3.92.32.84.26,1.33.45,2.13.02.09.22.08.24.17.15.64.15,2.65,0,3.3-.02.09-.21.07-.24.17-.05.19.01.44-.06.66-.22.71-1.03,1.09-1.31,1.72h-.23c.01-.39-.34-.23-.63-.25.09-.45-.2-.76-.25-1.17-.12-.97.01-2.28-.13-3.22-.05-.32-.44-1.06-.48-1.37-.11-.75.06-1.51-.14-2.33s-1.51-2.34-1.48-2.98c.01-.28.19-.45.23-.65.23-1.23.58-2.85,1.05-4.03.17-.43.67-.93.82-1.41.41-1.31.54-3.92.76-5.43.35-2.37.49-4.91.87-7.18.1-.62.38-.84.21-1.7-.2-.96-1.13-1.7-1.21-2.63-.12-1.48.47-2.37.63-3.59.57-4.33-.55-9.8.12-14.24.05-3.59-.03-7.2-.13-10.77-.03-1.11.15-2.57.01-3.6-.01-.11-.29-1.02-.33-1.06-.36-.29-1.48-.6-1.79-.19-.07.09-.35,1.06-.37,1.24-.11,1.04.16,1.71.26,2.61.19,1.66.11,3.97-.46,5.49-.07.19,0,.46-.09.65-.14.29-.92.55-1.23.48-1.85-.37-1.19-2.99-1.18-4.26.01-1.69-.14-3.23-.37-4.84-.11-.76.1-1.73,0-2.48-.07-.49-.38-1.13-.38-1.73,0-.79.56-1.26.37-2.22-.08-.4-.57-.55-.68-.81-.1-.24-.02-.5-.13-.74-.09-.19-.48-.36-.53-.57-.08-.39.5-.53.34-1.34-.14-.71-.35-1.54-.6-2.15s-.42-1.64-.26-2.29c.02-.09.21-.07.24-.17.84-3.31,2.74-3.91,5.46-5.44.17-.1.18-.33.34-.41.23-.12.61-.07.86-.17.05-.02.26-.37.38-.45,1.96-1.19,4-2.25,5.89-3.43,2.72-1.69,4.91-3.99,7.49-5.83,1.83-1.3,3.85-2.45,5.67-3.79.1-.07.13-.33.28-.4s.35.09.5.01c.04-.02.48-.42.68-.56,2.62-1.88,5.77-3.14,8.42-5.08.76-.56,2.47-2.24,3.28-2.53.14-.05.3.09.47.03.03,0,.23-.38.38-.46.66-.37,1.6-.66,2.27-1.02,1.64-.88,2.66-1.5,4.47-2.22,1.44-.58,3.01-1.43,4.75-1.24.41.04,1.96.31,2.23.43Z"/>
<path d="M122.15,147.15s.23.23.46.34c.16.07.37,0,.44.05.13.11.7,1.08.86,1.25.16.18.44.15.48.2.16.2.33,1.96.4,2.38.16.96.17,1.35-.01,2.36-.38,2.11-1.13,2.67-2.35,4.21-.16.2-.42.9-.53,1.02-.44.43-1.54,1.11-2.07,1.58-.89.79-1.91,1.96-3,2.5-.2.1-.46,0-.66.15-.15.12-.22.32-.6.63-1.6,1.3-3.93,2.66-5.74,3.7-1.28.74-2.57,1.52-3.83,2.23-.76.43-1.49.75-2.28,1.02-.14.05-.31.41-.38.44-.23.09-.52.06-.78.15-.22.07-.4.46-.45.48-.2.07-.45,0-.59.09-.13.08-.09.39-.24.5-.12.08-.37.06-.56.18-.73.44-.88,1.52-.93,2.29-.06.89.13,2.02.01,2.86-.49,3.47-.66,6.37-.25,9.9.17,1.45-.2,3.3-.01,4.72.06.46.4.86.37,1.46-.01.24-.29,1.26-.37,1.6-.01.06-.63.8-.73.9-.49.44-1.47.75-2.11.49-.11-.05-.85-.95-.86-1.02-.18-.75-.03-1.73-.14-2.44-.03-.19-.21-.34-.25-.62-.11-.74.19-.96.26-1.49.16-1.15.13-4.89,0-6.08-.04-.39-.28-1.21-.69-1.29-1.12-.22-.89.36-1.22.94-.02.04-.62.65-.66.66-.13.03-1.18.04-1.31,0s-.12-.3-.29-.36c-.6-.21-.89.41-.87-.8.02-1.07,1.23-2.31,1.32-3.23.12-1.14.17-5.16-.02-6.19s-1.02-2.24-1.2-3.01c-.11-.47.06-1.03-.04-1.43-.02-.1-.22-.03-.25-.26-.14-1.08-.15-5.14,0-6.21.02-.11.27-1.08.29-1.14.01-.03.17-.05.21-.12.95-1.93,2.58-2.94,4.27-4.11,2.41-1.68,4.84-3.15,7.31-4.83.85-.58,1.04-.73,2.01-1.15.12-.05.75-.92.94-1.03.99-.59,1.97-1.13,2.94-1.7.83-.48,2.16-.77,2.98-1.33.17-.11.74-.84.8-.86.71-.14.93-.09,1.67-.39.78-.32,1.44-.94,2.39-.98.37-.02,1.51.06,1.84.15.21.06.29.32.47.4,1,.46,2.72-.07,3.55.23Z"/>
<path d="M138.84,24.08c.27.13.63.19.66.21.04.03.01.32.19.49.26.24.85.4,1.19.79.31.36.56,1.28.79,1.44s.55.06.77.23c.38.29.19,1.06,1.41.75l.05.63.45.19c-.16.5.12.79.21,1.14.18.68.39,1.27.27,2.06-.1.69-.66,1.75-.83,2.39-.11.41.07.85-.1,1.26-.37.92-1.4,1.79-2.07,2.49-.48.5-.88.54-1.32.93-.14.13-.12.35-.26.48s-.46.12-.62.37c-.17.27-.06.51-.14.73-.13.34-.76,1.35-.81,1.54-.1.33.04.75-.03,1.09-.05.29-.32.33-.38.74-.15,1.12.14,2.57,0,3.73l.26.24c-.55.55-.07,1.64-.27,2.33-.09.31-.95.99-1.3,1.04-.44.07-1.63-.41-1.82.04-.28.62.04,2.53.06,3.28.03.83-.12,1.96-.01,2.74.04.3.28.49.26.73-.03.36-.58,1.22-.44,1.81l-1.2,1.46c-.39.2-.67-.11-.94-.19-.21-.06-.49.01-.62-.06-.05-.03-.49-.92-.51-1.03-.19-1.04.03-2.7-.12-3.84-.22-1.66-.05-3.23-.25-4.7-.1-.74-.41-.65-.24-1.72s.36-1.98.25-3.11c-.05-.48-.58-1.6-.58-1.97,0-.07.18-.26.21-.49.08-.77-.26-.84-.27-.99-.02-.54.81-1.51-.26-1.95-.83-.34-2.27-.78-3.01-1.45-.18-.16-.19-.45-.35-.64-.21-.23-.65-.26-.76-.48-.09-.19,0-.45-.09-.59-.03-.05-.68-.49-.79-.69s-.98-1.8-1.01-1.9c-.08-.28.03-.57-.03-.82-.02-.09-.21-.08-.24-.18-.19-.8-.24-2.9.02-3.65.08-.24.39-.37.5-.62.48-1.09.3-.6.92-1.37.31-.38.73-1.83,1.07-2.15s1.05-.75,1.39-1.14c.15-.17.19-.48.3-.56.03-.03.33.04.59-.14.23-.16.3-.48.53-.6.88-.43,1.89-.22,2.75-.44.07-.02.72-.41,1.03-.48.64-.13,1.57-.02,2.07-.14.1-.02.03-.22.26-.25.67-.09,2.57.73,3.24,1.06Z"/>
<path d="M121.92,9.55c.06.05.09.52.52.78,1.06.61,1.23,1.21,2.02,1.88.12.1.35.09.46.23.14.17.09.47.23.64.15.19.53.14.61.38.12.35.17,1.08.29,1.44.1.29.52.85.58,1.27.08.51-.07,1.12,0,1.61.1.71.39,1.01.22,1.95-.1.53-.49.66-.56.92-.11.36.05.75-.06,1.12-.05.14-.64.37-.78.52-.42.46-.7,1.16-1.23,1.62-.38.33-3.08,1.75-3.46,1.8-.76.09-1.47.06-2.32.22-1.11.21-3.59.52-4.71.31-.56-.1-1.43-.57-2.01-.7-.24-.06-.61.06-.78-.04-.06-.03-.12-.31-.26-.42-1.33-1.04-1.01-1.03-1.79-2.36-.13-.22-.75-.59-.91-.88-.34-.64-.88-2.87-.77-3.55.05-.32.44-1.06.48-1.37.08-.54-.02-1.01.11-1.62.22-1.05,1.28-2.61,2-3.45.13-.15.13-.41.3-.56.64-.57,2.05-1.38,2.76-1.72,2.74-1.3,5.58-.83,8.42-.03.18.05.55-.02.63.05Z"/>
</svg>

After

Width:  |  Height:  |  Size: 12 KiB

+41 -4
View File
@@ -38,11 +38,11 @@
/*===================Animation*/
@keyframes blink {
0% { color: var(--accent-color);}
15% { color: var(--main-color);}
35% { color: var(--main-color);}
15% { color: var(--back-color);}
35% { color: var(--back-color);}
50% { color: var(--accent-color);}
65% { color: var(--main-color);}
85% { color: var(--main-color);}
65% { color: var(--back-color);}
85% { color: var(--back-color);}
100% { color: var(--accent-color);}
}
@@ -89,6 +89,7 @@ a button{
}
p{
pointer-events: none;
cursor: inherit;
}
@@ -222,6 +223,42 @@ canvas {
font-size: 16.1px;
}
}
/*==================Reaction Bar for indi pannels*/
.reactBar{
margin-left: -16.1%;
width: 77%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
font-family: 'lineal';
font-weight: normal;
color: var(--main-color);
padding: 0;
}
.reactBar .reactStatStyle{
text-align: center;
width: 33px;
padding-right: 0;
}
.reactBar .icon{
height: 16.1px;
width: auto;
margin-top: 0;
}
.reactBar .iconBtnStyle{
height: 33px;
width: 33px;
border-radius: 33px;
}
.reactBar .textBtnStyle{
height: 33px;
width: 130px;
}
.reactedStyle{
color: var(--accent-color);
}
/*==============Window*/
.windowStyle{
+3 -1
View File
@@ -15,7 +15,9 @@ export const dataStorage = reactive({
},
selectedImg: {
src: "",
caption: ""
caption: "",
like: 0,
isLiked: false
},
selectedLink:{
linksData: [],
@@ -34,13 +34,21 @@
</div>
<div class="windowContent" id="artistContent">
<p id="emptyFolderText" v-show="emptyFolder">Oops! There is nothing to display here...</p>
<div v-show="displayedItems" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad">
<div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click="itemIsClicked(item)">
<div v-show="gridDisplay" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
<div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
<p class="itemCaption">{{item.caption}}</p>
</div>
</div>
<div v-show="displayedItems" class="itemDesc" @touchstart.stop>
<div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
<div class="listItemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
<p class="itemCaption">{{item.caption}}</p>
<p class="itemCaption">*auteurice*</p>
<p class="itemCaption">{{item.date}}</p>
</div>
</div>
<div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.stop>
<p>{{displayedDescription}}</p>
</div>
</div>
@@ -110,6 +118,7 @@
font-size: 16.1px;
}
/*=================GRID DISPLAY*/
.theMatrix{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
@@ -158,7 +167,7 @@
border-style: solid;
border-width: thin;
border-color: transparent;
cursor: pointer;
cursor: cell;
}
.itemStyle:hover{
@@ -187,8 +196,7 @@
}
.selectedItemStyle .icon{
height:auto;
width:50%;
fill: currentColor;
width: 50%;
}
.itemCaption{
@@ -222,6 +230,65 @@
grid-auto-rows: 180px;
}
}
/*======================LIST DISPLAY*/
.nevrEndingList{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 95%;
height: 66%;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 7.77px;
}
.listItemStyle{
width:100%;
height: 33px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-top: 7.77px;
margin-left: 1.61px;
cursor: cell;
border-style: solid;
border-width: thin;
border-color: transparent;
border-radius: 16.1px;
}
.listItemStyle:hover{
border-color: var(--main-color);
}
.listItemStyle .icon{
height: 16.1px;
width: 33px;
margin-left: 16.1px;
margin-right: 16.1px;
margin-top: 0;
}
.listItemStyle .itemCaption{
font-family: 'velvelyne';
font-weight: bold;
font-size: 16.1px;
pointer-events: none;
cursor:inherit;
width: 30%;
height: 100%;
text-align: left;
display: flex;
flex-direction: row;
align-items: center;
padding-top: 1.61px;
user-select: none;
}
</style>
<script>
@@ -242,9 +309,12 @@
displayedItems: null,
rootFolderContent: [],
emptyFolder: false,
gridDisplay: true,
listDisplay: false,
displayedDescription: "",
fileName: "",
isNotRoot : false
isNotRoot : false,
rootDepth: 0
}
},
emits: ['close','focus','openImg','openLink'],
@@ -257,27 +327,45 @@
console.log(this.displayedItems);
this.isNotRoot = false;
this.checkEmptyFolder();
this.deselectAll();
this.fileName = "./";
if(!this.emptyFolder){
this.gridDisplay = true;
this.listDisplay = false;
};
},
deselectAll(){
this.displayedItems.forEach(it => {
it.isSelected = false;
});
this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
this.fileName = "./";
if(!this.isNotRoot){
this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
}else{
this.displayedDescription = this.rootFolderContent.at(-1).description;
}
},
openFile(e){
this.$emit('focus');
if(e.type === 'folder'){
this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName, description: this.displayedDescription});
this.rootDepth = this.rootFolderContent.length;
this.displayedItems = [...e.children];
this.checkEmptyFolder();
this.isNotRoot = true;
this.displayedDescription = e.description
this.fileName += e.caption + '/';
if (e.caption === 'Autres'){
this.gridDisplay = false;
this.listDisplay = true;
}
}
if(e.type === 'image'){
this.$emit('openImg');
dataStorage.selectedImg = {
src: e.src,
caption: e.caption
caption: e.caption,
like: e.like,
isLiked: e.isLiked
}
this.displayedDescription = e.description;
}
@@ -322,22 +410,27 @@
checkEmptyFolder(){
if (this.displayedItems.length === 0){
this.emptyFolder = true;
this.gridDisplay = false;
this.listDisplay = false;
this.displayedItems = null;
}else{
this.emptyFolder = false;
}
},
backToRoot(){
let rootDepth = this.rootFolderContent.length-1;
this.displayedItems = this.rootFolderContent[rootDepth].content;
this.fileName = this.rootFolderContent[rootDepth].directory;
this.displayedDescription = this.rootFolderContent[rootDepth].description;
this.rootFolderContent.splice(rootDepth,1);
rootDepth = this.rootFolderContent.length
if (rootDepth === 0){
this.displayedItems = this.rootFolderContent.at(-1).content;
this.fileName = this.rootFolderContent.at(-1).directory;
this.displayedDescription = this.rootFolderContent.at(-1).description;
this.rootFolderContent.splice(this.rootFolderContent.length-1,1);
this.rootDepth = this.rootFolderContent.length
if (this.rootDepth === 0){
this.isNotRoot = false;
}
this.checkEmptyFolder();
if(this.listDisplay){
this.listDisplay = false;
this.gridDisplay = true;
}
},
closeClicked(){
this.dataFirstLoad();
@@ -33,7 +33,7 @@
width: 100%;
height: 100%;
color: var(--back-color);
border-color: var(--main-color);
border-color: var(--back-color);
border-style: solid;
border-width: thin;
font-family: 'velvelyne';
@@ -22,7 +22,7 @@
</button>
</div>
<div class="windowContent">
<div class="msgReact">
<div class="reactBar">
<p class="reactStatStyle">{{selectedMsg.like}}</p>
<button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
<CloseIcon name="test" class="icon"/>
@@ -65,38 +65,6 @@
}
}
.windowContent .msgReact{
margin-left: -16.1%;
width: 77%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
font-family: 'lineal';
font-weight: normal;
color: var(--main-color);
padding: 0;
}
.windowContent .reactStatStyle{
text-align: center;
width: 33px;
padding-right: 0;
}
.windowContent .icon{
height: 16.1px;
width: auto;
margin-top: 0;
}
.windowContent .iconBtnStyle{
height: 33px;
width: 33px;
border-radius: 33px;
}
.windowContent .textBtnStyle{
height: 33px;
width: 130px;
}
#selectedMsgText{
white-space: pre-line;
font-size: 16.1px;
@@ -109,10 +77,6 @@
height: 77%;
overflow-y: scroll;
}
.reactedStyle{
color: var(--accent-color);
}
</style>
<script>
@@ -22,6 +22,12 @@
<div class="windowContent" id="visualizerContent">
<img :src="selectedImg.src" id="displayedImgStyle">
</div>
<div class="reactBar">
<p class="reactStatStyle">{{selectedImg.like}}</p>
<button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedImg.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
<CloseIcon name="test" class="icon"/>
</button>
</div>
</div>
</template>
@@ -45,7 +51,7 @@
height: auto;
top: 500px;
left: 16.1px;
border-radius: 16.1px 16.1px 0 0;
border-radius: 16.1px;
}
#displayedImgStyle{
@@ -87,6 +93,10 @@
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
},
likeImg(){
this.selectedImg.isLiked = !this.selectedImg.isLiked;
console.log(this.selectedImg);
}
},
mounted(){
@@ -107,6 +107,7 @@
border-radius: 0;
font-family: 'velvelyne';
font-weight: bold;
cursor: cell;
}
.selectedStyle{
@@ -17,9 +17,9 @@
<button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')" data-tooltip="à propos de nous">
<CloseIcon name="test" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')" data-tooltip="newsletter">
<!--<button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')" data-tooltip="newsletter">
<CloseIcon name="test" class="icon"/>
</button>
</button>-->
<button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')" data-tooltip="instagram">
<CloseIcon name="test" class="icon"/>
</button>
@@ -111,7 +111,7 @@
left: 4.44px;
width: 50px;
height: 161px;
top: 38%;
top: 28%;
}
}
</style>
@@ -9,7 +9,7 @@
left: item.x + 'px',
top: item.y + 'px'
}">
<img :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" :id="'image'+item.id">
<img loading="lazy" :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" :id="'image'+item.id">
</div>
</div>
@@ -47,7 +47,7 @@
width: 44px;
height: 44px;
border-radius: 22px;
top: 50%;
top: 47%;
left: 7.77px;
animation: float 1.61s infinite;
}
@@ -121,7 +121,7 @@
}
#reloadBtnStyle{
top: 59%;
top: 49%;
left: 44.4px;
width: 77px;
height: 77px;
@@ -1,3 +1,8 @@
<script setup>
import TwoGraff from '../assets/icons/2graff.svg'
import TwoExtra from '../assets/icons/2extra.svg'
</script>
<template>
<div id="titleTextContainer" class="uiStyle">
<div id="mainTitleContainer">
@@ -8,8 +13,9 @@
<div class="titleTextStyle" id="nerd">
<p><strong>NERDs</strong></p>
<p>#</p>
<p id="numberTwo"></p>
</div>
<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>
</div>
@@ -47,10 +53,58 @@
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:500px){}
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1000px){}
@media(min-width:1300px){}
*/
.numberTwo{
fill: currentColor;
position: absolute;
z-index: 1;
}
#graffTwo{
height: 161px;
width: auto;
margin-left: 285px;
margin-top: -99px;
color: var(--main-color);
}
#extraTwo{
height: 144px;
width: auto;
margin-left: 285px;
margin-top: -99px;
animation: blink 3.33s infinite;
mix-blend-mode: difference;
}
/*================ PC HAUT/IPAD*/
@media(min-width:650px){
#graffTwo{
height: 200px;
margin-left: 500px;
margin-top: -110px;
}
#extraTwo{
height: 161px;
margin-left: 500px;
margin-top: -100px;
}
}
/*================ PC LARGE*/
@media(min-width:900px){
#graffTwo{
height: 333px;
margin-left: 633px;
margin-top: -233px;
}
#extraTwo{
height: 277px;
margin-left: 640px;
margin-top: -233px;
}
}
#titleTextContainer{
width:99.8%;
@@ -84,7 +138,7 @@
z-index: 1;
}
.titleTextStyle p{
color: (--main-color);
color: var(--main-color);
}
#drag{
margin-top: -100px;
@@ -199,7 +253,7 @@
padding-bottom: 16.1px;
padding-left: 33px;
font-size: 33px;
color: (--main-color);
color: var(--main-color);
}
#drag{
margin-top: -150px;
@@ -209,6 +263,7 @@
margin-top: -75px;
margin-left: -75px;
justify-content: space-between;
margin-right: 161px;
}
.titleTextStyle strong{
font-size: 77px;