admin/35604-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autosave: 20260126-212418

Browse Source
This commit is contained in:
Flatlogic Bot 2026-01-26 21:24:18 +00:00
parent d7b90335da
commit 3e6a0105dd
2 changed files with 152 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
assets/js/main.js
View File

@ -113,11 +113,11 @@ const app = {
app.state.recipes = data.recipes; app.state.recipes = data.recipes;
} else { } else {
console.error('Failed to load recipes:', data.error); console.error('Failed to load recipes:', data.error);
app.dom.recipeCardsContainer.innerHTML = '<div class="col-12"><p class="text-center text-danger">Error loading recipes.</p></div>'; app.dom.recipeCardsContainer.innerHTML = '<div class="col-12"><p class="text-center text-danger">Ошибка загрузки рецептов.</p></div>';
} }
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);
app.dom.recipeCardsContainer.innerHTML = '<div class="col-12"><p class="text-center text-danger">Could not connect to the server.</p></div>'; app.dom.recipeCardsContainer.innerHTML = '<div class="col-12"><p class="text-center text-danger">Не удалось подключиться к серверу.</p></div>';
} }
}, },
async saveRecipe(formData) { async saveRecipe(formData) {
@ -156,7 +156,7 @@ const app = {
renderRecipeCards(recipes) { renderRecipeCards(recipes) {
app.dom.recipeCardsContainer.innerHTML = ''; app.dom.recipeCardsContainer.innerHTML = '';
if (!recipes || recipes.length === 0) { if (!recipes || recipes.length === 0) {
app.dom.recipeCardsContainer.innerHTML = '<div class="col-12"><p class="text-center text-muted">Your saved recipes will appear here.</p></div>'; app.dom.recipeCardsContainer.innerHTML = '<div class="col-12"><p class="text-center text-muted">Ваши сохраненные рецепты появятся здесь.</p></div>';
return; return;
} }
@ -197,14 +197,14 @@ const app = {
const text = document.createElement('p'); const text = document.createElement('p');
text.className = 'card-text text-muted'; text.className = 'card-text text-muted';
text.textContent = `${recipe.ingredients.length} ingredients`; text.textContent = `${recipe.ingredients.length} ингредиентов`;
const buttonGroup = document.createElement('div'); const buttonGroup = document.createElement('div');
buttonGroup.className = 'mt-auto pt-2'; buttonGroup.className = 'mt-auto pt-2';
buttonGroup.innerHTML = ` buttonGroup.innerHTML = `
<button class="btn btn-light btn-sm view-recipe"><i class="bi bi-eye"></i> View</button> <button class="btn btn-light btn-sm view-recipe"><i class="bi bi-eye"></i> Просмотр</button>
<button class="btn btn-light btn-sm edit-recipe"><i class="bi bi-pencil"></i> Edit</button> <button class="btn btn-light btn-sm edit-recipe"><i class="bi bi-pencil"></i> Изменить</button>
<button class="btn btn-danger btn-sm delete-recipe" title="Delete"><i class="bi bi-trash"></i></button> <button class="btn btn-danger btn-sm delete-recipe" title="Удалить"><i class="bi bi-trash"></i></button>
`; `;
cardBody.appendChild(titleWrapper); cardBody.appendChild(titleWrapper);
@ -280,7 +280,7 @@ const app = {
} }
const item = combinedIngredients.get(key); const item = combinedIngredients.get(key);
item.additionalQty += prod.quantity; item.additionalQty += prod.quantity;
const source = prod.source || 'Additional product'; const source = prod.source || 'Дополнительный продукт';
if (!item.sources.includes(source)) { if (!item.sources.includes(source)) {
item.sources.push(source); item.sources.push(source);
} }
@ -292,10 +292,10 @@ const app = {
// 3. Group for display // 3. Group for display
const groups = { const groups = {
'Food': { ingredients: [] }, 'Food': { ingredients: [], label: 'Еда' },
'Drinks': { ingredients: [] }, 'Drinks': { ingredients: [], label: 'Напитки' },
'Cooking and serving': { ingredients: [] }, 'Cooking and serving': { ingredients: [], label: 'Приготовление и сервировка' },
'Tableware and consumables': { ingredients: [] } 'Tableware and consumables': { ingredients: [], label: 'Посуда и расходники' }
}; };
combinedIngredients.forEach((item, key) => { combinedIngredients.forEach((item, key) => {
@ -321,7 +321,7 @@ const app = {
const group = groups[groupName]; const group = groups[groupName];
if (group.ingredients.length > 0) { if (group.ingredients.length > 0) {
totalIngredients += group.ingredients.length; totalIngredients += group.ingredients.length;
html += `<h4 class="mt-3">${groupName}</h4>`; html += `<h4 class="mt-3">${group.label}</h4>`;
html += '<ul class="list-group list-group-flush">'; html += '<ul class="list-group list-group-flush">';
group.ingredients.forEach((item, index) => { group.ingredients.forEach((item, index) => {
const totalQty = item.recipeQty + item.additionalQty; const totalQty = item.recipeQty + item.additionalQty;
@ -355,7 +355,7 @@ const app = {
} }
if (totalIngredients === 0) { if (totalIngredients === 0) {
html += '<div class="text-center text-muted p-4"><p>Your shopping list is empty. Add a recipe, and its ingredients will appear here.</p></div>'; html += '<div class="text-center text-muted p-4"><p>Ваш список покупок пуст. Добавьте рецепт, и его ингредиенты появятся здесь.</p></div>';
} }
app.dom.shoppingListContainer.innerHTML = html; app.dom.shoppingListContainer.innerHTML = html;
@ -365,21 +365,21 @@ const app = {
return new bootstrap.Tooltip(tooltipTriggerEl); return new bootstrap.Tooltip(tooltipTriggerEl);
}); });
}, },
addIngredientRow(ingredient = { name: '', quantity: '', unit: 'g' }) { addIngredientRow(ingredient = { name: '', quantity: '', unit: 'г' }) {
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'ingredient-row mb-3'; row.className = 'ingredient-row mb-3';
const units = ['g', 'kg', 'ml', 'l', 'piece', 'pack']; const units = ['г', 'кг', 'мл', 'л', 'шт', 'уп'];
const unitButtons = units.map(u => const unitButtons = units.map(u =>
`<button type="button" class="btn ${ingredient.unit === u ? 'btn-secondary' : 'btn-outline-secondary'} unit-btn">${u}</button>` `<button type="button" class="btn ${ingredient.unit === u ? 'btn-secondary' : 'btn-outline-secondary'} unit-btn">${u}</button>`
).join(''); ).join('');
row.innerHTML = ` row.innerHTML = `
<div class="mb-2"> <div class="mb-2">
<input type="text" class="form-control" placeholder="Ingredient Name" aria-label="Ingredient Name" value="${ingredient.name}"> <input type="text" class="form-control" placeholder="Название ингредиента" aria-label="Ingredient Name" value="${ingredient.name}">
</div> </div>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<input type="number" class="form-control me-2" placeholder="Qty" aria-label="Quantity" min="0" step="any" value="${ingredient.quantity}" style="width: 100px;"> <input type="number" class="form-control me-2" placeholder="Кол-во" aria-label="Quantity" min="0" step="any" value="${ingredient.quantity}" style="width: 100px;">
<div class="btn-group unit-selector me-2" role="group" aria-label="Unit selector"> <div class="btn-group unit-selector me-2" role="group" aria-label="Unit selector">
${unitButtons} ${unitButtons}
</div> </div>
@ -396,9 +396,9 @@ const app = {
app.dom.guestCountInput.value = '1'; app.dom.guestCountInput.value = '1';
app.dom.ingredientsContainer.innerHTML = ''; app.dom.ingredientsContainer.innerHTML = '';
app.ui.addIngredientRow(); app.ui.addIngredientRow();
app.dom.newRecipeBtn.textContent = 'Save Recipe'; app.dom.newRecipeBtn.textContent = 'Сохранить рецепт';
app.dom.cancelEditBtn.style.display = 'none'; app.dom.cancelEditBtn.style.display = 'none';
document.getElementById('recipe-form-modal-label').textContent = 'Add a Recipe'; document.getElementById('recipe-form-modal-label').textContent = 'Добавить рецепт';
}, },
populateFormForEdit(recipeId) { populateFormForEdit(recipeId) {
const recipe = app.state.recipes.find(r => r.id == recipeId); const recipe = app.state.recipes.find(r => r.id == recipeId);
@ -416,9 +416,9 @@ const app = {
app.ui.addIngredientRow(); app.ui.addIngredientRow();
} }
app.dom.newRecipeBtn.textContent = 'Update Recipe'; app.dom.newRecipeBtn.textContent = 'Обновить рецепт';
app.dom.cancelEditBtn.style.display = 'block'; app.dom.cancelEditBtn.style.display = 'block';
document.getElementById('recipe-form-modal-label').textContent = 'Edit Recipe'; document.getElementById('recipe-form-modal-label').textContent = 'Изменить рецепт';
app.dom.recipeFormModal.show(); app.dom.recipeFormModal.show();
app.dom.recipeNameInput.focus(); app.dom.recipeNameInput.focus();
@ -442,7 +442,7 @@ const app = {
} }
document.getElementById('view-recipe-name').textContent = recipe.name; document.getElementById('view-recipe-name').textContent = recipe.name;
document.getElementById('view-recipe-category').textContent = recipe.category || 'No category'; document.getElementById('view-recipe-category').textContent = recipe.category || 'Без категории';
document.getElementById('view-recipe-guests').textContent = recipe.guests; document.getElementById('view-recipe-guests').textContent = recipe.guests;
const ingredientsList = document.getElementById('view-recipe-ingredients'); const ingredientsList = document.getElementById('view-recipe-ingredients');
@ -501,10 +501,10 @@ const app = {
if (app.state.user) { if (app.state.user) {
nav.innerHTML = ` nav.innerHTML = `
<li class="nav-item me-3 d-none d-lg-block"> <li class="nav-item me-3 d-none d-lg-block">
<span class="text-muted">Welcome, ${app.state.user.email}</span> <span class="text-muted">Добро пожаловать, ${app.state.user.email}</span>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<button class="btn btn-outline-primary btn-sm" id="logout-btn">Logout</button> <button class="btn btn-outline-primary btn-sm" id="logout-btn">Выйти</button>
</li> </li>
`; `;
if (guestView) guestView.classList.add('d-none'); if (guestView) guestView.classList.add('d-none');
@ -579,7 +579,7 @@ const app = {
app.dom.aiScanBtn.addEventListener('click', async function() { app.dom.aiScanBtn.addEventListener('click', async function() {
const file = app.dom.recipeImage.files[0]; const file = app.dom.recipeImage.files[0];
if (!file) { if (!file) {
alert('Please select an image first.'); alert('Пожалуйста, сначала выберите изображение.');
return; return;
} }
@ -608,16 +608,16 @@ const app = {
app.ui.addIngredientRow({ app.ui.addIngredientRow({
name: ing.name || '', name: ing.name || '',
quantity: ing.quantity || '', quantity: ing.quantity || '',
unit: ing.unit || 'g' unit: ing.unit || 'г'
}); });
}); });
} }
} else { } else {
alert('AI Scan failed: ' + result.error); alert('Ошибка ИИ сканера: ' + result.error);
} }
} catch (error) { } catch (error) {
console.error('Error during AI scan:', error); console.error('Error during AI scan:', error);
alert('An error occurred during AI scanning.'); alert('Произошла ошибка при сканировании ИИ.');
} finally { } finally {
app.dom.aiScanBtn.disabled = false; app.dom.aiScanBtn.disabled = false;
app.dom.aiScanLoading.classList.add('d-none'); app.dom.aiScanLoading.classList.add('d-none');
@ -643,7 +643,7 @@ const app = {
app.dom.newRecipeBtn.addEventListener('click', async function() { app.dom.newRecipeBtn.addEventListener('click', async function() {
const recipeData = app.ui.getRecipeDataFromForm(); const recipeData = app.ui.getRecipeDataFromForm();
if (!recipeData) { if (!recipeData) {
alert('Please fill out the recipe name, category, guests, and at least one ingredient before saving.'); alert('Пожалуйста, заполните название рецепта, категорию, количество гостей и хотя бы один ингредиент перед сохранением.');
return; return;
} }
@ -679,7 +679,7 @@ const app = {
app.dom.recipeFormModal.hide(); app.dom.recipeFormModal.hide();
}); });
} else { } else {
alert('Failed to save recipe: ' + data.error); alert('Не удалось сохранить рецепт: ' + data.error);
} }
}); });
@ -691,7 +691,7 @@ const app = {
const recipeId = card.getAttribute('data-id'); const recipeId = card.getAttribute('data-id');
if (target && target.classList.contains('delete-recipe')) { if (target && target.classList.contains('delete-recipe')) {
if (confirm('Are you sure you want to delete this recipe?')) { if (confirm('Вы уверены, что хотите удалить этот рецепт?')) {
app.api.deleteRecipe(recipeId); app.api.deleteRecipe(recipeId);
} }
} }
@ -745,7 +745,7 @@ const app = {
name: properName, name: properName,
quantity: 0, quantity: 0,
unit: unit, unit: unit,
source: 'Additional product' source: 'Дополнительный продукт'
}; };
app.state.additionalProducts.push(productToModify); app.state.additionalProducts.push(productToModify);
} }
@ -769,7 +769,7 @@ const app = {
name: properName, name: properName,
quantity: 0, quantity: 0,
unit: unit, unit: unit,
source: 'Additional product' source: 'Дополнительный продукт'
}; };
app.state.additionalProducts.push(productToModify); app.state.additionalProducts.push(productToModify);
} }
@ -885,7 +885,7 @@ const app = {
const category = app.dom.productCategory.value; const category = app.dom.productCategory.value;
if (!name || isNaN(quantity) || quantity <= 0 || !unit) { if (!name || isNaN(quantity) || quantity <= 0 || !unit) {
alert('Please fill out all fields with valid values.'); alert('Пожалуйста, заполните все поля корректными значениями.');
return; return;
} }
@ -899,7 +899,7 @@ const app = {
if (existingProduct) { if (existingProduct) {
existingProduct.quantity += quantity; existingProduct.quantity += quantity;
} else { } else {
const newProduct = { name, quantity, unit, source: 'Additional product', category: category }; const newProduct = { name, quantity, unit, source: 'Дополнительный продукт', category: category };
app.state.additionalProducts.push(newProduct); app.state.additionalProducts.push(newProduct);
} }

208
index.php
View File

@ -5,20 +5,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO & Meta Tags --> <!-- SEO & Meta Tags -->
<title>Smart Recipe & Shopping List</title> <title>SmartRecipe — Умный помощник по рецептам и покупкам</title>
<meta name="description" content="Manage your recipes and generate smart shopping lists. Identify dishes with AI and calculate ingredients effortlessly."> <meta name="description" content="Сохраняйте рецепты из Pinterest и Instagram, создавайте рецепты по фото с помощью ИИ, сравнивайте цены в магазинах и делите чеки с друзьями.">
<meta name="keywords" content="recipe manager, shopping list generator, AI recipe scanner, cooking organizer, meal planner"> <meta name="keywords" content="рецепты ИИ, список покупок, планировщик питания, распознавание блюд, сравнение цен, разделение чека">
<!-- Open Graph / Facebook --> <!-- Open Graph / Facebook -->
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:title" content="Smart Recipe & Shopping List"> <meta property="og:title" content="SmartRecipe — Умный помощник по рецептам и покупкам">
<meta property="og:description" content="Manage your recipes and generate smart shopping lists."> <meta property="og:description" content="ИИ-помощник для создания рецептов по фото, сравнения цен и организации совместных покупок.">
<meta property="og:image" content=""> <meta property="og:image" content="">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Smart Recipe & Shopping List"> <meta name="twitter:title" content="SmartRecipe — Умный помощник по рецептам и покупкам">
<meta name="twitter:description" content="Manage your recipes and generate smart shopping lists."> <meta name="twitter:description" content="ИИ-помощник для создания рецептов по фото, сравнения цен и организации совместных покупок.">
<meta name="twitter:image" content=""> <meta name="twitter:image" content="">
<!-- Styles --> <!-- Styles -->
@ -27,7 +27,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v3"> <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v4">
</head> </head>
<body> <body>
@ -36,7 +36,7 @@
<div class="container"> <div class="container">
<a class="navbar-brand d-flex align-items-center" href="/"> <a class="navbar-brand d-flex align-items-center" href="/">
<i class="bi bi-book-half me-2" style="color: var(--accent-color);"></i> <i class="bi bi-book-half me-2" style="color: var(--accent-color);"></i>
<span class="fw-bold">SmartRecipe</span> <span class="fw-bold">СмартРецепт</span>
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -58,10 +58,34 @@
<!-- Left Column: Image --> <!-- Left Column: Image -->
<div class="col-lg-6 d-none d-lg-block auth-image-container"> <div class="col-lg-6 d-none d-lg-block auth-image-container">
<div class="auth-image-overlay d-flex align-items-center justify-content-center p-5 text-white"> <div class="auth-image-overlay d-flex align-items-center justify-content-center p-5 text-white">
<div class="auth-branding-content text-center"> <div class="auth-branding-content text-start">
<i class="bi bi-book-half display-1 mb-4" style="color: #FF7F50; filter: drop-shadow(0 0 10px rgba(255, 127, 80, 0.3));"></i> <div class="text-center mb-4">
<h1 class="display-3 fw-bold mb-4">SmartRecipe</h1> <i class="bi bi-book-half display-1" style="color: #FF7F50; filter: drop-shadow(0 0 10px rgba(255, 127, 80, 0.3));"></i>
<p class="lead fs-4">Manage your recipes and generate smart shopping lists. Identify dishes with AI and calculate ingredients effortlessly.</p> <h1 class="display-3 fw-bold mt-2">СмартРецепт</h1>
</div>
<p class="lead fs-5 mb-4">Это не просто кулинарная книга. Это ваш интеллектуальный помощник на каждый день и для особых случаев:</p>
<ul class="list-unstyled fs-6 mb-4">
<li class="mb-3 d-flex align-items-start">
<i class="bi bi-magic text-primary me-3 mt-1"></i>
<span><strong>Рецепты по фото:</strong> Просто загрузите изображение блюда, и ИИ создаст точный рецепт, чтобы результат был как на картинке.</span>
</li>
<li class="mb-3 d-flex align-items-start">
<i class="bi bi-cart-check text-primary me-3 mt-1"></i>
<span><strong>Умные покупки:</strong> Составляйте списки продуктов, сравнивайте цены в магазинах и находите самые выгодные предложения.</span>
</li>
<li class="mb-3 d-flex align-items-start">
<i class="bi bi-people text-primary me-3 mt-1"></i>
<span><span><strong>Совместный доступ:</strong> Распределяйте списки продуктов между друзьями и близкими для организации праздников.</span>
</li>
<li class="mb-3 d-flex align-items-start">
<i class="bi bi-receipt text-primary me-3 mt-1"></i>
<span><strong>Разделение чека:</strong> Сфотографируйте чек после покупок, и приложение само разделит сумму между всеми участниками.</span>
</li>
<li class="mb-3 d-flex align-items-start">
<i class="bi bi-browser-chrome text-primary me-3 mt-1"></i>
<span><strong>Импорт отовсюду:</strong> Сохраняйте любимые идеи из Pinterest, Instagram и других соцсетей в один клик.</span>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@ -72,48 +96,48 @@
<!-- Login Form --> <!-- Login Form -->
<div id="login-container"> <div id="login-container">
<div class="mb-5"> <div class="mb-5">
<h2 class="display-5 mb-2">Welcome back</h2> <h2 class="display-5 mb-2">С возвращением</h2>
<p class="text-muted">Enter your credentials to access your recipes.</p> <p class="text-muted">Введите свои данные для доступа к рецептам.</p>
</div> </div>
<form id="login-form-landing"> <form id="login-form-landing">
<div class="mb-4"> <div class="mb-4">
<label class="form-label">Email Address</label> <label class="form-label">Электронная почта</label>
<input type="email" class="form-control form-control-lg" name="email" placeholder="name@example.com" required> <input type="email" class="form-control form-control-lg" name="email" placeholder="name@example.com" required>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label class="form-label">Password</label> <label class="form-label">Пароль</label>
<input type="password" class="form-control form-control-lg" name="password" placeholder="••••••••" required> <input type="password" class="form-control form-control-lg" name="password" placeholder="••••••••" required>
</div> </div>
<div class="d-grid gap-2 mb-4"> <div class="d-grid gap-2 mb-4">
<button type="submit" class="btn btn-primary btn-lg">Sign In</button> <button type="submit" class="btn btn-primary btn-lg">Войти</button>
</div> </div>
</form> </form>
<p class="text-center text-muted"> <p class="text-center text-muted">
Don't have an account? <a href="#" id="show-register" class="text-primary fw-bold text-decoration-none">Create account</a> Нет аккаунта? <a href="#" id="show-register" class="text-primary fw-bold text-decoration-none">Создать аккаунт</a>
</p> </p>
</div> </div>
<!-- Register Form --> <!-- Register Form -->
<div id="register-container" class="d-none"> <div id="register-container" class="d-none">
<div class="mb-5"> <div class="mb-5">
<h2 class="display-5 mb-2">Create Account</h2> <h2 class="display-5 mb-2">Регистрация</h2>
<p class="text-muted">Start your smart cooking journey today.</p> <p class="text-muted">Начните свой путь к умной кулинарии сегодня.</p>
</div> </div>
<form id="register-form-landing"> <form id="register-form-landing">
<div class="mb-4"> <div class="mb-4">
<label class="form-label">Email Address</label> <label class="form-label">Электронная почта</label>
<input type="email" class="form-control form-control-lg" name="email" placeholder="name@example.com" required> <input type="email" class="form-control form-control-lg" name="email" placeholder="name@example.com" required>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label class="form-label">Password</label> <label class="form-label">Пароль</label>
<input type="password" class="form-control form-control-lg" name="password" placeholder="••••••••" required> <input type="password" class="form-control form-control-lg" name="password" placeholder="••••••••" required>
</div> </div>
<div class="d-grid gap-2 mb-4"> <div class="d-grid gap-2 mb-4">
<button type="submit" class="btn btn-primary btn-lg">Register</button> <button type="submit" class="btn btn-primary btn-lg">Зарегистрироваться</button>
</div> </div>
</form> </form>
<p class="text-center text-muted"> <p class="text-center text-muted">
Already have an account? <a href="#" id="show-login" class="text-primary fw-bold text-decoration-none">Login here</a> Уже есть аккаунт? <a href="#" id="show-login" class="text-primary fw-bold text-decoration-none">Войти здесь</a>
</p> </p>
</div> </div>
@ -126,34 +150,34 @@
<div id="app-view" class="d-none"> <div id="app-view" class="d-none">
<main class="container my-5"> <main class="container my-5">
<div class="text-center mb-5" style="padding-top: 20px;"> <div class="text-center mb-5" style="padding-top: 20px;">
<h1 class="display-4 mt-4">My Recipe Book</h1> <h1 class="display-4 mt-4">Моя кулинарная книга</h1>
<p class="lead">Plan your meals and get your shopping lists sorted.</p> <p class="lead">Планируйте меню и управляйте списком покупок легко.</p>
</div> </div>
<div class="row g-4"> <div class="row g-4">
<!-- Left Column: All Recipes --> <!-- Left Column: All Recipes -->
<div class="col-md-6"> <div class="col-md-6">
<div class="d-flex justify-content-between align-items-center mb-4"> <div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="text-center mb-0">All Recipes</h2> <h2 class="text-center mb-0">Все рецепты</h2>
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#recipe-form-modal"> <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#recipe-form-modal">
Add Recipe Добавить рецепт
</button> </button>
</div> </div>
<div class="mb-3 search-container"> <div class="mb-3 search-container">
<i class="bi bi-search"></i> <i class="bi bi-search"></i>
<input type="text" id="recipe-search" class="form-control" placeholder="Search recipes..."> <input type="text" id="recipe-search" class="form-control" placeholder="Поиск рецептов...">
</div> </div>
<div class="mb-3 d-flex flex-wrap gap-2" id="category-filters"> <div class="mb-3 d-flex flex-wrap gap-2" id="category-filters">
<button class="btn btn-secondary active" data-category="all">All</button> <button class="btn btn-secondary active" data-category="all">Все</button>
<button class="btn btn-outline-secondary" data-category="Drinks">Drinks</button> <button class="btn btn-outline-secondary" data-category="Drinks">Напитки</button>
<button class="btn btn-outline-secondary" data-category="Breakfast">Breakfast</button> <button class="btn btn-outline-secondary" data-category="Breakfast">Завтрак</button>
<button class="btn btn-outline-secondary" data-category="Dinner">Dinner</button> <button class="btn btn-outline-secondary" data-category="Dinner">Обед/Ужин</button>
<button class="btn btn-outline-secondary" data-category="Appetizers">Appetizers</button> <button class="btn btn-outline-secondary" data-category="Appetizers">Закуски</button>
<button class="btn btn-outline-secondary" data-category="No category">No category</button> <button class="btn btn-outline-secondary" data-category="No category">Без категории</button>
</div> </div>
<div id="recipe-cards-container" class="row"> <div id="recipe-cards-container" class="row">
<div class="col-12"> <div class="col-12">
<p class="text-center text-muted">Your saved recipes will appear here.</p> <p class="text-center text-muted">Ваши сохраненные рецепты появятся здесь.</p>
</div> </div>
</div> </div>
</div> </div>
@ -161,16 +185,16 @@
<!-- Right Column: Shopping List / Products --> <!-- Right Column: Shopping List / Products -->
<div class="col-md-6"> <div class="col-md-6">
<div class="d-flex justify-content-between align-items-center mb-4"> <div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="text-center mb-0">Shopping List</h2> <h2 class="text-center mb-0">Список покупок</h2>
<div> <div>
<button id="add-product-btn" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#add-product-modal">Add Product</button> <button id="add-product-btn" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#add-product-modal">Добавить продукт</button>
<button id="print-shopping-list-btn" class="btn btn-outline-secondary"><i class="bi bi-printer"></i> Print</button> <button id="print-shopping-list-btn" class="btn btn-outline-secondary"><i class="bi bi-printer"></i> Печать</button>
</div> </div>
</div> </div>
<div class="card shadow"> <div class="card shadow">
<div class="card-body" id="shopping-list-container"> <div class="card-body" id="shopping-list-container">
<div class="text-center text-muted p-5"> <div class="text-center text-muted p-5">
<p>Your calculated list will appear here.</p> <p>Ваш список покупок появится здесь после выбора рецептов.</p>
</div> </div>
</div> </div>
</div> </div>
@ -184,7 +208,7 @@
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="recipe-form-modal-label">Add a Recipe</h5> <h5 class="modal-title" id="recipe-form-modal-label">Добавить рецепт</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -192,61 +216,61 @@
<form id="recipe-form"> <form id="recipe-form">
<input type="hidden" id="recipeId"> <input type="hidden" id="recipeId">
<div class="mb-3"> <div class="mb-3">
<label for="recipeName" class="form-label">Recipe Name</label> <label for="recipeName" class="form-label">Название рецепта</label>
<input type="text" class="form-control" id="recipeName" placeholder="e.g., Avocado Toast"> <input type="text" class="form-control" id="recipeName" placeholder="например, Авокадо тост">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="recipeCategory" class="form-label">Category</label> <label for="recipeCategory" class="form-label">Категория</label>
<select class="form-control" id="recipeCategory"> <select class="form-control" id="recipeCategory">
<option value="" selected disabled>Choose...</option> <option value="" selected disabled>Выберите...</option>
<option value="Drinks">Drinks</option> <option value="Drinks">Напитки</option>
<option value="Breakfast">Breakfast</option> <option value="Breakfast">Завтрак</option>
<option value="Dinner">Dinner</option> <option value="Dinner">Обед/Ужин</option>
<option value="Appetizers">Appetizers</option> <option value="Appetizers">Закуски</option>
</select> </select>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="recipeImage" class="form-label d-flex justify-content-between"> <label for="recipeImage" class="form-label d-flex justify-content-between">
Recipe Image Фото рецепта
<button type="button" id="ai-scan-btn" class="btn btn-outline-primary btn-sm"> <button type="button" id="ai-scan-btn" class="btn btn-outline-primary btn-sm">
<i class="bi bi-magic"></i> AI Scan <i class="bi bi-magic"></i> AI Сканер
</button> </button>
</label> </label>
<input type="file" class="form-control" id="recipeImage"> <input type="file" class="form-control" id="recipeImage">
<div id="ai-scan-loading" class="text-primary mt-2 d-none"> <div id="ai-scan-loading" class="text-primary mt-2 d-none">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
AI is identifying the dish and recipe... ИИ определяет блюдо и создает рецепт...
</div> </div>
</div> </div>
<hr class="my-4 border-secondary"> <hr class="my-4 border-secondary">
<h3 class="h5 mb-3">Ingredients (for 1 person)</h3> <h3 class="h5 mb-3">Ингредиенты (на 1 человека)</h3>
<div id="ingredients-container"> <div id="ingredients-container">
<!-- Ingredient rows will be injected here by JS --> <!-- Ingredient rows will be injected here by JS -->
</div> </div>
<button type="button" id="add-ingredient" class="btn btn-secondary btn-sm mt-2">+ Add Ingredient</button> <button type="button" id="add-ingredient" class="btn btn-secondary btn-sm mt-2">+ Добавить ингредиент</button>
<hr class="my-4 border-secondary"> <hr class="my-4 border-secondary">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="mb-3"> <div class="mb-3">
<label for="guestCount" class="form-label">How many guests?</label> <label for="guestCount" class="form-label">Сколько гостей?</label>
<input type="number" class="form-control" id="guestCount" placeholder="e.g., 8" min="1" value="1"> <input type="number" class="form-control" id="guestCount" placeholder="например, 8" min="1" value="1">
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="mb-3"> <div class="mb-3">
<label for="portionsPerGuest" class="form-label">Portions/guest</label> <label for="portionsPerGuest" class="form-label">Порций на гостя</label>
<input type="number" class="form-control" id="portionsPerGuest" placeholder="e.g., 2" min="1" value="1"> <input type="number" class="form-control" id="portionsPerGuest" placeholder="например, 2" min="1" value="1">
</div> </div>
</div> </div>
</div> </div>
<div class="d-grid gap-2 mt-4"> <div class="d-grid gap-2 mt-4">
<button type="button" id="new-recipe-btn" class="btn btn-primary">Save Recipe</button> <button type="button" id="new-recipe-btn" class="btn btn-primary">Сохранить рецепт</button>
<button type="button" id="cancel-edit-btn" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" id="cancel-edit-btn" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
</div> </div>
</form> </form>
</div> </div>
@ -260,48 +284,48 @@
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="add-product-modal-label">Add a Product</h5> <h5 class="modal-title" id="add-product-modal-label">Добавить продукт</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form id="add-product-form"> <form id="add-product-form">
<div class="mb-3"> <div class="mb-3">
<label for="productName" class="form-label">Product Name</label> <label for="productName" class="form-label">Название продукта</label>
<input type="text" class="form-control" id="productName" placeholder="e.g., Milk"> <input type="text" class="form-control" id="productName" placeholder="например, Молоко">
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="mb-3"> <div class="mb-3">
<label for="productQuantity" class="form-label">Quantity</label> <label for="productQuantity" class="form-label">Количество</label>
<input type="number" class="form-control" id="productQuantity" placeholder="e.g., 1" min="1" value="1"> <input type="number" class="form-control" id="productQuantity" placeholder="например, 1" min="1" value="1">
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Unit</label> <label class="form-label">Единица</label>
<div class="btn-group unit-selector" role="group" aria-label="Unit selector"> <div class="btn-group unit-selector" role="group" aria-label="Unit selector">
<button type="button" class="btn btn-secondary unit-btn">g</button> <button type="button" class="btn btn-secondary unit-btn">г</button>
<button type="button" class="btn btn-outline-secondary unit-btn">kg</button> <button type="button" class="btn btn-outline-secondary unit-btn">кг</button>
<button type="button" class="btn btn-outline-secondary unit-btn">ml</button> <button type="button" class="btn btn-outline-secondary unit-btn">мл</button>
<button type="button" class="btn btn-outline-secondary unit-btn">l</button> <button type="button" class="btn btn-outline-secondary unit-btn">л</button>
<button type="button" class="btn btn-outline-secondary unit-btn">piece</button> <button type="button" class="btn btn-outline-secondary unit-btn">шт</button>
<button type="button" class="btn btn-outline-secondary unit-btn">pack</button> <button type="button" class="btn btn-outline-secondary unit-btn">уп</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="mb-3" id="product-category-wrapper"> <div class="mb-3" id="product-category-wrapper">
<label for="productCategory" class="form-label">Category</label> <label for="productCategory" class="form-label">Категория</label>
<select class="form-select" id="productCategory"> <select class="form-select" id="productCategory">
<option value="Food" selected>Food</option> <option value="Food" selected>Еда</option>
<option value="Drinks">Drinks</option> <option value="Drinks">Напитки</option>
<option value="Cooking and serving">Cooking and serving</option> <option value="Cooking and serving">Приготовление и сервировка</option>
<option value="Tableware and consumables">Tableware and consumables</option> <option value="Tableware and consumables">Посуда и расходники</option>
</select> </select>
</div> </div>
<div class="d-grid gap-2 mt-4"> <div class="d-grid gap-2 mt-4">
<button type="submit" class="btn btn-primary">Add Product</button> <button type="submit" class="btn btn-primary">Добавить продукт</button>
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
</div> </div>
</form> </form>
</div> </div>
@ -314,27 +338,27 @@
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="view-recipe-modal-label">View Recipe</h5> <h5 class="modal-title" id="view-recipe-modal-label">Просмотр рецепта</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<h2 id="view-recipe-name"></h2> <h2 id="view-recipe-name"></h2>
<p><strong>Category:</strong> <span id="view-recipe-category"></span></p> <p><strong>Категория:</strong> <span id="view-recipe-category"></span></p>
<p><strong>Serves:</strong> <span id="view-recipe-guests"></span></p> <p><strong>Порций:</strong> <span id="view-recipe-guests"></span></p>
<hr> <hr>
<h3>Ingredients</h3> <h3>Ингредиенты</h3>
<ul id="view-recipe-ingredients" class="list-group"> <ul id="view-recipe-ingredients" class="list-group">
</ul> </ul>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<footer class="text-center py-4 mt-5"> <footer class="text-center py-4 mt-5">
<p class="mb-0">&copy; <?php echo date("Y"); ?> Smart Recipe & Shopping List.</p> <p class="mb-0">&copy; <?php echo date("Y"); ?> СмартРецепт — Умный помощник по рецептам и покупкам.</p>
</footer> </footer>
<!-- Scripts --> <!-- Scripts -->
@ -346,17 +370,17 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="confirmRemoveModalLabel">Confirm Removal</h5> <h5 class="modal-title" id="confirmRemoveModalLabel">Подтверждение удаления</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>You are about to remove an ingredient from a recipe. This will affect the recipe itself. Are you sure you want to continue?</p> <p>Вы собираетесь удалить ингредиент из рецепта. Это изменит сам рецепт. Вы уверены, что хотите продолжить?</p>
<p><strong>Recipe:</strong> <span id="modal-recipe-name"></span></p> <p><strong>Рецепт:</strong> <span id="modal-recipe-name"></span></p>
<p><strong>Ingredient:</strong> <span id="modal-ingredient-name"></span></p> <p><strong>Ингредиент:</strong> <span id="modal-ingredient-name"></span></p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
<button type="button" class="btn btn-danger" id="confirm-remove-btn">Remove</button> <button type="button" class="btn btn-danger" id="confirm-remove-btn">Удалить</button>
</div> </div>
</div> </div>
</div> </div>