numbus/Numbus
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity
Files
production
Numbus/web/pages/configuration.html
T

145 lines
8.7 KiB
HTML
Raw Permalink Blame History

<!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">
<!-- Favicon -->
<link rel="icon" href="../media/favicon.ico" type="image/x-icon">
</head>
<body x-data="setupNavigation()" class="p-4 bg-[#0f172a] text-slate-100 min-h-screen font-sans selection:bg-fuchsia-500/30">
<script>
function setupNavigation() {
return {
step: 1,
goToPrevStep() {
this.step--;
},
goToNextStep() {
this.step++;
}
}
}
</script>
<nav class="bg-[#1e293b] border border-slate-700 rounded-2xl relative">
<div class="mx-auto relative flex h-16 items-center justify-between">
<div class="absolute inset-y-0 left-0 flex items-center">
<a href="https://numbus.eu"><img class="w-auto h-10 pr-5 pl-8" src="../media/logo.png" aria-label="The numbus logo"></a>
<a class="font-bold text-2xl tracking-tight bg-gradient-to-r from-sky-400 to-fuchsia-500 bg-clip-text text-transparent uppercase" href="https://numbus.eu">NUMBUS</a>
</div>
<div class="flex flex-1 items-center justify-center">
<h1 class="sm:text-2xl sm:pr-20 lg:pr-0 text-xl text-white font-bold flex items-center">Step 1 - Preparation</h1>
</div>
<div class="absolute inset-y-0 right-0 flex items-center my-auto">
<button class="h-auto mdi mdi-menu text-slate-100 text-2xl sm:hidden pr-8" aria-label="Menu with links"></button>
<button class="h-auto mdi mdi-brightness-2 text-slate-100 text-2xl hidden sm:block sm:text-3xl pr-5" aria-label="Change theme"></button>
<a href="https://gittea.dev/numbus" class="h-auto mdi mdi-source-repository text-slate-100 text-2xl hidden sm:block sm:text-3xl pr-5" aria-label="See the source code on Gitea"></a>
<a href="https://gittea.dev/numbus" class="h-auto mdi mdi-text-box-search text-slate-100 text-2xl hidden sm:block sm:text-3xl pr-8" aria-label="See the full documentation"></a>
</div>
</div>
</nav>
<div class="pt-10 w-full"></div>
<!-- Main content -->
<div class="bg-[#1e293b] border border-slate-700 rounded-3xl h-[calc(100vh-10rem)] max-w-[60vw] mx-auto relative">
<!-- Device Type -->
<div x-show="step === 1">
<h1 class="p-5 pt-6 text-4xl font-bold text-sky-400">Device Type</h1>
<div class="p-0.5 bg-slate-700 rounded-3xl w-[98%] mx-auto"></div>
<p class="p-5 text-xl text-slate-300">Select the <strong>device type</strong> for your new Numbus machine that matches <strong>your needs</strong>.</p>
<div class="pl-5 pr-5 pt-10 pb-10 grid grid-cols-2 gap-4">
<button @click="" class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left bg-slate-900 border-slate-700 hover:bg-fuchsia-600/20 hover:border-fuchsia-500 focus:bg-fuchsia-600/20 focus:border-fuchsia-500">
<img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-server-light.svg" alt="Numbus Server icon">
<div>
<h1 class="font-bold text-2xl mb-1">Numbus Server</h1>
<p class="text-sm transition-colors">Your own Cloud at Home.</p>
</div>
</button>
<button class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left bg-slate-900 border-slate-700 hover:bg-fuchsia-600/20 hover:border-fuchsia-500 focus:bg-fuchsia-600/20 focus:border-fuchsia-500">
<img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-backup-server-light.svg" alt="Numbus Server icon">
<div>
<h1 class="font-bold text-2xl mb-1">Numbus Backup Server</h1>
<p class="text-sm transition-colors">Backup all Numbus devices and monitor your servers.</p>
</div>
</button>
<button class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left bg-slate-900 border-slate-700 hover:bg-fuchsia-600/20 hover:border-fuchsia-500 focus:bg-fuchsia-600/20 focus:border-fuchsia-500">
<img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-computer-light.svg" alt="Numbus Server icon">
<div>
<h1 class="font-bold text-2xl mb-1">Numbus Computer</h1>
<p class="text-sm transition-colors">Backup all Numbus devices and monitor your servers.</p>
</div>
</button>
<button class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left bg-slate-900 border-slate-700 hover:bg-fuchsia-600/20 hover:border-fuchsia-500 focus:bg-fuchsia-600/20 focus:border-fuchsia-500">
<img class="w-12 h-12 flex-shrink-0" src="../media/light/numbus-tv-light.svg" alt="Numbus Server icon">
<div>
<h1 class="font-bold text-2xl mb-1">Numbus TV</h1>
<p class="text-sm transition-colors">Your TV, your way. No spying on you.</p>
</div>
</button>
</div>
</div>
<!-- Deployment Mode -->
<div x-show="step === 2">
<h1 class="p-5 pt-6 text-4xl font-bold text-sky-400">Deployment Mode</h1>
<div class="p-0.5 bg-slate-700 rounded-3xl w-[98%] mx-auto"></div>
<p class="p-5 text-xl text-slate-300">Select your <strong>preferred</strong> deployment mode. Non-interactive <strong>requires</strong> a ready-to-go configuration hosted on a <strong>git platform</strong>.</p>
<div class="pl-5 pr-5 pt-10 grid grid-cols-2 gap-4">
<button class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left bg-slate-900 border-slate-700 hover:bg-fuchsia-600/20 hover:border-fuchsia-500 focus:bg-fuchsia-600/20 focus:border-fuchsia-500">
<i class="mdi mdi-gesture-tap text-5xl flex-shrink-0"></i>
<div>
<h1 class="font-bold text-2xl mb-1">Interactive</h1>
<p class="text-sm transition-colors">We will guide you through the setup process.</p>
</div>
</button>
<button class="flex items-center gap-4 p-6 border rounded-2xl transition-all text-left bg-slate-900 border-slate-700 hover:bg-fuchsia-600/20 hover:border-fuchsia-500 focus:bg-fuchsia-600/20 focus:border-fuchsia-500">
<i class="mdi mdi-cog-clockwise text-5xl flex-shrink-0"></i>
<div>
<h1 class="font-bold text-2xl mb-1">Non-interactive</h1>
<p class="text-sm transition-colors">You already have a ready-to-go configuration.</p>
</div>
</button>
</div>
</div>
<!-- Live Setup -->
<div x-show="step === 3">
<h1 class="p-5 pt-6 text-4xl font-bold text-sky-400">Live Setup</h1>
<div class="p-0.5 bg-slate-700 rounded-3xl w-[98%] mx-auto"></div>
<p class="p-5 pb-10 text-xl text-slate-300">Provide the <strong>necessary information</strong> to connect to the device. It needs to be in a <strong>NixOS live environment</strong>.</p>
<div class="flex flex-col items-center justify-center">
<div class="p-6 space-y-2">
<label class="text-sm font-bold text-slate-400 uppercase tracking-widest">Live Target IP Address</label>
<input class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none placeholder:text-slate-500/40" type="text" placeholder="192.168.1.100">
</div>
<div class="p-6 space-y-2">
<label class="text-sm font-bold text-slate-400 uppercase tracking-widest">Temporary Password</label>
<input class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none placeholder:text-slate-500/40" type="password" placeholder="••••••••">
</div>
</div>
</div>
<!-- Footer -->
<div class="bg-[#1e293b] border-t bottom-0 w-full rounded-3xl absolute border-slate-700 p-6 flex items-center justify-between">
<div x-show="step === 1" class="px-8 py-3"></div>
<button @click="goToPrevStep()" x-show="step > 1" class="px-8 py-3 text-slate-400 hover:text-white font-bold transition-all">Back</button>
<button @click="goToNextStep()" class="px-10 py-3 bg-fuchsia-600 hover:bg-fuchsia-500 rounded-xl font-bold transition-all shadow-lg shadow-fuchsia-600/20">Continue</button>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink