Hugging Face's logo

Spaces:
privateuserh
/
tstyladbot
Running

App Files Community
privateuserh commited on
Commit
cbcfaab
·
verified ·
1 Parent(s): e3fce7c

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +90 -58
index.html CHANGED
@@ -22,6 +22,14 @@
22
  .qr-code-placeholder {
23
  background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #e0e0e0 10px, #e0e0e0 20px);
24
  }
 
 
 
 
 
 
 
 
25
  </style>
26
  </head>
27
  <body class="bg-gray-50 min-h-screen">
@@ -31,14 +39,14 @@
31
  <div class="flex justify-between items-center">
32
  <div class="flex items-center space-x-2">
33
  <i class="fab fa-telegram text-3xl"></i>
34
- <h1 class="text-2xl font-bold">Telegram Ad Platform</h1>
35
  </div>
36
  <nav>
37
  <ul class="flex space-x-6">
38
  <li><a href="#" class="hover:underline">Home</a></li>
39
  <li><a href="#" class="hover:underline">Pricing</a></li>
40
  <li><a href="#" class="hover:underline">FAQ</a></li>
41
- <li><a href="#" class="hover:underline">Contact</a></li>
42
  </ul>
43
  </nav>
44
  </div>
@@ -49,8 +57,11 @@
49
  <main class="container mx-auto px-4 py-12">
50
  <div class="max-w-4xl mx-auto">
51
  <div class="text-center mb-12">
52
- <h2 class="text-4xl font-bold text-gray-800 mb-4">Reach Thousands on Telegram</h2>
53
- <p class="text-xl text-gray-600">Submit your ad copy, make payment, and we'll post it to our Telegram channels with thousands of subscribers.</p>
 
 
 
54
  </div>
55
 
56
  <!-- Ad Form -->
@@ -105,7 +116,7 @@
105
  </div>
106
 
107
  <div class="flex justify-end">
108
- <button type="submit" class="gradient-bg text-white px-8 py-3 rounded-lg font-semibold hover:opacity-90 transition duration-200 shadow-lg">
109
  Continue to Payment <i class="fas fa-arrow-right ml-2"></i>
110
  </button>
111
  </div>
@@ -114,23 +125,43 @@
114
 
115
  <!-- Stats Section -->
116
  <div class="bg-white rounded-xl shadow-lg p-8 mb-12">
117
- <h3 class="text-2xl font-semibold text-gray-800 mb-6">Our Reach</h3>
118
- <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
119
- <div class="p-4">
120
- <div class="text-4xl font-bold text-purple-600 mb-2">15+</div>
121
- <div class="text-gray-600">Telegram Channels</div>
 
 
 
 
 
122
  </div>
123
- <div class="p-4">
124
- <div class="text-4xl font-bold text-purple-600 mb-2">250K+</div>
125
- <div class="text-gray-600">Total Subscribers</div>
 
 
 
 
 
126
  </div>
127
- <div class="p-4">
128
- <div class="text-4xl font-bold text-purple-600 mb-2">10K+</div>
129
- <div class="text-gray-600">Daily Views</div>
 
 
 
 
 
130
  </div>
131
- <div class="p-4">
132
- <div class="text-4xl font-bold text-purple-600 mb-2">95%</div>
133
- <div class="text-gray-600">Engagement Rate</div>
 
 
 
 
 
134
  </div>
135
  </div>
136
  </div>
@@ -194,7 +225,7 @@
194
  </div>
195
  <div class="ml-3">
196
  <p class="text-sm text-yellow-700">
197
- Your ad will be automatically posted to our Telegram channels once payment is confirmed (usually within 15 minutes).
198
  </p>
199
  </div>
200
  </div>
@@ -220,13 +251,16 @@
220
  <i class="fas fa-check text-green-500 text-3xl"></i>
221
  </div>
222
  <h3 class="text-2xl font-bold text-gray-800 mb-4">Payment Received!</h3>
223
- <p class="text-gray-600 mb-6">Your ad has been successfully posted to our Telegram channels. Thank you for advertising with us!</p>
224
  <div class="bg-gray-50 p-4 rounded-lg mb-6">
225
  <p class="text-sm font-medium text-gray-700">Transaction ID:</p>
226
  <p id="txId" class="font-mono text-sm break-all text-gray-600">a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6</p>
227
  </div>
228
- <button id="closeSuccessModal" class="gradient-bg text-white px-8 py-3 rounded-lg font-semibold hover:opacity-90 transition duration-200">
229
- Done <i class="fas fa-check ml-2"></i>
 
 
 
230
  </button>
231
  </div>
232
  </div>
@@ -237,8 +271,8 @@
237
  <div class="container mx-auto px-4">
238
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
239
  <div>
240
- <h4 class="text-xl font-bold mb-4">Telegram Ad Platform</h4>
241
- <p class="text-gray-400">The easiest way to reach thousands of potential customers through Telegram channels.</p>
242
  </div>
243
  <div>
244
  <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
@@ -246,7 +280,7 @@
246
  <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
247
  <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
248
  <li><a href="#" class="text-gray-400 hover:text-white">How It Works</a></li>
249
- <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
250
  </ul>
251
  </div>
252
  <div>
@@ -255,21 +289,18 @@
255
  <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
256
  <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
257
  <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
258
- <li><a href="#" class="text-gray-400 hover:text-white">Refund Policy</a></li>
259
  </ul>
260
  </div>
261
  <div>
262
  <h4 class="text-lg font-semibold mb-4">Connect With Us</h4>
263
  <div class="flex space-x-4">
264
- <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-telegram"></i></a>
265
- <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-twitter"></i></a>
266
- <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-discord"></i></a>
267
  </div>
268
- <p class="text-gray-400 mt-4">support@telegramadplatform.com</p>
269
  </div>
270
  </div>
271
  <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
272
- <p>&copy; 2023 Telegram Ad Platform. All rights reserved.</p>
273
  </div>
274
  </div>
275
  </footer>
@@ -277,7 +308,7 @@
277
  <script>
278
  // Telegram Bot API Token (in a real app, this should be handled server-side)
279
  const TELEGRAM_BOT_TOKEN = '6696162127:AAFOoREgdq4nHw4S8Bybcg4VCZbsJRCUT7c';
280
- const CHAT_ID = '-1001234567890'; // Example chat ID
281
 
282
  // DOM Elements
283
  const adForm = document.getElementById('adForm');
@@ -376,7 +407,32 @@
376
  // Send to Telegram (simulated in this frontend-only example)
377
  // In a real app, this would be done server-side
378
  console.log('Would send to Telegram:', telegramMessage);
379
- // sendToTelegram(telegramMessage);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
380
 
381
  // Show success modal
382
  paymentModal.classList.remove('active');
@@ -405,30 +461,6 @@
405
  timeLeft--;
406
  }, 1000);
407
  }
408
-
409
- // Function to send message to Telegram (would work in a real server implementation)
410
- function sendToTelegram(message) {
411
- const url = `https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`;
412
-
413
- fetch(url, {
414
- method: 'POST',
415
- headers: {
416
- 'Content-Type': 'application/json',
417
- },
418
- body: JSON.stringify({
419
- chat_id: CHAT_ID,
420
- text: message,
421
- parse_mode: 'Markdown'
422
- })
423
- })
424
- .then(response => response.json())
425
- .then(data => {
426
- console.log('Message sent to Telegram:', data);
427
- })
428
- .catch(error => {
429
- console.error('Error sending to Telegram:', error);
430
- });
431
- }
432
  </script>
433
  <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=privateuserh/tstyladbot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
434
  </html>
 
22
  .qr-code-placeholder {
23
  background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #e0e0e0 10px, #e0e0e0 20px);
24
  }
25
+ .pulse {
26
+ animation: pulse 2s infinite;
27
+ }
28
+ @keyframes pulse {
29
+ 0% { transform: scale(1); }
30
+ 50% { transform: scale(1.05); }
31
+ 100% { transform: scale(1); }
32
+ }
33
  </style>
34
  </head>
35
  <body class="bg-gray-50 min-h-screen">
 
39
  <div class="flex justify-between items-center">
40
  <div class="flex items-center space-x-2">
41
  <i class="fab fa-telegram text-3xl"></i>
42
+ <h1 class="text-2xl font-bold">MiyoMirai Ad Platform</h1>
43
  </div>
44
  <nav>
45
  <ul class="flex space-x-6">
46
  <li><a href="#" class="hover:underline">Home</a></li>
47
  <li><a href="#" class="hover:underline">Pricing</a></li>
48
  <li><a href="#" class="hover:underline">FAQ</a></li>
49
+ <li><a href="https://t.me/MiyoMirai" target="_blank" class="hover:underline">Our Channel</a></li>
50
  </ul>
51
  </nav>
52
  </div>
 
57
  <main class="container mx-auto px-4 py-12">
58
  <div class="max-w-4xl mx-auto">
59
  <div class="text-center mb-12">
60
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Advertise on MiyoMirai Telegram</h2>
61
+ <p class="text-xl text-gray-600">Submit your ad copy, make payment, and we'll post it to our growing Telegram channel.</p>
62
+ <a href="https://t.me/MiyoMirai" target="_blank" class="inline-block mt-4 gradient-bg text-white px-6 py-2 rounded-lg font-semibold hover:opacity-90 transition duration-200 shadow-lg">
63
+ <i class="fab fa-telegram mr-2"></i> Visit @MiyoMirai
64
+ </a>
65
  </div>
66
 
67
  <!-- Ad Form -->
 
116
  </div>
117
 
118
  <div class="flex justify-end">
119
+ <button type="submit" class="gradient-bg text-white px-8 py-3 rounded-lg font-semibold hover:opacity-90 transition duration-200 shadow-lg pulse">
120
  Continue to Payment <i class="fas fa-arrow-right ml-2"></i>
121
  </button>
122
  </div>
 
125
 
126
  <!-- Stats Section -->
127
  <div class="bg-white rounded-xl shadow-lg p-8 mb-12">
128
+ <h3 class="text-2xl font-semibold text-gray-800 mb-6">Why Advertise With Us?</h3>
129
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
130
+ <div class="flex items-start">
131
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
132
+ <i class="fas fa-users text-purple-600 text-xl"></i>
133
+ </div>
134
+ <div>
135
+ <h4 class="font-semibold text-lg mb-2">Growing Audience</h4>
136
+ <p class="text-gray-600">Reach an engaged audience in the MiyoMirai Telegram channel that's growing every day.</p>
137
+ </div>
138
  </div>
139
+ <div class="flex items-start">
140
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
141
+ <i class="fas fa-bolt text-purple-600 text-xl"></i>
142
+ </div>
143
+ <div>
144
+ <h4 class="font-semibold text-lg mb-2">Instant Delivery</h4>
145
+ <p class="text-gray-600">Your ad is posted automatically as soon as payment is confirmed.</p>
146
+ </div>
147
  </div>
148
+ <div class="flex items-start">
149
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
150
+ <i class="fas fa-lock text-purple-600 text-xl"></i>
151
+ </div>
152
+ <div>
153
+ <h4 class="font-semibold text-lg mb-2">Secure Payments</h4>
154
+ <p class="text-gray-600">Pay with Bitcoin Cash for fast, secure, and low-fee transactions.</p>
155
+ </div>
156
  </div>
157
+ <div class="flex items-start">
158
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
159
+ <i class="fas fa-chart-line text-purple-600 text-xl"></i>
160
+ </div>
161
+ <div>
162
+ <h4 class="font-semibold text-lg mb-2">Proven Results</h4>
163
+ <p class="text-gray-600">Many advertisers see increased traffic and engagement from our channel.</p>
164
+ </div>
165
  </div>
166
  </div>
167
  </div>
 
225
  </div>
226
  <div class="ml-3">
227
  <p class="text-sm text-yellow-700">
228
+ Your ad will be automatically posted to @MiyoMirai once payment is confirmed (usually within 15 minutes).
229
  </p>
230
  </div>
231
  </div>
 
251
  <i class="fas fa-check text-green-500 text-3xl"></i>
252
  </div>
253
  <h3 class="text-2xl font-bold text-gray-800 mb-4">Payment Received!</h3>
254
+ <p class="text-gray-600 mb-6">Your ad has been successfully posted to @MiyoMirai. Thank you for advertising with us!</p>
255
  <div class="bg-gray-50 p-4 rounded-lg mb-6">
256
  <p class="text-sm font-medium text-gray-700">Transaction ID:</p>
257
  <p id="txId" class="font-mono text-sm break-all text-gray-600">a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6</p>
258
  </div>
259
+ <a href="https://t.me/MiyoMirai" target="_blank" class="inline-block gradient-bg text-white px-6 py-2 rounded-lg font-semibold hover:opacity-90 transition duration-200 mb-4">
260
+ <i class="fab fa-telegram mr-2"></i> View on @MiyoMirai
261
+ </a>
262
+ <button id="closeSuccessModal" class="block w-full text-gray-600 hover:text-gray-800 font-medium mt-4">
263
+ <i class="fas fa-times mr-2"></i> Close
264
  </button>
265
  </div>
266
  </div>
 
271
  <div class="container mx-auto px-4">
272
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
273
  <div>
274
+ <h4 class="text-xl font-bold mb-4">MiyoMirai Ads</h4>
275
+ <p class="text-gray-400">The easiest way to reach our growing Telegram audience.</p>
276
  </div>
277
  <div>
278
  <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
 
280
  <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
281
  <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
282
  <li><a href="#" class="text-gray-400 hover:text-white">How It Works</a></li>
283
+ <li><a href="https://t.me/MiyoMirai" target="_blank" class="text-gray-400 hover:text-white">Our Channel</a></li>
284
  </ul>
285
  </div>
286
  <div>
 
289
  <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
290
  <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
291
  <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
 
292
  </ul>
293
  </div>
294
  <div>
295
  <h4 class="text-lg font-semibold mb-4">Connect With Us</h4>
296
  <div class="flex space-x-4">
297
+ <a href="https://t.me/MiyoMirai" target="_blank" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-telegram"></i></a>
 
 
298
  </div>
299
+ <p class="text-gray-400 mt-4">ads@miyomirai.com</p>
300
  </div>
301
  </div>
302
  <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
303
+ <p>&copy; 2023 MiyoMirai Ad Platform. All rights reserved.</p>
304
  </div>
305
  </div>
306
  </footer>
 
308
  <script>
309
  // Telegram Bot API Token (in a real app, this should be handled server-side)
310
  const TELEGRAM_BOT_TOKEN = '6696162127:AAFOoREgdq4nHw4S8Bybcg4VCZbsJRCUT7c';
311
+ const TELEGRAM_CHANNEL = '@MiyoMirai';
312
 
313
  // DOM Elements
314
  const adForm = document.getElementById('adForm');
 
407
  // Send to Telegram (simulated in this frontend-only example)
408
  // In a real app, this would be done server-side
409
  console.log('Would send to Telegram:', telegramMessage);
410
+ console.log('Posting to channel:', TELEGRAM_CHANNEL);
411
+
412
+ // In a real implementation, you would call your backend which would then:
413
+ // 1. Verify the payment was received
414
+ // 2. Use the Telegram Bot API to post to the channel
415
+ // Example API call (would need to be done server-side):
416
+ /*
417
+ fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`, {
418
+ method: 'POST',
419
+ headers: {
420
+ 'Content-Type': 'application/json',
421
+ },
422
+ body: JSON.stringify({
423
+ chat_id: TELEGRAM_CHANNEL,
424
+ text: telegramMessage,
425
+ parse_mode: 'Markdown'
426
+ })
427
+ })
428
+ .then(response => response.json())
429
+ .then(data => {
430
+ console.log('Message sent to Telegram:', data);
431
+ })
432
+ .catch(error => {
433
+ console.error('Error sending to Telegram:', error);
434
+ });
435
+ */
436
 
437
  // Show success modal
438
  paymentModal.classList.remove('active');
 
461
  timeLeft--;
462
  }, 1000);
463
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
464
  </script>
465
  <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=privateuserh/tstyladbot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
466
  </html>