<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sản phẩm + Popup Zalo/Điện thoại + ScrollTop</title>
<style>
:root {
--accent: #007bff;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f4f4f4;
}
header {
text-align: center;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.product-item {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: 0.3s;
}
.product-item:hover {
transform: translateY(-5px);
}
.product-item img {
width: 100%;
height: 160px;
object-fit: cover;
}
.product-body {
padding: 10px;
text-align: center;
}
/* fixed icons */
.fixed-icons {
position: fixed;
right: 20px;
bottom: 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
z-index: 9999;
transition: bottom 0.6s ease; /* hiệu ứng trượt mượt */
}
.fixed-icons.up {
bottom: 100px;
}
.icon-box {
width: 64px;
height: 64px;
border-radius: 50%;
background: #fff;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
display: grid;
place-items: center;
cursor: pointer;
position: relative;
transition: transform 0.3s ease;
}
.icon-box:hover {
transform: scale(1.05);
}
.icon-box img {
width: 28px;
height: 28px;
transition: transform 0.3s ease;
}
/* popup box */
.contact-popup {
position: absolute;
bottom: 80px;
right: 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
padding: 14px 18px;
width: 220px;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: all 0.35s ease;
}
.contact-popup.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.contact-popup h4 {
margin: 0 0 8px;
font-size: 15px;
color: #333;
}
.contact-popup a {
display: flex;
align-items: center;
gap: 8px;
color: #007bff;
text-decoration: none;
font-size: 14px;
margin: 6px 0;
}
.contact-popup a img {
width: 22px;
height: 22px;
}
/* scrollTop */
#scrollTopBtn {
position: fixed;
right: 20px;
bottom: 20px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 50%;
width: 56px;
height: 56px;
cursor: pointer;
display: grid;
place-items: center;
opacity: 0;
transform: translateY(10px);
transition: opacity .3s ease, transform .3s ease;
z-index: 990;
}
#scrollTopBtn.show {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<header>
<h1>Demo sản phẩm + Zalo Popup + ScrollTop</h1>
</header>
<div class="container">
<div class="product-grid" id="productGrid"></div>
</div>
<!-- fixed icons -->
<div class="fixed-icons" id="fixedIcons">
<div class="icon-box" id="toggleContact">
<img id="iconImg" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Icon_of_Zalo.svg" alt="zalo">
</div>
<div class="contact-popup" id="contactPopup">
<h4>Liên hệ nhanh</h4>
<a href="https://zalo.me/0346674665" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Icon_of_Zalo.svg" alt="zalo">
Chat qua Zalo
</a>
<a href="tel:0909123456">
<img src="https://cdn-icons-png.flaticon.com/512/724/724664.png" alt="phone">
Gọi: 0909 123 456
</a>
</div>
</div>
<!-- scroll top -->
<button id="scrollTopBtn">
<svg viewBox="0 0 448 512" width="20" height="20" xmlns="http://www.w3.org/2000/svg">
<path fill="#fff" d="M201.4 73.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5
12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3V464c0
17.7-14.3 32-32 32s-32-14.3-32-32V173.3L54.6
310.6c-12.5 12.5-32.8 12.5-45.3
0s-12.5-32.8 0-45.3l192-192z"/>
</svg>
</button>
<script>
/* tạo sản phẩm demo */
const grid = document.getElementById('productGrid');
for(let i=1;i<=24;i++){
grid.innerHTML += `
<div class="product-item">
<img src="https://picsum.photos/400/300?random=${i}" alt="Sản phẩm ${i}">
<div class="product-body">
<h3>Sản phẩm ${i}</h3>
<p>Giá: ${(100+i*10).toLocaleString('vi-VN')}đ</p>
</div>
</div>`;
}
/* scrollTop + icon di chuyển */
const scrollBtn = document.getElementById('scrollTopBtn');
const fixedIcons = document.getElementById('fixedIcons');
window.addEventListener('scroll',()=>{
if(window.scrollY>200){
scrollBtn.classList.add('show');
fixedIcons.classList.add('up');
} else {
scrollBtn.classList.remove('show');
fixedIcons.classList.remove('up');
}
});
scrollBtn.onclick = ()=>window.scrollTo({top:0,behavior:'smooth'});
/* toggle popup */
const toggleBtn = document.getElementById('toggleContact');
const popup = document.getElementById('contactPopup');
const iconImg = document.getElementById('iconImg');
let isOpen = false;
let currentIcon = 'zalo';
let iconTimer;
function startIconLoop() {
iconTimer = setInterval(()=>{
if(isOpen) return; // không đổi khi popup mở
if(currentIcon === 'zalo') {
iconImg.src = "https://cdn-icons-png.flaticon.com/512/724/724664.png";
currentIcon = 'phone';
} else {
iconImg.src = "https://upload.wikimedia.org/wikipedia/commons/9/91/Icon_of_Zalo.svg";
currentIcon = 'zalo';
}
},2000);
}
startIconLoop();
toggleBtn.addEventListener('click',()=>{
isOpen = !isOpen;
if(isOpen){
popup.classList.add('show');
iconImg.src = "https://cdn-icons-png.flaticon.com/512/1828/1828778.png"; // icon X
clearInterval(iconTimer);
} else {
popup.classList.remove('show');
startIconLoop();
}
});
</script>
</body>
</html>
