Spaces:
Running
Running
File size: 4,503 Bytes
dfba687 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeCraft Symphony</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>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
// Quantum Terminal Animation
const quantumTerminal = document.getElementById('quantum-terminal');
const commands = [
"Analyzing syntax patterns...",
"Compiling multi-platform adapters...",
"Weaving quantum syntax mesh...",
"Self-healing matrix active",
"READY"
];
let cmdIndex = 0;
function typeNextCommand() {
if(cmdIndex < commands.length) {
const line = document.createElement('div');
line.className = 'mb-2 terminal-line';
line.innerHTML = `$ ${commands[cmdIndex]}`;
quantumTerminal.appendChild(line);
quantumTerminal.scrollTop = quantumTerminal.scrollHeight;
cmdIndex++;
setTimeout(typeNextCommand, 1500);
} else {
const cursor = document.createElement('span');
cursor.className = 'terminal-cursor';
cursor.innerHTML = '█';
quantumTerminal.appendChild(cursor);
}
}
// Initialize terminal animation
setTimeout(typeNextCommand, 2000);
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6366f1',
secondary: '#8b5cf6',
dark: '#1e293b'
}
}
}
}
</script>
<style>
.vanta-canvas {
position: absolute !important;
opacity: 0.3;
}
.code-block {
font-family: 'Courier New', monospace;
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
}
.glow-text {
text-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
}
.terminal-cursor {
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.terminal-line {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
<script src="https://cdn.jsdelivr.net/npm/ansi_up@5.1.0/ansi_up.min.js"></script>
</head>
<body class="bg-dark text-gray-100 min-h-screen overflow-x-hidden">
<div id="vanta-bg"></div>
<!-- Quantum Syntax Terminal -->
<div class="fixed bottom-4 right-4 w-96 h-64 bg-gray-900 bg-opacity-90 rounded-lg shadow-xl overflow-hidden border border-primary border-opacity-30 z-50">
<div class="flex items-center px-4 py-2 bg-gray-800 border-b border-gray-700">
<div class="flex space-x-2 mr-4">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="text-xs text-gray-400">quantum://syntax/weaver</div>
</div>
<div class="p-4 h-full overflow-y-auto font-mono text-sm text-green-400" id="quantum-terminal">
<div class="mb-2">$ <span class="terminal-line">Initializing Quantum Syntax Weaver...</span></div>
<div class="mb-2">$ <span class="terminal-line">Loading cross-platform adapters...</span></div>
<div class="mb-2">$ <span class="terminal-line">Activating self-healing protocols...</span></div>
<div class="mb-2">$ <span class="terminal-line blink">█</span></div>
</div>
</div>
<header class="relative z-10">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="code" class="text-primary"></i>
<span class="text-xl font-bold bg-gradient-to-r from
</body>
</html> |