Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Envato Voucher Generator | CodeCanyon Discount Codes</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> | |
| .glow-text { | |
| text-shadow: 0 0 10px rgba(74, 222, 128, 0.8); | |
| } | |
| .terminal-bg { | |
| background-color: #011627; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(5, 69, 122, 0.3) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(5, 122, 81, 0.3) 0%, transparent 20%); | |
| } | |
| .code-input { | |
| font-family: 'Courier New', monospace; | |
| letter-spacing: 2px; | |
| } | |
| .voucher-card { | |
| transform-style: preserve-3d; | |
| transform: perspective(1000px); | |
| transition: all 0.5s ease; | |
| } | |
| .voucher-card:hover { | |
| transform: perspective(1000px) rotateX(5deg) translateY(-5px); | |
| box-shadow: 0 20px 30px -10px rgba(16, 185, 129, 0.3); | |
| } | |
| .scan-line { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 10px; | |
| background: linear-gradient(to bottom, | |
| rgba(16, 185, 129, 0.1) 0%, | |
| rgba(16, 185, 129, 0.7) 50%, | |
| rgba(16, 185, 129, 0.1) 100%); | |
| animation: scan 3s linear infinite; | |
| opacity: 0.7; | |
| } | |
| @keyframes scan { | |
| 0% { top: 0; } | |
| 100% { top: 100%; } | |
| } | |
| </style> | |
| </head> | |
| <body class="terminal-bg min-h-screen text-gray-100"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <div class="flex justify-center items-center mb-4"> | |
| <i class="fas fa-code text-emerald-400 text-4xl mr-3"></i> | |
| <h1 class="text-4xl font-bold glow-text text-emerald-400">Envato Vault</h1> | |
| </div> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| Premium voucher generator for Envato Market & CodeCanyon. | |
| Get discount codes for your next purchase. | |
| </p> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-4xl mx-auto"> | |
| <!-- Generator Card --> | |
| <div class="bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6 mb-8 border border-gray-700 shadow-lg"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-emerald-900 bg-opacity-50 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-key text-emerald-400 text-xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-semibold text-emerald-400">Generate Voucher</h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="md:col-span-2"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-400 mb-2">Select Platform</label> | |
| <div class="flex space-x-2"> | |
| <button class="platform-btn active bg-emerald-800 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fab fa-envato mr-2"></i> Envato | |
| </button> | |
| <button class="platform-btn bg-gray-700 hover:bg-gray-600 text-gray-300 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-code mr-2"></i> CodeCanyon | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-400 mb-2">Discount Value</label> | |
| <div class="flex space-x-2"> | |
| <button class="value-btn active bg-emerald-800 text-white px-4 py-2 rounded-lg">10%</button> | |
| <button class="value-btn bg-gray-700 hover:bg-gray-600 text-gray-300 px-4 py-2 rounded-lg">20%</button> | |
| <button class="value-btn bg-gray-700 hover:bg-gray-600 text-gray-300 px-4 py-2 rounded-lg">50%</button> | |
| <button class="value-btn bg-gray-700 hover:bg-gray-600 text-gray-300 px-4 py-2 rounded-lg">Custom</button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-400 mb-2">Your Email</label> | |
| <input type="email" placeholder="email@example.com" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500"> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="h-full flex flex-col"> | |
| <div class="flex-grow flex items-center justify-center bg-gray-900 rounded-lg p-6 border border-gray-700 relative overflow-hidden"> | |
| <div class="scan-line"></div> | |
| <div class="text-center"> | |
| <p class="text-gray-500 text-sm mb-1">Your voucher code</p> | |
| <p id="voucherCode" class="text-2xl font-mono font-bold text-emerald-400 tracking-wider">------</p> | |
| </div> | |
| </div> | |
| <button id="generateBtn" class="mt-4 w-full bg-gradient-to-r from-emerald-600 to-emerald-800 hover:from-emerald-500 hover:to-emerald-700 text-white font-semibold py-3 px-4 rounded-lg shadow-lg transition-all duration-300 transform hover:scale-[1.02] flex items-center justify-center"> | |
| <i class="fas fa-bolt mr-2"></i> Generate Code | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Vouchers --> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold text-emerald-400 mb-4 flex items-center"> | |
| <i class="fas fa-history mr-2"></i> Recently Generated | |
| </h3> | |
| <div class="grid md:grid-cols-3 gap-4" id="recentVouchers"> | |
| <!-- Will be populated by JS --> | |
| </div> | |
| </div> | |
| <!-- Features --> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div class="voucher-card bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6 border border-gray-700"> | |
| <div class="bg-emerald-900 bg-opacity-30 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4"> | |
| <i class="fas fa-shield-alt text-emerald-400"></i> | |
| </div> | |
| <h4 class="text-lg font-semibold text-emerald-400 mb-2">Secure Generation</h4> | |
| <p class="text-gray-400">Military-grade encryption ensures your voucher codes are unique and untraceable.</p> | |
| </div> | |
| <div class="voucher-card bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6 border border-gray-700"> | |
| <div class="bg-emerald-900 bg-opacity-30 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4"> | |
| <i class="fas fa-bolt text-emerald-400"></i> | |
| </div> | |
| <h4 class="text-lg font-semibold text-emerald-400 mb-2">Instant Delivery</h4> | |
| <p class="text-gray-400">Codes are generated in milliseconds and delivered directly to your dashboard.</p> | |
| </div> | |
| <div class="voucher-card bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6 border border-gray-700"> | |
| <div class="bg-emerald-900 bg-opacity-30 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4"> | |
| <i class="fas fa-infinity text-emerald-400"></i> | |
| </div> | |
| <h4 class="text-lg font-semibold text-emerald-400 mb-2">Unlimited Usage</h4> | |
| <p class="text-gray-400">Generate as many codes as you need with no restrictions or hidden limits.</p> | |
| </div> | |
| </div> | |
| <!-- Disclaimer --> | |
| <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-800 text-center"> | |
| <i class="fas fa-exclamation-triangle text-yellow-400 mb-2 text-xl"></i> | |
| <p class="text-gray-400 text-sm"> | |
| This is a fictional demonstration. No actual Envato or CodeCanyon voucher codes are being generated. | |
| This UI is for educational purposes only. | |
| </p> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Platform selection | |
| const platformBtns = document.querySelectorAll('.platform-btn'); | |
| platformBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| platformBtns.forEach(b => b.classList.remove('active', 'bg-emerald-800', 'text-white')); | |
| platformBtns.forEach(b => b.classList.add('bg-gray-700', 'text-gray-300')); | |
| this.classList.add('active', 'bg-emerald-800', 'text-white'); | |
| this.classList.remove('bg-gray-700', 'text-gray-300'); | |
| }); | |
| }); | |
| // Value selection | |
| const valueBtns = document.querySelectorAll('.value-btn'); | |
| valueBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| valueBtns.forEach(b => b.classList.remove('active', 'bg-emerald-800', 'text-white')); | |
| valueBtns.forEach(b => b.classList.add('bg-gray-700', 'text-gray-300')); | |
| this.classList.add('active', 'bg-emerald-800', 'text-white'); | |
| this.classList.remove('bg-gray-700', 'text-gray-300'); | |
| }); | |
| }); | |
| // Generate voucher code | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const voucherCode = document.getElementById('voucherCode'); | |
| const recentVouchers = document.getElementById('recentVouchers'); | |
| generateBtn.addEventListener('click', function() { | |
| // Animation | |
| this.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> Generating...'; | |
| this.classList.add('opacity-75'); | |
| // Simulate generation | |
| setTimeout(() => { | |
| const code = generateRandomCode(); | |
| voucherCode.textContent = code; | |
| // Add to recent | |
| addRecentVoucher(code); | |
| // Reset button | |
| this.innerHTML = '<i class="fas fa-check mr-2"></i> Generated!'; | |
| setTimeout(() => { | |
| this.innerHTML = '<i class="fas fa-bolt mr-2"></i> Generate Code'; | |
| this.classList.remove('opacity-75'); | |
| }, 1500); | |
| }, 1500); | |
| }); | |
| // Generate random code | |
| function generateRandomCode() { | |
| const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; | |
| let result = ''; | |
| for (let i = 0; i < 10; i++) { | |
| if (i > 0 && i % 5 === 0) result += '-'; | |
| result += chars.charAt(Math.floor(Math.random() * chars.length)); | |
| } | |
| return result; | |
| } | |
| // Add to recent vouchers | |
| function addRecentVoucher(code) { | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); | |
| const voucherItem = document.createElement('div'); | |
| voucherItem.className = 'voucher-card bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-lg p-4 border border-gray-700'; | |
| voucherItem.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <div class="bg-emerald-900 bg-opacity-30 p-2 rounded-lg"> | |
| <i class="fab fa-envato text-emerald-400"></i> | |
| </div> | |
| <span class="text-xs text-gray-500">${timeString}</span> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-1">Discount Code</p> | |
| <p class="font-mono font-bold text-emerald-400">${code}</p> | |
| <div class="mt-3 flex justify-between items-center text-xs"> | |
| <span class="bg-emerald-900 bg-opacity-20 text-emerald-400 px-2 py-1 rounded">20% OFF</span> | |
| <button class="text-gray-500 hover:text-emerald-400"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| `; | |
| // Add copy functionality | |
| voucherItem.querySelector('button').addEventListener('click', function() { | |
| navigator.clipboard.writeText(code); | |
| const icon = this.querySelector('i'); | |
| icon.classList.remove('fa-copy'); | |
| icon.classList.add('fa-check'); | |
| setTimeout(() => { | |
| icon.classList.remove('fa-check'); | |
| icon.classList.add('fa-copy'); | |
| }, 1500); | |
| }); | |
| // Prepend to keep recent first | |
| if (recentVouchers.children.length >= 3) { | |
| recentVouchers.removeChild(recentVouchers.lastChild); | |
| } | |
| recentVouchers.prepend(voucherItem); | |
| } | |
| // Generate some sample vouchers | |
| for (let i = 0; i < 3; i++) { | |
| setTimeout(() => { | |
| addRecentVoucher(generateRandomCode()); | |
| }, i * 100); | |
| } | |
| }); | |
| </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=docto41/envato-vault" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |