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)
This commit is contained in:
vgaNAR6ta committed
1 parent
cf2ce6ba2f
commit
e92655ac93
16 files changed
+1181
-2
No files matched your search
@@ -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">> 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!");
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user