Add files via upload

docs/Recettes/Entrées/Cake aux olives et jambon.md

@@ -0,0 +1,84 @@
+---
+tile: Cake aux olives et jambon
+tags:
+  - Facile
+  - Sans alcool
+  - Four
+---
+
+# Cake aux olives et jambon
+
+![Cake aux olives et jambon](https://s3-eu-west-1.amazonaws.com/images-ca-1-0-1-eu/recipe_photos/original/227539/Cake-olives-jambon2.jpg)
+
+***
+*Source : [Marmiton](https://www.marmiton.org/recettes/recette_cake-sale-au-jambon-et-aux-olives_18876.aspx)* <br>
+*Temps de préparation : 30 minutes* <br>
+*Temps de cuisson : 45 minutes*
+***
+
+## Ingrédients
+
+### Pour 6 personnes :
+
+<div class="people-adjustment">
+  <button class="adjust-button minus">-</button>
+  <input type="number" id="num-people" value="1" min="1">
+  <button class="adjust-button plus">+</button>
+</div>
+
+<div class="grid cards" markdown>
+- <span class="ingredient" data-base-quantity="1" data-unit="">1</span> cuillère à soupe d' huile
+- <span class="ingredient" data-base-quantity="1" data-unit="">1</span> sachet de levure chimique
+- <span class="ingredient" data-base-quantity="75" data-unit="">75</span> g de gruyère râpé
+- <span class="ingredient" data-base-quantity="150" data-unit="">150</span> g de farine
+- <span class="ingredient" data-base-quantity="100" data-unit="">100</span> g de dés de jambon
+- <span class="ingredient" data-base-quantity="150" data-unit="">150</span> g d'olives vertes dénoyautées
+- <span class="ingredient" data-base-quantity="4" data-unit="">4</span> oeufs
+- <span class="ingredient" data-base-quantity="10" data-unit="">10</span> cl de lait
+</div>
+
+??? info "A noter"
+    Vous pouvez remplacer le gruyère rapé par du parmesan, si c'est que vous preferez.
+
+## Instructions
+
+### Etape 1 
+Préchauffer le four à 180°C (thermostat 6) en chaleur tournant.
+
+### Etape 2
+
+??? inline end info "A noter"
+    On rince les olives pour enlever "l'excès" de sel.
+
+Dans une passoire, égoutter les olives et rincer-les à l'eau froide. Puis couper les olives en rondelles.
+
+### Etape 3
+Verser les oeufs et la farine dans un saladier puis mélanger.
+
+### Etape 4
+Ajouter le lait et l'huile puis mélanger.
+
+### Etape 5
+Ajouter le jambon coupé en carré, les olives et le gruyère puis mélanger.
+
+### Etape 6
+
+??? inline end tip "Conseils"
+    - **Ne pas saler** car le jambon et les olives le sont déjà.
+
+Ajouter la levure et une pincer de poivre puis mélanger.
+
+### Etape 7
+
+??? inline end tip "Conseils"
+    - *Il est meilleur froid*.
+
+Mettre le tout dans un plat à cake au préalable bien beurré et placer au four **45 min**.
+
+!!! info "Conseils"
+    **Laisser refroidir avant de démouler**. Vous pouvez servir ce cake en apéritif ou en entrée avec une salade verte.
+
+## Concervation
+
+!!! warning ""
+    Ce cake se conserve très bien au réfrigérateur pendant **2 à 3 jours**.

docs/Recettes/Entrées/Salade de tomate.md

@@ -0,0 +1,51 @@
+---
+tile: Salade de tomates au vinaigre balsamique
+tags:
+  - Italie
+  - Facile
+  - Rapide
+  - Sans porc
+  - Sans alcool
+---
+
+# Salade de tomates au vinaigre balsamique
+
+## Ingrédients
+
+#### Nombre de personne :
+<div class="people-adjustment">
+  <button class="adjust-button minus">-</button>
+  <input type="number" id="num-people" value="1" min="1">
+  <button class="adjust-button plus">+</button>
+</div>
+
+<div class="grid cards" markdown>
+- <span class="ingredient" data-base-quantity="4" data-unit="">4</span> tomates mûres
+- <span class="ingredient" data-base-quantity="1" data-unit="">1</span> oignon rouge
+- <span class="ingredient" data-base-quantity="1" data-unit="">1</span> cuillère à soupe de vinaigre balsamique
+- <span class="ingredient" data-base-quantity="2" data-unit="">2</span> cuillères à soupe d'huile d'olive extra vierge
+</div>
+
+## Instructions
+
+1. **Préparer les ingrédients** : 
+   - Coupez les tomates en rondelles ou en quartiers selon votre préférence.
+   - Émincez finement l'oignon rouge.
+   - Si vous utilisez de l'ail, écrasez la gousse d'ail.
+
+2. **Assaisonner** :
+   - Dans un petit bol, mélangez l'huile d'olive, le vinaigre balsamique, le sel, le poivre, et le sucre si désiré. 
+   - Ajoutez l'ail écrasé au mélange, si vous l'utilisez.
+
+3. **Assembler la salade** :
+   - Disposez les tomates et les oignons dans un saladier.
+   - Versez la vinaigrette balsamique par-dessus et mélangez délicatement pour enrober les légumes.
+
+4. **Servir** :
+   - Parsemez la salade de feuilles de basilic frais juste avant de servir.
+   - Laissez reposer quelques minutes pour que les saveurs se mélangent bien, puis dégustez !
+
+## Conseils
+
+- Pour une saveur plus intense, laissez mariner les tomates dans la vinaigrette pendant environ 30 minutes avant de servir.
+- Vous pouvez ajouter des tranches de mozzarella ou de la feta pour une touche plus gourmande.

docs/Recettes/index.md

@@ -0,0 +1,27 @@
+---
+title: Recettes
+---
+
+# Bienvenue sur la page des Recettes du Club de Cuisine de l'ESIEE Paris
+
+Vous cherchez de nouvelles idées pour régaler vos papilles ? Notre club de cuisine est là pour vous inspirer ! Découvrez une large sélection de recettes, allant des plats rapides aux créations gastronomiques. Il y en a pour tous les goûts, toutes les saisons, et toutes les occasions.
+
+## Filtrage des Recettes
+
+<div class="search-container">
+    <input type="text" id="tag-search" placeholder="Rechercher un tag...">
+    <span id="clear-search" class="clear-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="#fff"/>
+        </svg>
+    </span>
+    <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"></path>
+    </svg>
+</div>
+<ul id="tag-list"></ul>
+<ul id="result-list" style="display: none;"></ul>
+
+## Catégories de Recettes
+
+<!-- material/tags -->

docs/css/styles.css

@@ -0,0 +1,126 @@
+/* styles.css */
+
+.people-adjustment {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.ingredient-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.ingredient {
+    margin-right: 10px;
+}
+
+.adjust-button {
+    background-color: #4051b5;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 16px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.adjust-button:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
+
+#num-people {
+    width: 50px;
+    text-align: center;
+    font-size: 16px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 0 10px;
+}
+
+/************************************************************/
+
+.result-list-item {
+    opacity: 0; /* Initialement invisible */
+    transition: opacity 0.5s ease; /* Transition pour l'animation */
+}
+
+.result-list-item.show {
+    opacity: 1; /* Rendre visible */
+}
+
+.md-tag {
+    display: inline-block;
+    padding: 0.2em 0.5em;
+    margin: 0.2em;
+    background-color: #e0e0e0;
+    border-radius: 0.2em;
+    cursor: pointer;
+    font-size: 0.9em;
+    line-height: 1.5;
+}
+
+.md-tag.selected {
+    background-color: #63de17; /* Couleur de sélection correspondant au thème */
+    color: white;
+}
+
+.md-tag-icon.selected:before {
+    background-color: white;
+}
+
+.md-tag i.material-icons {
+    vertical-align: middle;
+    margin-right: 0.2em;
+}
+
+.search-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+#tag-search {
+    width: 100%;
+    padding: 0.5em 2.5em 0.5em 1em;
+    border: 1px solid #ccc;
+    border-radius: 0.2em;
+    font-size: 1em;
+    line-height: 1.5;
+}
+
+.search-icon {
+    position: absolute;
+    right: 0.5em;
+    width: 1.5em;
+    height: 1.5em;
+    fill: #ccc;
+    pointer-events: none;
+}
+
+.clear-icon {
+    position: absolute;
+    right: 2.5em; /* Ajuster la position pour être avant la loupe */
+    cursor: pointer;
+    width: 1.5em;
+    height: 1.5em;
+    display: none; /* Masquer par défaut */
+}
+
+.clear-icon svg {
+    width: 100%;
+    height: 100%;
+}
+
+#tag-search:not(:placeholder-shown) + .clear-icon {
+    display: block; /* Afficher lorsque le champ n'est pas vide */
+}