Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Advertise With Us - Telegram Ad Platform</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .payment-modal { | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| .payment-modal.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .qr-code-placeholder { | |
| background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #e0e0e0 10px, #e0e0e0 20px); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fab fa-telegram text-3xl"></i> | |
| <h1 class="text-2xl font-bold">MiyoMirai Ad Platform</h1> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:underline">Home</a></li> | |
| <li><a href="#" class="hover:underline">Pricing</a></li> | |
| <li><a href="#" class="hover:underline">FAQ</a></li> | |
| <li><a href="https://t.me/MiyoMirai" target="_blank" class="hover:underline">Our Channel</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold text-gray-800 mb-4">Advertise on MiyoMirai Telegram</h2> | |
| <p class="text-xl text-gray-600">Submit your ad copy, make payment, and we'll post it to our growing Telegram channel.</p> | |
| <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"> | |
| <i class="fab fa-telegram mr-2"></i> Visit @MiyoMirai | |
| </a> | |
| </div> | |
| <!-- Ad Form --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 mb-12"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6">Create Your Ad</h3> | |
| <form id="adForm"> | |
| <div class="mb-6"> | |
| <label for="adTitle" class="block text-gray-700 font-medium mb-2">Ad Title</label> | |
| <input type="text" id="adTitle" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Enter a catchy title" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="adContent" class="block text-gray-700 font-medium mb-2">Ad Content</label> | |
| <textarea id="adContent" rows="6" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Write your ad content here..." required></textarea> | |
| <p class="text-sm text-gray-500 mt-2">Maximum 500 characters. HTML tags will be removed.</p> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="adLink" class="block text-gray-700 font-medium mb-2">Link (optional)</label> | |
| <input type="url" id="adLink" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="https://example.com"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Ad Duration</label> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="border rounded-lg p-4 hover:border-purple-500 cursor-pointer duration-200"> | |
| <input type="radio" id="duration1" name="duration" value="1" class="hidden" checked> | |
| <label for="duration1" class="flex flex-col items-center cursor-pointer"> | |
| <span class="font-semibold">24 Hours</span> | |
| <span class="text-purple-600 font-bold">0.005 BCH</span> | |
| <span class="text-sm text-gray-500">~$2.50</span> | |
| </label> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:border-purple-500 cursor-pointer duration-200"> | |
| <input type="radio" id="duration3" name="duration" value="3" class="hidden"> | |
| <label for="duration3" class="flex flex-col items-center cursor-pointer"> | |
| <span class="font-semibold">3 Days</span> | |
| <span class="text-purple-600 font-bold">0.012 BCH</span> | |
| <span class="text-sm text-gray-500">~$6.00</span> | |
| </label> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:border-purple-500 cursor-pointer duration-200"> | |
| <input type="radio" id="duration7" name="duration" value="7" class="hidden"> | |
| <label for="duration7" class="flex flex-col items-center cursor-pointer"> | |
| <span class="font-semibold">7 Days</span> | |
| <span class="text-purple-600 font-bold">0.025 BCH</span> | |
| <span class="text-sm text-gray-500">~$12.50</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <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"> | |
| Continue to Payment <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Stats Section --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 mb-12"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6">Why Advertise With Us?</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-users text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-2">Growing Audience</h4> | |
| <p class="text-gray-600">Reach an engaged audience in the MiyoMirai Telegram channel that's growing every day.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-bolt text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-2">Instant Delivery</h4> | |
| <p class="text-gray-600">Your ad is posted automatically as soon as payment is confirmed.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-lock text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-2">Secure Payments</h4> | |
| <p class="text-gray-600">Pay with Bitcoin Cash for fast, secure, and low-fee transactions.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-chart-line text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-2">Proven Results</h4> | |
| <p class="text-gray-600">Many advertisers see increased traffic and engagement from our channel.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Payment Modal --> | |
| <div id="paymentModal" class="payment-modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-md mx-4"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-gray-800">Complete Payment</h3> | |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Ad Duration:</span> | |
| <span id="modalDuration" class="font-semibold">24 Hours</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Amount Due:</span> | |
| <span id="modalAmount" class="font-semibold text-purple-600">0.005 BCH</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Approx USD:</span> | |
| <span id="modalUsd" class="font-semibold">~$2.50</span> | |
| </div> | |
| </div> | |
| <div class="mb-6 text-center"> | |
| <div class="qr-code-placeholder w-48 h-48 mx-auto mb-4 flex items-center justify-center"> | |
| <i class="fas fa-qrcode text-4xl text-gray-400"></i> | |
| </div> | |
| <div class="bg-gray-100 p-3 rounded-lg mb-4"> | |
| <p id="paymentAddress" class="font-mono text-sm break-all">bitcoincash:qpm2qsznhks23z7629mms6s4cwef74vcwvy22gdx6a</p> | |
| </div> | |
| <button id="copyAddress" class="text-purple-600 hover:text-purple-800 text-sm"> | |
| <i class="fas fa-copy mr-1"></i> Copy Address | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-clock text-purple-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Payment expires in <span id="paymentTimer" class="font-bold">15:00</span></p> | |
| <p class="text-xs text-gray-500">Send exact amount to the address above</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-circle text-yellow-500 mt-1"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| Your ad will be automatically posted to @MiyoMirai once payment is confirmed (usually within 15 minutes). | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button id="cancelPayment" class="text-gray-600 hover:text-gray-800 font-medium"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <button id="checkPayment" class="gradient-bg text-white px-6 py-2 rounded-lg font-semibold hover:opacity-90 transition duration-200"> | |
| <i class="fas fa-check-circle mr-2"></i> I've Paid | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Modal --> | |
| <div id="successModal" class="payment-modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-md mx-4"> | |
| <div class="p-8 text-center"> | |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-check text-green-500 text-3xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Payment Received!</h3> | |
| <p class="text-gray-600 mb-6">Your ad has been successfully posted to @MiyoMirai. Thank you for advertising with us!</p> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-6"> | |
| <p class="text-sm font-medium text-gray-700">Transaction ID:</p> | |
| <p id="txId" class="font-mono text-sm break-all text-gray-600">a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6</p> | |
| </div> | |
| <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"> | |
| <i class="fab fa-telegram mr-2"></i> View on @MiyoMirai | |
| </a> | |
| <button id="closeSuccessModal" class="block w-full text-gray-600 hover:text-gray-800 font-medium mt-4"> | |
| <i class="fas fa-times mr-2"></i> Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4">MiyoMirai Ads</h4> | |
| <p class="text-gray-400">The easiest way to reach our growing Telegram audience.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">How It Works</a></li> | |
| <li><a href="https://t.me/MiyoMirai" target="_blank" class="text-gray-400 hover:text-white">Our Channel</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Connect With Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="https://t.me/MiyoMirai" target="_blank" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-telegram"></i></a> | |
| </div> | |
| <p class="text-gray-400 mt-4">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 MiyoMirai Ad Platform. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Telegram Bot API Token (in a real app, this should be handled server-side) | |
| const TELEGRAM_BOT_TOKEN = '6696162127:AAFOoREgdq4nHw4S8Bybcg4VCZbsJRCUT7c'; | |
| const TELEGRAM_CHANNEL = '@MiyoMirai'; | |
| // DOM Elements | |
| const adForm = document.getElementById('adForm'); | |
| const paymentModal = document.getElementById('paymentModal'); | |
| const successModal = document.getElementById('successModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const closeSuccessModal = document.getElementById('closeSuccessModal'); | |
| const cancelPayment = document.getElementById('cancelPayment'); | |
| const checkPayment = document.getElementById('checkPayment'); | |
| const copyAddress = document.getElementById('copyAddress'); | |
| const paymentAddress = document.getElementById('paymentAddress'); | |
| const modalDuration = document.getElementById('modalDuration'); | |
| const modalAmount = document.getElementById('modalAmount'); | |
| const modalUsd = document.getElementById('modalUsd'); | |
| const paymentTimer = document.getElementById('paymentTimer'); | |
| const txId = document.getElementById('txId'); | |
| // Pricing data | |
| const pricing = { | |
| '1': { bch: '0.005', usd: '2.50', text: '24 Hours' }, | |
| '3': { bch: '0.012', usd: '6.00', text: '3 Days' }, | |
| '7': { bch: '0.025', usd: '12.50', text: '7 Days' } | |
| }; | |
| // Form submission | |
| adForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const duration = document.querySelector('input[name="duration"]:checked').value; | |
| const durationData = pricing[duration]; | |
| // Update modal with selected duration and price | |
| modalDuration.textContent = durationData.text; | |
| modalAmount.textContent = `${durationData.bch} BCH`; | |
| modalUsd.textContent = `~$${durationData.usd}`; | |
| // Show payment modal | |
| paymentModal.classList.add('active'); | |
| // Start payment timer (15 minutes) | |
| startPaymentTimer(15); | |
| }); | |
| // Close modal | |
| closeModal.addEventListener('click', function() { | |
| paymentModal.classList.remove('active'); | |
| }); | |
| // Close success modal | |
| closeSuccessModal.addEventListener('click', function() { | |
| successModal.classList.remove('active'); | |
| }); | |
| // Cancel payment | |
| cancelPayment.addEventListener('click', function() { | |
| paymentModal.classList.remove('active'); | |
| }); | |
| // Copy payment address | |
| copyAddress.addEventListener('click', function() { | |
| navigator.clipboard.writeText(paymentAddress.textContent) | |
| .then(() => { | |
| const originalText = copyAddress.innerHTML; | |
| copyAddress.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!'; | |
| setTimeout(() => { | |
| copyAddress.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| }); | |
| // Check payment (simulated) | |
| checkPayment.addEventListener('click', function() { | |
| // In a real implementation, you would check the blockchain for payment | |
| // Here we simulate a successful payment after 2 seconds | |
| checkPayment.disabled = true; | |
| checkPayment.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Checking...'; | |
| setTimeout(() => { | |
| // Simulate successful payment | |
| const randomTxId = 'tx_' + Math.random().toString(36).substr(2, 20); | |
| txId.textContent = randomTxId; | |
| // Get form data | |
| const adTitle = document.getElementById('adTitle').value; | |
| const adContent = document.getElementById('adContent').value; | |
| const adLink = document.getElementById('adLink').value; | |
| // Format the ad for Telegram | |
| let telegramMessage = `*${adTitle}*\n\n`; | |
| telegramMessage += `${adContent}\n\n`; | |
| if (adLink) { | |
| telegramMessage += `🔗 ${adLink}`; | |
| } | |
| // Send to Telegram (simulated in this frontend-only example) | |
| // In a real app, this would be done server-side | |
| console.log('Would send to Telegram:', telegramMessage); | |
| console.log('Posting to channel:', TELEGRAM_CHANNEL); | |
| // In a real implementation, you would call your backend which would then: | |
| // 1. Verify the payment was received | |
| // 2. Use the Telegram Bot API to post to the channel | |
| // Example API call (would need to be done server-side): | |
| /* | |
| fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| chat_id: TELEGRAM_CHANNEL, | |
| text: telegramMessage, | |
| parse_mode: 'Markdown' | |
| }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| console.log('Message sent to Telegram:', data); | |
| }) | |
| .catch(error => { | |
| console.error('Error sending to Telegram:', error); | |
| }); | |
| */ | |
| // Show success modal | |
| paymentModal.classList.remove('active'); | |
| successModal.classList.add('active'); | |
| // Reset form | |
| adForm.reset(); | |
| }, 2000); | |
| }); | |
| // Start payment timer | |
| function startPaymentTimer(minutes) { | |
| let timeLeft = minutes * 60; | |
| const timer = setInterval(() => { | |
| if (timeLeft <= 0) { | |
| clearInterval(timer); | |
| paymentTimer.textContent = 'Expired'; | |
| paymentTimer.classList.add('text-red-500'); | |
| return; | |
| } | |
| const mins = Math.floor(timeLeft / 60); | |
| const secs = timeLeft % 60; | |
| paymentTimer.textContent = `${mins}:${secs < 10 ? '0' + secs : secs}`; | |
| timeLeft--; | |
| }, 1000); | |
| } | |
| </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=privateuserh/tstyladbot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |