Hugging Face's logo

Spaces:
aothuat
/
socialsphere
Running

App Files Community
socialsphere
File size: 7,818 Bytes
be29055
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SocialSphere - Connect with the World</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <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>
    <link rel="stylesheet" href="style.css">
    
    <!-- Custom Tailwind Configuration for Brand Colors -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: {
                            light: '#42b883',
                            DEFAULT: '#1877f2',
                            dark: '#35495e',
                            bg: '#f0f2f5'
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-brand-bg text-gray-800 font-sans antialiased overflow-x-hidden">

    <!-- Navbar Web Component -->
    <app-navbar></app-navbar>

    <!-- Main Container -->
    <div class="pt-16 md:pt-20 pb-10 px-0 md:px-4 max-w-[1600px] mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-6">
            
            <!-- Left Sidebar -->
            <div class="hidden lg:block lg:col-span-3">
                <div class="sticky top-20 space-y-4">
                    <app-sidebar-left></app-sidebar-left>
                </div>
            </div>

            <!-- Main Feed -->
            <div class="col-span-1 md:col-span-4 lg:col-span-6 space-y-4">
                
                <!-- Stories Section -->
                <div class="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
                    <!-- My Story -->
                    <div class="flex-shrink-0 w-28 h-48 bg-white rounded-xl shadow-sm relative group cursor-pointer overflow-hidden">
                        <img src="http://static.photos/people/112x168/10" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-60 transition" alt="My Story">
                        <div class="absolute bottom-0 w-full h-16 bg-white flex items-center justify-center rounded-b-xl">
                            <div class="w-8 h-8 rounded-full border-4 border-brand-blue-500 bg-blue-500 text-white flex items-center justify-center text-xs font-bold absolute -top-4 left-1/2 transform -translate-x-1/2">+</div>
                            <span class="text-xs font-semibold mt-2">Create Story</span>
                        </div>
                    </div>
                    <!-- Friend Story 1 -->
                    <div class="flex-shrink-0 w-28 h-48 bg-white rounded-xl shadow-sm relative group cursor-pointer overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50"></div>
                        <img src="http://static.photos/travel/112x168/101" class="absolute inset-0 w-full h-full object-cover" alt="Story">
                        <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-4 border-brand-blue-500 overflow-hidden">
                             <img src="http://static.photos/people/50x50/45" alt="User">
                        </div>
                        <span class="absolute bottom-2 left-2 right-2 text-white text-xs font-bold truncate">Sarah J.</span>
                    </div>
                    <!-- Friend Story 2 -->
                    <div class="flex-shrink-0 w-28 h-48 bg-white rounded-xl shadow-sm relative group cursor-pointer overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50"></div>
                        <img src="http://static.photos/food/112x168/55" class="absolute inset-0 w-full h-full object-cover" alt="Story">
                        <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-4 border-brand-blue-500 overflow-hidden">
                             <img src="http://static.photos/people/50x50/12" alt="User">
                        </div>
                        <span class="absolute bottom-2 left-2 right-2 text-white text-xs font-bold truncate">Mike Ross</span>
                    </div>
                     <!-- Friend Story 3 -->
                     <div class="flex-shrink-0 w-28 h-48 bg-white rounded-xl shadow-sm relative group cursor-pointer overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50"></div>
                        <img src="http://static.photos/technology/112x168/88" class="absolute inset-0 w-full h-full object-cover" alt="Story">
                        <div class="absolute top-2 left-2 w-8 h-8 rounded-full border-4 border-brand-blue-500 overflow-hidden">
                             <img src="http://static.photos/people/50x50/33" alt="User">
                        </div>
                        <span class="absolute bottom-2 left-2 right-2 text-white text-xs font-bold truncate">Tech Daily</span>
                    </div>
                </div>

                <!-- Create Post -->
                <div class="bg-white rounded-xl shadow-sm p-4">
                    <div class="flex items-center gap-3">
                        <img src="http://static.photos/people/40x40/99" class="w-10 h-10 rounded-full object-cover" alt="Current User">
                        <input type="text" placeholder="What's on your mind, User?" class="bg-gray-100 hover:bg-gray-200 rounded-full px-4 py-2.5 flex-1 outline-none text-sm cursor-pointer transition">
                    </div>
                    <div class="border-t mt-4 pt-3 flex justify-between px-2">
                        <button class="flex items-center gap-2 text-gray-600 hover:bg-gray-100 px-4 py-2 rounded-lg transition text-sm font-medium">
                            <i data-feather="video" class="text-red-500"></i> Live Video
                        </button>
                        <button class="flex items-center gap-2 text-gray-600 hover:bg-gray-100 px-4 py-2 rounded-lg transition text-sm font-medium">
                            <i data-feather="image" class="text-green-500"></i> Photo/Video
                        </button>
                        <button class="flex items-center gap-2 text-gray-600 hover:bg-gray-100 px-4 py-2 rounded-lg transition text-sm font-medium">
                            <i data-feather="smile" class="text-yellow-500"></i> Feeling/Activity
                        </button>
                    </div>
                </div>

                <!-- Feed Container -->
                <div id="feed-container" class="space-y-4">
                    <!-- Posts will be injected here via JS -->
                    <div class="flex justify-center py-10">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-blue-500"></div>
                    </div>
                </div>
            </div>

            <!-- Right Sidebar -->
            <div class="hidden md:block md:col-span-4 lg:col-span-3">
                <div class="sticky top-20 space-y-4">
                    <app-sidebar-right></app-sidebar-right>
                </div>
            </div>

        </div>
    </div>

    <!-- Components -->
    <script src="components/navbar.js"></script>
    <script src="components/sidebar-left.js"></script>
    <script src="components/sidebar-right.js"></script>
    <script src="components/post-card.js"></script>

    <!-- Main Logic -->
    <script src="script.js"></script>
    <script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>