première release
This commit is contained in:
157
templates/recettes.html
Normal file
157
templates/recettes.html
Normal file
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mes recettes</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="top-nav">
|
||||
<div>
|
||||
<a href="{{ url_for('menu') }}" class="btn btn-secondary">← Retour au menu</a>
|
||||
</div>
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<a href="{{ url_for('add_recette') }}" class="btn">➕ Ajouter une recette</a>
|
||||
<a href="{{ url_for('export_recettes') }}" class="btn btn-success">📥 Exporter</a>
|
||||
<button type="button" class="btn btn-info" onclick="openImportModal()">📤 Importer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>📚 Mes recettes</h1>
|
||||
|
||||
<!-- 🔔 MESSAGES FLASH -->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert-{{ category }}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<!-- 🔍 BARRE DE RECHERCHE -->
|
||||
<form method="GET" action="{{ url_for('recettes') }}" class="search-form">
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
placeholder="🔍 Rechercher une recette ou un ingrédient..."
|
||||
value="{{ search or '' }}"
|
||||
autofocus
|
||||
>
|
||||
<button type="submit" class="btn">Rechercher</button>
|
||||
{% if search %}
|
||||
<a href="{{ url_for('recettes') }}" class="btn-clear">✖ Effacer</a>
|
||||
{% endif %}
|
||||
</form>
|
||||
|
||||
<!-- Affichage nombre de résultats -->
|
||||
{% if search %}
|
||||
<p class="search-info">
|
||||
{% if recettes %}
|
||||
{{ recettes|length }} résultat(s) pour "<strong>{{ search }}</strong>"
|
||||
{% else %}
|
||||
Aucun résultat pour "<strong>{{ search }}</strong>"
|
||||
{% endif %}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if recettes %}
|
||||
<div class="recettes-list">
|
||||
{% for recette in recettes %}
|
||||
<div class="recette-card">
|
||||
<h3>{{ recette['nom'] }}</h3>
|
||||
|
||||
{% if recette['lien'] %}
|
||||
<div class="recipe-link" style="margin-bottom: 15px;">
|
||||
<a href="{{ recette['lien'] }}" target="_blank" class="btn-link">🔗 Voir la recette en ligne</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if recette['ingredients'] %}
|
||||
<div class="ingredients">
|
||||
<strong>Ingrédients :</strong>
|
||||
<pre>{{ recette['ingredients'] }}</pre>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if recette['instructions'] %}
|
||||
<div class="instructions">
|
||||
<strong>Instructions :</strong>
|
||||
<pre>{{ recette['instructions'] }}</pre>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="actions">
|
||||
<a href="{{ url_for('edit_recette', id=recette['id']) }}" class="btn-edit">✏️ Modifier</a>
|
||||
<form method="POST" action="{{ url_for('delete_recette', id=recette['id']) }}" style="display: inline;">
|
||||
<button type="submit" class="btn-delete" onclick="return confirm('Supprimer cette recette ?')">🗑️ Supprimer</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% if search %}
|
||||
<p style="text-align: center; color: #666; margin: 40px 0;">
|
||||
Aucune recette trouvée. <a href="{{ url_for('recettes') }}">Voir toutes les recettes</a>
|
||||
</p>
|
||||
{% else %}
|
||||
<p style="text-align: center; color: #666; margin: 40px 0;">
|
||||
Aucune recette pour le moment. Commencez par en ajouter une !
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 📤 MODAL IMPORT -->
|
||||
<div id="importModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>📤 Importer des recettes</h2>
|
||||
<button class="close-btn" onclick="closeImportModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form method="POST" action="{{ url_for('import_recettes') }}" enctype="multipart/form-data" id="importForm">
|
||||
<label class="form-label">Sélectionnez un fichier JSON :</label>
|
||||
<input type="file" name="file" accept=".json" class="file-input" required>
|
||||
|
||||
<div class="alert-info">
|
||||
<strong>ℹ️ Format attendu :</strong>
|
||||
<ul>
|
||||
<li>Fichier JSON exporté depuis cette application</li>
|
||||
<li>Les recettes existantes avec le même nom seront mises à jour</li>
|
||||
<li>Les nouvelles recettes seront ajoutées</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeImportModal()">Annuler</button>
|
||||
<button type="submit" form="importForm" class="btn btn-primary">Importer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openImportModal() {
|
||||
document.getElementById('importModal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeImportModal() {
|
||||
document.getElementById('importModal').style.display = 'none';
|
||||
document.getElementById('importForm').reset();
|
||||
}
|
||||
|
||||
// Fermer modal en cliquant en dehors
|
||||
window.onclick = function(event) {
|
||||
const modal = document.getElementById('importModal');
|
||||
if (event.target == modal) {
|
||||
closeImportModal();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user