Tạo mockup cửa sổ trình duyệt (chrome/firefox style) để demo website, screenshot, v.v. chỉ bằng HTML/CSS.
Ví dụ mã nguồn
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
* { box-sizing: border-box; }
.browserWindow {
max-width: 800px;
margin: 50px auto;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
background: white;
}
.titleBar {
display: flex;
align-items: center;
padding: 10px 15px;
background: #f1f1f1;
border-bottom: 1px solid #ddd;
}
.windowControls { display: flex; gap: 8px; }
.control {
width: 12px; height: 12px; border-radius: 50%;
background: #bbb;
}
.control.close { background: #ff5f57; }
.control.minimize { background: #febc2e; }
.control.maximize { background: #28ca42; }
.addressBar {
flex: 1;
margin: 0 20px;
padding: 6px 12px;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
color: #666;
font-family: monospace;
}
.content { padding: 20px; min-height: 300px; }
</style>
</head>
<body>
<div class="browserWindow">
<div class="titleBar">
<div class="windowControls">
<div class="control close"></div>
<div class="control minimize"></div>
<div class="control maximize"></div>
</div>
<input class="addressBar" type="text" value="https://example.com/" readonly>
</div>
<div class="content">
<h1>Sample Website</h1>
<p>Nội dung demo website ở đây...</p>
</div>
</div>
</body>
</html>
Các biến thể
- macOS style: 3 nút tròn trái (đỏ, vàng, xanh), address bar trung tâm
- Windows style: Icon app trái, tab bar, address bar
- Mobile browser: Address bar dưới (iOS Safari) hoặc trên (Chrome Android)
Ứng dụng
- Portfolio showcase dự án web
- Documentation demo component
- Landing page SaaS
- Screenshot tự động cho social media (kết hợp Puppeteer/Playwright)