Hugging Face's logo

Spaces:
expper
/
retrobook-dark
Running

App Files Community
expper commited on
Commit
fceceaa
·
verified ·
1 Parent(s): ad7104f

old facebook page 2011

Browse files
Files changed (8) hide show
  1. README.md +7 -4
  2. components/feed.js +208 -0
  3. components/navbar.js +113 -0
  4. components/rightsidebar.js +94 -0
  5. components/sidebar.js +79 -0
  6. index.html +72 -19
  7. script.js +16 -0
  8. style.css +34 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Retrobook Dark
3
- emoji: 😻
4
- colorFrom: indigo
5
  colorTo: pink
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: RetroBook Dark 🕶️
3
+ colorFrom: red
 
4
  colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/feed.js ADDED
@@ -0,0 +1,208 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class AppFeed extends HTMLElement {
2
+ constructor() {
3
+ super();
4
+ this.posts = [];
5
+ }
6
+
7
+ connectedCallback() {
8
+ this.attachShadow({ mode: 'open' });
9
+
10
+ // Initial Skeleton
11
+ this.shadowRoot.innerHTML = `
12
+ <style>
13
+ :host {
14
+ display: block;
15
+ }
16
+ .post-card {
17
+ background-color: #242526;
18
+ border-radius: 5px;
19
+ margin-bottom: 15px;
20
+ box-shadow: 0 1px 2px rgba(0,0,0,0.2);
21
+ overflow: hidden;
22
+ }
23
+ .status-box {
24
+ background-color: #242526;
25
+ border-radius: 5px;
26
+ padding: 10px;
27
+ margin-bottom: 15px;
28
+ box-shadow: 0 1px 2px rgba(0,0,0,0.2);
29
+ display: flex;
30
+ gap: 10px;
31
+ }
32
+ .status-input {
33
+ flex: 1;
34
+ background-color: #3a3b3c;
35
+ border: 1px solid #3e4042;
36
+ border-radius: 5px;
37
+ padding: 8px;
38
+ color: #e4e6eb;
39
+ font-size: 14px;
40
+ }
41
+ .post-header {
42
+ padding: 10px;
43
+ display: flex;
44
+ align-items: center;
45
+ }
46
+ .avatar {
47
+ width: 40px;
48
+ height: 40px;
49
+ border-radius: 2px;
50
+ margin-right: 10px;
51
+ }
52
+ .info h4 {
53
+ margin: 0;
54
+ font-size: 14px;
55
+ color: #e4e6eb;
56
+ }
57
+ .info span {
58
+ font-size: 12px;
59
+ color: #b0b3b8;
60
+ }
61
+ .post-content {
62
+ padding: 0 10px 10px;
63
+ font-size: 14px;
64
+ line-height: 1.4;
65
+ color: #e4e6eb;
66
+ }
67
+ .post-image {
68
+ width: 100%;
69
+ display: block;
70
+ border-top: 1px solid #3e4042;
71
+ border-bottom: 1px solid #3e4042;
72
+ }
73
+ .post-actions {
74
+ padding: 5px 10px;
75
+ background-color: #323232;
76
+ display: flex;
77
+ border-top: 1px solid #3e4042;
78
+ }
79
+ .action-btn {
80
+ background: none;
81
+ border: none;
82
+ color: #b0b3b8;
83
+ font-size: 12px;
84
+ font-weight: bold;
85
+ padding: 5px 10px;
86
+ cursor: pointer;
87
+ display: flex;
88
+ align-items: center;
89
+ gap: 5px;
90
+ }
91
+ .action-btn:hover {
92
+ background-color: #3a3b3c;
93
+ border-radius: 3px;
94
+ }
95
+ .action-btn i {
96
+ width: 14px;
97
+ height: 14px;
98
+ }
99
+ .loading {
100
+ text-align: center;
101
+ padding: 20px;
102
+ color: #b0b3b8;
103
+ }
104
+ </style>
105
+
106
+ <div class="status-box">
107
+ <img src="http://static.photos/people/40x40/1" class="avatar" alt="Me">
108
+ <input type="text" class="status-input" placeholder="What's on your mind?">
109
+ </div>
110
+
111
+ <div id="feed-container">
112
+ <div class="loading">Updating News Feed...</div>
113
+ </div>
114
+ `;
115
+
116
+ this.fetchPosts();
117
+ }
118
+
119
+ async fetchPosts() {
120
+ try {
121
+ // Fetch dummy text data
122
+ const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
123
+ const data = await response.json();
124
+
125
+ // Fetch dummy users for avatars
126
+ const usersResponse = await fetch('https://jsonplaceholder.typicode.com/users?_limit=5');
127
+ const users = await usersResponse.json();
128
+
129
+ this.posts = data.map((post, index) => ({
130
+ id: post.id,
131
+ title: post.title,
132
+ body: post.body,
133
+ user: users[index] || { name: 'Facebook User', id: 1 },
134
+ likes: Math.floor(Math.random() * 50) + 1,
135
+ imageSeed: Math.floor(Math.random() * 1000)
136
+ }));
137
+
138
+ this.renderFeed();
139
+ } catch (error) {
140
+ console.error("Error fetching posts:", error);
141
+ this.shadowRoot.getElementById('feed-container').innerHTML = '<div class="loading">Error loading feed.</div>';
142
+ }
143
+ }
144
+
145
+ renderFeed() {
146
+ const container = this.shadowRoot.getElementById('feed-container');
147
+ container.innerHTML = '';
148
+
149
+ this.posts.forEach(post => {
150
+ const card = document.createElement('div');
151
+ card.className = 'post-card';
152
+ card.innerHTML = `
153
+ <div class="post-header">
154
+ <img src="http://static.photos/people/40x40/${post.user.id}" class="avatar" alt="${post.user.name}">
155
+ <div class="info">
156
+ <a href="#">${post.user.name}</a>
157
+ <br>
158
+ <span>2 hours ago via iPhone</span>
159
+ </div>
160
+ </div>
161
+ <div class="post-content">
162
+ <p>${post.body}</p>
163
+ </div>
164
+ ${Math.random() > 0.5 ? `<img src="http://static.photos/technology/640x360/${post.imageSeed}" class="post-image" alt="Post Image">` : ''}
165
+ <div class="post-actions">
166
+ <button class="action-btn like-btn" data-id="${post.id}">
167
+ <i data-feather="thumbs-up"></i> Like
168
+ </button>
169
+ <button class="action-btn">
170
+ <i data-feather="message-circle"></i> Comment
171
+ </button>
172
+ <button class="action-btn">
173
+ <i data-feather="share"></i> Share
174
+ </button>
175
+ </div>
176
+ `;
177
+ container.appendChild(card);
178
+ });
179
+
180
+ // Re-initialize icons for the new content
181
+ if (window.feather) {
182
+ feather.replace();
183
+ }
184
+
185
+ // Add event listeners for like buttons
186
+ const likeBtns = this.shadowRoot.querySelectorAll('.like-btn');
187
+ likeBtns.forEach(btn => {
188
+ btn.addEventListener('click', (e) => {
189
+ const icon = btn.querySelector('i');
190
+ // Simple toggle visual
191
+ if (btn.style.color === 'rgb(66, 103, 178)') {
192
+ btn.style.color = '#b0b3b8';
193
+ icon.style.fill = 'none';
194
+ } else {
195
+ btn.style.color = '#4267B2'; // FB Blue
196
+ icon.style.fill = '#4267B2';
197
+ // Dispatch event
198
+ this.dispatchEvent(new CustomEvent('post-liked', {
199
+ detail: { id: btn.dataset.id },
200
+ bubbles: true,
201
+ composed: true
202
+ }));
203
+ }
204
+ });
205
+ });
206
+ }
207
+ }
208
+ customElements.define('app-feed', AppFeed);
components/navbar.js ADDED
@@ -0,0 +1,113 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class AppNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ width: 100%;
9
+ height: 42px;
10
+ position: fixed;
11
+ top: 0;
12
+ left: 0;
13
+ z-index: 1000;
14
+ background-color: #242526;
15
+ border-bottom: 1px solid #3e4042;
16
+ }
17
+ .container {
18
+ max-width: 1200px;
19
+ margin: 0 auto;
20
+ height: 100%;
21
+ display: flex;
22
+ align-items: center;
23
+ padding: 0 16px;
24
+ justify-content: space-between;
25
+ }
26
+ .logo {
27
+ font-size: 24px;
28
+ font-weight: bold;
29
+ color: #ffffff;
30
+ font-family: 'Tahoma', sans-serif;
31
+ text-decoration: none;
32
+ letter-spacing: -0.5px;
33
+ }
34
+ .search-box {
35
+ background-color: #3a3b3c;
36
+ border-radius: 5px;
37
+ padding: 2px 5px;
38
+ display: flex;
39
+ align-items: center;
40
+ width: 400px;
41
+ border: 1px solid transparent;
42
+ }
43
+ .search-box:focus-within {
44
+ border-color: #3B5998;
45
+ }
46
+ .search-input {
47
+ background: transparent;
48
+ border: none;
49
+ color: #fff;
50
+ outline: none;
51
+ width: 100%;
52
+ margin-left: 5px;
53
+ font-size: 13px;
54
+ }
55
+ .nav-icons {
56
+ display: flex;
57
+ gap: 20px;
58
+ align-items: center;
59
+ }
60
+ .icon-btn {
61
+ color: #b0b3b8;
62
+ cursor: pointer;
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ width: 24px;
67
+ height: 24px;
68
+ }
69
+ .icon-btn:hover {
70
+ color: #fff;
71
+ }
72
+ .user-icon {
73
+ width: 24px;
74
+ height: 24px;
75
+ border-radius: 2px;
76
+ background-color: #3B5998;
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
80
+ color: white;
81
+ font-size: 12px;
82
+ font-weight: bold;
83
+ }
84
+ </style>
85
+ <div class="container">
86
+ <a href="/" class="logo">facebook</a>
87
+
88
+ <div class="search-box">
89
+ <i data-feather="search" width="14" height="14" color="#b0b3b8"></i>
90
+ <input type="text" class="search-input" placeholder="Search">
91
+ </div>
92
+
93
+ <div class="nav-icons">
94
+ <div class="icon-btn" title="Home">
95
+ <i data-feather="home" width="18" height="18"></i>
96
+ </div>
97
+ <div class="icon-btn" title="Profile">
98
+ <i data-feather="user" width="18" height="18"></i>
99
+ </div>
100
+ <div class="icon-btn" title="Find Friends">
101
+ <i data-feather="users" width="18" height="18"></i>
102
+ </div>
103
+ <div class="user-icon">M</div>
104
+ </div>
105
+ </div>
106
+ `;
107
+ // Initialize feather icons inside shadow DOM
108
+ if (window.feather) {
109
+ feather.replace();
110
+ }
111
+ }
112
+ }
113
+ customElements.define('app-navbar', AppNavbar);
components/rightsidebar.js ADDED
@@ -0,0 +1,94 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class AppRightsidebar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ }
9
+ .section-title {
10
+ color: #b0b3b8;
11
+ font-size: 12px;
12
+ font-weight: bold;
13
+ margin-bottom: 8px;
14
+ border-bottom: 1px solid #3e4042;
15
+ padding-bottom: 5px;
16
+ }
17
+ .ad-item {
18
+ margin-bottom: 15px;
19
+ }
20
+ .ad-image {
21
+ width: 100%;
22
+ height: 150px;
23
+ object-fit: cover;
24
+ border-radius: 5px;
25
+ margin-bottom: 5px;
26
+ }
27
+ .ad-title {
28
+ font-size: 12px;
29
+ color: #e4e6eb;
30
+ font-weight: bold;
31
+ display: block;
32
+ }
33
+ .ad-desc {
34
+ font-size: 11px;
35
+ color: #b0b3b8;
36
+ display: block;
37
+ }
38
+ .request-item {
39
+ display: flex;
40
+ align-items: center;
41
+ margin-bottom: 10px;
42
+ }
43
+ .request-avatar {
44
+ width: 40px;
45
+ height: 40px;
46
+ border-radius: 2px;
47
+ margin-right: 8px;
48
+ }
49
+ .request-info a {
50
+ font-size: 12px;
51
+ font-weight: bold;
52
+ display: block;
53
+ }
54
+ .request-info span {
55
+ font-size: 11px;
56
+ color: #b0b3b8;
57
+ }
58
+ </style>
59
+
60
+ <div class="requests">
61
+ <div class="section-title">FRIEND REQUESTS</div>
62
+ <div class="request-item">
63
+ <img src="http://static.photos/people/40x40/55" class="request-avatar" alt="User">
64
+ <div class="request-info">
65
+ <a href="#">John Doe</a>
66
+ <span>3 mutual friends</span>
67
+ </div>
68
+ </div>
69
+ <div class="request-item">
70
+ <img src="http://static.photos/people/40x40/56" class="request-avatar" alt="User">
71
+ <div class="request-info">
72
+ <a href="#">Jane Smith</a>
73
+ <span>8 mutual friends</span>
74
+ </div>
75
+ </div>
76
+ </div>
77
+
78
+ <div class="sponsored" style="margin-top: 30px;">
79
+ <div class="section-title">SPONSORED</div>
80
+ <div class="ad-item">
81
+ <img src="http://static.photos/technology/280x150/101" class="ad-image" alt="Ad">
82
+ <a href="#" class="ad-title">Learn Coding Today</a>
83
+ <span class="ad-desc">code-academy.example.com</span>
84
+ </div>
85
+ <div class="ad-item">
86
+ <img src="http://static.photos/food/280x150/102" class="ad-image" alt="Ad">
87
+ <a href="#" class="ad-title">Best Pizza in Town</a>
88
+ <span class="ad-desc">pizzaplace.example.com</span>
89
+ </div>
90
+ </div>
91
+ `;
92
+ }
93
+ }
94
+ customElements.define('app-rightsidebar', AppRightsidebar);
components/sidebar.js ADDED
@@ -0,0 +1,79 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class AppSidebar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ }
9
+ .sidebar-item {
10
+ display: flex;
11
+ align-items: center;
12
+ padding: 6px 8px;
13
+ border-radius: 5px;
14
+ cursor: pointer;
15
+ color: #e4e6eb;
16
+ font-size: 13px;
17
+ font-family: 'Tahoma', sans-serif;
18
+ margin-bottom: 2px;
19
+ transition: background 0.2s;
20
+ }
21
+ .sidebar-item:hover {
22
+ background-color: #3a3b3c;
23
+ }
24
+ .sidebar-item i {
25
+ margin-right: 10px;
26
+ width: 16px;
27
+ height: 16px;
28
+ }
29
+ .sidebar-header {
30
+ color: #b0b3b8;
31
+ font-size: 12px;
32
+ font-weight: bold;
33
+ margin: 15px 0 5px 8px;
34
+ text-transform: uppercase;
35
+ }
36
+ .separator {
37
+ height: 1px;
38
+ background-color: #3e4042;
39
+ margin: 10px 8px;
40
+ }
41
+ </style>
42
+
43
+ <div>
44
+ <a href="#" class="sidebar-item">
45
+ <i data-feather="grid" width="16" height="16"></i>
46
+ <span>News Feed</span>
47
+ </a>
48
+ <a href="#" class="sidebar-item">
49
+ <i data-feather="message-square" width="16" height="16"></i>
50
+ <span>Messages</span>
51
+ </a>
52
+ <a href="#" class="sidebar-item">
53
+ <i data-feather="calendar" width="16" height="16"></i>
54
+ <span>Events</span>
55
+ </a>
56
+ <a href="#" class="sidebar-item">
57
+ <i data-feather="image" width="16" height="16"></i>
58
+ <span>Photos</span>
59
+ </a>
60
+
61
+ <div class="separator"></div>
62
+
63
+ <div class="sidebar-header">Apps</div>
64
+ <a href="#" class="sidebar-item">
65
+ <i data-feather="smile" width="16" height="16"></i>
66
+ <span>Pokes</span>
67
+ </a>
68
+ <a href="#" class="sidebar-item">
69
+ <i data-feather="gift" width="16" height="16"></i>
70
+ <span>Birthdays</span>
71
+ </a>
72
+ </div>
73
+ `;
74
+ if (window.feather) {
75
+ feather.replace();
76
+ }
77
+ }
78
+ }
79
+ customElements.define('app-sidebar', AppSidebar);
index.html CHANGED
@@ -1,19 +1,72 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>RetroBook - 2011 Dark Edition</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+
13
+ <script>
14
+ tailwind.config = {
15
+ darkMode: 'class',
16
+ theme: {
17
+ extend: {
18
+ colors: {
19
+ fb: {
20
+ blue: '#3B5998', // Classic 2011 Blue
21
+ darkblue: '#1d2a4b', // Darker variant for dark mode
22
+ bg: '#18191a', // Main Background
23
+ card: '#242526', // Card Background
24
+ hover: '#3a3b3c', // Hover State
25
+ text: '#e4e6eb', // Main Text
26
+ muted: '#b0b3b8', // Secondary Text
27
+ input: '#3a3b3c', // Input Background
28
+ border: '#3e4042' // Border Color
29
+ }
30
+ },
31
+ fontFamily: {
32
+ sans: ['Tahoma', 'Lucida Grande', 'Verdana', 'sans-serif'],
33
+ }
34
+ }
35
+ }
36
+ }
37
+ </script>
38
+ </head>
39
+ <body class="bg-fb-bg text-fb-text font-sans antialiased min-h-screen flex flex-col">
40
+
41
+ <!-- Header / Navigation -->
42
+ <app-navbar></app-navbar>
43
+
44
+ <!-- Main Layout -->
45
+ <div class="flex flex-1 pt-16 max-w-[1200px] mx-auto w-full px-4 gap-4">
46
+
47
+ <!-- Left Sidebar -->
48
+ <aside class="hidden md:block w-[180px] flex-shrink-0 mt-2 fixed md:relative">
49
+ <app-sidebar></app-sidebar>
50
+ </aside>
51
+
52
+ <!-- Middle Feed -->
53
+ <main class="flex-1 md:ml-4 max-w-[680px] mx-auto w-full">
54
+ <app-feed></app-feed>
55
+ </main>
56
+
57
+ <!-- Right Sidebar -->
58
+ <aside class="hidden lg:block w-[280px] flex-shrink-0 mt-2">
59
+ <app-rightsidebar></app-rightsidebar>
60
+ </aside>
61
+
62
+ </div>
63
+
64
+ <script src="components/navbar.js"></script>
65
+ <script src="components/sidebar.js"></script>
66
+ <script src="components/feed.js"></script>
67
+ <script src="components/rightsidebar.js"></script>
68
+ <script src="script.js"></script>
69
+ <script>feather.replace();</script>
70
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
71
+ </body>
72
+ </html>
script.js ADDED
@@ -0,0 +1,16 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ // Initialize any global interactions here
3
+
4
+ // Example: Handle mobile menu toggle if we added one in the future
5
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
6
+ if(mobileMenuBtn) {
7
+ mobileMenuBtn.addEventListener('click', () => {
8
+ console.log('Menu toggled');
9
+ });
10
+ }
11
+
12
+ // Global Event Listener for custom events from components
13
+ document.addEventListener('post-liked', (e) => {
14
+ console.log('Post liked:', e.detail.id);
15
+ });
16
+ });
style.css CHANGED
@@ -1,28 +1,44 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
28
  }
 
 
 
 
1
+ /* Global Styles to complement Tailwind */
2
  body {
3
+ background-color: #18191a;
4
+ color: #e4e6eb;
5
  }
6
 
7
+ /* Scrollbar styling for that retro sleek look */
8
+ ::-webkit-scrollbar {
9
+ width: 10px;
10
+ }
11
+ ::-webkit-scrollbar-track {
12
+ background: #18191a;
13
+ }
14
+ ::-webkit-scrollbar-thumb {
15
+ background: #3a3b3c;
16
+ border-radius: 5px;
17
+ }
18
+ ::-webkit-scrollbar-thumb:hover {
19
+ background: #4e4f50;
20
  }
21
 
22
+ /* Utility to reset shadows inside components if needed */
23
+ .shadow-custom {
24
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 
 
25
  }
26
 
27
+ /* Link styles mimicking 2011 FB */
28
+ a {
29
+ text-decoration: none;
30
+ color: #e4e6eb;
31
+ transition: color 0.2s;
32
+ }
33
+ a:hover {
34
+ color: #fff;
35
  }
36
 
37
+ /* Animation for liking */
38
+ @keyframes like-bounce {
39
+ 0%, 100% { transform: scale(1); }
40
+ 50% { transform: scale(1.2); }
41
  }
42
+ .animate-like {
43
+ animation: like-bounce 0.3s ease-in-out;
44
+ }