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