asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Mise en page de la vue GameControl

Browse Source
This commit is contained in:
Jérémy CHOMAZ
2024-02-25 15:02:28 +01:00
parent d57b2c39ee
commit f7ca05513c
5 changed files with 88 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/main.js
View File

@ -4,7 +4,6 @@ import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
registerPlugins(app)
app.mount('#app')

23
src/plugins/vuetify.js
View File

@ -14,6 +14,27 @@ import { createVuetify } from 'vuetify'
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
theme: {
defaultTheme: 'dark'
themes: {
light: {
background: '#212121',
primary: '#cc0000',
controls: '#cc0000',
soundboard: '#9A2779',
secondary: '#b0bec5',
feedback: '#2E7D32',
accent: '#8c9eff',
error: '#b71c1c',
},
dark: {
background: '#121212',
primary: '#2979FF',
controls: '#AB47B',
secondary: '#90a4ae',
feedback: '#2E7D32',
accent: '#8c9eff',
error: '#b71c1c',
},
},
defaultTheme: 'dark',
}
})

36
src/views/GameControl.vue
View File

@ -10,22 +10,22 @@
<v-container class="text-center">
<v-row justify="center">
<v-col cols="12" sm="6" md="5" class="mt-4">
<v-btn color="primary" dark width="240" height="130" class="v-btn xs12 sm6 md3">
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-skip-previous</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="5" class="mt-4">
<v-btn color="primary" dark width="240" height="130" class="v-btn xs12 sm6 md3">
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-skip-next</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="5" class="mb-4">
<v-btn color="primary" dark width="240" height="130" class="v-btn xs12 sm6 md3">
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-pause</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="5" class="mb-4">
<v-btn color="primary" dark width="240" height="130" class="v-btn xs12 sm6 md3">
<v-btn width="240" height="130" class="btn card xs12 sm6 md3">
<v-icon left size="100">mdi-play</v-icon>
</v-btn>
</v-col>
@ -35,37 +35,37 @@
</v-col>
<v-col class="pl-3">
<v-card tile outlined class="card">
<v-card-title class="card__title">
<v-card tile outlined class="card" color="">
<v-card-title class="card__title primary">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-music-box-multiple</v-icon>
Soundboard
</v-card-title>
<v-container class="text-center" color="primary">
<v-container class="text-center">
<v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mt-4">
<v-btn color="primary" dark width="200" height="130" @click="" rounded>
<v-btn class="card" width="200" height="130" @click="" rounded>
<v-icon size="100">mdi-check-circle-outline</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="4" class="mt-4">
<v-btn color="primary" dark width="200" height="130" @click="" rounded>
<v-btn class="card" width="200" height="130" @click="" rounded>
<v-icon size="100">mdi-close-circle-outline</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="4" class="mt-4">
<v-btn color="primary" dark width="200" height="130" @click="" rounded>
<v-btn class="card" width="200" height="130" @click="" rounded>
<v-icon size="100">mdi-timer-outline</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mb-4">
<v-btn color="primary" dark width="220" height="130" @click="" rounded>
<v-btn class="card" width="220" height="130" @click="" rounded>
<v-icon size="100">mdi-human-handsup</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="6" md="s" class="mb-4">
<v-btn color="primary" dark width="220" height="130" @click="" rounded>
<v-btn class="card" width="220" height="130" @click="" rounded>
<v-icon size="100">mdi-bell-outline</v-icon>
</v-btn>
</v-col>
@ -99,9 +99,17 @@
<style>
@media (min-width: 1024px) {
.v-btn{
.card__title.primary {
background-color: #2979FF; /* Changez la couleur en fonction de votre thème */
}
.card__title.feedback {
background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
}
.btn{
border-radius:50px!important;
}
.card {
background-color: #2979FF; /* Changez la couleur en fonction de votre thème */
}
.image-container {
width: 300px;