Merge branch 'master' of https://codefirst.iut.uca.fr/git/dorian.hodin/Daidokoro into formRecipe
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
commit
0342736841
@ -0,0 +1,5 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
@ -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>
|
||||||
@ -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 {
|
||||||
|
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
export interface Recipe {
|
||||||
|
name: string;
|
||||||
|
date: string;
|
||||||
|
image: string;
|
||||||
|
ingredients: { name: string; quantity: string }[];
|
||||||
|
}
|
||||||
@ -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));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1 +1,2 @@
|
|||||||
<app-recipe-form></app-recipe-form>
|
<app-recipe-form></app-recipe-form>
|
||||||
|
<app-accueil></app-accueil>
|
||||||
|
|||||||
Loading…
Reference in new issue