epickiwi/drags-and-nerds
1
0
Fork 0
forked from vgaNAR6ta/drags-and-nerds
Code Pull Requests Activity

tunnel: création de toute la structure et contenu textes, sans les images de drag, interactivté et style (bug avec le dossier typo dans /public => déplacer dans assets)

Browse Source
This commit is contained in:
Vega
2026-03-11 00:14:29 +01:00
parent cf2ce6ba2f
commit e92655ac93
16 changed files with 1181 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
v0-appel-projet/src/App.vue
+401
View File
@@ -1,12 +1,413 @@
<script setup>
import GrainOverlay from './assets/noise.svg?component'
import Two from './assets/2.svg?component'
</script>
<template>
<div id="mainContainer">
<GrainOverlay name="grain" class="overlay"/>
<workshopPannel v-show="workshopActive" @close="workshopToggle" :class="{alonePannel: workshopIsAlone}"></workshopPannel>
<aboutPannel v-show="aboutActive" @close="aboutToggle"></aboutPannel>
<div id="titleContainer">
<div id="windowContainer">
<div id="imgContainer">
</div>
<div id="textContainer">
<Two name="two" class="numberTwo"/>
<div class="titleText" id="drag">
<p>DRAGs<b class="smallerText"> AND</b></p>
</div>
<div class="titleText" id="nerd">
<p>NERDs<b class="smallerText">#</b></p>
</div>
<div class="descText" id="descTextTop">
<b id="subtitle">&gt; Appel à Projet</b>
<br>
Drag shows, musique électronique, synthés vidéos
<br class="smallWidthBreaker">
et autre performances nerds
<br>
On recherche actuellement : artistes drags,
<br class="smallWidthBreaker">
artistes nerds, crafties pour la scéno ...
</div>
<div id="bottomInfo">
<div id="date" class="descText" ><b>22 Mai 2026</b></div>
<div id="adress" class="descText" ><b>Grrrnd Zero</b></div>
</div>
</div>
</div>
</div>
<div id="btnContainer">
<button type="button" class="btnStyle" id="about" @click="aboutToggle">À PROPOS DE NOUS...</button>
<button type="button" class="btnStyle" id="workshop" @click="workshopToggle">ATELIERS PARTICPATIFS</button>
<button type="button" class="btnStyle" id="joinUs" @click="contactToggle">JE VEUX PARTICIPER!</button>
<contactPannel v-show="contactActive" @close="contactToggle"></contactPannel>
</div>
</div>
</template>
<style scoped>
.alonePannel{
transform: translate(0);
}
/*=========Texture grain*/
.overlay{
inset:0;
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: multiply;
background-blend-mode: multiply;
z-index: 1;
opacity:0.333;
}
/*=========Main*/
#mainContainer{
position: fixed;
inset:0;
width: 100%;
height: 100%;
background-color: transparent;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
#titleContainer{
position: relative;
top: 0;
left: 0;
background-color: transparent;
height: 95%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
#windowContainer{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 95%;
height: 90%;
border-style: solid;
border-radius: 16.1px;
border-color: var(--dark-color);
border-width: thin;
margin-bottom: 3.33%;
}
#imgContainer{
position:relative;
z-index:33;
width:100%;
height:65%;
background-color: transparent;
}
#textContainer{
position:relative;
z-index:33;
width:100%;
height:44.4%;
background-color: var(--dark-color);
border-radius: 0 0 16.1px 16.1px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
}
/*==============Title*/
.titleText{
background-color: var(--dark-color);
width: 77%;
height: 50px;
color: var(--light-color);
font-family: 'PressStart2P';
font-size: 44.4px;
display: flex;
flex-direction: row;
align-items: center;
}
.numberTwo{
position:fixed;
top:44.4%;
right:3.33%;
width:40%;
height:auto;
fill: currentColor;
z-index:35;
animation: blink 10s infinite;
}
#drag{
position:fixed;
justify-content: flex-end;
top:40%;
right:1%;
z-index: 33;
}
#drag p{
position:absolute;
margin-top: 16.1px;
margin-right: 5px;
}
#nerd{
position:fixed;
justify-content: flex-start;
top:48%;
left:1%;
z-index: 34;
}
#nerd p{
position:absolute;
margin-top: 16.1px;
margin-left: 5px;
}
.smallerText{
font-family: 'lineal';
font-size: 16.1px;
}
/*==============Subitle*/
.descText{
text-align: left;
color: var(--light-color);
font-family: 'velvelyne';
font-size: 16.1px;
margin-left: 16.1px;
margin-right: 16.1px;
align-self: flex-start;
}
#descTextTop{
margin-top: 20px;
}
#subtitle{
font-size: 20px;
margin-left: 20px;
}
/*================Boutons en bas*/
#btnContainer{
position: relative;
background-color: transparent;
height: 7%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.btnStyle{
position: relative;
height: 100%;
width: 33.3%;
border-style: solid;
border-width: thin;
border-radius: 16.1px;
border-color: var(--dark-color);
background-color: var(--accent-color-2);
color: var(--dark-color);
font-family: 'velvelyne';
font-weight: bold;
font-size: 13.12px;
margin-bottom: 3.33%;
margin-right: 1.61%;
margin-left: 1.61%;
cursor: pointer;
}
.btnStyle:hover{
background-color: var(--accent-color);
}
#joinUs{
animation: float 1s infinite;
}
/*============Format tel*/
@media(max-width:999px){
#windowContainer{
margin-top: 10%;
margin-left: 0;
}
#bottomInfo{
display: flex;
width:100%;
margin-left: 16.1px;
margin-right: 16.1px;
margin-top: 20px;
flex-direction: row;
justify-content: space-between;
}
}
/*============Format pc étroit*/
@media(min-width:1000px){
.smallWidthBreaker{
visibility: hidden;
}
#mainContainer{
flex-direction: row;
}
#titleContainer{
height: 100%;
width: 80%;
}
/*===========Highlight WS*/
.alonePannel{
transform: translateX(-50%);
}
#windowContainer{
margin-top: 5vh;
margin-left: 10%;
width: 80%;
height: 80%;
}
#btnContainer{
height: 100%;
width: 20%;
flex-direction: column;
justify-content: flex-start;
margin-top: 20vh;
margin-left: -50px;
}
.btnStyle{
height: 5%;
width: 80%;
margin-bottom: 5vh;
}
.titleText{
font-size: 75px;
width: 44%;
height: 77px;
}
#drag{
top:43%;
left:33.3%;
}
#drag p{
position:absolute;
margin-top: 16.1px;
margin-right: 20px;
}
#nerd{
top:54%;
left:25%;
}
#nerd p{
position:absolute;
margin-top: 16.1px;
margin-left: 20px;
}
#bottomInfo{
display: flex;
width:100%;
margin-left: 0;
flex-direction: column;
justify-content: flex-start;
margin-top: 20px;
}
.numberTwo{
top:50%;
right:21.5%;
width:25%;
}
}
/*============Format pc large*/
@media(min-width:1500px){
.titleText{
font-size: 87px;
width: 44%;
height: 77px;
}
#drag{
top:43%;
left:33.3%;
}
#drag p{
position:absolute;
margin-top: 16.1px;
margin-right: 20px;
}
#nerd{
top:55%;
left:25%;
}
#nerd p{
position:absolute;
margin-top: 16.1px;
margin-left: 20px;
}
}
</style>
<script>
export default {
name : 'App',
data(){
return{
aboutActive: false,
contactActive: false,
workshopActive: true,
workshopIsAlone: true
}
},
methods:{
aboutToggle(){
this.aboutActive = !this.aboutActive;
this.checkAlone();
},
contactToggle(){
this.contactActive = !this.contactActive;
},
workshopToggle(){
this.workshopActive = !this.workshopActive;
},
checkAlone(){
if(this.aboutActive === false){
this.workshopIsAlone = true;
}else{
this.workshopIsAlone = false;
}
}
},
mounted(){
console.log("Vue root app is fully loaded!");
}
v0-appel-projet/src/assets/2.svg
+4
View File
@@ -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 409.66 304.5">
<path d="M2.79,304.5l34.12-87h43.5l17.06-43.5h43.5l17.06-43.5h87l17.06-43.5h43.5l17.06-43.5h-130.5l-17.06,43.5h-87l17.06-43.5h43.5L165.72,0h217.5l-17.06,43.5h43.5l-34.12,87h-43.5l-17.06,43.5h-43.5l-17.06,43.5h-87l-17.06,43.5h174l-17.06,43.5H2.79Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 400 B

v0-appel-projet/src/assets/close.svg
+4
View File
@@ -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 53.73 53.59">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

v0-appel-projet/src/assets/noise.svg
+12
View File
@@ -0,0 +1,12 @@
<!-- svg: first layer -->
<svg viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'>
<filter id='noiseFilter'>
<feTurbulence
type='fractalNoise'
baseFrequency='333'
numOctaves='6'
stitchTiles='stitch'/>
</filter>
<rect width='100vw' height='100vh' opacity="1" filter='url(#noiseFilter)'/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 333 B

v0-appel-projet/src/assets/style.css
+164
View File
@@ -0,0 +1,164 @@
/*====================Couleurs*/
:root{
--light-color: #FFFFFFFF;
--dark-color: #000000FF;
--accent-color: #C303FFFF;
--accent-color-2: #00FF76FF;
}
/*====================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: 'avara';
src: url('./typo/Avara-Black.woff2') format('woff2');
}
@font-face {
font-family: 'velvelyne';
src:url('./typo/Velvelyne-Bold.ttf') format('truetype');
font-weight: bold;
}
/*====================App Racine Vue*/
#app{
inset: 0;
position: fixed;
width: 100%;
height: 100%;
z-index: 0;
cursor: cell;
scrollbar-color: var(--accent-color-2) transparent;
scrollbar-width: thin;
background-size: 100% 100%;
background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
background-image:
radial-gradient(150px 150px at 15% 80%, var(--dark-color) 18%, var(--accent-color) 87%, transparent 100%),
radial-gradient(200px 200px at 33% 50%, var(--dark-color) 20%, var(--accent-color) 93%, transparent 99%),
radial-gradient(66% 100% at 0% 0%, var(--dark-color) 15%, var(--accent-color) 45%, var(--light-color) 64%, transparent 81%),
radial-gradient(150% 100% at 80% 0%, var(--dark-color) 0%, var(--accent-color) 0%, var(--light-color) 27%, transparent 100%),
radial-gradient(142% 91% at -6% 74%, var(--accent-color) 4%, transparent 99%),
radial-gradient(142% 200% at 83% 77%, var(--dark-color) 20%, var(--accent-color) 39%, var(--light-color) 69%);
}
/*===================Desact. Default*/
input {
-webkit-appearance: none;
appearance: none;
}
a{
text-decoration: none;
}
/*===================Animation*/
@keyframes blink {
0% { color: var(--accent-color);}
15% { color: var(--accent-color-2);}
35% { color: var(--accent-color-2);}
50% { color: var(--accent-color);}
65% { color: var(--accent-color-2);}
85% { color: var(--accent-color-2);}
100% { color: var(--accent-color);}
}
@keyframes blinkBack {
0% { background-color: var(--accent-color);}
15% { background-color: var(--accent-color-2);}
35% { background-color: var(--accent-color-2);}
50% { background-color: var(--accent-color);}
65% { background-color: var(--accent-color-2);}
85% { background-color: var(--accent-color-2);}
100% { background-color: var(--accent-color);}
}
@keyframes float {
0% { transform: translateY(0px); }
35% { transform: translateY(1px); }
50% { transform: translateY(-10px); }
65% { transform: translateY(1px); }
100% { transform: translateY(0px); }
}
/*===================Classes générales*/
.windowStyle{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background-color: var(--light-color);
border-style: solid;
border-width: thin;
border-radius: 16.1px;
border-color: var(--dark-color);
}
.windowTitle{
width:100%;
height:50px;
background-color: var(--dark-color);
border-radius: 16.1px 16.1px 0 0;
font-family: 'lineal';
font-size: 16.1px;
color: var(--light-color);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
.windowTitleLower{
font-family: 'velvelyne';
font-weight: lighter;
font-size: 13.12px;
}
.closeBtn{
color: var(--light-color);
background-color: var(--dark-color);
border-style: solid;
border-width: thin;
border-radius: 16.1px;
border-color: var(--light-color);
width: 50px;
height: 33px;
align-items: center;
cursor: pointer;
}
.closeBtn:hover{
color: var(--dark-color);
background-color: var(--light-color);
}
.icon{
height:16.1px;
width:auto;
fill: currentColor;
}
.windowContent{
height:77%;
width:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
v0-appel-projet/src/components/AboutPannel.vue
+95
View File
@@ -0,0 +1,95 @@
<script setup>
import CloseIcon from '../assets/close.svg'
</script>
<template>
<div id="aboutContainer" class="windowStyle">
<div class="windowTitle">
<p>
<b class="windowTitleLower">À Propos du collectif</b>
<br>
Drags and Nerds:
</p>
<button type="button" class="closeBtn" @click="$emit('close')">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent">
<div id="aboutText">
<div>
Nous sommes un collectif antifasciste, nous sommes opposéxs à toute forme d’oppression et <b id="accentAbout">nous condamnons:</b>
<p id="accentAbout">
&gt; le racisme
<br>
&gt; la misogynie
<br>
&gt; les queerphobies
<br>
&gt; la grossophobie
<br>
&gt; le validisme
<br>
&gt; le classisme
<br>
&gt; la putophobie
</p>
On veut que nos soirées soient centrées autour de l’inclusivité : chacunx doit s’y sentir bien, nous voulons créer du lien entre les différentes communautés (nerds, LGBTQIA+, les personnes racisées, les personnes handi, les bricoleuxes, les personnes précaires etc…)
<br>
Pour cette raison, nous imposons notamment <b id="accentAbout">le port du masque FFP2 pour toutes les activités se déroulant à l'intérieur.</b>
<br>
On veut aussi que nos soirées soient respectueuses de l’environnement (il faut utiliser un maximum de matériaux de récupérations) et véganes (pas de vente de produits d’origine animale).
</div>
</div>
</div>
</div>
</template>
<style scoped>
#aboutContainer{
width: 95%;
height: 30%;
position: fixed;
top: 38%;
left: 2.5%;
z-index: 66;
cursor: ns-resize;
}
#aboutText{
overflow-y: scroll;
scroll-behavior: smooth;
padding-left: 10px;
padding-right: 15px;
padding-top: 10px;
text-align: left;
color: var(--dark-color);
font-weight: bold;
font-family: 'velvelyne';
font-size: 16.1px;
}
#accentAbout{
font-family: 'lineal';
font-size: 21px;
}
/*=======================Format PC*/
@media(min-width: 1000px){
#aboutContainer{
width: 20%;
height: 50%;
top: 3.33%;
left: 3.33%;
}
}
</style>
<script>
export default {
name : 'AboutPannel',
emits:['close'],
mounted(){
console.log("About pannel is loaded!");
}
};
</script>
v0-appel-projet/src/components/ContactPannel.vue
+131
View File
@@ -0,0 +1,131 @@
<script setup>
import CloseIcon from '../assets/close.svg'
</script>
<template>
<div id="contactContainer" class="windowStyle">
<div class="windowTitle">
<p>Contacts:</p>
<button type="button" class="closeBtn" @click="$emit('close')">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent" id="contactContent">
<div id="contactCardContainer">
<a href="#" class="contactLink">
<div class="contactCard">
<div id="contactName">Urazoria</div>
<div id="contactField">Perf Drag</div>
</div>
</a>
<a href="#" class="contactLink">
<div class="contactCard">
<div id="contactName">Kiwi</div>
<div id="contactField">Perf Nerds</div>
</div>
</a>
<a href="#" class="contactLink">
<div class="contactCard">
<div id="contactName">Vega</div>
<div id="contactField">Scéno</div>
</div>
</a>
</div>
</div>
</div>
</template>
<style scoped>
#contactCardContainer{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width:95%;
height:91%;
margin-top: 1%;
}
.contactCard{
width:100%;
height:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
color: var(--dark-color);
font-weight: bold;
font-family: 'velvelyne';
font-size: 16.1px;
border-style: solid;
border-color: var(--dark-color);
border-width: thin;
border-radius: 13.12px;
}
.contactCard:hover{
animation: blinkBack 10s infinite;
}
.contactLink{
position:relative;
width: 100%;
height:100%;
display:flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
#contactContainer{
width: 95%;
height: 22.2%;
position: fixed;
top: 68.8%;
left: 2.5%;
z-index: 66;
}
#contactField{
font-family: 'lineal';
font-size: 20px;
}
#contactContent{
position:relative;
height:100%;
}
/*=======================Format PC*/
@media(min-width: 1000px){
#contactContainer{
width: 20%;
height: 55%;
top: 40%;
left: 79%;
}
#contactCardContainer{
flex-direction: column;
margin-top: 3.33%;
}
.contactCard{
width: 93%;
}
.contactLink{
margin-bottom: 5%;
}
}
</style>
<script>
export default {
name : 'ContactPannel',
emits:['close'],
mounted(){
console.log("Contact pannel is loaded!");
}
};
</script>
v0-appel-projet/src/components/WorkshopPannel.vue
+116
View File
@@ -0,0 +1,116 @@
<script setup>
import CloseIcon from '../assets/close.svg'
</script>
<template>
<div id="workshopContainer" class="windowStyle">
<div class="windowTitle">
<p>
Atelier Drags and Nerds 1/3
</p>
<button type="button" class="closeBtn" @click="$emit('close')">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent">
<div id="workshopText">
<p>
A toutes les drags, tous les nerds et l'ensemble des personnes entre les deux !<br/>
Vous êtes invité·es à participer aux ateliers meetup Drags&Nerds !
</p>
<p>
Le premier atelier meetup c'est le <strong id="accentWS"><time datetime="2026-03-21">21 Mars 2026</time> <br>
au <a href="https://labolyon.fr">Laboratoire Ouvert Lyonnais</a></strong><br>7 Place Louis Chazette 69001 Lyon
</p>
<p>
Que vous aimiez dessiner, coudre et crafter des costumes à paillettes.
Coder, souder, clouer, imprimer en 3D ou en 2D...
Que votre truc ce soit d'écrire des histoires toutes plus queer les unes que les autres, des poèmes lyriques ou encore du code source.
Drags&Nerds c'est tout ça et bien plus.
</p>
<p>
Pendant les ateliers, on prépare nos performances pour le grand drag show du <time datetime="2026-05-22">22 Mai 2026</time> au Grrrnd Zero.<br/>
On construit des scenes, des histoires, des makeups et des costumes.
On met tout en place pour que le 22 mai prochain, on puisse briller sur la grande scène du Grrrnd Zero.
</p>
<p>
Tu as envie de faire du lips sync ? De jouer de ton synthé ?
Ou juste de donner un coup de pouce a des drags pour leurs show.
Il y a une place pour toi.
</p>
<p>
<strong id="accentWS">Venez, quelque soit votre intérêt spécifique.</strong>
</p>
</div>
</div>
</div>
</template>
<style scoped>
/*
<div style="margin-left: -3rem; width: calc(100% + 3rem); text-align: center; margin-top: 3rem;">
<p style="font-size: 1.2em; font-weight: bold; padding: 0;">
<a style="display: block; text-align: center;" href="https://drags-nerds.net/">drags-nerds.net</a>
</p>
<script type="module" src="https://esm.sh/webcomponent-qr-code"></script>
<qr-code data="https://drags-nerds.net/"></qr-code>
</div>
*/
#workshopContainer{
width: 95%;
height: 36%;
position: fixed;
top: 1.61%;
left: 2.5%;
z-index: 66;
cursor: ns-resize;
}
a{
color: var(--accent-color);
cursor: pointer;
}
#workshopText{
overflow-y: scroll;
scroll-behavior: smooth;
padding-left: 10px;
padding-right: 15px;
text-align: left;
color: var(--dark-color);
font-weight: bold;
font-family: 'velvelyne';
font-size: 16.1px;
}
#accentWS{
font-family: 'lineal';
font-size: 21px;
}
#workshopText > p:first-of-type {
background: black;
color: var(--dark-color);
margin-top: 3.33px;
padding-left: 3.33px;
animation: blinkBack 10s infinite;
}
/*=======================Format PC*/
@media(min-width: 1000px){
#workshopContainer{
width: 44.4%;
height: 33.3%;
top: 3.33%;
left: 25%;
}
}
</style>
<script>
export default {
name : 'WorkshopPannel',
emits:['close'],
mounted(){
console.log("Workshop pannel pannel is loaded!");
}
};
</script>
v0-appel-projet/src/main.js
+6 -1
View File
@@ -4,13 +4,18 @@ import './assets/style.css'
// import app vue racine
import App from './App.vue'
// import composants
import AboutPannel from './components/AboutPannel.vue'
import ContactPannel from './components/ContactPannel.vue'
import WorkshopPannel from './components/WorkshopPannel.vue'
// création app racine
const app = createApp(App);
//Composants
app.component('aboutPannel', AboutPannel);
app.component('contactPannel', ContactPannel);
app.component('workshopPannel', WorkshopPannel);