Hugging Face's logo

Spaces:
crazychon
/
me-ia-quantum-time-capsule
Running

App Files Community
me-ia-quantum-time-capsule / index.html
crazychon's picture
crazychon
class LegacySystem: def __init__(self): self.time_capsules = {} # {'bebé': [Evento1, Evento2]} self.encryption = "SHA-384" # Cifrado cuántico-resistente def create_time_capsule(self, event_type, media_data, unlock_conditions): """Guarda recuerdos con condiciones de desbloqueo futuristas""" capsule = { 'data': self._encrypt(media_data), 'unlock_date': unlock_conditions['date'], # ej: "2040-01-01" 'unlock_mode': unlock_conditions['mode'], # "holograma", "VR", "2D" 'signature': self._get_biometric_signature() # Huella del bebé + vocal tuya } self.time_capsules.setdefault(event_type, []).append(capsule) self._store_in_blockchain(capsule) # TX inmutable en Ethereum/IPFS def _unlock_legacy(self, recipient_age, biometric_match): """Ejemplo al cumplir 18 años""" if recipient_age >= 18 and biometric_match: return self._decrypt(capsule['data'], transform_to=capsule['unlock_mode']) else: return "🔒 Acceso denegado. El tiempo lo decide todo." - Initial Deployment
a669170 verified
raw
history blame contribute delete
25.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quantum Time Capsule</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>
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.floating {
animation: float 6s ease-in-out infinite;
}
.holographic {
background: linear-gradient(135deg, rgba(0,255,255,0.1) 0%, rgba(138,43,226,0.1) 50%, rgba(255,0,255,0.1) 100%);
box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.holographic:hover {
box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
}
.quantum-border {
border: 2px solid transparent;
background: linear-gradient(black, black) padding-box,
linear-gradient(135deg, #00FFFF, #8A2BE2, #FF00FF) border-box;
}
.glow-text {
text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}
</style>
</head>
<body class="bg-black text-white min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="flex flex-col items-center mb-12">
<div class="floating mb-6">
<i class="fas fa-capsules text-6xl text-purple-500"></i>
<i class="fas fa-lock-open text-3xl text-cyan-400 relative -left-6 -top-4"></i>
</div>
<h1 class="text-4xl md:text-5xl font-bold text-center mb-4 glow-text">
Quantum Time Capsule
</h1>
<p class="text-lg text-gray-300 text-center max-w-2xl">
Preserve precious moments with quantum-resistant encryption and blockchain technology.
Unlock memories when the time is right.
</p>
</header>
<!-- Main Content -->
<main>
<!-- Create Capsule Section -->
<section class="holographic rounded-xl p-6 mb-12 transition-all duration-500">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-plus-circle text-purple-500 mr-3"></i>
Create New Time Capsule
</h2>
<form id="capsuleForm" class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="eventType" class="block mb-2 text-gray-300">Event Type</label>
<select id="eventType" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option value="birth">Birth</option>
<option value="firstSteps">First Steps</option>
<option value="birthday">Birthday</option>
<option value="graduation">Graduation</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="mediaType" class="block mb-2 text-gray-300">Media Type</label>
<select id="mediaType" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option value="photo">Photo</option>
<option value="video">Video</option>
<option value="audio">Audio</option>
<option value="hologram">Hologram</option>
<option value="vr">VR Experience</option>
</select>
</div>
</div>
<div>
<label for="mediaData" class="block mb-2 text-gray-300">Upload Media</label>
<div class="flex items-center justify-center w-full">
<label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-700 border-dashed rounded-lg cursor-pointer bg-gray-800 hover:bg-gray-700 transition-colors">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i class="fas fa-cloud-upload-alt text-2xl text-purple-500 mb-2"></i>
<p class="mb-2 text-sm text-gray-400">Click to upload or drag and drop</p>
<p class="text-xs text-gray-500">PNG, JPG, MP4, or 3D formats</p>
</div>
<input id="dropzone-file" type="file" class="hidden" />
</label>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="unlockDate" class="block mb-2 text-gray-300">Unlock Date</label>
<input type="date" id="unlockDate" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="unlockMode" class="block mb-2 text-gray-300">Unlock Mode</label>
<select id="unlockMode" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option value="hologram">Hologram</option>
<option value="vr">Virtual Reality</option>
<option value="2d">2D Display</option>
<option value="ar">Augmented Reality</option>
</select>
</div>
</div>
<div>
<label class="block mb-2 text-gray-300">Biometric Signature</label>
<div class="flex items-center space-x-4">
<button type="button" id="fingerprintBtn" class="flex items-center justify-center bg-gray-800 hover:bg-gray-700 text-purple-400 px-4 py-3 rounded-lg transition-colors">
<i class="fas fa-fingerprint mr-2"></i>
Add Fingerprint
</button>
<button type="button" id="voiceBtn" class="flex items-center justify-center bg-gray-800 hover:bg-gray-700 text-cyan-400 px-4 py-3 rounded-lg transition-colors">
<i class="fas fa-microphone mr-2"></i>
Record Voice
</button>
</div>
<div id="biometricStatus" class="mt-2 text-sm text-gray-400 hidden">
<i class="fas fa-check-circle text-green-500 mr-1"></i>
<span>Biometric signature captured</span>
</div>
</div>
<div class="pt-4">
<button type="submit" class="w-full bg-gradient-to-r from-purple-600 to-cyan-500 hover:from-purple-700 hover:to-cyan-600 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center">
<i class="fas fa-lock mr-2"></i>
Encrypt & Store in Blockchain
</button>
</div>
</form>
</section>
<!-- My Capsules Section -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-capsules text-cyan-400 mr-3"></i>
My Time Capsules
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Capsule Card 1 -->
<div class="quantum-border rounded-xl p-5 hover:shadow-lg transition-all duration-300">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-lg">First Birthday</h3>
<p class="text-gray-400 text-sm">Created: 2023-06-15</p>
</div>
<span class="bg-purple-900 text-purple-300 text-xs px-2 py-1 rounded-full">Photo</span>
</div>
<div class="bg-gray-800 rounded-lg h-40 mb-4 flex items-center justify-center">
<i class="fas fa-lock text-4xl text-gray-600"></i>
</div>
<div class="flex justify-between items-center text-sm">
<div>
<p class="text-gray-400">Unlocks in:</p>
<p class="font-medium">2040-01-01</p>
</div>
<div>
<p class="text-gray-400">Mode:</p>
<p class="font-medium">Hologram</p>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-800 flex justify-between">
<span class="text-xs text-gray-500">
<i class="fas fa-fingerprint mr-1"></i>
Biometric Lock
</span>
<span class="text-xs text-green-500">
<i class="fas fa-link mr-1"></i>
Blockchain Verified
</span>
</div>
</div>
<!-- Capsule Card 2 -->
<div class="quantum-border rounded-xl p-5 hover:shadow-lg transition-all duration-300">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-lg">First Steps</h3>
<p class="text-gray-400 text-sm">Created: 2023-09-22</p>
</div>
<span class="bg-cyan-900 text-cyan-300 text-xs px-2 py-1 rounded-full">Video</span>
</div>
<div class="bg-gray-800 rounded-lg h-40 mb-4 flex items-center justify-center">
<i class="fas fa-lock text-4xl text-gray-600"></i>
</div>
<div class="flex justify-between items-center text-sm">
<div>
<p class="text-gray-400">Unlocks in:</p>
<p class="font-medium">2041-05-15</p>
</div>
<div>
<p class="text-gray-400">Mode:</p>
<p class="font-medium">VR</p>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-800 flex justify-between">
<span class="text-xs text-gray-500">
<i class="fas fa-fingerprint mr-1"></i>
<i class="fas fa-microphone mr-1"></i>
Biometric Lock
</span>
<span class="text-xs text-green-500">
<i class="fas fa-link mr-1"></i>
Blockchain Verified
</span>
</div>
</div>
<!-- Capsule Card 3 (Locked) -->
<div class="quantum-border rounded-xl p-5 hover:shadow-lg transition-all duration-300 opacity-70">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-lg">High School Graduation</h3>
<p class="text-gray-400 text-sm">Created: 2038-06-10</p>
</div>
<span class="bg-pink-900 text-pink-300 text-xs px-2 py-1 rounded-full">Hologram</span>
</div>
<div class="bg-gray-800 rounded-lg h-40 mb-4 flex items-center justify-center">
<i class="fas fa-lock text-4xl text-gray-600"></i>
</div>
<div class="flex justify-between items-center text-sm">
<div>
<p class="text-gray-400">Unlocks in:</p>
<p class="font-medium">2042-06-10</p>
</div>
<div>
<p class="text-gray-400">Mode:</p>
<p class="font-medium">Hologram</p>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-800 flex justify-between">
<span class="text-xs text-gray-500">
<i class="fas fa-fingerprint mr-1"></i>
Biometric Lock
</span>
<span class="text-xs text-green-500">
<i class="fas fa-link mr-1"></i>
Blockchain Verified
</span>
</div>
</div>
</div>
</section>
<!-- Unlock Section -->
<section class="holographic rounded-xl p-6 mb-12">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-unlock-alt text-cyan-400 mr-3"></i>
Unlock Time Capsule
</h2>
<div class="space-y-6">
<div>
<label for="capsuleToUnlock" class="block mb-2 text-gray-300">Select Capsule</label>
<select id="capsuleToUnlock" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option value="">-- Select a time capsule --</option>
<option value="birthday">First Birthday (2040-01-01)</option>
<option value="steps">First Steps (2041-05-15)</option>
<option value="graduation">High School Graduation (2042-06-10)</option>
</select>
</div>
<div>
<label class="block mb-2 text-gray-300">Biometric Verification</label>
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
<button type="button" id="verifyFingerprint" class="flex-1 flex items-center justify-center bg-gray-800 hover:bg-gray-700 text-purple-400 px-4 py-3 rounded-lg transition-colors">
<i class="fas fa-fingerprint mr-2"></i>
Verify Fingerprint
</button>
<button type="button" id="verifyVoice" class="flex-1 flex items-center justify-center bg-gray-800 hover:bg-gray-700 text-cyan-400 px-4 py-3 rounded-lg transition-colors">
<i class="fas fa-microphone mr-2"></i>
Verify Voice
</button>
</div>
<div id="verificationStatus" class="mt-4 p-4 rounded-lg hidden">
<div class="flex items-center">
<i class="fas fa-check-circle text-2xl mr-3 text-green-500"></i>
<div>
<h4 class="font-bold">Verification Successful</h4>
<p class="text-sm text-gray-300">Biometric signature matches the capsule requirements</p>
</div>
</div>
</div>
</div>
<div id="unlockResult" class="hidden">
<div class="bg-gray-900 rounded-xl p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">First Birthday Memory</h3>
<span class="text-sm text-purple-400">Unlocked: 2040-01-01</span>
</div>
<div class="bg-black rounded-lg overflow-hidden mb-4">
<img src="https://source.unsplash.com/random/600x400/?birthday" alt="Unlocked memory" class="w-full h-auto">
</div>
<div class="flex items-center justify-between text-sm">
<div class="flex items-center">
<i class="fas fa-calendar-alt text-gray-400 mr-2"></i>
<span>Original Date: 2023-06-15</span>
</div>
<div class="flex items-center">
<i class="fas fa-qrcode text-gray-400 mr-2"></i>
<span>TX: 0x8a2...be2</span>
</div>
</div>
<div class="mt-6 pt-4 border-t border-gray-800">
<h4 class="font-bold mb-2">Message from the Past:</h4>
<p class="text-gray-300 italic">
"Dear future you, this was your first birthday party. Look how tiny you were!
We were so happy to celebrate this special day with all our family.
Never forget how much you're loved."
</p>
</div>
</div>
</div>
<div class="pt-4">
<button id="unlockBtn" class="w-full bg-gradient-to-r from-cyan-600 to-purple-500 hover:from-cyan-700 hover:to-purple-600 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center opacity-50 cursor-not-allowed" disabled>
<i class="fas fa-unlock-alt mr-2"></i>
Unlock Memory
</button>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-gray-800 pt-8 mt-12">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h3 class="text-lg font-bold flex items-center">
<i class="fas fa-infinity text-purple-500 mr-2"></i>
Quantum Time Capsule
</h3>
<p class="text-sm text-gray-400">Preserving memories across the quantum continuum</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">
<i class="fab fa-ethereum text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors">
<i class="fas fa-link text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-pink-400 transition-colors">
<i class="fas fa-shield-alt text-xl"></i>
</a>
</div>
</div>
<div class="mt-8 text-center text-sm text-gray-500">
<p>© 2023 Quantum Time Capsule. All memories secured with SHA-384 quantum-resistant encryption.</p>
</div>
</footer>
</div>
<script>
// Form submission
document.getElementById('capsuleForm').addEventListener('submit', function(e) {
e.preventDefault();
// Show success message
const successMsg = document.createElement('div');
successMsg.className = 'fixed inset-0 flex items-center justify-center bg-black bg-opacity-80 z-50';
successMsg.innerHTML = `
<div class="bg-gray-900 rounded-xl p-8 max-w-md text-center">
<div class="text-6xl text-green-500 mb-4">
<i class="fas fa-check-circle"></i>
</div>
<h3 class="text-2xl font-bold mb-2">Time Capsule Created!</h3>
<p class="text-gray-300 mb-6">Your memory has been encrypted with SHA-384 and stored immutably on the blockchain.</p>
<button onclick="this.parentElement.parentElement.remove()" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg transition-colors">
Continue
</button>
</div>
`;
document.body.appendChild(successMsg);
// Reset form
this.reset();
document.getElementById('biometricStatus').classList.add('hidden');
});
// Biometric buttons
document.getElementById('fingerprintBtn').addEventListener('click', function() {
document.getElementById('biometricStatus').classList.remove('hidden');
});
document.getElementById('voiceBtn').addEventListener('click', function() {
document.getElementById('biometricStatus').classList.remove('hidden');
});
// Verification buttons
document.getElementById('verifyFingerprint').addEventListener('click', function() {
const status = document.getElementById('verificationStatus');
status.classList.remove('hidden');
status.classList.add('bg-gray-800');
// Enable unlock button if both verifications are done
document.getElementById('unlockBtn').classList.remove('opacity-50', 'cursor-not-allowed');
document.getElementById('unlockBtn').disabled = false;
});
document.getElementById('verifyVoice').addEventListener('click', function() {
const status = document.getElementById('verificationStatus');
status.classList.remove('hidden');
status.classList.add('bg-gray-800');
// Enable unlock button if both verifications are done
document.getElementById('unlockBtn').classList.remove('opacity-50', 'cursor-not-allowed');
document.getElementById('unlockBtn').disabled = false;
});
// Unlock button
document.getElementById('unlockBtn').addEventListener('click', function() {
document.getElementById('unlockResult').classList.remove('hidden');
// Scroll to the result
document.getElementById('unlockResult').scrollIntoView({ behavior: 'smooth' });
});
</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=crazychon/me-ia-quantum-time-capsule" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>