Merge branch 'master' of https://codefirst.iut.uca.fr/git/dorian.hodin/Daidokoro into formRecipe

10 months ago · 0342736841
parent 4346246165 1d1a65d0df
commit 0342736841
9 changed files with 253 additions and 1 deletions
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/daidokoro/src/app/Component/accueil/accueil.component.html
+++ b/daidokoro/src/app/Component/accueil/accueil.component.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Daidokoro</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">
+  <style>
+    body, h1, h2, h3, h4, h5, h6 {
+      font-family: "Karma", sans-serif;
+      margin: 0;
+      padding: 0;
+    }
+    .navbar {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      background-color: #333;
+      padding: 1em;
+    }
+    .navbar a {
+      color: white;
+      text-decoration: none;
+      padding: 0.5em 1em;
+    }
+    .navbar a:hover {
+      background-color: #ddd;
+      color: black;
+    }
+    .content {
+      padding: 20px;
+    }
+    .recipe-container {
+      background-color: #bab6b6;
+      color: black;
+      padding: 20px;
+      margin-top: 0;
+      margin-right: 50%;
+    }
+    .recipe-container h2 {
+      font-size: 3em;
+      margin-bottom: 10px;
+    }
+  </style>
+</head>
+<body>
+
+<div class="navbar">
+  <a href="#home">Accueil</a>
+  <a href="#recipes">Recettes</a>
+  <a href="#about">À Propos</a>
+  <a href="#contact">Contact</a>
+</div>
+
+<div class="content">
+  <div class="recipe-container">
+    <h2>Liste Recettes</h2>
+    <app-recipe-list></app-recipe-list>
+  </div>
+</div>
+
+</body>
+</html>
--- a/daidokoro/src/app/Component/accueil/accueil.component.ts
+++ b/daidokoro/src/app/Component/accueil/accueil.component.ts
@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {RecipeListComponent} from "../recipe-list/recipe-list.component";
+
+@Component({
+  selector: 'app-accueil',
+  standalone: true,
+  imports: [
+    RecipeListComponent
+  ],
+  templateUrl: './accueil.component.html'
+})
+export class AccueilComponent {
+
+}
--- a/daidokoro/src/app/Component/recipe-list/recipe-list.component.html
+++ b/daidokoro/src/app/Component/recipe-list/recipe-list.component.html
@ -0,0 +1,123 @@
+
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #bab6b6;
+      margin: 0;
+      padding: 20px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    .recipe-card {
+      background-color: #fff;
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      margin: 10px;
+      overflow: hidden;
+      width: calc(33.33% - 20px);
+      transition: transform 0.2s;
+    }
+    .recipe-card:hover {
+      transform: scale(1.05);
+    }
+    .recipe-image {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+    }
+    .recipe-content {
+      padding: 15px;
+    }
+    .recipe-title {
+      font-size: 1.5em;
+      margin: 0 0 10px;
+    }
+    .recipe-description {
+      font-size: 1em;
+      color: #666;
+    }
+    .details-button {
+      display: inline-block;
+      padding: 10px 15px;
+      background-color: black;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      margin-top: 10px;
+    }
+    .details-button:hover {
+      background-color: #525259;
+    }
+    @media (max-width: 768px) {
+      .recipe-card {
+        width: calc(50% - 20px);
+      }
+    }
+    @media (max-width: 480px) {
+      .recipe-card {
+        width: calc(100% - 20px);
+        margin: 10px 0;
+      }
+    }
+
+  </style>
+<body>
+
+<div class="recipe-card">
+  <img src="image1.jpg" alt="Recette 1" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
+  <div class="recipe-content">
+    <h2 class="recipe-title">Recette 1</h2>
+    <p class="recipe-description">Description courte de la recette 1.</p>
+    <button class="details-button" onclick="toggleDetails(this)">Détails</button>
+  </div>
+</div>
+
+<div class="recipe-card">
+  <img src="image2.jpg" alt="Recette 2" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
+  <div class="recipe-content">
+    <h2 class="recipe-title">Recette 2</h2>
+    <p class="recipe-description">Description courte de la recette 2.</p>
+    <button class="details-button" onclick="toggleDetails(this)">Détails</button>
+
+  </div>
+</div>
+
+<div class="recipe-card">
+  <img src="image3.jpg" alt="Recette 3" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
+  <div class="recipe-content">
+    <h2 class="recipe-title">Recette 3</h2>
+    <p class="recipe-description">Description courte de la recette 3.</p>
+    <button class="details-button" onclick="toggleDetails(this)">Détails</button>
+  </div>
+</div>
+
+<div class="recipe-card">
+  <img src="image4.jpg" alt="Recette 4" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
+  <div class="recipe-content">
+    <h2 class="recipe-title">Recette 4</h2>
+    <p class="recipe-description">Description courte de la recette 4.</p>
+    <button class="details-button" onclick="toggleDetails(this)">Détails</button>
+  </div>
+</div>
+
+<div class="recipe-card">
+  <img src="image5.jpg" alt="Recette 5" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
+  <div class="recipe-content">
+    <h2 class="recipe-title">Recette 5</h2>
+    <p class="recipe-description">Description courte de la recette 5.</p>
+    <button class="details-button" onclick="toggleDetails(this)">Détails</button>
+  </div>
+</div>
+
+<div class="recipe-card">
+  <img src="image6.jpg" alt="Recette 6" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
+  <div class="recipe-content">
+    <h2 class="recipe-title">Recette 6</h2>
+    <p class="recipe-description">Description courte de la recette 6.</p>
+    <button class="details-button" onclick="toggleDetails(this)">Détails</button>
+  </div>
+</div>
+
+</body>
--- a/daidokoro/src/app/Component/recipe-list/recipe-list.component.ts
+++ b/daidokoro/src/app/Component/recipe-list/recipe-list.component.ts
@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { RecipeService } from '../../Service/recipe.service';
+import { Recipe } from '../../Model/recipe.model';
+import {NgOptimizedImage} from "@angular/common";
+
+@Component({
+  selector: 'app-recipe-list',
+  templateUrl: './recipe-list.component.html',
+  imports: [
+    NgOptimizedImage
+  ],
+  standalone: true
+})
+export class RecipeListComponent implements OnInit {
+  recipes: Recipe[] = [];
+
+  constructor(private recipeService: RecipeService) {}
+
+  ngOnInit(): void {
+    this.recipes = this.recipeService.getRecipes();
+  }
+}
--- a/daidokoro/src/app/Model/recipe.model.ts
+++ b/daidokoro/src/app/Model/recipe.model.ts
@ -0,0 +1,6 @@
+export interface Recipe {
+  name: string;
+  date: string;
+  image: string;
+  ingredients: { name: string; quantity: string }[];
+}
--- a/daidokoro/src/app/Service/recipe.service.ts
+++ b/daidokoro/src/app/Service/recipe.service.ts
@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Recipe } from '../Model/recipe.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RecipeService {
+  private recipes: Recipe[] = JSON.parse(localStorage.getItem('recipes') || '[]');
+
+  getRecipes(): Recipe[] {
+    return this.recipes;
+  }
+
+  addRecipe(recipe: Recipe): void {
+    this.recipes.push(recipe);
+    localStorage.setItem('recipes', JSON.stringify(this.recipes));
+  }
+}
--- a/daidokoro/src/app/app.component.html
+++ b/daidokoro/src/app/app.component.html
@ -1 +1,2 @@
 <app-recipe-form></app-recipe-form>
+<app-accueil></app-accueil>
--- a/daidokoro/src/app/app.component.ts
+++ b/daidokoro/src/app/app.component.ts
@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import {RecipeFormComponent} from "./component/recipe-form/recipe-form.component";
+import {AccueilComponent} from "./Component/accueil/accueil.component";

@Component({
  selector: 'app-root',
  standalone: true,
-  imports: [RouterOutlet, RecipeFormComponent],
+  imports: [RouterOutlet, AccueilComponent,RecipeFormComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
 })