edit: ajout typo et strutucre contenu menu informations
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85.1 99.94">
|
||||
<path d="M44.95,76.19h-10.74l-1.98,23.75H13.43l1.98-23.75H0v-18.8h17.1l1.41-16.96H0v-18.8h20.21L22.05,0h18.8l-1.84,21.63h10.74l1.84-21.63h18.8l-1.84,21.63h16.54v18.8h-18.24l-1.41,16.96h19.65v18.8h-21.35l-1.98,23.75h-18.8l1.98-23.75ZM46.65,57.39l1.41-16.96h-10.74l-1.41,16.96h10.74Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 433 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.81 117.86">
|
||||
<path d="M116.98,39.88c-4.56-7.84-10.78-14.04-18.67-18.59-7.83-4.52-16.53-6.79-26.11-6.83h0s-31.02,0-31.02,0V0L0,26.5v.2l41.18,26.4v-15.82h30.79c5.45,0,10.38,1.27,14.79,3.81,4.41,2.54,7.89,6.01,10.42,10.42,2.54,4.41,3.8,9.3,3.8,14.65s-1.27,10.24-3.8,14.65c-2.54,4.41-6.01,7.89-10.42,10.42-4.41,2.54-9.34,3.8-14.79,3.8h0s-67.74,0-67.74,0v22.82h67.79c9.66,0,18.42-2.29,26.3-6.83,7.89-4.56,14.11-10.75,18.67-18.59,4.56-7.84,6.83-16.6,6.83-26.27s-2.28-18.43-6.83-26.27Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 620 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.73 53.59">
|
||||
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 304 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.29 109.29">
|
||||
<path d="M26.84,102.1c-8.31-4.79-14.87-11.36-19.66-19.72C2.4,74.02,0,64.76,0,54.58s2.4-19.42,7.19-27.74c4.79-8.31,11.34-14.86,19.66-19.66C35.16,2.4,44.44,0,54.71,0s19.42,2.4,27.73,7.19c8.31,4.79,14.86,11.34,19.66,19.66,4.79,8.31,7.19,17.56,7.19,27.74v42.75h-12.72v-7.89c-2.97,2.46-6.3,4.37-9.99,5.72-3.69,1.36-7.53,2.04-11.51,2.04-7.21,0-13.78-2.16-19.72-6.49l.64,18.45c-.34.08-.76.13-1.27.13-10.26,0-19.55-2.4-27.86-7.19ZM24.75,71.56c2.84,5.13,6.74,9.25,11.71,12.34,4.96,3.1,10.5,4.77,16.6,5.02-3.56-3.22-6.36-7.02-8.4-11.39-2.04-4.37-3.05-9.05-3.05-14.06,0-6.02,1.5-11.58,4.52-16.67,3.01-5.09,7.08-9.14,12.21-12.15,5.13-3.01,10.71-4.52,16.73-4.52.85,0,2.2.08,4.07.25-3.05-3.14-6.7-5.58-10.94-7.32-4.24-1.74-8.74-2.61-13.49-2.61-6.36,0-12.15,1.49-17.37,4.45-5.22,2.97-9.33,7.06-12.34,12.28-3.01,5.22-4.52,11.01-4.52,17.37s1.42,11.85,4.26,16.99ZM84.29,72.71c2.59-2.5,3.88-5.49,3.88-8.97s-1.29-6.59-3.88-9.1c-2.59-2.5-5.66-3.75-9.22-3.75s-6.57,1.25-9.03,3.75c-2.46,2.5-3.69,5.53-3.69,9.1s1.23,6.57,3.69,9.03c2.46,2.46,5.47,3.69,9.03,3.69s6.64-1.25,9.22-3.75Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.5 103.19">
|
||||
<path d="M59.26,78.8c-.97-.97-1.45-2.13-1.45-3.5s.48-2.47,1.45-3.42c.97-.95,2.13-1.42,3.5-1.42s2.53.47,3.5,1.42c.97.95,1.45,2.09,1.45,3.42s-.48,2.53-1.45,3.5-2.13,1.45-3.5,1.45-2.53-.48-3.5-1.45ZM73.16,78.8c-.97-.97-1.45-2.13-1.45-3.5s.48-2.47,1.45-3.42c.97-.95,2.13-1.42,3.5-1.42s2.53.47,3.5,1.42c.97.95,1.45,2.09,1.45,3.42s-.48,2.53-1.45,3.5-2.13,1.45-3.5,1.45-2.53-.48-3.5-1.45ZM87.06,78.8c-.97-.97-1.45-2.13-1.45-3.5s.48-2.47,1.45-3.42c.97-.95,2.13-1.42,3.5-1.42s2.53.47,3.5,1.42c.97.95,1.45,2.09,1.45,3.42s-.48,2.53-1.45,3.5-2.13,1.45-3.5,1.45-2.53-.48-3.5-1.45Z"/>
|
||||
<path d="M117.92,68.62h.54S94.78,0,94.78,0H0v103.19h118.5v-34.54l-.58-.03ZM94.6,87.19H16V16h68.44l17.71,51.84.35,19.35h-7.9Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 851 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.5 103.19">
|
||||
<path d="M78.75,24.59c-1.86-.06-3.42-.72-4.65-1.99-1.3-1.33-1.95-2.97-1.95-4.9V0H10.95v24.59H0v78.6h118.5V24.59h-39.75ZM102.5,87.19H16v-46.29h11.55v-24.9h27.8v1.05c0,4.4,1.03,8.38,3.1,11.95,2.07,3.57,4.92,6.38,8.55,8.45,3.55,2.02,7.47,3.04,11.75,3.09v.05h23.75v46.6Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 420 B |
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.76 100.65">
|
||||
<path d="M25.3,26.58c3.77,0,6.93-1.29,9.47-3.89,2.54-2.59,3.82-5.77,3.82-9.54s-1.3-6.66-3.89-9.26c-2.59-2.59-5.73-3.89-9.4-3.89s-6.69,1.32-9.33,3.96-3.96,5.7-3.96,9.19c0,3.77,1.32,6.95,3.96,9.54,2.64,2.59,5.75,3.89,9.33,3.89Z"/>
|
||||
<polygon points="36.19 77.18 36.19 57.25 36.19 33.79 13.57 33.79 0 33.79 0 57.25 13.57 57.25 13.57 77.18 0 77.18 0 100.65 49.76 100.65 49.76 77.18 36.19 77.18"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 543 B |
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.15 105.63">
|
||||
<path d="M35.16,0h23.64L23.64,105.63H0L35.16,0Z"/>
|
||||
<path d="M74.51,0h23.64l-35.16,105.63h-23.64L74.51,0Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 260 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.03 53.1">
|
||||
<polygon points="24.73 0 24.73 17.46 0 17.46 0 35.64 24.73 35.64 24.73 53.1 80.03 26.6 80.03 26.4 24.73 0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 257 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.5 73.4">
|
||||
<path d="M18.1,68.55c-5.6-3.23-10.02-7.63-13.25-13.2C1.62,49.78,0,43.57,0,36.7s1.62-13.08,4.85-18.65c3.23-5.57,7.65-9.97,13.25-13.2C23.7,1.62,29.93,0,36.8,0s13,1.62,18.6,4.85c5.6,3.23,10.02,7.65,13.25,13.25,3.23,5.6,4.85,11.8,4.85,18.6s-1.62,13-4.85,18.6c-3.23,5.6-7.65,10.02-13.25,13.25-5.6,3.23-11.8,4.85-18.6,4.85s-13.1-1.62-18.7-4.85ZM47.2,54.5c3.13-1.8,5.6-4.27,7.4-7.4,1.8-3.13,2.7-6.6,2.7-10.4s-.9-7.27-2.7-10.4c-1.8-3.13-4.27-5.6-7.4-7.4-3.13-1.8-6.6-2.7-10.4-2.7s-7.37.9-10.5,2.7c-3.13,1.8-5.6,4.27-7.4,7.4-1.8,3.13-2.7,6.6-2.7,10.4s.9,7.27,2.7,10.4c1.8,3.13,4.27,5.6,7.4,7.4,3.13,1.8,6.63,2.7,10.5,2.7s7.27-.9,10.4-2.7Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 780 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.03 53.1">
|
||||
<polygon points="55.3 53.1 55.3 35.64 80.03 35.64 80.03 17.46 55.3 17.46 55.3 0 0 26.5 0 26.7 55.3 53.1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 255 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.86 103.76">
|
||||
<path d="M110.86,57.31l-.12-.15-42.28.88,7.87,10.04c-1.67,2.55-3.76,4.81-6.28,6.77-5.14,4.01-11.14,6.01-18.02,6.01-5.47,0-10.41-1.27-14.84-3.82-4.43-2.54-7.92-6.03-10.46-10.46-2.55-4.43-3.82-9.33-3.82-14.7s1.27-10.27,3.82-14.7c2.54-4.43,6.03-7.92,10.46-10.46,4.43-2.55,9.38-3.82,14.84-3.82,6.88,0,12.89,2,18.02,6.01,5.14,4.01,8.5,9.21,10.11,15.62h23.32c-1.13-8.48-4.08-16.12-8.84-22.9-4.76-6.79-10.84-12.09-18.24-15.9-7.4-3.82-15.53-5.72-24.38-5.72-9.71,0-18.52,2.29-26.43,6.86-7.92,4.57-14.16,10.79-18.73,18.66C2.28,33.39,0,42.17,0,51.88s2.28,18.5,6.86,26.36c4.57,7.87,10.81,14.09,18.73,18.66,7.92,4.57,16.73,6.86,26.43,6.86,8.86,0,16.99-1.91,24.38-5.73,5.62-2.9,10.47-6.65,14.56-11.26l8.97,11.45,10.92-40.92Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 865 B |
@@ -64,6 +64,8 @@ html, body{
|
||||
inset: 0;
|
||||
overflow-x: hidden;
|
||||
display: block;
|
||||
scrollbar-color: var(--main-color) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@@ -107,6 +109,8 @@ canvas {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
/*=============Classes générales*/
|
||||
.uiStyle{
|
||||
background-color: var(--back-color);
|
||||
border-style: solid;
|
||||
@@ -114,3 +118,52 @@ canvas {
|
||||
border-width: thin;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.icon{
|
||||
width: 16.1px;
|
||||
height: auto;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.iconBtnStyle{
|
||||
background-color: var(--back-color);
|
||||
color: var(--main-color);
|
||||
border-color: var(--main-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
border-radius: 16.1px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.iconBtnStyle:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
}
|
||||
|
||||
.textBtnStyle{
|
||||
background-color: var(--back-color);
|
||||
color: var(--main-color);
|
||||
font-size: 13.12px;
|
||||
font-family: 'lineal';
|
||||
border-color: var(--main-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
border-radius: 16.1px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1000px){
|
||||
.textBtnStyle{
|
||||
font-size: 16.1px;
|
||||
}
|
||||
}
|
||||
|
||||
.textBtnStyle:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
}
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div id="infoMenuContainer" class="uiStyle">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/*================= Mise en page:
|
||||
=> Mobile First : par défaut, moins de 500px
|
||||
=> Tablette et PC format haut : de 500 à 1000px
|
||||
=> PC large : à partir de 1000px
|
||||
*/
|
||||
|
||||
/*+++++++++++++++++ COPYBOX
|
||||
================ PC HAUT/IPAD
|
||||
@media(min-width:500px){}
|
||||
================ PC LARGE
|
||||
@media(min-width:1000px){}
|
||||
*/
|
||||
|
||||
#infoMenuContainer{
|
||||
width:100%;
|
||||
position:relative;
|
||||
height:40%;
|
||||
}
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1000px){}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name : 'InfoMenu',
|
||||
mounted(){
|
||||
console.log("Info menu is loaded!");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,130 @@
|
||||
<script setup>
|
||||
import CloseIcon from '../assets/icons/close.svg'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="infoMenuContainer" class="uiStyle">
|
||||
<div id="welcomeTextContainer">
|
||||
<p id="welcomeText">
|
||||
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||
<br>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
|
||||
</p>
|
||||
<button type="button" class="textBtnStyle">NOUS SUIVRE HORS DES RÉSEAUX!</button>
|
||||
</div>
|
||||
<div id="btnColumn">
|
||||
<button type="button" class="iconBtnStyle" id="btn001">
|
||||
<CloseIcon name="test" class="icon"/>
|
||||
</button>
|
||||
<button type="button" class="iconBtnStyle" id="btn002">
|
||||
<CloseIcon name="test" class="icon"/>
|
||||
</button>
|
||||
<button type="button" class="iconBtnStyle" id="btn003">
|
||||
<CloseIcon name="test" class="icon"/>
|
||||
</button>
|
||||
<button type="button" class="iconBtnStyle" id="btn004">
|
||||
<CloseIcon name="test" class="icon"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/*================= Mise en page:
|
||||
=> Mobile First : par défaut, moins de 500px
|
||||
=> Tablette et PC format haut : de 500 à 1000px
|
||||
=> PC large : à partir de 1000px
|
||||
*/
|
||||
|
||||
/*+++++++++++++++++ COPYBOX
|
||||
================ PC HAUT/IPAD
|
||||
@media(min-width:500px){}
|
||||
================ PC LARGE
|
||||
@media(min-width:1000px){}
|
||||
*/
|
||||
|
||||
#infoMenuContainer{
|
||||
width:100%;
|
||||
position:relative;
|
||||
height:40%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#btnColumn{
|
||||
width:15%;
|
||||
height:100%;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
|
||||
#btnColumn .iconBtnStyle{
|
||||
width:100%;
|
||||
height:16.1%;
|
||||
margin-left: -13.12%;
|
||||
margin-top: 33%;
|
||||
}
|
||||
|
||||
#btnColumn .icon{
|
||||
width: 33px;
|
||||
}
|
||||
|
||||
#welcomeTextContainer{
|
||||
width:77%;
|
||||
height:100%;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
padding: 16.1px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#welcomeText{
|
||||
overflow-y: scroll;
|
||||
height: 66.6%;
|
||||
font-size: 16.1px;
|
||||
font-family: 'velvelyne';
|
||||
color: var(--main-color);
|
||||
font-weight: bold;
|
||||
padding-right: 16.1px;
|
||||
margin-top: -7.77px;
|
||||
}
|
||||
|
||||
#welcomeTextContainer .textBtnStyle{
|
||||
height:44.4px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1000px){
|
||||
#welcomeText{
|
||||
height:71%;
|
||||
}
|
||||
|
||||
#btnColumn .iconBtnStyle{
|
||||
height:20%;
|
||||
margin-left: -13.12%;
|
||||
margin-top: 13.12%;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name : 'InfoMenu',
|
||||
mounted(){
|
||||
console.log("Info menu is loaded!");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -6,11 +6,11 @@ import App from './App.vue'
|
||||
// import composants
|
||||
import TitleContent from './components/TitleContent.vue'
|
||||
import InfoContent from './components/InfoContent.vue'
|
||||
import TitleText from './components/Title/TitleText.vue'
|
||||
import GeneratedContent from './components/Title/GeneratedContent.vue'
|
||||
import MusicPlayer from './components/Title/MusicPlayer.vue'
|
||||
import InfoMenu from './components/Info/InfoMenu.vue'
|
||||
import InboxContent from './components/Info/InboxContent.vue'
|
||||
import TitleText from './titleComponents/TitleText.vue'
|
||||
import GeneratedContent from './titleComponents/GeneratedContent.vue'
|
||||
import MusicPlayer from './titleComponents/MusicPlayer.vue'
|
||||
import InfoMenu from './infoComponents/InfoMenu.vue'
|
||||
import InboxContent from './infoComponents/InboxContent.vue'
|
||||
|
||||
// création app racine
|
||||
const app = createApp(App);
|
||||
|
||||
Reference in New Issue
Block a user