diff --git a/src/public/css/styles.css b/src/public/css/styles.css index da15cf562eb7e37d63746c0e2d8ee5969f169889..c735eb719c4645d5a3c310dc7f1bde65cd8f4ee6 100644 --- a/src/public/css/styles.css +++ b/src/public/css/styles.css @@ -11,23 +11,23 @@ body { table { width: 80%; border-collapse: collapse; - margin: 0 auto; + margin: 0 auto; } th, td { border: 1px solid #000; padding: 20px; text-align: center; - vertical-align: top; - height: 100px; + vertical-align: top; + height: 100px; } th { - background-color: #f0f0f0; + background-color: #f0f0f0; } .empty-cells { - background-color: #ccc; + background-color: #ccc; } header { @@ -39,29 +39,41 @@ header { } .logo-image { - height: 70px; + height: 70px; margin-right: 5px; - vertical-align: middle; + vertical-align: middle; } .logo-text { font-size: 24px; font-weight: bold; - vertical-align: middle; + vertical-align: middle; } .menu-icon, .login-btn { - background-color: hsl(0, 0%, 87%); - padding: 1px 5px; + background-color: #2c3e50; + color: #f9fafa; + padding: 5px 15px; border: 1px solid #ddd; - border-radius: 5px; - cursor: pointer; + border-radius: 12px; + cursor: pointer; +} + +.login-menu { + padding-right: 5px; + display: flex; + align-items: center; +} + +#username { + padding-left: auto; + padding-right: 15px; } .menu-icon { - font-size: 20px; - margin-right: 10px; - vertical-align: middle; + font-size: 20px; + margin-right: 10px; + vertical-align: middle; } @@ -76,19 +88,19 @@ header { align-items: center; width: 100%; padding: 0; - padding-right: 95px; + padding-right: 95px; } .tab-btn { padding: 10px 20px; border-color: #000; - border-bottom: none; + border-bottom: none; border-top-left-radius: 17px; border-top-right-radius: 17px; cursor: pointer; transition: background-color 0.3s; - margin-right: 3px; + margin-right: 3px; } .tab-btn.active { @@ -98,9 +110,9 @@ header { } .tab-btn.notactive { - background-color: #fff; + background-color: #fff; font-weight: bold; - border-color: #ccc #ccc transparent; + border-color: #ccc #ccc transparent; } .login-modal { @@ -111,28 +123,28 @@ header { height: 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: flex; - justify-content: center; - z-index: 1000; + justify-content: center; + z-index: 1000; padding-left: 110px; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.5); } .login-modal .modal-content { padding: 20px; - border-radius: 30px; - width: 500px; + border-radius: 30px; + width: 500px; text-align: center; margin: auto; - position: relative; - top: 150px; + position: relative; + top: 150px; } .login-modal .modal-body { background-color: #c7c4c4; padding: 20px; border-radius: 30px; - width: 350px; + width: 350px; text-align: center; } @@ -141,7 +153,7 @@ header { width: 90%; padding: 10px; margin: 10px 0; - border-radius: 6px; + border-radius: 6px; } .login-modal .modal-body button.submit-btn { @@ -198,19 +210,19 @@ header { } .modal select { - background-color: #c7c4c4; - width: 90%; + background-color: #c7c4c4; + width: 90%; padding: 8px; - margin: 10px 0; + margin: 10px 0; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; - font-family: Arial, sans-serif; + font-family: Arial, sans-serif; } .modal select option { - background-color: #e6e1e1; - color: #000; + background-color: #e6e1e1; + color: #000; padding: 5px; } @@ -236,26 +248,26 @@ header { .appointment-modal .modal-buttons button { - background-color: #c9c5c5; - padding: 5px 15px; + background-color: #c9c5c5; + padding: 5px 15px; border: 1px solid #ddd; - border-radius: 7px; - cursor: pointer; - margin: 0 10px; - font-size: 1rem; + border-radius: 7px; + cursor: pointer; + margin: 0 10px; + font-size: 1rem; margin-top: 20px; } .modal-buttons { display: flex; justify-content: center; - gap: 20px; + gap: 20px; } -.appointment-modal h3, +.appointment-modal h3, .appointment-modal .modal-buttons button { - font-family: Arial, sans-serif; - font-weight: bold; + font-family: Arial, sans-serif; + font-weight: bold; } @@ -272,7 +284,7 @@ header { justify-content: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); cursor: pointer; - z-index: 1000; + z-index: 1000; } .add-button-icon { @@ -283,18 +295,18 @@ header { .calendar-button { position: fixed; - bottom: 100px; - right: 20px; + bottom: 100px; + right: 20px; width: 60px; height: 60px; border-radius: 50%; - background-color: #ffffff; + background-color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5); - z-index: 1000; + z-index: 1000; } .calendar-button .calendar-icon { @@ -307,15 +319,15 @@ header { .agenda-modal { position: fixed; - bottom: 100px; + bottom: 100px; right: 20px; - width: 300px; + width: 300px; padding: 20px; background-color: #e6e1e1; border-radius: 15px; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2); display: none; - z-index: 1000; + z-index: 1000; } @@ -417,16 +429,16 @@ header { top: 50%; left: 50%; transform: translate(-50%, -50%); - background-color: #e6e1e1; + background-color: #e6e1e1; padding: 20px; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - width: 400px; - z-index: 1001; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + width: 400px; + z-index: 1001; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .edit-appointment-modal .modal-content h3 { @@ -434,7 +446,7 @@ header { font-size: 20px; font-weight: bold; margin-bottom: 15px; - background-color: #c9c5c5; + background-color: #c9c5c5; padding: 8px; border: 1px solid #000000; border-radius: 10px; @@ -445,8 +457,8 @@ header { .edit-appointment-modal input[type="text"], .edit-appointment-modal input[type="datetime-local"], .edit-appointment-modal textarea { - background-color: #c7c4c4; - width: 90%; + background-color: #c7c4c4; + width: 90%; padding: 8px; margin: 10px 0; border: 1px solid #ddd; @@ -456,15 +468,15 @@ header { .edit-appointment-modal .modal-buttons button { - padding: 10px 20px; - border: 1px solid #ddd; - border-radius: 7px; - background-color: #c9c5c5; + padding: 10px 20px; + border: 1px solid #ddd; + border-radius: 7px; + background-color: #c9c5c5; cursor: pointer; font-weight: bold; font-size: 1rem; - margin-top: 20px; - margin-left: 10px; + margin-top: 20px; + margin-left: 10px; } /* Arrière-plan -> modale */ @@ -474,8 +486,8 @@ header { left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: 1000; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; } .modal-overlay { @@ -485,11 +497,11 @@ header { right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); - z-index: 99; + z-index: 99; } .modal-content { position: relative; - z-index: 100; + z-index: 100; } /* Menu latéral */ @@ -583,4 +595,4 @@ header { border: 1px solid #ddd; border-radius: 6px; font-weight: bold; -} \ No newline at end of file +} diff --git a/src/views/index.ejs b/src/views/index.ejs index e4cca54409bf33c607f7cd40d3e1fce2e23d9bab..ee6db15dfd6defdb32c2984e34ee6e173851c9d2 100644 --- a/src/views/index.ejs +++ b/src/views/index.ejs @@ -20,7 +20,7 @@ <div class="login-menu"> <% if(locals.user) { %> - <p id="username"><%= locals.user.name ?? '' %></p> + <p id="username">Bonjour <%= locals.user.name ?? '' %></p> <button class="login-btn" onclick="logout()">Déconnexion</button> <% } else { %> <button class="login-btn" onclick="openLoginModal()">Connexion</button>