Raphaël Numbus
49 lines
2.7 KiB
HTML
49 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Numbus Configurator</title>
|
|
<!-- Tailwind CSS for modern styling -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- Alpine.js for lightweight reactivity -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<!-- JS-YAML to convert JS objects to YAML strings -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
|
|
<!-- Material Design Icons -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
|
|
<link rel="icon" href="./media/favicon.ico" type="image/x-icon">
|
|
</head>
|
|
|
|
<style>
|
|
@keyframes pulse-slow {
|
|
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(14, 165, 233, 0.2)); }
|
|
50% { transform: scale(1.03); filter: drop-shadow(0 0 40px rgba(192, 38, 211, 0.4)); }
|
|
}
|
|
.animate-pulse-slow { animation: pulse-slow 6s infinite ease-in-out; }
|
|
.text-shadow-glow { text-shadow: 0 0 15px rgba(56, 189, 248, 0.4); }
|
|
</style>
|
|
|
|
<body class="bg-[#0f172a] text-slate-100 min-h-screen font-sans selection:bg-fuchsia-500/30">
|
|
|
|
<!-- Welcome screen -->
|
|
<div class="p-12 justify-center flex flex-col items-center">
|
|
<img class="w-64 h-64 auto drop-shadow-2xl animate-pulse-slow" src="./media/logo.png" alt="Numbus Logo">
|
|
<h1 class="p-8 text-center text-6xl font-extrabold tracking-tight">Welcome to <span class="text-sky-400 animate-pulse-slow text-shadow-glow">NUMBUS</span></h1>
|
|
<p class="text-center text-2xl p-2">Transform your device into a <strong>secure, reliable and private</strong> appliance <br> using the power of open-soure software.</p>
|
|
<p class="text-center text-2xl p-2 pb-10">You will be <strong>guided</strong> through the configuration process.</p>
|
|
|
|
<div class="bg-amber-500/20 border border-amber-500/30 p-4 rounded-xl flex gap-5 text-left items-center max-w-3xl mx-auto">
|
|
<span class="bg-amber-500 rounded-full p-1 px-2 shrink-0">
|
|
<i class="mdi mdi-shield-lock text-slate-900 text-2xl"></i>
|
|
</span>
|
|
<p class="text-xl text-amber-200/90 italic"><strong>Privacy First:</strong> No data entered here ever leaves your device. <br> This configurator runs entirely locally in your browser and is fully private.
|
|
</div>
|
|
|
|
<span class="animate-pulse-slow drop-shadow-2xl p-12">
|
|
<a class="text-shadow-glow px-10 py-4 bg-fuchsia-600 hover:bg-fuchsia-500 rounded-full text-xl font-bold transition-all transform hover:scale-105 shadow-lg shadow-fuchsia-600/20" href="./pages/preparation.html">Get Started</a>
|
|
</span>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |