Workspace
Người dùng tdbachdu2014
Từ
Giới thiệu
https://gravatar.com/psychicb33aa8507e ╰‿╯𝖇á𝖈𝖍 𝖉𝖚亗 Շɦℯ☪¡Շƴ☡ℯท₷🫶🏻🩵
<html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>shopbachdu.com</title> <style> *{ margin:0; padding:0; box-sizing:border-box; font-family:Arial; } body{ background:#0b1120; color:white; } /* HEADER */ header{ background:white; display:flex; justify-content:space-between; align-items:center; padding:15px 40px; position:sticky; top:0; z-index:100; } .logo{ color:#7c3aed; font-size:28px; font-weight:bold; } nav{ display:flex; gap:25px; } nav a{ color:#ef4444; text-decoration:none; font-weight:bold; } .login-btn{ background:#ef4444; color:white; border:none; padding:12px 20px; border-radius:999px; cursor:pointer; font-weight:bold; } /* CONTAINER */ .container{ width:90%; margin:auto; } /* TOP */ .top-section{ display:flex; gap:20px; margin-top:20px; } .banner{ flex:3; height:340px; border-radius:12px; overflow:hidden; position:relative; background:url('https://picsum.photos/1200/600?1'); background-size:cover; background-position:center; } .overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.45); } .banner-text{ position:absolute; left:40px; bottom:40px; z-index:2; } .banner-text h1{ font-size:55px; } .banner-text p{ margin-top:10px; font-size:22px; } /* SIDE */ .side-box{ flex:1; background:white; color:black; border-radius:12px; padding:20px; } .side-box h2{ color:#ef4444; margin-bottom:15px; } .rank{ display:flex; justify-content:space-between; background:#ef4444; color:white; padding:10px; border-radius:8px; margin-bottom:10px; } .topup-btn{ width:100%; background:#ef4444; color:white; border:none; padding:14px; border-radius:10px; margin-top:15px; cursor:pointer; } /* NOTICE */ .notice{ margin-top:20px; background:white; color:#ef4444; padding:15px; border-radius:8px; font-weight:bold; } /* STATS */ .stats{ margin-top:20px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .stat{ background:white; color:black; padding:25px; border-radius:10px; text-align:center; } .stat h1{ color:#ef4444; } /* SECTION */ .section{ margin-top:30px; } .section-title{ background:white; color:#ef4444; padding:15px; border-radius:8px; font-size:24px; font-weight:bold; } .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:20px; } .card{ background:white; color:black; border-radius:12px; overflow:hidden; } .card img{ width:100%; height:180px; object-fit:cover; } .card-content{ padding:15px; } .price{ margin-top:10px; color:#ef4444; font-size:20px; font-weight:bold; } .info{ display:flex; gap:10px; margin-top:10px; } .tag{ padding:8px 12px; border-radius:8px; color:white; font-size:14px; } .stock{ background:#9333ea; } .sold{ background:#0f766e; } .buy-btn{ width:100%; margin-top:15px; background:linear-gradient(to right,#ef4444,#fb7185); color:white; border:none; padding:14px; border-radius:10px; cursor:pointer; } /* POPUP */ .popup{ position:fixed; inset:0; background:rgba(0,0,0,0.7); display:none; justify-content:center; align-items:center; z-index:999; } .popup-box{ width:420px; background:white; color:black; border-radius:12px; padding:30px; } .popup-box h1{ text-align:center; color:#1e3a8a; margin-bottom:20px; } .popup-box input, .popup-box select{ width:100%; padding:14px; margin-top:12px; border:1px solid #ccc; border-radius:8px; } .red-btn{ width:100%; background:#ef4444; color:white; border:none; padding:14px; border-radius:8px; margin-top:15px; cursor:pointer; } .gray-btn{ width:100%; background:#e5e7eb; border:none; padding:14px; border-radius:8px; margin-top:10px; cursor:pointer; } .ok-btn{ width:100px; background:#2563eb; color:white; border:none; padding:12px; border-radius:8px; margin:auto; margin-top:20px; display:block; cursor:pointer; } /* MOBILE */ @media(max-width:900px){ .top-section{ flex-direction:column; } .stats{ grid-template-columns:repeat(2,1fr); } } </style> </head> <body> <header>
SHOPBACHDU.COM
<nav>
TRANG CHỦ
NẠP THẺ
NẠP ATM/MOMO
TIN TỨC
HỖ TRỢ
</nav>
<button class="login-btn"
onclick="showLogin()">
ĐĂNG NHẬP
</button>
<button class="login-btn"
onclick="logout()">
ĐĂNG XUẤT
</button>
</header>
TOP NẠP
#1 bachdu
500,000đ
#2 player123
300,000đ
#3 noobvn
200,000đ
<button class="topup-btn"
onclick="showTopup()">
NẠP THẺ NGAY
</button>
🔔 SHOPBACHDU.COM - Gaming Mystery Box Demo Website
10K+
Người Dùng
1M+
Lượt Truy Cập
5000+
Sản Phẩm
24/7
Hỗ Trợ
TÚI MÙ TRÁI MYTHICAL
TÚI MÙ FRUIT MYTHICAL
10,000 VNĐ
Kho hàng: 110
Đã bán: 2890
TÚI MÙ MOCHI / GAS
10,000 VNĐ
Kho hàng: 0
Đã bán: 478
TÚI MÙ KITSUNE / DRAGON
70,000 VNĐ
Kho hàng: 4
Đã bán: 176
ĐĂNG NHẬP
<input type="text" id="loginUser" placeholder="Tài khoản"> <input type="password" id="loginPass" placeholder="Mật khẩu"> <button class="red-btn" onclick="login()"> ĐĂNG NHẬP </button> <button class="gray-btn" onclick="showRegister()"> TẠO TÀI KHOẢN </button>TẠO TÀI KHOẢN
<input type="text" id="regUser" placeholder="Tên tài khoản"> <input type="password" id="regPass" placeholder="Mật khẩu"> <button class="red-btn" onclick="register()"> TẠO TÀI KHOẢN </button>NẠP THẺ
<select> <option>Viettel</option> <option>Zing</option> <option>Mobifone</option> <option>Vinaphone</option> </select> <input type="text" placeholder="Nhập mã thẻ"> <input type="text" placeholder="Nhập seri"> <button class="red-btn" onclick="confirmTopup()"> XÁC NHẬN </button> <button class="gray-btn" onclick="closeTopup()"> ĐÓNG </button>Thông báo
<button class="ok-btn" onclick="closeAlert()"> OK </button>