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

Good colours

Browse Source
This commit is contained in:
Flatlogic Bot 2026-01-26 21:54:15 +00:00
parent afdfe09b22
commit fdf8f1c93d
2 changed files with 130 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
assets/css/custom.css
View File

@ -1,13 +1,25 @@
:root {
--brand-primary: #2D6A4F; /* Deep Emerald Green */
--brand-primary-hover: #1B4332;
--brand-secondary: #D4A373; /* Warm Gold/Honey */
--brand-accent: #E9C46A; /* Saffron */
--brand-danger: #BC4749; /* Deep Earthy Red */
--bg-main: #FDFBF7; /* Cream/Off-white */
--text-main: #2D2D2D;
--text-muted: #666666;
--card-shadow: 0 12px 40px rgba(45, 106, 79, 0.08);
}
/* General Body Styles */ /* General Body Styles */
body { body {
background-color: #FAF9F6; /* Light beige background */ background-color: var(--bg-main);
color: #2D2D2D; /* Dark gray text */ color: var(--text-main);
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
} }
/* Headings */ /* Headings */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: #2D2D2D !important; color: var(--text-main) !important;
font-weight: 700; font-weight: 700;
} }
@ -29,29 +41,29 @@ button,
/* Main Content */ /* Main Content */
.display-4 { .display-4 {
font-weight: 700; font-weight: 700;
color: #2D2D2D; color: var(--text-main);
} }
.lead { .lead {
color: #666666; color: var(--text-muted);
} }
/* Cards */ /* Cards */
.card { .card {
background-color: #ffffff; background-color: #ffffff;
border: none; border: none;
border-radius: 20px; border-radius: 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); box-shadow: var(--card-shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
.card-body { .card-body {
color: #2D2D2D; color: var(--text-main);
} }
/* Forms */ /* Forms */
.form-label { .form-label {
color: #2D2D2D; color: var(--text-main);
font-weight: 600; font-weight: 600;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -59,17 +71,17 @@ button,
.form-control, .form-control,
.form-select { .form-select {
background-color: #ffffff; background-color: #ffffff;
border: 2px solid #EEEEEE; border: 2px solid #F0F0F0;
color: #2D2D2D; color: var(--text-main);
padding: 12px 16px; padding: 12px 16px;
} }
.form-control:focus, .form-control:focus,
.form-select:focus { .form-select:focus {
background-color: #ffffff; background-color: #ffffff;
border-color: #FF7F50; /* Orange accent */ border-color: var(--brand-primary);
box-shadow: 0 0 0 0.25rem rgba(255, 127, 80, 0.15); box-shadow: 0 0 0 0.25rem rgba(45, 106, 79, 0.1);
color: #2D2D2D; color: var(--text-main);
} }
.form-control::placeholder { .form-control::placeholder {
@ -78,50 +90,89 @@ button,
/* Buttons */ /* Buttons */
.btn-primary { .btn-primary {
background-color: #FF7F50 !important; /* Orange */ background-color: var(--brand-primary) !important;
border-color: #FF7F50 !important; border-color: var(--brand-primary) !important;
color: #ffffff !important; color: #ffffff !important;
} }
.btn-primary:hover { .btn-primary:hover {
background-color: #E66E45 !important; background-color: var(--brand-primary-hover) !important;
border-color: #E66E45 !important; border-color: var(--brand-primary-hover) !important;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 127, 80, 0.3); box-shadow: 0 8px 20px rgba(45, 106, 79, 0.2);
}
.btn-outline-primary {
color: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
border-width: 2px;
}
.btn-outline-primary:hover {
background-color: var(--brand-primary) !important;
color: #ffffff !important;
}
.text-primary {
color: var(--brand-primary) !important;
} }
.btn-danger { .btn-danger {
background-color: #FF4B2B !important; background-color: var(--brand-danger) !important;
border-color: #FF4B2B !important; border-color: var(--brand-danger) !important;
color: #ffffff !important; color: #ffffff !important;
} }
/* ... rest of existing styles ... */
/* Feature Icons */
.feature-list .bi {
background: rgba(255, 255, 255, 0.1);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
font-size: 1.5rem !important;
transition: all 0.3s ease;
}
.feature-list .d-flex:hover .bi {
background: var(--brand-secondary);
color: #ffffff !important;
transform: scale(1.1);
}
.feature-list h5 {
color: #ffffff !important;
font-size: 1.1rem;
}
.btn-outline-secondary { .btn-outline-secondary {
border: 2px solid #EEEEEE; border: 2px solid #EEEEEE;
color: #666666; color: var(--text-muted);
} }
.btn-outline-secondary:hover { .btn-outline-secondary:hover {
background-color: #F8F8F8; background-color: #F8F8F8;
color: #2D2D2D; color: var(--text-main);
border-color: #DDDDDD; border-color: #DDDDDD;
} }
.btn-secondary { .btn-secondary {
background-color: #EEEEEE; background-color: #F0F0F0;
border: none; border: none;
color: #666666; color: var(--text-muted);
} }
.btn-secondary:hover { .btn-secondary:hover {
background-color: #DDDDDD; background-color: #E0E0E0;
color: #2D2D2D; color: var(--text-main);
} }
/* Shopping List & Recipe Cards */ /* Shopping List & Recipe Cards */
.recipe-card { .recipe-card {
background-color: #ffffff; background-color: #ffffff;
border-radius: 20px; border-radius: 24px;
padding: 20px; padding: 20px;
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid #F0F0F0; border: 1px solid #F0F0F0;
@ -148,7 +199,7 @@ button,
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #CCCCCC; background: var(--brand-secondary);
} }
/* Footer */ /* Footer */
@ -161,9 +212,9 @@ footer {
/* Shopping List Checkbox */ /* Shopping List Checkbox */
.list-group-item { .list-group-item {
background-color: transparent !important; background-color: transparent !important;
border-bottom: 1px solid #F0F0F0 !important; border-bottom: 1px solid #F8F8F8 !important;
padding: 15px 0 !important; padding: 15px 0 !important;
color: #2D2D2D !important; color: var(--text-main) !important;
} }
.list-group-item.checked .form-check-label { .list-group-item.checked .form-check-label {
@ -179,8 +230,8 @@ footer {
} }
.form-check-input:checked { .form-check-input:checked {
background-color: #FF7F50; background-color: var(--brand-primary);
border-color: #FF7F50; border-color: var(--brand-primary);
} }
/* Unit buttons */ /* Unit buttons */
@ -190,16 +241,16 @@ footer {
} }
.unit-selector .btn-secondary { .unit-selector .btn-secondary {
background-color: #FF7F50 !important; background-color: var(--brand-primary) !important;
color: white !important; color: white !important;
} }
/* Badges */ /* Badges */
.bg-custom-green { .bg-custom-green {
background-color: #FFF0EB !important; background-color: #E9F5EF !important;
color: #FF7F50 !important; color: var(--brand-primary) !important;
font-weight: 700; font-weight: 700;
border: 1px solid #FFE4DB; border: 1px solid #D1EADE;
} }
/* Quantity Modifiers */ /* Quantity Modifiers */
@ -212,38 +263,38 @@ footer {
justify-content: center; justify-content: center;
background-color: #F8F8F8; background-color: #F8F8F8;
border: 1px solid #EEEEEE; border: 1px solid #EEEEEE;
color: #666666; color: var(--text-muted);
padding: 0 !important; padding: 0 !important;
} }
.btn-quantity-modifier:hover { .btn-quantity-modifier:hover {
background-color: #FF7F50; background-color: var(--brand-primary);
color: white; color: white;
border-color: #FF7F50; border-color: var(--brand-primary);
} }
/* Modal Styles */ /* Modal Styles */
.modal-content { .modal-content {
background-color: #ffffff; background-color: #ffffff;
border: none; border: none;
border-radius: 24px; border-radius: 32px;
overflow: hidden; overflow: hidden;
} }
.modal-header { .modal-header {
border-bottom: 1px solid #F0F0F0; border-bottom: 1px solid #F8F8F8;
padding: 24px; padding: 24px;
} }
.modal-footer { .modal-footer {
border-top: 1px solid #F0F0F0; border-top: 1px solid #F8F8F8;
padding: 20px 24px; padding: 20px 24px;
} }
/* Category Label */ /* Category Label */
.recipe-category-label { .recipe-category-label {
background-color: #FFF0EB; background-color: #E9F5EF;
color: #FF7F50; color: var(--brand-primary);
padding: 4px 12px; padding: 4px 12px;
border-radius: 8px; border-radius: 8px;
font-size: 0.75rem; font-size: 0.75rem;
@ -254,16 +305,16 @@ footer {
/* Category Filters */ /* Category Filters */
#category-filters .btn { #category-filters .btn {
border: 2px solid #EEEEEE; border: 2px solid #F0F0F0;
background-color: #ffffff; background-color: #ffffff;
color: #666666; color: var(--text-muted);
font-size: 0.85rem; font-size: 0.85rem;
padding: 8px 16px !important; padding: 8px 16px !important;
} }
#category-filters .btn.active { #category-filters .btn.active {
background-color: #FF7F50 !important; background-color: var(--brand-primary) !important;
border-color: #FF7F50 !important; border-color: var(--brand-primary) !important;
color: #ffffff !important; color: #ffffff !important;
} }
@ -271,7 +322,7 @@ footer {
#recipe-search { #recipe-search {
padding-left: 3rem; padding-left: 3rem;
height: 54px; height: 54px;
border-color: #EEEEEE; border-color: #F0F0F0;
} }
.search-container .bi-search { .search-container .bi-search {
@ -282,21 +333,21 @@ footer {
/* Recipe Card Image */ /* Recipe Card Image */
.card .card-img-top { .card .card-img-top {
height: 180px; height: 200px;
object-fit: cover; object-fit: cover;
border-top-left-radius: 20px; border-top-left-radius: 24px;
border-top-right-radius: 20px; border-top-right-radius: 24px;
} }
/* View Recipe Modal */ /* View Recipe Modal */
#view-recipe-ingredients { #view-recipe-ingredients {
background-color: #F9F9F9; background-color: #FBFBFB;
border-radius: 16px; border-radius: 20px;
padding: 20px; padding: 20px;
} }
#view-recipe-ingredients .list-group-item { #view-recipe-ingredients .list-group-item {
border-bottom: 1px solid #EEEEEE !important; border-bottom: 1px solid #F0F0F0 !important;
padding: 10px 0 !important; padding: 10px 0 !important;
} }
@ -323,33 +374,33 @@ footer {
} }
.auth-image-overlay { .auth-image-overlay {
background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%); background: radial-gradient(circle at center, rgba(45, 106, 79, 0.1) 0%, rgba(27, 67, 50, 0.7) 100%);
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.auth-branding-content { .auth-branding-content {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 30px; border-radius: 40px;
padding: 60px 40px; padding: 60px 40px;
max-width: 600px; max-width: 600px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
} }
.auth-branding-content p.lead { .auth-branding-content p.lead {
color: rgba(255, 255, 255, 0.9) !important; color: rgba(255, 255, 255, 0.95) !important;
} }
.auth-form-container { .auth-form-container {
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05); box-shadow: -20px 0 40px rgba(45, 106, 79, 0.05);
background-color: #ffffff; background-color: #ffffff;
} }
.auth-form-container h2 { .auth-form-container h2 {
color: #2D2D2D; color: var(--text-main);
font-weight: 700; font-weight: 700;
letter-spacing: -1px; letter-spacing: -1px;
} }
@ -364,7 +415,7 @@ footer {
.auth-screen .form-control-lg:focus { .auth-screen .form-control-lg:focus {
background-color: #ffffff; background-color: #ffffff;
border-color: #FF7F50; border-color: var(--brand-primary);
} }
#auth-nav.guest-nav { #auth-nav.guest-nav {

24
index.php
View File

@ -27,15 +27,15 @@
<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(); ?>_v5"> <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v7">
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm sticky-top mb-4"> <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top mb-4">
<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-flow me-2" style="color: var(--accent-color);"></i> <i class="bi bi-flow me-2" style="color: var(--brand-primary);"></i>
<span class="fw-bold">FoodieFlow</span> <span class="fw-bold">FoodieFlow</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">
@ -60,35 +60,35 @@
<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"> <div class="auth-branding-content">
<div class="text-center mb-4"> <div class="text-center mb-4">
<i class="bi bi-flow display-1 mb-2" style="color: #FF7F50; filter: drop-shadow(0 0 10px rgba(255, 127, 80, 0.3));"></i> <i class="bi bi-flow display-1 mb-2" style="color: var(--brand-secondary); filter: drop-shadow(0 0 15px rgba(212, 163, 115, 0.4));"></i>
<h1 class="display-3 fw-bold">FoodieFlow</h1> <h1 class="display-3 fw-bold">FoodieFlow</h1>
<p class="lead mt-2">An AI-powered flow from recipe to grocery — every day, every occasion</p> <p class="lead mt-2">An AI-powered flow from recipe to grocery — every day, every occasion</p>
</div> </div>
<div class="feature-list mt-4 text-start"> <div class="feature-list mt-4 text-start">
<div class="d-flex mb-3"> <div class="d-flex mb-3 align-items-center">
<i class="bi bi-stars fs-3 me-3 text-warning"></i> <i class="bi bi-stars me-3 text-warning"></i>
<div> <div>
<h5 class="mb-1">AI Recipes from Photos</h5> <h5 class="mb-1">AI Recipes from Photos</h5>
<p class="small mb-0">Upload a photo of any dish, and our AI will instantly create its recipe.</p> <p class="small mb-0">Upload a photo of any dish, and our AI will instantly create its recipe.</p>
</div> </div>
</div> </div>
<div class="d-flex mb-3"> <div class="d-flex mb-3 align-items-center">
<i class="bi bi-cart-check fs-3 me-3 text-info"></i> <i class="bi bi-cart-check me-3 text-info"></i>
<div> <div>
<h5 class="mb-1">Smart Shopping</h5> <h5 class="mb-1">Smart Shopping</h5>
<p class="small mb-0">Automatic grocery lists. We'll find where it's cheaper and build your basket.</p> <p class="small mb-0">Automatic grocery lists. We'll find where it's cheaper and build your basket.</p>
</div> </div>
</div> </div>
<div class="d-flex mb-3"> <div class="d-flex mb-3 align-items-center">
<i class="bi bi-people fs-3 me-3 text-success"></i> <i class="bi bi-people me-3 text-success"></i>
<div> <div>
<h5 class="mb-1">For Holidays & Weekdays</h5> <h5 class="mb-1">For Holidays & Weekdays</h5>
<p class="small mb-0">Plan parties together: share your grocery list with friends and family.</p> <p class="small mb-0">Plan parties together: share your grocery list with friends and family.</p>
</div> </div>
</div> </div>
<div class="d-flex mb-3"> <div class="d-flex mb-3 align-items-center">
<i class="bi bi-receipt fs-3 me-3 text-danger"></i> <i class="bi bi-receipt me-3 text-danger"></i>
<div> <div>
<h5 class="mb-1">Expense Control</h5> <h5 class="mb-1">Expense Control</h5>
<p class="small mb-0">Snap a photo of your receipt, and the app will help split the cost among all participants.</p> <p class="small mb-0">Snap a photo of your receipt, and the app will help split the cost among all participants.</p>