diff --git a/assets/styles/app.css b/assets/styles/app.css index 6812115..0a3c53d 100644 --- a/assets/styles/app.css +++ b/assets/styles/app.css @@ -1,55 +1,145 @@ -.left-background { - background-color: #db5559; /* Couleur de fond */ - width: 20%; /* Prend 1/4 de la largeur de l'écran */ - height: 100%; /* Prend toute la hauteur de la fenêtre */ - position: fixed; /* Reste en place même si on fait défiler la page */ - top: 0; /* Commence en haut de l'écran */ - left: 0; /* Aligne à gauche de l'écran */ +.top-bar { + background-color: #db5559; + width: calc(100% - 18%); /*Calcule la totalité de l'écran - le left-background */ + height: 60px; + position: fixed; + top: 0; + left: 18%; /*Evite le chauvechement des 2 bars */ + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + color: white; + font-size: 18px; + box-sizing: border-box; /* Inclut le padding dans la largeur totale */ } -.index-title-page{ + +.user-role { + background-color: white; + color: black; + padding: 10px 15px; + font-weight: bold; + overflow: hidden; +} + + + +.left-background { + background-color: #db5559; + width: 18%; + height: 100%; + position: fixed; + top: 0; + left: 0; + display: flex; + flex-direction: column; + justify-content: space-between; +} + + +.index-title-page { + color: #FFFFFF; + font-size: 60px; + padding-bottom: 10px; font-family: 'Brittany Signature', sans-serif; } ul { - list-style-type: none; /* Enlève les points de la liste */ + list-style-type: none; padding: 0; } li { - - padding-bottom:30px; + padding-bottom: 30px; } .btn-custom { - background-color: #FFFFFF; /* Couleur de fond verte */ - color: black; /* Couleur du texte blanche */ - border: none; /* Pas de bordure */ - padding: 15px 30px; /* Espace intérieur (padding) */ - font-size: 16px; /* Taille de police */ - font-weight: bold; /* Texte en gras */ - cursor: pointer; /* Curseur en forme de main au survol */ - width: 100%; /* Ajuste la largeur automatiquement en fonction du contenu */ - display: inline-block; /* Empêche le bouton de s'étendre à 100% */ + background-color: #FFFFFF; + color: black; + padding: 15px 40px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + display: inline-block; + + border-right: 5px solid #db5559; + border-left: 5px solid #db5559; } -/* Effet au survol */ -.btn-custom:hover { - background-color: #f8b5b5; /* Couleur légèrement plus foncée au survol */ + +.btn-custom:hover, .btn-info-compte:hover, .btn-info-exit:hover { + background-color: #f8b5b5; color: #FFFFFF; } .icon-medium { - display: inline-flex; /* Utilise inline-flex pour gérer l'alignement facilement */ - align-items: center; /* Centre verticalement l'icône */ width: 25px; height: 25px; - margin-right: 8px; /* Espace entre l'icône et le texte */ } .icon-container { - display: inline-flex; /* Permet d'afficher l'icône et le texte sur la même ligne */ - align-items: center; /* Centre verticalement le contenu */ + display: flex; + align-items: center; + gap: 10px; } +.Information-perso { + display: flex; + justify-content: space-between; + padding: 20px; + margin-top: auto; +} + +.btn-info-compte, .btn-info-exit { + background-color: #FFFFFF; + color: black; + padding: 10px 20px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + border: 1px solid black; +} + +.btn-info-compte { + width: 50%; + height: 30px; +} + +.btn-info-exit { + width: 10%; + height: 30px; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.4); +} + +.modal-content { + background-color: #fff; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, .close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} diff --git a/public/css/modal.css b/public/css/modal.css new file mode 100644 index 0000000..f09f4d3 --- /dev/null +++ b/public/css/modal.css @@ -0,0 +1,152 @@ +.top-bar { + background-color: #db5559; + width: calc(100% - 18%); /*Calcule la totalité de l'écran - le left-background */ + height: 60px; + position: fixed; + top: 0; + left: 18%; /*Evite le chauvechement des 2 bars */ + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + color: white; + font-size: 18px; + box-sizing: border-box; /* Inclut le padding dans la largeur totale */ +} + + +.user-role { + background-color: white; + color: black; + padding: 10px 15px; + font-weight: bold; + overflow: hidden; +} + + + +.left-background { + background-color: #db5559; + width: 18%; + height: 100%; + position: fixed; + top: 0; + left: 0; + display: flex; + flex-direction: column; + justify-content: space-between; +} + + +.index-title-page { + color: #FFFFFF; + font-size: 60px; + padding-bottom: 10px; + font-family: 'Brittany Signature', sans-serif; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + padding-bottom: 30px; +} + +.btn-custom { + background-color: #FFFFFF; + color: black; + padding: 15px 40px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + display: inline-block; + + border-right: 5px solid #db5559; + border-left: 5px solid #db5559; +} + + +.btn-custom:hover, .btn-info-compte:hover, .btn-info-exit:hover { + background-color: #f8b5b5; + color: #FFFFFF; +} + +.icon-medium { + width: 25px; + height: 25px; +} + +.icon-container { + display: flex; + align-items: center; + gap: 10px; +} + + +.Information-perso { + display: flex; + justify-content: space-between; + padding: 20px; + margin-top: auto; +} + +.btn-info-compte, .btn-info-exit { + background-color: #FFFFFF; + color: black; + padding: 10px 20px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + border: 1px solid black; +} + +.btn-info-compte { + width: 50%; + height: 30px; +} + +.btn-info-exit { + width: 10%; + height: 30px; +} + +/* Style pour la modal (cachée par défaut) */ +.modal { + display: none; /* Masquée par défaut */ + position: fixed; + z-index: 1; /* Au-dessus du contenu normal */ + left: 18%; /* Commence juste après ton left-background */ + top: 0; + width: 82%; /* Prend le reste de la largeur après le left-background */ + height: 100%; /* Prend toute la hauteur de l'écran */ + background-color: rgba(0, 0, 0, 0.4); /* Couleur d'arrière-plan avec transparence */ + overflow: auto; /* Permet le défilement si le contenu dépasse */ +} + +/* Contenu de la modal */ +.modal-content { + background-color: white; + margin: 5% auto; /* Centrage vertical */ + padding: 20px; + border: 1px solid black; + width: 80%; /* Largeur du contenu de la modal */ + height: 80%; /* Hauteur du contenu de la modal */ + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); +} + +/* Bouton de fermeture */ +.close { + color: black; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: red; + cursor: pointer; +} + diff --git a/public/js/modal.js b/public/js/modal.js new file mode 100644 index 0000000..707776d --- /dev/null +++ b/public/js/modal.js @@ -0,0 +1,38 @@ +document.addEventListener('DOMContentLoaded', function() { + // Fonction pour ouvrir la modal + function openModal(modalId) { + const modal = document.getElementById(modalId); + if (modal) { + modal.style.display = "block"; + } + } + + // Fonction pour fermer la modal + function closeModal(modalId) { + const modal = document.getElementById(modalId); + if (modal) { + modal.style.display = "none"; + } + } + + // Ouvre les modals lorsqu'un bouton est cliqué + document.body.addEventListener('click', function(event) { + if (event.target.matches('span[data-modal]')) { + const modalId = event.target.getAttribute('data-modal'); + openModal(modalId); + } + + // Ferme la modal lorsqu'on clique sur le bouton de fermeture + if (event.target.matches('.close[data-modal]')) { + const modalId = event.target.getAttribute('data-modal'); + closeModal(modalId); + } + + // Ferme la modal lorsqu'on clique en dehors du contenu + document.querySelectorAll('.modal').forEach(modal => { + if (event.target === modal) { + modal.style.display = "none"; + } + }); + }); +}); diff --git a/src/Controller/IndexController.php b/src/Controller/IndexAccueilController.php similarity index 58% rename from src/Controller/IndexController.php rename to src/Controller/IndexAccueilController.php index f8f8f25..ab9d6f8 100644 --- a/src/Controller/IndexController.php +++ b/src/Controller/IndexAccueilController.php @@ -5,9 +5,12 @@ namespace App\Controller; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\Routing\Attribute\Route; -class IndexController extends AbstractController{ - #[Route('/index', name: 'index_app')] - public function index(){ +class IndexAccueilController extends AbstractController{ + #[Route('/indexAdmin', name: 'index_admin_app')] + public function indexAdmin(){ return $this->render('base.html.twig'); } + + + } \ No newline at end of file diff --git a/templates/Modals/gestionTableModal.html.twig b/templates/Modals/gestionTableModal.html.twig new file mode 100644 index 0000000..e7a45fd --- /dev/null +++ b/templates/Modals/gestionTableModal.html.twig @@ -0,0 +1,8 @@ + diff --git a/templates/Modals/gestionUtilisateurModal.html.twig b/templates/Modals/gestionUtilisateurModal.html.twig new file mode 100644 index 0000000..de2e688 --- /dev/null +++ b/templates/Modals/gestionUtilisateurModal.html.twig @@ -0,0 +1,8 @@ + diff --git a/templates/base.html.twig b/templates/base.html.twig index bdecc75..e77f88f 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -1,56 +1,82 @@ - - - {% block title %}Welcome!{% endblock %} - - + + + {% block title %}Welcome!{% endblock %} + + + + {% block stylesheets %}{% endblock %} + + +{% block body %} - {% block stylesheets %} - {% endblock %} + +
+
+ Bonjour, User +
+
+ Rôle : Test +
+
- {% block javascripts %} - {% block importmap %}{{ importmap('app') }}{% endblock %} - {% endblock %} - - - {% block body %} -
-

FestinHegre

-
- -
-
+ +
+

FestinHegre

+ +
+
    +
  • - {{ ux_icon('ph:user-circle-fill') }} - Compte + {{ ux_icon('grommet-icons:group') }} + Gérer Utilisateur
    -
    - {{ ux_icon('iconamoon:exit-bold') }} +
    • +
  • +
    + {{ ux_icon('ic:outline-table-bar') }} + Gérer Table
    -
+ +
  • +
    + {{ ux_icon('bx:food-menu') }} + Gestion Menu +
    +
    • +
  • +
    + {{ ux_icon('lsicon:badge-promotion-outline') }} + Gestion Promotion +
    +
    • +
  • +
    + {{ ux_icon('fluent-emoji-high-contrast:ten-oclock') }} + Voir tendances +
    +
    • + +
    + +
    +
    + {{ ux_icon('ph:user-circle-fill') }} + Compte
    - {% endblock %} - +
    + {{ ux_icon('iconamoon:exit-bold') }} +
    +
    +
    + + + {% include 'Modals/gestionUtilisateurModal.html.twig' %} + {% include 'Modals/gestionTableModal.html.twig' %} + +{% endblock %} + + + diff --git a/templates/index/index.html.twig b/templates/index/index.html.twig deleted file mode 100644 index c40a3f2..0000000 --- a/templates/index/index.html.twig +++ /dev/null @@ -1,45 +0,0 @@ -{% extends 'base.html.twig' %} - - -{% block title %}Accueil{% endblock %} - - -{% block body %} -
    -

    FestinHegre

    -
    -
      -
    • -
      - Gestion Utilisateur -
      -
      • -
    • -
      - Gestion Table -
      -
      • -
    • -
      - - Gestion Menu -
      -
      • -
    • -
      - Gestion Promo -
      -
      • -
    -
    -
    -
    - - Compte -
    -
    - {{ ux_icon('iconamoon:exit-bold') }} -
    -
    -
    -{% endblock %} \ No newline at end of file