Hugging Face's logo

Spaces:
mvbhr
/
webmail-client-interface
Running

App Files Community
mvbhr commited on
Commit
95eac61
·
verified ·
1 Parent(s): 14055f2

crar a interface inicial de um cliente de webmail

Browse files
Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +315 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
  title: Webmail Client Interface
3
- emoji: 🔥
4
- colorFrom: yellow
5
- colorTo: indigo
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: Webmail Client Interface
3
+ colorFrom: green
4
+ colorTo: blue
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://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,316 @@
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>Webmail Client</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16
+ }
17
+ .email-card:hover {
18
+ transform: translateY(-2px);
19
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .compose-btn {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .compose-btn:hover {
25
+ transform: scale(1.05);
26
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
27
+ }
28
+ .sidebar-item:hover {
29
+ background-color: rgba(255, 255, 255, 0.1);
30
+ }
31
+ .unread-dot {
32
+ width: 8px;
33
+ height: 8px;
34
+ }
35
+ .avatar-placeholder {
36
+ background: linear-gradient(45deg, #667eea, #764ba2);
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 min-h-screen">
41
+ <!-- Background Animation -->
42
+ <div id="vanta-bg" class="absolute inset-0 z-0"></div>
43
+
44
+ <!-- Main Container -->
45
+ <div class="relative z-10 min-h-screen flex flex-col">
46
+ <!-- Header -->
47
+ <header class="bg-white bg-opacity-10 backdrop-blur-lg border-b border-white border-opacity-20 py-4 px-6">
48
+ <div class="flex items-center justify-between">
49
+ <div class="flex items-center space-x-4">
50
+ <div class="flex items-center">
51
+ <i data-feather="mail" class="text-white mr-2"></i>
52
+ <h1 class="text-2xl font-bold text-white">WebMail</h1>
53
+ </div>
54
+ </div>
55
+
56
+ <div class="flex-1 max-w-2xl mx-8">
57
+ <div class="relative">
58
+ <input
59
+ type="text"
60
+ placeholder="Search emails..."
61
+ class="w-full py-2 px-4 pl-10 rounded-full bg-white bg-opacity-20 backdrop-blur-sm text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50"
62
+ >
63
+ <i data-feather="search" class="absolute left-3 top-2.5 text-white text-opacity-70"></i>
64
+ </div>
65
+ </div>
66
+
67
+ <div class="flex items-center space-x-4">
68
+ <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition">
69
+ <i data-feather="settings" class="text-white"></i>
70
+ </button>
71
+ <div class="flex items-center space-x-2">
72
+ <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
73
+ <span class="text-white font-medium">U</span>
74
+ </div>
75
+ <span class="text-white font-medium">User</span>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </header>
80
+
81
+ <!-- Main Content -->
82
+ <div class="flex flex-1 overflow-hidden">
83
+ <!-- Sidebar -->
84
+ <aside class="w-64 bg-white bg-opacity-10 backdrop-blur-lg border-r border-white border-opacity-20 p-4">
85
+ <button class="compose-btn w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center mb-6">
86
+ <i data-feather="edit-3" class="mr-2"></i>
87
+ Compose
88
+ </button>
89
+
90
+ <nav class="space-y-1">
91
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-lg text-white bg-white bg-opacity-20">
92
+ <i data-feather="inbox" class="mr-3"></i>
93
+ Inbox
94
+ <span class="ml-auto bg-white bg-opacity-20 rounded-full px-2 py-1 text-xs">12</span>
95
+ </a>
96
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-lg text-white">
97
+ <i data-feather="star" class="mr-3"></i>
98
+ Starred
99
+ </a>
100
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-lg text-white">
101
+ <i data-feather="send" class="mr-3"></i>
102
+ Sent
103
+ </a>
104
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-lg text-white">
105
+ <i data-feather="file-text" class="mr-3"></i>
106
+ Drafts
107
+ <span class="ml-auto bg-white bg-opacity-20 rounded-full px-2 py-1 text-xs">3</span>
108
+ </a>
109
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-lg text-white">
110
+ <i data-feather="trash-2" class="mr-3"></i>
111
+ Trash
112
+ </a>
113
+ </nav>
114
+
115
+ <div class="mt-8">
116
+ <h3 class="text-white text-sm font-medium px-3 mb-2">Labels</h3>
117
+ <div class="space-y-1">
118
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-lg text-white">
119
+ <span class="w-3 h-3 rounded-full bg-blue-400 mr-3"></span>
120
+ Work
121
+ </a>
122
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-lg text-white">
123
+ <span class="w-3 h-3 rounded-full bg-green-400 mr-3"></span>
124
+ Personal
125
+ </a>
126
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-lg text-white">
127
+ <span class="w-3 h-3 rounded-full bg-yellow-400 mr-3"></span>
128
+ Important
129
+ </a>
130
+ </div>
131
+ </div>
132
+ </aside>
133
+
134
+ <!-- Email List -->
135
+ <main class="flex-1 bg-white bg-opacity-10 backdrop-blur-lg overflow-y-auto">
136
+ <div class="p-6">
137
+ <div class="flex items-center justify-between mb-6">
138
+ <h2 class="text-xl font-bold text-white">Inbox</h2>
139
+ <div class="flex space-x-2">
140
+ <button class="p-2 rounded-lg bg-white bg-opacity-20 hover:bg-opacity-30 transition">
141
+ <i data-feather="refresh-cw" class="text-white"></i>
142
+ </button>
143
+ <button class="p-2 rounded-lg bg-white bg-opacity-20 hover:bg-opacity-30 transition">
144
+ <i data-feather="more-vertical" class="text-white"></i>
145
+ </button>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Email Items -->
150
+ <div class="space-y-3">
151
+ <!-- Email 1 -->
152
+ <div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300">
153
+ <div class="flex items-start">
154
+ <div class="flex-shrink-0 mr-4">
155
+ <div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
156
+ <span class="text-white font-medium">JD</span>
157
+ </div>
158
+ </div>
159
+ <div class="flex-1 min-w-0">
160
+ <div class="flex items-center justify-between">
161
+ <h3 class="text-white font-medium truncate">John Doe</h3>
162
+ <div class="flex items-center space-x-3">
163
+ <span class="text-white text-opacity-70 text-sm">10:30 AM</span>
164
+ <button class="text-white text-opacity-70 hover:text-opacity-100">
165
+ <i data-feather="star" class="w-4 h-4"></i>
166
+ </button>
167
+ </div>
168
+ </div>
169
+ <p class="text-white text-opacity-90 font-medium truncate mt-1">Project Update - Q3 Results</p>
170
+ <p class="text-white text-opacity-70 truncate mt-1">Hi there, I wanted to share the latest updates on our project progress and the Q3 results...</p>
171
+ </div>
172
+ <div class="flex-shrink-0 ml-4 flex space-x-2">
173
+ <button class="text-white text-opacity-70 hover:text-opacity-100">
174
+ <i data-feather="paperclip" class="w-4 h-4"></i>
175
+ </button>
176
+ <button class="text-white text-opacity-70 hover:text-opacity-100">
177
+ <i data-feather="archive" class="w-4 h-4"></i>
178
+ </button>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Email 2 -->
184
+ <div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300">
185
+ <div class="flex items-start">
186
+ <div class="flex-shrink-0 mr-4">
187
+ <div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
188
+ <span class="text-white font-medium">AC</span>
189
+ </div>
190
+ </div>
191
+ <div class="flex-1 min-w-0">
192
+ <div class="flex items-center justify-between">
193
+ <h3 class="text-white font-medium truncate">Amazon Customer</h3>
194
+ <div class="flex items-center space-x-3">
195
+ <span class="text-white text-opacity-70 text-sm">Yesterday</span>
196
+ <button class="text-white text-opacity-70 hover:text-opacity-100">
197
+ <i data-feather="star" class="w-4 h-4"></i>
198
+ </button>
199
+ </div>
200
+ </div>
201
+ <p class="text-white text-opacity-90 font-medium truncate mt-1">Your Order #12345 Has Shipped</p>
202
+ <p class="text-white text-opacity-70 truncate mt-1">Great news! Your order has been shipped and is on its way to you...</p>
203
+ </div>
204
+ <div class="flex-shrink-0 ml-4 flex space-x-2">
205
+ <button class="text-white text-opacity-70 hover:text-opacity-100">
206
+ <i data-feather="paperclip" class="w-4 h-4"></i>
207
+ </button>
208
+ <button class="text-white text-opacity-70 hover:text-opacity-100">
209
+ <i data-feather="archive" class="w-4 h-4"></i>
210
+ </button>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Email 3 -->
216
+ <div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300">
217
+ <div class="flex items-start">
218
+ <div class="flex-shrink-0 mr-4">
219
+ <div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
220
+ <span class="text-white font-medium">TW</span>
221
+ </div>
222
+ </div>
223
+ <div class="flex-1 min-w-0">
224
+ <div class="flex items-center justify-between">
225
+ <h3 class="text-white font-medium truncate">Team Workshop</h3>
226
+ <div class="flex items-center space-x-3">
227
+ <span class="text-white text-opacity-70 text-sm">Oct 12</span>
228
+ <button class="text-yellow-300">
229
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
230
+ </button>
231
+ </div>
232
+ </div>
233
+ <p class="text-white text-opacity-90 font-medium truncate mt-1">Reminder: Design Workshop Tomorrow</p>
234
+ <p class="text-white text-opacity-70 truncate mt-1">This is a reminder that our quarterly design workshop will be held tomorrow at 2 PM...</p>
235
+ </div>
236
+ <div class="flex-shrink-0 ml-4 flex space-x-2">
237
+ <button class="text-white text-opacity-70 hover:text-opacity-100">
238
+ <i data-feather="paperclip" class="w-4 h-4"></i>
239
+ </button>
240
+ <button class="text-white text-opacity-70 hover:text-opacity-100">
241
+ <i data-feather="archive" class="w-4 h-4"></i>
242
+ </button>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Email 4 -->
248
+ <div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300">
249
+ <div class="flex items-start">
250
+ <div class="flex-shrink-0 mr-4">
251
+ <div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
252
+ <span class="text-white font-medium">SP</span>
253
+ </div>
254
+ </div>
255
+ <div class="flex-1 min-w-0">
256
+ <div class="flex items-center justify-between">
257
+ <h3 class="text-white font-medium truncate">Sarah Parker</h3>
258
+ <div class="flex items-center space-x-3">
259
+ <span class="text-white text-opacity-70 text-sm">Oct 11</span>
260
+ <button class="text-white text-opacity-70 hover:text-opacity-100">
261
+ <i data-feather="star" class="w-4 h-4"></i>
262
+ </button>
263
+ </div>
264
+ </div>
265
+ <p class="text-white text-opacity-90 font-medium truncate mt-1">Meeting Notes - Product Launch</p>
266
+ <p class="text-white text-opacity-70 truncate mt-1">Here are the notes from yesterday's meeting regarding the upcoming product launch...</p>
267
+ </div>
268
+ <div class="flex-shrink-0 ml-4 flex space-x-2">
269
+ <button class="text-white text-opacity-70 hover:text-opacity-100">
270
+ <i data-feather="paperclip" class="w-4 h-4"></i>
271
+ </button>
272
+ <button class="text-white text-opacity-70 hover:text-opacity-100">
273
+ <i data-feather="archive" class="w-4 h-4"></i>
274
+ </button>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </main>
281
+ </div>
282
+ </div>
283
+
284
+ <script>
285
+ // Initialize Feather Icons
286
+ feather.replace();
287
+
288
+ // Initialize Vanta.js Background
289
+ VANTA.GLOBE({
290
+ el: "#vanta-bg",
291
+ mouseControls: true,
292
+ touchControls: true,
293
+ gyroControls: false,
294
+ minHeight: 200.00,
295
+ minWidth: 200.00,
296
+ scale: 1.00,
297
+ scaleMobile: 1.00,
298
+ color: 0x667eea,
299
+ color2: 0x764ba2,
300
+ backgroundColor: 0x0,
301
+ size: 1.00
302
+ });
303
+
304
+ // Add hover effects to email cards
305
+ document.querySelectorAll('.email-card').forEach(card => {
306
+ card.addEventListener('mouseenter', () => {
307
+ card.style.transform = 'translateY(-2px)';
308
+ });
309
+
310
+ card.addEventListener('mouseleave', () => {
311
+ card.style.transform = 'translateY(0)';
312
+ });
313
+ });
314
+ </script>
315
+ </body>
316
  </html>