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

24
index.php
View File

@ -27,15 +27,15 @@
<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 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>
<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">
<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>
</a>
<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-branding-content">
<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>
<p class="lead mt-2">An AI-powered flow from recipe to grocery — every day, every occasion</p>
</div>
<div class="feature-list mt-4 text-start">
<div class="d-flex mb-3">
<i class="bi bi-stars fs-3 me-3 text-warning"></i>
<div class="d-flex mb-3 align-items-center">
<i class="bi bi-stars me-3 text-warning"></i>
<div>
<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>
</div>
</div>
<div class="d-flex mb-3">
<i class="bi bi-cart-check fs-3 me-3 text-info"></i>
<div class="d-flex mb-3 align-items-center">
<i class="bi bi-cart-check me-3 text-info"></i>
<div>
<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>
</div>
</div>
<div class="d-flex mb-3">
<i class="bi bi-people fs-3 me-3 text-success"></i>
<div class="d-flex mb-3 align-items-center">
<i class="bi bi-people me-3 text-success"></i>
<div>
<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>
</div>
</div>
<div class="d-flex mb-3">
<i class="bi bi-receipt fs-3 me-3 text-danger"></i>
<div class="d-flex mb-3 align-items-center">
<i class="bi bi-receipt me-3 text-danger"></i>
<div>
<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>