File size: 8,645 Bytes
a2ca095 |
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 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unihost</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Rajdhani', sans-serif;
overflow-x: hidden;
color: #e0e0e0;
}
.title {
font-family: 'Orbitron', sans-serif;
text-shadow: 0 0 10px #00f3ff, 0 0 20px #00f3ff;
}
.neon-text {
text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff;
}
.neon-box {
box-shadow: 0 0 15px #00f3ff, inset 0 0 10px #00f3ff;
border: 1px solid #00f3ff;
transition: all 0.3s ease;
}
.neon-box:hover {
box-shadow: 0 0 25px #ff00ff, inset 0 0 15px #ff00ff;
border-color: #ff00ff;
}
.glow {
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00f3ff, 0 0 20px #00f3ff;
}
to {
text-shadow: 0 0 10px #fff, 0 0 15px #ff00ff, 0 0 20px #ff00ff, 0 0 25px #ff00ff;
}
}
.digital-line {
position: relative;
}
.digital-line::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #00f3ff, transparent);
box-shadow: 0 0 10px #00f3ff;
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body class="bg-black min-h-screen">
<div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
<div class="relative z-10 container mx-auto px-4 py-12">
<header class="text-center mb-16">
<h1 class="title text-6xl md:text-8xl font-bold mb-6 text-white glow">UNIHOST</h1>
<div class="digital-line inline-block">
<p class="neon-text text-xl md:text-2xl font-medium">The Future of Digital Hosting</p>
</div>
</header>
<main class="flex flex-col items-center">
<div class="neon-box bg-black bg-opacity-70 rounded-xl p-8 mb-16 w-full max-w-4xl pulse">
<div class="text-center">
<h2 class="title text-3xl md:text-4xl mb-6 text-cyan-400">Access Portal</h2>
<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-cyan-400 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-200"></div>
<a href="https://youtu.be/47udg7HbR6U?si=LuEMSD_3-0cM8sgI" target="_blank" class="relative block bg-black rounded-lg p-6">
<p class="text-xl md:text-2xl font-mono text-white group-hover:text-cyan-300 transition duration-200">https://youtu.be/47udg7HbR6U?si=LuEMSD_3-0cM8sgI</p>
</a>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-6xl">
<div class="neon-box bg-black bg-opacity-70 rounded-xl p-6 hover:transform hover:scale-105 transition duration-300 floating">
<h3 class="title text-2xl text-purple-400 mb-4">The Way She Moves</h3>
<p class="text-lg">"So Enchanting · BujuRocks"</p>
</div>
<div class="neon-box bg-black bg-opacity-70 rounded-xl p-6 hover:transform hover:scale-105 transition duration-300 floating" style="animation-delay: 0.5s;">
<h3 class="title text-2xl text-cyan-400 mb-4">Network Nodes</h3>
<p class="text-lg">"Chain Owners, Validators, and Access Nodes"</p>
</div>
<div class="neon-box bg-black bg-opacity-70 rounded-xl p-6 hover:transform hover:scale-105 transition duration-300 floating" style="animation-delay: 1s;">
<h3 class="title text-2xl text-pink-400 mb-4">AI Portal</h3>
<p class="text-lg">"IP PORTAL AI"</p>
</div>
</div>
</main>
<footer class="mt-24 text-center">
<div class="flex justify-center space-x-6 mb-6">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-600 to-cyan-400 flex items-center justify-center pulse">
<span class="text-2xl">⚡</span>
</div>
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-cyan-400 to-pink-500 flex items-center justify-center pulse" style="animation-delay: 0.5s;">
<span class="text-2xl">🔗</span>
</div>
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center pulse" style="animation-delay: 1s;">
<span class="text-2xl">🌐</span>
</div>
</div>
<p class="text-sm opacity-70">© 2023 Unihost Network | Digital Frontier</p>
</footer>
</div>
<script>
// Initialize Vanta.js background
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x00f3ff,
backgroundColor: 0x0,
points: 12.00,
maxDistance: 22.00,
spacing: 18.00
});
// Add floating particles
document.addEventListener('DOMContentLoaded', () => {
const container = document.querySelector('body');
const particleCount = 30;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'absolute rounded-full bg-cyan-400 opacity-30';
// Random size between 2px and 6px
const size = Math.random() * 4 + 2;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// Random position
particle.style.left = `${Math.random() * 100}%`;
particle.style.top = `${Math.random() * 100}%`;
// Random animation
const duration = Math.random() * 10 + 10;
particle.style.animation = `floating ${duration}s ease-in-out infinite`;
particle.style.animationDelay = `${Math.random() * 5}s`;
container.appendChild(particle);
}
});
</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=Bujurocks/unihost" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |