Hugging Face's logo

Spaces:
gaur3009
/
minme
Running

App Files Community
gaur3009 commited on
Commit
65ab5ea
·
verified ·
1 Parent(s): aac82d1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +130 -4
index.html CHANGED
@@ -287,6 +287,15 @@
287
  0% { transform: rotate(45deg) translateX(-100%); }
288
  100% { transform: rotate(45deg) translateX(100%); }
289
  }
 
 
 
 
 
 
 
 
 
290
  </style>
291
  </head>
292
  <body>
@@ -438,7 +447,7 @@
438
  <div class="text-cyan-200">Faster Campaign Creation</div>
439
  </div>
440
  <div>
441
- <div class="text-4xl font-bold neon-pink mb-2">47%</div>
442
  <div class="text-cyan-200">Higher Average CTR</div>
443
  </div>
444
  <div>
@@ -561,10 +570,112 @@
561
  </div>
562
  </div>
563
 
564
- <!-- Additional layers would follow the same pattern -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
565
 
566
  <div class="text-center mt-12">
567
- <button class="cyber-button">
568
  <i class="fas fa-layer-group mr-2"></i>Explore All 8 Layers
569
  </button>
570
  </div>
@@ -711,7 +822,7 @@
711
  <span>A/B testing capabilities</span>
712
  </li>
713
  <li class="flex items-start">
714
- <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i>
715
  <span>Priority support</span>
716
  </li>
717
  </ul>
@@ -902,6 +1013,21 @@
902
 
903
  setTimeout(typeWriter, 1000);
904
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
905
  </script>
906
  </body>
907
  </html>
 
287
  0% { transform: rotate(45deg) translateX(-100%); }
288
  100% { transform: rotate(45deg) translateX(100%); }
289
  }
290
+
291
+ .additional-layer {
292
+ display: none;
293
+ }
294
+
295
+ .show-all .additional-layer {
296
+ display: block;
297
+ animation: fadeIn 0.8s ease;
298
+ }
299
  </style>
300
  </head>
301
  <body>
 
447
  <div class="text-cyan-200">Faster Campaign Creation</div>
448
  </div>
449
  <div>
450
+ <div class="text-4xl font-bold neon-pink mb-极">47%</div>
451
  <div class="text-cyan-200">Higher Average CTR</div>
452
  </div>
453
  <div>
 
570
  </div>
571
  </div>
572
 
573
+ <!-- Layer 5 -->
574
+ <div class="futuristic-card p-6 additional-layer">
575
+ <div class="flex items-center mb-6">
576
+ <div class="text-3xl font-bold bg-yellow-900 w-16 h-16 rounded-full flex items-center justify-center neon-text mr-6">5</div>
577
+ <h3 class="text-2xl font-bold neon-text">Tagline & CTA Creator</h3>
578
+ </div>
579
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
580
+ <div>
581
+ <p class="text-cyan-100 mb-4">AI crafts compelling taglines and calls-to-action that drive conversions.</p>
582
+ <div class="flex flex-wrap gap-2">
583
+ <span class="px-3 py-1 bg-yellow-900 bg-opacity-50 rounded-full text-yellow-300">GPT-2 Fine-tuned</span>
584
+ <span class="px-3 py-1 bg-yellow-900 bg-opacity-50 rounded-full text-yellow-300">AIDA Framework</span>
585
+ </div>
586
+ </div>
587
+ <div>
588
+ <div class="terminal-input p-4">
589
+ <span class="text-green-500">$</span> Generated taglines:<br>
590
+ <span class="text-yellow-300">"Sound that doesn't cost the earth"</span><br>
591
+ <span class="text-yellow-300">"Eco-friendly audio for the next generation"</span><br><br>
592
+ <span class="text-green-500">$</span> CTAs:<br>
593
+ <span class="text-cyan-500">>></span> "Shop now and get 20% off your first order!"
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </div>
598
+
599
+ <!-- Layer 6 -->
600
+ <div class="futuristic-card p-6 additional-layer">
601
+ <div class="flex items-center mb-6">
602
+ <div class="text-3xl font-bold bg-orange-900 w-16 h-16 rounded-full flex items-center justify-center neon-pink mr-6">6</div>
603
+ <h3 class="text-2xl font-bold neon-pink">Feedback & Editor</h3>
604
+ </div>
605
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
606
+ <div>
607
+ <p class="text-cyan-100 mb-4">Human-AI collaboration tools for refining campaign elements.</p>
608
+ <div class="flex flex-wrap gap-2">
609
+ <span class="px-3 py-1 bg-orange-900 bg-opacity-50 rounded-full text-orange-300">WYSIWYG Editor</span>
610
+ <span class="px-3 py-1 bg-orange-900 bg-opacity-50 rounded-full text-orange-300">Prompt Rewriter</span>
611
+ </div>
612
+ </div>
613
+ <div>
614
+ <div class="terminal-input p-4">
615
+ <span class="text-green-500">$</span> AI Feedback:<br>
616
+ <span class="text-cyan-500">>></span> "Consider adding more emojis for Gen Z appeal"<br>
617
+ <span class="text-cyan-500">>></span> "Increase contrast in visuals for better engagement"<br>
618
+ <span class="text-cyan-500">>></span> "Add sustainability certifications to build trust"
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </div>
623
+
624
+ <!-- Layer 7 -->
625
+ <div class="futuristic-card p-6 additional-layer">
626
+ <div class="flex items-center mb-6">
627
+ <div class="text-3xl font-bold bg-red-900 w-16 h-16 rounded-full flex items-center justify-center matrix-text mr-6">7</div>
628
+ <h3 class="text-2xl font-bold matrix-text">A/B Testing & Performance</h3>
629
+ </div>
630
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
631
+ <div>
632
+ <p class="text-cyan-100 mb-4">Predictive analytics and multi-variant testing for optimal results.</p>
633
+ <div class="flex flex-wrap gap-2">
634
+ <span class="px-3 py-1 bg-red-900 bg-opacity-50 rounded-full text-red-300">LSTM</span>
635
+ <span class="px-3 py-1 bg-red-900 bg-opacity-50 rounded-full text-red-300">XGBoost</span>
636
+ </div>
637
+ </div>
638
+ <div>
639
+ <div class="terminal-input p-4">
640
+ <span class="text-green-500">$</span> Performance Prediction:<br>
641
+ <span class="text-cyan-500">>></span> Estimated CTR: 4.2-5.8%<br>
642
+ <span class="text-cyan-500">>></span> Conversion Rate: 2.2-3.1%<br>
643
+ <span class="text-cyan-500">>></span> Cost Per Click: $0.42-0.58<br>
644
+ <span class="text-cyan-500">>></span> ROAS: 3.2x-4.1x
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+
650
+ <!-- Layer 8 -->
651
+ <div class="futuristic-card p-6 additional-layer">
652
+ <div class="flex items-center mb-6">
653
+ <div class="text-3xl font-bold bg-indigo-900 w-16 h-16 rounded-full flex items-center justify-center neon-text mr-6">8</div>
654
+ <h3 class="text-2xl font-bold neon-text">Campaign Deployment</h3>
655
+ </div>
656
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
657
+ <div>
658
+ <p class="text-cyan-100 mb-4">Automated deployment across all digital marketing channels.</p>
659
+ <div class="flex flex-wrap gap-2">
660
+ <span class="px-3 py-1 bg-indigo-900 bg-opacity-50 rounded-full text-indigo-300">Meta API</span>
661
+ <span class="px-3 py-1 bg-indigo-900 bg-opacity-50 rounded-full text-indigo-300">Google Ads</span>
662
+ <span class="px-3 py-1 bg-indigo-900 bg-opacity-50 rounded-full text-indigo-300">TikTok API</span>
663
+ </div>
664
+ </div>
665
+ <div>
666
+ <div class="terminal-input p-4">
667
+ <span class="text-green-500">$</span> Deployment Status:<br>
668
+ <span class="text-cyan-500">>></span> Facebook: Campaign live<br>
669
+ <span class="text-cyan-500">>></span> Instagram: Ads running<br>
670
+ <span class="text-cyan-500">>></span> Google Ads: Active<br>
671
+ <span class="text-cyan-500">>></span> TikTok: Scheduled
672
+ </div>
673
+ </div>
674
+ </div>
675
+ </div>
676
 
677
  <div class="text-center mt-12">
678
+ <button id="toggle-layers" class="cyber-button">
679
  <i class="fas fa-layer-group mr-2"></i>Explore All 8 Layers
680
  </button>
681
  </div>
 
822
  <span>A/B testing capabilities</span>
823
  </li>
824
  <li class="flex items-start">
825
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-3"></极>
826
  <span>Priority support</span>
827
  </li>
828
  </ul>
 
1013
 
1014
  setTimeout(typeWriter, 1000);
1015
  }
1016
+
1017
+ // Toggle additional layers
1018
+ const toggleButton = document.getElementById('toggle-layers');
1019
+ if (toggleButton) {
1020
+ toggleButton.addEventListener('click', function() {
1021
+ const featuresSection = document.getElementById('features-page');
1022
+ featuresSection.classList.toggle('show-all');
1023
+
1024
+ if (featuresSection.classList.contains('show-all')) {
1025
+ this.innerHTML = '<i class="fas fa-layer-group mr-2"></i>Show Less Layers';
1026
+ } else {
1027
+ this.innerHTML = '<i class="fas fa-layer-group mr-2"></i>Explore All 8 Layers';
1028
+ }
1029
+ });
1030
+ }
1031
  </script>
1032
  </body>
1033
  </html>