Hugging Face's logo

Spaces:
giggro
/
jojo
Running

App Files Community
giggro commited on
Commit
207ea12
·
verified ·
1 Parent(s): 08a2b5d

We need to fetch real data - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +699 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Jojo
3
- emoji: 😻
4
- colorFrom: pink
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: jojo
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
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,699 @@
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>MyCommVault - Personal Data Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ }
14
+ .active-tab {
15
+ border-bottom: 3px solid #3b82f6;
16
+ color: #3b82f6;
17
+ font-weight: 600;
18
+ }
19
+ .incoming-call {
20
+ background-color: rgba(16, 185, 129, 0.1);
21
+ }
22
+ .outgoing-call {
23
+ background-color: rgba(59, 130, 246, 0.1);
24
+ }
25
+ .missed-call {
26
+ background-color: rgba(239, 68, 68, 0.1);
27
+ }
28
+ .message-preview {
29
+ display: -webkit-box;
30
+ -webkit-line-clamp: 2;
31
+ -webkit-box-orient: vertical;
32
+ overflow: hidden;
33
+ }
34
+ @media (max-width: 640px) {
35
+ .stat-card {
36
+ width: 100%;
37
+ }
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
42
+ <div class="container mx-auto px-4 py-6">
43
+ <!-- Header -->
44
+ <header class="flex justify-between items-center mb-8">
45
+ <div class="flex items-center">
46
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
47
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
48
+ </svg>
49
+ <h1 class="text-2xl font-bold ml-2">MyComm<span class="text-blue-500">Vault</span></h1>
50
+ </div>
51
+ <div class="flex items-center space-x-2">
52
+ <div class="relative">
53
+ <input type="email" id="gmail-account" placeholder="your.email@gmail.com" class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 w-64">
54
+ </div>
55
+ <button id="gmail-login" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
56
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
57
+ <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
58
+ </svg>
59
+ Connect Gmail
60
+ </button>
61
+ </div>
62
+ </header>
63
+
64
+ <!-- Navigation Tabs -->
65
+ <div class="border-b border-gray-700 mb-6">
66
+ <nav class="flex space-x-8 overflow-x-auto">
67
+ <button onclick="showSection('inbox')" id="inbox-tab" class="active-tab py-3 px-1 font-medium text-sm whitespace-nowrap">Inbox</button>
68
+ <button onclick="showSection('call-history')" id="call-history-tab" class="py-3 px-1 font-medium text-sm whitespace-nowrap text-gray-400 hover:text-gray-300">Call History</button>
69
+ <button onclick="showSection('messages')" id="messages-tab" class="py-3 px-1 font-medium text-sm whitespace-nowrap text-gray-400 hover:text-gray-300">Messages</button>
70
+ <button onclick="showSection('statistics')" id="statistics-tab" class="py-3 px-1 font-medium text-sm whitespace-nowrap text-gray-400 hover:text-gray-300">Statistics</button>
71
+ </nav>
72
+ </div>
73
+
74
+ <!-- Main Content -->
75
+ <main>
76
+ <!-- Inbox Section -->
77
+ <section id="inbox" class="section-content">
78
+ <div class="mb-4 flex flex-col md:flex-row md:items-center justify-between">
79
+ <h2 class="text-xl font-semibold mb-2 md:mb-0">Email Inbox</h2>
80
+ <div class="flex space-x-2">
81
+ <div class="relative">
82
+ <input type="text" placeholder="Search sender..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-64">
83
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
84
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
85
+ </svg>
86
+ </div>
87
+ <select class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
88
+ <option>All Dates</option>
89
+ <option>Today</option>
90
+ <option>Last 7 Days</option>
91
+ <option>This Month</option>
92
+ </select>
93
+ </div>
94
+ </div>
95
+
96
+ <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700">
97
+ <div class="overflow-x-auto">
98
+ <table class="min-w-full divide-y divide-gray-700">
99
+ <thead class="bg-gray-750">
100
+ <tr>
101
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">From</th>
102
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Subject</th>
103
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date</th>
104
+ </tr>
105
+ </thead>
106
+ <tbody class="bg-gray-800 divide-y divide-gray-700">
107
+ <tr class="hover:bg-gray-750 cursor-pointer">
108
+ <td class="px-6 py-4 whitespace-nowrap">
109
+ <div class="flex items-center">
110
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">JD</div>
111
+ <div class="ml-4">
112
+ <div class="text-sm font-medium">John Doe</div>
113
+ <div class="text-sm text-gray-400">john.doe@example.com</div>
114
+ </div>
115
+ </div>
116
+ </td>
117
+ <td class="px-6 py-4 whitespace-nowrap">
118
+ <div class="text-sm font-medium">Meeting tomorrow at 10 AM</div>
119
+ <div class="text-sm text-gray-400">Hi there, let's discuss the project progress...</div>
120
+ </td>
121
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Today, 09:42 AM</td>
122
+ </tr>
123
+ <tr class="hover:bg-gray-750 cursor-pointer">
124
+ <td class="px-6 py-4 whitespace-nowrap">
125
+ <div class="flex items-center">
126
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 flex items-center justify-center text-white font-semibold">AS</div>
127
+ <div class="ml-4">
128
+ <div class="text-sm font-medium">Amazon Shopping</div>
129
+ <div class="text-sm text-gray-400">no-reply@amazon.com</div>
130
+ </div>
131
+ </div>
132
+ </td>
133
+ <td class="px-6 py-4 whitespace-nowrap">
134
+ <div class="text-sm font-medium">Your Amazon order #12345 has shipped</div>
135
+ <div class="text-sm text-gray-400">Your recent order is on its way...</div>
136
+ </td>
137
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Yesterday, 3:15 PM</td>
138
+ </tr>
139
+ <tr class="hover:bg-gray-750 cursor-pointer">
140
+ <td class="px-6 py-4 whitespace-nowrap">
141
+ <div class="flex items-center">
142
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-semibold">LI</div>
143
+ <div class="ml-4">
144
+ <div class="text-sm font-medium">LinkedIn</div>
145
+ <div class="text-sm text-gray-400">news@linkedin.com</div>
146
+ </div>
147
+ </div>
148
+ </td>
149
+ <td class="px-6 py-4 whitespace-nowrap">
150
+ <div class="text-sm font-medium">5 new connection requests</div>
151
+ <div class="text-sm text-gray-400">You have 5 new connection requests waiting...</div>
152
+ </td>
153
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 12, 2023</td>
154
+ </tr>
155
+ <tr class="hover:bg-gray-750 cursor-pointer">
156
+ <td class="px-6 py-4 whitespace-nowrap">
157
+ <div class="flex items-center">
158
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-500 flex items-center justify-center text-white font-semibold">TW</div>
159
+ <div class="ml-4">
160
+ <div class="text-sm font-medium">Twitter</div>
161
+ <div class="text-sm text-gray-400">info@twitter.com</div>
162
+ </div>
163
+ </div>
164
+ </td>
165
+ <td class="px-6 py-4 whitespace-nowrap">
166
+ <div class="text-sm font-medium">Your weekly Twitter digest</div>
167
+ <div class="text-sm text-gray-400">Here's what you missed on Twitter this week...</div>
168
+ </td>
169
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 10, 2023</td>
170
+ </tr>
171
+ <tr class="hover:bg-gray-750 cursor-pointer">
172
+ <td class="px-6 py-4 whitespace-nowrap">
173
+ <div class="flex items-center">
174
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-500 flex items-center justify-center text-white font-semibold">YT</div>
175
+ <div class="ml-4">
176
+ <div class="text-sm font-medium">YouTube</div>
177
+ <div class="text-sm text-gray-400">no-reply@youtube.com</div>
178
+ </div>
179
+ </div>
180
+ </td>
181
+ <td class="px-6 py-4 whitespace-nowrap">
182
+ <div class="text-sm font-medium">New videos from channels you follow</div>
183
+ <div class="text-sm text-gray-400">Check out these new uploads from your subscriptions...</div>
184
+ </td>
185
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 8, 2023</td>
186
+ </tr>
187
+ <tr class="hover:bg-gray-750 cursor-pointer">
188
+ <td class="px-6 py-4 whitespace-nowrap">
189
+ <div class="flex items-center">
190
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-semibold">GS</div>
191
+ <div class="ml-4">
192
+ <div class="text-sm font-medium">GitHub Support</div>
193
+ <div class="text-sm text-gray-400">support@github.com</div>
194
+ </div>
195
+ </div>
196
+ </td>
197
+ <td class="px-6 py-4 whitespace-nowrap">
198
+ <div class="text-sm font-medium">Your repository access has been updated</div>
199
+ <div class="text-sm text-gray-400">You've been granted write access to the project repository...</div>
200
+ </td>
201
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 7, 2023</td>
202
+ </tr>
203
+ </tbody>
204
+ </table>
205
+ </div>
206
+ </div>
207
+ </section>
208
+
209
+ <!-- Call History Section -->
210
+ <section id="call-history" class="section-content hidden">
211
+ <div class="mb-4 flex flex-col md:flex-row md:items-center justify-between">
212
+ <h2 class="text-xl font-semibold mb-2 md:mb-0">Call History</h2>
213
+ <div class="flex space-x-2">
214
+ <div class="relative">
215
+ <input type="text" placeholder="Search contacts..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-64">
216
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
217
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
218
+ </svg>
219
+ </div>
220
+ <select class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
221
+ <option>All Calls</option>
222
+ <option>Incoming</option>
223
+ <option>Outgoing</option>
224
+ <option>Missed</option>
225
+ </select>
226
+ </div>
227
+ </div>
228
+
229
+ <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700">
230
+ <div class="overflow-x-auto">
231
+ <table class="min-w-full divide-y divide-gray-700">
232
+ <thead class="bg-gray-750">
233
+ <tr>
234
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Type</th>
235
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Contact</th>
236
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date/Time</th>
237
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Duration</th>
238
+ </tr>
239
+ </thead>
240
+ <tbody class="bg-gray-800 divide-y divide-gray-700">
241
+ <tr class="incoming-call hover:bg-gray-750 cursor-pointer">
242
+ <td class="px-6 py-4 whitespace-nowrap">
243
+ <div class="flex items-center">
244
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
245
+ <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
246
+ </svg>
247
+ <span class="text-sm">Incoming</span>
248
+ </div>
249
+ </td>
250
+ <td class="px-6 py-4 whitespace-nowrap">
251
+ <div class="flex items-center">
252
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">JD</div>
253
+ <div class="ml-4">
254
+ <div class="text-sm font-medium">John Doe</div>
255
+ <div class="text-sm text-gray-400">+1 (555) 123-4567</div>
256
+ </div>
257
+ </div>
258
+ </td>
259
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Today, 11:23 AM</td>
260
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">5:32</td>
261
+ </tr>
262
+ <tr class="outgoing-call hover:bg-gray-750 cursor-pointer">
263
+ <td class="px-6 py-4 whitespace-nowrap">
264
+ <div class="flex items-center">
265
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
266
+ <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
267
+ </svg>
268
+ <span class="text-sm">Outgoing</span>
269
+ </div>
270
+ </td>
271
+ <td class="px-6 py-4 whitespace-nowrap">
272
+ <div class="flex items-center">
273
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-semibold">MS</div>
274
+ <div class="ml-4">
275
+ <div class="text-sm font-medium">Mom</div>
276
+ <div class="text-sm text-gray-400">+1 (555) 987-6543</div>
277
+ </div>
278
+ </div>
279
+ </td>
280
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Today, 09:15 AM</td>
281
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">12:45</td>
282
+ </tr>
283
+ <tr class="missed-call hover:bg-gray-750 cursor-pointer">
284
+ <td class="px-6 py-4 whitespace-nowrap">
285
+ <div class="flex items-center">
286
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
287
+ <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
288
+ </svg>
289
+ <span class="text-sm">Missed</span>
290
+ </div>
291
+ </td>
292
+ <td class="px-6 py-4 whitespace-nowrap">
293
+ <div class="flex items-center">
294
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 flex items-center justify-center text-white font-semibold">WB</div>
295
+ <div class="ml-4">
296
+ <div class="text-sm font-medium">Work Boss</div>
297
+ <div class="text-sm text-gray-400">+1 (555) 789-0123</div>
298
+ </div>
299
+ </div>
300
+ </td>
301
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Yesterday, 4:30 PM</td>
302
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">--</td>
303
+ </tr>
304
+ <tr class="incoming-call hover:bg-gray-750 cursor-pointer">
305
+ <td class="px-6 py-4 whitespace-nowrap">
306
+ <div class="flex items-center">
307
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
308
+ <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
309
+ </svg>
310
+ <span class="text-sm">Incoming</span>
311
+ </div>
312
+ </td>
313
+ <td class="px-6 py-4 whitespace-nowrap">
314
+ <div class="flex items-center">
315
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-500 flex items-center justify-center text-white font-semibold">DS</div>
316
+ <div class="ml-4">
317
+ <div class="text-sm font-medium">Dr. Smith</div>
318
+ <div class="text-sm text-gray-400">+1 (555) 456-7890</div>
319
+ </div>
320
+ </div>
321
+ </td>
322
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Yesterday, 2:15 PM</td>
323
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">8:12</td>
324
+ </tr>
325
+ <tr class="outgoing-call hover:bg-gray-750 cursor-pointer">
326
+ <td class="px-6 py-4 whitespace-nowrap">
327
+ <div class="flex items-center">
328
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
329
+ <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
330
+ </svg>
331
+ <span class="text-sm">Outgoing</span>
332
+ </div>
333
+ </td>
334
+ <td class="px-6 py-4 whitespace-nowrap">
335
+ <div class="flex items-center">
336
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-500 flex items-center justify-center text-white font-semibold">PS</div>
337
+ <div class="ml-4">
338
+ <div class="text-sm font-medium">Pizza Shop</div>
339
+ <div class="text-sm text-gray-400">+1 (555) 321-6547</div>
340
+ </div>
341
+ </div>
342
+ </td>
343
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 12, 2023, 6:45 PM</td>
344
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">3:21</td>
345
+ </tr>
346
+ </tbody>
347
+ </table>
348
+ </div>
349
+ </div>
350
+ </section>
351
+
352
+ <!-- Messages Section -->
353
+ <section id="messages" class="section-content hidden">
354
+ <div class="mb-4 flex flex-col md:flex-row md:items-center justify-between">
355
+ <h2 class="text-xl font-semibold mb-2 md:mb-0">Text Messages</h2>
356
+ <div class="flex space-x-2">
357
+ <div class="relative">
358
+ <input type="text" placeholder="Search messages..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-64">
359
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
360
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
361
+ </svg>
362
+ </div>
363
+ <select class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
364
+ <option>All Messages</option>
365
+ <option>Today</option>
366
+ <option>Last 7 Days</option>
367
+ <option>Unread</option>
368
+ </select>
369
+ </div>
370
+ </div>
371
+
372
+ <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700">
373
+ <div class="overflow-x-auto">
374
+ <table class="min-w-full divide-y divide-gray-700">
375
+ <thead class="bg-gray-750">
376
+ <tr>
377
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Contact</th>
378
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Message Preview</th>
379
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date/Time</th>
380
+ </tr>
381
+ </thead>
382
+ <tbody class="bg-gray-800 divide-y divide-gray-700">
383
+ <tr class="hover:bg-gray-750 cursor-pointer">
384
+ <td class="px-6 py-4 whitespace-nowrap">
385
+ <div class="flex items-center">
386
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">JD</div>
387
+ <div class="ml-4">
388
+ <div class="text-sm font-medium">John Doe</div>
389
+ <div class="text-sm text-gray-400">+1 (555) 123-4567</div>
390
+ </div>
391
+ </div>
392
+ </td>
393
+ <td class="px-6 py-4">
394
+ <div class="text-sm font-medium">Meeting at 2 PM tomorrow</div>
395
+ <div class="text-sm text-gray-400 message-preview">Hey, just confirming our meeting tomorrow at the coffee shop. I'll bring the project documents we discussed last week.</div>
396
+ </td>
397
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Today, 1:15 PM</td>
398
+ </tr>
399
+ <tr class="hover:bg-gray-750 cursor-pointer">
400
+ <td class="px-6 py-4 whitespace-nowrap">
401
+ <div class="flex items-center">
402
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 flex items-center justify-center text-white font-semibold">AM</div>
403
+ <div class="ml-4">
404
+ <div class="text-sm font-medium">Amazon</div>
405
+ <div class="text-sm text-gray-400">AMAZON</div>
406
+ </div>
407
+ </div>
408
+ </td>
409
+ <td class="px-6 py-4">
410
+ <div class="text-sm font-medium">Your package is out for delivery</div>
411
+ <div class="text-sm text-gray-400 message-preview">Your Amazon package #12345 is out for delivery today. Track your package: https://amzn.com/track/12345</div>
412
+ </td>
413
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Today, 9:30 AM</td>
414
+ </tr>
415
+ <tr class="hover:bg-gray-750 cursor-pointer">
416
+ <td class="px-6 py-4 whitespace-nowrap">
417
+ <div class="flex items-center">
418
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-semibold">MS</div>
419
+ <div class="ml-4">
420
+ <div class="text-sm font-medium">Mom</div>
421
+ <div class="text-sm text-gray-400">+1 (555) 987-6543</div>
422
+ </div>
423
+ </div>
424
+ </td>
425
+ <td class="px-6 py-4">
426
+ <div class="text-sm font-medium">Family dinner this weekend</div>
427
+ <div class="text-sm text-gray-400 message-preview">Hi honey! Just reminding you about family dinner this Sunday at 6 PM. Your aunt and uncle will be joining us too.</div>
428
+ </td>
429
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Yesterday, 7:45 PM</td>
430
+ </tr>
431
+ <tr class="hover:bg-gray-750 cursor-pointer">
432
+ <td class="px-6 py-4 whitespace-nowrap">
433
+ <div class="flex items-center">
434
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-500 flex items-center justify-center text-white font-semibold">UB</div>
435
+ <div class="ml-4">
436
+ <div class="text-sm font-medium">Uber</div>
437
+ <div class="text-sm text-gray-400">UBER</div>
438
+ </div>
439
+ </div>
440
+ </td>
441
+ <td class="px-6 py-4">
442
+ <div class="text-sm font-medium">Your ride receipt</div>
443
+ <div class="text-sm text-gray-400 message-preview">Thanks for riding with Uber. Your trip on Mar 12 cost $14.25. View receipt: https://uber.com/receipt/12345</div>
444
+ </td>
445
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 12, 2023, 8:30 PM</td>
446
+ </tr>
447
+ <tr class="hover:bg-gray-750 cursor-pointer">
448
+ <td class="px-6 py-4 whitespace-nowrap">
449
+ <div class="flex items-center">
450
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-500 flex items-center justify-center text-white font-semibold">WB</div>
451
+ <div class="ml-4">
452
+ <div class="text-sm font-medium">Work Boss</div>
453
+ <div class="text-sm text-gray-400">+1 (555) 789-0123</div>
454
+ </div>
455
+ </div>
456
+ </td>
457
+ <td class="px-6 py-4">
458
+ <div class="text-sm font-medium">Project deadline moved</div>
459
+ <div class="text-sm text-gray-400 message-preview">Important: The deadline for the current project has been moved to next Friday. Please adjust your schedule accordingly.</div>
460
+ </td>
461
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">Mar 10, 2023, 4:20 PM</td>
462
+ </tr>
463
+ </tbody>
464
+ </table>
465
+ </div>
466
+ </div>
467
+ </section>
468
+
469
+ <!-- Statistics Section -->
470
+ <section id="statistics" class="section-content hidden">
471
+ <h2 class="text-xl font-semibold mb-6">Communication Statistics</h2>
472
+
473
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
474
+ <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
475
+ <h3 class="text-lg font-medium mb-4">Emails Received (Last 10 Days)</h3>
476
+ <canvas id="emailChart" height="250"></canvas>
477
+ </div>
478
+ <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
479
+ <h3 class="text-lg font-medium mb-4">Call Duration (Last 10 Days)</h3>
480
+ <canvas id="callChart" height="250"></canvas>
481
+ </div>
482
+ </div>
483
+
484
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
485
+ <div class="stat-card bg-gray-800 p-4 rounded-lg border border-gray-700">
486
+ <div class="flex items-center">
487
+ <div class="p-3 rounded-full bg-blue-500/10 mr-4">
488
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
489
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
490
+ </svg>
491
+ </div>
492
+ <div>
493
+ <p class="text-sm text-gray-400">Emails Today</p>
494
+ <p class="text-2xl font-semibold">24</p>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ <div class="stat-card bg-gray-800 p-4 rounded-lg border border-gray-700">
499
+ <div class="flex items-center">
500
+ <div class="p-3 rounded-full bg-green-500/10 mr-4">
501
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
502
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
503
+ </svg>
504
+ </div>
505
+ <div>
506
+ <p class="text-sm text-gray-400">Call Time Today</p>
507
+ <p class="text-2xl font-semibold">38 min</p>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ <div class="stat-card bg-gray-800 p-4 rounded-lg border border-gray-700">
512
+ <div class="flex items-center">
513
+ <div class="p-3 rounded-full bg-purple-500/10 mr-4">
514
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
515
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
516
+ </svg>
517
+ </div>
518
+ <div>
519
+ <p class="text-sm text-gray-400">Messages Today</p>
520
+ <p class="text-2xl font-semibold">12</p>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ <div class="stat-card bg-gray-800 p-4 rounded-lg border border-gray-700">
525
+ <div class="flex items-center">
526
+ <div class="p-3 rounded-full bg-yellow-500/10 mr-4">
527
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
528
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
529
+ </svg>
530
+ </div>
531
+ <div>
532
+ <p class="text-sm text-gray-400">Avg. Response Time</p>
533
+ <p class="text-2xl font-semibold">2.4 hrs</p>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </section>
539
+ </main>
540
+ </div>
541
+
542
+ <script>
543
+ // Tab switching functionality
544
+ function showSection(sectionId) {
545
+ // Hide all sections
546
+ document.querySelectorAll('.section-content').forEach(section => {
547
+ section.classList.add('hidden');
548
+ });
549
+
550
+ // Remove active class from all tabs
551
+ document.querySelectorAll('nav button').forEach(tab => {
552
+ tab.classList.remove('active-tab');
553
+ tab.classList.add('text-gray-400', 'hover:text-gray-300');
554
+ });
555
+
556
+ // Show selected section
557
+ document.getElementById(sectionId).classList.remove('hidden');
558
+
559
+ // Add active class to selected tab
560
+ document.getElementById(`${sectionId}-tab`).classList.add('active-tab');
561
+ document.getElementById(`${sectionId}-tab`).classList.remove('text-gray-400', 'hover:text-gray-300');
562
+
563
+ // If showing statistics, render charts
564
+ if (sectionId === 'statistics') {
565
+ renderCharts();
566
+ }
567
+ }
568
+
569
+ // Mock Gmail API connection
570
+ document.getElementById('gmail-login').addEventListener('click', function() {
571
+ this.innerHTML = `
572
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor">
573
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
574
+ </svg>
575
+ Connecting...
576
+ `;
577
+
578
+ setTimeout(() => {
579
+ this.innerHTML = `
580
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500" viewBox="0 0 20 20" fill="currentColor">
581
+ <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
582
+ </svg>
583
+ Gmail Connected
584
+ `;
585
+ this.classList.remove('bg-blue-600', 'hover:bg-blue-700');
586
+ this.classList.add('bg-green-600', 'hover:bg-green-700');
587
+
588
+ // Simulate fetching emails
589
+ const email = document.getElementById('gmail-account').value || 'your Gmail account';
590
+ setTimeout(() => {
591
+ alert(`Successfully fetched 24 emails from ${email}`);
592
+ }, 500);
593
+ }, 2000);
594
+ });
595
+
596
+ // Render charts for statistics section
597
+ function renderCharts() {
598
+ // Email Chart
599
+ const emailCtx = document.getElementById('emailChart').getContext('2d');
600
+ const emailChart = new Chart(emailCtx, {
601
+ type: 'bar',
602
+ data: {
603
+ labels: ['Mar 3', 'Mar 4', 'Mar 5', 'Mar 6', 'Mar 7', 'Mar 8', 'Mar 9', 'Mar 10', 'Mar 11', 'Mar 12'],
604
+ datasets: [{
605
+ label: 'Emails Received',
606
+ data: [12, 19, 15, 8, 11, 14, 17, 22, 18, 24],
607
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
608
+ borderColor: 'rgba(59, 130, 246, 1)',
609
+ borderWidth: 1
610
+ }]
611
+ },
612
+ options: {
613
+ responsive: true,
614
+ maintainAspectRatio: false,
615
+ scales: {
616
+ y: {
617
+ beginAtZero: true,
618
+ grid: {
619
+ color: 'rgba(55, 65, 81, 0.5)'
620
+ },
621
+ ticks: {
622
+ color: 'rgba(156, 163, 175, 1)'
623
+ }
624
+ },
625
+ x: {
626
+ grid: {
627
+ color: 'rgba(55, 65, 81, 0.5)'
628
+ },
629
+ ticks: {
630
+ color: 'rgba(156, 163, 175, 1)'
631
+ }
632
+ }
633
+ },
634
+ plugins: {
635
+ legend: {
636
+ labels: {
637
+ color: 'rgba(209, 213, 219, 1)'
638
+ }
639
+ }
640
+ }
641
+ }
642
+ });
643
+
644
+ // Call Chart
645
+ const callCtx = document.getElementById('callChart').getContext('2d');
646
+ const callChart = new Chart(callCtx, {
647
+ type: 'line',
648
+ data: {
649
+ labels: ['Mar 3', 'Mar 4', 'Mar 5', 'Mar 6', 'Mar 7', 'Mar 8', 'Mar 9', 'Mar 10', 'Mar 11', 'Mar 12'],
650
+ datasets: [{
651
+ label: 'Call Duration (minutes)',
652
+ data: [25, 32, 18, 27, 15, 22, 30, 28, 35, 38],
653
+ backgroundColor: 'rgba(16, 185, 129, 0.2)',
654
+ borderColor: 'rgba(16, 185, 129, 1)',
655
+ borderWidth: 2,
656
+ tension: 0.1,
657
+ fill: true
658
+ }]
659
+ },
660
+ options: {
661
+ responsive: true,
662
+ maintainAspectRatio: false,
663
+ scales: {
664
+ y: {
665
+ beginAtZero: true,
666
+ grid: {
667
+ color: 'rgba(55, 65, 81, 0.5)'
668
+ },
669
+ ticks: {
670
+ color: 'rgba(156, 163, 175, 1)'
671
+ }
672
+ },
673
+ x: {
674
+ grid: {
675
+ color: 'rgba(55, 65, 81, 0.5)'
676
+ },
677
+ ticks: {
678
+ color: 'rgba(156, 163, 175, 1)'
679
+ }
680
+ }
681
+ },
682
+ plugins: {
683
+ legend: {
684
+ labels: {
685
+ color: 'rgba(209, 213, 219, 1)'
686
+ }
687
+ }
688
+ }
689
+ }
690
+ });
691
+ }
692
+
693
+ // Initialize the page with Inbox section visible
694
+ document.addEventListener('DOMContentLoaded', function() {
695
+ showSection('inbox');
696
+ });
697
+ </script>
698
+ <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=giggro/jojo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
699
+ </html>