<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes | Lakanto Malaysia Best Sweetener</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="style1.css">
<style>
/* Styles specific ONLY to recipes.html can remain here */
/* All general page header, filter, grid, card, modal styles moved to style1.css */
</style>
</head>
<body>
<div class="w-100 text-center small py-1 bg-danger d-none d-lg-block">
<span> LOOKS LIKE SUGAR, TASTES LIKE SUGAR.</span>
</div>
<header class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo-lakanto.png" alt="Lakanto Logo" height="65">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="index.html">HOME</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">ABOUT LAKANTO</a></li>
<li class="nav-item"><a class="nav-link" href="products.html">PRODUCTS</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="recipes.html">RECIPES</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">CONTACT</a></li>
</ul>
<form class="d-flex">
<a href="shop.html" class="btn btn-danger" role="button">BUY NOW</a>
</form>
</div>
</div>
</nav>
</header>
<main>
<section class="page-header">
<div class="container">
<h1>Healthy Sugar-Free Desserts with Monk Fruit</h1>
<div class="filter-buttons mt-3">
<button class="btn active" data-filter="Sugar Free">Sugar Free</button>
<button class="btn" data-filter="Gluten Free">Gluten Free</button>
<button class="btn" data-filter="Vegan">Vegan</button>
<button class="btn" data-filter="Allulose">Allulose</button>
</div>
</div>
</section>
<section class="recipe-grid">
<div class="container">
<h2 class="section-title">Recipes</h2>
<div class="row g-4" id="recipe-grid-container">
</div>
</div>
</section>
</main>
<footer class="bg-danger text-white py-4">
<div class="container d-flex justify-content-between align-items-center">
<a href="index.html">
<img src="img/logo-lakanto-footer.png" alt="Lakanto Logo" style="height: 40px;">
</a>
<p class="mb-0">© 2025 Lakanto. All Rights Reserved.</p>
</div>
</footer>
<div class="modal fade" id="recipeModal" tabindex="-1" aria-labelledby="recipeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="loadingIndicator" class="d-flex justify-content-center align-items-center">
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div id="recipeContent" class="d-none">
<h2 id="modalRecipeTitle"></h2>
<img src="" id="modalRecipeImage" alt="Recipe Image">
<div class="row">
<div class="col-md-5" id="modalRecipeIngredients">
</div>
<div class="col-md-7" id="modalRecipeMethod">
<h5 class="recipe-section-title">Method</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// --- Recipe Data ---
const recipes = [
{ id: 1, title: 'Kuih Sago With Lakanto Sweetener', image: 'img/recipes/recipe-1.jpg', tags: ['Low-Carb', 'Sugar Free'], description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam neque.', ingredients: { 'INGREDIENTS': ['500ml water', '120g pearl sago', '100g LAKANTO Sweetener', '1/4 tsp rose essence', '1/4 tsp red colouring', '1 tbsp water'], 'FOR THE COATING': ['1 cup grated coconut', '1/4 tsp fine salt', 'Mix the above ingredients and steam for 5 minutes.'] }, method: ['Boil 500ml of water and add in pearl sago into the pot and cook at low heat. Stir sago for 10 minutes until it turns transparent. Turn off the fire. Cover the pot and let the sago set aside for another 10 minutes.', 'Mix Rose Essence, colouring and water in a small bowl and set aside.', 'Add in LAKANTO sweetener and rose essence to the sago and bring to boil again at low heat.', 'Rinse a 20cm square pan with water to prevent the sago to stick to the pan. Pour cooked sago to the pan. Keep aside to cool. Cut into desired shapes and roll it to grated coconut before serving.'] },
{ id: 2, title: 'Kuih Ketayap With LAKANTO Sweetener', image: 'img/recipes/recipe-2.jpg', tags: ['Sweets', 'Sugar Free'], description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam neque.', ingredients: { 'FOR COCONUT FILLINGS': ['300g Grated Coconut (white part only)', '100g LAKANTO Sweetener', '50ml water', '5 pieces knotted Pandan Leaves', '½ teaspoon fine salt'], 'FOR CREPE BATTER': ['300G All purpose flour', '1 Tbsp Tapioca Flour', '600ml Pandan Juice', '2 Eggs, lightly beaten', '¼ tsp fine salt'] }, method: ['Mix water with LAKANTO Sweetener , pandan leaves and salt in a saucepan, bring to boil until LAKANTO Sweetener melted.', 'Discard pandan leaves, add in grated coconut. Stir until slightly dry and well combined. Set aside to cool.', 'Mix all purpose flour and tapioca flour in a mixing bowl. Add pandan juice and mix well.', 'Add in beaten egg into flour mixture and whisk until well combine.', 'Sift in batter and set aside for 20 minutes.', 'Heat non stick pan with low heat and scoop in some batter to make a thin layer pancake. Cook for 3 minutes and remove it from pan.', 'Place the pancake onto a plate and add a spoonful of coconut filling to the centre of pancake and roll it up like a spring roll.'] },
{ id: 3, title: 'Soya Bean With LAKANTO Sweetener', image: 'img/recipes/recipe-3.jpg', tags: ['Gluten Free', 'Sugar Free', 'Vegan', 'Drink'], description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam neque.', ingredients: { 'INGREDIENTS': ['150g soya beans', '1.2L water', '70g LAKANTO Sweetener (sweetness depending on individual preference)', '5 pandan leaves (wash and tie into a knot)'] }, method: ['Soak soya beans in 2-3 cups of water overnight.', 'Discard water and rinse soya beans.', 'Add soya beans and 1.2L water to blender.', 'Blend until smooth.', 'Using a muslin cloth, place the blended soya beans into it and squeeze as much of the liquid as you can.', 'Add soya bean liquid into a deep pot with pandan leaves and allow it to cook over a low heat.', 'Add in LAKANTO Sweetener and stir gently.', 'Serve hot or cold.'] },
{ id: 4, title: 'Calamansi Juice With LAKANTO Sweetener', image: 'img/recipes/recipe-4.jpg', tags: ['Drink', 'Sugar Free', 'Vegan'], description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam neque.', ingredients: { 'INGREDIENTS': ['5 calamansi, wash and cut into halves', '1 cup water', '1/4 cup ice', 'Sugar syrup (melt 3 tablespoons of Lakanto Sweetener with 20ml water)'] }, method: ['Squeeze the juice into a glass. Add melted sugar syrup, water, ice and stir well. Serve cold.'] },
{ id: 5, title: 'Soft and Fluffy Pancake', image: 'img/recipes/recipe-5.jpg', tags: ['Sweets', 'Sugar Free'], description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam neque.', ingredients: { 'INGREDIENTS': ['Lorem ipsum dolor sit amet.', 'Consectetur adipiscing elit.'] }, method: ['Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'] },
{ id: 6, title: 'Lakanto Sweetened Cranberry Sauce', image: 'img/recipes/recipe-6.jpg', tags: ['Gluten Free', 'Sugar Free', 'Vegan'], description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam neque.', ingredients: { 'INGREDIENTS': ['Lorem ipsum dolor sit amet.', 'Consectetur adipiscing elit.'] }, method: ['Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.', 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'] },
{ id: 7, title: 'Sugar Free Teriyaki Chicken', image: 'img/recipes/recipe-7.jpg', tags: ['Keto', 'Sugar Free', 'Gluten Free'], description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam neque.', ingredients: { 'INGREDIENTS': ['Lorem ipsum dolor sit amet.', 'Consectetur adipiscing elit.'] }, method: ['Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'] },
{ id: 8, title: 'Banana Cake', image: 'img/recipes/recipe-8.jpg', tags: ['Low-Carb', 'Sugar Free'], description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam neque.', ingredients: { 'INGREDIENTS': ['Lorem ipsum dolor sit amet.', 'Consectetur adipiscing elit.'] }, method: ['Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'] }
];
const recipeGrid = document.getElementById('recipe-grid-container');
const recipeModal = new bootstrap.Modal(document.getElementById('recipeModal'));
const loadingIndicator = document.getElementById('loadingIndicator');
const recipeContent = document.getElementById('recipeContent');
const filterButtonsContainer = document.querySelector('.filter-buttons');
// --- Reusable function to render recipes ---
function renderRecipes(recipeList) {
recipeGrid.innerHTML = ''; // Clear existing recipes
recipeList.forEach(recipe => {
const col = document.createElement('div');
col.className = 'col-lg-4 col-md-6';
// Use the first tag for display, but filter logic will use the whole array
const displayTag = recipe.tags.length > 0 ? recipe.tags[0] : 'Recipe';
col.innerHTML = `
<a href="#" class="recipe-card d-block" data-recipe-id="${recipe.id}">
<div class="card-img-container">
<img src="${recipe.image}" alt="${recipe.title}">
<div class="recipe-tag">${displayTag}</div>
</div>
<div class="card-body">
<h5 class="card-title">${recipe.title}</h5>
<p class="card-text">${recipe.description}</p>
</div>
</a>
`;
recipeGrid.appendChild(col);
});
}
// --- Handle Filter Button Clicks ---
filterButtonsContainer.addEventListener('click', function(e) {
if (e.target.tagName === 'BUTTON') {
// Update active button
filterButtonsContainer.querySelector('.active').classList.remove('active');
e.target.classList.add('active');
const filter = e.target.dataset.filter;
let filteredRecipes;
if (filter === 'Sugar Free') {
// 'Sugar Free' is the default and includes all items
filteredRecipes = recipes;
} else {
filteredRecipes = recipes.filter(recipe => recipe.tags.includes(filter));
}
renderRecipes(filteredRecipes);
}
});
function populateAndShowModal(recipeData) {
loadingIndicator.classList.remove('d-none');
loadingIndicator.classList.add('d-flex');
recipeContent.classList.add('d-none');
recipeModal.show();
setTimeout(() => {
document.getElementById('modalRecipeTitle').textContent = recipeData.title;
document.getElementById('modalRecipeImage').src = recipeData.image;
const ingredientsContainer = document.getElementById('modalRecipeIngredients');
ingredientsContainer.innerHTML = '';
for (const section in recipeData.ingredients) {
const title = document.createElement('h5');
title.className = 'recipe-section-title';
title.textContent = section;
ingredientsContainer.appendChild(title);
const ul = document.createElement('ul');
recipeData.ingredients[section].forEach(item => {
const li = document.createElement('li');
li.textContent = item;
ul.appendChild(li);
});
ingredientsContainer.appendChild(ul);
}
const methodContainer = document.getElementById('modalRecipeMethod');
const ol = document.createElement('ol');
recipeData.method.forEach(step => {
const li = document.createElement('li');
li.textContent = step;
ol.appendChild(li);
});
const existingOl = methodContainer.querySelector('ol');
if(existingOl) existingOl.remove();
methodContainer.appendChild(ol);
loadingIndicator.classList.add('d-none');
loadingIndicator.classList.remove('d-flex');
recipeContent.classList.remove('d-none');
}, 500);
}
// --- Handle Modal Trigger from Grid Click ---
recipeGrid.addEventListener('click', function(e) {
e.preventDefault();
const card = e.target.closest('.recipe-card');
if (card) {
const recipeId = parseInt(card.dataset.recipeId);
const recipeData = recipes.find(r => r.id === recipeId);
if (recipeData) {
populateAndShowModal(recipeData);
}
}
});
// --- Check for URL parameter on page load ---
const urlParams = new URLSearchParams(window.location.search);
const recipeIdFromUrl = urlParams.get('recipe');
if (recipeIdFromUrl) {
const recipeData = recipes.find(r => r.id === parseInt(recipeIdFromUrl));
if (recipeData) {
populateAndShowModal(recipeData);
}
}
// --- Initial Render of all recipes ---
renderRecipes(recipes);
});
</script>
</body>
</html>
All system for education purposes only. For more tools: Telegram @jackleet