UI update
This commit is contained in:
@@ -26,4 +26,15 @@ public class RecipeController : ControllerBase
|
||||
var result = await _recipeService.ParseRecipeImageAsync(image);
|
||||
return Ok(result);
|
||||
}
|
||||
|
||||
[HttpGet]
|
||||
public async Task<IActionResult> GetRecipes()
|
||||
{
|
||||
// This assumes your DbContext is injected as _context
|
||||
var recipes = await _context.Recipes
|
||||
.OrderByDescending(r => r.CreatedAt)
|
||||
.ToListAsync();
|
||||
|
||||
return Ok(recipes);
|
||||
}
|
||||
}
|
||||
@@ -1,104 +1,11 @@
|
||||
<template>
|
||||
<v-app class="recipe-bg">
|
||||
<v-main>
|
||||
<v-container>
|
||||
<v-card class="recipe-card pa-10 mx-auto mt-10" max-width="950" elevation="1">
|
||||
|
||||
<header class="text-center mb-10">
|
||||
<h1 class="brand-title">Seasoned</h1>
|
||||
<p class="brand-subtitle">A Recipe Collection</p>
|
||||
</header>
|
||||
|
||||
<v-divider class="mb-10 separator"></v-divider>
|
||||
|
||||
<v-row justify="center" class="mb-12">
|
||||
<v-col cols="12" md="8">
|
||||
<v-file-input
|
||||
v-model="files"
|
||||
label="Upload Image"
|
||||
variant="solo-filled"
|
||||
flat
|
||||
accept="image/*"
|
||||
class="custom-input mb-4"
|
||||
></v-file-input>
|
||||
|
||||
<v-btn
|
||||
class="analyze-btn"
|
||||
block
|
||||
size="x-large"
|
||||
elevation="0"
|
||||
:loading="loading"
|
||||
@click="uploadImage"
|
||||
>
|
||||
Analyze Recipe
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="recipe" class="recipe-content">
|
||||
<h2 class="recipe-title text-center mb-4">{{ recipe.title }}</h2>
|
||||
<p class="recipe-description text-center mb-12 text-italic">{{ recipe.description }}</p>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="5">
|
||||
<div class="section-header mb-6 px-2">
|
||||
<v-icon icon="mdi-spoon-sugar" class="mr-2" size="small"></v-icon>
|
||||
<span>Ingredients</span>
|
||||
</div>
|
||||
<v-list class="ingredients-list">
|
||||
<v-list-item v-for="(item, i) in recipe.ingredients" :key="i" class="ingredient-item">
|
||||
{{ item }}
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="7">
|
||||
<div class="section-header mb-6 px-2">
|
||||
<v-icon icon="mdi-pot-steam-outline" class="mr-2" size="small"></v-icon>
|
||||
<span>Instructions</span>
|
||||
</div>
|
||||
<div v-for="(step, i) in recipe.instructions" :key="i" class="instruction-step mb-8">
|
||||
<span class="step-number">{{ i + 1 }}.</span>
|
||||
<p class="step-text">{{ step }}</p>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</transition>
|
||||
</v-card>
|
||||
</v-container>
|
||||
<NuxtPage />
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import axios from 'axios'
|
||||
import { ref } from 'vue'
|
||||
import '@/assets/css/app-theme.css'
|
||||
const config = useRuntimeConfig()
|
||||
const files = ref([])
|
||||
const loading = ref(false)
|
||||
const recipe = ref(null)
|
||||
|
||||
const uploadImage = async () => {
|
||||
const fileToUpload = Array.isArray(files.value) ? files.value[0] : files.value;
|
||||
if (!fileToUpload) return;
|
||||
|
||||
loading.value = true;
|
||||
const formData = new FormData();
|
||||
formData.append('image', fileToUpload);
|
||||
|
||||
try {
|
||||
const response = await $fetch(`${config.public.apiBase}api/recipe/upload`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
recipe.value = response;
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,17 +1,22 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;600&display=swap');
|
||||
|
||||
.recipe-bg {
|
||||
background-color: #3e2a14 !important;
|
||||
background-image: url("https://www.transparenttextures.com/patterns/dark-wood.png") !important; /* Richer wood texture */
|
||||
background-size: cover;
|
||||
/* A rich, warm medium-brown walnut tone */
|
||||
background-color: #5d4a36 !important;
|
||||
/* Using the wood pattern but allowing the lighter base to show through */
|
||||
background-image: url("https://www.transparenttextures.com/patterns/tileable-wood-colored.png") !important;
|
||||
background-size: 500px; /* Slightly larger scale makes the grain easier to see */
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* Ensure the card has a natural 'sit' on this visible wood */
|
||||
.recipe-card {
|
||||
background-color: #f4e4bc !important;
|
||||
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png"); /* Stronger linen texture */
|
||||
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
|
||||
border: 1px solid #c9b996 !important;
|
||||
border-radius: 12px !important;
|
||||
font-family: 'Inter', sans-serif;
|
||||
/* A deeper, more spread-out shadow to account for the lighter background */
|
||||
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35) !important;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
@@ -69,15 +74,6 @@
|
||||
border: 2px solid #556b2f !important;
|
||||
}
|
||||
|
||||
.analyze-btn {
|
||||
background-color: #556b2f !important;
|
||||
color: #ffffff !important;
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
text-transform: none;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.ingredients-list {
|
||||
background: transparent !important;
|
||||
}
|
||||
@@ -114,3 +110,101 @@
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.custom-input .v-field__input {
|
||||
justify-content: center !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* 2. Center the floating label specifically */
|
||||
.custom-input .v-label.v-field-label {
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
width: 100% !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* 3. Ensure both elements are the exact same height and shape */
|
||||
.custom-input .v-field {
|
||||
height: 56px !important;
|
||||
min-height: 56px !important;
|
||||
border-radius: 8px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* 4. Remove the prepend icon space that kicks text to the right */
|
||||
.custom-input .v-field__prepend-inner {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 5. Typography match: ensure font weight and size are identical */
|
||||
.custom-input .v-label {
|
||||
font-family: 'Inter', sans-serif !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 1rem !important;
|
||||
letter-spacing: normal !important;
|
||||
}
|
||||
|
||||
/* Drag and Drop Zone Styling */
|
||||
.drop-zone {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
border: 2px dashed #8c857b;
|
||||
border-radius: 12px;
|
||||
background-color: rgba(62, 42, 20, 0.03) !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
color: #3e3a35 !important;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.drop-zone--active {
|
||||
background-color: rgba(85, 107, 47, 0.1) !important;
|
||||
border-color: #556b2f;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.drop-text {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.selected-text {
|
||||
font-weight: 600;
|
||||
color: #556b2f;
|
||||
}
|
||||
|
||||
.analyze-btn,
|
||||
.gallery-btn,
|
||||
.analyze-btn *,
|
||||
.gallery-btn * {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
text-transform: none !important;
|
||||
font-size: 1.1rem !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
font-weight: 400 !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.analyze-btn {
|
||||
margin-bottom: 16px !important;
|
||||
background-color: #556b2f !important;
|
||||
color: #ffffff !important;
|
||||
height: 56px !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.gallery-btn {
|
||||
background-color: #8c4a32 !important;
|
||||
color: #ffffff !important;
|
||||
height: 56px !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
37
Seasoned.Frontend/app/assets/css/gallery.css
Normal file
37
Seasoned.Frontend/app/assets/css/gallery.css
Normal file
@@ -0,0 +1,37 @@
|
||||
/* assets/css/gallery.css */
|
||||
|
||||
.gallery-item-card {
|
||||
background-color: #fcfaf5 !important;
|
||||
border: 1px solid #e2d7ba !important;
|
||||
border-radius: 4px !important;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.gallery-item-card:hover {
|
||||
transform: translateY(-5px) rotate(1deg); /* Physical paper feel */
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
|
||||
}
|
||||
|
||||
.recipe-thumbnail {
|
||||
filter: sepia(0.15) contrast(1.1); /* Heirloom photo effect */
|
||||
}
|
||||
|
||||
.gallery-item-title {
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
font-size: 1.25rem;
|
||||
color: #2e1e0a; /* Dark ink color */
|
||||
}
|
||||
|
||||
.gallery-item-date {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.7rem;
|
||||
color: #8c857b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
|
||||
.view-recipe-btn {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
font-style: italic;
|
||||
text-transform: none !important;
|
||||
}
|
||||
46
Seasoned.Frontend/app/pages/gallery.vue
Normal file
46
Seasoned.Frontend/app/pages/gallery.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-card class="recipe-card pa-10 mx-auto mt-10" max-width="1200" elevation="1">
|
||||
|
||||
<header class="text-center mb-10">
|
||||
<h1 class="brand-title">The Collection</h1>
|
||||
<p class="brand-subtitle">Hand-Picked & Seasoned</p>
|
||||
</header>
|
||||
|
||||
<v-divider class="mb-10 separator"></v-divider>
|
||||
|
||||
<v-btn to="/" variant="text" class="back-link mb-8" color="#6d5e4a">
|
||||
<v-icon icon="mdi-chevron-left" class="mr-1"></v-icon>
|
||||
Return to Scanner
|
||||
</v-btn>
|
||||
|
||||
<v-row>
|
||||
<v-col v-for="n in 6" :key="n" cols="12" sm="6" md="4">
|
||||
<v-card class="gallery-item-card pa-4" elevation="2">
|
||||
<v-img
|
||||
src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c"
|
||||
height="200"
|
||||
cover
|
||||
class="rounded-sm mb-4 recipe-thumbnail"
|
||||
>
|
||||
<template v-slot:placeholder>
|
||||
<v-row class="fill-height ma-0" align="center" justify="center">
|
||||
<v-progress-circular indeterminate color="#556b2f"></v-progress-circular>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-img>
|
||||
|
||||
<h3 class="gallery-item-title text-center">Grandma's Stew</h3>
|
||||
<p class="gallery-item-date text-center">Added March 2026</p>
|
||||
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn variant="text" class="view-recipe-btn" color="#556b2f">
|
||||
Open Recipe
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
152
Seasoned.Frontend/app/pages/index.vue
Normal file
152
Seasoned.Frontend/app/pages/index.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-card class="recipe-card pa-10 mx-auto mt-10" max-width="950" elevation="1">
|
||||
|
||||
<header class="text-center mb-10">
|
||||
<h1 class="brand-title">Seasoned</h1>
|
||||
<p class="brand-subtitle">A Recipe Collection</p>
|
||||
</header>
|
||||
|
||||
<v-divider class="mb-10 separator"></v-divider>
|
||||
|
||||
<v-row justify="center" class="mb-12">
|
||||
<v-col cols="12" md="8" class="d-flex flex-column align-center">
|
||||
<div
|
||||
class="drop-zone mb-4"
|
||||
:class="{ 'drop-zone--active': isDragging }"
|
||||
@dragover.prevent="isDragging = true"
|
||||
@dragleave.prevent="isDragging = false"
|
||||
@drop.prevent="handleDrop"
|
||||
@click="$refs.fileInput.click()"
|
||||
>
|
||||
<v-icon icon="mdi-cloud-upload-outline" size="large" class="mb-2"></v-icon>
|
||||
<p v-if="!files || files.length === 0" class="drop-text">
|
||||
Drag your recipe photo here or <strong>click to browse</strong>
|
||||
</p>
|
||||
<p v-else class="drop-text selected-text">
|
||||
{{ Array.isArray(files) ? files[0].name : files.name }}
|
||||
</p>
|
||||
|
||||
<v-file-input
|
||||
ref="fileInput"
|
||||
v-model="files"
|
||||
accept="image/*"
|
||||
class="d-none"
|
||||
hide-details
|
||||
></v-file-input>
|
||||
</div>
|
||||
|
||||
<v-btn
|
||||
class="analyze-btn w-100"
|
||||
size="large"
|
||||
elevation="0"
|
||||
:loading="loading"
|
||||
:disabled="!files || files.length === 0"
|
||||
@click="uploadImage"
|
||||
>
|
||||
<v-icon icon="mdi-pot-steam" class="mr-2"></v-icon>
|
||||
Analyze Recipe
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
to="/gallery"
|
||||
class="gallery-btn w-100"
|
||||
size="large"
|
||||
elevation="0"
|
||||
>
|
||||
<v-icon icon="mdi-book-open-variant" class="mr-2"></v-icon>
|
||||
View Collection
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="recipe" class="recipe-content">
|
||||
<h2 class="recipe-title text-center mb-4">{{ recipe.title }}</h2>
|
||||
<p class="recipe-description text-center mb-12 text-italic">{{ recipe.description }}</p>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="5">
|
||||
<div class="section-header mb-6 px-2">
|
||||
<v-icon icon="mdi-spoon-sugar" class="mr-2" size="small"></v-icon>
|
||||
<span>Ingredients</span>
|
||||
</div>
|
||||
<v-list class="ingredients-list">
|
||||
<v-list-item v-for="(item, i) in recipe.ingredients" :key="i" class="ingredient-item">
|
||||
{{ item }}
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="7">
|
||||
<div class="section-header mb-6 px-2">
|
||||
<v-icon icon="mdi-pot-steam-outline" class="mr-2" size="small"></v-icon>
|
||||
<span>Instructions</span>
|
||||
</div>
|
||||
<div v-for="(step, i) in recipe.instructions" :key="i" class="instruction-step mb-8">
|
||||
<span class="step-number">{{ i + 1 }}.</span>
|
||||
<p class="step-text">{{ step }}</p>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row justify="center" class="mt-12 pb-10">
|
||||
<v-btn
|
||||
class="save-recipe-btn px-12"
|
||||
size="x-large"
|
||||
elevation="0"
|
||||
:loading="saving"
|
||||
@click="saveToCollection"
|
||||
>
|
||||
<v-icon icon="mdi-content-save-check-outline" class="mr-2"></v-icon>
|
||||
Save to Collection
|
||||
</v-btn>
|
||||
</v-row>
|
||||
|
||||
</div>
|
||||
</transition>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import '@/assets/css/app-theme.css'
|
||||
const config = useRuntimeConfig()
|
||||
const files = ref([])
|
||||
const loading = ref(false)
|
||||
const recipe = ref(null)
|
||||
const isDragging = ref(false)
|
||||
const saving = ref(false)
|
||||
|
||||
const handleDrop = (e) => {
|
||||
isDragging.value = false
|
||||
const droppedFiles = e.dataTransfer.files
|
||||
if (droppedFiles.length > 0) {
|
||||
files.value = droppedFiles[0]
|
||||
}
|
||||
}
|
||||
|
||||
const uploadImage = async () => {
|
||||
const fileToUpload = Array.isArray(files.value) ? files.value[0] : files.value;
|
||||
if (!fileToUpload) return;
|
||||
|
||||
loading.value = true;
|
||||
const formData = new FormData();
|
||||
formData.append('image', fileToUpload);
|
||||
|
||||
try {
|
||||
const response = await $fetch(`${config.public.apiBase}api/recipe/upload`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
recipe.value = response;
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -12,6 +12,8 @@ export default defineNuxtConfig({
|
||||
css: [
|
||||
'vuetify/lib/styles/main.sass',
|
||||
'@mdi/font/css/materialdesignicons.min.css',
|
||||
'@/assets/css/app-theme.css',
|
||||
'@/assets/css/gallery.css'
|
||||
],
|
||||
|
||||
build: {
|
||||
|
||||
Reference in New Issue
Block a user