retrobook-dark / index.html
expper's picture
old facebook page 2011
fceceaa verified
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RetroBook - 2011 Dark Edition</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://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
fb: {
blue: '#3B5998', // Classic 2011 Blue
darkblue: '#1d2a4b', // Darker variant for dark mode
bg: '#18191a', // Main Background
card: '#242526', // Card Background
hover: '#3a3b3c', // Hover State
text: '#e4e6eb', // Main Text
muted: '#b0b3b8', // Secondary Text
input: '#3a3b3c', // Input Background
border: '#3e4042' // Border Color
}
},
fontFamily: {
sans: ['Tahoma', 'Lucida Grande', 'Verdana', 'sans-serif'],
}
}
}
}
</script>
</head>
<body class="bg-fb-bg text-fb-text font-sans antialiased min-h-screen flex flex-col">
<!-- Header / Navigation -->
<app-navbar></app-navbar>
<!-- Main Layout -->
<div class="flex flex-1 pt-16 max-w-[1200px] mx-auto w-full px-4 gap-4">
<!-- Left Sidebar -->
<aside class="hidden md:block w-[180px] flex-shrink-0 mt-2 fixed md:relative">
<app-sidebar></app-sidebar>
</aside>
<!-- Middle Feed -->
<main class="flex-1 md:ml-4 max-w-[680px] mx-auto w-full">
<app-feed></app-feed>
</main>
<!-- Right Sidebar -->
<aside class="hidden lg:block w-[280px] flex-shrink-0 mt-2">
<app-rightsidebar></app-rightsidebar>
</aside>
</div>
<script src="components/navbar.js"></script>
<script src="components/sidebar.js"></script>
<script src="components/feed.js"></script>
<script src="components/rightsidebar.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>