<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SuryoBook</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body { font-family: 'Poppins', sans-serif; }
.hidden-section { display: none !important; }
.page-container { transition: all 0.3s ease; }
</style>
</head>
<body class="bg-gray-100 min-h-screen">
<div id="login-section" class="page-container flex items-center justify-center min-h-screen p-4">
<div class="container max-w-5xl mx-auto flex flex-col lg:flex-row items-center justify-center gap-12 lg:gap-24">
<div class="text-center lg:text-left max-w-lg">
<h1 class="text-6xl font-bold text-blue-600 mb-4">SuryoBook</h1>
<p class="text-2xl text-gray-800 leading-tight">Terhubung dengan teman dan keluarga, bagikan momen terbaikmu secara online.</p>
</div>
<div class="w-full max-w-sm">
<div class="bg-white p-6 rounded-xl shadow-xl">
<input id="username" type="text" placeholder="Email atau nomor telepon" class="w-full px-4 py-3 mb-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none">
<input id="password" type="password" placeholder="Kata Sandi" class="w-full px-4 py-3 mb-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none">
<button onclick="handleLogin()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg text-lg transition">Masuk</button>
<p id="error-msg" class="text-red-500 text-sm mt-4 text-center hidden">Password salah, ulangi!</p>
</div>
</div>
</div>
</div>
<div id="dashboard-section" class="page-container hidden-section">
<header class="fixed top-0 w-full bg-white h-16 flex items-center justify-between px-6 shadow-sm z-50">
<h1 class="text-3xl font-bold text-blue-600">SuryoBook</h1>
<div class="flex gap-6 text-2xl"><span>🏠</span><span>👥</span><span>🎥</span></div>
<img src="https://i.pravatar.cc/150?img=10" class="w-10 h-10 rounded-full">
</header>
<div class="flex mt-16 p-4 gap-6">
<div class="hidden lg:block w-64 space-y-4">
<div class="bg-white p-4 rounded-lg shadow">Beranda<br>Profil<br>Teman</div>
</div>
<div class="flex-1 max-w-2xl mx-auto">
<div class="bg-white p-4 rounded-xl shadow mb-6">
<input class="w-full bg-gray-100 rounded-full px-4 py-3" placeholder="Apa yang Anda pikirkan?">
</div>
<div class="bg-white p-4 rounded-xl shadow">
<div class="flex items-center gap-3 mb-4">
<img src="https://i.pravatar.cc/150?img=11" class="w-10 h-10 rounded-full">
<b>Tom Russo</b>
</div>
<p class="mb-4">Sedang menikmati liburan 😍</p>
<img src="https://picsum.photos/700/450" class="w-full rounded-lg">
</div>
</div>
<div class="hidden md:block w-64 bg-white p-4 rounded-lg shadow h-fit">
<h3 class="font-bold mb-2">Kontak</h3>
<div class="space-y-4">
<div class="flex items-center gap-2">📱 Dennis</div>
<div class="flex items-center gap-2">📱 Anna</div>
</div>
</div>
</div>
</div>
<script>
function handleLogin() {
const u = document.getElementById('username').value;
const p = document.getElementById('password').value;
if (u === 'suryo26' && p === '12345') {
document.getElementById('login-section').classList.add('hidden-section');
document.getElementById('dashboard-section').classList.remove('hidden-section');
} else {
document.getElementById('error-msg').classList.remove('hidden');
}
}
</script>
</body>
</html>
USER SURYO25
PASS 12345
0 Comments