Hugging Face's logo

Spaces:
DestroXyz
/
tangent-data-base
Running

App Files Community
DestroXyz commited on
Commit
0b07dcd
·
verified ·
1 Parent(s): 60b7784

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +600 -243
  2. prompts.txt +2 -1
index.html CHANGED
@@ -1,49 +1,94 @@
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>NexusAI - Internet Insights Platform</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
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
 
 
 
 
 
 
 
 
 
 
 
 
12
  body {
13
  font-family: 'Inter', sans-serif;
14
- background-color: #f5f7fa;
 
15
  }
16
 
17
  .gradient-bg {
18
- background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
19
  }
20
 
21
- .survey-card {
22
  transition: all 0.3s ease;
23
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
24
  }
25
 
26
- .survey-card:hover {
27
  transform: translateY(-5px);
28
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
29
  }
30
 
31
- .progress-bar {
32
- height: 8px;
33
- border-radius: 4px;
34
- background-color: #e0e7ff;
35
  }
36
 
37
- .progress-fill {
38
- height: 100%;
39
- border-radius: 4px;
40
- background: linear-gradient(90deg, #4f46e5 0%, #a855f7 100%);
41
- transition: width 0.5s ease;
 
 
 
 
 
 
 
 
 
 
 
42
  }
43
 
44
- .option-selected {
45
- background-color: #e0e7ff;
46
- border-color: #818cf8;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  }
48
 
49
  .pulse-animation {
@@ -52,296 +97,608 @@
52
 
53
  @keyframes pulse {
54
  0% {
55
- box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
56
  }
57
  70% {
58
- box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
59
  }
60
  100% {
61
- box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
62
  }
63
  }
64
 
65
- .data-visualization {
66
- height: 200px;
67
- background: linear-gradient(to top, #e0e7ff, #f5f7fa);
68
- border-radius: 12px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  }
70
  </style>
71
  </head>
72
  <body>
73
- <div class="min-h-screen">
74
- <!-- Header -->
75
- <header class="gradient-bg text-white">
76
- <div class="container mx-auto px-4 py-6">
77
- <div class="flex justify-between items-center">
78
- <div class="flex items-center space-x-2">
79
- <i class="fas fa-brain text-3xl"></i>
80
- <h1 class="text-2xl font-bold">Nexus<span class="font-light">AI</span></h1>
 
 
 
 
 
 
 
 
 
 
 
 
81
  </div>
82
- <div class="flex items-center space-x-4">
83
- <button class="px-4 py-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition">
84
- <i class="fas fa-user mr-2"></i> Sign In
85
- </button>
86
- <button class="px-4 py-2 rounded-full bg-white text-indigo-600 font-medium hover:bg-opacity-90 transition">
87
- Get Started
88
- </button>
 
 
89
  </div>
90
  </div>
91
- <div class="mt-12 mb-16 text-center">
92
- <h2 class="text-4xl font-bold mb-4">Internet Intelligence Survey Platform</h2>
93
- <p class="text-xl max-w-2xl mx-auto opacity-90">
94
- Discover insights from billions of data points across the web, presented in interactive survey format.
95
- </p>
96
- </div>
97
  </div>
98
- </header>
 
99
 
100
- <!-- Main Content -->
101
- <main class="container mx-auto px-4 py-12 -mt-10">
102
- <!-- Survey Container -->
103
- <div class="bg-white rounded-xl shadow-xl overflow-hidden max-w-4xl mx-auto">
104
- <!-- Progress Bar -->
105
- <div class="px-6 pt-6">
106
- <div class="flex justify-between items-center mb-2">
107
- <span class="text-sm font-medium text-gray-600">Question 3 of 10</span>
108
- <span class="text-sm font-medium text-indigo-600">30% Complete</span>
109
- </div>
110
- <div class="progress-bar">
111
- <div class="progress-fill" style="width: 30%"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  </div>
113
  </div>
114
 
115
- <!-- Current Question -->
116
- <div class="p-6">
117
- <h3 class="text-2xl font-semibold mb-6">Based on global internet trends, which of these technologies do you believe will have the most significant impact in the next 5 years?</h3>
118
-
119
- <!-- AI Generated Context -->
120
- <div class="bg-blue-50 border border-blue-100 rounded-lg p-4 mb-6">
121
- <div class="flex items-start">
122
- <div class="flex-shrink-0 mt-1">
123
- <i class="fas fa-robot text-blue-500"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  </div>
125
- <div class="ml-3">
126
- <p class="text-sm text-blue-700">
127
- <span class="font-medium">AI Insight:</span> Our analysis of 2.3M articles and research papers shows AI and Quantum Computing are currently the most discussed emerging technologies, with AI receiving 58% more mentions in Q2 2023 compared to Q1.
128
- </p>
 
 
129
  </div>
130
  </div>
131
  </div>
132
-
133
- <!-- Options -->
134
- <div class="space-y-4">
135
- <div class="option-item p-4 border rounded-lg cursor-pointer transition hover:bg-gray-50 option-selected">
136
- <div class="flex items-center">
137
- <div class="flex-shrink-0 h-5 w-5 rounded-full border-2 border-indigo-500 flex items-center justify-center mr-3">
138
- <div class="h-2 w-2 rounded-full bg-indigo-500"></div>
139
- </div>
140
- <div>
141
- <p class="font-medium">Artificial Intelligence & Machine Learning</p>
142
- <p class="text-sm text-gray-500 mt-1">Selected by 42% of respondents</p>
 
 
 
 
 
 
 
 
 
 
 
 
143
  </div>
 
 
 
144
  </div>
145
  </div>
146
-
147
- <div class="option-item p-4 border rounded-lg cursor-pointer transition hover:bg-gray-50">
148
- <div class="flex items-center">
149
- <div class="flex-shrink-0 h-5 w-5 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3"></div>
 
 
 
 
 
 
150
  <div>
151
- <p class="font-medium">Quantum Computing</p>
152
- <p class="text-sm text-gray-500 mt-1">Selected by 28% of respondents</p>
153
  </div>
154
  </div>
155
- </div>
156
-
157
- <div class="option-item p-4 border rounded-lg cursor-pointer transition hover:bg-gray-50">
158
- <div class="flex items-center">
159
- <div class="flex-shrink-0 h-5 w-5 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3"></div>
160
- <div>
161
- <p class="font-medium">Extended Reality (AR/VR/MR)</p>
162
- <p class="text-sm text-gray-500 mt-1">Selected by 15% of respondents</p>
 
 
 
 
163
  </div>
164
  </div>
165
- </div>
166
-
167
- <div class="option-item p-4 border rounded-lg cursor-pointer transition hover:bg-gray-50">
168
- <div class="flex items-center">
169
- <div class="flex-shrink-0 h-5 w-5 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3"></div>
170
- <div>
171
- <p class="font-medium">Biotechnology & Genetic Engineering</p>
172
- <p class="text-sm text-gray-500 mt-1">Selected by 10% of respondents</p>
 
173
  </div>
174
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
175
  </div>
176
-
177
- <div class="option-item p-4 border rounded-lg cursor-pointer transition hover:bg-gray-50">
178
- <div class="flex items-center">
179
- <div class="flex-shrink-0 h-5 w-5 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3"></div>
 
 
 
180
  <div>
181
- <p class="font-medium">Other (please specify)</p>
 
182
  </div>
183
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
184
  </div>
185
  </div>
186
-
187
- <!-- Navigation -->
188
- <div class="flex justify-between mt-8">
189
- <button class="px-6 py-2 border rounded-lg text-gray-600 hover:bg-gray-50 transition">
190
- <i class="fas fa-arrow-left mr-2"></i> Previous
191
- </button>
192
- <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
193
- Next <i class="fas fa-arrow-right ml-2"></i>
194
- </button>
195
- </div>
196
  </div>
197
  </div>
198
 
199
- <!-- Data Visualization Section -->
200
- <div class="mt-16">
201
- <h3 class="text-2xl font-semibold mb-6 text-center">How Our AI Gathers Insights</h3>
202
-
203
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
204
- <div class="bg-white p-6 rounded-xl shadow-md survey-card">
205
- <div class="text-indigo-500 mb-4">
206
- <i class="fas fa-globe text-3xl"></i>
 
 
 
 
207
  </div>
208
- <h4 class="font-semibold text-lg mb-2">Web Crawling</h4>
209
- <p class="text-gray-600">Our AI scans millions of websites daily, analyzing content from news articles, research papers, and forums to identify emerging trends.</p>
210
- </div>
211
-
212
- <div class="bg-white p-6 rounded-xl shadow-md survey-card">
213
- <div class="text-indigo-500 mb-4">
214
- <i class="fas fa-chart-line text-3xl"></i>
215
  </div>
216
- <h4 class="font-semibold text-lg mb-2">Sentiment Analysis</h4>
217
- <p class="text-gray-600">Natural language processing evaluates public sentiment and discourse patterns across social media and comment sections.</p>
218
- </div>
219
-
220
- <div class="bg-white p-6 rounded-xl shadow-md survey-card">
221
- <div class="text-indigo-500 mb-4">
222
- <i class="fas fa-project-diagram text-3xl"></i>
223
  </div>
224
- <h4 class="font-semibold text-lg mb-2">Pattern Recognition</h4>
225
- <p class="text-gray-600">Machine learning algorithms detect correlations and emerging patterns across disparate data sources to predict future trends.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
226
  </div>
227
  </div>
228
 
229
- <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden max-w-4xl mx-auto">
230
- <div class="p-6">
231
- <h4 class="font-semibold text-lg mb-4">Current Technology Impact Analysis</h4>
232
- <div class="data-visualization p-4 flex items-end space-x-2">
233
- <div class="bg-indigo-500 w-full h-3/4 rounded-t flex items-end">
234
- <div class="bg-indigo-300 w-full h-1/2 rounded-t"></div>
 
 
 
 
 
235
  </div>
236
- <div class="bg-purple-500 w-full h-1/2 rounded-t"></div>
237
- <div class="bg-blue-400 w-full h-1/3 rounded-t"></div>
238
- <div class="bg-green-400 w-full h-1/4 rounded-t"></div>
239
- <div class="bg-yellow-400 w-full h-1/6 rounded-t"></div>
240
  </div>
241
- <div class="grid grid-cols-5 gap-4 mt-4 text-center text-sm">
242
- <div>AI/ML</div>
243
- <div>Quantum</div>
244
- <div>XR</div>
245
- <div>BioTech</div>
246
- <div>Other</div>
 
 
247
  </div>
248
  </div>
249
  </div>
250
  </div>
 
 
 
 
 
 
 
 
251
 
252
- <!-- Call to Action -->
253
- <div class="mt-16 gradient-bg rounded-xl p-8 text-white text-center max-w-4xl mx-auto pulse-animation">
254
- <h3 class="text-2xl font-semibold mb-4">Ready to uncover insights from the world's knowledge?</h3>
255
- <p class="mb-6 max-w-2xl mx-auto">Join thousands of researchers, analysts, and curious minds leveraging NexusAI's internet intelligence platform.</p>
256
- <button class="px-8 py-3 bg-white text-indigo-600 rounded-lg font-medium hover:bg-opacity-90 transition">
257
- Start Your Free Trial <i class="fas fa-arrow-right ml-2"></i>
258
- </button>
259
- </div>
260
- </main>
261
-
262
- <!-- Footer -->
263
- <footer class="bg-gray-900 text-white py-12">
264
- <div class="container mx-auto px-4">
265
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
266
- <div>
267
- <div class="flex items-center space-x-2 mb-4">
268
- <i class="fas fa-brain text-2xl text-indigo-400"></i>
269
- <h4 class="text-xl font-bold">Nexus<span class="font-light">AI</span></h4>
 
 
 
 
 
 
 
 
 
 
 
 
 
270
  </div>
271
- <p class="text-gray-400">Harnessing the power of artificial intelligence to surface insights from the global knowledge base.</p>
272
  </div>
273
- <div>
274
- <h5 class="font-semibold text-lg mb-4">Product</h5>
275
- <ul class="space-y-2">
276
- <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
277
- <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
278
- <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li>
279
- <li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li>
280
- </ul>
 
 
 
 
 
 
 
281
  </div>
282
- <div>
283
- <h5 class="font-semibold text-lg mb-4">Resources</h5>
284
- <ul class="space-y-2">
285
- <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
286
- <li><a href="#" class="text-gray-400 hover:text-white transition">Case Studies</a></li>
287
- <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
288
- <li><a href="#" class="text-gray-400 hover:text-white transition">Webinars</a></li>
289
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
290
  </div>
291
- <div>
292
- <h5 class="font-semibold text-lg mb-4">Company</h5>
293
- <ul class="space-y-2">
294
- <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
295
- <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
296
- <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy</a></li>
297
- <li><a href="#" class="text-gray-400 hover:text-white transition">Terms</a></li>
298
- </ul>
299
  </div>
300
- </div>
301
- <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
302
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 NexusAI. All rights reserved.</p>
303
- <div class="flex space-x-6">
304
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
305
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a>
306
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a>
307
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
308
  </div>
309
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
310
  </div>
311
- </footer>
312
  </div>
313
 
314
  <script>
315
- // Interactive survey functionality
316
- document.addEventListener('DOMContentLoaded', function() {
317
- const optionItems = document.querySelectorAll('.option-item');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
318
 
319
- optionItems.forEach(item => {
320
- item.addEventListener('click', function() {
321
- // Remove selected class from all options
322
- optionItems.forEach(opt => {
323
- opt.classList.remove('option-selected');
324
- const radio = opt.querySelector('.flex-shrink-0');
325
- radio.innerHTML = '';
326
- radio.classList.remove('border-indigo-500');
327
- radio.classList.add('border-gray-300');
328
- });
329
-
330
- // Add selected class to clicked option
331
- this.classList.add('option-selected');
332
- const radio = this.querySelector('.flex-shrink-0');
333
- radio.innerHTML = '<div class="h-2 w-2 rounded-full bg-indigo-500"></div>';
334
- radio.classList.remove('border-gray-300');
335
- radio.classList.add('border-indigo-500');
336
- });
337
- });
338
 
339
- // Simulate data loading animation
340
- setTimeout(() => {
341
- const visualization = document.querySelector('.data-visualization');
342
- visualization.classList.add('opacity-100');
343
- }, 500);
344
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
345
  </script>
346
  <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=DestroXyz/tangent-data-base" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
347
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GOn - Galeria Online</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
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
 
12
+ :root {
13
+ --primary: #16a34a;
14
+ --primary-light: #22c55e;
15
+ --primary-dark: #15803d;
16
+ --secondary: #86efac;
17
+ --background: #f0fdf4;
18
+ --card: #ffffff;
19
+ --text: #1c1917;
20
+ --text-light: #78716c;
21
+ }
22
+
23
  body {
24
  font-family: 'Inter', sans-serif;
25
+ background-color: var(--background);
26
+ color: var(--text);
27
  }
28
 
29
  .gradient-bg {
30
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
31
  }
32
 
33
+ .album-card {
34
  transition: all 0.3s ease;
35
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
36
  }
37
 
38
+ .album-card:hover {
39
  transform: translateY(-5px);
40
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
41
  }
42
 
43
+ .btn-primary {
44
+ background-color: var(--primary);
45
+ color: white;
 
46
  }
47
 
48
+ .btn-primary:hover {
49
+ background-color: var(--primary-dark);
50
+ }
51
+
52
+ .btn-outline {
53
+ border: 1px solid var(--primary);
54
+ color: var(--primary);
55
+ }
56
+
57
+ .btn-outline:hover {
58
+ background-color: var(--primary);
59
+ color: white;
60
+ }
61
+
62
+ .nav-link {
63
+ color: var(--text-light);
64
  }
65
 
66
+ .nav-link:hover, .nav-link.active {
67
+ color: var(--primary);
68
+ }
69
+
70
+ .avatar {
71
+ width: 40px;
72
+ height: 40px;
73
+ border-radius: 50%;
74
+ object-fit: cover;
75
+ }
76
+
77
+ .grid-gallery {
78
+ display: grid;
79
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
80
+ gap: 1.5rem;
81
+ }
82
+
83
+ .media-thumbnail {
84
+ aspect-ratio: 1/1;
85
+ object-fit: cover;
86
+ border-radius: 0.5rem;
87
+ transition: transform 0.3s ease;
88
+ }
89
+
90
+ .media-thumbnail:hover {
91
+ transform: scale(1.03);
92
  }
93
 
94
  .pulse-animation {
 
97
 
98
  @keyframes pulse {
99
  0% {
100
+ box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4);
101
  }
102
  70% {
103
+ box-shadow: 0 0 0 10px rgba(22, 163, 74, 0);
104
  }
105
  100% {
106
+ box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
107
  }
108
  }
109
 
110
+ /* Modal styles */
111
+ .modal {
112
+ display: none;
113
+ position: fixed;
114
+ z-index: 50;
115
+ left: 0;
116
+ top: 0;
117
+ width: 100%;
118
+ height: 100%;
119
+ background-color: rgba(0, 0, 0, 0.5);
120
+ }
121
+
122
+ .modal-content {
123
+ background-color: var(--card);
124
+ margin: 10% auto;
125
+ padding: 2rem;
126
+ border-radius: 0.5rem;
127
+ max-width: 500px;
128
+ width: 90%;
129
+ }
130
+
131
+ .close-btn {
132
+ color: var(--text-light);
133
+ float: right;
134
+ font-size: 1.5rem;
135
+ font-weight: bold;
136
+ cursor: pointer;
137
+ }
138
+
139
+ .close-btn:hover {
140
+ color: var(--text);
141
  }
142
  </style>
143
  </head>
144
  <body>
145
+ <!-- Navigation -->
146
+ <nav class="bg-white shadow-sm">
147
+ <div class="container mx-auto px-4 py-3">
148
+ <div class="flex justify-between items-center">
149
+ <div class="flex items-center space-x-2">
150
+ <i class="fas fa-images text-2xl text-green-600"></i>
151
+ <h1 class="text-xl font-bold">G<span class="font-light">On</span></h1>
152
+ </div>
153
+
154
+ <div class="hidden md:flex items-center space-x-6">
155
+ <a href="#" class="nav-link active">Início</a>
156
+ <a href="#" class="nav-link">Explorar</a>
157
+ <a href="#" class="nav-link">Álbuns</a>
158
+ <a href="#" class="nav-link">Espectadores</a>
159
+ </div>
160
+
161
+ <div class="flex items-center space-x-4">
162
+ <div class="relative">
163
+ <input type="text" placeholder="Buscar..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
164
+ <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
165
  </div>
166
+ <div class="flex items-center space-x-2">
167
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="avatar cursor-pointer" id="profileDropdown">
168
+ <div class="relative">
169
+ <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
170
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Meu Perfil</a>
171
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configurações</a>
172
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sair</a>
173
+ </div>
174
+ </div>
175
  </div>
176
  </div>
177
+
178
+ <button class="md:hidden text-gray-600">
179
+ <i class="fas fa-bars text-xl"></i>
180
+ </button>
 
 
181
  </div>
182
+ </div>
183
+ </nav>
184
 
185
+ <!-- Main Content -->
186
+ <main class="container mx-auto px-4 py-8">
187
+ <div class="flex flex-col md:flex-row gap-8">
188
+ <!-- Left Sidebar -->
189
+ <div class="w-full md:w-1/4">
190
+ <!-- User Profile Card -->
191
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
192
+ <div class="flex flex-col items-center">
193
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-24 h-24 rounded-full object-cover mb-4">
194
+ <h2 class="text-xl font-semibold">Ana Silva</h2>
195
+ <p class="text-gray-500 mb-4">@anasilva</p>
196
+ <div class="flex justify-between w-full mb-4">
197
+ <div class="text-center">
198
+ <p class="font-bold">24</p>
199
+ <p class="text-sm text-gray-500">Álbuns</p>
200
+ </div>
201
+ <div class="text-center">
202
+ <p class="font-bold">1.2K</p>
203
+ <p class="text-sm text-gray-500">Mídias</p>
204
+ </div>
205
+ <div class="text-center">
206
+ <p class="font-bold">5.7K</p>
207
+ <p class="text-sm text-gray-500">Espectadores</p>
208
+ </div>
209
+ </div>
210
+ <button class="w-full py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
211
+ Editar Perfil
212
+ </button>
213
  </div>
214
  </div>
215
 
216
+ <!-- Quick Actions -->
217
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
218
+ <h3 class="font-semibold mb-4">Ações Rápidas</h3>
219
+ <button id="newAlbumBtn" class="w-full py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition mb-3">
220
+ <i class="fas fa-plus mr-2"></i> Novo Álbum
221
+ </button>
222
+ <button class="w-full py-2 border border-green-600 text-green-600 rounded-lg hover:bg-green-50 transition">
223
+ <i class="fas fa-upload mr-2"></i> Enviar Mídia
224
+ </button>
225
+ </div>
226
+
227
+ <!-- Recent Spectators -->
228
+ <div class="bg-white rounded-lg shadow-md p-6">
229
+ <h3 class="font-semibold mb-4">Novos Espectadores</h3>
230
+ <div class="space-y-3">
231
+ <div class="flex items-center">
232
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
233
+ <div>
234
+ <p class="font-medium">Carlos Oliveira</p>
235
+ <p class="text-xs text-gray-500">Há 2 horas</p>
236
+ </div>
237
+ </div>
238
+ <div class="flex items-center">
239
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
240
+ <div>
241
+ <p class="font-medium">Mariana Costa</p>
242
+ <p class="text-xs text-gray-500">Hoje</p>
243
  </div>
244
+ </div>
245
+ <div class="flex items-center">
246
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
247
+ <div>
248
+ <p class="font-medium">Pedro Santos</p>
249
+ <p class="text-xs text-gray-500">Ontem</p>
250
  </div>
251
  </div>
252
  </div>
253
+ <a href="#" class="block text-center text-green-600 mt-4 text-sm hover:underline">Ver todos</a>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Main Feed -->
258
+ <div class="w-full md:w-2/4">
259
+ <!-- Create Post -->
260
+ <div class="bg-white rounded-lg shadow-md p-4 mb-6">
261
+ <div class="flex items-start">
262
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-3">
263
+ <div class="flex-1">
264
+ <textarea placeholder="Compartilhe algo sobre seu álbum..." class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none" rows="2"></textarea>
265
+ <div class="flex justify-between items-center mt-3">
266
+ <div class="flex space-x-2">
267
+ <button class="p-2 text-gray-500 hover:text-green-600">
268
+ <i class="fas fa-image"></i>
269
+ </button>
270
+ <button class="p-2 text-gray-500 hover:text-green-600">
271
+ <i class="fas fa-video"></i>
272
+ </button>
273
+ <button class="p-2 text-gray-500 hover:text-green-600">
274
+ <i class="fas fa-map-marker-alt"></i>
275
+ </button>
276
  </div>
277
+ <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
278
+ Publicar
279
+ </button>
280
  </div>
281
  </div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Feed Content -->
286
+ <div class="space-y-6">
287
+ <!-- Album Post -->
288
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
289
+ <div class="p-4">
290
+ <div class="flex items-center mb-4">
291
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-3">
292
  <div>
293
+ <p class="font-medium">Ana Silva</p>
294
+ <p class="text-xs text-gray-500">2 dias atrás · <span class="text-green-600">Público</span></p>
295
  </div>
296
  </div>
297
+ <h3 class="text-lg font-semibold mb-2">Férias na Praia 2023</h3>
298
+ <p class="text-gray-700 mb-4">Compartilhando alguns momentos incríveis das minhas férias no litoral norte!</p>
299
+
300
+ <div class="grid grid-cols-2 gap-2 mb-4">
301
+ <img src="https://source.unsplash.com/random/600x400/?beach" alt="Media" class="w-full h-48 object-cover rounded-lg">
302
+ <img src="https://source.unsplash.com/random/600x400/?ocean" alt="Media" class="w-full h-48 object-cover rounded-lg">
303
+ <img src="https://source.unsplash.com/random/600x400/?sunset" alt="Media" class="w-full h-48 object-cover rounded-lg">
304
+ <div class="relative">
305
+ <img src="https://source.unsplash.com/random/600x400/?palm" alt="Media" class="w-full h-48 object-cover rounded-lg">
306
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center rounded-lg">
307
+ <span class="text-white font-bold text-xl">+12</span>
308
+ </div>
309
  </div>
310
  </div>
311
+
312
+ <div class="flex justify-between text-gray-500 border-t border-b border-gray-100 py-2 mb-4">
313
+ <div class="flex items-center">
314
+ <i class="fas fa-eye mr-1"></i>
315
+ <span>1.2K visualizações</span>
316
+ </div>
317
+ <div class="flex items-center">
318
+ <i class="fas fa-comment mr-1"></i>
319
+ <span>48 comentários</span>
320
  </div>
321
  </div>
322
+
323
+ <div class="flex justify-between">
324
+ <button class="flex items-center text-gray-500 hover:text-green-600">
325
+ <i class="far fa-heart mr-2"></i> Curtir
326
+ </button>
327
+ <button class="flex items-center text-gray-500 hover:text-green-600">
328
+ <i class="far fa-comment mr-2"></i> Comentar
329
+ </button>
330
+ <button class="flex items-center text-gray-500 hover:text-green-600">
331
+ <i class="far fa-share-square mr-2"></i> Compartilhar
332
+ </button>
333
+ <button class="flex items-center text-gray-500 hover:text-green-600">
334
+ <i class="far fa-bookmark mr-2"></i> Salvar
335
+ </button>
336
+ </div>
337
  </div>
338
+ </div>
339
+
340
+ <!-- Single Media Post -->
341
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
342
+ <div class="p-4">
343
+ <div class="flex items-center mb-4">
344
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full mr-3">
345
  <div>
346
+ <p class="font-medium">Carlos Oliveira</p>
347
+ <p class="text-xs text-gray-500">1 semana atrás · <span class="text-green-600">Público</span></p>
348
  </div>
349
  </div>
350
+ <p class="text-gray-700 mb-4">Pôr do sol incrível que capturei ontem. Natureza é arte!</p>
351
+
352
+ <div class="mb-4">
353
+ <img src="https://source.unsplash.com/random/800x600/?sunset" alt="Media" class="w-full rounded-lg">
354
+ </div>
355
+
356
+ <div class="flex justify-between text-gray-500 border-t border-b border-gray-100 py-2 mb-4">
357
+ <div class="flex items-center">
358
+ <i class="fas fa-eye mr-1"></i>
359
+ <span>845 visualizações</span>
360
+ </div>
361
+ <div class="flex items-center">
362
+ <i class="fas fa-comment mr-1"></i>
363
+ <span>32 comentários</span>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="flex justify-between">
368
+ <button class="flex items-center text-gray-500 hover:text-green-600">
369
+ <i class="far fa-heart mr-2"></i> Curtir
370
+ </button>
371
+ <button class="flex items-center text-gray-500 hover:text-green-600">
372
+ <i class="far fa-comment mr-2"></i> Comentar
373
+ </button>
374
+ <button class="flex items-center text-gray-500 hover:text-green-600">
375
+ <i class="far fa-share-square mr-2"></i> Compartilhar
376
+ </button>
377
+ <button class="flex items-center text-gray-500 hover:text-green-600">
378
+ <i class="far fa-bookmark mr-2"></i> Salvar
379
+ </button>
380
+ </div>
381
  </div>
382
  </div>
 
 
 
 
 
 
 
 
 
 
383
  </div>
384
  </div>
385
 
386
+ <!-- Right Sidebar -->
387
+ <div class="w-full md:w-1/4">
388
+ <!-- Suggested Albums -->
389
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
390
+ <h3 class="font-semibold mb-4">Álbuns Sugeridos</h3>
391
+ <div class="space-y-4">
392
+ <div class="flex items-center">
393
+ <img src="https://source.unsplash.com/random/100x100/?nature" alt="Album" class="w-12 h-12 rounded-lg object-cover mr-3">
394
+ <div>
395
+ <p class="font-medium">Natureza Brasileira</p>
396
+ <p class="text-xs text-gray-500">por @ecofotografo</p>
397
+ </div>
398
  </div>
399
+ <div class="flex items-center">
400
+ <img src="https://source.unsplash.com/random/100x100/?city" alt="Album" class="w-12 h-12 rounded-lg object-cover mr-3">
401
+ <div>
402
+ <p class="font-medium">Arquitetura Urbana</p>
403
+ <p class="text-xs text-gray-500">por @urbanview</p>
404
+ </div>
 
405
  </div>
406
+ <div class="flex items-center">
407
+ <img src="https://source.unsplash.com/random/100x100/?food" alt="Album" class="w-12 h-12 rounded-lg object-cover mr-3">
408
+ <div>
409
+ <p class="font-medium">Gastronomia</p>
410
+ <p class="text-xs text-gray-500">por @chefdigital</p>
411
+ </div>
 
412
  </div>
413
+ </div>
414
+ <a href="#" class="block text-center text-green-600 mt-4 text-sm hover:underline">Ver mais</a>
415
+ </div>
416
+
417
+ <!-- Popular Tags -->
418
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
419
+ <h3 class="font-semibold mb-4">Tags Populares</h3>
420
+ <div class="flex flex-wrap gap-2">
421
+ <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#fotografia</a>
422
+ <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#natureza</a>
423
+ <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#viagem</a>
424
+ <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#arte</a>
425
+ <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#design</a>
426
+ <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#cultura</a>
427
+ <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#paisagem</a>
428
+ <a href="#" class="px-3 py-1 bg-green-50 text-green-600 rounded-full text-sm hover:bg-green-100">#memories</a>
429
  </div>
430
  </div>
431
 
432
+ <!-- New Features -->
433
+ <div class="bg-white rounded-lg shadow-md p-6">
434
+ <h3 class="font-semibold mb-4">Novidades</h3>
435
+ <div class="space-y-3">
436
+ <div class="flex items-start">
437
+ <div class="bg-green-100 p-2 rounded-lg mr-3">
438
+ <i class="fas fa-mobile-alt text-green-600"></i>
439
+ </div>
440
+ <div>
441
+ <p class="font-medium">App GOn disponível</p>
442
+ <p class="text-xs text-gray-500">Baixe agora na App Store e Google Play</p>
443
  </div>
 
 
 
 
444
  </div>
445
+ <div class="flex items-start">
446
+ <div class="bg-green-100 p-2 rounded-lg mr-3">
447
+ <i class="fas fa-cloud-upload-alt text-green-600"></i>
448
+ </div>
449
+ <div>
450
+ <p class="font-medium">Armazenamento ampliado</p>
451
+ <p class="text-xs text-gray-500">Agora com 50GB grátis para todos os usuários</p>
452
+ </div>
453
  </div>
454
  </div>
455
  </div>
456
  </div>
457
+ </div>
458
+ </main>
459
+
460
+ <!-- New Album Modal -->
461
+ <div id="newAlbumModal" class="modal">
462
+ <div class="modal-content">
463
+ <span class="close-btn" id="closeModal">&times;</span>
464
+ <h2 class="text-xl font-semibold mb-6">Criar Novo Álbum</h2>
465
 
466
+ <form id="albumForm">
467
+ <div class="mb-4">
468
+ <label for="albumName" class="block text-sm font-medium text-gray-700 mb-1">Nome do Álbum</label>
469
+ <input type="text" id="albumName" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="Minhas Férias 2023">
470
+ </div>
471
+
472
+ <div class="mb-4">
473
+ <label for="albumDescription" class="block text-sm font-medium text-gray-700 mb-1">Descrição</label>
474
+ <textarea id="albumDescription" rows="3" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="Compartilhe detalhes sobre este álbum..."></textarea>
475
+ </div>
476
+
477
+ <div class="mb-4">
478
+ <label class="block text-sm font-medium text-gray-700 mb-1">Visibilidade</label>
479
+ <div class="space-y-2">
480
+ <div class="flex items-center">
481
+ <input type="radio" id="public" name="visibility" value="public" class="h-4 w-4 text-green-600 focus:ring-green-500" checked>
482
+ <label for="public" class="ml-2 block text-sm text-gray-700">
483
+ Público (qualquer pessoa pode ver)
484
+ </label>
485
+ </div>
486
+ <div class="flex items-center">
487
+ <input type="radio" id="private" name="visibility" value="private" class="h-4 w-4 text-green-600 focus:ring-green-500">
488
+ <label for="private" class="ml-2 block text-sm text-gray-700">
489
+ Privado (somente eu)
490
+ </label>
491
+ </div>
492
+ <div class="flex items-center">
493
+ <input type="radio" id="limited" name="visibility" value="limited" class="h-4 w-4 text-green-600 focus:ring-green-500">
494
+ <label for="limited" class="ml-2 block text-sm text-gray-700">
495
+ Limitado (somente espectadores)
496
+ </label>
497
  </div>
 
498
  </div>
499
+ </div>
500
+
501
+ <div class="mb-6">
502
+ <label class="block text-sm font-medium text-gray-700 mb-1">Capa do Álbum</label>
503
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
504
+ <div class="space-y-1 text-center">
505
+ <div class="flex text-sm text-gray-600">
506
+ <label for="albumCover" class="relative cursor-pointer bg-white rounded-md font-medium text-green-600 hover:text-green-500 focus-within:outline-none">
507
+ <span>Enviar uma imagem</span>
508
+ <input id="albumCover" name="albumCover" type="file" class="sr-only">
509
+ </label>
510
+ <p class="pl-1">ou arraste e solte</p>
511
+ </div>
512
+ <p class="text-xs text-gray-500">PNG, JPG, GIF até 10MB</p>
513
+ </div>
514
  </div>
515
+ </div>
516
+
517
+ <div class="flex justify-end space-x-3">
518
+ <button type="button" id="cancelAlbum" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
519
+ Cancelar
520
+ </button>
521
+ <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
522
+ Criar Álbum
523
+ </button>
524
+ </div>
525
+ </form>
526
+ </div>
527
+ </div>
528
+
529
+ <!-- Sign Up Modal -->
530
+ <div id="signupModal" class="modal">
531
+ <div class="modal-content">
532
+ <span class="close-btn" id="closeSignupModal">&times;</span>
533
+ <div class="text-center">
534
+ <i class="fas fa-images text-5xl text-green-600 mb-4"></i>
535
+ <h2 class="text-2xl font-semibold mb-2">Junte-se ao GOn</h2>
536
+ <p class="text-gray-600 mb-6">Compartilhe suas memórias com o mundo</p>
537
+
538
+ <button class="w-full py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition mb-3 flex items-center justify-center">
539
+ <i class="fab fa-google mr-3"></i> Continuar com Google
540
+ </button>
541
+
542
+ <button class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition mb-6 flex items-center justify-center">
543
+ <i class="fab fa-facebook-f mr-3"></i> Continuar com Facebook
544
+ </button>
545
+
546
+ <div class="flex items-center mb-6">
547
+ <div class="flex-1 border-t border-gray-300"></div>
548
+ <span class="px-3 text-gray-500">ou</span>
549
+ <div class="flex-1 border-t border-gray-300"></div>
550
+ </div>
551
+
552
+ <form id="signupForm">
553
+ <div class="mb-4">
554
+ <input type="email" placeholder="Seu e-mail" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
555
  </div>
556
+ <div class="mb-4">
557
+ <input type="password" placeholder="Crie uma senha" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
 
 
 
 
 
558
  </div>
559
+ <div class="mb-6">
560
+ <input type="password" placeholder="Confirme sua senha" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
 
 
 
 
 
 
561
  </div>
562
+
563
+ <button type="submit" class="w-full py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition mb-4">
564
+ Criar Conta
565
+ </button>
566
+
567
+ <p class="text-sm text-gray-600">
568
+ Ao se inscrever, você concorda com nossos <a href="#" class="text-green-600 hover:underline">Termos</a> e <a href="#" class="text-green-600 hover:underline">Política de Privacidade</a>.
569
+ </p>
570
+ </form>
571
+
572
+ <p class="mt-6 text-gray-600">
573
+ Já tem uma conta? <a href="#" class="text-green-600 hover:underline">Entrar</a>
574
+ </p>
575
  </div>
576
+ </div>
577
  </div>
578
 
579
  <script>
580
+ // DOM Elements
581
+ const profileDropdown = document.getElementById('profileDropdown');
582
+ const dropdownMenu = document.getElementById('dropdownMenu');
583
+ const newAlbumBtn = document.getElementById('newAlbumBtn');
584
+ const newAlbumModal = document.getElementById('newAlbumModal');
585
+ const closeModal = document.getElementById('closeModal');
586
+ const cancelAlbum = document.getElementById('cancelAlbum');
587
+ const signupModal = document.getElementById('signupModal');
588
+ const closeSignupModal = document.getElementById('closeSignupModal');
589
+
590
+ // Profile dropdown toggle
591
+ profileDropdown.addEventListener('click', () => {
592
+ dropdownMenu.classList.toggle('hidden');
593
+ });
594
+
595
+ // Close dropdown when clicking outside
596
+ document.addEventListener('click', (e) => {
597
+ if (!profileDropdown.contains(e.target) && !dropdownMenu.contains(e.target)) {
598
+ dropdownMenu.classList.add('hidden');
599
+ }
600
+ });
601
+
602
+ // New Album Modal
603
+ newAlbumBtn.addEventListener('click', () => {
604
+ newAlbumModal.style.display = 'block';
605
+ });
606
+
607
+ closeModal.addEventListener('click', () => {
608
+ newAlbumModal.style.display = 'none';
609
+ });
610
+
611
+ cancelAlbum.addEventListener('click', () => {
612
+ newAlbumModal.style.display = 'none';
613
+ });
614
+
615
+ // Close modal when clicking outside
616
+ window.addEventListener('click', (e) => {
617
+ if (e.target === newAlbumModal) {
618
+ newAlbumModal.style.display = 'none';
619
+ }
620
+ if (e.target === signupModal) {
621
+ signupModal.style.display = 'none';
622
+ }
623
+ });
624
+
625
+ // Form submission
626
+ document.getElementById('albumForm').addEventListener('submit', (e) => {
627
+ e.preventDefault();
628
+ alert('Álbum criado com sucesso!');
629
+ newAlbumModal.style.display = 'none';
630
+ // Here you would typically send the data to your backend
631
+ });
632
+
633
+ // Signup Modal - This would typically be triggered by a "Sign Up" button
634
+ // For demo purposes, we'll show it after 2 seconds
635
+ setTimeout(() => {
636
+ signupModal.style.display = 'block';
637
+ }, 2000);
638
+
639
+ closeSignupModal.addEventListener('click', () => {
640
+ signupModal.style.display = 'none';
641
+ });
642
+
643
+ // Form validation for signup
644
+ document.getElementById('signupForm').addEventListener('submit', (e) => {
645
+ e.preventDefault();
646
+ alert('Conta criada com sucesso! Bem-vindo ao GOn.');
647
+ signupModal.style.display = 'none';
648
+ // Here you would typically send the data to your backend
649
+ });
650
+
651
+ // Simulate backend functionality
652
+ // In a real app, this would be handled by your backend API
653
+ class GOnBackend {
654
+ constructor() {
655
+ this.users = [];
656
+ this.albums = [];
657
+ this.media = [];
658
+ this.spectators = [];
659
+ }
660
 
661
+ createUser(email, password) {
662
+ const user = {
663
+ id: this.users.length + 1,
664
+ email,
665
+ password, // In real app, this would be hashed
666
+ username: email.split('@')[0],
667
+ joinDate: new Date(),
668
+ albums: [],
669
+ spectators: []
670
+ };
671
+ this.users.push(user);
672
+ return user;
673
+ }
 
 
 
 
 
 
674
 
675
+ createAlbum(userId, name, description, isPublic) {
676
+ const album = {
677
+ id: this.albums.length + 1,
678
+ userId,
679
+ name,
680
+ description,
681
+ isPublic,
682
+ coverImage: null,
683
+ creationDate: new Date(),
684
+ mediaIds: []
685
+ };
686
+ this.albums.push(album);
687
+
688
+ // Add to user's albums
689
+ const user = this.users.find(u => u.id === userId);
690
+ if (user) {
691
+ user.albums.push(album.id);
692
+ }
693
+
694
+ return album;
695
+ }
696
+
697
+ // Other backend methods would go here...
698
+ }
699
+
700
+ // Initialize backend
701
+ const backend = new GOnBackend();
702
  </script>
703
  <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=DestroXyz/tangent-data-base" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
704
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- Faça uma plataforma de IA que apresenta dados em formato de inquérito com base em dados coletados de toda a internet.
 
 
1
+ Faça uma plataforma de IA que apresenta dados em formato de inquérito com base em dados coletados de toda a internet.
2
+ Crie uma rede social "Galeria Online" ou simplesmente "GOn", onde as pessoas criam álbuns e armazenam suas mídias e podem deixar esses álbuns em modo público para outros usuários verem e seguirem.Cada usuário ganha "espectadores", e o número de espectadores é ilimitado. A UI é moderna com uma paleta em tons de verde, uma UX eficiente. O Backend deve estar com configurado, todas as páginas e botões funcionais. Deve ser possível criar conta com Google ou outro e-mail.