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

perfect modal

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-01 19:30:00 +00:00
parent 87c4c5dcc3
commit 7df438b032
2 changed files with 57 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
assets/css/custom.css
View File

@ -628,29 +628,40 @@ body:has(#guest-view:not(.d-none)) footer {
.add-option-btn {
border: 2px solid #F0F0F0 !important;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
background-color: #ffffff !important;
color: var(--text-main) !important;
}
.add-option-btn:hover {
border-color: var(--brand-primary) !important;
background-color: #F7FAF9 !important;
transform: scale(1.02);
background-color: #ffffff !important;
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(45, 106, 79, 0.1) !important;
}
.add-option-btn i {
color: var(--brand-primary);
background: #E9F5EF;
width: 60px;
height: 60px;
background: #F7FAF9;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
transition: all 0.3s ease;
border-radius: 50%;
margin-bottom: 1.5rem !important;
transition: all 0.4s ease;
border: 1px solid #E9F5EF;
}
.add-option-btn:hover i {
background: var(--brand-primary);
color: #ffffff;
transform: rotate(10deg) scale(1.1);
}
.add-option-btn .fw-bold {
color: var(--text-main);
font-size: 1rem;
}
#take-photo-btn, #take-products-photo-btn {

47
index.php
View File

@ -27,7 +27,7 @@
<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(); ?>_v20">
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v21">
</head>
<body>
@ -220,33 +220,40 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<div class="d-grid gap-3">
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="photo">
<i class="bi bi-camera fs-3 me-3"></i>
<div class="row g-3 row-cols-2">
<div class="col">
<button class="btn btn-outline-primary h-100 w-100 p-4 text-center d-flex flex-column align-items-center rounded-4 add-option-btn" data-method="photo">
<i class="bi bi-camera fs-1 mb-3"></i>
<div>
<div class="fw-bold">Create from a photo</div>
<div class="small text-muted">AI turns a photo into a step-by-step recipe</div>
<div class="fw-bold lh-sm mb-1">Create from a photo</div>
<div class="small text-muted" style="font-size: 0.75rem;">AI turns a photo into a recipe</div>
</div>
</button>
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="link">
<i class="bi bi-link-45deg fs-3 me-3"></i>
</div>
<div class="col">
<button class="btn btn-outline-primary h-100 w-100 p-4 text-center d-flex flex-column align-items-center rounded-4 add-option-btn" data-method="link">
<i class="bi bi-link-45deg fs-1 mb-3"></i>
<div>
<div class="fw-bold">Save from a link</div>
<div class="small text-muted">Add a recipe from any website or social media post</div>
<div class="fw-bold lh-sm mb-1">Save from a link</div>
<div class="small text-muted" style="font-size: 0.75rem;">From any website or social post</div>
</div>
</button>
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="ingredients">
<i class="bi bi-basket fs-3 me-3"></i>
</div>
<div class="col">
<button class="btn btn-outline-primary h-100 w-100 p-4 text-center d-flex flex-column align-items-center rounded-4 add-option-btn" data-method="ingredients">
<i class="bi bi-basket fs-1 mb-3"></i>
<div>
<div class="fw-bold">Create from available ingredients</div>
<div class="small text-muted">Generate a recipe from what you have</div>
<div class="fw-bold lh-sm mb-1">From ingredients</div>
<div class="small text-muted" style="font-size: 0.75rem;">Generate from what you have</div>
</div>
</button>
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="scratch">
<i class="bi bi-pencil-square fs-3 me-3"></i>
</div>
<div class="col">
<button class="btn btn-outline-primary h-100 w-100 p-4 text-center d-flex flex-column align-items-center rounded-4 add-option-btn" data-method="scratch">
<i class="bi bi-pencil-square fs-1 mb-3"></i>
<div>
<div class="fw-bold">Create a recipe from scratch</div>
<div class="small text-muted">Enter ingredients and steps manually</div>
<div class="fw-bold lh-sm mb-1">From scratch</div>
<div class="small text-muted" style="font-size: 0.75rem;">Enter steps manually</div>
</div>
</button>
</div>
@ -254,6 +261,7 @@
</div>
</div>
</div>
</div>
<!-- Modal: Create from Photo -->
<div class="modal fade" id="add-recipe-photo-modal" tabindex="-1" aria-hidden="true">
@ -503,8 +511,7 @@
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/main.js?v=<?php echo time(); ?>_v12"></script>
<script src="assets/js/main.js?v=<?php echo time(); ?>_v13"></script>
<!-- Confirmation Modal -->
<div class="modal fade" id="confirmRemoveModal" tabindex="-1" aria-labelledby="confirmRemoveModalLabel" aria-hidden="true">
<div class="modal-dialog">