BrainBlast/src/views/GameControl.vue

<template>
    <v-container>
            <v-row no-gutters>
              <v-col class="align-start">
                <v-card tile outlined class="card">
                  <v-card-title class="card__title primary">
                    <v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon>
                    Contrôles
                  </v-card-title>
                  <v-container class="text-center">
                    <v-row justify="center">
                      <v-col cols="12" sm="6" md="5" class="mt-4">
                        <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 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 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 width="240" height="130" class="btn card xs12 sm6 md3">
                          <v-icon left size="100">mdi-play</v-icon>
                        </v-btn>
                      </v-col>
                    </v-row>
                  </v-container>
                </v-card>
              </v-col>

            <v-col class="pl-3">
                <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">
                        <v-row justify="center">
                            <v-col cols="12" sm="6" md="4" class="mt-4">
                                <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 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 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 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 class="card" width="220" height="130" @click="" rounded>
                                    <v-icon size="100">mdi-bell-outline</v-icon>
                                </v-btn>
                            </v-col>
                        </v-row>
                    </v-container>
                </v-card>
            </v-col>
            </v-row>
          </v-container>
          <v-container>
            <v-row no-gutters>
              <v-col>
                <v-card tile outlined class="card">
                  <v-card-title class="card__title feedback">
                    <v-icon left class="white--text pr-5 pl-2" size="50">mdi-play-network-outline</v-icon>
                    Solution
                  </v-card-title>
                  <v-container class="text-center">
                    <v-row justify="center">
                      <v-container class="text-center">
                        <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
                        <v-img width="450" src="https://c4.wallpaperflare.com/wallpaper/908/893/291/funny-middle-finger-black-background-wallpaper-preview.jpg" style="margin: 0 auto;"></v-img>
                      </v-container>
                    </v-row>
                  </v-container>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
  </template>
  
  <style>
  @media (min-width: 1024px) {
    .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;
      overflow: hidden; /* Pour masquer le dépassement de l'image */
      border: 1px solid #ccc; /* Bordure de l'image */
    }
    .image-container img {
      width: 100%; /* Pour remplir complètement le conteneur */
      height: auto; /* Pour maintenir le ratio d'aspect de l'image */
      display: block; /* Pour éviter l'espace réservé pour les images */
    } 
  }
  </style>