code html web phụ tung điện cơ
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phụ Tùng Điện Cơ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ================= HEADER ================= -->
<header class="header">
<div class="logo">
<img src="images/Black Gold Simple Garage Logo.png">
<span>PHỤ TÙNG ĐIỆN CƠ</span>
</div>
<div class="header-actions">
<a href="cart.html" class="cart-btn">🛒 <span id="cartCount">0</span></a>
<a href="track.html" class="track-btn">🚚</a>
<button class="account-btn" onclick="toggleAccountPanel()">
👤 <span id="accountName">Tài khoản</span>
</button>
</div>
</header>
<!-- ================= ACCOUNT PANEL ================= -->
<div class="account-panel" id="accountPanel">
<div class="account-info">
<b id="panelName"></b>
<small id="panelPhone"></small>
</div>
<button onclick="openEdit()">✏️ Sửa thông tin</button>
<a href="orders.html">📦 Đơn của tôi</a>
<a href="track.html">🚚 Tra cứu đơn</a>
<button class="logout-btn" onclick="logout()">🚪 Đăng xuất</button>
</div>
<!-- ================= PRODUCTS ================= -->
<section class="product-section">
<div class="product-grid" id="products"></div>
</section>
<!-- ================= AUTH MODAL ================= -->
<div class="auth-modal" id="authModal">
<div class="auth-card">
<div class="auth-tabs">
<button id="tabLogin" class="active" onclick="showLogin()">Đăng nhập</button>
<button id="tabRegister" onclick="showRegister()">Đăng ký</button>
</div>
<!-- LOGIN -->
<div id="loginBox">
<input id="loginPhone" placeholder="Số điện thoại">
<input id="loginPass" type="password" placeholder="Mật khẩu">
<button onclick="login()">Đăng nhập</button>
</div>
<!-- REGISTER -->
<div id="registerBox" style="display:none">
<input id="regName" placeholder="Họ tên">
<input id="regPhone" placeholder="Số điện thoại">
<input id="regPass" type="password" placeholder="Mật khẩu">
<button onclick="register()">Đăng ký</button>
</div>
</div>
</div>
<!-- ================= EDIT MODAL ================= -->
<div class="auth-modal" id="editModal">
<div class="auth-card">
<h3>Sửa thông tin</h3>
<input id="editName" placeholder="Họ tên">
<input id="editPass" type="password" placeholder="Mật khẩu mới (tuỳ chọn)">
<button onclick="saveAccount()">💾 Lưu</button>
</div>
</div>
<!-- ================= SCRIPTS ================= -->
<script type="module" src="js/products.js"></script>
<script src="js/cart.js"></script>
<script>
// ================= AUTH =================
function showLogin(){
loginBox.style.display="block";
registerBox.style.display="none";
tabLogin.classList.add("active");
tabRegister.classList.remove("active");
}
function showRegister(){
loginBox.style.display="none";
registerBox.style.display="block";
tabRegister.classList.add("active");
tabLogin.classList.remove("active");
}
function login(){
const users=JSON.parse(localStorage.getItem("users"))||[];
const u=users.find(x=>x.phone===loginPhone.value && x.pass===loginPass.value);
if(!u){ alert("Sai thông tin"); return; }
localStorage.setItem("currentUser",JSON.stringify(u));
authModal.style.display="none";
renderAccount();
}
function register(){
const users=JSON.parse(localStorage.getItem("users"))||[];
if(users.find(x=>x.phone===regPhone.value)){
alert("SĐT đã tồn tại"); return;
}
users.push({name:regName.value,phone:regPhone.value,pass:regPass.value});
localStorage.setItem("users",JSON.stringify(users));
alert("Đăng ký thành công");
showLogin();
}
// ================= ACCOUNT PANEL =================
function toggleAccountPanel(){
const user=JSON.parse(localStorage.getItem("currentUser"));
if(!user){ authModal.style.display="flex"; return; }
accountPanel.style.display =
accountPanel.style.display==="block"?"none":"block";
panelName.innerText=user.name;
panelPhone.innerText=user.phone;
}
function renderAccount(){
const user=JSON.parse(localStorage.getItem("currentUser"));
accountName.innerText=user?user.name:"Tài khoản";
}
// ================= EDIT =================
function openEdit(){
const user=JSON.parse(localStorage.getItem("currentUser"));
editName.value=user.name;
editModal.style.display="flex";
}
function saveAccount(){
const user=JSON.parse(localStorage.getItem("currentUser"));
const users=JSON.parse(localStorage.getItem("users"))||[];
user.name=editName.value;
if(editPass.value) user.pass=editPass.value;
const u=users.find(x=>x.phone===user.phone);
u.name=user.name;
if(editPass.value) u.pass=user.pass;
localStorage.setItem("users",JSON.stringify(users));
localStorage.setItem("currentUser",JSON.stringify(user));
editModal.style.display="none";
renderAccount();
}
// ================= LOGOUT =================
function logout(){
localStorage.removeItem("currentUser");
location.reload();
}
renderAccount();
</script>
<footer class="footer">
<div class="footer-container">
<div class="footer-col">
<h4>PHỤ TÙNG ĐIỆN CƠ</h4>
<p>📍 Địa chỉ: (cập nhật sau)</p>
<p>☎️ Hotline: (cập nhật sau)</p>
<p>✉️ Email: huyloknguyen@gmail.com</p>
</div>
<div class="footer-col">
<h4>HỖ TRỢ KHÁCH HÀNG</h4>
<ul>
<li>🔧 Tư vấn chọn motor & thiết bị phù hợp</li>
<li>🚚 Hỗ trợ đặt hàng & giao nhanh</li>
<li>🛠️ Bảo hành & tiếp nhận phản hồi kỹ thuật</li>
</ul>
</div>
<div class="footer-col">
<h4>KẾT NỐI VỚI CHÚNG TÔI</h4>
<ul>
<li>📘 Facebook</li>
<li>💬 Zalo</li>
<li>📸 Instagram</li>
<li>▶️ YouTube</li>
<li>💼 LinkedIn</li>
</ul>
</div>
</div>
<div class="footer-bottom">
© 2025 Phụ Tùng Điện Cơ | Thiết kế & vận hành bởi Điện Cơ Team
</div>
</footer>
<!-- FLOAT CONTACT BUTTONS -->
<div class="floating-actions">
<a href="tel:0865070207" class="call-btn">
👉📞 Gọi ngay
</a>
<a href="https://zalo.me/0865070207" target="_blank" class="zalo-btn">
👉💬 Chat Zalo
</a>
</div>
</body>
</html>
style .css tự dev (muốn lấy full lh dép lào 0865070207)
Public Last updated: 2026-01-24 05:41:03 AM
