Hugging Face's logo

Spaces:
steveadams2834
/
cryptoflow
Running

App Files Community
steveadams2834 commited on
Commit
5eeaa75
·
verified ·
1 Parent(s): daa6636

Make a payment gateway and allow me to input a payment link into the site to take a payment. Make the site a onramp for crypto and have the buy button lead to my payment link - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +278 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cryptoflow
3
- emoji: 🏢
4
- colorFrom: gray
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cryptoflow
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,278 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>CryptoFlow - Crypto Onramp Gateway</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
10
+ <style>
11
+ @keyframes float {
12
+ 0% { transform: translateY(0px); }
13
+ 50% { transform: translateY(-20px); }
14
+ 100% { transform: translateY(0px); }
15
+ }
16
+ .float-animation {
17
+ animation: float 6s ease-in-out infinite;
18
+ }
19
+ .gradient-bg {
20
+ background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c);
21
+ background-size: 400% 400%;
22
+ animation: gradient 15s ease infinite;
23
+ }
24
+ @keyframes gradient {
25
+ 0% { background-position: 0% 50%; }
26
+ 50% { background-position: 100% 50%; }
27
+ 100% { background-position: 0% 50%; }
28
+ }
29
+ .glass-effect {
30
+ backdrop-filter: blur(16px) saturate(180%);
31
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
32
+ background-color: rgba(255, 255, 255, 0.75);
33
+ border: 1px solid rgba(209, 213, 219, 0.3);
34
+ }
35
+ .crypto-icon {
36
+ transition: all 0.3s ease;
37
+ }
38
+ .crypto-icon:hover {
39
+ transform: scale(1.1);
40
+ filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="min-h-screen gradient-bg">
45
+ <div class="min-h-screen flex items-center justify-center p-4">
46
+ <div class="max-w-md w-full">
47
+ <!-- Header -->
48
+ <div class="text-center mb-8">
49
+ <div class="inline-flex items-center justify-center w-20 h-20 bg-white/20 rounded-full mb-4 glass-effect">
50
+ <i class="fas fa-coins text-3xl text-white"></i>
51
+ </div>
52
+ <h1 class="text-4xl font-bold text-white mb-2">CryptoFlow</h1>
53
+ <p class="text-white/80 text-lg">Your Gateway to Crypto Investment</p>
54
+ </div>
55
+
56
+ <!-- Main Card -->
57
+ <div class="glass-effect rounded-2xl p-6 shadow-2xl">
58
+ <!-- Payment Link Section -->
59
+ <div id="setupSection" class="space-y-6">
60
+ <div class="text-center mb-6">
61
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Setup Your Payment Gateway</h2>
62
+ <p class="text-gray-600">Enter your payment link to start accepting crypto</p>
63
+ </div>
64
+
65
+ <div class="space-y-4">
66
+ <div>
67
+ <label class="block text-sm font-medium text-gray-700 mb-2">
68
+ <i class="fas fa-link mr-2"></i>Payment Link URL
69
+ </label>
70
+ <input
71
+ type="url"
72
+ id="paymentLink"
73
+ placeholder="https://your-payment-link.com"
74
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
75
+ >
76
+ </div>
77
+
78
+ <div>
79
+ <label class="block text-sm font-medium text-gray-700 mb-2">
80
+ <i class="fas fa-coins mr-2"></i>Select Cryptocurrency
81
+ </label>
82
+ <select id="cryptoSelect" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
83
+ <option value="BTC">Bitcoin (BTC)</option>
84
+ <option value="ETH">Ethereum (ETH)</option>
85
+ <option value="USDT">Tether (USDT)</option>
86
+ <option value="BNB">Binance Coin (BNB)</option>
87
+ <option value="SOL">Solana (SOL)</option>
88
+ </select>
89
+ </div>
90
+
91
+ <button
92
+ onclick="setupGateway()"
93
+ class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl"
94
+ >
95
+ <i class="fas fa-rocket mr-2"></i>Setup Gateway
96
+ </button>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Payment Section -->
101
+ <div id="paymentSection" class="hidden space-y-6">
102
+ <div class="text-center mb-6">
103
+ <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
104
+ <i class="fas fa-check text-green-600 text-2xl"></i>
105
+ </div>
106
+ <h2 class="text-2xl font-bold text-gray-800">Ready to Buy Crypto</h2>
107
+ <p class="text-gray-600">Choose your amount and currency</p>
108
+ </div>
109
+
110
+ <!-- Crypto Display -->
111
+ <div class="grid grid-cols-5 gap-4 mb-6">
112
+ <div class="crypto-icon cursor-pointer p-3 rounded-lg hover:bg-gray-100 transition-all" onclick="selectCrypto('BTC')">
113
+ <div class="text-center">
114
+ <i class="fab fa-bitcoin text-3xl text-orange-500"></i>
115
+ <p class="text-xs mt-1">BTC</p>
116
+ </div>
117
+ </div>
118
+ <div class="crypto-icon cursor-pointer p-3 rounded-lg hover:bg-gray-100 transition-all" onclick="selectCrypto('ETH')">
119
+ <div class="text-center">
120
+ <i class="fab fa-ethereum text-3xl text-indigo-600"></i>
121
+ <p class="text-xs mt-1">ETH</p>
122
+ </div>
123
+ </div>
124
+ <div class="crypto-icon cursor-pointer p-3 rounded-lg hover:bg-gray-100 transition-all" onclick="selectCrypto('USDT')">
125
+ <div class="text-center">
126
+ <i class="fas fa-dollar-sign text-3xl text-green-600"></i>
127
+ <p class="text-xs mt-1">USDT</p>
128
+ </div>
129
+ </div>
130
+ <div class="crypto-icon cursor-pointer p-3 rounded-lg hover:bg-gray-100 transition-all" onclick="selectCrypto('BNB')">
131
+ <div class="text-center">
132
+ <i class="fas fa-coins text-3xl text-yellow-500"></i>
133
+ <p class="text-xs mt-1">BNB</p>
134
+ </div>
135
+ </div>
136
+ <div class="crypto-icon cursor-pointer p-3 rounded-lg hover:bg-gray-100 transition-all" onclick="selectCrypto('SOL')">
137
+ <div class="text-center">
138
+ <i class="fas fa-star text-3xl text-purple-500"></i>
139
+ <p class="text-xs mt-1">SOL</p>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Amount Input -->
145
+ <div class="space-y-4">
146
+ <div>
147
+ <label class="block text-sm font-medium text-gray-700 mb-2">
148
+ <i class="fas fa-dollar-sign mr-2"></i>Amount in USD
149
+ </label>
150
+ <input
151
+ type="number"
152
+ id="amountUSD"
153
+ placeholder="100"
154
+ min="10"
155
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
156
+ oninput="convertToCrypto()"
157
+ >
158
+ </div>
159
+
160
+ <div class="text-center p-4 bg-gray-50 rounded-lg">
161
+ <p class="text-sm text-gray-600">You'll receive approximately</p>
162
+ <p class="text-2xl font-bold text-gray-800 mt-1">
163
+ <span id="cryptoAmount">0.00</span> <span id="selectedCrypto">BTC</span>
164
+ </p>
165
+ <p class="text-xs text-gray-500 mt-1">Rate: 1 <span id="cryptoRate">BTC</span> = $<span id="usdRate">42000</span></p>
166
+ </div>
167
+
168
+ <button
169
+ onclick="proceedToPayment()"
170
+ class="w-full bg-gradient-to-r from-green-500 to-emerald-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-green-600 hover:to-emerald-700 transition-all duration-300 shadow-lg hover:shadow-xl"
171
+ >
172
+ <i class="fas fa-shopping-cart mr-2"></i>Buy Crypto Now
173
+ </button>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Success Section -->
178
+ <div id="successSection" class="hidden text-center space-y-6">
179
+ <div class="animate__animated animate__bounceIn">
180
+ <div class="inline-flex items-center justify-center w-20 h-20 bg-green-100 rounded-full mb-4">
181
+ <i class="fas fa-check-circle text-green-600 text-4xl"></i>
182
+ </div>
183
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Payment Initiated!</h2>
184
+ <p class="text-gray-600 mb-4">Redirecting to your payment gateway...</p>
185
+ <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto"></div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Footer -->
191
+ <div class="text-center mt-6">
192
+ <p class="text-white/70 text-sm">
193
+ <i class="fas fa-shield-alt mr-1"></i>
194
+ Secure payments powered by CryptoFlow
195
+ </p>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <script>
201
+ const cryptoRates = {
202
+ BTC: 42000,
203
+ ETH: 2800,
204
+ USDT: 1,
205
+ BNB: 320,
206
+ SOL: 98
207
+ };
208
+
209
+ let currentCrypto = 'BTC';
210
+ let paymentLink = '';
211
+
212
+ function setupGateway() {
213
+ const linkInput = document.getElementById('paymentLink');
214
+ paymentLink = linkInput.value.trim();
215
+
216
+ if (!paymentLink || !isValidUrl(paymentLink)) {
217
+ alert('Please enter a valid payment link URL');
218
+ return;
219
+ }
220
+
221
+ document.getElementById('setupSection').classList.add('hidden');
222
+ document.getElementById('paymentSection').classList.remove('hidden');
223
+ }
224
+
225
+ function isValidUrl(string) {
226
+ try {
227
+ new URL(string);
228
+ return true;
229
+ } catch (_) {
230
+ return false;
231
+ }
232
+ }
233
+
234
+ function selectCrypto(crypto) {
235
+ currentCrypto = crypto;
236
+ document.getElementById('selectedCrypto').textContent = crypto;
237
+ document.getElementById('cryptoRate').textContent = crypto;
238
+ document.getElementById('usdRate').textContent = cryptoRates[crypto];
239
+ convertToCrypto();
240
+ }
241
+
242
+ function convertToCrypto() {
243
+ const usdAmount = parseFloat(document.getElementById('amountUSD').value) || 0;
244
+ const cryptoEquivalent = usdAmount / cryptoRates[currentCrypto];
245
+ document.getElementById('cryptoAmount').textContent = cryptoEquivalent.toFixed(6);
246
+ }
247
+
248
+ function proceedToPayment() {
249
+ const amount = document.getElementById('amountUSD').value;
250
+ if (!amount || amount < 10) {
251
+ alert('Please enter an amount of at least $10');
252
+ return;
253
+ }
254
+
255
+ // Show success animation
256
+ document.getElementById('paymentSection').classList.add('hidden');
257
+ document.getElementById('successSection').classList.remove('hidden');
258
+
259
+ // Construct final payment URL with parameters
260
+ const finalUrl = new URL(paymentLink);
261
+ finalUrl.searchParams.append('amount', amount);
262
+ finalUrl.searchParams.append('currency', 'USD');
263
+ finalUrl.searchParams.append('crypto', currentCrypto);
264
+ finalUrl.searchParams.append('cryptoAmount', document.getElementById('cryptoAmount').textContent);
265
+
266
+ // Redirect after 2 seconds
267
+ setTimeout(() => {
268
+ window.location.href = finalUrl.toString();
269
+ }, 2000);
270
+ }
271
+
272
+ // Initialize
273
+ document.addEventListener('DOMContentLoaded', () => {
274
+ convertToCrypto();
275
+ });
276
+ </script>
277
+ <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=steveadams2834/cryptoflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
278
+ </html>