From 2a10918bf4cb94e43667b2c79ccf7e2c784ddd0b Mon Sep 17 00:00:00 2001 From: Thomas Fantou Date: Thu, 1 Feb 2024 10:11:38 +0100 Subject: [PATCH] =?UTF-8?q?Cr=C3=A9ation=20de=20l'interface=20administrate?= =?UTF-8?q?ur?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/css/style.css | 70 +++++++++++++++++++ frontend/css/style.css.map | 1 + frontend/index.html | 134 +++++++++++++++++++++++++++++++++++++ frontend/sass/style.scss | 93 +++++++++++++++++++++++++ 4 files changed, 298 insertions(+) create mode 100644 frontend/css/style.css create mode 100644 frontend/css/style.css.map create mode 100644 frontend/index.html create mode 100644 frontend/sass/style.scss diff --git a/frontend/css/style.css b/frontend/css/style.css new file mode 100644 index 0000000..8d799b4 --- /dev/null +++ b/frontend/css/style.css @@ -0,0 +1,70 @@ +@charset "UTF-8"; +body { + font-family: "Arial", sans-serif; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + background-color: #f2f2f2; + color: #333; +} + +header { + text-align: center; + padding: 20px; + background-color: #333; + color: #fff; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); /* Ajout d'une ombre sous le header */ +} + +h1 { + margin: 0; + font-size: 1.5em; +} + +main { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex-wrap: wrap; + margin: 20px; +} + +.vanilla { + padding: 1em; + margin: 10px; + width: 300px; + transition: transform 1.5s ease; /* Ajout de l'animation pour le grossissement */ +} + +h2 { + margin: 0; + font-size: 1.2em; + text-align: center; + padding-bottom: 10px; /* Ajout du padding-bottom aux h2 */ +} + +button { + padding: 15px 20px; + font-size: 1em; + background-color: #333; + color: #fff; + border: none; + cursor: pointer; + margin: 10px 0; + width: 100%; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); /* Ajout d'une ombre sur les boutons */ +} +button:hover { + background-color: #555; + transform: scale(1.1); /* Ajout du grossissement au survol */ + transition: transform 1s ease; /* Ajout de l'animation pour le rétrécissement */ +} + +.menu-item { + margin-bottom: 15px; + font-size: 1.2em; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/frontend/css/style.css.map b/frontend/css/style.css.map new file mode 100644 index 0000000..2ed2b5a --- /dev/null +++ b/frontend/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":";AAQA;EACE,aAPc;EAQd;EACA;EACA;EACA;EACA,kBAXmB;EAYnB,OAfQ;;;AAkBV;EACE;EACA;EACA,kBAjBmB;EAkBnB,OArBQ;EAsBR;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBArDmB;EAsDnB,OAzDQ;EA0DR;EACA;EACA;EACA;EACA;;AACA;EACE,kBA5DiB;EA6DjB;EACA;;;AAIJ;EACE;EACA","file":"style.css"} \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..320e264 --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,134 @@ + + + + + + + + Page Basique + + + +
+

Interface Administrateur

+
+
+
+

Générer items

+

F12 = Console pour voir les items du projet.

+ + + + + +
+ + +
+

Entrer l'ID de l'item souhaité

+ + +
+
+ + + + diff --git a/frontend/sass/style.scss b/frontend/sass/style.scss new file mode 100644 index 0000000..3e7575a --- /dev/null +++ b/frontend/sass/style.scss @@ -0,0 +1,93 @@ +$color_1: #333; +$color_2: #fff; +$font-family_1: 'Arial', sans-serif; +$background-color_1: #f2f2f2; +$background-color_2: #333; +$background-color_3: #555; +$shadow-color: rgba(0, 0, 0, 0.3); + +body { + font-family: $font-family_1; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + background-color: $background-color_1; + color: $color_1; +} + +header { + text-align: center; + padding: 20px; + background-color: $background-color_2; + color: $color_2; + box-shadow: 0px 2px 5px $shadow-color; /* Ajout d'une ombre sous le header */ +} + +h1 { + margin: 0; + font-size: 1.5em; +} + +main { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex-wrap: wrap; + margin: 20px; +} + +.vanilla { + padding: 1em; + margin: 10px; + width: 300px; + transition: transform 1.5s ease; /* Ajout de l'animation pour le grossissement */ +} + +h2 { + margin: 0; + font-size: 1.2em; + text-align: center; + padding-bottom: 10px; /* Ajout du padding-bottom aux h2 */ +} + +button { + padding: 15px 20px; + font-size: 1em; + background-color: $background-color_2; + color: $color_2; + border: none; + cursor: pointer; + margin: 10px 0; + width: 100%; + box-shadow: 0px 2px 5px $shadow-color; /* Ajout d'une ombre sur les boutons */ + &:hover { + background-color: $background-color_3; + transform: scale(1.1); /* Ajout du grossissement au survol */ + transition: transform 1s ease; /* Ajout de l'animation pour le rétrécissement */ + } +} + +.menu-item { + margin-bottom: 15px; + font-size: 1.2em; +} + + + +/* Style pour l'input et le bouton "Ajouter un nouvel item" */ +#addItem { + input { + width: 100%; + padding: 10px; + margin-bottom: 10px; + } + + button { + background-color: $background-color_2; + &:hover { + background-color: $background-color_3; + } + } +}