| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Digital Clone Generator</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> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); |
| |
| body { |
| font-family: 'Orbitron', sans-serif; |
| background-color: #0f0f17; |
| overflow: hidden; |
| } |
| |
| .glow { |
| text-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa; |
| } |
| |
| .scanline { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(to bottom, |
| rgba(0, 255, 170, 0.03) 0%, |
| rgba(0, 255, 170, 0.1) 50%, |
| rgba(0, 255, 170, 0.03) 100%); |
| background-size: 100% 8px; |
| pointer-events: none; |
| animation: scan 4s linear infinite; |
| } |
| |
| @keyframes scan { |
| 0% { transform: translateY(-100%); } |
| 100% { transform: translateY(100%); } |
| } |
| |
| .terminal { |
| border: 1px solid #00ffaa; |
| box-shadow: 0 0 20px rgba(0, 255, 170, 0.5); |
| } |
| |
| .blink { |
| animation: blink 1s step-end infinite; |
| } |
| |
| @keyframes blink { |
| from, to { opacity: 1; } |
| 50% { opacity: 0; } |
| } |
| |
| .pixel-grid { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-image: |
| linear-gradient(rgba(0, 255, 170, 0.1) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(0, 255, 170, 0.1) 1px, transparent 1px); |
| background-size: 20px 20px; |
| pointer-events: none; |
| } |
| |
| .progress-bar { |
| transition: width 0.3s ease-out; |
| } |
| |
| .status-message { |
| height: 1.5rem; |
| overflow: hidden; |
| } |
| |
| .file-input-container { |
| position: relative; |
| overflow: hidden; |
| display: inline-block; |
| } |
| |
| .file-input { |
| position: absolute; |
| left: 0; |
| top: 0; |
| opacity: 0; |
| width: 100%; |
| height: 100%; |
| cursor: pointer; |
| } |
| |
| .file-preview { |
| width: 100px; |
| height: 100px; |
| background-color: rgba(0, 255, 170, 0.1); |
| border: 1px dashed #00ffaa; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .file-preview img { |
| max-width: 100%; |
| max-height: 100%; |
| object-fit: contain; |
| } |
| |
| .file-label { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background-color: rgba(0, 0, 0, 0.7); |
| color: #00ffaa; |
| text-align: center; |
| padding: 4px; |
| font-size: 12px; |
| } |
| |
| .screen { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: opacity 0.5s ease; |
| } |
| |
| .hidden { |
| opacity: 0; |
| pointer-events: none; |
| } |
| </style> |
| </head> |
| <body class="flex items-center justify-center min-h-screen text-green-400"> |
| <div class="pixel-grid"></div> |
| <div class="scanline"></div> |
| |
| |
| <div class="screen" id="upload-screen"> |
| <div class="terminal relative bg-black bg-opacity-90 p-8 rounded-lg max-w-2xl w-full"> |
| <div class="flex items-center mb-6"> |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| <div class="ml-4 text-sm opacity-70">DIGITAL_CLONE_UPLOAD.exe</div> |
| </div> |
| |
| <div class="text-2xl md:text-3xl font-bold glow mb-8 text-center"> |
| UPLOAD REFERENCE FILES |
| </div> |
| |
| <div class="flex justify-between mb-8"> |
| <div class="file-input-container"> |
| <div class="file-preview"> |
| <img src="" alt="Front view" id="front-preview" class="hidden"> |
| <div class="file-label">FRONT VIEW</div> |
| <i class="fas fa-user text-3xl opacity-30" id="front-icon"></i> |
| </div> |
| <input type="file" id="front-input" class="file-input" accept="image/*"> |
| </div> |
| |
| <div class="file-input-container"> |
| <div class="file-preview"> |
| <img src="" alt="Side view" id="side-preview" class="hidden"> |
| <div class="file-label">SIDE VIEW</div> |
| <i class="fas fa-user text-3xl opacity-30" id="side-icon"></i> |
| </div> |
| <input type="file" id="side-input" class="file-input" accept="image/*"> |
| </div> |
| |
| <div class="file-input-container"> |
| <div class="file-preview"> |
| <img src="" alt="Back view" id="back-preview" class="hidden"> |
| <div class="file-label">BACK VIEW</div> |
| <i class="fas fa-user text-3xl opacity-30" id="back-icon"></i> |
| </div> |
| <input type="file" id="back-input" class="file-input" accept="image/*"> |
| </div> |
| </div> |
| |
| <div class="text-center"> |
| <button id="create-button" class="px-6 py-2 bg-green-600 hover:bg-green-500 text-black font-bold rounded-sm glow transition-all duration-300"> |
| <i class="fas fa-cogs mr-2"></i> CREATE CLONE |
| </button> |
| </div> |
| |
| <div class="absolute bottom-4 right-4 text-xs opacity-50 flex items-center"> |
| <i class="fas fa-shield-alt mr-1"></i> |
| <span>ENCRYPTED CONNECTION</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="screen hidden" id="progress-screen"> |
| <div class="terminal relative bg-black bg-opacity-90 p-8 rounded-lg max-w-2xl w-full"> |
| <div class="flex items-center mb-6"> |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| <div class="ml-4 text-sm opacity-70">DIGITAL_CLONE_GENERATOR.exe</div> |
| </div> |
| |
| <div class="mb-4 status-message"> |
| <div class="text-sm opacity-70 mb-2 transition-all duration-300" id="status-line-1">> Initializing neural matrix...</div> |
| <div class="text-sm opacity-70 mb-2 transition-all duration-300" id="status-line-2">> Connecting to quantum database...</div> |
| <div class="text-sm opacity-70 transition-all duration-300" id="status-line-3">> Loading personality modules...</div> |
| </div> |
| |
| <div class="text-2xl md:text-3xl font-bold glow mb-6 h-12 flex items-center" id="loading-text"></div> |
| |
| <div class="flex items-center mb-2"> |
| <div class="w-full bg-gray-800 rounded-full h-2.5 mr-4"> |
| <div class="bg-green-500 h-2.5 rounded-full progress-bar" id="progress-bar" style="width: 0%"></div> |
| </div> |
| <div class="text-sm" id="progress-text">0%</div> |
| </div> |
| |
| <div class="text-xs opacity-70 mb-4" id="current-task">Preparing system resources...</div> |
| |
| <div class="absolute bottom-4 right-4 text-xs opacity-50 flex items-center"> |
| <i class="fas fa-shield-alt mr-1"></i> |
| <span>ENCRYPTED CONNECTION</span> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('front-input').addEventListener('change', function(e) { |
| const file = e.target.files[0]; |
| if (file) { |
| const reader = new FileReader(); |
| reader.onload = function(event) { |
| document.getElementById('front-preview').src = event.target.result; |
| document.getElementById('front-preview').classList.remove('hidden'); |
| document.getElementById('front-icon').classList.add('hidden'); |
| } |
| reader.readAsDataURL(file); |
| } |
| }); |
| |
| document.getElementById('side-input').addEventListener('change', function(e) { |
| const file = e.target.files[0]; |
| if (file) { |
| const reader = new FileReader(); |
| reader.onload = function(event) { |
| document.getElementById('side-preview').src = event.target.result; |
| document.getElementById('side-preview').classList.remove('hidden'); |
| document.getElementById('side-icon').classList.add('hidden'); |
| } |
| reader.readAsDataURL(file); |
| } |
| }); |
| |
| document.getElementById('back-input').addEventListener('change', function(e) { |
| const file = e.target.files[0]; |
| if (file) { |
| const reader = new FileReader(); |
| reader.onload = function(event) { |
| document.getElementById('back-preview').src = event.target.result; |
| document.getElementById('back-preview').classList.remove('hidden'); |
| document.getElementById('back-icon').classList.add('hidden'); |
| } |
| reader.readAsDataURL(file); |
| } |
| }); |
| |
| |
| window.addEventListener('DOMContentLoaded', function() { |
| |
| setTimeout(() => { |
| document.getElementById('front-preview').src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI1MCIgY3k9IjQwIiByPSIxNSIgZmlsbD0iIzAwZmZhYSIvPjxwYXRoIGQ9Ik0zMCA3MEg3MEw2NSA1NUgzNSIgc3Ryb2tlPSIjMDBmZmFhIiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9Im5vbmUiLz48L3N2Zz4='; |
| document.getElementById('front-preview').classList.remove('hidden'); |
| document.getElementById('front-icon').classList.add('hidden'); |
| |
| document.getElementById('side-preview').src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI3MCIgY3k9IjQwIiByPSIxNSIgZmlsbD0iIzAwZmZhYSIvPjxwYXRoIGQ9Ik03MCA3MEw2NSA1NSIgc3Ryb2tlPSIjMDBmZmFhIiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9Im5vbmUiLz48L3N2Zz4='; |
| document.getElementById('side-preview').classList.remove('hidden'); |
| document.getElementById('side-icon').classList.add('hidden'); |
| |
| document.getElementById('back-preview').src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNMzAgNzBINzBMNjAgNTBINDAiIHN0cm9rZT0iIzAwZmZhYSIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJub25lIi8+PC9zdmc+'; |
| document.getElementById('back-preview').classList.remove('hidden'); |
| document.getElementById('back-icon').classList.add('hidden'); |
| }, 500); |
| }); |
| |
| |
| document.getElementById('create-button').addEventListener('click', function() { |
| |
| this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> PROCESSING...'; |
| this.classList.add('opacity-75'); |
| this.disabled = true; |
| |
| |
| setTimeout(() => { |
| document.getElementById('upload-screen').classList.add('hidden'); |
| document.getElementById('progress-screen').classList.remove('hidden'); |
| |
| |
| startProgressBar(); |
| }, 1500); |
| }); |
| |
| |
| const text = "GENERATING YOUR DIGITAL CLONE..."; |
| const loadingElement = document.getElementById('loading-text'); |
| let index = 0; |
| let isDeleting = false; |
| let timeout; |
| |
| function typeText() { |
| if (index <= text.length && !isDeleting) { |
| loadingElement.textContent = text.substring(0, index); |
| index++; |
| timeout = setTimeout(typeText, 100 + Math.random() * 50); |
| } else if (index > 0 && isDeleting) { |
| loadingElement.textContent = text.substring(0, index); |
| index--; |
| timeout = setTimeout(typeText, 30); |
| } else { |
| isDeleting = !isDeleting; |
| if (!isDeleting) index = 0; |
| timeout = setTimeout(typeText, isDeleting ? 1000 : 300); |
| } |
| } |
| |
| |
| function addGlitchEffect() { |
| setInterval(() => { |
| if (Math.random() > 0.9) { |
| loadingElement.classList.add('text-red-400'); |
| loadingElement.style.transform = 'translateX(' + (Math.random() * 10 - 5) + 'px)'; |
| setTimeout(() => { |
| loadingElement.classList.remove('text-red-400'); |
| loadingElement.style.transform = ''; |
| }, 100); |
| } |
| }, 1000); |
| } |
| |
| |
| function startProgressBar() { |
| const progressBar = document.getElementById('progress-bar'); |
| const progressText = document.getElementById('progress-text'); |
| const currentTask = document.getElementById('current-task'); |
| const statusLine1 = document.getElementById('status-line-1'); |
| const statusLine2 = document.getElementById('status-line-2'); |
| const statusLine3 = document.getElementById('status-line-3'); |
| |
| const tasks = [ |
| "Preparing system resources...", |
| "Analyzing biometric data...", |
| "Mapping neural pathways...", |
| "Synthesizing voice patterns...", |
| "Building personality matrix...", |
| "Optimizing response algorithms...", |
| "Finalizing digital clone...", |
| "Verifying integrity checks...", |
| "Preparing for deployment..." |
| ]; |
| |
| const statusMessages = [ |
| "> Neural synchronization complete", |
| "> Quantum connection established", |
| "> Personality modules loaded", |
| "> Memory banks initialized", |
| "> Emotional subroutines active", |
| "> Language processors online", |
| "> Behavioral patterns analyzed", |
| "> Consciousness transfer ready", |
| "> Digital clone operational" |
| ]; |
| |
| let progress = 0; |
| let taskIndex = 0; |
| let statusIndex = 0; |
| |
| |
| typeText(); |
| addGlitchEffect(); |
| |
| function updateProgress() { |
| progress += Math.random() * 5; |
| if (progress > 100) progress = 100; |
| |
| progressBar.style.width = progress + '%'; |
| progressText.textContent = Math.floor(progress) + '%'; |
| |
| |
| if (progress % 10 < 1 && progress < 100) { |
| taskIndex = (taskIndex + 1) % tasks.length; |
| currentTask.textContent = tasks[taskIndex]; |
| |
| |
| if (statusIndex < statusMessages.length) { |
| statusLine1.textContent = statusLine2.textContent; |
| statusLine2.textContent = statusLine3.textContent; |
| statusLine3.textContent = statusMessages[statusIndex]; |
| statusIndex++; |
| } |
| } |
| |
| if (progress >= 100) { |
| setTimeout(() => { |
| |
| progress = 0; |
| taskIndex = 0; |
| statusIndex = 0; |
| progressBar.style.width = '0%'; |
| progressText.textContent = '0%'; |
| currentTask.textContent = tasks[0]; |
| statusLine1.textContent = "> Initializing neural matrix..."; |
| statusLine2.textContent = "> Connecting to quantum database..."; |
| statusLine3.textContent = "> Loading personality modules..."; |
| |
| |
| setTimeout(updateProgress, 1000); |
| }, 1500); |
| } else { |
| |
| setTimeout(updateProgress, 100 + Math.random() * 200); |
| } |
| } |
| |
| |
| setTimeout(updateProgress, 500); |
| } |
| </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=Onekee/dqc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
