Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Circle - Be a part of my Circle</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .spinner { | |
| animation: spin 1.5s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .progress-bar { | |
| animation: progress 5s linear forwards; | |
| } | |
| @keyframes progress { | |
| 0% { width: 0%; } | |
| 100% { width: 100%; } | |
| } | |
| .captcha-box { | |
| background: repeating-linear-gradient( | |
| 45deg, | |
| #f0f0f0, | |
| #f0f0f0 10px, | |
| #e0e0e0 10px, | |
| #e0e0e0 20px | |
| ); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="max-w-md w-full bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Header --> | |
| <div class="bg-gradient-to-r from-purple-600 to-pink-500 px-6 py-4 flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-circle-nodes text-white text-2xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h1 class="text-white font-semibold text-lg">Circle Creator Platform</h1> | |
| <p class="text-purple-100 text-sm">Be a part of my Circle</p> | |
| </div> | |
| </div> | |
| <!-- Content --> | |
| <div class="p-6"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-2">Welcome to Circle</h2> | |
| <p class="text-gray-600">The creator-first platform with only 2.5% fees</p> | |
| <div class="mt-6"> | |
| <button id="mainButton" class="bg-gradient-to-r from-purple-500 to-pink-500 text-white font-medium py-2 px-6 rounded-full hover:shadow-lg transition-all duration-300 transform hover:scale-105"> | |
| Start Your Creator Journey | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Checking security</span> | |
| <span>www.patreon.com</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="securityBar" class="progress-bar bg-indigo-500 h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 hover:shadow-md transition-all"> | |
| <div class="text-purple-500 mb-2"> | |
| <i class="fas fa-video text-xl"></i> | |
| </div> | |
| <h3 class="font-medium mb-1">4K Video Hosting</h3> | |
| <p class="text-sm text-gray-500">Native video hosting with no compression</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 hover:shadow-md transition-all"> | |
| <div class="text-pink-500 mb-2"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <h3 class="font-medium mb-1">AI Tools</h3> | |
| <p class="text-sm text-gray-500">Auto-transcription, tagging & scheduling</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 hover:shadow-md transition-all"> | |
| <div class="text-blue-500 mb-2"> | |
| <i class="fas fa-store text-xl"></i> | |
| </div> | |
| <h3 class="font-medium mb-1">Merch Store</h3> | |
| <p class="text-sm text-gray-500">Integrated merch with Printful</p> | |
| </div> | |
| </div> | |
| <div class="text-center text-sm text-gray-500"> | |
| <p>Join thousands of creators earning on Circle with our industry-low 2.5% fee.</p> | |
| <p class="mt-2"> | |
| <a href="#" class="text-purple-600 hover:underline">Learn more</a> about our platform features. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Animate security bar | |
| const securityBar = document.getElementById('securityBar'); | |
| let width = 0; | |
| const interval = setInterval(() => { | |
| if (width >= 100) { | |
| clearInterval(interval); | |
| securityBar.classList.remove('bg-indigo-500'); | |
| securityBar.classList.add('bg-green-500'); | |
| } else { | |
| width++; | |
| securityBar.style.width = width + '%'; | |
| } | |
| }, 50); | |
| const mainButton = document.getElementById('mainButton'); | |
| mainButton.addEventListener('click', function() { | |
| // Show loading state | |
| mainButton.innerHTML = '<i class="fas fa-spinner spinner mr-2"></i> Processing...'; | |
| mainButton.classList.add('cursor-not-allowed'); | |
| mainButton.disabled = true; | |
| // Simulate API call | |
| setTimeout(() => { | |
| // Show success state | |
| mainButton.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Account Created!'; | |
| mainButton.classList.remove('bg-gradient-to-r', 'from-purple-500', 'to-pink-500'); | |
| mainButton.classList.add('bg-green-500'); | |
| // Redirect after delay | |
| setTimeout(() => { | |
| window.location.href = "#"; // Replace with actual dashboard URL | |
| }, 1500); | |
| }, 2000); | |
| }); | |
| // Make feature cards interactive | |
| const featureCards = document.querySelectorAll('.grid > div'); | |
| featureCards.forEach(card => { | |
| card.addEventListener('click', () => { | |
| alert(`Feature: ${card.querySelector('h3').textContent}\n${card.querySelector('p').textContent}`); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=TheAryanAvatar/testing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |