Alpaczka/nx-code-power-tools
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>NX-Code - Powerful Tools for Modern Workflows</title>7 <meta name="description" content="NX-Code delivers cutting-edge software solutions. Download PDF-Translator and VC-Creator for enhanced productivity.">8 <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">9 10 <!-- Tailwind CSS -->11 <script src="https://cdn.tailwindcss.com"></script>12 13 <!-- Feather Icons -->14 <script src="https://unpkg.com/feather-icons"></script>15 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>16 17 <!-- GSAP for animations -->18 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>19 20 <script>21 tailwind.config = {22 darkMode: 'class',23 theme: {24 extend: {25 colors: {26 primary: {27 50: '#f0f9ff',28 100: '#e0f2fe',29 200: '#bae6fd',30 300: '#7dd3fc',31 400: '#38bdf8',32 500: '#0ea5e9',33 600: '#0284c7',34 700: '#0369a1',35 800: '#075985',36 900: '#0c4a6e',37 },38 secondary: {39 50: '#eff6ff',40 100: '#dbeafe',41 200: '#bfdbfe',42 300: '#93c5fd',43 400: '#60a5fa',44 500: '#3b82f6',45 600: '#2563eb',46 700: '#1d4ed8',47 800: '#1e40af',48 900: '#1e3a8a',49 }50 },51 animation: {52 'float': 'float 6s ease-in-out infinite',53 'pulse-soft': 'pulse-soft 2s ease-in-out infinite',54 'shake': 'shake 0.5s ease-in-out',55 'bounce-soft': 'bounce-soft 2s ease-in-out infinite',56 'slide-in': 'slide-in 0.6s ease-out',57 'fade-in-up': 'fade-in-up 0.8s ease-out',58 'glow': 'glow 2s ease-in-out infinite alternate',59 'spin-slow': 'spin-slow 3s linear infinite',60 'wiggle': 'wiggle 1s ease-in-out infinite',61 'zoom-in': 'zoom-in 0.5s ease-out',62 },63 keyframes: {64 float: {65 '0%, 100%': { transform: 'translateY(0px)' },66 '50%': { transform: 'translateY(-20px)' },67 },68 'pulse-soft': {69 '0%, 100%': { opacity: 1 },70 '50%': { opacity: 0.7 },71 },72 shake: {73 '0%, 100%': { transform: 'translateX(0)' },74 '25%': { transform: 'translateX(-5px)' },75 '75%': { transform: 'translateX(5px)' },76 },77 'bounce-soft': {78 '0%, 100%': { transform: 'translateY(0)' },79 '50%': { transform: 'translateY(-10px)' },80 },81 'slide-in': {82 '0%': { transform: 'translateX(-100%)', opacity: 0 },83 '100%': { transform: 'translateX(0)', opacity: 1 },84 },85 'fade-in-up': {86 '0%': { transform: 'translateY(30px)', opacity: 0 },87 '100%': { transform: 'translateY(0)', opacity: 1 },88 },89 'glow': {90 '0%': { boxShadow: '0 0 5px rgba(59, 130, 246, 0.5)' },91 '100%': { boxShadow: '0 0 20px rgba(59, 130, 246, 0.8)' },92 },93 'spin-slow': {94 '0%': { transform: 'rotate(0deg)' },95 '100%': { transform: 'rotate(360deg)' },96 },97 'wiggle': {98 '0%, 100%': { transform: 'rotate(-3deg)' },99 '50%': { transform: 'rotate(3deg)' },100 },101 'zoom-in': {102 '0%': { transform: 'scale(0.9)', opacity: 0 },103 '100%': { transform: 'scale(1)', opacity: 1 },104 }105 }106 }107 }108 }109</script>110 <style>111 .glass {112 background: rgba(255, 255, 255, 0.1);113 backdrop-filter: blur(10px);114 border: 1px solid rgba(255, 255, 255, 0.2);115 }116 117 .glass-light {118 background: rgba(255, 255, 255, 0.8);119 backdrop-filter: blur(10px);120 border: 1px solid rgba(0, 0, 0, 0.1);121 }122 123 .progress-stripes {124 background-image: linear-gradient(125 45deg,126 rgba(255, 255, 255, 0.15) 25%,127 transparent 25%,128 transparent 50%,129 rgba(255, 255, 255, 0.15) 50%,130 rgba(255, 255, 255, 0.15) 75%,131 transparent 75%,132 transparent133 );134 background-size: 1rem 1rem;135 }136 137 .ripple {138 position: absolute;139 border-radius: 50%;140 background: rgba(255, 255, 255, 0.6);141 transform: scale(0);142 animation: ripple-animation 0.6s linear;143 }144 145 @keyframes ripple-animation {146 to {147 transform: scale(4);148 opacity: 0;149 }150 }151 152 .particle {153 position: absolute;154 pointer-events: none;155 animation: particle-float 4s ease-in-out infinite;156 }157 158 @keyframes particle-float {159 0%, 100% { transform: translateY(0) rotate(0deg); }160 50% { transform: translateY(-20px) rotate(180deg); }161 }162 163 .text-glow {164 text-shadow: 0 0 10px currentColor;165 }166 167 .card-hover {168 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);169 }170 171 .card-hover:hover {172 transform: translateY(-10px) scale(1.02);173 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);174 }175 176 .gradient-border {177 position: relative;178 background: linear-gradient(45deg, #0ea5e9, #3b82f6);179 padding: 2px;180 border-radius: 16px;181 }182 183 .gradient-border::before {184 content: '';185 position: absolute;186 inset: 0;187 border-radius: 16px;188 padding: 2px;189 background: linear-gradient(45deg, #0ea5e9, #3b82f6);190 z-index: -1;191 filter: blur(10px);192 opacity: 0.7;193 }194 195 /* Reduced motion support */196 @media (prefers-reduced-motion: reduce) {197 * {198 animation-duration: 0.01ms !important;199 animation-iteration-count: 1 !important;200 transition-duration: 0.01ms !important;201 }202 }203 204 /* Light mode specific styles */205 .light .glass {206 background: rgba(255, 255, 255, 0.7);207 border: 1px solid rgba(255, 255, 255, 0.8);208 }209 210 .light .gradient-border::before {211 opacity: 0.4;212 }213 </style>214</head>215<body class="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white transition-all duration-500 ease-in-out">216<!-- Background elements -->217 <div class="fixed inset-0 overflow-hidden pointer-events-none">218 <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-primary-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-float"></div>219 <div class="absolute top-1/3 right-1/4 w-64 h-64 bg-secondary-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-float" style="animation-delay: -2s;"></div>220 <div class="absolute bottom-1/4 left-1/2 w-64 h-64 bg-primary-400 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-float" style="animation-delay: -4s;"></div>221 222 <!-- Animated particles -->223 <div class="particle" style="top: 20%; left: 10%; animation-delay: 0s; width: 4px; height: 4px; background: #38bdf8;"></div>224 <div class="particle" style="top: 60%; left: 80%; animation-delay: -1s; width: 6px; height: 6px; background: #3b82f6;"></div>225 <div class="particle" style="top: 80%; left: 30%; animation-delay: -2s; width: 3px; height: 3px; background: #0ea5e9;"></div>226 <div class="particle" style="top: 40%; left: 90%; animation-delay: -3s; width: 5px; height: 5px; background: #60a5fa;"></div>227 <div class="particle" style="top: 10%; left: 70%; animation-delay: -0.5s; width: 4px; height: 4px; background: #0284c7;"></div>228</div>229 230 <!-- Header -->231 <header class="relative z-10 py-6 px-4 sm:px-6 lg:px-8">232 <div class="max-w-7xl mx-auto flex justify-between items-center">233 <div class="flex items-center space-x-2">234 <div class="w-8 h-8 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-lg flex items-center justify-center">235 <span class="text-white font-bold text-sm">NX</span>236 </div>237 <span class="text-xl font-bold bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent">NX-Code</span>238 </div>239 240 <button id="theme-toggle" class="p-2 rounded-lg glass hover:bg-white/20 transition-all duration-300" aria-label="Toggle theme">241 <i data-feather="moon" class="w-5 h-5"></i>242 </button>243 </div>244 </header>245 <!-- Hero Section -->246 <main class="relative z-10 py-12 px-4 sm:px-6 lg:px-8">247 <div class="max-w-4xl mx-auto">248 <!-- Hero Content -->249 <div class="text-center mb-16 animate-fade-in-up">250 <h1 class="text-4xl sm:text-6xl font-bold mb-6 bg-gradient-to-r from-primary-300 to-secondary-300 bg-clip-text text-transparent text-glow">251 NX-Code252 </h1>253 <p class="text-xl sm:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto animate-slide-in" style="animation-delay: 0.2s;">254 Advanced tools for modern digital workflows255 </p>256 <div class="w-24 h-1 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full mx-auto animate-zoom-in" style="animation-delay: 0.4s;"></div>257 </div>258 <!-- Download Cards -->259 <div class="grid md:grid-cols-2 gap-8 max-w-3xl mx-auto">260 <!-- PDF Translator Card -->261 <div class="glass rounded-2xl p-8 card-hover animate-fade-in-up" style="animation-delay: 0.6s;">262<div class="text-center mb-6">263 <div class="w-16 h-16 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-2xl flex items-center justify-center mx-auto mb-4 animate-bounce-soft">264 <i data-feather="file-text" class="w-8 h-8 text-white"></i>265 </div>266<h3 class="text-2xl font-bold mb-2">PDF-Translator</h3>267 <p class="text-gray-300 mb-6">268 Instantly translate PDF documents while preserving formatting and layout across 50+ languages.269 </p>270 </div>271 272 <div class="download-container" data-product="pdf-translator">273 <div class="gradient-border rounded-xl">274 <button class="download-btn w-full py-4 px-6 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-xl font-semibold text-white hover:from-primary-600 hover:to-secondary-600 transition-all duration-300 transform hover:scale-105 active:scale-95 relative overflow-hidden animate-glow">275 Download PDF-Translator276 </button>277 </div>278<div class="progress-container hidden mt-4">279 <div class="flex justify-between text-sm mb-2">280 <span>Downloading...</span>281 <span class="percentage">0%</span>282 </div>283 <div class="w-full bg-gray-700 rounded-full h-3 overflow-hidden">284 <div class="progress-bar h-full bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full progress-stripes transition-all duration-300" style="width: 0%"></div>285 </div>286 </div>287 288 <div class="success-container hidden mt-4 text-center">289 <div class="flex items-center justify-center space-x-2 text-green-400">290 <i data-feather="check-circle" class="w-5 h-5"></i>291 <span class="font-semibold">Download ready!</span>292 </div>293 </div>294 </div>295 </div>296 <!-- VC Creator Card -->297 <div class="glass rounded-2xl p-8 card-hover animate-fade-in-up" style="animation-delay: 0.8s;">298<div class="text-center mb-6">299 <div class="w-16 h-16 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-2xl flex items-center justify-center mx-auto mb-4 animate-bounce-soft" style="animation-delay: 0.2s;">300 <i data-feather="video" class="w-8 h-8 text-white"></i>301 </div>302<h3 class="text-2xl font-bold mb-2">VC-Creator</h3>303 <p class="text-gray-300 mb-6">304 Create professional video content with AI-powered editing and automated production workflows.305 </p>306 </div>307 308 <div class="download-container" data-product="vc-creator">309 <div class="gradient-border rounded-xl">310 <button class="download-btn w-full py-4 px-6 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-xl font-semibold text-white hover:from-primary-600 hover:to-secondary-600 transition-all duration-300 transform hover:scale-105 active:scale-95 relative overflow-hidden animate-glow" style="animation-delay: 0.3s;">311 Download VC-Creator312 </button>313 </div>314<div class="progress-container hidden mt-4">315 <div class="flex justify-between text-sm mb-2">316 <span>Downloading...</span>317 <span class="percentage">0%</span>318 </div>319 <div class="w-full bg-gray-700 rounded-full h-3 overflow-hidden">320 <div class="progress-bar h-full bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full progress-stripes transition-all duration-300" style="width: 0%"></div>321 </div>322 </div>323 324 <div class="success-container hidden mt-4 text-center">325 <div class="flex items-center justify-center space-x-2 text-green-400">326 <i data-feather="check-circle" class="w-5 h-5"></i>327 <span class="font-semibold">Download ready!</span>328 </div>329 </div>330 </div>331 </div>332 </div>333 </div>334 </main>335 <!-- Footer -->336 <footer class="relative z-10 py-8 px-4 sm:px-6 lg:px-8 mt-16">337 <div class="max-w-7xl mx-auto text-center">338 <p class="text-gray-400 animate-fade-in-up" style="animation-delay: 1s;">© 2024 NX-Code. All rights reserved.</p>339 </div>340 </footer>341 <!-- Access Code Modal -->342 <div id="access-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">343 <div class="glass rounded-2xl p-8 max-w-md w-full transform scale-95 opacity-0 transition-all duration-300">344<div class="text-center mb-6">345 <div class="w-12 h-12 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-2xl flex items-center justify-center mx-auto mb-4">346 <i data-feather="lock" class="w-6 h-6 text-white"></i>347 </div>348 <h3 class="text-2xl font-bold mb-2">Access Required</h3>349 <p class="text-gray-300">Please enter the access code to download</p>350 </div>351 352 <form id="access-form" class="space-y-4">353 <div>354 <input type="password" id="access-code" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-300" placeholder="Enter access code" aria-label="Access code" required>355 <div id="code-error" class="text-red-400 text-sm mt-2 hidden">356 <i data-feather="alert-circle" class="w-4 h-4 inline mr-1"></i>357 Incorrect access code. Please try again.358 </div>359 </div>360 361 <div class="flex space-x-4">362 <button type="button" id="cancel-access" class="flex-1 py-3 px-4 bg-gray-600 rounded-xl font-semibold hover:bg-gray-700 transition-all duration-300">363 Cancel364 </button>365 <button type="submit" class="flex-1 py-3 px-4 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-xl font-semibold text-white hover:from-primary-600 hover:to-secondary-600 transition-all duration-300">366 Verify367 </button>368 </div>369 </form>370 </div>371 </div>372 <script>373 // Initialize Feather Icons374 document.addEventListener('DOMContentLoaded', function() {375 feather.replace();376 // Theme Management377 const themeToggle = document.getElementById('theme-toggle');378 const themeIcon = themeToggle.querySelector('i');379 380 // Check for saved theme preference or respect OS preference381 const savedTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';382 383 function applyTheme(theme) {384 if (theme === 'light') {385 document.documentElement.classList.remove('dark');386 document.body.className = 'min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 text-gray-800 transition-all duration-500 ease-in-out';387 themeIcon.setAttribute('data-feather', 'sun');388 } else {389 document.documentElement.classList.add('dark');390 document.body.className = 'min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white transition-all duration-500 ease-in-out';391 themeIcon.setAttribute('data-feather', 'moon');392 }393 feather.replace();394 395 // Animate theme transition396 document.body.style.animation = 'none';397 setTimeout(() => {398 document.body.style.animation = 'fade-in-up 0.5s ease-out';399 }, 10);400 }401 402 applyTheme(savedTheme);403 404 themeToggle.addEventListener('click', function() {405 const newTheme = document.documentElement.classList.contains('dark') ? 'light' : 'dark';406 localStorage.setItem('theme', newTheme);407 applyTheme(newTheme);408 409 // Add particles on theme toggle410 createParticles(10);411 });412 413 // Particle system414 function createParticles(count) {415 const colors = ['#0ea5e9', '#3b82f6', '#38bdf8', '#60a5fa'];416 417 for (let i = 0; i < count; i++) {418 const particle = document.createElement('div');419 particle.className = 'particle';420 particle.style.left = Math.random() * 100 + '%';421 particle.style.top = Math.random() * 100 + '%';422 particle.style.background = colors[Math.floor(Math.random() * colors.length)];423 particle.style.width = Math.random() * 6 + 2 + 'px';424 particle.style.height = particle.style.width;425 particle.style.animationDelay = Math.random() * -4 + 's';426 427 document.querySelector('.fixed.inset-0').appendChild(particle);428 429 setTimeout(() => {430 particle.remove();431 }, 4000);432 }433 }434// Modal Elements435 const accessModal = document.getElementById('access-modal');436 const accessForm = document.getElementById('access-form');437 const accessCodeInput = document.getElementById('access-code');438 const codeError = document.getElementById('code-error');439 const cancelAccess = document.getElementById('cancel-access');440 441 let currentProduct = null;442 const CORRECT_CODE = '1122';443 444 // Ripple effect for buttons445 function createRipple(event) {446 const button = event.currentTarget;447 const circle = document.createElement('span');448 const diameter = Math.max(button.clientWidth, button.clientHeight);449 const radius = diameter / 2;450 451 circle.style.width = circle.style.height = `${diameter}px`;452 circle.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`;453 circle.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`;454 circle.classList.add('ripple');455 456 const ripple = button.getElementsByClassName('ripple')[0];457 if (ripple) {458 ripple.remove();459 }460 461 button.appendChild(circle);462 }463 // Add ripple effect to all download buttons464 document.querySelectorAll('.download-btn').forEach(button => {465 button.addEventListener('click', createRipple);466 467 // Add hover animations468 button.addEventListener('mouseenter', function() {469 this.style.transform = 'scale(1.05) rotate(1deg)';470 setTimeout(() => {471 this.style.transform = 'scale(1.05)';472 }, 100);473 });474 475 button.addEventListener('mouseleave', function() {476 this.style.transform = 'scale(1) rotate(0deg)';477 });478 }479 // Download button click handler480 document.querySelectorAll('.download-btn').forEach(button => {481 button.addEventListener('click', function() {482 currentProduct = this.closest('.download-container').dataset.product;483 showAccessModal();484 485 // Add wiggle animation on click486 this.classList.add('animate-wiggle');487 setTimeout(() => {488 this.classList.remove('animate-wiggle');489 }, 1000);490 });491 });492 // Show access modal493 function showAccessModal() {494 accessModal.classList.remove('hidden');495 accessCodeInput.value = '';496 codeError.classList.add('hidden');497 498 // Create particles around modal499 createModalParticles();500 501 // Animate modal entrance502 setTimeout(() => {503 const modalContent = accessModal.querySelector('.glass');504 modalContent.style.transform = 'scale(1)';505 modalContent.style.opacity = '1';506 507 // Add slide-in animation to form elements508 const formElements = modalContent.querySelectorAll('input, button');509 formElements.forEach((el, index) => {510 el.style.animation = 'none';511 setTimeout(() => {512 el.style.animation = 'slide-in 0.5s ease-out';513 el.style.animationDelay = (index * 0.1) + 's';514 }, 10);515 516 accessCodeInput.focus();517 }, 50);518 }519 520 function createModalParticles() {521 const modalRect = accessModal.getBoundingClientRect();522 for (let i = 0; i < 8; i++) {523 const particle = document.createElement('div');524 particle.className = 'particle';525 particle.style.left = Math.random() * modalRect.width + 'px';526 particle.style.top = Math.random() * modalRect.height + 'px';527 particle.style.background = i % 2 === 0 ? '#0ea5e9' : '#3b82f6';528 particle.style.width = Math.random() * 4 + 2 + 'px';529 particle.style.height = particle.style.width;530 particle.style.animationDuration = '2s';531 532 accessModal.appendChild(particle);533 534 setTimeout(() => {535 particle.remove();536 }, 2000);537 }538 }539// Hide access modal540 function hideAccessModal() {541 const modalContent = accessModal.querySelector('.glass');542 modalContent.style.transform = 'scale(0.95)';543 modalContent.style.opacity = '0';544 545 setTimeout(() => {546 accessModal.classList.add('hidden');547 }, 300);548 }549 550 // Cancel access551 cancelAccess.addEventListener('click', hideAccessModal);552 553 // Access form submission554 accessForm.addEventListener('submit', function(e) {555 e.preventDefault();556 557 if (accessCodeInput.value === CORRECT_CODE) {558 codeError.classList.add('hidden');559 hideAccessModal();560 startDownload(currentProduct);561 } else {562 codeError.classList.remove('hidden');563 accessCodeInput.classList.add('animate-shake');564 accessCodeInput.focus();565 566 setTimeout(() => {567 accessCodeInput.classList.remove('animate-shake');568 }, 500);569 }570 });571 // Start download process572 function startDownload(product) {573 const container = document.querySelector(`[data-product="${product}"]`);574 const downloadBtn = container.querySelector('.download-btn');575 const progressContainer = container.querySelector('.progress-container');576 const successContainer = container.querySelector('.success-container');577 const progressBar = container.querySelector('.progress-bar');578 const percentage = container.querySelector('.percentage');579 580 // Hide button, show progress581 downloadBtn.classList.add('hidden');582 progressContainer.classList.remove('hidden');583 584 // Animate progress bar entrance585 setTimeout(() => {586 progressContainer.style.animation = 'zoom-in 0.3s ease-out';587 588 // Add spin animation to progress bar589 progressBar.classList.add('animate-spin-slow');590 591 let progress = 0;592 const interval = setInterval(() => {593 progress += Math.random() * 8 + 2;594 if (progress > 100) progress = 100;595 596 progressBar.style.width = `${progress}%`;597 percentage.textContent = `${Math.floor(progress)}%';598 599 if (progress === 100) {600 clearInterval(interval);601 progressBar.classList.remove('animate-spin-slow');602 603 // Show success state with animation604 setTimeout(() => {605 progressContainer.classList.add('hidden');606 successContainer.classList.remove('hidden');607 successContainer.style.animation = 'fade-in-up 0.5s ease-out';608 609 // Trigger actual download after success animation610 setTimeout(() => {611 simulateDownload(product);612 // Create celebration particles613 createCelebrationParticles(container);614 615 // Reset to initial state616 setTimeout(() => {617 successContainer.classList.add('hidden');618 downloadBtn.classList.remove('hidden');619 feather.replace();620 }, 1500);621 }, 500);622 }623 }, 80);624 }, 100);625 626 function createCelebrationParticles(container) {627 const rect = container.getBoundingClientRect();628 for (let i = 0; i < 15; i++) {629 const particle = document.createElement('div');630 particle.className = 'particle';631 particle.style.left = (rect.left + Math.random() * rect.width) + 'px';632 particle.style.top = (rect.top + Math.random() * rect.height) + 'px';633 particle.style.background = Math.random() > 0.5 ? '#10b981' : '#0ea5e9';634 particle.style.width = Math.random() * 6 + 2 + 'px';635 particle.style.height = particle.style.width;636 particle.style.animationDuration = '1.5s';637 638 document.body.appendChild(particle);639 640 setTimeout(() => {641 particle.remove();642 }, 1500);643 }644 }645// Simulate file download646 function simulateDownload(product) {647 const filename = `${product}-setup.exe`;648 const blob = new Blob(['Simulated download content for ' + product], { type: 'application/octet-stream' });649 const url = window.URL.createObjectURL(blob);650 const a = document.createElement('a');651 a.style.display = 'none';652 a.href = url;653 a.download = filename;654 document.body.appendChild(a);655 a.click();656 window.URL.revokeObjectURL(url);657 document.body.removeChild(a);658 }659 660 // Close modal on ESC key661 document.addEventListener('keydown', function(e) {662 if (e.key === 'Escape' && !accessModal.classList.contains('hidden')) {663 hideAccessModal();664 }665 });666 667 // Trap focus in modal668 accessModal.addEventListener('keydown', function(e) {669 if (e.key === 'Tab') {670 e.preventDefault();671 accessCodeInput.focus();672 }673 });674 </script>675</body>676</html>677