Hugging Face's logo

Spaces:
docto41
/
ultradns-pro
Running

App Files Community
docto41 commited on
Commit
c7a7391
·
verified ·
1 Parent(s): fa056b7

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +548 -139
  2. prompts.txt +2 -1
index.html CHANGED
@@ -69,6 +69,46 @@
69
  .glow {
70
  box-shadow: 0 0 15px rgba(79, 70, 229, 0.6);
71
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  </style>
73
  </head>
74
  <body class="bg-gray-50 font-sans">
@@ -82,16 +122,16 @@
82
  <span class="text-xl font-bold text-gray-900">1CLICK <span class="text-indigo-600">PRO</span></span>
83
  </div>
84
  <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
85
- <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
86
  <i class="fas fa-home mr-2"></i> Accueil
87
  </a>
88
- <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
89
  <i class="fas fa-globe mr-2"></i> Domaines
90
  </a>
91
- <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
92
  <i class="fas fa-server mr-2"></i> Hébergement
93
  </a>
94
- <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
95
  <i class="fas fa-user-shield mr-2"></i> SSL
96
  </a>
97
  </div>
@@ -99,23 +139,43 @@
99
  <div class="hidden sm:ml-6 sm:flex sm:items-center">
100
  <div class="relative ml-3">
101
  <div class="flex space-x-4">
102
- <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
103
  <i class="fas fa-sign-in-alt mr-2"></i> Connexion
104
  </button>
105
- <button class="bg-white border border-indigo-600 text-indigo-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
106
  <i class="fas fa-user-plus mr-2"></i> Inscription
107
  </button>
108
  </div>
109
  </div>
110
  </div>
111
  <div class="-mr-2 flex items-center sm:hidden">
112
- <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
113
  <span class="sr-only">Ouvrir le menu principal</span>
114
  <i class="fas fa-bars"></i>
115
  </button>
116
  </div>
117
  </div>
118
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  </nav>
120
 
121
  <!-- Hero Section -->
@@ -132,8 +192,8 @@
132
  <div class="mt-10 max-w-2xl mx-auto">
133
  <div class="domain-search bg-white rounded-lg overflow-hidden p-1">
134
  <div class="flex">
135
- <input type="text" class="flex-1 px-4 py-3 border-0 text-gray-900 focus:ring-0 focus:outline-none" placeholder="Recherchez votre nom de domaine...">
136
- <button class="bg-indigo-600 text-white px-6 py-3 font-medium hover:bg-indigo-700">
137
  <i class="fas fa-search mr-2"></i> Vérifier
138
  </button>
139
  </div>
@@ -171,7 +231,7 @@
171
  <div class="mt-20">
172
  <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
173
  <!-- Feature 1 -->
174
- <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-100">
175
  <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mx-auto">
176
  <i class="fas fa-globe text-xl"></i>
177
  </div>
@@ -185,11 +245,14 @@
185
  <i class="fas fa-bolt mr-1"></i> 3.7s propagation
186
  </span>
187
  </div>
 
 
 
188
  </div>
189
  </div>
190
 
191
  <!-- Feature 2 -->
192
- <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-100">
193
  <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-600 mx-auto">
194
  <i class="fas fa-lock text-xl"></i>
195
  </div>
@@ -203,11 +266,14 @@
203
  <i class="fas fa-check mr-1"></i> 100% sécurisé
204
  </span>
205
  </div>
 
 
 
206
  </div>
207
  </div>
208
 
209
  <!-- Feature 3 -->
210
- <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-100">
211
  <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mx-auto">
212
  <i class="fas fa-tachometer-alt text-xl"></i>
213
  </div>
@@ -221,11 +287,14 @@
221
  <i class="fas fa-rocket mr-1"></i> 99.99% uptime
222
  </span>
223
  </div>
 
 
 
224
  </div>
225
  </div>
226
 
227
  <!-- Feature 4 -->
228
- <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-100">
229
  <div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-100 text-pink-600 mx-auto">
230
  <i class="fab fa-google text-xl"></i>
231
  </div>
@@ -239,6 +308,9 @@
239
  <i class="fas fa-robot mr-1"></i> Automatisé
240
  </span>
241
  </div>
 
 
 
242
  </div>
243
  </div>
244
  </div>
@@ -301,6 +373,9 @@
301
  Instantané
302
  </span>
303
  </div>
 
 
 
304
  </div>
305
 
306
  <!-- Step 2 -->
@@ -317,6 +392,9 @@
317
  Automatisé
318
  </span>
319
  </div>
 
 
 
320
  </div>
321
 
322
  <!-- Step 3 -->
@@ -333,6 +411,9 @@
333
  3.7s
334
  </span>
335
  </div>
 
 
 
336
  </div>
337
 
338
  <!-- Step 4 -->
@@ -349,6 +430,9 @@
349
  Gratuit 1 an
350
  </span>
351
  </div>
 
 
 
352
  </div>
353
  </div>
354
  </div>
@@ -356,7 +440,7 @@
356
  </div>
357
 
358
  <div class="mt-16 text-center">
359
- <button class="pulse-animation px-8 py-4 bg-indigo-600 text-white rounded-lg text-lg font-bold hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
360
  <i class="fas fa-play-circle mr-2"></i> Essai gratuit 14 jours
361
  </button>
362
  </div>
@@ -381,7 +465,7 @@
381
  <h3 class="text-lg font-medium text-white">Connexion Administrateur</h3>
382
  </div>
383
  <div class="p-6">
384
- <form>
385
  <div>
386
  <label for="email" class="block text-sm font-medium text-gray-700">Email Admin</label>
387
  <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" value="[email protected]" readonly>
@@ -391,7 +475,7 @@
391
  <input type="password" id="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" value="Admin270574@">
392
  </div>
393
  <div class="mt-6">
394
- <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
395
  <i class="fas fa-sign-in-alt mr-2"></i> Se connecter
396
  </button>
397
  </div>
@@ -400,7 +484,7 @@
400
  </div>
401
 
402
  <!-- Dashboard Preview -->
403
- <div class="mt-16 bg-gray-900 rounded-xl overflow-hidden shadow-xl">
404
  <!-- Dashboard Header -->
405
  <div class="bg-gray-800 px-6 py-4 flex items-center justify-between">
406
  <div class="flex items-center">
@@ -411,8 +495,9 @@
411
  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
412
  <i class="fas fa-circle text-green-500 mr-1"></i> Connecté
413
  </span>
414
- <button class="text-gray-400 hover:text-white">
415
  <i class="fas fa-bell"></i>
 
416
  </button>
417
  </div>
418
  </div>
@@ -436,6 +521,9 @@
436
  </div>
437
  <p class="mt-1 text-xs text-gray-400">75% de votre quota</p>
438
  </div>
 
 
 
439
  </div>
440
 
441
  <!-- Stats Card 2 -->
@@ -455,6 +543,9 @@
455
  </div>
456
  <p class="mt-1 text-xs text-gray-400">Tous actifs</p>
457
  </div>
 
 
 
458
  </div>
459
 
460
  <!-- Stats Card 3 -->
@@ -474,6 +565,9 @@
474
  </div>
475
  <p class="mt-1 text-xs text-gray-400">Moyenne mondiale</p>
476
  </div>
 
 
 
477
  </div>
478
 
479
  <!-- Stats Card 4 -->
@@ -493,6 +587,9 @@
493
  </div>
494
  <p class="mt-1 text-xs text-gray-400">2 configurations requises</p>
495
  </div>
 
 
 
496
  </div>
497
  </div>
498
 
@@ -501,7 +598,7 @@
501
  <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
502
  <div class="px-6 py-4 border-b border-gray-700 flex justify-between items-center">
503
  <h3 class="text-lg font-medium text-white">Gestion des Domaines</h3>
504
- <button class="px-3 py-1 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700">
505
  <i class="fas fa-plus mr-1"></i> Ajouter
506
  </button>
507
  </div>
@@ -541,10 +638,10 @@
541
  <span class="text-green-500">●</span> Actif (3.2s)
542
  </td>
543
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
544
- <button class="text-indigo-400 hover:text-indigo-300 mr-3">
545
  <i class="fas fa-cog"></i>
546
  </button>
547
- <button class="text-red-400 hover:text-red-300">
548
  <i class="fas fa-trash"></i>
549
  </button>
550
  </td>
@@ -573,10 +670,10 @@
573
  <span class="text-green-500">●</span> Actif (2.8s)
574
  </td>
575
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
576
- <button class="text-indigo-400 hover:text-indigo-300 mr-3">
577
  <i class="fas fa-cog"></i>
578
  </button>
579
- <button class="text-red-400 hover:text-red-300">
580
  <i class="fas fa-trash"></i>
581
  </button>
582
  </td>
@@ -599,36 +696,36 @@
599
  <div class="bg-gray-700 rounded-lg p-4">
600
  <h4 class="text-md font-medium text-white mb-4">Méthodes de Paiement</h4>
601
  <div class="space-y-4">
602
- <div class="flex items-center justify-between p-3 bg-gray-600 rounded-lg">
603
  <div class="flex items-center">
604
  <div class="bg-white p-2 rounded-md">
605
  <i class="fab fa-cc-paypal text-blue-500 text-xl"></i>
606
  </div>
607
  <span class="ml-3 text-white">PayPal</span>
608
  </div>
609
- <button class="text-green-400 hover:text-green-300">
610
  <i class="fas fa-check-circle"></i>
611
  </button>
612
  </div>
613
- <div class="flex items-center justify-between p-3 bg-gray-600 rounded-lg">
614
  <div class="flex items-center">
615
  <div class="bg-white p-2 rounded-md">
616
  <i class="fab fa-cc-stripe text-purple-500 text-xl"></i>
617
  </div>
618
  <span class="ml-3 text-white">Stripe</span>
619
  </div>
620
- <button class="text-green-400 hover:text-green-300">
621
  <i class="fas fa-check-circle"></i>
622
  </button>
623
  </div>
624
- <div class="flex items-center justify-between p-3 bg-gray-600 rounded-lg">
625
  <div class="flex items-center">
626
  <div class="bg-white p-2 rounded-md">
627
  <i class="fas fa-credit-card text-gray-500 text-xl"></i>
628
  </div>
629
  <span class="ml-3 text-white">Carte Bancaire</span>
630
  </div>
631
- <button class="text-gray-400 hover:text-gray-300">
632
  <i class="fas fa-plus-circle"></i>
633
  </button>
634
  </div>
@@ -675,10 +772,10 @@
675
  </div>
676
  </div>
677
  <div class="mt-6 grid grid-cols-2 gap-4">
678
- <button class="flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
679
  <i class="fab fa-cc-paypal mr-2"></i> PayPal
680
  </button>
681
- <button class="flex items-center justify-center px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
682
  <i class="fab fa-cc-stripe mr-2"></i> Stripe
683
  </button>
684
  </div>
@@ -702,7 +799,7 @@
702
  <p class="mt-4 text-lg leading-6 text-indigo-200">
703
  Essayez notre plateforme pendant 14 jours sans engagement. Aucune carte de crédit requise.
704
  </p>
705
- <button class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
706
  <i class="fas fa-play-circle mr-2"></i> Essai gratuit
707
  </button>
708
  </div>
@@ -718,22 +815,22 @@
718
  </h3>
719
  <ul class="mt-4 space-y-4">
720
  <li>
721
- <a href="#" class="text-base text-gray-300 hover:text-white">
722
  Domaines
723
  </a>
724
  </li>
725
  <li>
726
- <a href="#" class="text-base text-gray-300 hover:text-white">
727
  Hébergement
728
  </a>
729
  </li>
730
  <li>
731
- <a href="#" class="text-base text-gray-300 hover:text-white">
732
  Certificats SSL
733
  </a>
734
  </li>
735
  <li>
736
- <a href="#" class="text-base text-gray-300 hover:text-white">
737
  DNS Premium
738
  </a>
739
  </li>
@@ -746,22 +843,22 @@
746
  </h3>
747
  <ul class="mt-4 space-y-4">
748
  <li>
749
- <a href="#" class="text-base text-gray-300 hover:text-white">
750
  Documentation
751
  </a>
752
  </li>
753
  <li>
754
- <a href="#" class="text-base text-gray-300 hover:text-white">
755
  Tutoriels
756
  </a>
757
  </li>
758
  <li>
759
- <a href="#" class="text-base text-gray-300 hover:text-white">
760
  Statut des services
761
  </a>
762
  </li>
763
  <li>
764
- <a href="#" class="text-base text-gray-300 hover:text-white">
765
  Support
766
  </a>
767
  </li>
@@ -774,22 +871,22 @@
774
  </h3>
775
  <ul class="mt-4 space-y-4">
776
  <li>
777
- <a href="#" class="text-base text-gray-300 hover:text-white">
778
  À propos
779
  </a>
780
  </li>
781
  <li>
782
- <a href="#" class="text-base text-gray-300 hover:text-white">
783
  Carrières
784
  </a>
785
  </li>
786
  <li>
787
- <a href="#" class="text-base text-gray-300 hover:text-white">
788
  Presse
789
  </a>
790
  </li>
791
  <li>
792
- <a href="#" class="text-base text-gray-300 hover:text-white">
793
  Contact
794
  </a>
795
  </li>
@@ -802,22 +899,22 @@
802
  </h3>
803
  <ul class="mt-4 space-y-4">
804
  <li>
805
- <a href="#" class="text-base text-gray-300 hover:text-white">
806
  Confidentialité
807
  </a>
808
  </li>
809
  <li>
810
- <a href="#" class="text-base text-gray-300 hover:text-white">
811
  Conditions
812
  </a>
813
  </li>
814
  <li>
815
- <a href="#" class="text-base text-gray-300 hover:text-white">
816
  Cookies
817
  </a>
818
  </li>
819
  <li>
820
- <a href="#" class="text-base text-gray-300 hover:text-white">
821
  RGPD
822
  </a>
823
  </li>
@@ -827,19 +924,19 @@
827
 
828
  <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
829
  <div class="flex space-x-6">
830
- <a href="#" class="text-gray-400 hover:text-gray-300">
831
  <span class="sr-only">Facebook</span>
832
  <i class="fab fa-facebook-f"></i>
833
  </a>
834
- <a href="#" class="text-gray-400 hover:text-gray-300">
835
  <span class="sr-only">Twitter</span>
836
  <i class="fab fa-twitter"></i>
837
  </a>
838
- <a href="#" class="text-gray-400 hover:text-gray-300">
839
  <span class="sr-only">Instagram</span>
840
  <i class="fab fa-instagram"></i>
841
  </a>
842
- <a href="#" class="text-gray-400 hover:text-gray-300">
843
  <span class="sr-only">LinkedIn</span>
844
  <i class="fab fa-linkedin-in"></i>
845
  </a>
@@ -853,13 +950,13 @@
853
 
854
  <!-- Floating Elements -->
855
  <div class="fixed bottom-6 right-6 z-50">
856
- <button class="pulse-animation p-4 bg-indigo-600 text-white rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
857
  <i class="fas fa-comment-dots text-xl"></i>
858
  </button>
859
  </div>
860
 
861
  <div class="fixed top-1/4 left-10 z-40 floating hidden md:block">
862
- <div class="bg-white p-4 rounded-lg shadow-xl w-64">
863
  <div class="flex items-center">
864
  <div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
865
  <i class="fas fa-check text-green-600"></i>
@@ -886,119 +983,431 @@
886
  </div>
887
  </div>
888
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
889
  <script>
890
- // Animations and interactions
891
  document.addEventListener('DOMContentLoaded', function() {
892
- // Animate elements on scroll
893
- const animateOnScroll = function() {
894
- const elements = document.querySelectorAll('.card-hover');
895
-
896
- elements.forEach(el => {
897
- const elTop = el.getBoundingClientRect().top;
898
- const windowHeight = window.innerHeight;
 
 
 
 
 
 
 
 
899
 
900
- if (elTop < windowHeight - 100) {
901
- el.style.opacity = '1';
902
- el.style.transform = 'translateY(0)';
 
 
 
 
 
 
 
 
903
  }
904
  });
905
- };
906
-
907
- // Set initial state
908
- const cards = document.querySelectorAll('.card-hover');
909
- cards.forEach(card => {
910
- card.style.opacity = '0';
911
- card.style.transform = 'translateY(20px)';
912
- card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
913
  });
914
 
915
- // Trigger on load
916
- animateOnScroll();
917
-
918
- // And on scroll
919
- window.addEventListener('scroll', animateOnScroll);
920
 
921
- // Simulate domain search
922
- const domainSearchBtn = document.querySelector('.domain-search button');
923
- if (domainSearchBtn) {
924
- domainSearchBtn.addEventListener('click', function(e) {
925
- e.preventDefault();
926
- const searchInput = document.querySelector('.domain-search input');
927
- if (searchInput.value.trim() !== '') {
928
- // Show loading state
929
- domainSearchBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Recherche...';
930
- domainSearchBtn.disabled = true;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
931
 
932
- // Simulate API call
933
  setTimeout(() => {
934
- domainSearchBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Disponible!';
935
- domainSearchBtn.classList.remove('bg-indigo-600');
936
- domainSearchBtn.classList.add('bg-green-600');
 
 
 
 
 
 
 
 
 
937
 
938
- // Show floating notification
939
- const floatingNotif = document.querySelector('.fixed.top-1\/4.left-10');
940
- if (floatingNotif) {
941
- floatingNotif.classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
942
  setTimeout(() => {
943
- floatingNotif.classList.add('hidden');
944
  }, 3000);
945
  }
946
-
947
- // Reset after 3 seconds
948
- setTimeout(() => {
949
- domainSearchBtn.innerHTML = '<i class="fas fa-search mr-1"></i> Vérifier';
950
- domainSearchBtn.classList.remove('bg-green-600');
951
- domainSearchBtn.classList.add('bg-indigo-600');
952
- domainSearchBtn.disabled = false;
953
- }, 3000);
954
  }, 1500);
955
- }
 
 
 
 
 
 
 
 
 
956
  });
957
- }
958
 
959
- // Admin login simulation
960
- const adminLoginBtn = document.querySelector('#admin-dashboard button[type="submit"]');
961
- if (adminLoginBtn) {
962
- adminLoginBtn.addEventListener('click', function(e) {
963
- e.preventDefault();
964
- adminLoginBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Connexion...';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
965
 
966
  setTimeout(() => {
967
- adminLoginBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Connecté';
968
- adminLoginBtn.classList.remove('bg-indigo-600');
969
- adminLoginBtn.classList.add('bg-green-600');
970
 
971
- // Scroll to dashboard
972
- document.querySelector('#admin-dashboard').scrollIntoView({
973
- behavior: 'smooth'
974
- });
975
- }, 1500);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
976
  });
977
  }
978
 
979
- // Payment buttons
980
- const paymentButtons = document.querySelectorAll('.bg-blue-600, .bg-purple-600');
981
- paymentButtons.forEach(btn => {
982
  btn.addEventListener('click', function() {
983
- this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Traitement...';
984
- this.classList.add('opacity-75');
985
 
986
  setTimeout(() => {
987
- this.innerHTML = '<i class="fas fa-check mr-1"></i> Paiement accepté';
988
- this.classList.remove('bg-blue-600', 'bg-purple-600');
989
- this.classList.add('bg-green-600');
990
 
991
- // Show floating notification
992
- const floatingNotif = document.querySelector('.fixed.top-1\/4.left-10');
993
- if (floatingNotif) {
994
- floatingNotif.querySelector('p.text-gray-900').textContent = 'Paiement accepté!';
995
- floatingNotif.querySelector('p.text-gray-500').textContent = 'Votre commande est complète';
996
- floatingNotif.classList.remove('hidden');
997
- setTimeout(() => {
998
- floatingNotif.classList.add('hidden');
999
- }, 3000);
1000
  }
1001
- }, 2000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1002
  });
1003
  });
1004
  });
 
69
  .glow {
70
  box-shadow: 0 0 15px rgba(79, 70, 229, 0.6);
71
  }
72
+
73
+ .button-active {
74
+ transform: scale(0.98);
75
+ filter: brightness(90%);
76
+ }
77
+
78
+ .button-loading {
79
+ position: relative;
80
+ color: transparent !important;
81
+ }
82
+
83
+ .button-loading:after {
84
+ content: "";
85
+ position: absolute;
86
+ width: 16px;
87
+ height: 16px;
88
+ top: 0;
89
+ left: 0;
90
+ right: 0;
91
+ bottom: 0;
92
+ margin: auto;
93
+ border: 3px solid transparent;
94
+ border-top-color: #ffffff;
95
+ border-radius: 50%;
96
+ animation: button-loading-spinner 1s ease infinite;
97
+ }
98
+
99
+ @keyframes button-loading-spinner {
100
+ from { transform: rotate(0turn); }
101
+ to { transform: rotate(1turn); }
102
+ }
103
+
104
+ .fade-in {
105
+ animation: fadeIn 0.5s ease-in;
106
+ }
107
+
108
+ @keyframes fadeIn {
109
+ from { opacity: 0; }
110
+ to { opacity: 1; }
111
+ }
112
  </style>
113
  </head>
114
  <body class="bg-gray-50 font-sans">
 
122
  <span class="text-xl font-bold text-gray-900">1CLICK <span class="text-indigo-600">PRO</span></span>
123
  </div>
124
  <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
125
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium nav-link active">
126
  <i class="fas fa-home mr-2"></i> Accueil
127
  </a>
128
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium nav-link">
129
  <i class="fas fa-globe mr-2"></i> Domaines
130
  </a>
131
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium nav-link">
132
  <i class="fas fa-server mr-2"></i> Hébergement
133
  </a>
134
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium nav-link">
135
  <i class="fas fa-user-shield mr-2"></i> SSL
136
  </a>
137
  </div>
 
139
  <div class="hidden sm:ml-6 sm:flex sm:items-center">
140
  <div class="relative ml-3">
141
  <div class="flex space-x-4">
142
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 login-btn">
143
  <i class="fas fa-sign-in-alt mr-2"></i> Connexion
144
  </button>
145
+ <button class="bg-white border border-indigo-600 text-indigo-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 register-btn">
146
  <i class="fas fa-user-plus mr-2"></i> Inscription
147
  </button>
148
  </div>
149
  </div>
150
  </div>
151
  <div class="-mr-2 flex items-center sm:hidden">
152
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mobile-menu-btn">
153
  <span class="sr-only">Ouvrir le menu principal</span>
154
  <i class="fas fa-bars"></i>
155
  </button>
156
  </div>
157
  </div>
158
  </div>
159
+
160
+ <!-- Mobile menu -->
161
+ <div class="hidden sm:hidden mobile-menu">
162
+ <div class="pt-2 pb-3 space-y-1">
163
+ <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium nav-link-mobile active">Accueil</a>
164
+ <a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium nav-link-mobile">Domaines</a>
165
+ <a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium nav-link-mobile">Hébergement</a>
166
+ <a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium nav-link-mobile">SSL</a>
167
+ </div>
168
+ <div class="pt-4 pb-3 border-t border-gray-200">
169
+ <div class="space-y-1 px-2">
170
+ <button class="block w-full px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 rounded-md login-btn-mobile">
171
+ <i class="fas fa-sign-in-alt mr-2"></i> Connexion
172
+ </button>
173
+ <button class="block w-full px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 rounded-md register-btn-mobile">
174
+ <i class="fas fa-user-plus mr-2"></i> Inscription
175
+ </button>
176
+ </div>
177
+ </div>
178
+ </div>
179
  </nav>
180
 
181
  <!-- Hero Section -->
 
192
  <div class="mt-10 max-w-2xl mx-auto">
193
  <div class="domain-search bg-white rounded-lg overflow-hidden p-1">
194
  <div class="flex">
195
+ <input type="text" class="flex-1 px-4 py-3 border-0 text-gray-900 focus:ring-0 focus:outline-none" placeholder="Recherchez votre nom de domaine..." id="domain-search-input">
196
+ <button class="bg-indigo-600 text-white px-6 py-3 font-medium hover:bg-indigo-700 domain-check-btn">
197
  <i class="fas fa-search mr-2"></i> Vérifier
198
  </button>
199
  </div>
 
231
  <div class="mt-20">
232
  <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
233
  <!-- Feature 1 -->
234
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card">
235
  <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mx-auto">
236
  <i class="fas fa-globe text-xl"></i>
237
  </div>
 
245
  <i class="fas fa-bolt mr-1"></i> 3.7s propagation
246
  </span>
247
  </div>
248
+ <button class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 feature-btn">
249
+ En savoir plus
250
+ </button>
251
  </div>
252
  </div>
253
 
254
  <!-- Feature 2 -->
255
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card">
256
  <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-600 mx-auto">
257
  <i class="fas fa-lock text-xl"></i>
258
  </div>
 
266
  <i class="fas fa-check mr-1"></i> 100% sécurisé
267
  </span>
268
  </div>
269
+ <button class="mt-4 px-4 py-2 bg-green-600 text-white rounded-md text-sm font-medium hover:bg-green-700 feature-btn">
270
+ En savoir plus
271
+ </button>
272
  </div>
273
  </div>
274
 
275
  <!-- Feature 3 -->
276
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card">
277
  <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mx-auto">
278
  <i class="fas fa-tachometer-alt text-xl"></i>
279
  </div>
 
287
  <i class="fas fa-rocket mr-1"></i> 99.99% uptime
288
  </span>
289
  </div>
290
+ <button class="mt-4 px-4 py-2 bg-purple-600 text-white rounded-md text-sm font-medium hover:bg-purple-700 feature-btn">
291
+ En savoir plus
292
+ </button>
293
  </div>
294
  </div>
295
 
296
  <!-- Feature 4 -->
297
+ <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card">
298
  <div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-100 text-pink-600 mx-auto">
299
  <i class="fab fa-google text-xl"></i>
300
  </div>
 
308
  <i class="fas fa-robot mr-1"></i> Automatisé
309
  </span>
310
  </div>
311
+ <button class="mt-4 px-4 py-2 bg-pink-600 text-white rounded-md text-sm font-medium hover:bg-pink-700 feature-btn">
312
+ En savoir plus
313
+ </button>
314
  </div>
315
  </div>
316
  </div>
 
373
  Instantané
374
  </span>
375
  </div>
376
+ <button class="mt-4 px-3 py-1 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 step-btn">
377
+ Commencer
378
+ </button>
379
  </div>
380
 
381
  <!-- Step 2 -->
 
392
  Automatisé
393
  </span>
394
  </div>
395
+ <button class="mt-4 px-3 py-1 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 step-btn">
396
+ S'enregistrer
397
+ </button>
398
  </div>
399
 
400
  <!-- Step 3 -->
 
411
  3.7s
412
  </span>
413
  </div>
414
+ <button class="mt-4 px-3 py-1 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 step-btn">
415
+ Configurer
416
+ </button>
417
  </div>
418
 
419
  <!-- Step 4 -->
 
430
  Gratuit 1 an
431
  </span>
432
  </div>
433
+ <button class="mt-4 px-3 py-1 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 step-btn">
434
+ Démarrer
435
+ </button>
436
  </div>
437
  </div>
438
  </div>
 
440
  </div>
441
 
442
  <div class="mt-16 text-center">
443
+ <button class="pulse-animation px-8 py-4 bg-indigo-600 text-white rounded-lg text-lg font-bold hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 free-trial-btn">
444
  <i class="fas fa-play-circle mr-2"></i> Essai gratuit 14 jours
445
  </button>
446
  </div>
 
465
  <h3 class="text-lg font-medium text-white">Connexion Administrateur</h3>
466
  </div>
467
  <div class="p-6">
468
+ <form id="admin-login-form">
469
  <div>
470
  <label for="email" class="block text-sm font-medium text-gray-700">Email Admin</label>
471
  <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" value="[email protected]" readonly>
 
475
  <input type="password" id="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" value="Admin270574@">
476
  </div>
477
  <div class="mt-6">
478
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 admin-login-btn">
479
  <i class="fas fa-sign-in-alt mr-2"></i> Se connecter
480
  </button>
481
  </div>
 
484
  </div>
485
 
486
  <!-- Dashboard Preview -->
487
+ <div class="mt-16 bg-gray-900 rounded-xl overflow-hidden shadow-xl hidden" id="dashboard-preview">
488
  <!-- Dashboard Header -->
489
  <div class="bg-gray-800 px-6 py-4 flex items-center justify-between">
490
  <div class="flex items-center">
 
495
  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
496
  <i class="fas fa-circle text-green-500 mr-1"></i> Connecté
497
  </span>
498
+ <button class="text-gray-400 hover:text-white notification-btn">
499
  <i class="fas fa-bell"></i>
500
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500 notification-dot hidden"></span>
501
  </button>
502
  </div>
503
  </div>
 
521
  </div>
522
  <p class="mt-1 text-xs text-gray-400">75% de votre quota</p>
523
  </div>
524
+ <button class="mt-3 w-full px-2 py-1 bg-gray-700 text-indigo-400 text-xs font-medium rounded hover:bg-gray-600 dashboard-btn">
525
+ <i class="fas fa-plus mr-1"></i> Ajouter
526
+ </button>
527
  </div>
528
 
529
  <!-- Stats Card 2 -->
 
543
  </div>
544
  <p class="mt-1 text-xs text-gray-400">Tous actifs</p>
545
  </div>
546
+ <button class="mt-3 w-full px-2 py-1 bg-gray-700 text-green-400 text-xs font-medium rounded hover:bg-gray-600 dashboard-btn">
547
+ <i class="fas fa-sync-alt mr-1"></i> Renouveler
548
+ </button>
549
  </div>
550
 
551
  <!-- Stats Card 3 -->
 
565
  </div>
566
  <p class="mt-1 text-xs text-gray-400">Moyenne mondiale</p>
567
  </div>
568
+ <button class="mt-3 w-full px-2 py-1 bg-gray-700 text-purple-400 text-xs font-medium rounded hover:bg-gray-600 dashboard-btn">
569
+ <i class="fas fa-chart-line mr-1"></i> Statistiques
570
+ </button>
571
  </div>
572
 
573
  <!-- Stats Card 4 -->
 
587
  </div>
588
  <p class="mt-1 text-xs text-gray-400">2 configurations requises</p>
589
  </div>
590
+ <button class="mt-3 w-full px-2 py-1 bg-gray-700 text-pink-400 text-xs font-medium rounded hover:bg-gray-600 dashboard-btn">
591
+ <i class="fas fa-cog mr-1"></i> Configurer
592
+ </button>
593
  </div>
594
  </div>
595
 
 
598
  <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
599
  <div class="px-6 py-4 border-b border-gray-700 flex justify-between items-center">
600
  <h3 class="text-lg font-medium text-white">Gestion des Domaines</h3>
601
+ <button class="px-3 py-1 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700 add-domain-btn">
602
  <i class="fas fa-plus mr-1"></i> Ajouter
603
  </button>
604
  </div>
 
638
  <span class="text-green-500">●</span> Actif (3.2s)
639
  </td>
640
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
641
+ <button class="text-indigo-400 hover:text-indigo-300 mr-3 domain-config-btn">
642
  <i class="fas fa-cog"></i>
643
  </button>
644
+ <button class="text-red-400 hover:text-red-300 domain-delete-btn">
645
  <i class="fas fa-trash"></i>
646
  </button>
647
  </td>
 
670
  <span class="text-green-500">●</span> Actif (2.8s)
671
  </td>
672
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
673
+ <button class="text-indigo-400 hover:text-indigo-300 mr-3 domain-config-btn">
674
  <i class="fas fa-cog"></i>
675
  </button>
676
+ <button class="text-red-400 hover:text-red-300 domain-delete-btn">
677
  <i class="fas fa-trash"></i>
678
  </button>
679
  </td>
 
696
  <div class="bg-gray-700 rounded-lg p-4">
697
  <h4 class="text-md font-medium text-white mb-4">Méthodes de Paiement</h4>
698
  <div class="space-y-4">
699
+ <div class="flex items-center justify-between p-3 bg-gray-600 rounded-lg payment-method active" data-method="paypal">
700
  <div class="flex items-center">
701
  <div class="bg-white p-2 rounded-md">
702
  <i class="fab fa-cc-paypal text-blue-500 text-xl"></i>
703
  </div>
704
  <span class="ml-3 text-white">PayPal</span>
705
  </div>
706
+ <button class="text-green-400 hover:text-green-300 payment-select-btn">
707
  <i class="fas fa-check-circle"></i>
708
  </button>
709
  </div>
710
+ <div class="flex items-center justify-between p-3 bg-gray-600 rounded-lg payment-method" data-method="stripe">
711
  <div class="flex items-center">
712
  <div class="bg-white p-2 rounded-md">
713
  <i class="fab fa-cc-stripe text-purple-500 text-xl"></i>
714
  </div>
715
  <span class="ml-3 text-white">Stripe</span>
716
  </div>
717
+ <button class="text-green-400 hover:text-green-300 payment-select-btn">
718
  <i class="fas fa-check-circle"></i>
719
  </button>
720
  </div>
721
+ <div class="flex items-center justify-between p-3 bg-gray-600 rounded-lg payment-method" data-method="card">
722
  <div class="flex items-center">
723
  <div class="bg-white p-2 rounded-md">
724
  <i class="fas fa-credit-card text-gray-500 text-xl"></i>
725
  </div>
726
  <span class="ml-3 text-white">Carte Bancaire</span>
727
  </div>
728
+ <button class="text-gray-400 hover:text-gray-300 payment-select-btn">
729
  <i class="fas fa-plus-circle"></i>
730
  </button>
731
  </div>
 
772
  </div>
773
  </div>
774
  <div class="mt-6 grid grid-cols-2 gap-4">
775
+ <button class="flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 paypal-btn">
776
  <i class="fab fa-cc-paypal mr-2"></i> PayPal
777
  </button>
778
+ <button class="flex items-center justify-center px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 stripe-btn">
779
  <i class="fab fa-cc-stripe mr-2"></i> Stripe
780
  </button>
781
  </div>
 
799
  <p class="mt-4 text-lg leading-6 text-indigo-200">
800
  Essayez notre plateforme pendant 14 jours sans engagement. Aucune carte de crédit requise.
801
  </p>
802
+ <button class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto cta-btn">
803
  <i class="fas fa-play-circle mr-2"></i> Essai gratuit
804
  </button>
805
  </div>
 
815
  </h3>
816
  <ul class="mt-4 space-y-4">
817
  <li>
818
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
819
  Domaines
820
  </a>
821
  </li>
822
  <li>
823
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
824
  Hébergement
825
  </a>
826
  </li>
827
  <li>
828
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
829
  Certificats SSL
830
  </a>
831
  </li>
832
  <li>
833
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
834
  DNS Premium
835
  </a>
836
  </li>
 
843
  </h3>
844
  <ul class="mt-4 space-y-4">
845
  <li>
846
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
847
  Documentation
848
  </a>
849
  </li>
850
  <li>
851
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
852
  Tutoriels
853
  </a>
854
  </li>
855
  <li>
856
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
857
  Statut des services
858
  </a>
859
  </li>
860
  <li>
861
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
862
  Support
863
  </a>
864
  </li>
 
871
  </h3>
872
  <ul class="mt-4 space-y-4">
873
  <li>
874
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
875
  À propos
876
  </a>
877
  </li>
878
  <li>
879
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
880
  Carrières
881
  </a>
882
  </li>
883
  <li>
884
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
885
  Presse
886
  </a>
887
  </li>
888
  <li>
889
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
890
  Contact
891
  </a>
892
  </li>
 
899
  </h3>
900
  <ul class="mt-4 space-y-4">
901
  <li>
902
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
903
  Confidentialité
904
  </a>
905
  </li>
906
  <li>
907
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
908
  Conditions
909
  </a>
910
  </li>
911
  <li>
912
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
913
  Cookies
914
  </a>
915
  </li>
916
  <li>
917
+ <a href="#" class="text-base text-gray-300 hover:text-white footer-link">
918
  RGPD
919
  </a>
920
  </li>
 
924
 
925
  <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
926
  <div class="flex space-x-6">
927
+ <a href="#" class="text-gray-400 hover:text-gray-300 social-link">
928
  <span class="sr-only">Facebook</span>
929
  <i class="fab fa-facebook-f"></i>
930
  </a>
931
+ <a href="#" class="text-gray-400 hover:text-gray-300 social-link">
932
  <span class="sr-only">Twitter</span>
933
  <i class="fab fa-twitter"></i>
934
  </a>
935
+ <a href="#" class="text-gray-400 hover:text-gray-300 social-link">
936
  <span class="sr-only">Instagram</span>
937
  <i class="fab fa-instagram"></i>
938
  </a>
939
+ <a href="#" class="text-gray-400 hover:text-gray-300 social-link">
940
  <span class="sr-only">LinkedIn</span>
941
  <i class="fab fa-linkedin-in"></i>
942
  </a>
 
950
 
951
  <!-- Floating Elements -->
952
  <div class="fixed bottom-6 right-6 z-50">
953
+ <button class="pulse-animation p-4 bg-indigo-600 text-white rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 chat-btn">
954
  <i class="fas fa-comment-dots text-xl"></i>
955
  </button>
956
  </div>
957
 
958
  <div class="fixed top-1/4 left-10 z-40 floating hidden md:block">
959
+ <div class="bg-white p-4 rounded-lg shadow-xl w-64 notification-box">
960
  <div class="flex items-center">
961
  <div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
962
  <i class="fas fa-check text-green-600"></i>
 
983
  </div>
984
  </div>
985
 
986
+ <!-- Chat Widget -->
987
+ <div class="fixed bottom-24 right-6 z-50 hidden" id="chat-widget">
988
+ <div class="bg-white rounded-lg shadow-xl w-80 overflow-hidden">
989
+ <div class="bg-indigo-600 px-4 py-3 flex justify-between items-center">
990
+ <h3 class="text-white font-medium">Support en direct</h3>
991
+ <button class="text-white hover:text-indigo-200 chat-close-btn">
992
+ <i class="fas fa-times"></i>
993
+ </button>
994
+ </div>
995
+ <div class="p-4 h-64 overflow-y-auto chat-messages">
996
+ <div class="mb-4">
997
+ <div class="bg-gray-100 rounded-lg p-3 max-w-xs">
998
+ <p class="text-sm">Bonjour! Comment pouvons-nous vous aider aujourd'hui?</p>
999
+ </div>
1000
+ <p class="text-xs text-gray-500 mt-1">Support, il y a 1 minute</p>
1001
+ </div>
1002
+ </div>
1003
+ <div class="px-4 py-3 border-t border-gray-200">
1004
+ <div class="flex">
1005
+ <input type="text" class="flex-1 border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500" placeholder="Tapez votre message...">
1006
+ <button class="bg-indigo-600 text-white px-3 py-2 rounded-r-md hover:bg-indigo-700 chat-send-btn">
1007
+ <i class="fas fa-paper-plane"></i>
1008
+ </button>
1009
+ </div>
1010
+ </div>
1011
+ </div>
1012
+ </div>
1013
+
1014
  <script>
 
1015
  document.addEventListener('DOMContentLoaded', function() {
1016
+ // Mobile menu toggle
1017
+ const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
1018
+ const mobileMenu = document.querySelector('.mobile-menu');
1019
+
1020
+ mobileMenuBtn.addEventListener('click', function() {
1021
+ mobileMenu.classList.toggle('hidden');
1022
+ });
1023
+
1024
+ // Navigation links
1025
+ const navLinks = document.querySelectorAll('.nav-link, .nav-link-mobile');
1026
+ navLinks.forEach(link => {
1027
+ link.addEventListener('click', function(e) {
1028
+ e.preventDefault();
1029
+ navLinks.forEach(l => l.classList.remove('active', 'border-indigo-500', 'text-gray-900', 'bg-indigo-50'));
1030
+ this.classList.add('active', 'border-indigo-500', 'text-gray-900', 'bg-indigo-50');
1031
 
1032
+ // Scroll to section
1033
+ const target = this.getAttribute('href');
1034
+ if (target && target !== '#') {
1035
+ document.querySelector(target).scrollIntoView({
1036
+ behavior: 'smooth'
1037
+ });
1038
+ }
1039
+
1040
+ // Close mobile menu if open
1041
+ if (!mobileMenu.classList.contains('hidden')) {
1042
+ mobileMenu.classList.add('hidden');
1043
  }
1044
  });
 
 
 
 
 
 
 
 
1045
  });
1046
 
1047
+ // All buttons with click effects
1048
+ const buttons = document.querySelectorAll('button:not([disabled]), .btn, .feature-btn, .step-btn, .free-trial-btn, .login-btn, .register-btn, .admin-login-btn, .dashboard-btn, .domain-config-btn, .domain-delete-btn, .add-domain-btn, .payment-select-btn, .paypal-btn, .stripe-btn, .cta-btn, .chat-btn, .chat-close-btn, .chat-send-btn, .notification-btn');
 
 
 
1049
 
1050
+ buttons.forEach(button => {
1051
+ // Add active state on click
1052
+ button.addEventListener('mousedown', function() {
1053
+ this.classList.add('button-active');
1054
+ });
1055
+
1056
+ button.addEventListener('mouseup', function() {
1057
+ this.classList.remove('button-active');
1058
+ });
1059
+
1060
+ button.addEventListener('mouseleave', function() {
1061
+ this.classList.remove('button-active');
1062
+ });
1063
+
1064
+ // Add loading state for important buttons
1065
+ if (button.classList.contains('admin-login-btn') ||
1066
+ button.classList.contains('paypal-btn') ||
1067
+ button.classList.contains('stripe-btn') ||
1068
+ button.classList.contains('cta-btn') ||
1069
+ button.classList.contains('domain-check-btn')) {
1070
+
1071
+ button.addEventListener('click', function(e) {
1072
+ if (this.classList.contains('button-loading')) return;
1073
+
1074
+ e.preventDefault();
1075
+ const originalContent = this.innerHTML;
1076
+ this.classList.add('button-loading');
1077
 
1078
+ // Simulate async action
1079
  setTimeout(() => {
1080
+ this.classList.remove('button-loading');
1081
+ this.innerHTML = originalContent;
1082
+
1083
+ // Special actions for specific buttons
1084
+ if (this.classList.contains('admin-login-btn')) {
1085
+ document.getElementById('dashboard-preview').classList.remove('hidden');
1086
+ document.getElementById('dashboard-preview').classList.add('fade-in');
1087
+ window.scrollTo({
1088
+ top: document.getElementById('admin-dashboard').offsetTop,
1089
+ behavior: 'smooth'
1090
+ });
1091
+ }
1092
 
1093
+ if (this.classList.contains('domain-check-btn')) {
1094
+ const input = document.getElementById('domain-search-input');
1095
+ if (input.value.trim() !== '') {
1096
+ const notification = document.querySelector('.notification-box');
1097
+ notification.querySelector('p.text-gray-900').textContent = 'Domaine disponible!';
1098
+ notification.querySelector('p.text-gray-500').textContent = input.value + ' peut être enregistré';
1099
+ notification.classList.remove('hidden');
1100
+ setTimeout(() => {
1101
+ notification.classList.add('hidden');
1102
+ }, 3000);
1103
+ }
1104
+ }
1105
+
1106
+ if (this.classList.contains('paypal-btn') || this.classList.contains('stripe-btn')) {
1107
+ document.querySelector('.notification-dot').classList.remove('hidden');
1108
+
1109
+ const notification = document.querySelector('.notification-box');
1110
+ notification.querySelector('p.text-gray-900').textContent = 'Paiement accepté!';
1111
+ notification.querySelector('p.text-gray-500').textContent = 'Votre commande est complète';
1112
+ notification.classList.remove('hidden');
1113
  setTimeout(() => {
1114
+ notification.classList.add('hidden');
1115
  }, 3000);
1116
  }
 
 
 
 
 
 
 
 
1117
  }, 1500);
1118
+ });
1119
+ }
1120
+ });
1121
+
1122
+ // Payment method selection
1123
+ const paymentMethods = document.querySelectorAll('.payment-method');
1124
+ paymentMethods.forEach(method => {
1125
+ method.addEventListener('click', function() {
1126
+ paymentMethods.forEach(m => m.classList.remove('active'));
1127
+ this.classList.add('active');
1128
  });
1129
+ });
1130
 
1131
+ // Chat widget
1132
+ const chatBtn = document.querySelector('.chat-btn');
1133
+ const chatWidget = document.getElementById('chat-widget');
1134
+ const chatCloseBtn = document.querySelector('.chat-close-btn');
1135
+
1136
+ chatBtn.addEventListener('click', function() {
1137
+ chatWidget.classList.toggle('hidden');
1138
+ chatWidget.classList.add('fade-in');
1139
+ });
1140
+
1141
+ chatCloseBtn.addEventListener('click', function() {
1142
+ chatWidget.classList.add('hidden');
1143
+ });
1144
+
1145
+ // Send chat message
1146
+ const chatSendBtn = document.querySelector('.chat-send-btn');
1147
+ const chatInput = document.querySelector('.chat-messages + div input');
1148
+
1149
+ chatSendBtn.addEventListener('click', function() {
1150
+ if (chatInput.value.trim() !== '') {
1151
+ const messagesContainer = document.querySelector('.chat-messages');
1152
+ const newMessage = document.createElement('div');
1153
+ newMessage.className = 'mb-4 text-right';
1154
+ newMessage.innerHTML = `
1155
+ <div class="bg-indigo-100 rounded-lg p-3 inline-block">
1156
+ <p class="text-sm">${chatInput.value}</p>
1157
+ </div>
1158
+ <p class="text-xs text-gray-500 mt-1">Vous, à l'instant</p>
1159
+ `;
1160
+ messagesContainer.appendChild(newMessage);
1161
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
1162
+ chatInput.value = '';
1163
+
1164
+ // Simulate reply
1165
+ setTimeout(() => {
1166
+ const replyMessage = document.createElement('div');
1167
+ replyMessage.className = 'mb-4';
1168
+ replyMessage.innerHTML = `
1169
+ <div class="bg-gray-100 rounded-lg p-3 max-w-xs">
1170
+ <p class="text-sm">Merci pour votre message! Un agent vous répondra sous peu.</p>
1171
+ </div>
1172
+ <p class="text-xs text-gray-500 mt-1">Support, à l'instant</p>
1173
+ `;
1174
+ messagesContainer.appendChild(replyMessage);
1175
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
1176
+ }, 1000);
1177
+ }
1178
+ });
1179
+
1180
+ // Enter key in chat
1181
+ chatInput.addEventListener('keypress', function(e) {
1182
+ if (e.key === 'Enter') {
1183
+ chatSendBtn.click();
1184
+ }
1185
+ });
1186
+
1187
+ // Notification dot
1188
+ const notificationBtn = document.querySelector('.notification-btn');
1189
+ const notificationDot = document.querySelector('.notification-dot');
1190
+
1191
+ notificationBtn.addEventListener('click', function() {
1192
+ notificationDot.classList.add('hidden');
1193
+ });
1194
+
1195
+ // Feature buttons
1196
+ const featureButtons = document.querySelectorAll('.feature-btn');
1197
+ featureButtons.forEach(btn => {
1198
+ btn.addEventListener('click', function() {
1199
+ const featureCard = this.closest('.feature-card');
1200
+ featureCard.querySelector('p.text-base').textContent = 'Chargement des détails...';
1201
+ this.classList.add('button-loading');
1202
+
1203
+ setTimeout(() => {
1204
+ this.classList.remove('button-loading');
1205
+ featureCard.querySelector('p.text-base').textContent = 'Détails chargés avec succès!';
1206
+ this.textContent = 'Voir détails';
1207
+ }, 1000);
1208
+ });
1209
+ });
1210
+
1211
+ // Domain check button
1212
+ const domainCheckBtn = document.querySelector('.domain-check-btn');
1213
+ domainCheckBtn.addEventListener('click', function() {
1214
+ const input = document.getElementById('domain-search-input');
1215
+ if (input.value.trim() === '') {
1216
+ input.focus();
1217
+ return;
1218
+ }
1219
+
1220
+ this.classList.add('button-loading');
1221
+
1222
+ setTimeout(() => {
1223
+ this.classList.remove('button-loading');
1224
+ this.innerHTML = '<i class="fas fa-check mr-2"></i> Disponible!';
1225
+ this.classList.remove('bg-indigo-600');
1226
+ this.classList.add('bg-green-600');
1227
+
1228
+ setTimeout(() => {
1229
+ this.innerHTML = '<i class="fas fa-search mr-2"></i> Vérifier';
1230
+ this.classList.remove('bg-green-600');
1231
+ this.classList.add('bg-indigo-600');
1232
+ }, 3000);
1233
+ }, 1500);
1234
+ });
1235
+
1236
+ // Free trial button
1237
+ const freeTrialBtn = document.querySelector('.free-trial-btn');
1238
+ freeTrialBtn.addEventListener('click', function() {
1239
+ this.classList.add('button-loading');
1240
+
1241
+ setTimeout(() => {
1242
+ this.classList.remove('button-loading');
1243
+ this.innerHTML = '<i class="fas fa-check mr-2"></i> Essai démarré!';
1244
+
1245
+ const notification = document.querySelector('.notification-box');
1246
+ notification.querySelector('p.text-gray-900').textContent = 'Essai gratuit activé!';
1247
+ notification.querySelector('p.text-gray-500').textContent = '14 jours d\'essai commencés';
1248
+ notification.classList.remove('hidden');
1249
+ setTimeout(() => {
1250
+ notification.classList.add('hidden');
1251
+ }, 3000);
1252
+ }, 1500);
1253
+ });
1254
+
1255
+ // CTA button
1256
+ const ctaBtn = document.querySelector('.cta-btn');
1257
+ ctaBtn.addEventListener('click', function() {
1258
+ this.classList.add('button-loading');
1259
+
1260
+ setTimeout(() => {
1261
+ this.classList.remove('button-loading');
1262
+ this.innerHTML = '<i class="fas fa-check mr-2"></i> Essai démarré!';
1263
+
1264
+ // Scroll to top
1265
+ window.scrollTo({
1266
+ top: 0,
1267
+ behavior: 'smooth'
1268
+ });
1269
+ }, 1500);
1270
+ });
1271
+
1272
+ // Add domain button
1273
+ const addDomainBtn = document.querySelector('.add-domain-btn');
1274
+ if (addDomainBtn) {
1275
+ addDomainBtn.addEventListener('click', function() {
1276
+ this.classList.add('button-loading');
1277
 
1278
  setTimeout(() => {
1279
+ this.classList.remove('button-loading');
 
 
1280
 
1281
+ // Add new domain to table
1282
+ const tableBody = document.querySelector('tbody');
1283
+ const newRow = document.createElement('tr');
1284
+ newRow.className = 'fade-in';
1285
+ newRow.innerHTML = `
1286
+ <td class="px-6 py-4 whitespace-nowrap">
1287
+ <div class="flex items-center">
1288
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600">
1289
+ <i class="fas fa-globe"></i>
1290
+ </div>
1291
+ <div class="ml-4">
1292
+ <div class="text-sm font-medium text-white">nouveaudomaine.fr</div>
1293
+ <div class="text-sm text-gray-400">[email protected]</div>
1294
+ </div>
1295
+ </div>
1296
+ </td>
1297
+ <td class="px-6 py-4 whitespace-nowrap">
1298
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
1299
+ ${new Date().getFullYear() + 1}-${(new Date().getMonth() + 1).toString().padStart(2, '0')}-${new Date().getDate().toString().padStart(2, '0')}
1300
+ </span>
1301
+ </td>
1302
+ <td class="px-6 py-4 whitespace-nowrap">
1303
+ <i class="fas fa-check-circle text-green-500"></i>
1304
+ </td>
1305
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
1306
+ <span class="text-green-500">●</span> Actif (3.1s)
1307
+ </td>
1308
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
1309
+ <button class="text-indigo-400 hover:text-indigo-300 mr-3 domain-config-btn">
1310
+ <i class="fas fa-cog"></i>
1311
+ </button>
1312
+ <button class="text-red-400 hover:text-red-300 domain-delete-btn">
1313
+ <i class="fas fa-trash"></i>
1314
+ </button>
1315
+ </td>
1316
+ `;
1317
+ tableBody.prepend(newRow);
1318
+
1319
+ // Update domains count
1320
+ const domainsCount = document.querySelector('.bg-gray-800.rounded-lg.shadow .text-2xl');
1321
+ if (domainsCount) {
1322
+ domainsCount.textContent = parseInt(domainsCount.textContent) + 1;
1323
+ }
1324
+
1325
+ // Show notification
1326
+ const notification = document.querySelector('.notification-box');
1327
+ notification.querySelector('p.text-gray-900').textContent = 'Domaine ajouté!';
1328
+ notification.querySelector('p.text-gray-500').textContent = 'nouveaudomaine.fr activé';
1329
+ notification.classList.remove('hidden');
1330
+ setTimeout(() => {
1331
+ notification.classList.add('hidden');
1332
+ }, 3000);
1333
+ }, 1000);
1334
  });
1335
  }
1336
 
1337
+ // Domain delete buttons
1338
+ const domainDeleteBtns = document.querySelectorAll('.domain-delete-btn');
1339
+ domainDeleteBtns.forEach(btn => {
1340
  btn.addEventListener('click', function() {
1341
+ const row = this.closest('tr');
1342
+ row.classList.add('opacity-50');
1343
 
1344
  setTimeout(() => {
1345
+ row.remove();
 
 
1346
 
1347
+ // Update domains count
1348
+ const domainsCount = document.querySelector('.bg-gray-800.rounded-lg.shadow .text-2xl');
1349
+ if (domainsCount) {
1350
+ domainsCount.textContent = parseInt(domainsCount.textContent) - 1;
 
 
 
 
 
1351
  }
1352
+
1353
+ // Show notification
1354
+ const notification = document.querySelector('.notification-box');
1355
+ notification.querySelector('p.text-gray-900').textContent = 'Domaine supprimé!';
1356
+ notification.querySelector('p.text-gray-500').textContent = 'Opération réussie';
1357
+ notification.classList.remove('hidden');
1358
+ setTimeout(() => {
1359
+ notification.classList.add('hidden');
1360
+ }, 3000);
1361
+ }, 500);
1362
+ });
1363
+ });
1364
+
1365
+ // Domain config buttons
1366
+ const domainConfigBtns = document.querySelectorAll('.domain-config-btn');
1367
+ domainConfigBtns.forEach(btn => {
1368
+ btn.addEventListener('click', function() {
1369
+ const domainName = this.closest('tr').querySelector('.text-sm.font-medium').textContent;
1370
+
1371
+ // Show notification
1372
+ const notification = document.querySelector('.notification-box');
1373
+ notification.querySelector('p.text-gray-900').textContent = 'Configuration ouverte';
1374
+ notification.querySelector('p.text-gray-500').textContent = `Pour ${domainName}`;
1375
+ notification.classList.remove('hidden');
1376
+ setTimeout(() => {
1377
+ notification.classList.add('hidden');
1378
+ }, 3000);
1379
+ });
1380
+ });
1381
+
1382
+ // Social links
1383
+ const socialLinks = document.querySelectorAll('.social-link');
1384
+ socialLinks.forEach(link => {
1385
+ link.addEventListener('click', function(e) {
1386
+ e.preventDefault();
1387
+ // Show notification
1388
+ const notification = document.querySelector('.notification-box');
1389
+ notification.querySelector('p.text-gray-900').textContent = 'Réseau social ouvert';
1390
+ notification.querySelector('p.text-gray-500').textContent = 'Ouverture dans un nouvel onglet';
1391
+ notification.classList.remove('hidden');
1392
+ setTimeout(() => {
1393
+ notification.classList.add('hidden');
1394
+ }, 3000);
1395
+ });
1396
+ });
1397
+
1398
+ // Footer links
1399
+ const footerLinks = document.querySelectorAll('.footer-link');
1400
+ footerLinks.forEach(link => {
1401
+ link.addEventListener('click', function(e) {
1402
+ e.preventDefault();
1403
+ // Show notification
1404
+ const notification = document.querySelector('.notification-box');
1405
+ notification.querySelector('p.text-gray-900').textContent = 'Navigation';
1406
+ notification.querySelector('p.text-gray-500').textContent = this.textContent.trim() + ' sélectionné';
1407
+ notification.classList.remove('hidden');
1408
+ setTimeout(() => {
1409
+ notification.classList.add('hidden');
1410
+ }, 3000);
1411
  });
1412
  });
1413
  });
prompts.txt CHANGED
@@ -3,4 +3,5 @@ je veu un hyper interface animé
3
  je veux un vrais site de dns pas une model , je veux du reel live
4
  UltraDNS Tableau de bord Zones DNS Statistiques API,, en automatique
5
  AI Website PRO Hyper Interface - Créateur de Sites Professionnels
6
- Infrastructure Web Automatisée en 1 Click Enregistrement instantané de domaine, déploiement SSL, DNS ultra-rapide et intégration Google - le tout automatisé 24h/7j avec propagation mondiale en secondes. je veux acces gratuite pour moi seulement administrateur : [email protected] : Admin270574@ et [email protected] : Admin270574@ Enregistrez votre domaine gratuitement Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes:: Domain Information Registrar Information Registrant Contact je veux acces gratuite pour moi seulement administrateur : [email protected] : Admin270574@ et [email protected] : Admin270574@ ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat ? AVEC TRES BELLE INTERFACE TRES ANIME
 
 
3
  je veux un vrais site de dns pas une model , je veux du reel live
4
  UltraDNS Tableau de bord Zones DNS Statistiques API,, en automatique
5
  AI Website PRO Hyper Interface - Créateur de Sites Professionnels
6
+ Infrastructure Web Automatisée en 1 Click Enregistrement instantané de domaine, déploiement SSL, DNS ultra-rapide et intégration Google - le tout automatisé 24h/7j avec propagation mondiale en secondes. je veux acces gratuite pour moi seulement administrateur : [email protected] : Admin270574@ et [email protected] : Admin270574@ Enregistrez votre domaine gratuitement Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes:: Domain Information Registrar Information Registrant Contact je veux acces gratuite pour moi seulement administrateur : [email protected] : Admin270574@ et [email protected] : Admin270574@ ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat ? AVEC TRES BELLE INTERFACE TRES ANIME
7
+ refaire une mise a jours de toutes les boutons activé toutes les bouton