|
|
<!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> |
