423 lines
8.4 KiB
Vue
423 lines
8.4 KiB
Vue
<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>
|
|
<imagePannel></imagePannel>
|
|
<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">> 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;
|
|
}
|
|
|
|
/*=========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: 5%;
|
|
}
|
|
|
|
#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 33s 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;
|
|
z-index: 34;
|
|
}
|
|
|
|
#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;
|
|
z-index: 33;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#joinUs:hover{
|
|
animation: none;
|
|
}
|
|
|
|
/*============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: 16.1vh;
|
|
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!");
|
|
}
|
|
};
|
|
</script>
|