Hugging Face's logo

Spaces:
TheAryanAvatar
/
testing
Running

App Files Community
testing
File size: 7,401 Bytes 
342d639
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
<!DOCTYPE html>
<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>