muflhi001 commited on
Commit
fb71228
·
verified ·
1 Parent(s): 7a52bd2

Build to me Social Media Automation Software that enables marketers and entrepreneurs to share their content across all the social platforms, like Instagram, Facebook, Twitter, YouTube, Google Plus, Tumblr, LinkedIn, and Pinterest, all from one dashboard. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +236 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
  title: 01testfloe
3
- emoji:
4
- colorFrom: blue
5
- colorTo: yellow
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: 01testfloe
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,236 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SocialSync Pro | All-in-One Social Media Automation</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .platform-icon {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .platform-icon:hover {
14
+ transform: scale(1.1);
15
+ }
16
+ .content-card {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .content-card:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
22
+ }
23
+ .scheduled-post {
24
+ border-left: 4px solid #3b82f6;
25
+ }
26
+ #postEditor {
27
+ min-height: 200px;
28
+ }
29
+ .tab-content {
30
+ display: none;
31
+ }
32
+ .tab-content.active {
33
+ display: block;
34
+ }
35
+ .platform-tab {
36
+ transition: all 0.3s ease;
37
+ }
38
+ .platform-tab:hover:not(.active) {
39
+ background-color: #f3f4f6;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-50">
44
+ <div class="flex h-screen overflow-hidden">
45
+ <!-- Sidebar -->
46
+ <div class="hidden md:flex md:flex-shrink-0">
47
+ <div class="flex flex-col w-64 bg-white border-r border-gray-200">
48
+ <div class="flex items-center justify-center h-16 px-4 bg-blue-600">
49
+ <div class="flex items-center">
50
+ <i class="fas fa-share-alt text-white text-2xl mr-2"></i>
51
+ <span class="text-white font-bold text-xl">SocialSync Pro</span>
52
+ </div>
53
+ </div>
54
+ <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
55
+ <div class="space-y-1">
56
+ <button class="flex items-center w-full px-4 py-3 text-sm font-medium text-white bg-blue-600 rounded-lg">
57
+ <i class="fas fa-tachometer-alt mr-3"></i>
58
+ Dashboard
59
+ </button>
60
+ <button class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100">
61
+ <i class="fas fa-calendar-alt mr-3"></i>
62
+ Scheduler
63
+ </button>
64
+ <button class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100">
65
+ <i class="fas fa-chart-line mr-3"></i>
66
+ Analytics
67
+ </button>
68
+ <button class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100">
69
+ <i class="fas fa-users mr-3"></i>
70
+ Audience
71
+ </button>
72
+ <button class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100">
73
+ <i class="fas fa-cog mr-3"></i>
74
+ Settings
75
+ </button>
76
+ </div>
77
+
78
+ <div class="mt-8">
79
+ <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Connected Accounts</h3>
80
+ <div class="mt-2 space-y-1">
81
+ <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100">
82
+ <i class="fab fa-facebook text-blue-600 mr-3"></i>
83
+ Facebook
84
+ <span class="ml-auto text-green-500"><i class="fas fa-check-circle"></i></span>
85
+ </div>
86
+ <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100">
87
+ <i class="fab fa-instagram text-purple-600 mr-3"></i>
88
+ Instagram
89
+ <span class="ml-auto text-green-500"><i class="fas fa-check-circle"></i></span>
90
+ </div>
91
+ <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100">
92
+ <i class="fab fa-twitter text-blue-400 mr-3"></i>
93
+ Twitter
94
+ <span class="ml-auto text-green-500"><i class="fas fa-check-circle"></i></span>
95
+ </div>
96
+ <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100">
97
+ <i class="fab fa-linkedin text-blue-700 mr-3"></i>
98
+ LinkedIn
99
+ <span class="ml-auto text-green-500"><i class="fas fa-check-circle"></i></span>
100
+ </div>
101
+ <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100">
102
+ <i class="fab fa-pinterest text-red-600 mr-3"></i>
103
+ Pinterest
104
+ <span class="ml-auto text-green-500"><i class="fas fa-check-circle"></i></span>
105
+ </div>
106
+ <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100">
107
+ <i class="fab fa-youtube text-red-600 mr-3"></i>
108
+ YouTube
109
+ <span class="ml-auto text-green-500"><i class="fas fa-check-circle"></i></span>
110
+ </div>
111
+ <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100">
112
+ <i class="fas fa-plus-circle text-gray-400 mr-3"></i>
113
+ Add Account
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Main Content -->
122
+ <div class="flex flex-col flex-1 overflow-hidden">
123
+ <!-- Top Navigation -->
124
+ <div class="flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200">
125
+ <div class="flex items-center">
126
+ <button class="md:hidden text-gray-500 focus:outline-none">
127
+ <i class="fas fa-bars"></i>
128
+ </button>
129
+ <h2 class="ml-4 text-lg font-semibold text-gray-800">Dashboard</h2>
130
+ </div>
131
+ <div class="flex items-center space-x-4">
132
+ <div class="relative">
133
+ <button class="text-gray-500 focus:outline-none">
134
+ <i class="fas fa-bell"></i>
135
+ </button>
136
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
137
+ </div>
138
+ <div class="flex items-center">
139
+ <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile">
140
+ <span class="ml-2 text-sm font-medium text-gray-700">Sarah Johnson</span>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Main Content Area -->
146
+ <div class="flex-1 overflow-auto p-6 bg-gray-50">
147
+ <!-- Stats Cards -->
148
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
149
+ <div class="bg-white rounded-lg shadow p-6">
150
+ <div class="flex items-center">
151
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
152
+ <i class="fas fa-calendar-alt"></i>
153
+ </div>
154
+ <div class="ml-4">
155
+ <h3 class="text-sm font-medium text-gray-500">Scheduled Posts</h3>
156
+ <p class="text-2xl font-semibold text-gray-800">24</p>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ <div class="bg-white rounded-lg shadow p-6">
161
+ <div class="flex items-center">
162
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
163
+ <i class="fas fa-rocket"></i>
164
+ </div>
165
+ <div class="ml-4">
166
+ <h3 class="text-sm font-medium text-gray-500">Published Today</h3>
167
+ <p class="text-2xl font-semibold text-gray-800">8</p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ <div class="bg-white rounded-lg shadow p-6">
172
+ <div class="flex items-center">
173
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
174
+ <i class="fas fa-users"></i>
175
+ </div>
176
+ <div class="ml-4">
177
+ <h3 class="text-sm font-medium text-gray-500">Total Reach</h3>
178
+ <p class="text-2xl font-semibold text-gray-800">42.5K</p>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ <div class="bg-white rounded-lg shadow p-6">
183
+ <div class="flex items-center">
184
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
185
+ <i class="fas fa-heart"></i>
186
+ </div>
187
+ <div class="ml-4">
188
+ <h3 class="text-sm font-medium text-gray-500">Engagement</h3>
189
+ <p class="text-2xl font-semibold text-gray-800">1.2K</p>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Create Post Section -->
196
+ <div class="bg-white rounded-lg shadow mb-6">
197
+ <div class="p-6 border-b border-gray-200">
198
+ <h3 class="text-lg font-medium text-gray-800">Create New Post</h3>
199
+ </div>
200
+ <div class="p-6">
201
+ <!-- Platform Selection Tabs -->
202
+ <div class="flex overflow-x-auto mb-6">
203
+ <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg active" data-tab="all">
204
+ All Platforms
205
+ </button>
206
+ <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="facebook">
207
+ <i class="fab fa-facebook text-blue-600 mr-2"></i>Facebook
208
+ </button>
209
+ <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="instagram">
210
+ <i class="fab fa-instagram text-purple-600 mr-2"></i>Instagram
211
+ </button>
212
+ <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="twitter">
213
+ <i class="fab fa-twitter text-blue-400 mr-2"></i>Twitter
214
+ </button>
215
+ <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="linkedin">
216
+ <i class="fab fa-linkedin text-blue-700 mr-2"></i>LinkedIn
217
+ </button>
218
+ <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="pinterest">
219
+ <i class="fab fa-pinterest text-red-600 mr-2"></i>Pinterest
220
+ </button>
221
+ <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="youtube">
222
+ <i class="fab fa-youtube text-red-600 mr-2"></i>YouTube
223
+ </button>
224
+ </div>
225
+
226
+ <!-- Post Editor -->
227
+ <div class="mb-6">
228
+ <div id="postEditor" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" contenteditable="true" placeholder="What would you like to share?"></div>
229
+ </div>
230
+
231
+ <!-- Media Upload -->
232
+ <div class="mb-6">
233
+ <div class="flex items-center space-x-4">
234
+ <button class="flex items-center justify-center w-10 h-10 rounded-full bg
235
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=muflhi001/01testfloe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
236
+ </html>