namht94's picture
quá đẹp, cho anh thêm example về màn hình login & table theo syle này nữa nha
90e733d verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TIMBERSTACK - System Logs</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'stencil': ['Chakra Petch', 'monospace'],
'mono': ['JetBrains Mono', 'monospace'],
}
}
}
}
</script>
</head>
<body class="bg-[#0a0c10] text-white font-mono overflow-hidden">
<!-- Noise Overlay -->
<div class="noise-overlay"></div>
<!-- Scanlines -->
<div class="scanlines"></div>
<!-- Snow Particles (Winter Mode) -->
<div class="snow-container"></div>
<div class="container mx-auto h-screen flex">
<!-- Sidebar -->
<div class="w-64 border-r-2 border-[#4a5568] border-double">
<custom-sidebar></custom-sidebar>
</div>
<!-- Main Content -->
<div class="flex-1 p-6">
<custom-header></custom-header>
<!-- Table Section -->
<div class="terminal-card mt-6">
<div class="card-header">
<i data-feather="file-text" class="text-[#ff9f1c]"></i>
<h3 class="font-stencil uppercase">SYSTEM LOGS</h3>
<div class="ml-auto flex items-center space-x-2">
<button class="text-xs border border-[#4a5568] px-2 py-1 hover:border-[#ff9f1c] hover:text-[#ff9f1c] transition-all">
<i data-feather="filter"></i>
FILTER
</button>
<button class="text-xs border border-[#4a5568] px-2 py-1 hover:border-[#ff9f1c] hover:text-[#ff9f1c] transition-all">
<i data-feather="refresh-cw"></i>
REFRESH
</button>
</div>
<div class="card-content p-0">
<custom-data-table></custom-data-table>
</div>
</div>
</div>
</div>
<!-- Component Scripts -->
<script src="components/sidebar.js"></script>
<script src="components/header.js"></script>
<script src="components/data-table.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html>