Hugging Face's logo

Spaces:
frvnx
/
ccdd
Running

App Files Community
ccdd / index.html
frvnx's picture
frvnx
Add 3 files
2349cf5 verified
Raw History Blame Contribute Delete
22.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Chronicles of Aetheria</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&family=Space+Mono:wght@400;700&display=swap');
body {
font-family: 'Space Mono', monospace;
background-color: #0a0a1a;
color: #e0e0ff;
overflow-x: hidden;
}
.title-font {
font-family: 'Orbitron', sans-serif;
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
animation: twinkle var(--duration) infinite ease-in-out;
}
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
.planet-card {
transition: all 0.3s ease;
background: linear-gradient(145deg, #1a1a2e, #16213e);
}
.planet-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 191, 255, 0.3);
}
.console-text {
border-right: 2px solid #4fd1c5;
animation: blink 0.75s step-end infinite;
}
@keyframes blink {
from, to { border-color: transparent; }
50% { border-color: #4fd1c5; }
}
.nebula-bg {
background: radial-gradient(circle at 30% 50%, rgba(58, 12, 163, 0.4) 0%, rgba(0, 0, 0, 0) 50%),
radial-gradient(circle at 70% 30%, rgba(220, 38, 38, 0.3) 0%, rgba(0, 0, 0, 0) 50%);
}
</style>
</head>
<body class="min-h-screen nebula-bg">
<!-- Star background -->
<div id="stars-container" class="fixed inset-0 overflow-hidden -z-10"></div>
<!-- Main container -->
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="flex flex-col items-center mb-12">
<div class="flex items-center space-x-4 mb-6">
<i class="fas fa-rocket text-4xl text-cyan-400"></i>
<h1 class="title-font text-5xl md:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500">
Space Chronicles
</h1>
<i class="fas fa-meteor text-4xl text-purple-500"></i>
</div>
<h2 class="title-font text-2xl md:text-3xl text-cyan-300 mb-4">of Aetheria</h2>
<p class="max-w-2xl text-center text-gray-300">
Explore the uncharted reaches of the Xol galaxy. Document your journey through the Aetherian expanse.
</p>
</header>
<!-- Main content -->
<main>
<!-- Chronicle selector -->
<section class="mb-16">
<div class="flex justify-between items-center mb-6">
<h3 class="title-font text-2xl text-cyan-300 flex items-center">
<i class="fas fa-book-open mr-3"></i> Your Chronicles
</h3>
<button id="new-chronicle-btn" class="flex items-center px-4 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg transition">
<i class="fas fa-plus mr-2"></i> New Entry
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Chronicle cards -->
<div class="planet-card rounded-xl p-6 shadow-lg border border-gray-800 cursor-pointer hover:border-cyan-500">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-600 to-blue-500 flex items-center justify-center mr-4">
<i class="fas fa-journal-whills text-xl"></i>
</div>
<div>
<h4 class="title-font text-lg">First Contact</h4>
<p class="text-sm text-gray-400">Stardate: 3247.5</p>
</div>
</div>
<p class="text-gray-300 mb-4">
Initial encounter with the crystalline entities of Xol-7. Their bioluminescent communication patterns...
</p>
<div class="flex justify-between text-sm">
<span class="text-cyan-400"><i class="fas fa-clock mr-1"></i> 3 cycles ago</span>
<button class="text-purple-400 hover:text-purple-300">
<i class="fas fa-external-link-alt mr-1"></i> Continue
</button>
</div>
</div>
<div class="planet-card rounded-xl p-6 shadow-lg border border-gray-800 cursor-pointer hover:border-cyan-500">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-yellow-600 to-red-500 flex items-center justify-center mr-4">
<i class="fas fa-radiation text-xl"></i>
</div>
<div>
<h4 class="title-font text-lg">Nebula Anomaly</h4>
<p class="text-sm text-gray-400">Stardate: 3281.2</p>
</div>
</div>
<p class="text-gray-300 mb-4">
The quantum fluctuations within the Aetherian Nebula defy all known physics. Energy readings...
</p>
<div class="flex justify-between text-sm">
<span class="text-cyan-400"><i class="fas fa-clock mr-1"></i> 7 cycles ago</span>
<button class="text-purple-400 hover:text-purple-300">
<i class="fas fa-external-link-alt mr-1"></i> Continue
</button>
</div>
</div>
<div class="planet-card rounded-xl p-6 shadow-lg border border-gray-800 cursor-pointer hover:border-cyan-500">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-green-600 to-teal-500 flex items-center justify-center mr-4">
<i class="fas fa-seedling text-xl"></i>
</div>
<div>
<h4 class="title-font text-lg">Biological Survey</h4>
<p class="text-sm text-gray-400">Stardate: 3295.8</p>
</div>
</div>
<p class="text-gray-300 mb-4">
The floating forests of Xol-3 exhibit collective intelligence. Root networks transmit electrical...
</p>
<div class="flex justify-between text-sm">
<span class="text-cyan-400"><i class="fas fa-clock mr-1"></i> 12 cycles ago</span>
<button class="text-purple-400 hover:text-purple-300">
<i class="fas fa-external-link-alt mr-1"></i> Continue
</button>
</div>
</div>
</div>
</section>
<!-- Current system info -->
<section class="mb-16 bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-800">
<h3 class="title-font text-2xl text-cyan-300 mb-6 flex items-center">
<i class="fas fa-map-marked-alt mr-3"></i> Current Location: Xol System
</h3>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- System map -->
<div class="lg:col-span-2">
<div class="relative h-64 md:h-80 lg:h-96 bg-black bg-opacity-30 rounded-lg border border-gray-700 overflow-hidden">
<div class="absolute inset-0 flex items-center justify-center">
<div class="relative w-full h-full">
<!-- Sun -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-full bg-gradient-to-br from-yellow-500 to-red-600 shadow-lg shadow-yellow-500/30"></div>
<!-- Planets -->
<div class="orbit orbit-1">
<div class="planet planet-1 bg-blue-500"></div>
</div>
<div class="orbit orbit-2">
<div class="planet planet-2 bg-green-500"></div>
</div>
<div class="orbit orbit-3">
<div class="planet planet-3 bg-purple-500"></div>
</div>
<div class="orbit orbit-4">
<div class="planet planet-4 bg-red-400"></div>
</div>
<div class="orbit orbit-5">
<div class="planet planet-5 bg-yellow-300"></div>
</div>
<!-- Ship marker -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<div class="relative">
<div class="w-4 h-4 rounded-full bg-cyan-400 animate-ping opacity-75"></div>
<div class="absolute top-0 left-0 w-4 h-4 rounded-full bg-cyan-500 flex items-center justify-center">
<i class="fas fa-space-shuttle text-xs"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- System data -->
<div>
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 mb-4">
<h4 class="title-font text-lg text-cyan-300 mb-3 flex items-center">
<i class="fas fa-star mr-2"></i> Xol Prime
</h4>
<ul class="space-y-2 text-sm">
<li class="flex justify-between">
<span class="text-gray-400">Class:</span>
<span class="text-cyan-300">G2V Yellow Dwarf</span>
</li>
<li class="flex justify-between">
<span class="text-gray-400">Age:</span>
<span>4.7 billion cycles</span>
</li>
<li class="flex justify-between">
<span class="text-gray-400">Planets:</span>
<span>5 major bodies</span>
</li>
<li class="flex justify-between">
<span class="text-gray-400">Habitable Zone:</span>
<span>1.2 - 2.8 AU</span>
</li>
</ul>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-4">
<h4 class="title-font text-lg text-cyan-300 mb-3 flex items-center">
<i class="fas fa-satellite-dish mr-2"></i> Local Network
</h4>
<div class="flex items-center mb-3">
<div class="w-3 h-3 rounded-full bg-green-500 mr-2 animate-pulse"></div>
<span>Connected to Aetherian Relay</span>
</div>
<div class="bg-black bg-opacity-40 rounded p-3 font-mono text-xs h-24 overflow-y-auto mb-3">
<p class="text-green-400">> Establishing quantum link...</p>
<p class="text-green-400">> Handshake complete</p>
<p class="text-green-400">> Bandwidth: 47.3 Qubits/sec</p>
<p class="text-cyan-400">> Last sync: 0.2 cycles ago</p>
<p class="console-text">>_</p>
</div>
<button class="w-full py-2 bg-cyan-600 hover:bg-cyan-700 rounded transition flex items-center justify-center">
<i class="fas fa-sync-alt mr-2"></i> Update Stellar Cartography
</button>
</div>
</div>
</div>
</section>
<!-- New entry modal (hidden by default) -->
<div id="new-entry-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
<div class="bg-gray-900 rounded-xl border border-gray-700 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="title-font text-2xl text-cyan-300">
<i class="fas fa-pen-fancy mr-2"></i> New Chronicle Entry
</h3>
<button id="close-modal-btn" class="text-gray-400 hover:text-white">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<form id="chronicle-form">
<div class="mb-6">
<label for="entry-title" class="block text-cyan-300 mb-2">Title</label>
<input type="text" id="entry-title" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:border-cyan-500 focus:outline-none" placeholder="e.g. First Contact with Xolians">
</div>
<div class="mb-6">
<label for="entry-stardate" class="block text-cyan-300 mb-2">Stardate</label>
<input type="text" id="entry-stardate" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:border-cyan-500 focus:outline-none" placeholder="e.g. 3298.7">
</div>
<div class="mb-6">
<label for="entry-location" class="block text-cyan-300 mb-2">Location</label>
<select id="entry-location" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:border-cyan-500 focus:outline-none">
<option value="">Select a location</option>
<option value="xol-1">Xol-1 (Barren World)</option>
<option value="xol-2">Xol-2 (Ocean Planet)</option>
<option value="xol-3">Xol-3 (Floating Forests)</option>
<option value="xol-4">Xol-4 (Volcanic Moon)</option>
<option value="xol-5">Xol-5 (Gas Giant)</option>
<option value="aetherian-nebula">Aetherian Nebula</option>
<option value="quantum-rift">Quantum Rift X-47</option>
</select>
</div>
<div class="mb-6">
<label for="entry-content" class="block text-cyan-300 mb-2">Chronicle</label>
<textarea id="entry-content" rows="8" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:border-cyan-500 focus:outline-none" placeholder="Document your discoveries..."></textarea>
</div>
<div class="flex justify-end space-x-4">
<button type="button" id="cancel-entry-btn" class="px-6 py-2 border border-gray-600 rounded-lg hover:bg-gray-700 transition">
Cancel
</button>
<button type="submit" class="px-6 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg transition flex items-center">
<i class="fas fa-save mr-2"></i> Save Entry
</button>
</div>
</form>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="mt-16 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
<div class="flex justify-center space-x-6 mb-4">
<a href="#" class="hover:text-cyan-400 transition"><i class="fab fa-galactic-republic"></i> Galactic Archives</a>
<a href="#" class="hover:text-cyan-400 transition"><i class="fas fa-cogs"></i> Settings</a>
<a href="#" class="hover:text-cyan-400 transition"><i class="fas fa-question-circle"></i> Help</a>
</div>
<p>Stardate 3298.7 • Aetherian Exploration Initiative</p>
<p class="mt-2">© 3298 Quantum Chronicles Network</p>
</footer>
</div>
<script>
// Create stars
document.addEventListener('DOMContentLoaded', function() {
const starsContainer = document.getElementById('stars-container');
const starCount = 200;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.classList.add('star');
// Random properties
const size = Math.random() * 3;
const x = Math.random() * 100;
const y = Math.random() * 100;
const duration = 2 + Math.random() * 5;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.left = `${x}%`;
star.style.top = `${y}%`;
star.style.setProperty('--duration', `${duration}s`);
starsContainer.appendChild(star);
}
// Modal functionality
const newChronicleBtn = document.getElementById('new-chronicle-btn');
const closeModalBtn = document.getElementById('close-modal-btn');
const cancelEntryBtn = document.getElementById('cancel-entry-btn');
const newEntryModal = document.getElementById('new-entry-modal');
newChronicleBtn.addEventListener('click', () => {
newEntryModal.classList.remove('hidden');
});
closeModalBtn.addEventListener('click', () => {
newEntryModal.classList.add('hidden');
});
cancelEntryBtn.addEventListener('click', () => {
newEntryModal.classList.add('hidden');
});
// Close modal when clicking outside
newEntryModal.addEventListener('click', (e) => {
if (e.target === newEntryModal) {
newEntryModal.classList.add('hidden');
}
});
// Form submission
const chronicleForm = document.getElementById('chronicle-form');
chronicleForm.addEventListener('submit', (e) => {
e.preventDefault();
// Here you would normally save the data
alert('Chronicle entry saved to quantum database!');
newEntryModal.classList.add('hidden');
chronicleForm.reset();
});
// Animate planets
const planets = document.querySelectorAll('.planet');
planets.forEach((planet, index) => {
planet.style.animation = `orbit ${8 + index * 2}s linear infinite`;
planet.style.transformOrigin = `${150 + index * 60}px center`;
});
});
</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=frvnx/ccdd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>