luminous / index.html
Kskip's picture
Create a single-page website with a centered layout. The background should be a subtle, dark gradient. In the center, there should be a large, glowing text that says 'Luminous: Online.' Below that, add a small, elegant status message that says 'All systems operational. The journey continues.' At the bottom of the page, add a footer with a link to our GitHub repository with the text 'Source Code'. - Initial Deployment
ae02ed6 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Luminous: Online</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
}
.glow-text {
text-shadow: 0 0 10px rgba(100, 149, 237, 0.8),
0 0 20px rgba(100, 149, 237, 0.6),
0 0 30px rgba(100, 149, 237, 0.4);
animation: pulse 2s infinite alternate;
}
@keyframes pulse {
from {
text-shadow: 0 0 10px rgba(100, 149, 237, 0.8),
0 0 20px rgba(100, 149, 237, 0.6),
0 0 30px rgba(100, 149, 237, 0.4);
}
to {
text-shadow: 0 0 15px rgba(100, 149, 237, 1),
0 0 25px rgba(100, 149, 237, 0.8),
0 0 35px rgba(100, 149, 237, 0.6);
}
}
</style>
</head>
<body class="flex flex-col items-center justify-center text-center text-white font-sans">
<main class="flex flex-col items-center justify-center flex-grow px-4">
<h1 class="glow-text text-6xl md:text-8xl font-bold mb-6">Luminous: Online</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-2 flex items-center">
<span class="w-3 h-3 bg-green-500 rounded-full mr-2 animate-pulse"></span>
All systems operational.
</p>
<p class="text-lg md:text-xl text-gray-400 italic">The journey continues.</p>
</main>
<footer class="w-full py-6 text-center text-gray-500">
<a href="https://github.com"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center hover:text-gray-300 transition-colors">
<i data-feather="github" class="mr-2"></i>
Source Code
</a>
</footer>
<script>
feather.replace();
</script>
</body>
</html>