Мобильная версияКод: Выделить всё
Home
[*]
.thumb {
display: flex;
margin-top: -60px;
justify-content: center;
}
.thumb a:hover {
margin-top: -15px;
transition: 0.2s;
}
.thumb img {
width: 54px;
margin: 20px 20px 0 10px;
max-height: 100%;
}
/* Scrollbar*/
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #006341;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
/* END OF Scrollbar */
.navbar {
background-color: #006341;
transition: background-color 0.3s ease;
}
.navbar.blurred {
background-color: transparent; /* aalisin niya yung background color */
backdrop-filter: blur(20px); /* then eto papalit, blur effect */
}
.nav-link {
color: white;
font-weight: 500;
transition: color 0.3s ease
}
.nav-link.scrolled {
color: #000000;
font-weight: 500;
}
.nav-link.scrolled:hover {
color: #006341;
font-weight: 500;
}
#mugIcon {
color: white;
transition: color 0.3s ease; /* Smooth transition effect for icon color */
}
#mugIcon.scrolled {
color: #000000; /* Change icon color when scrolled */
}
#fruitimage {
max-width: 100%;
max-height: 300px; /* Adjust the height as needed */
}
Код: Выделить всё
[url=#] [i][/url]
[/i]
[list]
[url=#]
Home
[/url]
[*]
[url=#content]
Product
[/url]
[*]
[url=cart.html]
Cart
[/url]
[/list]
[i]
src="./img/banner.jpg"
class="w-100 img-fluid"
style="
height: 50vh;
object-fit: cover;
filter: blur(2px);
filter: saturate(2);
"
/>
Starbucks
[/i] Find Your Perfect Sip at
Starbucks! [i][/i]
[url=#content]
[i][/i] Order Now
[/url]
[img]img/img1.png[/img]
-webkit-filter: drop-shadow(11px 13px 9px #000000); -moz-filter: drop-shadow(11px 13px 9px #000000);" />
[url=home.html#content]
[img]img/thumb1.png[/img]
[/url]
[url=home.html#content]
[img]img/thumb2.png[/img]
[/url]
[url=home.html#content]
[img]img/thumb3.png[/img]
[/url]
[url=home.html#content]
[img]img/thumb4.png[/img]
[/url]
[img]./img/hero.png[/img]
style="width: 200px; height: 45px"
alt=""
class="mt-5 mb-3 img-fluid"
srcset=""
/>
Starbucks is more than just a coffee shop; it's a community hub where
people connect over delicious drinks and meaningful moments. With our
expertly crafted coffees, teas, and snacks, every visit is an
opportunity to treat yourself to quality and comfort. From our iconic
lattes to seasonal favorites, there's something for every palate. Join
us at Starbucks and let's make every sip count.
Our Products
class=" w-100"
id="content"
>
[h4]AI Tech[/h4]
CCSIT 210
BSIT-3A
Worksheet 5.5 Database Driven JQuery Web-based Shop
Submitted to: Sir. Donn Genita
[list]
[*]Dran Leynard Gamoso
[/list]
[img]./img/top.png[/img]
© 2024; J&D
//For navbar
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("navbar").classList.add("blurred");
const navLinks = document.querySelectorAll(".nav-link");
navLinks.forEach(link => link.classList.add("scrolled"));
document.getElementById("mugIcon").classList.add("scrolled"); // Add scrolled class to the icon
} else {
document.getElementById("navbar").classList.remove("blurred");
const navLinks = document.querySelectorAll(".nav-link");
navLinks.forEach(link => link.classList.remove("scrolled"));
document.getElementById("mugIcon").classList.remove("scrolled"); // Remove scrolled class from the icon
}
}
//end of function for navbarrr
// For carousel na nag chachange image
function imgSlider(anything){
document.querySelector('.starbucks').src = anything;
}
alertify.set('notifier', 'position', 'top-right');
alertify.set('notifier', 'delay', 5);
/* document.addEventListener("DOMContentLoaded", function() {
var customerID = sessionStorage.getItem('customerID');
if (customerID) {
document.getElementById('customerID').innerText = 'Customer ID: ' + customerID;
} else {
console.log('Customer ID not found in sessionStorage');
}
});
*/
// para sa modal add product
// $(document).ready(function () {
window.onload = function (){
$('#modalContainer').load('modal.html');
$('#total').hide()
$(".addtocart").click(function () {
var productId = $(this).data("product-id");
var productName = $(this).data("product-name");
var productImage = $(this).data("product-image");
var productDetail = $(this).data("product-detail");
var productPrice = $(this).data("product-price");
//ayaw magpakita yung picture sa modal
console.log("Product Image URL:", productImage);
console.log("Product ID:", productId);
console.log("Product Name:", productName);
console.log("Product Image:", productImage);
console.log("Product Detail:", productDetail);
console.log("Product Price:", productPrice);
$("#modalProduct #fruitname").text(productName);
$("#modalProduct #fruitprice").text("Php " + productPrice);
$("#modalProduct #fruitdetail").text(productDetail);
$("#modalProduct #fruitimage").attr("src", "/3rdyr/starbuckz/products/" + productImage); //kelangan pala yunf directory lols my ghad sayang 30 mins
//FUnction for Increment Button on MOdal product
$("#increment").click(function () {
let quantity = parseInt($("#quantity").val());
quantity += 1;
$("#quantity").val(quantity);
$('#total').show();
$('#total').val(productPrice * quantity);
});
//FUnction for Decrement Button on MOdal product
$("#decrement").click(function () {
let quantity = parseInt($("#quantity").val());
if (quantity > 0) {
quantity -= 1;
$("#quantity").val(quantity);
$('#total').show();
$('#total').val(productPrice * quantity);
}
});
$('#close').click(function(){
$('#quantity').val(0);
$('#total').hide()
//mahirap na bug requires modern solution reload para di mag double yung Qt sa modal
setTimeout(function () {
location.reload();
}, 10);
});
$('#buy').click(function () {
alertify.success('Item added to cart!');
var quantity = parseInt($("#quantity").val());
var total = productPrice * quantity;
var cartItem = {
productId: productId, // Use the productId variable
productName: productName,
productPrice: productPrice,
quantity: quantity,
total: total
};
// Store the cart item in localStorage
var cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];
cartItems.push(cartItem);
localStorage.setItem("cartItems", JSON.stringify(cartItems));
// Clear the quantity after adding to cart
$("#quantity").val(0);
// Reload the page after a delay (e.g., 2000 milliseconds = 2 seconds)
setTimeout(function () {
location.reload();
}, 2000);
});
// Function to display cart items
function displayCartItems() {
var cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];
var cartOutput = "Product Name\tQuantity\tTotal\n";
}
// Display cart items when the page loads
displayCartItems();
});
}
function loadProducts() {
$.ajax({
url: 'fetchProduct.php',
success: function (data) {
if (data.trim() === '') {
$('#content').append('
NO PRODUCTS AVAILABLE
');
} else {
$('#content').append(data);
}
},
error: function () {
$('#content').append('
Error loading products. Please try again later.
');
}
});
}
loadProducts();
Подробнее здесь: https://stackoverflow.com/questions/782 ... as-content
