vgaNAR6ta/drags-and-nerds
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: consstruction d'une structure responsive pour l'interface

Browse Source
This commit is contained in:
Vega
2026-03-18 22:04:31 +01:00
parent 13c91b464f
commit 91355bcb91
12 changed files with 378 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
v1-com-officielle/index.html
+1
View File
@@ -16,6 +16,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
</head>
<body>
<!--TEST REFERENCE-->
<h1 class="referenceText">
<strong>drags and nerds</strong>
<p>
v1-com-officielle/src/App.vue
+34 -6
View File
@@ -1,21 +1,49 @@
<script setup>
</script>
<template>
<div id="mainContainer">
<TitleDiv></TitleDiv>
<InfoDiv></InfoDiv>
</div>
</template>
<style scoped>
/*CSS général app*/
/*================= 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){}
*/
#mainContainer{
background-color: transparent;
width:100%;
position:absolute;
inset:0;
height:200%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
/*================ PC LARGE*/
@media(min-width:1000px){
#mainContainer{
flex-direction: row;
height:100%;
}
}
</style>
<script>
export default {
name : 'App',
mounted(){
document.documentElement.setAttribute("data-theme", "dark");
document.documentElement.setAttribute("data-theme", "light");
console.log("Vue root app is fully loaded!");
}
};
v1-com-officielle/src/assets/style.css
+38 -7
View File
@@ -1,15 +1,15 @@
/*=============Gamme colorée*/
:root[data-theme="dark"]{
--dark-color: #380052;
--light-color: #C303FF;
--back-color: black;
--main-color: white;
--accent-color: #00FF76;
}
:root[data-theme="light"]{
--dark-color: #380052;
--light-color: #C303FF;
--accent-color: #00FF76;
--back-color: white;
--main-color: black;
--accent-color: #C303FF;
}
/*=============Typo*/
@@ -49,7 +49,7 @@ a{
.referenceText{
position:absolute;
z-index: -33;
color: var(--light-color);
color: var(--dark-color);
}
/*=============Body & background*/
@@ -57,7 +57,7 @@ html, body{
margin: 0;
padding: 0;
position: absolute;
background-color: #000000;
background-color: var(--dark-color);
width: 100%;
height:100%;
position: fixed;
@@ -83,3 +83,34 @@ canvas {
height: 0;
overflow: hidden;
}
/*================= 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){}
*/
/*=============Vue root app */
#app{
position:absolute;
inset:0;
width:100%;
height: 100%;
overflow-y: scroll;
}
.uiStyle{
background-color: var(--back-color);
border-style: solid;
border-color: var(--main-color);
border-width: thin;
border-radius: 0;
}
v1-com-officielle/src/components/HelloWorld.vue
-43
View File
@@ -1,43 +0,0 @@
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Learn more about IDE Support for Vue in the
<a
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
target="_blank"
>Vue Docs Scaling up Guide</a
>.
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
v1-com-officielle/src/components/Info/InboxContent.vue
+37
View File
@@ -0,0 +1,37 @@
<template>
<div id="inboxContainer" 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){}
*/
#inboxContainer{
width:100%;
position:relative;
height:50%;
}
/*================ PC LARGE*/
@media(min-width:1000px){}
</style>
<script>
export default {
name : 'InboxContent',
mounted(){
console.log("Inbox content is loaded!");
}
};
</script>
v1-com-officielle/src/components/Info/InfoMenu.vue
+37
View File
@@ -0,0 +1,37 @@
<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>
v1-com-officielle/src/components/InfoContent.vue
+48
View File
@@ -0,0 +1,48 @@
<template>
<div id="infoContainer">
<InfoMenuDiv></InfoMenuDiv>
<InboxDiv></InboxDiv>
</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){}
*/
#infoContainer{
background-color: transparent;
width:100%;
position:relative;
height:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
/*================ PC LARGE*/
@media(min-width:1000px){
#infoContainer{
height: 100%;
width: 33.3%;
}
}
</style>
<script>
export default {
name : 'InfoContent',
mounted(){
console.log("Info content is loaded!");
}
};
</script>
v1-com-officielle/src/components/Title/GeneratedContent.vue
+42
View File
@@ -0,0 +1,42 @@
<template>
<div id="generatedContainer">
</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){}
*/
#generatedContainer{
background-color: transparent;
width:100%;
position:relative;
height:70%;
}
/*================ PC LARGE*/
@media(min-width:1000px){
#generatedContainer{
height: 67%;
}
}
</style>
<script>
export default {
name : 'GeneratedContent',
mounted(){
console.log("Generated content is loaded!");
}
};
</script>
v1-com-officielle/src/components/Title/MusicPlayer.vue
+41
View File
@@ -0,0 +1,41 @@
<template>
<div id="playerContainer" 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){}
*/
#playerContainer{
width:100%;
position:relative;
height:10%;
}
/*================ PC LARGE*/
@media(min-width:1000px){
#playerContainer{
height: 13%;
}
}
</style>
<script>
export default {
name : 'MusicPlayer',
mounted(){
console.log("Music player is loaded!");
}
};
</script>
v1-com-officielle/src/components/Title/TitleText.vue
+37
View File
@@ -0,0 +1,37 @@
<template>
<div id="titleTextContainer" 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){}
*/
#titleTextContainer{
width:100%;
position:relative;
height:20%;
}
/*================ PC LARGE*/
@media(min-width:1000px){}
</style>
<script>
export default {
name : 'TitleText',
mounted(){
console.log("Title text is loaded!");
}
};
</script>
v1-com-officielle/src/components/TitleContent.vue
+49
View File
@@ -0,0 +1,49 @@
<template>
<div id="titleContainer">
<PlayerDiv></PlayerDiv>
<GeneratedDiv></GeneratedDiv>
<TitleTextDiv></TitleTextDiv>
</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){}
*/
#titleContainer{
background-color: transparent;
width:100%;
position: relative;
height:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
/*================ PC LARGE*/
@media(min-width:1000px){
#titleContainer{
height:100%;
width:66.7%;
}
}
</style>
<script>
export default {
name : 'TitleContent',
mounted(){
console.log("Title content is loaded!");
}
};
</script>
v1-com-officielle/src/main.js
+14 -2
View File
@@ -4,13 +4,25 @@ import './assets/style.css'
// import app vue racine
import App from './App.vue'
// import composants
//import MainContent from './components/MainContent.vue'
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'
// création app racine
const app = createApp(App);
//Composants
//app.component('mainDiv',MainContent);
app.component('TitleDiv', TitleContent);
app.component('InfoDiv', InfoContent);
app.component('PlayerDiv', MusicPlayer);
app.component('TitleTextDiv', TitleText);
app.component('GeneratedDiv',GeneratedContent);
app.component('InfoMenuDiv', InfoMenu);
app.component('InboxDiv', InboxContent);
//Montage dans div#app de index.html
app.mount('#app');