Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rent LinkedIn by Xanz</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"> | |
| </script> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.6s ease-out forwards; | |
| } | |
| </style> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#2867B2', | |
| secondary: '#25D366', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { animation: float 3s ease-in-out infinite; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0 opacity-90"></div> | |
| <div class="relative z-10 max-w-4xl mx-auto px-4 py-8 md:py-12"> | |
| <!-- Header --> | |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden mb-8"> | |
| <div class="bg-primary p-6 flex flex-col md:flex-row justify-between items-center shadow-md"> | |
| <div class="flex items-center space-x-4"> | |
| <i data-feather="linkedin" class="w-10 h-10 text-white"></i> | |
| <h1 class="text-3xl font-bold text-white" id="title">Rent LinkedIn by Xanz</h1> | |
| </div> | |
| <button id="langToggle" class="mt-4 md:mt-0 px-6 py-2 bg-white text-primary rounded-full font-medium hover:bg-opacity-90 transition-all"> | |
| <span id="langToggleText">Switch to Bahasa</span> | |
| </button> | |
| </div> | |
| <!-- Announcement --> | |
| <div class="p-6 bg-yellow-50 border-l-4 border-yellow-400 animate-pulse"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-2" id="announcement-title">OFFICIAL ANNOUNCEMENT</h2> | |
| <p class="text-gray-700" id="announcement-desc">We are opening a LinkedIn account rental service specifically for product/service marketing needs in the United States & Europe.</p> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="p-6"> | |
| <!-- Schedule Section --> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="calendar" class="w-6 h-6 mr-2 text-primary"></i> | |
| <h2 class="text-2xl font-semibold text-gray-800" id="schedule-title">Account Collection Schedule</h2> | |
| </div> | |
| <ul class="space-y-3" id="schedule-list"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i data-feather="check" class="w-4 h-4 text-primary"></i> | |
| </div> | |
| <span class="ml-3 text-gray-700" id="schedule-item-1"><strong>Thursday - Tuesday:</strong> 8:00 PM – 12:00 AM WIB</span> | |
| </li> | |
| <!-- Other list items --> | |
| </ul> | |
| </div> | |
| <!-- Terms Section --> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="file-text" class="w-6 h-6 mr-2 text-primary"></i> | |
| <h2 class="text-2xl font-semibold text-gray-800" id="terms-title">Requirements & Terms</h2> | |
| </div> | |
| <ol class="space-y-4" id="terms-list"> | |
| <li class="flex items-start"> | |
| <span class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0">1</span> | |
| <span class="ml-3 text-gray-700" id="term-1"><span class="bg-blue-100 px-2 py-1 rounded-md font-medium">+20 Connections</span></span> | |
| </li> | |
| <!-- Other list items --> | |
| </ol> | |
| <div class="mt-6 p-4 bg-red-50 border-l-4 border-red-400 rounded-r"> | |
| <p class="text-red-700 font-medium" id="important-notice">⚠️ IMPORTANT! Do not share email & password in groups!</p> | |
| </div> | |
| </div> | |
| <!-- CTA Buttons --> | |
| <div class="flex flex-col sm:flex-row gap-4 mt-8"> | |
| <button id="rentBtn" class="px-6 py-3 bg-primary text-white rounded-lg font-medium hover:bg-blue-700 transition-all flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-1"> | |
| <i data-feather="plus-circle" class="w-5 h-5 mr-2"></i> | |
| <span id="rentBtnText">Rent Account</span> | |
| </button> | |
| <a href="https://wa.me/6282185087005" target="_blank" class="px-6 py-3 bg-secondary text-white rounded-lg font-medium hover:bg-green-600 transition-all flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-1"> | |
| <i data-feather="message-circle" class="w-5 h-5 mr-2"></i> | |
| <span id="contactBtnText">Contact Admin</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Rent Form --> | |
| <div id="rentFormContainer" class="hidden bg-white rounded-xl shadow-2xl overflow-hidden p-6 mb-8 transition-all duration-300 ease-in-out"> | |
| <div class="flex items-center mb-6"> | |
| <i data-feather="edit" class="w-6 h-6 mr-2 text-primary"></i> | |
| <h2 class="text-2xl font-semibold text-gray-800" id="form-title">Rent a LinkedIn Account</h2> | |
| </div> | |
| <form id="rentForm" class="space-y-4"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1" id="label-email">Email</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all"> | |
| </div> | |
| <!-- Other form fields --> | |
| <button type="submit" class="w-full px-6 py-3 bg-primary text-white rounded-lg font-medium hover:bg-blue-700 transition-all flex items-center justify-center"> | |
| <i data-feather="send" class="w-5 h-5 mr-2"></i> | |
| <span id="submit-btn">Send Account</span> | |
| </button> | |
| </form> | |
| <div id="notification" class="hidden mt-4 p-4 rounded-md"></div> | |
| </div> | |
| <!-- Report Form --> | |
| <div id="reportFormContainer" class="hidden bg-white rounded-xl shadow-xl overflow-hidden p-6 animate-fade-in"> | |
| <!-- Similar structure to rent form --> | |
| </div> | |
| <!-- Footer --> | |
| <div class="text-center text-gray-500 text-sm mt-8"> | |
| <p id="footer-text">© 2024 Rent LinkedIn by Xanz. All rights reserved.</p> | |
| </div> | |
| </div> | |
| <script> | |
| // Enhanced Vanta.js background with better performance | |
| const vantaEffect = VANTA.NET({ | |
| el: "#vanta-bg", | |
| color: 0x2867b2, | |
| backgroundColor: 0xf8fafc, | |
| points: 16, | |
| maxDistance: 22, | |
| spacing: 12, | |
| showDots: false | |
| }); | |
| // Initialize Feather Icons with animation | |
| feather.replace(); | |
| document.querySelectorAll('[data-feather]').forEach(icon => { | |
| icon.classList.add('transition-transform', 'duration-300', 'hover:scale-110'); | |
| }); | |
| // Enhanced language toggle with animation | |
| const enText = { | |
| title: "LinkedLease Pro", | |
| announcementTitle: "OFFICIAL ANNOUNCEMENT", | |
| announcementDesc: "We are opening a LinkedIn account rental service specifically for product/service marketing needs in the United States & Europe.", | |
| // ... other translations ... | |
| langToggleText: "Switch to Bahasa" | |
| }; | |
| const idText = { | |
| title: "LinkedLease Pro", | |
| announcementTitle: "PENGUMUMAN RESMI", | |
| announcementDesc: "Kami membuka layanan sewa akun LinkedIn khusus untuk kebutuhan pemasaran produk/layanan di Amerika Serikat & Eropa.", | |
| // ... other translations ... | |
| langToggleText: "Ganti ke English" | |
| }; | |
| let currentLang = 'en'; | |
| function updateTexts(lang) { | |
| const texts = lang === 'en' ? enText : idText; | |
| anime({ | |
| targets: '[id^="announcement-"], [id^="schedule-"], [id^="term-"]', | |
| opacity: [0, 1], | |
| translateY: [10, 0], | |
| duration: 500, | |
| easing: 'easeOutQuad', | |
| delay: anime.stagger(100) | |
| }); | |
| // Update all text elements | |
| } | |
| // Form toggles and submissions | |
| document.getElementById('rentBtn').addEventListener('click', () => { | |
| const form = document.getElementById('rentFormContainer'); | |
| form.classList.remove('hidden'); | |
| anime({ | |
| targets: form, | |
| opacity: [0, 1], | |
| translateY: [20, 0], | |
| duration: 500, | |
| easing: 'easeOutExpo' | |
| }); | |
| form.scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| }); | |
| // Initialize with English | |
| updateTexts(currentLang); | |
| document.getElementById('langToggle').addEventListener('click', () => { | |
| currentLang = currentLang === 'en' ? 'id' : 'en'; | |
| updateTexts(currentLang); | |
| }); | |
| // Enhanced form submission with feedback | |
| document.getElementById('rentForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const notification = document.getElementById('notification'); | |
| notification.classList.remove('hidden', 'bg-red-100', 'text-red-700'); | |
| notification.classList.add('bg-green-100', 'text-green-700'); | |
| notification.innerHTML = ` | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> | |
| <span>Form submitted successfully! We'll contact you shortly.</span> | |
| </div> | |
| `; | |
| feather.replace(); | |
| this.reset(); | |
| anime({ | |
| targets: notification, | |
| opacity: [0, 1], | |
| translateY: [-10, 0], | |
| duration: 500 | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |