init: Ajout de git au projet
projet: création d'un site avec une mise en page générative
état : le script de mise en page générative est fonctionnel et la
structure globale est en place
bug#1: problème d'itération dans l'ajout des graff au contenu de la mise
en page
task#1: terminer le formulaire de contact (script + ajustement estétique
design à detrminer{
-> application du programme à une grande qté de donnée (choix da)
-> lien entre thème et contenu
-> panneau liens externes
-> source musique officielle
-> panneau évènement temporaire
}
This commit is contained in:
+39
@@ -0,0 +1,39 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
||||
.eslintcache
|
||||
|
||||
# Cypress
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Vitest
|
||||
__screenshots__/
|
||||
|
||||
# Vite
|
||||
*.timestamp-*-*.mjs
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
# vue_apps
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Recommended Browser Setup
|
||||
|
||||
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
|
||||
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
|
||||
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
|
||||
- Firefox:
|
||||
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
|
||||
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr" id="the_void">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<!--vue app for music player -->
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<!--<link rel="stylesheet" type="text/css" href="/assets/main_pageStyle.css">-->
|
||||
<title>VGA_NAR6_TA</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
Generated
+2583
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "vue_apps",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.28"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.4",
|
||||
"vite": "^7.3.1",
|
||||
"vite-plugin-vue-devtools": "^8.0.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
+24
@@ -0,0 +1,24 @@
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<playr></playr>
|
||||
</Teleport>
|
||||
<colorbtn></colorbtn>
|
||||
<maincontent></maincontent>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name : 'App',
|
||||
mounted(){
|
||||
console.log("Vue general app is loaded!");
|
||||
document.documentElement.setAttribute("data-theme", "green");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,176 @@
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['containerTheme',{closed:!isDisplayed}]">
|
||||
<div class="theme_panel">
|
||||
<button type="button" class="colorSelect" @click="purpleTheme" id="purple"></button>
|
||||
<button type="button" class="colorSelect" @click="greenTheme" id="vert"></button>
|
||||
<button type="button" class="colorSelect" @click="orangeTheme" id="orange"></button>
|
||||
</div>
|
||||
<button type="button" id="open_btn" @click="openTheme">
|
||||
<p :class="['rotateBtnTheme',{rotated:isDisplayed}]">></p>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.containerTheme{
|
||||
position:fixed;
|
||||
background-color:transparent;
|
||||
width:auto;
|
||||
height:200px;
|
||||
left:-7px;
|
||||
top:150px;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
overflow: hidden;
|
||||
z-index:15;
|
||||
}
|
||||
|
||||
.rotateBtnTheme{
|
||||
margin-top:1px;
|
||||
transform: rotate(0);
|
||||
transition: transform 0.3s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.rotateBtnTheme.rotated{
|
||||
margin-left:-5px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/*===============format tres haut*/
|
||||
@media (max-width:500px){
|
||||
.theme_panel{
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:space-around;
|
||||
background-color: var(--dark-color);
|
||||
width: 33px;
|
||||
height:150px;
|
||||
border-radius:0 30px 30px 0;
|
||||
padding-left:15px;
|
||||
}
|
||||
.colorSelect{
|
||||
height:20px;
|
||||
width:20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#open_btn{
|
||||
top:33%;
|
||||
font-size:15px;
|
||||
height:20px;
|
||||
width:20px;
|
||||
border-radius:0 10px 10px 0;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.containerTheme.closed{
|
||||
transform: translateX(-42px);
|
||||
}
|
||||
}
|
||||
/*===============format large*/
|
||||
@media (min-width:500px){
|
||||
.theme_panel{
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:space-around;
|
||||
background-color: var(--dark-color);
|
||||
width: 50px;
|
||||
height:200px;
|
||||
border-radius:0 30px 30px 0;
|
||||
padding-left:21px;
|
||||
}
|
||||
.colorSelect{
|
||||
height:33px;
|
||||
width:33px;
|
||||
border-radius:30px;
|
||||
}
|
||||
#open_btn{
|
||||
top:50%;
|
||||
font-size:22px;
|
||||
height:33px;
|
||||
width:33px;
|
||||
}
|
||||
|
||||
.containerTheme{
|
||||
transform: translateX(0);
|
||||
transition: transform 0.3s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.containerTheme.closed{
|
||||
transform: translateX(-70px);
|
||||
}
|
||||
}
|
||||
|
||||
.colorSelect{
|
||||
border-color: var(--light-color);
|
||||
border-style:solid;
|
||||
border-width:thin;
|
||||
}
|
||||
.colorSelect:hover{
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
#open_btn{
|
||||
background-color: var(--dark-color);
|
||||
text-align: center;
|
||||
border-radius: 0 30px 30px 0;
|
||||
border-color: var(--light-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
font-family: 'lineal';
|
||||
position:relative;
|
||||
left:0;
|
||||
color: var(--light-color);
|
||||
}
|
||||
|
||||
#open_btn:hover{
|
||||
color: var(--dark-color);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
#purple{
|
||||
background-color:#C303FF;
|
||||
}
|
||||
|
||||
#vert{
|
||||
background-color:#33FF77;
|
||||
}
|
||||
|
||||
#orange{
|
||||
background-color:#FFA64D;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name : 'ColorBtn',
|
||||
methods:{
|
||||
openTheme(){
|
||||
this.isDisplayed = !this.isDisplayed;
|
||||
},
|
||||
purpleTheme(){document.documentElement.setAttribute("data-theme", "purple")},
|
||||
orangeTheme(){document.documentElement.setAttribute("data-theme", "orange")},
|
||||
greenTheme(){document.documentElement.setAttribute("data-theme", "green")}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
isDisplayed:false
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log("ColorBtn is loaded!");
|
||||
this.isDisplayed = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,391 @@
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mainContainer">
|
||||
<topbar></topbar>
|
||||
<div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" v-for="item in this.partOneItem" :key="item.id" :style="{
|
||||
left: item.x + 'px',
|
||||
top: item.y + 'px'
|
||||
}">
|
||||
<img :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" :id="'image'+item.id">
|
||||
|
||||
</div>
|
||||
<div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" v-for="item in this.partTwoItem" :key="item.id" :style="{
|
||||
left: item.x + 'px',
|
||||
top: item.y + 'px'
|
||||
}">
|
||||
<img :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" :id="'image'+item.id">
|
||||
|
||||
</div>
|
||||
<div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" v-for="item in this.partThreeItem" :key="item.id" :style="{
|
||||
left: item.x + 'px',
|
||||
top: item.y + 'px'
|
||||
}">
|
||||
<img :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" :id="'image'+item.id">
|
||||
|
||||
</div>
|
||||
<button type="button" id="regenBtn" class="floating" @click="generateContent">RELOAD !</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.imgContainer{
|
||||
width:333px;
|
||||
height:333px;
|
||||
position:fixed;
|
||||
z-index:0;
|
||||
align-items:center;
|
||||
display:flex;
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
#regenBtn{
|
||||
text-align: center;
|
||||
border-radius: 30px;
|
||||
border-color:var(--light-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
font-family: 'lineal';
|
||||
font-size:20px;
|
||||
color: var(--light-color);
|
||||
width:100px;
|
||||
background-color: var(--dark-color);
|
||||
z-index: 10;
|
||||
position:fixed;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#regenBtn:hover{
|
||||
background-color:var(--accent-color);
|
||||
color:var(--dark-color);
|
||||
}
|
||||
|
||||
.imgStyle{
|
||||
height:auto;
|
||||
z-index:1;
|
||||
}
|
||||
/*Highlights z-index*/
|
||||
div.highlightItem{
|
||||
z-index: 3;
|
||||
}
|
||||
div.highlightMax{
|
||||
z-index: 4;
|
||||
}
|
||||
div.graffStyle{
|
||||
z-index:4;
|
||||
position:relative;
|
||||
margin-top:-200px;
|
||||
}
|
||||
|
||||
/*===============format large*/
|
||||
@media (min-width:815px){
|
||||
.imgStyle{
|
||||
width:250px;
|
||||
}
|
||||
|
||||
#regenBtn{
|
||||
left:3.33%;
|
||||
bottom:3.33%;
|
||||
}
|
||||
|
||||
/*Highlights size*/
|
||||
.imgStyle.highlightItem{
|
||||
width:333px;
|
||||
height:auto;
|
||||
z-index:3;
|
||||
}
|
||||
.imgStyle.highlightMax{
|
||||
width:550px;
|
||||
height:auto;
|
||||
z-index:3;
|
||||
}
|
||||
.imgStyle.graffStyle{
|
||||
width:150px;
|
||||
height:auto;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*===============format haut*/
|
||||
@media (max-width:815px){
|
||||
.imgStyle{
|
||||
width:200px;
|
||||
}
|
||||
|
||||
#regenBtn{
|
||||
bottom: 3.33%;
|
||||
left: 3.33%;
|
||||
}
|
||||
|
||||
/*Highlights size*/
|
||||
.imgStyle.highlightItem{
|
||||
width:333px;
|
||||
height:auto;
|
||||
z-index:3;
|
||||
}
|
||||
.imgStyle.highlightMax{
|
||||
width:400px;
|
||||
height:auto;
|
||||
z-index:3;
|
||||
}
|
||||
.imgStyle.graffStyle{
|
||||
width:100px;
|
||||
height:auto;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
/*===============format tres haut*/
|
||||
@media (max-width:500px){
|
||||
.imgStyle{
|
||||
width:133px;
|
||||
}
|
||||
|
||||
#regenBtn{
|
||||
bottom: 15%;
|
||||
left:7.77%;
|
||||
}
|
||||
|
||||
/*Highlights size*/
|
||||
.imgStyle.highlightItem{
|
||||
width:250px;
|
||||
height:auto;
|
||||
z-index:3;
|
||||
}
|
||||
.imgStyle.highlightMax{
|
||||
width:333px;
|
||||
height:auto;
|
||||
z-index:3;
|
||||
}
|
||||
.imgStyle.graffStyle{
|
||||
width:50px;
|
||||
height:auto;
|
||||
z-index: 4;
|
||||
|
||||
}
|
||||
}
|
||||
/*work display
|
||||
|
||||
#partOne{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#partTwo{
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
#partThree{
|
||||
background-color: green;
|
||||
}*/
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name : 'MainContent',
|
||||
methods:{
|
||||
divideItem(){
|
||||
const half = Math.floor(this.maxItemCount/2);
|
||||
this.partOne = this.getRandomInt(0,half);
|
||||
this.partTwo = this.getRandomInt(0,half);
|
||||
this.partThree = this.maxItemCount-this.partTwo-this.partOne;
|
||||
console.log(this.partOne,this.partTwo,this.partThree);
|
||||
},
|
||||
getRandomInt(min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min+1)) + min;
|
||||
},
|
||||
createEmptyArray(){
|
||||
for (let i = 0;i<this.partOne;i++){
|
||||
this.partOneItem.splice(i,0,this.randomItems[i]);
|
||||
}
|
||||
for (let j = this.partOne;j<this.partTwo+this.partOne-1;j++){
|
||||
this.partTwoItem.splice(j,0,this.randomItems[j]);
|
||||
}
|
||||
for (let k = this.partTwo+this.partOne-1;k<this.randomItems.length;k++){
|
||||
this.partThreeItem.splice(k,0,this.randomItems[k]);
|
||||
}
|
||||
console.log(this.partOneItem,this.partTwoItem,this.partThreeItem);
|
||||
},
|
||||
genCoord(chain){
|
||||
const maxX = window.innerWidth;
|
||||
const maxY = window.innerHeight;
|
||||
|
||||
// position initiale aléatoire
|
||||
let x = this.getRandomInt(0, maxX-this.marjSide);
|
||||
let y = this.getRandomInt(0, this.marjSide);
|
||||
|
||||
// vecteur direction initial aléatoire mais biais vers le bas
|
||||
let dirX = (Math.random() - 0.5) * 5;
|
||||
let dirY = Math.random() * 2 + 0.7;
|
||||
|
||||
for (let i = 0; i < chain.length; i++){
|
||||
|
||||
// assigner position
|
||||
chain[i].x = x;
|
||||
chain[i].y = y;
|
||||
|
||||
// distance contrôlée
|
||||
const distance = this.getRandomInt(100, this.marjSide);
|
||||
|
||||
// perturbation continue
|
||||
dirX += (Math.random() - 0.5) * 1.2;
|
||||
dirY += (Math.random() - 0.5) * 0.5;
|
||||
|
||||
// perturbation brutale occasionnelle
|
||||
if (Math.random() < 0.5){
|
||||
dirX += (Math.random() - 0.5) * 3;
|
||||
dirY += (Math.random() - 0.5) * 1;
|
||||
}
|
||||
|
||||
// biais vers le bas
|
||||
dirY += .2;
|
||||
|
||||
// normaliser
|
||||
const length = Math.sqrt(dirX*dirX + dirY*dirY);
|
||||
dirX /= length;
|
||||
dirY /= length;
|
||||
|
||||
// déplacement
|
||||
x += dirX * distance;
|
||||
y += dirY * distance;
|
||||
|
||||
// rebond horizontal
|
||||
if (x <= 0){
|
||||
x = 0;
|
||||
dirX *= -1;
|
||||
}
|
||||
|
||||
if (x >= maxX-this.marjSide){
|
||||
x = maxX-this.marjSide;
|
||||
dirX *= -1;
|
||||
}
|
||||
|
||||
//limite en bas
|
||||
if (y>=maxY-this.marjBot){
|
||||
y = maxY-this.marjBot;
|
||||
dirY *= -1;
|
||||
}
|
||||
|
||||
//limite haut
|
||||
if (y<=this.marjTop){
|
||||
y = this.marjTop;
|
||||
dirY *= -1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
calcMarj(){
|
||||
const maxX = window.innerWidth;
|
||||
if (maxX>=815){
|
||||
this.marjBot = 444;
|
||||
this.marjTop = 80;
|
||||
this.marjSide = 333;
|
||||
console.log(this.marjTop,this.marjBot,this.marjSide);
|
||||
return
|
||||
}
|
||||
if (maxX<=500){
|
||||
this.marjBot = 300;
|
||||
this.marjTop = 80;
|
||||
this.marjSide = 300;
|
||||
}else{
|
||||
this.marjBot = 300;
|
||||
this.marjTop = 80;
|
||||
this.marjSide = 250;
|
||||
}
|
||||
console.log(this.marjTop,this.marjBot,this.marjSide);
|
||||
},
|
||||
selectHighlight(){
|
||||
let index = [];
|
||||
let hClass = [];
|
||||
for(let k=0; k<this.isHighlight.length; k++){
|
||||
index.splice(k,0,this.isHighlight[k][0]);
|
||||
hClass.splice(k,0,this.isHighlight[k][1]);
|
||||
};
|
||||
console.log(index,hClass);
|
||||
for (let i=0; i<this.items.length; i++){
|
||||
let selectedItem = this.items[i].id;
|
||||
if (index.includes(selectedItem)){
|
||||
let selectIndex = index.indexOf(selectedItem);
|
||||
this.items[i].isHighlight = hClass[selectIndex];
|
||||
}else{
|
||||
continue
|
||||
}
|
||||
}
|
||||
console.log(this.items)
|
||||
},
|
||||
selectRandomGraffs(){
|
||||
const graffCount = this.graffs.length-1;
|
||||
let a = this.getRandomInt(0,graffCount);
|
||||
let b = 0;
|
||||
let c = 0;
|
||||
do{
|
||||
b = this.getRandomInt(0,graffCount);
|
||||
} while (a == b);
|
||||
|
||||
do{
|
||||
c = this.getRandomInt(0,graffCount);
|
||||
} while (a == c || c == b);
|
||||
console.log(a,b,c);
|
||||
this.items.push(this.graffs[a],this.graffs[b],this.graffs[c]);
|
||||
},
|
||||
generateContent(){
|
||||
console.log(this.items);
|
||||
this.selectRandomGraffs();
|
||||
this.randomItems = this.items.sort(() => Math.random()-0.5),
|
||||
console.log(this.randomItems);
|
||||
this.maxItemCount = this.randomItems.length;
|
||||
this.divideItem();
|
||||
this.createEmptyArray();
|
||||
this.calcMarj();
|
||||
this.genCoord(this.partOneItem);
|
||||
this.genCoord(this.partTwoItem);
|
||||
this.genCoord(this.partThreeItem);
|
||||
console.log('Content has been generated!')
|
||||
}
|
||||
},
|
||||
data(){
|
||||
const impImg = import.meta.glob('@/assets/mainData/noirRose/*.png',{eager:true,import:'default'});
|
||||
const impGraff = import.meta.glob('@/assets/mainData/graffBackground/*.png',{eager:true,import:'default'});
|
||||
const imgData = Object.values(impImg);
|
||||
const graffData = Object.values(impGraff);
|
||||
return{
|
||||
items: imgData.map((src, index) => ({
|
||||
id: index,
|
||||
src: src,
|
||||
x: 0,
|
||||
y: 0,
|
||||
isHighlight: 0
|
||||
})),
|
||||
graffs: graffData.map((src, index) => ({
|
||||
id: index,
|
||||
src: src,
|
||||
x: 0,
|
||||
y: 0,
|
||||
isHighlight: 3
|
||||
})),
|
||||
isHighlight:[[2,1],[6,1],[11,2]],
|
||||
randomItems: null,
|
||||
maxItemCount: 0,
|
||||
marjTop:0,
|
||||
marjBot:0,
|
||||
marjSide:0,
|
||||
partOne:0,
|
||||
partTwo:0,
|
||||
partThree:0,
|
||||
partOneItem:[],
|
||||
partTwoItem:[],
|
||||
partThreeItem:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.selectHighlight();
|
||||
this.generateContent();
|
||||
console.log("Main content is loaded!");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+462
@@ -0,0 +1,462 @@
|
||||
<script setup>
|
||||
//Directory pour audio
|
||||
import audioFile01 from './assets/1.mp3'
|
||||
import audioFile02 from './assets/2.mp3'
|
||||
import audioFile03 from './assets/3.mp3'
|
||||
import audioFile04 from './assets/4.mp3'
|
||||
import audioFile05 from './assets/5.mp3'
|
||||
import audioFile06 from './assets/6.mp3'
|
||||
import audioFile07 from './assets/7.mp3'
|
||||
//Directory pour Cover
|
||||
import image01 from './assets/cover/1.png'
|
||||
import image02 from './assets/cover/2.png'
|
||||
import image03 from './assets/cover/3.png'
|
||||
import image04 from './assets/cover/4.png'
|
||||
import image05 from './assets/cover/5.png'
|
||||
import image06 from './assets/cover/6.png'
|
||||
import image07 from './assets/cover/7.png'
|
||||
|
||||
console.log("Player is loading...")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="containerAnimation" :class="{open:playerIsActive}">
|
||||
<button type="button" id="togglePlayer_btn" class="player_ctrl" @click="togglePlayer">
|
||||
<div class="rotatingBtn" :class="{upsideDown:playerIsActive}">v</div>
|
||||
</button>
|
||||
<div class="bot">
|
||||
<a id = "linkYT" href="#">
|
||||
<div class="smallCredit">
|
||||
<p id="artist">{{artist}} - {{track}}</p>
|
||||
</div>
|
||||
<div class="player_content" id="credit">
|
||||
<img id="cover" :src="imgSrc" alt="cover">
|
||||
<div id="creditText">
|
||||
<p id="artist">{{artist}}</p>
|
||||
<p id="track">{{track}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div id="controls">
|
||||
<button class="player_ctrl" type="button" id="back" @click="prevTrack"><</button>
|
||||
<button class="player_ctrl" type="button" id="play" @click="playTrack">o</button>
|
||||
<button class="player_ctrl" type="button" id="next" @click="nextTrack">></button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/*====================Gamme color:
|
||||
//#380052 violet var(--dark-color);
|
||||
//#00FF76 vert var(--accent-color);
|
||||
//#C303FF magenta var(--light-color);
|
||||
//#FF8000 vert pale
|
||||
*/
|
||||
.containerAnimation{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
position:fixed;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
transition: transform 0.3s ease;
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
.containerAnimation.open{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
margin-bottom:0;
|
||||
position:fixed;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.rotatingBtn{
|
||||
margin-top: 5px;
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.rotatingBtn.upsideDown{
|
||||
transform: rotate(0);
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.bot{
|
||||
z-index:1;
|
||||
border-radius: 30px 0 0 0;
|
||||
}
|
||||
|
||||
.player_ctrl{
|
||||
text-align: center;
|
||||
border-radius: 30px;
|
||||
border-color:var(--light-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
font-family: 'lineal';
|
||||
font-size:22px;
|
||||
color: var(--light-color);
|
||||
width:50px;
|
||||
background-color: var(--dark-color);
|
||||
}
|
||||
|
||||
.player_ctrl:hover{
|
||||
background-color:var(--accent-color);
|
||||
color:var(--dark-color);
|
||||
}
|
||||
|
||||
.player_content{
|
||||
margin-top:20px;
|
||||
margin-left: 10px;
|
||||
padding-left: 5px;
|
||||
padding-bottom: 2px;
|
||||
width: 100%;
|
||||
height: 77%;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
#togglePlayer_btn{
|
||||
position:relative;
|
||||
bottom:0px;
|
||||
z-index:0;
|
||||
border-radius: 30px 30px 0 0;
|
||||
height:33px;
|
||||
width:33px;
|
||||
|
||||
}
|
||||
|
||||
#cover{
|
||||
width:175px;
|
||||
height:175px;
|
||||
}
|
||||
|
||||
#controls{
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
padding:10px 0 15px 0;
|
||||
}
|
||||
|
||||
#credit{
|
||||
font-family: 'pressStart2P';
|
||||
color: var(--dark-color);
|
||||
font-weight: lighter;
|
||||
padding-top: 5px;
|
||||
display: flex;
|
||||
flex-direction:row;
|
||||
justify-content:flex-start;
|
||||
flex-flow:wrap;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#artist{
|
||||
font-size:10px;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
#track{
|
||||
font-size: 7px;
|
||||
margin-top: -3.33px;
|
||||
width:80px;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
#credit:hover{
|
||||
color: var(--light-color);
|
||||
}
|
||||
|
||||
#linkYT{
|
||||
width: 100%;
|
||||
height: 77%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*===============format large*/
|
||||
@media (min-width:815px){
|
||||
.bot{
|
||||
position: relative;
|
||||
width: 333px;
|
||||
height: 300px;
|
||||
background-color:var(--dark-color);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#togglePlayer_btn{
|
||||
right:-133px;
|
||||
}
|
||||
|
||||
#creditText{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:flex-start;
|
||||
padding-top: -33px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#linkYT{
|
||||
height: 77%;
|
||||
}
|
||||
|
||||
.containerAnimation{
|
||||
transform: translateY(300px);
|
||||
}
|
||||
.containerAnimation.open{
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.smallCredit{
|
||||
visibility:hidden;
|
||||
height:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*===============format haut*/
|
||||
@media (max-width:815px){
|
||||
.bot{
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height:100px;
|
||||
background-color:var(--dark-color);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#togglePlayer_btn{
|
||||
margin-left:77%;
|
||||
}
|
||||
|
||||
#creditText{
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
#linkYT{
|
||||
width:100%;
|
||||
height: 10%;
|
||||
margin-top:-200px;
|
||||
}
|
||||
#containerAnimation{
|
||||
width:100%;
|
||||
}
|
||||
.containerAnimation{
|
||||
transform: translateY(100px);
|
||||
}
|
||||
.containerAnimation.open{
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.smallCredit{
|
||||
background-color: var(--accent-color);
|
||||
visibility:visible;
|
||||
width:300px;
|
||||
margin-top:-33px;
|
||||
height : 33px;
|
||||
font-family: 'pressStart2P';
|
||||
font-size :14px;
|
||||
color: var(--dark-color);
|
||||
margin-left: 50px;
|
||||
align-items:center;
|
||||
padding-left:5px;
|
||||
border-width: 5px;
|
||||
border-color: var(--accent-color);
|
||||
will-change: border-color;
|
||||
}
|
||||
|
||||
#artist{
|
||||
padding-top:5px;
|
||||
padding-left:20px;
|
||||
}
|
||||
|
||||
.smallCredit:hover{
|
||||
background-color: var(--dark-color);
|
||||
border-color: var(--accent-color);
|
||||
color: var(--light-color);
|
||||
}
|
||||
|
||||
.player_content{
|
||||
visibility:hidden;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/*===============format tres haut*/
|
||||
@media (max-width:500px){
|
||||
.bot{
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height:100px;
|
||||
background-color:var(--dark-color);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
right:-20px;
|
||||
}
|
||||
|
||||
#togglePlayer_btn{
|
||||
margin-left:333px;
|
||||
}
|
||||
|
||||
#creditText{
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
#linkYT{
|
||||
width:100%;
|
||||
height: 10%;
|
||||
margin-top:-200px;
|
||||
}
|
||||
#containerAnimation{
|
||||
width:100%;
|
||||
}
|
||||
.containerAnimation{
|
||||
transform: translateY(100px);
|
||||
}
|
||||
.containerAnimation.open{
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.smallCredit{
|
||||
background-color: var(--accent-color);
|
||||
visibility:visible;
|
||||
width:300px;
|
||||
margin-top:-33px;
|
||||
height : 33px;
|
||||
font-family: 'pressStart2P';
|
||||
font-size :14px;
|
||||
color: var(--dark-color);
|
||||
margin-left: 50px;
|
||||
align-items:center;
|
||||
padding-left:5px;
|
||||
border-width: 5px;
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
#artist{
|
||||
padding-top:5px;
|
||||
padding-left:20px;
|
||||
}
|
||||
|
||||
.smallCredit:hover{
|
||||
background-color: var(--dark-color);
|
||||
border-color: var(--accent-color);
|
||||
color: var(--light-color);
|
||||
}
|
||||
|
||||
.player_content{
|
||||
visibility:hidden;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Player',
|
||||
methods:{
|
||||
togglePlayer(){
|
||||
this.playerIsActive = !this.playerIsActive;
|
||||
},
|
||||
updateContent(){
|
||||
const srcAudio = this.dataAudio[this.count];
|
||||
//check audio null
|
||||
if(this.audio){this.audio.pause()};
|
||||
this.audio = new Audio(srcAudio);
|
||||
this.audio.volume = 1;
|
||||
this.audio.loop = false;
|
||||
if(this.isPlaying){
|
||||
this.audio.play();
|
||||
};
|
||||
this.artist = this.dataArtist[this.count];
|
||||
this.track = this.dataTrack[this.count];
|
||||
this.imgSrc = this.dataCover[this.count];
|
||||
},
|
||||
playTrack(){
|
||||
if(this.isPlaying){
|
||||
this.audio.pause();
|
||||
}else{
|
||||
this.audio.play();
|
||||
}
|
||||
this.isPlaying = !this.isPlaying;
|
||||
},
|
||||
nextTrack(){
|
||||
if (this.count<this.maxCount){
|
||||
this.count += 1;
|
||||
this.updateContent();
|
||||
} else{
|
||||
this.count= 0;
|
||||
this.updateContent();
|
||||
};
|
||||
},
|
||||
prevTrack(){
|
||||
if (this.count>0){
|
||||
this.count -= 1;
|
||||
this.updateContent();
|
||||
} else{
|
||||
this.count = this.maxCount;
|
||||
this.updateContent();
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
playerIsActive:false,
|
||||
//Texte pour credit
|
||||
dataArtist: ["Surprise",
|
||||
"Ayesha Erotica",
|
||||
"M le Maudit",
|
||||
"Machine Girl",
|
||||
"M le Maudit",
|
||||
"Urumi",
|
||||
"K-Lone"],
|
||||
dataTrack: ["l'Inverse",
|
||||
"Yummy",
|
||||
"Mauvais Exemple",
|
||||
"neon white level music 24b",
|
||||
"Khedira",
|
||||
"Jolie (Shay Techno Cover)",
|
||||
"BB8"],
|
||||
dataAudio: [audioFile01,audioFile02,audioFile03,audioFile04,audioFile05,audioFile06,audioFile07],
|
||||
dataCover: [image01,image02,image03,image04,image05,image06,image07],
|
||||
imgSrc:null,
|
||||
artist:null,
|
||||
track:null,
|
||||
audio:null,
|
||||
isPlaying : false,
|
||||
count: 0,
|
||||
maxCount:0
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
// Check match lenght arrays
|
||||
console.log("Almost there...")
|
||||
if (this.dataTrack.length != this.dataAudio.length){
|
||||
console.log("Error 333 : check ur data, silly u ^^");
|
||||
}else{
|
||||
this.updateContent();
|
||||
this.maxCount = this.dataAudio.length-1;
|
||||
console.log("Player is up and runnin x333");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+367
@@ -0,0 +1,367 @@
|
||||
<script setup>
|
||||
import homeImgFile from './assets/13.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="topContainer">
|
||||
<header class="top">
|
||||
<div id="home">
|
||||
<a href="main_page.html">
|
||||
<img id="homeImg" :src="homeImgData" alt="HOME">
|
||||
</a>
|
||||
</div>
|
||||
<input id="search" name="search" class="top" type="search" placeholder="Rechercher...">
|
||||
<button type="button" class="btn_top" id="filters" @click="filtersToggle">v</button>
|
||||
<button type="button" class="btn_top" ref="buttonCapture" id="plus" @click="plusToggle">+</button>
|
||||
</header>
|
||||
<div id="about" ref="aboutPannel" v-show="aboutActive">
|
||||
<button type="button" id="close" @click="aboutToggle">X</button>
|
||||
<p id="about_text">
|
||||
si vous êtes là c'est que vous voulez en savoir plus,
|
||||
<br>
|
||||
alors voici quelques infos sur mes pratiques :
|
||||
<br><br>
|
||||
je pense qu'il ya déjà assez de vêtements sur cette Terre (merci la fast-fashion...) et qu'en recyclant ceux déjà existant on pourrat s'habiller PENDANT DES SIÈCLES!
|
||||
<br><br>
|
||||
je travaille une esthétique punk, brutaliste
|
||||
<br>
|
||||
et maximaliste, et utilise une matière première
|
||||
<br>
|
||||
de seconde main, voire recyclée, trouvée dans la rue,
|
||||
<br>
|
||||
les poubelles, etc.
|
||||
<br><br>
|
||||
je produit des accessoires à partir de rien (vraiment !)
|
||||
<br>
|
||||
et je custom des vêtements, découper, recoudre, rajouter, enlever, teinter, décolorer, démonter pour ré-assembler, tout est permis ^^
|
||||
<br><br>
|
||||
je travaille UNIQUEMENT sur commande ! x333
|
||||
<br><br>
|
||||
tout est vendu à un prix libre, convenu à l'avance,
|
||||
<br>
|
||||
en fonction des moyens de chacun.x.s
|
||||
<br><br>
|
||||
le troc d'objet, de service ou de conaissances
|
||||
<br>
|
||||
est également bienvenu, et peut remplacer
|
||||
<br>
|
||||
COMPLÈTEMENT un paiement monnayé
|
||||
<br><br>
|
||||
l'upcycling est un mythe vendu par des prétentieu.x.s
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="filters_pannel" ref="filtersPannel" v-show="filtreActive">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="plus_panel" ref="plusPannel" v-show="plusActive">
|
||||
<button type="button" class="btn_plusPan" id="ttt" @click="warnTattooToggle">TATTOO</button>
|
||||
<button type="button" class="btn_plusPan" id="contact" @click="contactToggle">CONTACT</button>
|
||||
<button type="button" class="btn_plusPan" id="about_plus" @click="aboutToggle">ABOUT</button>
|
||||
</div>
|
||||
|
||||
<div id="warn_tattoo" ref="tattooWarn" v-show="warnTattooActive">
|
||||
<p id="question_tattoo">Vous allez être redirigé vers Instagram!</p>
|
||||
<div id="rep_tattoo">
|
||||
<a href="https://www.instagram.com/noeu_3/?utm_source=ig_web_button_share_sheet">
|
||||
<button type="button" id="oui_ttt" ref="buttonCapture" class="btn_ttt">OK !</button>
|
||||
</a>
|
||||
<button type="button" id="non_ttt" class="btn_ttt" @click="warnTattooToggle">Annuler</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact_pannel" v-show="contactActive">
|
||||
<button type="button" id="close" @click="contactToggle">X</button>
|
||||
<p>Your Contact Info (so i can reply ^^) :</p>
|
||||
<input type="text" ref="yourContact" class="formContact" id="your_contact" placeholder="Phone or E-mail or Instagram or Signal">
|
||||
<p>Your Message :</p>
|
||||
<input type="text" ref="yourMessage" class="formContact" id="your_message" placeholder="Type whatever you want here ...">
|
||||
<button type="button" id="sendMsg">SEND !</button>
|
||||
</div>
|
||||
|
||||
<div id="welcome_msg">
|
||||
<button type="button" :class="{floating:!welcomeActive}" id="welcomeBtn" @click="welcomeToggle">{{welcomeBtnText}}</button>
|
||||
<div id="welcome_pannel" v-show="welcomeActive">
|
||||
<p id="welcomeTxt">
|
||||
hello !
|
||||
<br>
|
||||
bienvenue dans ma petite bulle sur l'Internet
|
||||
<br>
|
||||
(ce site est mis en page de manière générative,
|
||||
<br>
|
||||
à chaque fois que tu actualises ça change ^^)
|
||||
<br><br>
|
||||
je bricole beaucoup de choses, mais ici c'est plutôt
|
||||
<br>
|
||||
les vêtements, bijoux et accessoires <b>PIQUANT!</b>
|
||||
<br>
|
||||
n'hésite pas à rechercher ou filtrer
|
||||
<br>
|
||||
pour trouver ce que tu veux
|
||||
<br><br>
|
||||
dans le menu + tu pourras trouver
|
||||
<br>
|
||||
un formulaire de contact et de liens externes
|
||||
<br>
|
||||
vers d'autres projets persos
|
||||
<br>
|
||||
et ceux des copines
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/*=====================================================*/
|
||||
/*===================Welcome Pannel*/
|
||||
#welcome_msg{
|
||||
display:flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
z-index: 10;
|
||||
}
|
||||
#welcome_pannel{
|
||||
position:fixed;
|
||||
background-color: var(--dark-color);
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index:10;
|
||||
font-family: 'velvelyne';
|
||||
font-size:16px;
|
||||
color: var(--light-color);
|
||||
font-weight: lighter;
|
||||
width:333px;
|
||||
bottom:13.12%;
|
||||
left:33px;
|
||||
}
|
||||
|
||||
#welcomeBtn{
|
||||
position:fixed;
|
||||
text-align: center;
|
||||
border-radius: 30px;
|
||||
border-color:var(--light-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
font-family: 'lineal';
|
||||
font-size:22px;
|
||||
color: var(--light-color);
|
||||
width:50px;
|
||||
background-color: var(--dark-color);
|
||||
z-index:11;
|
||||
}
|
||||
|
||||
#welcomeBtn:hover{
|
||||
background-color:var(--accent-color);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
#welcomeTxt{
|
||||
margin-left: 13.12px;
|
||||
}
|
||||
|
||||
|
||||
/*===============format tres haut*/
|
||||
@media (max-width:500px){
|
||||
#welcomeBtn{
|
||||
left:7.77%;
|
||||
bottom:21%;
|
||||
}
|
||||
|
||||
#welcome_pannel{
|
||||
bottom:27%;
|
||||
left:7.77%;
|
||||
}
|
||||
}
|
||||
/*===============format large*/
|
||||
@media (min-width:500px){
|
||||
#welcomeBtn{
|
||||
left:3.33%;
|
||||
bottom:8.5%;
|
||||
}
|
||||
|
||||
#welcome_pannel{
|
||||
bottom:13.12%;
|
||||
left:3.33%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*=====================================================*/
|
||||
/*===================Contact Pannel*/
|
||||
|
||||
#contact_pannel{
|
||||
position:fixed;
|
||||
background-color: var(--dark-color);
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
padding: 10px;
|
||||
z-index:10;
|
||||
font-family: 'velvelyne';
|
||||
font-size:16px;
|
||||
color: var(--light-color);
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.formContact{
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
font-size : 16px;
|
||||
border-color:var(--light-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
color:var(--light-color);
|
||||
width:94%;
|
||||
font-weight:lighter;
|
||||
border-radius: 30px;
|
||||
background-color: var(--dark-color);
|
||||
padding-left: 15px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.formContact:focus{
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#your_message{
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#sendMsg{
|
||||
text-align: center;
|
||||
border-radius: 30px;
|
||||
border-color:var(--light-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
font-family: 'lineal';
|
||||
font-size:22px;
|
||||
color: var(--light-color);
|
||||
padding-top:5px;
|
||||
padding-bottom:5px;
|
||||
width:133px;
|
||||
background-color: var(--dark-color);
|
||||
margin-top:10px;
|
||||
margin-left:57%;
|
||||
}
|
||||
|
||||
#sendMsg:hover{
|
||||
background-color:var(--accent-color);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
/*===============format haut*/
|
||||
@media (max-width:815px){
|
||||
#contact_pannel{
|
||||
width:333px;
|
||||
top:133px;
|
||||
right:3.33%;
|
||||
}
|
||||
}
|
||||
|
||||
/*===============format tres haut*/
|
||||
@media (max-width:500px){
|
||||
#contact_pannel{
|
||||
width:333px;
|
||||
top:133px;
|
||||
right:3.33%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*===============format large*/
|
||||
@media (min-width:815px){
|
||||
#contact_pannel{
|
||||
width:333px;
|
||||
top:60px;
|
||||
left:50%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name : 'TopBar',
|
||||
methods: {
|
||||
plusToggle(){
|
||||
this.plusActive = !this.plusActive;
|
||||
if(this.filtreActive){this.filtreActive = false};
|
||||
if(this.aboutActive){this.aboutActive = false};
|
||||
if(this.warnTattooActive){this.warnTattooActive = false};
|
||||
if(this.contactActive){this.contactActive = false};
|
||||
},
|
||||
filtersToggle(){
|
||||
this.filtreActive = !this.filtreActive;
|
||||
if(this.plusActive){this.plusActive = false};
|
||||
if(this.aboutActive){this.aboutActive = false};
|
||||
if(this.warnTattooActive){this.warnTattooActive = false};
|
||||
if(this.contactActive){this.contactActive = false};
|
||||
},
|
||||
warnTattooToggle(){
|
||||
this.plusActive = false;
|
||||
this.warnTattooActive = !this.warnTattooActive;
|
||||
},
|
||||
contactToggle(){
|
||||
this.plusActive = !this.plusActive;
|
||||
this.contactActive = !this.contactActive;
|
||||
},
|
||||
aboutToggle(){
|
||||
this.plusActive = !this.plusActive;
|
||||
this.aboutActive = !this.aboutActive;
|
||||
},
|
||||
bodyClick(event){
|
||||
let targetElement = event.target.id;
|
||||
console.log(targetElement);
|
||||
if (targetElement=="plus"||targetElement=="oui_ttt"||targetElement=="ttt"||targetElement=="about_plus"){
|
||||
console.log("button targeted")
|
||||
return
|
||||
}else{
|
||||
this.closeAllPannels();
|
||||
}
|
||||
},
|
||||
closeAllPannels(){
|
||||
console.log("closing all pannels")
|
||||
this.warnTattooActive = false;
|
||||
this.plusActive = false;
|
||||
},
|
||||
welcomeToggle(){
|
||||
this.welcomeActive = !this.welcomeActive;
|
||||
if(this.welcomeActive){
|
||||
this.welcomeBtnText = "X";
|
||||
}else{
|
||||
this.welcomeBtnText = "o/";
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
homeImgData: homeImgFile,
|
||||
plusActive:false,
|
||||
filtreActive:false,
|
||||
contactActive:false,
|
||||
aboutActive:false,
|
||||
warnTattooActive:false,
|
||||
welcomeActive:false,
|
||||
welcomeBtnText:"o/"
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
document.body.addEventListener('click', this.bodyClick);
|
||||
console.log("Top bar is loaded!");
|
||||
this.welcomeToggle();
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.body.removeEventListener('click', this.bodyClick);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 881 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 619 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 602 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 799 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 900 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1011 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 893 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 MiB |
@@ -0,0 +1,508 @@
|
||||
/*====================Gamme color:
|
||||
//#380052 violet var(--dark-color);
|
||||
//#00FF76 vert var(--accent-color);
|
||||
//#C303FF magenta var(--light-color);
|
||||
//#FF8000 accent alt test orange
|
||||
*/
|
||||
:root[data-theme="purple"]{
|
||||
--dark-color: #380052;
|
||||
--light-color: #C303FF;
|
||||
--accent-color: #00FF76;
|
||||
}
|
||||
|
||||
:root[data-theme="orange"]{
|
||||
--dark-color: #E67300;
|
||||
--light-color: #99FF99;
|
||||
--accent-color: #00CC00;
|
||||
}
|
||||
|
||||
:root[data-theme="green"]{
|
||||
--dark-color: #004D33;
|
||||
--light-color: #33FF77;
|
||||
--accent-color: #E600E6;
|
||||
}
|
||||
/*====================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;
|
||||
}
|
||||
|
||||
/*====================Background*/
|
||||
body{
|
||||
background-color:var(--light-color);
|
||||
z-index:-4;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app{
|
||||
position:fixed;
|
||||
inset:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#the_void{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-width: thick;
|
||||
border-color: var(--dark-color);
|
||||
border-radius:30px;
|
||||
background-color:var(--light-color);
|
||||
z-index: -1;
|
||||
}
|
||||
/*===================Desact. Default*/
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.floating {
|
||||
position: fixed;
|
||||
animation: float 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
35% { transform: translateY(1px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
65% { transform: translateY(1px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
|
||||
/*=====================================================*/
|
||||
/*===================Player musique*/
|
||||
.player{
|
||||
visibility: visible;
|
||||
}
|
||||
/*=====================================================*/
|
||||
/*===================Barre superieure*/
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: var(--dark-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-top:5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.top{
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
font-size : 16px;
|
||||
border-color:var(--light-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
color:var(--light-color);
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
#search{
|
||||
font-weight:lighter;
|
||||
border-radius: 30px;
|
||||
background-color: var(--dark-color);
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#search:focus{
|
||||
outline: none;
|
||||
border-color: var(--accent-color);
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn_top{
|
||||
visibility: visible;
|
||||
border-radius: 30px;
|
||||
border-color:var(--light-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
background-color: var(--dark-color);
|
||||
font-family: 'lineal';
|
||||
font-size:22px;
|
||||
color: var(--light-color);
|
||||
width:50px;
|
||||
}
|
||||
|
||||
#plus{
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border-color: inherit;
|
||||
border-style: inherit;
|
||||
border-width: inherit;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
margin-left: 9px;
|
||||
padding-top:7px;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
#plus:hover{
|
||||
background-color: var(--accent-color);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.btn_top:hover{
|
||||
background-color: var(--accent-color);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
/*===========format large*/
|
||||
@media (min-width:815px){
|
||||
body{
|
||||
width:333%;
|
||||
height:100%;
|
||||
}
|
||||
#home{
|
||||
width: 211px;
|
||||
}
|
||||
#homeImg{
|
||||
transform: rotate(90deg);
|
||||
width: 112px;
|
||||
margin-top: -60px;
|
||||
margin-left: 55px;
|
||||
}
|
||||
|
||||
#search{
|
||||
width: 20%;
|
||||
margin-right: 0.33%;
|
||||
}
|
||||
|
||||
#filters{
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*===============format haut*/
|
||||
@media (max-width:815px){
|
||||
body{
|
||||
width:100%;
|
||||
height:333%;
|
||||
}
|
||||
|
||||
#home{
|
||||
width: 209px;
|
||||
}
|
||||
#homeImg{
|
||||
transform: rotate(90deg);
|
||||
width: 112px;
|
||||
margin-top: -60px;
|
||||
margin-left: 55px;
|
||||
}
|
||||
|
||||
#search{
|
||||
width: 33%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#filters{
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
#plus{
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/*===============format tres haut*/
|
||||
@media (max-width:500px){
|
||||
body{
|
||||
width:100%;
|
||||
height:333%;
|
||||
}
|
||||
|
||||
#home{
|
||||
width: 125px;
|
||||
}
|
||||
#homeImg{
|
||||
position: fixed;
|
||||
transform: rotate(90deg);
|
||||
width: 77px;
|
||||
margin-top: -25px;
|
||||
margin-left: 33px;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
#search{
|
||||
width: 36%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#filters{
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
#plus{
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/*=====================================================*/
|
||||
/*===================Panneau filtres*/
|
||||
#filters_pannel{
|
||||
position: fixed;
|
||||
background-color: var(--dark-color);
|
||||
width: 180px;
|
||||
border-radius: 30px;
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
/*===============format large*/
|
||||
@media (min-width:815px){
|
||||
#filters_pannel{
|
||||
top : 80px;
|
||||
margin-left: 31%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/*===============format haut*/
|
||||
@media (max-width:815px){
|
||||
#filters_pannel{
|
||||
top:80px;
|
||||
right:3.33%;
|
||||
height:33%;
|
||||
}
|
||||
}
|
||||
|
||||
/*===============format tres haut*/
|
||||
@media (max-width:500px){
|
||||
#filters_pannel{
|
||||
top:80px;
|
||||
right:3.33%;
|
||||
height:33%;
|
||||
}
|
||||
}
|
||||
/*=====================================================*/
|
||||
/*===================About*/
|
||||
|
||||
#about{
|
||||
position:fixed;
|
||||
background-color: var(--dark-color);
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
padding: 10px;
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
#close{
|
||||
text-align: center;
|
||||
border-radius: 30px;
|
||||
border-color:var(--light-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
font-family: 'lineal';
|
||||
font-size:22px;
|
||||
color: var(--light-color);
|
||||
width:50px;
|
||||
background-color: var(--dark-color);
|
||||
}
|
||||
|
||||
#close:hover{
|
||||
background-color:var(--accent-color);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
#about_text{
|
||||
font-family: 'velvelyne';
|
||||
font-size:16px;
|
||||
color: var(--light-color);
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
/*===============format haut*/
|
||||
@media (max-width:815px){
|
||||
#about{
|
||||
width:333px;
|
||||
top:133px;
|
||||
right:3.33%;
|
||||
}
|
||||
}
|
||||
|
||||
/*===============format tres haut*/
|
||||
@media (max-width:500px){
|
||||
#about{
|
||||
width:333px;
|
||||
top:80px;
|
||||
right:3.33%;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
/*===============format large*/
|
||||
@media (min-width:815px){
|
||||
#about{
|
||||
width:333px;
|
||||
top:60px;
|
||||
left:50%;
|
||||
}
|
||||
}
|
||||
|
||||
/*=====================================================*/
|
||||
/*===================Tattoo*/
|
||||
|
||||
#warn_tattoo{
|
||||
position:fixed;
|
||||
background-color: var(--dark-color);
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-style: solid;
|
||||
border-width: medium;
|
||||
border-color: var(--accent-color);
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.btn_ttt{
|
||||
text-align: center;
|
||||
border-radius: 30px;
|
||||
border-color:var(--light-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
font-family: 'lineal';
|
||||
font-size:22px;
|
||||
color: var(--light-color);
|
||||
width:100px;
|
||||
background-color: var(--dark-color);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn_ttt:hover{
|
||||
background-color:var(--accent-color);
|
||||
color:var(--dark-color);
|
||||
}
|
||||
|
||||
#rep_tattoo{
|
||||
width:100%;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding:10px 0 15px 0;
|
||||
}
|
||||
|
||||
#question_tattoo{
|
||||
font-family: 'velvelyne';
|
||||
font-size:16px;
|
||||
color: var(--light-color);
|
||||
font-weight: lighter;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#oui_ttt{
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
/*===============format haut*/
|
||||
@media (max-width:815px){
|
||||
#warn_tattoo{
|
||||
width:333px;
|
||||
top:33%;
|
||||
left:10%;
|
||||
}
|
||||
}
|
||||
|
||||
/*===============format large*/
|
||||
@media (min-width:815px){
|
||||
#warn_tattoo{
|
||||
width:333px;
|
||||
top:33%;
|
||||
left:33%;
|
||||
}
|
||||
}
|
||||
|
||||
/*=====================================================*/
|
||||
/*===================Plus */
|
||||
|
||||
#plus_panel{
|
||||
position:fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: none;
|
||||
margin-top:77px;
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
.btn_plusPan{
|
||||
text-align: center;
|
||||
border-radius: 30px;
|
||||
border-color:var(--light-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: lighter;
|
||||
font-size:16px;
|
||||
color: var(--light-color);
|
||||
width:150px;
|
||||
background-color: var(--dark-color);
|
||||
margin-bottom: 20px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.btn_plusPan:hover{
|
||||
background-color:var(--accent-color);
|
||||
color:var(--dark-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*===============format large*/
|
||||
@media (min-width:815px){
|
||||
#plus_panel{
|
||||
margin-left: 32%;
|
||||
}
|
||||
}
|
||||
|
||||
/*===============format haut*/
|
||||
@media (max-width:815px){
|
||||
#plus_panel{
|
||||
right:10px;
|
||||
}
|
||||
}
|
||||
|
||||
/*===============format tres haut*/
|
||||
@media (max-width:500px){
|
||||
#plus_panel{
|
||||
right:3.33%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
msg: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greetings">
|
||||
<h1 class="green">{{ msg }}</h1>
|
||||
<h3>
|
||||
You’ve successfully created a project with
|
||||
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2.6rem;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup>
|
||||
import WelcomeItem from './WelcomeItem.vue'
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||
import ToolingIcon from './icons/IconTooling.vue'
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||
import CommunityIcon from './icons/IconCommunity.vue'
|
||||
import SupportIcon from './icons/IconSupport.vue'
|
||||
|
||||
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<ToolingIcon />
|
||||
</template>
|
||||
<template #heading>Tooling</template>
|
||||
|
||||
This project is served and bundled with
|
||||
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||
+
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
|
||||
>Vue - Official</a
|
||||
>. If you need to test your components and web pages, check out
|
||||
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
||||
and
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||
/
|
||||
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
|
||||
|
||||
<br />
|
||||
|
||||
More instructions are available in
|
||||
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
|
||||
>.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<EcosystemIcon />
|
||||
</template>
|
||||
<template #heading>Ecosystem</template>
|
||||
|
||||
Get official tools and libraries for your project:
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||
you need more resources, we suggest paying
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
||||
(our official Discord server), or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||
>StackOverflow</a
|
||||
>. You should also follow the official
|
||||
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
||||
Bluesky account or the
|
||||
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||
X account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
</template>
|
||||
<template #heading>Support Vue</template>
|
||||
|
||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||
us by
|
||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
</template>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<i>
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="details">
|
||||
<h3>
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
i {
|
||||
top: calc(50% - 25px);
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||
<path
|
||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--mdi"
|
||||
width="24"
|
||||
height="24"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import Player from './Player.vue'
|
||||
import ColorBtn from './ColorBtn.vue'
|
||||
import MainContent from './MainContent.vue'
|
||||
import TopBar from './TopBar.vue'
|
||||
import './assets/main_pageStyle.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.component('playr', Player)
|
||||
app.component('colorbtn', ColorBtn)
|
||||
app.component('maincontent', MainContent)
|
||||
app.component('topbar', TopBar)
|
||||
|
||||
app.mount('#app')
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,23 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueDevTools(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
},
|
||||
server: {
|
||||
host: true,
|
||||
port: 5173,
|
||||
strictPort: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user