Hugging Face's logo

Spaces:
Germinal
/
anycoder-4e2bd7f8
Running

App Files Community
Germinal commited on
Commit
d1c6110
·
verified ·
1 Parent(s): 57cf354

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +528 -792
index.html CHANGED
@@ -1,904 +1,640 @@
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>Modern Web Application</title>
 
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
  :root {
10
- --primary: #4361ee;
11
- --primary-dark: #3a56d4;
12
- --secondary: #3f37c9;
13
- --accent: #4cc9f0;
14
- --light: #f8f9fa;
15
- --dark: #212529;
16
- --success: #4bb543;
17
- --warning: #ffcc00;
18
- --danger: #f9243f;
19
- --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
20
- --border-radius: 8px;
21
- }
22
-
23
- * {
24
- margin: 0;
25
- padding: 0;
26
- box-sizing: border-box;
27
  }
28
 
29
  body {
30
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
31
- line-height: 1.6;
32
- color: var(--dark);
33
- background-color: #f5f7fa;
34
- overflow-x: hidden;
35
  }
36
 
37
- /* Header Styles */
38
- header {
39
- background: linear-gradient(135deg, var(--primary), var(--secondary));
40
- color: white;
41
- padding: 1.5rem 0;
42
- box-shadow: var(--shadow);
43
- position: sticky;
44
- top: 0;
45
- z-index: 1000;
46
  }
47
 
48
- .header-container {
49
- max-width: 1200px;
50
- margin: 0 auto;
51
- padding: 0 1rem;
52
- display: flex;
53
- justify-content: space-between;
54
- align-items: center;
55
  }
56
 
57
- .logo {
58
- font-size: 1.8rem;
59
- font-weight: 700;
60
  display: flex;
61
- align-items: center;
62
- gap: 0.5rem;
63
- }
64
-
65
- .logo-icon {
66
- font-size: 2rem;
67
- }
68
-
69
- nav ul {
70
- display: flex;
71
- list-style: none;
72
- gap: 1.5rem;
73
- }
74
-
75
- nav a {
76
- color: white;
77
- text-decoration: none;
78
- font-weight: 500;
79
- transition: all 0.3s ease;
80
- padding: 0.5rem 0;
81
- position: relative;
82
- }
83
-
84
- nav a:hover {
85
- color: var(--accent);
86
- }
87
-
88
- nav a::after {
89
- content: '';
90
- position: absolute;
91
- bottom: 0;
92
- left: 0;
93
- width: 0;
94
- height: 2px;
95
- background-color: var(--accent);
96
- transition: width 0.3s ease;
97
- }
98
-
99
- nav a:hover::after {
100
- width: 100%;
101
- }
102
-
103
- .auth-buttons {
104
- display: flex;
105
- gap: 1rem;
106
- }
107
-
108
- .btn {
109
- padding: 0.5rem 1.2rem;
110
- border-radius: var(--border-radius);
111
- font-weight: 600;
112
- text-decoration: none;
113
- display: inline-block;
114
- transition: all 0.3s ease;
115
- cursor: pointer;
116
- border: none;
117
  }
118
 
119
- .btn-primary {
120
- background-color: var(--accent);
121
- color: white;
 
 
 
122
  }
123
 
124
- .btn-primary:hover {
125
- background-color: #3ab7d8;
126
- transform: translateY(-2px);
127
- }
128
 
129
- .btn-outline {
130
- background-color: transparent;
131
- color: white;
132
- border: 2px solid white;
133
  }
134
 
135
- .btn-outline:hover {
136
- background-color: white;
137
- color: var(--primary);
138
  }
139
 
140
- /* Hero Section */
141
- .hero {
142
- padding: 4rem 0;
143
- background-color: white;
144
  }
145
 
146
- .hero-container {
147
- max-width: 1200px;
148
- margin: 0 auto;
149
- padding: 0 1rem;
150
- display: grid;
151
- grid-template-columns: 1fr 1fr;
152
- gap: 3rem;
153
  align-items: center;
 
154
  }
155
 
156
- .hero-content h1 {
157
- font-size: 2.8rem;
158
- margin-bottom: 1.5rem;
159
- line-height: 1.2;
160
- }
161
-
162
- .hero-content p {
163
- font-size: 1.1rem;
164
- margin-bottom: 2rem;
165
- color: #6c757d;
166
- }
167
-
168
- .hero-buttons {
169
- display: flex;
170
- gap: 1rem;
171
- margin-bottom: 2rem;
172
- }
173
-
174
- .stats {
175
- display: flex;
176
- gap: 2rem;
177
- margin-top: 2rem;
178
  }
179
 
180
- .stat-item {
181
- display: flex;
182
- flex-direction: column;
183
- align-items: center;
184
  }
185
 
186
- .stat-number {
187
- font-size: 2rem;
188
- font-weight: 700;
189
  color: var(--primary);
 
 
 
190
  }
191
 
192
- .stat-label {
193
- font-size: 0.9rem;
194
- color: #6c757d;
195
- }
196
-
197
- .hero-image {
198
- text-align: center;
199
- }
200
-
201
- .hero-image img {
202
- max-width: 100%;
203
- height: auto;
204
- border-radius: var(--border-radius);
205
- box-shadow: var(--shadow);
206
- }
207
-
208
- /* Features Section */
209
- .features {
210
- padding: 4rem 0;
211
- background-color: #f8f9fa;
212
- }
213
-
214
- .features-container {
215
- max-width: 1200px;
216
- margin: 0 auto;
217
- padding: 0 1rem;
218
- }
219
-
220
- .section-header {
221
- text-align: center;
222
- margin-bottom: 3rem;
223
- }
224
-
225
- .section-title {
226
- font-size: 2.2rem;
227
  margin-bottom: 1rem;
228
- color: var(--dark);
229
- }
230
-
231
- .section-subtitle {
232
- font-size: 1.1rem;
233
- color: #6c757d;
234
- max-width: 700px;
235
- margin: 0 auto;
236
- }
237
-
238
- .features-grid {
239
- display: grid;
240
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
241
- gap: 2rem;
242
- }
243
-
244
- .feature-card {
245
- background-color: white;
246
- padding: 2rem;
247
- border-radius: var(--border-radius);
248
- box-shadow: var(--shadow);
249
- transition: all 0.3s ease;
250
  }
251
 
252
- .feature-card:hover {
253
- transform: translateY(-5px);
254
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
255
  }
256
 
257
- .feature-icon {
258
- font-size: 2.5rem;
259
- color: var(--primary);
260
- margin-bottom: 1.5rem;
 
261
  }
262
 
263
- .feature-card h3 {
264
- font-size: 1.4rem;
 
 
 
265
  margin-bottom: 1rem;
266
- color: var(--dark);
267
- }
268
-
269
- .feature-card p {
270
- color: #6c757d;
271
- line-height: 1.6;
272
- }
273
-
274
- /* Testimonials */
275
- .testimonials {
276
- padding: 4rem 0;
277
- background-color: white;
278
  }
279
 
280
- .testimonials-container {
281
- max-width: 1200px;
282
- margin: 0 auto;
283
- padding: 0 1rem;
284
  }
285
 
286
- .testimonial-grid {
287
- display: grid;
288
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
289
- gap: 2rem;
290
- }
291
-
292
- .testimonial-card {
293
- background-color: #f8f9fa;
294
- padding: 2rem;
295
- border-radius: var(--border-radius);
296
  position: relative;
 
 
297
  }
298
 
299
- .testimonial-card::before {
300
- content: '"';
301
- font-size: 5rem;
302
- color: var(--primary);
303
- opacity: 0.1;
304
- position: absolute;
305
- top: 1rem;
306
- left: 1rem;
307
- }
308
-
309
- .testimonial-text {
310
- font-style: italic;
311
- margin-bottom: 1.5rem;
312
- color: var(--dark);
313
- }
314
-
315
- .testimonial-author {
316
- display: flex;
317
- align-items: center;
318
- gap: 1rem;
319
- }
320
-
321
- .author-avatar {
322
- width: 50px;
323
- height: 50px;
324
- border-radius: 50%;
325
- object-fit: cover;
326
- }
327
-
328
- .author-info h4 {
329
- font-size: 1.1rem;
330
- color: var(--dark);
331
- }
332
-
333
- .author-info p {
334
- color: #6c757d;
335
- font-size: 0.9rem;
336
- }
337
-
338
- /* Pricing */
339
- .pricing {
340
- padding: 4rem 0;
341
- background-color: #f8f9fa;
342
- }
343
-
344
- .pricing-container {
345
- max-width: 1200px;
346
- margin: 0 auto;
347
- padding: 0 1rem;
348
- }
349
-
350
- .pricing-grid {
351
- display: grid;
352
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
353
- gap: 2rem;
354
- }
355
-
356
- .pricing-card {
357
- background-color: white;
358
- padding: 2rem;
359
- border-radius: var(--border-radius);
360
- box-shadow: var(--shadow);
361
- display: flex;
362
- flex-direction: column;
363
- justify-content: space-between;
364
- }
365
-
366
- .pricing-card.popular {
367
- border: 2px solid var(--primary);
368
- transform: scale(1.05);
369
- }
370
-
371
- .pricing-header {
372
- text-align: center;
373
- margin-bottom: 2rem;
374
- }
375
-
376
- .pricing-title {
377
- font-size: 1.4rem;
378
- color: var(--dark);
379
- }
380
-
381
- .pricing-card.popular .pricing-title {
382
- color: var(--primary);
383
- }
384
-
385
- .price {
386
- font-size: 3rem;
387
- font-weight: 700;
388
- color: var(--dark);
389
- margin-bottom: 0.5rem;
390
- }
391
-
392
- .pricing-card.popular .price {
393
- color: var(--primary);
394
- }
395
-
396
- .price-period {
397
- color: #6c757d;
398
- font-size: 1rem;
399
- }
400
-
401
- .features-list {
402
- list-style: none;
403
- margin-bottom: 2rem;
404
- }
405
-
406
- .features-list li {
407
- padding: 0.5rem 0;
408
- display: flex;
409
- align-items: center;
410
- gap: 0.5rem;
411
- color: #6c757d;
412
- }
413
-
414
- .features-list i {
415
- color: var(--success);
416
- }
417
-
418
- /* Footer */
419
- footer {
420
- background-color: var(--dark);
421
- color: white;
422
- padding: 3rem 0 1rem;
423
- }
424
-
425
- .footer-container {
426
- max-width: 1200px;
427
- margin: 0 auto;
428
- padding: 0 1rem;
429
- }
430
-
431
- .footer-grid {
432
- display: grid;
433
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
434
- gap: 2rem;
435
- margin-bottom: 2rem;
436
  }
437
 
438
- .footer-column h3 {
439
- font-size: 1.2rem;
440
- margin-bottom: 1.5rem;
441
  color: white;
 
 
 
 
442
  }
443
 
444
- .footer-column ul {
445
- list-style: none;
446
- }
447
-
448
- .footer-column li {
449
- margin-bottom: 0.8rem;
450
  }
451
 
452
- .footer-column a {
453
- color: #adb5bd;
454
- text-decoration: none;
455
- transition: color 0.3s ease;
456
- }
457
-
458
- .footer-column a:hover {
459
- color: var(--accent);
460
- }
461
-
462
- .social-links {
463
- display: flex;
464
- gap: 1rem;
465
  }
466
 
467
- .social-links a {
468
- width: 40px;
469
- height: 40px;
470
- background-color: rgba(255, 255, 255, 0.1);
471
- border-radius: 50%;
472
- display: flex;
473
- align-items: center;
474
- justify-content: center;
475
- color: white;
476
- transition: all 0.3s ease;
477
- }
478
 
479
- .social-links a:hover {
480
- background-color: var(--primary);
481
- transform: translateY(-3px);
482
  }
483
 
484
- .copyright {
 
 
 
485
  text-align: center;
486
- padding-top: 2rem;
487
- border-top: 1px solid rgba(255, 255, 255, 0.1);
488
- color: #adb5bd;
489
- font-size: 0.9rem;
490
- }
491
-
492
- /* Responsive Design */
493
- @media (max-width: 768px) {
494
- .hero-container {
495
- grid-template-columns: 1fr;
496
- text-align: center;
497
- }
498
-
499
- .hero-content {
500
- order: 2;
501
- }
502
-
503
- .hero-image {
504
- order: 1;
505
- margin-bottom: 2rem;
506
- }
507
-
508
- .hero-content h1 {
509
- font-size: 2.2rem;
510
- }
511
-
512
- .hero-buttons {
513
- justify-content: center;
514
- }
515
-
516
- .stats {
517
- justify-content: center;
518
- }
519
-
520
- .nav-toggle {
521
- display: block;
522
- background: none;
523
- border: none;
524
- color: white;
525
- font-size: 1.5rem;
526
- cursor: pointer;
527
- }
528
-
529
- nav {
530
- position: fixed;
531
- top: 80px;
532
- left: 0;
533
- width: 100%;
534
- background-color: var(--primary);
535
- padding: 1rem;
536
- box-shadow: var(--shadow);
537
- transform: translateY(-150%);
538
- transition: transform 0.3s ease;
539
- }
540
-
541
- nav.active {
542
- transform: translateY(0);
543
- }
544
-
545
- nav ul {
546
- flex-direction: column;
547
- gap: 1rem;
548
- }
549
-
550
- .auth-buttons {
551
- display: none;
552
- }
553
- }
554
-
555
- /* Built with anycoder */
556
- .anycoder-badge {
557
- position: fixed;
558
- bottom: 20px;
559
- right: 20px;
560
- background-color: white;
561
- padding: 0.5rem 1rem;
562
- border-radius: var(--border-radius);
563
- box-shadow: var(--shadow);
564
- font-size: 0.9rem;
565
- color: var(--dark);
566
- text-decoration: none;
567
- display: flex;
568
- align-items: center;
569
- gap: 0.5rem;
570
- z-index: 1000;
571
  }
572
 
573
- .anycoder-badge:hover {
574
- transform: translateY(-2px);
 
575
  }
576
  </style>
577
  </head>
578
- <body>
579
- <header>
580
- <div class="header-container">
581
- <div class="logo">
582
- <i class="fas fa-rocket logo-icon"></i>
583
- <span>ModernApp</span>
584
- </div>
585
- <button class="nav-toggle" id="navToggle">
586
- <i class="fas fa-bars"></i>
587
- </button>
588
- <nav id="mainNav">
589
- <ul>
590
- <li><a href="#features">Features</a></li>
591
- <li><a href="#testimonials">Testimonials</a></li>
592
- <li><a href="#pricing">Pricing</a></li>
593
- <li><a href="#contact">Contact</a></li>
594
- </ul>
595
- </nav>
596
- <div class="auth-buttons">
597
- <a href="#" class="btn btn-outline">Login</a>
598
- <a href="#" class="btn btn-primary">Sign Up</a>
599
- </div>
600
- </div>
601
- </header>
602
-
603
- <section class="hero">
604
- <div class="hero-container">
605
- <div class="hero-content">
606
- <h1>Build Amazing Web Applications with ModernApp</h1>
607
- <p>Our platform provides all the tools you need to create stunning, responsive web applications with ease. Join thousands of developers who trust ModernApp for their projects.</p>
608
- <div class="hero-buttons">
609
- <a href="#" class="btn btn-primary">Get Started</a>
610
- <a href="#" class="btn btn-outline" style="color: var(--primary); border-color: var(--primary);">Learn More</a>
611
- </div>
612
- <div class="stats">
613
- <div class="stat-item">
614
- <div class="stat-number">10K+</div>
615
- <div class="stat-label">Happy Users</div>
616
- </div>
617
- <div class="stat-item">
618
- <div class="stat-number">50+</div>
619
- <div class="stat-label">Features</div>
620
  </div>
621
- <div class="stat-item">
622
- <div class="stat-number">24/7</div>
623
- <div class="stat-label">Support</div>
624
  </div>
625
  </div>
 
 
 
 
 
 
626
  </div>
627
- <div class="hero-image">
628
- <img src="https://via.placeholder.com/600x400" alt="ModernApp Dashboard">
629
- </div>
630
- </div>
631
- </section>
632
 
633
- <section class="features" id="features">
634
- <div class="features-container">
635
- <div class="section-header">
636
- <h2 class="section-title">Powerful Features</h2>
637
- <p class="section-subtitle">Everything you need to build amazing web applications quickly and efficiently.</p>
638
- </div>
639
- <div class="features-grid">
640
- <div class="feature-card">
641
- <div class="feature-icon">
642
- <i class="fas fa-bolt"></i>
643
- </div>
644
- <h3>Lightning Fast</h3>
645
- <p>Our optimized codebase ensures your applications load quickly and perform smoothly, even under heavy traffic.</p>
646
  </div>
647
- <div class="feature-card">
648
- <div class="feature-icon">
649
- <i class="fas fa-mobile-alt"></i>
 
 
 
 
650
  </div>
651
- <h3>Responsive Design</h3>
652
- <p>Built with modern CSS techniques to ensure your app looks great on any device, from desktop to mobile.</p>
653
- </div>
654
- <div class="feature-card">
655
- <div class="feature-icon">
656
- <i class="fas fa-cogs"></i>
 
657
  </div>
658
- <h3>Customizable</h3>
659
- <p>Easily customize every aspect of your application with our flexible theming and component system.</p>
660
  </div>
661
- <div class="feature-card">
662
- <div class="feature-icon">
663
- <i class="fas fa-shield-alt"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
664
  </div>
665
- <h3>Secure</h3>
666
- <p>Built-in security features protect your application and user data from common vulnerabilities.</p>
667
- </div>
668
- <div class="feature-card">
669
- <div class="feature-icon">
670
- <i class="fas fa-chart-line"></i>
 
 
671
  </div>
672
- <h3>Analytics</h3>
673
- <p>Get detailed insights into your application's performance and user behavior with our analytics dashboard.</p>
674
- </div>
675
- <div class="feature-card">
676
- <div class="feature-icon">
677
- <i class="fas fa-globe"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
678
  </div>
679
- <h3>Global CDN</h3>
680
- <p>Your application is served from our global content delivery network for maximum speed worldwide.</p>
681
- </div>
682
- </div>
683
- </div>
684
- </section>
685
 
686
- <section class="testimonials" id="testimonials">
687
- <div class="testimonials-container">
688
- <div class="section-header">
689
- <h2 class="section-title">What Our Users Say</h2>
690
- <p class="section-subtitle">Don't just take our word for it. Here's what our amazing users have to say about ModernApp.</p>
691
- </div>
692
- <div class="testimonial-grid">
693
- <div class="testimonial-card">
694
- <p class="testimonial-text">ModernApp has completely transformed how we build web applications. The performance improvements alone have saved us countless hours of development time.</p>
695
- <div class="testimonial-author">
696
- <img src="https://via.placeholder.com/50" alt="Sarah Johnson" class="author-avatar">
697
- <div class="author-info">
698
- <h4>Sarah Johnson</h4>
699
- <p>CTO, TechCorp</p>
700
  </div>
701
  </div>
702
- </div>
703
- <div class="testimonial-card">
704
- <p class="testimonial-text">As a freelance developer, ModernApp has become my go-to framework. The responsive design features make my life so much easier when working with clients.</p>
705
- <div class="testimonial-author">
706
- <img src="https://via.placeholder.com/50" alt="Michael Chen" class="author-avatar">
707
- <div class="author-info">
708
- <h4>Michael Chen</h4>
709
- <p>Freelance Developer</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
710
  </div>
711
  </div>
712
- </div>
713
- <div class="testimonial-card">
714
- <p class="testimonial-text">The security features in ModernApp give me peace of mind knowing our user data is protected. The built-in analytics have also helped us make better business decisions.</p>
715
- <div class="testimonial-author">
716
- <img src="https://via.placeholder.com/50" alt="Emily Rodriguez" class="author-avatar">
717
- <div class="author-info">
718
- <h4>Emily Rodriguez</h4>
719
- <p>Product Manager, Startup Inc.</p>
720
  </div>
721
  </div>
722
- </div>
723
- </div>
724
- </div>
725
- </section>
726
 
727
- <section class="pricing" id="pricing">
728
- <div class="pricing-container">
729
- <div class="section-header">
730
- <h2 class="section-title">Simple Pricing</h2>
731
- <p class="section-subtitle">Choose the plan that works best for you. No hidden fees, no surprises.</p>
732
- </div>
733
- <div class="pricing-grid">
734
- <div class="pricing-card">
735
- <div class="pricing-header">
736
- <h3 class="pricing-title">Basic</h3>
737
- <div class="price">$9</div>
738
- <div class="price-period">per month</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
739
  </div>
740
- <ul class="features-list">
741
- <li><i class="fas fa-check"></i> 1 Project</li>
742
- <li><i class="fas fa-check"></i> Basic Analytics</li>
743
- <li><i class="fas fa-check"></i> Email Support</li>
744
- <li><i class="fas fa-check"></i> 1GB Storage</li>
745
- </ul>
746
- <a href="#" class="btn btn-primary">Get Started</a>
747
  </div>
748
- <div class="pricing-card popular">
749
- <div class="pricing-header">
750
- <h3 class="pricing-title">Pro</h3>
751
- <div class="price">$29</div>
752
- <div class="price-period">per month</div>
 
 
 
 
 
 
753
  </div>
754
- <ul class="features-list">
755
- <li><i class="fas fa-check"></i> 5 Projects</li>
756
- <li><i class="fas fa-check"></i> Advanced Analytics</li>
757
- <li><i class="fas fa-check"></i> Priority Support</li>
758
- <li><i class="fas fa-check"></i> 10GB Storage</li>
759
- <li><i class="fas fa-check"></i> Custom Domain</li>
760
- </ul>
761
- <a href="#" class="btn btn-primary">Get Started</a>
762
- </div>
763
- <div class="pricing-card">
764
- <div class="pricing-header">
765
- <h3 class="pricing-title">Enterprise</h3>
766
- <div class="price">$99</div>
767
- <div class="price-period">per month</div>
768
  </div>
769
- <ul class="features-list">
770
- <li><i class="fas fa-check"></i> Unlimited Projects</li>
771
- <li><i class="fas fa-check"></i> Premium Analytics</li>
772
- <li><i class="fas fa-check"></i> 24/7 Support</li>
773
- <li><i class="fas fa-check"></i> 100GB Storage</li>
774
- <li><i class="fas fa-check"></i> Custom Domain</li>
775
- <li><i class="fas fa-check"></i> Dedicated Server</li>
776
- </ul>
777
- <a href="#" class="btn btn-primary">Get Started</a>
778
  </div>
779
  </div>
780
- </div>
781
- </section>
782
-
783
- <footer id="contact">
784
- <div class="footer-container">
785
- <div class="footer-grid">
786
- <div class="footer-column">
787
- <div class="logo" style="color: white; margin-bottom: 1rem;">
788
- <i class="fas fa-rocket logo-icon"></i>
789
- <span>ModernApp</span>
790
- </div>
791
- <p style="color: #adb5bd; margin-bottom: 1.5rem;">Building the future of web applications with modern technologies.</p>
792
- <div class="social-links">
793
- <a href="#"><i class="fab fa-facebook-f"></i></a>
794
- <a href="#"><i class="fab fa-twitter"></i></a>
795
- <a href="#"><i class="fab fa-instagram"></i></a>
796
- <a href="#"><i class="fab fa-linkedin-in"></i></a>
797
- </div>
798
- </div>
799
- <div class="footer-column">
800
- <h3>Product</h3>
801
- <ul>
802
- <li><a href="#">Features</a></li>
803
- <li><a href="#">Pricing</a></li>
804
- <li><a href="#">Documentation</a></li>
805
- <li><a href="#">Releases</a></li>
806
- </ul>
807
  </div>
808
- <div class="footer-column">
809
- <h3>Company</h3>
810
- <ul>
811
- <li><a href="#">About</a></li>
812
- <li><a href="#">Blog</a></li>
813
- <li><a href="#">Careers</a></li>
814
- <li><a href="#">Contact</a></li>
815
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
816
  </div>
817
- <div class="footer-column">
818
- <h3>Legal</h3>
819
- <ul>
820
- <li><a href="#">Privacy</a></li>
821
- <li><a href="#">Terms</a></li>
822
- <li><a href="#">Cookies</a></li>
823
- <li><a href="#">GDPR</a></li>
824
- </ul>
825
  </div>
826
  </div>
827
- <div class="copyright">
828
- <p>&copy; 2023 ModernApp. All rights reserved. <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" style="color: var(--accent);">Built with anycoder</a></p>
829
- </div>
830
  </div>
831
- </footer>
832
-
833
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-badge">
834
- <i class="fas fa-code"></i>
835
- Built with anycoder
836
- </a>
837
 
838
  <script>
839
- // Mobile navigation toggle
840
- const navToggle = document.getElementById('navToggle');
841
- const mainNav = document.getElementById('mainNav');
842
-
843
- navToggle.addEventListener('click', () => {
844
- mainNav.classList.toggle('active');
845
- });
846
-
847
- // Smooth scrolling for anchor links
848
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
849
- anchor.addEventListener('click', function (e) {
850
- e.preventDefault();
851
-
852
- // Close mobile menu if open
853
- mainNav.classList.remove('active');
854
-
855
- const targetId = this.getAttribute('href');
856
- const targetElement = document.querySelector(targetId);
857
-
858
- if (targetElement) {
859
- window.scrollTo({
860
- top: targetElement.offsetTop - 80,
861
- behavior: 'smooth'
862
- });
863
- }
864
- });
865
- });
866
-
867
- // Add scroll effect to header
868
- window.addEventListener('scroll', () => {
869
- const header = document.querySelector('header');
870
- if (window.scrollY > 100) {
871
- header.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
872
- } else {
873
- header.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
874
  }
875
- });
876
 
877
- // Add animation to feature cards on scroll
878
- const featureCards = document.querySelectorAll('.feature-card');
879
-
880
- const animateOnScroll = () => {
881
- featureCards.forEach(card => {
882
- const cardPosition = card.getBoundingClientRect().top;
883
- const screenPosition = window.innerHeight / 1.3;
884
-
885
- if (cardPosition < screenPosition) {
886
- card.style.opacity = '1';
887
- card.style.transform = 'translateY(0)';
888
- }
889
  });
890
- };
891
 
892
- // Set initial state for feature cards
893
- featureCards.forEach(card => {
894
- card.style.opacity = '0';
895
- card.style.transform = 'translateY(20px)';
896
- card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
 
 
 
 
 
 
 
 
897
  });
898
-
899
- // Run animation check on load and scroll
900
- window.addEventListener('load', animateOnScroll);
901
- window.addEventListener('scroll', animateOnScroll);
902
  </script>
903
  </body>
904
  </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>Architect Planner - Ajuste de Comportamento</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
  :root {
11
+ --primary: #6366f1;
12
+ --primary-dark: #4f46e5;
13
+ --secondary: #8b5cf6;
14
+ --success: #10b981;
15
+ --warning: #f59e0b;
16
+ --danger: #ef4444;
17
+ --bg-dark: #0f172a;
18
+ --bg-darker: #0b1120;
19
+ --text-primary: #e2e8f0;
20
+ --text-secondary: #94a3b8;
 
 
 
 
 
 
 
21
  }
22
 
23
  body {
24
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
25
+ background: var(--bg-dark);
26
+ color: var(--text-primary);
 
 
27
  }
28
 
29
+ .gradient-border {
30
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
31
+ padding: 1px;
32
+ border-radius: 1rem;
 
 
 
 
 
33
  }
34
 
35
+ .gradient-border-inner {
36
+ background: var(--bg-darker);
37
+ border-radius: 0.95rem;
 
 
 
 
38
  }
39
 
40
+ .typing-indicator {
 
 
41
  display: flex;
42
+ gap: 0.25rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  }
44
 
45
+ .typing-dot {
46
+ width: 0.5rem;
47
+ height: 0.5rem;
48
+ background: var(--text-secondary);
49
+ border-radius: 50%;
50
+ animation: typing 1.4s infinite ease-in-out;
51
  }
52
 
53
+ .typing-dot:nth-child(1) { animation-delay: -0.32s; }
54
+ .typing-dot:nth-child(2) { animation-delay: -0.16s; }
 
 
55
 
56
+ @keyframes typing {
57
+ 0%, 80%, 100% { transform: scale(0); }
58
+ 40% { transform: scale(1); }
 
59
  }
60
 
61
+ .fade-in {
62
+ animation: fadeIn 0.3s ease-out;
 
63
  }
64
 
65
+ @keyframes fadeIn {
66
+ from { opacity: 0; transform: translateY(10px); }
67
+ to { opacity: 1; transform: translateY(0); }
 
68
  }
69
 
70
+ .action-button {
71
+ transition: all 0.2s ease;
72
+ border-radius: 0.5rem;
73
+ font-weight: 500;
74
+ padding: 0.5rem 1rem;
75
+ display: inline-flex;
 
76
  align-items: center;
77
+ gap: 0.5rem;
78
  }
79
 
80
+ .action-button:hover {
81
+ transform: translateY(-2px);
82
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  }
84
 
85
+ .markdown-content {
86
+ line-height: 1.6;
 
 
87
  }
88
 
89
+ .markdown-content h3 {
 
 
90
  color: var(--primary);
91
+ margin-top: 1.5rem;
92
+ margin-bottom: 0.75rem;
93
+ font-size: 1.125rem;
94
  }
95
 
96
+ .markdown-content ul {
97
+ list-style-type: disc;
98
+ padding-left: 1.5rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  margin-bottom: 1rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
100
  }
101
 
102
+ .markdown-content li {
103
+ margin-bottom: 0.5rem;
 
104
  }
105
 
106
+ .markdown-content code {
107
+ background: rgba(30, 41, 59, 0.5);
108
+ padding: 0.25rem 0.5rem;
109
+ border-radius: 0.25rem;
110
+ font-family: 'Fira Code', monospace;
111
  }
112
 
113
+ .strategy-card {
114
+ background: rgba(30, 41, 59, 0.3);
115
+ border: 1px solid rgba(71, 85, 105, 0.3);
116
+ border-radius: 0.75rem;
117
+ padding: 1rem;
118
  margin-bottom: 1rem;
 
 
 
 
 
 
 
 
 
 
 
 
119
  }
120
 
121
+ .strategy-card:hover {
122
+ border-color: var(--primary);
123
+ background: rgba(99, 102, 241, 0.05);
 
124
  }
125
 
126
+ .checkbox-custom {
127
+ appearance: none;
128
+ width: 1.25rem;
129
+ height: 1.25rem;
130
+ border: 2px solid var(--text-secondary);
131
+ border-radius: 0.25rem;
 
 
 
 
132
  position: relative;
133
+ cursor: pointer;
134
+ transition: all 0.2s;
135
  }
136
 
137
+ .checkbox-custom:checked {
138
+ background: var(--primary);
139
+ border-color: var(--primary);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  }
141
 
142
+ .checkbox-custom:checked::after {
143
+ content: '✓';
144
+ position: absolute;
145
  color: white;
146
+ font-size: 0.8rem;
147
+ top: 50%;
148
+ left: 50%;
149
+ transform: translate(-50%, -50%);
150
  }
151
 
152
+ .decision-log {
153
+ border-left: 3px solid var(--primary);
154
+ padding-left: 1rem;
155
+ margin-left: 1rem;
 
 
156
  }
157
 
158
+ .version-badge {
159
+ display: inline-block;
160
+ padding: 0.25rem 0.5rem;
161
+ border-radius: 0.25rem;
162
+ font-size: 0.75rem;
163
+ font-weight: 600;
164
+ margin-left: 0.5rem;
 
 
 
 
 
 
165
  }
166
 
167
+ .version-badge.v1 { background: rgba(16, 185, 129, 0.2); color: var(--success); }
168
+ .version-badge.v1_1 { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
169
+ .version-badge.v1_2 { background: rgba(147, 51, 234, 0.2); color: #9333ea; }
 
 
 
 
 
 
 
 
170
 
171
+ .tooltip {
172
+ position: relative;
173
+ display: inline-block;
174
  }
175
 
176
+ .tooltip .tooltiptext {
177
+ visibility: hidden;
178
+ background-color: var(--bg-darker);
179
+ color: var(--text-primary);
180
  text-align: center;
181
+ border-radius: 0.375rem;
182
+ padding: 0.5rem;
183
+ position: absolute;
184
+ z-index: 1;
185
+ bottom: 125%;
186
+ left: 50%;
187
+ transform: translateX(-50%);
188
+ opacity: 0;
189
+ transition: opacity 0.3s;
190
+ white-space: nowrap;
191
+ font-size: 0.75rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  }
193
 
194
+ .tooltip:hover .tooltiptext {
195
+ visibility: visible;
196
+ opacity: 1;
197
  }
198
  </style>
199
  </head>
200
+ <body class="min-h-screen">
201
+ <div class="flex flex-col h-screen">
202
+ <!-- Header -->
203
+ <header class="bg-bg-darker border-b border-slate-800 px-6 py-4">
204
+ <div class="flex items-center justify-between">
205
+ <div class="flex items-center gap-3">
206
+ <div class="w-10 h-10 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-xl flex items-center justify-center text-xl shadow-lg shadow-indigo-500/20">
207
+ <i class="fas fa-brain"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
208
  </div>
209
+ <div>
210
+ <h1 class="font-bold text-white text-lg">Architect Planner</h1>
211
+ <p class="text-xs text-slate-400">Parceiro Técnico de Co-criação</p>
212
  </div>
213
  </div>
214
+ <div class="flex items-center gap-4">
215
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-slate-400 hover:text-white transition-colors">
216
+ Built with anycoder
217
+ </a>
218
+ <div class="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_8px_#10b981]"></div>
219
+ </div>
220
  </div>
221
+ </header>
 
 
 
 
222
 
223
+ <div class="flex flex-1 overflow-hidden">
224
+ <!-- Sidebar - Chat History -->
225
+ <div class="w-80 bg-slate-900 border-r border-slate-800 flex flex-col">
226
+ <div class="p-4 border-b border-slate-800">
227
+ <h3 class="text-sm font-semibold text-white">Histórico de Decisões</h3>
 
 
 
 
 
 
 
 
228
  </div>
229
+ <div class="flex-1 overflow-y-auto p-4 space-y-4">
230
+ <div class="decision-log">
231
+ <div class="flex items-center gap-2 mb-2">
232
+ <span class="text-xs text-slate-400">v1.0</span>
233
+ <span class="version-badge v1">Arquitetura Base</span>
234
+ </div>
235
+ <p class="text-sm text-slate-300">Estrutura inicial do plugin definida com React e TailwindCSS</p>
236
  </div>
237
+
238
+ <div class="decision-log">
239
+ <div class="flex items-center gap-2 mb-2">
240
+ <span class="text-xs text-slate-400">v1.1</span>
241
+ <span class="version-badge v1_1">Worker Python</span>
242
+ </div>
243
+ <p class="text-sm text-slate-300">Adicionado worker para processamento assíncrono</p>
244
  </div>
 
 
245
  </div>
246
+ </div>
247
+
248
+ <!-- Main Content -->
249
+ <div class="flex-1 flex flex-col overflow-hidden">
250
+ <!-- Chat Interface -->
251
+ <div class="flex-1 overflow-y-auto p-6 space-y-6">
252
+ <!-- Initial Message -->
253
+ <div class="gradient-border">
254
+ <div class="gradient-border-inner p-6">
255
+ <div class="flex items-start gap-4">
256
+ <div class="w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center flex-shrink-0">
257
+ <i class="fas fa-robot text-white text-sm"></i>
258
+ </div>
259
+ <div>
260
+ <p class="text-sm text-slate-300 mb-4">Olá! Sou seu parceiro técnico de co-criação. Como posso ajudar a desenvolver sua ideia hoje?</p>
261
+
262
+ <div class="flex gap-2">
263
+ <button class="action-button bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg">
264
+ <i class="fas fa-lightbulb"></i> Explicar conceito
265
+ </button>
266
+ <button class="action-button bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg">
267
+ <i class="fas fa-cogs"></i> Ver estratégias
268
+ </button>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
  </div>
274
+
275
+ <!-- Example: User asks about anti-bot -->
276
+ <div class="flex justify-end">
277
+ <div class="gradient-border">
278
+ <div class="gradient-border-inner p-4 max-w-md">
279
+ <p class="text-sm text-white">Como funciona anti-bot?</p>
280
+ </div>
281
+ </div>
282
  </div>
283
+
284
+ <!-- Planner Response with Options -->
285
+ <div class="gradient-border fade-in">
286
+ <div class="gradient-border-inner p-6">
287
+ <div class="flex items-start gap-4">
288
+ <div class="w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center flex-shrink-0">
289
+ <i class="fas fa-robot text-white text-sm"></i>
290
+ </div>
291
+ <div class="markdown-content">
292
+ <h3>📘 Explicação: Anti-Bot</h3>
293
+ <p><strong>O que é:</strong> Técnicas para evitar que sistemas automatizados (bots) interajam com seu aplicativo de maneiras indesejadas.</p>
294
+
295
+ <p><strong>Como funciona:</strong> Combina múltiplas camadas de proteção para tornar difícil para bots imitar comportamento humano enquanto mantém a usabilidade para usuários reais.</p>
296
+
297
+ <p><strong>Quando usar:</strong> Quando seu aplicativo está sujeito a scraping, ataques automatizados ou uso abusivo de recursos.</p>
298
+
299
+ <p><strong>Riscos:</strong> Pode aumentar complexidade e custo operacional. Requer monitoramento contínuo para evitar falsos positivos.</p>
300
+
301
+ <h3>🧠 Estratégias Possíveis</h3>
302
+
303
+ <!-- Strategy 1 -->
304
+ <div class="strategy-card">
305
+ <div class="flex items-start gap-3">
306
+ <input type="checkbox" class="checkbox-custom mt-1" id="ip-residential">
307
+ <div>
308
+ <h4 class="font-semibold text-white mb-1">Rotação de IP (Residencial)</h4>
309
+ <p class="text-sm text-slate-300 mb-2">Usa IPs de provedores residenciais para parecer tráfego legítimo.</p>
310
+ <div class="flex gap-4 text-xs">
311
+ <span class="text-green-400">✔️ Alta legitimidade</span>
312
+ <span class="text-yellow-400">⚠️ Custo elevado</span>
313
+ <span class="text-blue-400">🧩 Complexidade média</span>
314
+ <span class="text-purple-400">📈 Escalável</span>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Strategy 2 -->
321
+ <div class="strategy-card">
322
+ <div class="flex items-start gap-3">
323
+ <input type="checkbox" class="checkbox-custom mt-1" id="ip-datacenter">
324
+ <div>
325
+ <h4 class="font-semibold text-white mb-1">Rotação de IP (Datacenter)</h4>
326
+ <p class="text-sm text-slate-300 mb-2">IPs mais baratos de data centers, detectáveis por alguns sistemas.</p>
327
+ <div class="flex gap-4 text-xs">
328
+ <span class="text-green-400">✔️ Baixo custo</span>
329
+ <span class="text-yellow-400">⚠️ Fácil detecção</span>
330
+ <span class="text-blue-400">🧩 Complexidade baixa</span>
331
+ <span class="text-purple-400">📈 Escalável</span>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Strategy 3 -->
338
+ <div class="strategy-card">
339
+ <div class="flex items-start gap-3">
340
+ <input type="checkbox" class="checkbox-custom mt-1" id="user-agent">
341
+ <div>
342
+ <h4 class="font-semibold text-white mb-1">Rotação de User-Agent</h4>
343
+ <p class="text-sm text-slate-300 mb-2">Altera identificadores de navegador para evitar padrões detectáveis.</p>
344
+ <div class="flex gap-4 text-xs">
345
+ <span class="text-green-400">✔️ Implementação simples</span>
346
+ <span class="text-yellow-400">⚠️ Eficácia limitada</span>
347
+ <span class="text-blue-400">🧩 Complexidade baixa</span>
348
+ <span class="text-purple-400">📈 Escalável</span>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- Strategy 4 -->
355
+ <div class="strategy-card">
356
+ <div class="flex items-start gap-3">
357
+ <input type="checkbox" class="checkbox-custom mt-1" id="rate-limit">
358
+ <div>
359
+ <h4 class="font-semibold text-white mb-1">Controle de Frequência</h4>
360
+ <p class="text-sm text-slate-300 mb-2">Limita requisições por IP/usuário para evitar abuso.</p>
361
+ <div class="flex gap-4 text-xs">
362
+ <span class="text-green-400">✔️ Proteção básica efetiva</span>
363
+ <span class="text-yellow-400">⚠️ Pode afetar UX</span>
364
+ <span class="text-blue-400">🧩 Complexidade média</span>
365
+ <span class="text-purple-400">📈 Escalável</span>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Strategy 5 -->
372
+ <div class="strategy-card">
373
+ <div class="flex items-start gap-3">
374
+ <input type="checkbox" class="checkbox-custom mt-1" id="captcha">
375
+ <div>
376
+ <h4 class="font-semibold text-white mb-1">Tratamento de CAPTCHA</h4>
377
+ <p class="text-sm text-slate-300 mb-2">Soluções para resolver ou evitar CAPTCHAs em fluxos automatizados.</p>
378
+ <div class="flex gap-4 text-xs">
379
+ <span class="text-green-400">✔️ Alta efetividade</span>
380
+ <span class="text-yellow-400">⚠️ Alto custo operacional</span>
381
+ <span class="text-blue-400">🧩 Complexidade alta</span>
382
+ <span class="text-purple-400">📈 Limitada</span>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Action Buttons -->
389
+ <div class="mt-6 pt-4 border-t border-slate-800">
390
+ <h4 class="text-sm font-semibold text-white mb-3">Deseja aplicar alguma estratégia ao blueprint?</h4>
391
+ <div class="flex flex-wrap gap-2">
392
+ <button class="action-button bg-green-600 hover:bg-green-500 text-white px-4 py-2">
393
+ <i class="fas fa-plus"></i> Adicionar Selecionadas
394
+ </button>
395
+ <button class="action-button bg-blue-600 hover:bg-blue-500 text-white px-4 py-2">
396
+ <i class="fas fa-edit"></i> Ajustar Blueprint
397
+ </button>
398
+ <button class="action-button bg-slate-600 hover:bg-slate-500 text-white px-4 py-2">
399
+ <i class="fas fa-times"></i> Apenas Entender
400
+ </button>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
  </div>
 
 
 
 
 
 
407
 
408
+ <!-- Example: User requests more info -->
409
+ <div class="flex justify-end">
410
+ <div class="gradient-border">
411
+ <div class="gradient-border-inner p-4 max-w-md">
412
+ <p class="text-sm text-white">Quais são os riscos da rotação de IP?</p>
413
+ </div>
 
 
 
 
 
 
 
 
414
  </div>
415
  </div>
416
+
417
+ <!-- Planner Detailed Response -->
418
+ <div class="gradient-border fade-in">
419
+ <div class="gradient-border-inner p-6">
420
+ <div class="flex items-start gap-4">
421
+ <div class="w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center flex-shrink-0">
422
+ <i class="fas fa-robot text-white text-sm"></i>
423
+ </div>
424
+ <div class="markdown-content">
425
+ <h3>⚠️ Riscos da Rotação de IP</h3>
426
+
427
+ <h4 class="font-semibold text-white mt-4 mb-2">1. Bloqueio por Provedores</h4>
428
+ <p class="text-sm text-slate-300 mb-3">Alguns serviços detectam e bloqueiam IPs conhecidos de data centers ou serviços de proxy.</p>
429
+
430
+ <h4 class="font-semibold text-white mb-2">2. Custo Operacional</h4>
431
+ <p class="text-sm text-slate-300 mb-3">Serviços de IPs residenciais podem ser caros em escala, especialmente para aplicações com alto volume de requisições.</p>
432
+
433
+ <h4 class="font-semibold text-white mb-2">3. Latência Aumentada</h4>
434
+ <p class="text-sm text-slate-300 mb-3">A rotação constante de IPs pode introduzir latência adicional nas requisições.</p>
435
+
436
+ <h4 class="font-semibold text-white mb-2">4. Complexidade de Gerenciamento</h4>
437
+ <p class="text-sm text-slate-300 mb-3">Requer lógica adicional para gerenciar pools de IPs, falhas e recuperação.</p>
438
+
439
+ <div class="mt-4 pt-4 border-t border-slate-800">
440
+ <div class="flex gap-2">
441
+ <button class="action-button bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg">
442
+ <i class="fas fa-arrow-left"></i> Voltar às Estratégias
443
+ </button>
444
+ <button class="action-button bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg">
445
+ <i class="fas fa-question-circle"></i> Perguntar sobre outra estratégia
446
+ </button>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
  </div>
452
  </div>
453
+
454
+ <!-- Example: User approves changes -->
455
+ <div class="flex justify-end">
456
+ <div class="gradient-border">
457
+ <div class="gradient-border-inner p-4 max-w-md">
458
+ <p class="text-sm text-white">Vamos adicionar rotação de IP residencial e controle de frequência</p>
459
+ </div>
 
460
  </div>
461
  </div>
 
 
 
 
462
 
463
+ <!-- Confirmation and Update -->
464
+ <div class="gradient-border fade-in">
465
+ <div class="gradient-border-inner p-6">
466
+ <div class="flex items-start gap-4">
467
+ <div class="w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center flex-shrink-0">
468
+ <i class="fas fa-robot text-white text-sm"></i>
469
+ </div>
470
+ <div class="markdown-content">
471
+ <h3>✅ Atualização Aprovada</h3>
472
+ <p class="text-sm text-slate-300 mb-4">As seguintes estratégias foram adicionadas ao blueprint atual:</p>
473
+
474
+ <div class="space-y-3 mb-6">
475
+ <div class="flex items-center gap-3">
476
+ <i class="fas fa-check-circle text-green-400"></i>
477
+ <div>
478
+ <p class="font-semibold text-white">Rotação de IP (Residencial)</p>
479
+ <p class="text-xs text-slate-400">Adicionado worker para gerenciamento de pool de IPs</p>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="flex items-center gap-3">
484
+ <i class="fas fa-check-circle text-green-400"></i>
485
+ <div>
486
+ <p class="font-semibold text-white">Controle de Frequência</p>
487
+ <p class="text-xs text-slate-400">Middleware de rate-limiting configurado</p>
488
+ </div>
489
+ </div>
490
+ </div>
491
+
492
+ <div class="decision-log">
493
+ <div class="flex items-center gap-2 mb-2">
494
+ <span class="text-xs text-slate-400">v1.2</span>
495
+ <span class="version-badge v1_2">Anti-bot com rotação de IP</span>
496
+ </div>
497
+ <p class="text-sm text-slate-300">Estratégias de proteção contra bots implementadas (aprovado pelo usuário)</p>
498
+ </div>
499
+
500
+ <div class="mt-6 pt-4 border-t border-slate-800">
501
+ <h4 class="text-sm font-semibold text-white mb-3">Próximos passos:</h4>
502
+ <div class="flex flex-wrap gap-2">
503
+ <button class="action-button bg-blue-600 hover:bg-blue-500 text-white px-4 py-2">
504
+ <i class="fas fa-plus"></i> Adicionar outra funcionalidade
505
+ </button>
506
+ <button class="action-button bg-purple-600 hover:bg-purple-500 text-white px-4 py-2">
507
+ <i class="fas fa-search"></i> Analisar impacto técnico
508
+ </button>
509
+ <button class="action-button bg-green-600 hover:bg-green-500 text-white px-4 py-2">
510
+ <i class="fas fa-check"></i> Finalizar Planejamento
511
+ </button>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ </div>
517
  </div>
 
 
 
 
 
 
 
518
  </div>
519
+
520
+ <!-- Input Area -->
521
+ <div class="p-4 border-t border-slate-800 bg-slate-900">
522
+ <div class="relative">
523
+ <textarea
524
+ class="w-full bg-slate-800 border border-slate-700 rounded-xl p-3 pr-12 text-sm text-white focus:border-indigo-500 outline-none resize-none h-20 placeholder-slate-400 transition-all"
525
+ placeholder="Faça uma pergunta ou solicite explicações..."
526
+ ></textarea>
527
+ <button class="absolute right-3 bottom-3 p-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors">
528
+ <i class="fas fa-paper-plane"></i>
529
+ </button>
530
  </div>
531
+ <div class="flex justify-between items-center mt-2">
532
+ <div class="flex gap-2">
533
+ <button class="text-xs text-slate-400 hover:text-white transition-colors">
534
+ <i class="fas fa-paperclip mr-1"></i> Anexar contexto
535
+ </button>
536
+ <button class="text-xs text-slate-400 hover:text-white transition-colors">
537
+ <i class="fas fa-history mr-1"></i> Histórico
538
+ </button>
539
+ </div>
540
+ <div class="text-xs text-slate-500">
541
+ <i class="fas fa-info-circle mr-1"></i> Modo: Co-criação Ativa
542
+ </div>
 
 
543
  </div>
 
 
 
 
 
 
 
 
 
544
  </div>
545
  </div>
546
+
547
+ <!-- Right Sidebar - Blueprint Status -->
548
+ <div class="w-64 bg-slate-900 border-l border-slate-800 flex flex-col">
549
+ <div class="p-4 border-b border-slate-800">
550
+ <h3 class="text-sm font-semibold text-white">Status do Blueprint</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
551
  </div>
552
+ <div class="flex-1 overflow-y-auto p-4">
553
+ <div class="space-y-4">
554
+ <div>
555
+ <h4 class="text-xs text-slate-400 uppercase tracking-wider mb-2">Versão Atual</h4>
556
+ <div class="flex items-center gap-2">
557
+ <span class="text-lg font-bold text-white">v1.2</span>
558
+ <span class="version-badge v1_2">Anti-bot</span>
559
+ </div>
560
+ </div>
561
+
562
+ <div>
563
+ <h4 class="text-xs text-slate-400 uppercase tracking-wider mb-2">Componentes</h4>
564
+ <div class="space-y-2">
565
+ <div class="flex items-center gap-2">
566
+ <i class="fas fa-check-circle text-green-400 text-xs"></i>
567
+ <span class="text-sm text-slate-300">Arquitetura Base</span>
568
+ </div>
569
+ <div class="flex items-center gap-2">
570
+ <i class="fas fa-check-circle text-green-400 text-xs"></i>
571
+ <span class="text-sm text-slate-300">Worker Python</span>
572
+ </div>
573
+ <div class="flex items-center gap-2">
574
+ <i class="fas fa-check-circle text-green-400 text-xs"></i>
575
+ <span class="text-sm text-slate-300">Anti-bot (IP + Rate)</span>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <div>
581
+ <h4 class="text-xs text-slate-400 uppercase tracking-wider mb-2">Próximas Decisões</h4>
582
+ <div class="space-y-1">
583
+ <div class="flex items-center gap-2 text-xs text-slate-400">
584
+ <i class="fas fa-circle text-yellow-500"></i>
585
+ <span>Autenticação</span>
586
+ </div>
587
+ <div class="flex items-center gap-2 text-xs text-slate-400">
588
+ <i class="fas fa-circle text-yellow-500"></i>
589
+ <span>Logging e Monitoramento</span>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
  </div>
595
+ <div class="p-4 border-t border-slate-800">
596
+ <button class="w-full bg-slate-700 hover:bg-slate-600 text-white py-2 rounded-lg transition-colors">
597
+ <i class="fas fa-eye mr-2"></i> Visualizar Blueprint Completo
598
+ </button>
 
 
 
 
599
  </div>
600
  </div>
 
 
 
601
  </div>
602
+ </div>
 
 
 
 
 
603
 
604
  <script>
605
+ // Simple interaction handlers
606
+ document.addEventListener('DOMContentLoaded', function() {
607
+ // Auto-scroll to bottom
608
+ const chatContainer = document.querySelector('.flex-1.overflow-y-auto.p-6');
609
+ if (chatContainer) {
610
+ chatContainer.scrollTop = chatContainer.scrollHeight;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
611
  }
 
612
 
613
+ // Button interactions
614
+ document.querySelectorAll('.action-button').forEach(button => {
615
+ button.addEventListener('click', function() {
616
+ // Simple visual feedback
617
+ this.style.transform = 'translateY(1px)';
618
+ setTimeout(() => {
619
+ this.style.transform = '';
620
+ }, 150);
621
+ });
 
 
 
622
  });
 
623
 
624
+ // Checkbox interactions
625
+ document.querySelectorAll('.checkbox-custom').forEach(checkbox => {
626
+ checkbox.addEventListener('change', function() {
627
+ const card = this.closest('.strategy-card');
628
+ if (this.checked) {
629
+ card.style.borderColor = 'var(--primary)';
630
+ card.style.background = 'rgba(99, 102, 241, 0.05)';
631
+ } else {
632
+ card.style.borderColor = 'rgba(71, 85, 105, 0.3)';
633
+ card.style.background = 'rgba(30, 41, 59, 0.3)';
634
+ }
635
+ });
636
+ });
637
  });
 
 
 
 
638
  </script>
639
  </body>
640
  </html>