commit
46da11e3c8
@ -1,3 +1,6 @@
|
|||||||
import { Routes } from '@angular/router';
|
import { Routes } from '@angular/router';
|
||||||
|
import {LoginComponent} from "./component/login/login.component";
|
||||||
|
|
||||||
export const routes: Routes = [];
|
export const routes: Routes = [
|
||||||
|
{path: 'login',component:LoginComponent}
|
||||||
|
];
|
||||||
|
|||||||
@ -1,77 +1,95 @@
|
|||||||
|
<style>
|
||||||
<style>
|
body {
|
||||||
body {
|
font-family: Arial, sans-serif;
|
||||||
font-family: Arial, sans-serif;
|
background-color: #bab6b6;
|
||||||
background-color: #bab6b6;
|
margin: 0;
|
||||||
margin: 0;
|
padding: 20px;
|
||||||
padding: 20px;
|
display: flex;
|
||||||
display: flex;
|
flex-wrap: wrap;
|
||||||
flex-wrap: wrap;
|
justify-content: center;
|
||||||
justify-content: center;
|
}
|
||||||
}
|
.recipe-container {
|
||||||
.recipe-card {
|
display: grid;
|
||||||
background-color: #fff;
|
gap: 20px;
|
||||||
border-radius: 10px;
|
width: 100%;
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
}
|
||||||
margin: 10px;
|
.recipe-card {
|
||||||
overflow: hidden;
|
background-color: #fff;
|
||||||
width: calc(33.33% - 20px);
|
border-radius: 10px;
|
||||||
transition: transform 0.2s;
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
overflow: hidden;
|
||||||
.recipe-card:hover {
|
transition: transform 0.2s;
|
||||||
transform: scale(1.05);
|
}
|
||||||
}
|
.recipe-card:hover {
|
||||||
.recipe-image {
|
transform: scale(1.05);
|
||||||
width: 100%;
|
}
|
||||||
height: 200px;
|
.recipe-image {
|
||||||
object-fit: cover;
|
width: 100%;
|
||||||
}
|
height: 200px;
|
||||||
.recipe-content {
|
object-fit: cover;
|
||||||
padding: 15px;
|
}
|
||||||
}
|
.recipe-content {
|
||||||
.recipe-title {
|
padding: 15px;
|
||||||
font-size: 1.5em;
|
}
|
||||||
margin: 0 0 10px;
|
.recipe-title {
|
||||||
}
|
font-size: 1.5em;
|
||||||
.recipe-description {
|
margin: 0 0 10px;
|
||||||
font-size: 1em;
|
}
|
||||||
color: #666;
|
.recipe-description {
|
||||||
}
|
font-size: 1em;
|
||||||
.details-button {
|
color: #666;
|
||||||
display: inline-block;
|
}
|
||||||
padding: 10px 15px;
|
.details-button {
|
||||||
background-color: black;
|
display: inline-block;
|
||||||
color: white;
|
padding: 10px 15px;
|
||||||
border: none;
|
background-color: black;
|
||||||
border-radius: 5px;
|
color: white;
|
||||||
cursor: pointer;
|
border: none;
|
||||||
margin-top: 10px;
|
border-radius: 5px;
|
||||||
}
|
cursor: pointer;
|
||||||
.details-button:hover {
|
margin-top: 10px;
|
||||||
background-color: #525259;
|
}
|
||||||
}
|
.details-button:hover {
|
||||||
@media (max-width: 768px) {
|
background-color: #525259;
|
||||||
.recipe-card {
|
}
|
||||||
width: calc(50% - 20px);
|
.four-column {
|
||||||
}
|
grid-template-columns: repeat(4, 1fr);
|
||||||
}
|
}
|
||||||
@media (max-width: 480px) {
|
.two-column {
|
||||||
.recipe-card {
|
grid-template-columns: repeat(2, 1fr);
|
||||||
width: calc(100% - 20px);
|
}
|
||||||
margin: 10px 0;
|
.pagination {
|
||||||
}
|
display: flex;
|
||||||
}
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
</style>
|
}
|
||||||
<body *ngFor="let recipe of recipes">
|
.page-link {
|
||||||
|
padding: 10px;
|
||||||
<div class="recipe-card">
|
margin: 0 5px;
|
||||||
<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';">
|
cursor: pointer;
|
||||||
<div class="recipe-content">
|
background-color: #ddd;
|
||||||
<h2 class="recipe-title">{{recipe.$name}}</h2>
|
border: 1px solid #bbb;
|
||||||
<p class="recipe-description">{{recipe.$description}}</p>
|
border-radius: 5px;
|
||||||
<button class="details-button" onclick="toggleDetails(this)">Détails</button>
|
}
|
||||||
|
.page-link.active {
|
||||||
|
background-color: #333;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<div [ngClass]="{'four-column': !isFormVisible, 'two-column': isFormVisible}" class="recipe-container">
|
||||||
|
<div class="recipe-card" *ngFor="let recipe of paginatedRecipes">
|
||||||
|
<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">{{recipe.$name}}</h2>
|
||||||
|
<p class="recipe-description">{{recipe.$description}}</p>
|
||||||
|
<button class="details-button">Détails</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="pagination">
|
||||||
|
<button class="page-link" (click)="previousPage()" [disabled]="currentPage === 0">Précédent</button>
|
||||||
|
<span class="page-link" *ngFor="let page of totalPages; let i = index" [class.active]="currentPage === i" (click)="changePage(i)">{{ i + 1 }}</span>
|
||||||
|
<button class="page-link" (click)="nextPage()" [disabled]="currentPage === totalPages - 1">Suivant</button>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import {Link} from "../model/link.model";
|
import {Link} from "../model/link.model";
|
||||||
|
|
||||||
export var LINKS :Link[] = [
|
export var LINKS :Link[] = [
|
||||||
{$name:"Lien1",$link:"Lien1"},
|
{$name:"/Accueil",$link:""}
|
||||||
{$name:"Lien2",$link:'Lien2'}
|
|
||||||
]
|
]
|
||||||
|
|||||||
Loading…
Reference in new issue