perfect modal
This commit is contained in:
Flatlogic Bot
parent
87c4c5dcc3
commit
7df438b032
@ -628,29 +628,40 @@ body:has(#guest-view:not(.d-none)) footer {
|
|||||||
.add-option-btn {
|
.add-option-btn {
|
||||||
border: 2px solid #F0F0F0 !important;
|
border: 2px solid #F0F0F0 !important;
|
||||||
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !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 {
|
.add-option-btn:hover {
|
||||||
border-color: var(--brand-primary) !important;
|
border-color: var(--brand-primary) !important;
|
||||||
background-color: #F7FAF9 !important;
|
background-color: #ffffff !important;
|
||||||
transform: scale(1.02);
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 15px 35px rgba(45, 106, 79, 0.1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-option-btn i {
|
.add-option-btn i {
|
||||||
color: var(--brand-primary);
|
color: var(--brand-primary);
|
||||||
background: #E9F5EF;
|
background: #F7FAF9;
|
||||||
width: 60px;
|
width: 80px;
|
||||||
height: 60px;
|
height: 80px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 18px;
|
border-radius: 50%;
|
||||||
transition: all 0.3s ease;
|
margin-bottom: 1.5rem !important;
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
border: 1px solid #E9F5EF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-option-btn:hover i {
|
.add-option-btn:hover i {
|
||||||
background: var(--brand-primary);
|
background: var(--brand-primary);
|
||||||
color: #ffffff;
|
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 {
|
#take-photo-btn, #take-products-photo-btn {
|
||||||
|
|||||||
71
index.php
71
index.php
@ -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(); ?>_v20">
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v21">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -220,35 +220,43 @@
|
|||||||
<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 p-4">
|
<div class="modal-body p-4">
|
||||||
<div class="d-grid gap-3">
|
<div class="row g-3 row-cols-2">
|
||||||
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="photo">
|
<div class="col">
|
||||||
<i class="bi bi-camera fs-3 me-3"></i>
|
<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">
|
||||||
<div>
|
<i class="bi bi-camera fs-1 mb-3"></i>
|
||||||
<div class="fw-bold">Create from a photo</div>
|
<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>
|
<div class="small text-muted" style="font-size: 0.75rem;">AI turns a photo into a recipe</div>
|
||||||
</button>
|
</div>
|
||||||
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="link">
|
</button>
|
||||||
<i class="bi bi-link-45deg fs-3 me-3"></i>
|
</div>
|
||||||
<div>
|
<div class="col">
|
||||||
<div class="fw-bold">Save from a link</div>
|
<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">
|
||||||
<div class="small text-muted">Add a recipe from any website or social media post</div>
|
<i class="bi bi-link-45deg fs-1 mb-3"></i>
|
||||||
</div>
|
<div>
|
||||||
</button>
|
<div class="fw-bold lh-sm mb-1">Save from a link</div>
|
||||||
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="ingredients">
|
<div class="small text-muted" style="font-size: 0.75rem;">From any website or social post</div>
|
||||||
<i class="bi bi-basket fs-3 me-3"></i>
|
</div>
|
||||||
<div>
|
</button>
|
||||||
<div class="fw-bold">Create from available ingredients</div>
|
</div>
|
||||||
<div class="small text-muted">Generate a recipe from what you have</div>
|
<div class="col">
|
||||||
</div>
|
<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">
|
||||||
</button>
|
<i class="bi bi-basket fs-1 mb-3"></i>
|
||||||
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="scratch">
|
<div>
|
||||||
<i class="bi bi-pencil-square fs-3 me-3"></i>
|
<div class="fw-bold lh-sm mb-1">From ingredients</div>
|
||||||
<div>
|
<div class="small text-muted" style="font-size: 0.75rem;">Generate from what you have</div>
|
||||||
<div class="fw-bold">Create a recipe from scratch</div>
|
</div>
|
||||||
<div class="small text-muted">Enter ingredients and steps manually</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
<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 lh-sm mb-1">From scratch</div>
|
||||||
|
<div class="small text-muted" style="font-size: 0.75rem;">Enter steps manually</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -503,8 +511,7 @@
|
|||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
<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 -->
|
<!-- Confirmation Modal -->
|
||||||
<div class="modal fade" id="confirmRemoveModal" tabindex="-1" aria-labelledby="confirmRemoveModalLabel" aria-hidden="true">
|
<div class="modal fade" id="confirmRemoveModal" tabindex="-1" aria-labelledby="confirmRemoveModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user