-
-
-
\ No newline at end of file
+field_title,
+ 'This is a single recipe page where you can view the details of the recipe, including ingredients, instructions, and more.',
+ 'recipe',
+ [
+
+ ['keywords', 'terms, use, conditions']
+ ]
+);
+?>
+
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 3af2a67..8188af4 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -662,7 +662,6 @@ hr {
label span {
color: #015847;
- /* Example: make the asterisk red */
font-weight: bold;
}
@@ -676,7 +675,7 @@ label span {
.btn-secondary {
background-color: var(--button-secondary);
- height: 35px;
+ cursor: pointer;
max-width: 225px;
color: var(--common-text);
}
@@ -787,10 +786,10 @@ label span {
.filters__search .search-input {
margin-right: 0;
width: 200px;
-
+
}
-.filters-checkboxes ul{
+.filters-checkboxes ul {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
@@ -798,24 +797,232 @@ label span {
column-gap: 8px;
padding: 0;
max-height: 100px;
- overflow-y: auto;
+ overflow-y: auto;
margin-top: 10px;
margin-bottom: 15px;
-
}
-.filters-checkboxes ul li{
+.filters-checkboxes ul li {
font-family: var(--common-font);
font-size: 14px;
padding: 5px;
}
-.filters-form .btn{
+.filters-form .btn {
width: 200px;
}
-@media (max-width: 768px){
-
- .catalog-items{
+
+.single-recipe {
+ margin-top: 46px;
+}
+
+.single-recipe-title .title {
+ text-align: start;
+}
+
+.single-recipe-info {
+ display: flex;
+}
+
+.single-recipe-info__image {
+ width: 350px;
+ height: 260px;
+ overflow: hidden;
+ border-radius: 10px;
+ margin-right: 25px;
+}
+
+.single-recipe-info__image img {
+ width: 100%;
+ height: 100%;
+
+ object-fit: cover;
+}
+
+.single-recipe-data {
+ margin-bottom: 20px;
+}
+
+.single-recipe-data__item {
+ display: flex;
+ align-items: baseline;
+ margin-bottom: 6px;
+}
+
+.single-recipe-data__item .data-name {
+ color: var(--meta-color);
+ margin-right: 10px;
+ flex: 0 0 120px;
+ text-align: left;
+}
+
+.single-recipe-data__item .data {
+ max-width: 500px;
+}
+
+
+
+.day-select {
+ position: relative;
+ width: 230px;
+ border: 1px solid #00775F;
+ padding: 0;
+}
+
+.day-select-wrapper {
+ position: relative;
+ display: inline-block;
+}
+
+.btn-ctrl {
+ display: flex;
+ align-items: center;
+
+}
+
+.select-icon {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ background-color: #008C71;
+ color: #fff;
+ padding: 10px;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+
+.btn-small {
+ width: 35px;
+ text-align: center;
+ padding: 0;
+ border: 2px solid var(--input-border);
+}
+
+.button-ctrl {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ text-align: center;
+}
+
+
+
+.custom-select-dropdown {
+ position: absolute;
+ top: 110%;
+ left: 0;
+ z-index: 10;
+ background: white;
+ border: 1px solid var(--input-border);
+ border-radius: 10px;
+ width: 100%;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.dropdown-item {
+ font-size: 16px;
+ padding: 8px 12px;
+ cursor: pointer;
+ border-radius: 10px;
+}
+
+
+
+.custom-select-dropdown .dropdown-item:last-child {
+ border-top: 1px solid var(--input-border);
+}
+
+.dropdown-selected {
+ background-color: #00775F;
+ color: #fff;
+
+}
+
+.qr-popup {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: #fff;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+ z-index: 9999;
+}
+
+#qrcode img {
+ margin-bottom: 15px;
+}
+
+.hidden {
+ display: none !important;
+}
+
+#overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 9998;
+}
+
+.btn-small,
+.btn-small i {
+ line-height: 30px;
+}
+
+.single-recipe-content h2 {
+ text-align: start;
+}
+
+.single-recipe-content {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-top: 30px;
+ gap: 40px;
+ /* flex-wrap: wrap; */
+}
+
+.single-instructions{
+ width: 50%;
+ font-size: 16px;
+}
+
+.single-ingredients{
+ width: 50%;
+}
+
+.ingredients-table{
+ width: 400px;
+ border-radius: 10px;
+ overflow: hidden;
+ border: 1px solid #b3b3b3;
+ border-collapse: separate;
+}
+
+.ingredients-table th{
+ background-color: #008B70;
+ color: #fff;
+ padding: 10px 20px;
+ text-align: start;
+}
+
+.ingredients-table td{
+ padding: 10px 20px;
+ border-top: 2px solid #b3b3b3;
+}
+@media (max-width: 768px) {
+
+ .catalog-items {
width: 100%;
grid-template-columns: repeat(2, 1fr);
margin-right: 0;
@@ -824,7 +1031,104 @@ label span {
flex-direction: column;
}
+
+ .single-recipe-content {
+ flex-wrap: wrap;
+ flex-direction: column;
+ gap: 20px;
+ padding: 10px;
+ }
+
+ .single-instructions,
+ .single-ingredients {
+ width: 100%;
+ }
+
+ .ingredients-table {
+ width: 100%;
+ }
+
+
+
+
+
+
+ .single-recipe-info {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
+ .single-recipe-info__image {
+ width: 100%;
+ max-width: 350px;
+ height: auto;
+ margin-right: 0;
+ margin-bottom: 20px;
+ }
+
+ .single-recipe-info__image img {
+ width: 100%;
+ height: auto;
+ }
+
+ .single-recipe-info__details {
+ width: 100%;
+ padding: 0 15px;
+ }
+
+ .single-recipe-title .title {
+ text-align: center;
+ font-size: 24px;
+ }
+
+ .single-recipe-data__item {
+ flex-direction: column;
+ align-items: flex-start;
+ margin-bottom: 10px;
+ }
+
+ .single-recipe-data__item .data-name {
+ margin-right: 0;
+ margin-bottom: 2px;
+ flex: none;
+ text-align: left;
+ }
+
+ .button-ctrl {
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ }
+
+ .small-btns{
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ }
+
+ .day-select-wrapper,
+ .btn-small,
+ .btn-small i {
+ width: auto;
+ }
+
+ .btn-small{
+ width: 35px;
+ }
+
+ .custom-select-dropdown {
+ width: 100%;
+ left: 0;
+ max-width: 230px;
+ }
+
+ .qr-popup {
+ width: 90%;
+ }
+
}
+
@media (max-width: 900px) {
@@ -904,42 +1208,47 @@ label span {
max-width: 100%;
}
}
+
@media (max-width: 1200px) {
- .catalog{
+ .catalog {
flex-direction: column-reverse;
align-items: center;
margin-bottom: 46px;
}
- .filters{
+
+ .filters {
position: static;
margin-bottom: 46px;
}
- .catalog-items{
+
+ .catalog-items {
margin-right: 0;
justify-items: center;
align-items: center;
padding: 5px;
}
- .catalog-recipe{
+
+ .catalog-recipe {
display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 200px;
- }
-}
-@media (max-width: 465px){
- .catalog-recipe{
- width: 150px;
-
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 200px;
}
#food-3d {
display: none;
}
}
-@media (max-width: 400px){
- .catalog-items{
+@media (max-width: 465px) {
+ .catalog-recipe {
+ width: 150px;
+
+ }
+}
+
+@media (max-width: 400px) {
+ .catalog-items {
width: 100%;
grid-template-columns: 1fr;
margin-right: 0;
diff --git a/assets/js/single.js b/assets/js/single.js
new file mode 100644
index 0000000..9b1c9fd
--- /dev/null
+++ b/assets/js/single.js
@@ -0,0 +1,71 @@
+const toggleBtn = document.getElementById('day-select');
+const dropdown = document.getElementById('custom-select-dropdown');
+
+toggleBtn.addEventListener('click', () => {
+ dropdown.classList.toggle('hidden');
+});
+
+document.addEventListener('click', (e) => {
+ if (!dropdown.contains(e.target) && !toggleBtn.contains(e.target)) {
+ dropdown.classList.add('hidden');
+ }
+});
+
+
+
+const options = document.querySelectorAll('.dropdown-item');
+
+options.forEach(option => {
+ option.addEventListener('click', () => {
+ const selectedValue = option.getAttribute('data-value');
+
+ options.forEach(opt => opt.classList.remove('dropdown-selected'));
+
+ if (selectedValue === 'remove') {
+ toggleBtn.textContent = 'Add to list';
+ } else {
+ toggleBtn.textContent = option.textContent;
+ option.classList.add('dropdown-selected');
+ }
+
+ dropdown.classList.add('hidden');
+
+ alert(`You selected: ${selectedValue}`);
+ });
+});
+
+const qrContainer = document.getElementById("qrcode");
+const downloadLink = document.getElementById("downloadLink");
+const qrBtn = document.getElementById("qr-btn");
+const qrPopup = document.querySelector(".qr-popup");
+const overlay = document.getElementById('overlay');
+
+qrBtn.addEventListener("click", () => {
+
+ qrPopup.classList.toggle("hidden")
+ overlay.classList.toggle("hidden")
+
+ qrContainer.innerHTML = "";
+
+
+ new QRCode(qrContainer, {
+ text: window.location.href,
+ width: 200,
+ height: 200
+ });
+
+
+ setTimeout(() => {
+ const qrImg = qrContainer.querySelector("img");
+ if (qrImg) {
+ downloadLink.href = qrImg.src;
+ }
+ }, 500);
+});
+
+document.addEventListener('click', (e) =>{
+ if(!qrPopup.contains(e.target) && !qrBtn.contains(e.target)){
+ qrPopup.classList.add("hidden");
+ overlay.classList.add("hidden");
+ }
+});
\ No newline at end of file
diff --git a/components/templates/layout/footer.php b/components/templates/layout/footer.php
index 1004d29..a413760 100644
--- a/components/templates/layout/footer.php
+++ b/components/templates/layout/footer.php
@@ -20,7 +20,7 @@
-
+
diff --git a/media/chana-masala-recipe_684f4743a2a80.jpg b/media/chana-masala-recipe_684f4743a2a80.jpg
new file mode 100644
index 0000000..63d9ff9
Binary files /dev/null and b/media/chana-masala-recipe_684f4743a2a80.jpg differ
+
+
+
+
+ ![<?php echo $context['recipe']->field_title; ?>](<?= $context['recipe']->get_image_url(); ?>)
+
+
+
+
+
+ field_title; ?>
+
+
+
+
+ Category:
+ category_name ?>
+
+
+ Author:
+ field_username ?>
+
+
+ Estimated Price:
+ get_price(); ?>
+
+
+ Time To Make:
+ field_estimated_time; ?> minutes
+
+
+ Ingredients:
+
+
+
+ Date Created:
+ field_created_at; ?>
+
+
+
+
+
+ Instructions
+ + field_instruction); + + echo nl2br(trim($formatted)); + ?> +
+
+
+
+
+ Ingredients
+| Name | +Count | +
|---|---|
| + | get_count(); ?> | +