diff --git a/README.md b/README.md index 4d35d93..e66c18a 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,4 @@ -# business-case-dashboard +# Dashboard Business Case + +Support pour l'oral du cours web statique dans le cadre de ma formation CDA chez Human Booster diff --git a/custom.css b/custom.css new file mode 100644 index 0000000..cfc71f8 --- /dev/null +++ b/custom.css @@ -0,0 +1,281 @@ +/* Custom CSS for the application */ + +/* Variables */ +:root { + /* Bleu principal */ + --primary: rgb(13, 110, 253); + + /* Bleu survol */ + --primary-hover: rgb(10, 88, 202); + + /* Fond principal, gris très léger */ + --body-bg: #f8f9fa; +} + +/* Couleur de fond principale */ +body { + background-color: var(--body-bg); +} + +/* Titres des sections */ +h2 { + font-size: 1.2rem; + margin: 3rem 0 1rem; +} + +/* Mettre en bleu toutes les icônes */ +.icon-blue { + color: var(--primary); + transition: all .2s; + + /* Gestion au survol */ + &:hover:not(.fa-filter, .fa-file-excel) { + color: var(--primary-hover); + font-weight: 700; + transform: scale(110%); + cursor: pointer; + + } +} + +/* Colonnes d'en-tête */ +th { + position: relative; + + .fa-sort { + position: absolute; + top: 33%; + right: 3%; + transition: all .2s; + + &:hover { + cursor: pointer; + } + } +} + +/* En-tête du site */ +#header-nav { + /*background-color: rgba(13, 110, 253, .1);*/ + width: 100%; + padding: 1rem; + + #logo { + font-size: 1.5rem; + p { + font-size: .8rem; + font-weight: 700; + } + } + + #btn-logout { + margin-left: 2rem; + } +} + +/* Bouton d'ajout d'un lieu de recharge */ +#btn-add-location { + margin-top: .5rem; +} + +/* "Carte" lieu de recharge */ +.location-card { + border: 2px solid black; + padding: 15px; + + &:first-child { + margin-bottom: .5rem; + } + + a { + width: fit-content; + } + + .location-card-title { + width: fit-content; + margin: 0 auto; + + } + + .location-card-actions { + margin-left: 3rem; + } + + .location-card-title, .station-card { + border: 2px solid rgba(0, 0, 0, .2); + padding: .5rem; + } + + /* Borne */ + .station { + + .station-info, .station-card { + margin: 1rem; + } + + .station-name { + font-weight: 500; + } + + .station-media { + font-size: 1.5rem; + + i { + margin: .2rem + } + } + } +} + +/* Sur-en-tête tableau réservations passées */ +.booking-action-bar { + + span:first-of-type { + + i { + font-size: 1.2rem; + } + + button { + border: none; + background-color: transparent; + } + } + + .date-selector input { + margin: .5rem; + + } + + #btn-filter { + background-color: #FFF; + border: 2px solid rgba(0, 0, 0, .2); + padding: .2rem 1.5rem; + font-weight: 500; + transition: all .2s; + + &:hover { + border: 2px solid rgba(0, 0, 0, 0); + background-color: rgba(0, 0, 0, .2); + color: #FFF; + } + } +} + +.table-actions { + a:last-child { + margin-left: 1rem; + } +} + +/* Pagination desktop des tableaux */ +.table-nav { + + i { + font-size: 1.2rem; + font-weight: 700; + } + + .chevron-single-left, + .chevron-double-left { + margin-right: 2rem; + + &:hover { + cursor: pointer; + } + } + + .chevron-single-right, + .chevron-double-right { + margin-left: 2rem; + + &:hover { + cursor: pointer; + } + } +} + +/* Pagination mobile */ +.table-nav-mobile { + a { + color: rgba(0, 0, 0, .7); + transition: all .2s; + + &:hover { + color: rgba(0, 0, 0, 1); + } + } +} + +/* +.table-nav { + position: relative; + font-weight: 600; + + &::before, &::after { + font-size: 1.5rem; + position: absolute; + top: -15%; + } + + &::before { + content: "<<"; + left: 37%; + } + + &::after { + content: ">>"; + right: 37%; + } + + p { + position: relative; + font-weight: 500; + + &::before, &::after { + font-size: 1.5rem; + position: absolute; + top: -25%; + } + + &::before { + content: "<"; + left: -50%; + } + + &::after { + content: ">"; + right: -50%; + } + } +} + */ + +/* Comportement exclusif desktop */ +@media all and (min-width: 768px) { + + #section-locations {order: 1} + + #section-current-bookings {} + + #section-passed-bookings {} + + #section-requested-undone-bookings {order: 2} + + #section-requested-done-bookings {order: 2} + + /* Désactivation pagination mobile en mode desktop */ + .table-nav-mobile { + display: none!important; + } + +} + +/* Comportement exclusif mobile */ +@media all and (max-width: 767px) { + + /* Désactivation pagination desktop en mode mobile */ + .table-nav { + display: none!important; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..92ac657 --- /dev/null +++ b/index.html @@ -0,0 +1,445 @@ + + + + + + + + + + + Tableau de bord + + + + +
+
+ +

Tableau de bord

+

Utilisateur connecté : Julia RIGHIDéconnexion +

+
+
+ + +
+ + +
+

Lieux de recharge

+
+ + +
+
+
8 Rue Mozart
+ + +
+
+ Borne 1 +
+ + +
+
+
+ Modifier + Définir un tarifs horaires + Téléverser 1 photo + Téléverser 1 vidéo + Supprimer +
+
+ + +
+
+ Borne 2 +
+ +
+
+
+ Modifier + Définir un tarifs horaires + Téléverser 1 photo + Téléverser 1 vidéo + Supprimer +
+
+
+ Ajouter une borne + Modifier ce lieu +
+
+
+ + +
+
+
4 Avenue de la République
+ + +
+
+ Borne 1 +
+ + +
+
+
+ Modifier + Définir un tarifs horaires + Téléverser 1 photo + Téléverser 1 vidéo + Supprimer +
+
+
+ Ajouter une borne + Modifier ce lieu +
+
+
+
+ + +
+ +
+
+ + +
+

Mes réservations en cours

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Date et heure débutDate et heure finBorne ; Lieu ; Ville; UtilisateurMontant régléStatut
06/10/2023 09:0006/10/2023 17:00Borne 1 ; au clos Fleuris ; LYON; Max DURAND24.00 €En Attente
12/10/2023 10:0012/10/2023 15:00Borne 2 ; au val de Coise ; THURINS; Lucien ROUX10.00 €Accepté
20/10/2023 21:0021/10/2023 06:00Borne 3 ; rue Longvie ; AUBIERE; Lili MAGNIN28.00 €En Attente
+
+ Effectuer une réservation +
+ + +
+

Mes réservations passées

+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Filtrer + + + + + + + + + +
+
Date et heure débutDate et heure finBorne ; Lieu ; Ville; UtilisateurMontant régléStatutReçu
06/02/2023 09:0006/02/2023 17:00Borne 1 ; au Clos du lac ; LE BOURGET; Lola SOT18.00 €Accepté
10/05/2023 11:3010/05/2023 19:30Borne 2 ; rue des Fleurs ; ST CHAMOND; Dante RAOUX36.00 €Accepté
02/08/2023 08:0003/08/2023 14:00Borne 3 ; rue des Source ; PARIS; Gugus PRINCE24.00 €Refusé
+
+ + Exporter toutes les réservations au format Excel + + +
+
+ + +
+ +

Page 1 sur 12

+ +
+ + +
+
+ + + +
+ + +
+

Demandes de réservations à traiter

+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Date et heure débutDate et heure finUtilisateurBorne ; LieuMontant régléActions
06/10/2023 06:0006/10/2023 13:00Pierre MARTINBorne 1 ; 8 rue Mozart28.00 € + Accepter + Refuser +
12/10/2023 10:0012/10/2023 14:00Capucine DUPONTBorne 1 ; 4 Avenue de la République16.00 € + Accepter + Refuser +
20/10/2023 13:0021/10/2023 18:00Louise SANTIBorne 2 ; 8 rue Mozart20.00 € + Accepter + Refuser +
+
+
+ + +
+

Demandes de réservations traitées

+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Date et heure débutDate et heure finUtilisateurBorne ; LieuMontant régléStatut
26/09/2023 06:0026/09/2023 13:00Stéphane HENRIBorne 1 ; 8 rue Mozart18.00 €Accepté
27/09/2023 20:0028/09/2023 04:00Rachel DOS SANTOSBorne 1 ; 4 Avenue de la République32.00 €Refusé
28/09/2023 13:0028/09/2023 18:00Margaux CELLARIERBorne 2 ; 8 rue Mozart20.00 €Accepté
+
+ + +
+
+ + +
+ +

Page 1 sur 5

+ +
+ + +
+
+ + + +
+
+ + + + + + \ No newline at end of file