Updated index.html for better responsive design.

This commit is contained in:
Raphaël Numbus
2026-05-25 15:56:28 +02:00
parent 61c8c38853
commit 5d4b8eb77f
3 changed files with 24 additions and 14 deletions
+3
View File
@@ -0,0 +1,3 @@
{
"liveServer.settings.multiRootWorkspaceName": "numbus"
}
+10 -3
View File
@@ -331,8 +331,8 @@ SSHEND
# --- MAIN WEB FUNCTIONS --->
launch_gui() {
echo -e "\n ➡️ You will now proceed to the configuration of your device through your browser"
echo -e "\n 🚀 Launching Numbus Configurator..."
echo -e " ➡️ You will now proceed to the configuration of your device through your browser"
python3 "${BRIDGE_SCRIPT}" > /dev/null 2>&1 &
export BRIDGE_PID=$!
@@ -343,7 +343,7 @@ launch_gui() {
sleep 5
echo -e "\n ➡️ If it doesn't automatically, open your browser at: $(gum style --foreground 212 "${START_URL}")"
echo -e "\n ⚠️ If it doesn't automatically, open your browser at: $(gum style --foreground 212 "${START_URL}")"
}
# --- MAIN WEB FUNCTIONS ---<
@@ -777,9 +777,16 @@ until [[ -e "${LIVE_DATA_FILE}" ]]; do
sleep 5
done
INTERNATIONALIZATION_LANGUAGE="$(yq -r '.internationalization.language' ${LIVE_DATA_FILE})"
INTERNATIONALIZATION_COUNTRY="$(yq -r '.internationalization.country' ${LIVE_DATA_FILE})"
INTERNATIONALIZATION_TIMEZONE="$(yq -r '.internationalization.timeZone' ${LIVE_DATA_FILE})"
DEVICE_TYPE="$(yq -r '.device.type' ${LIVE_DATA_FILE})"
DEPLOYMENT_MODE="$(yq -r '.deployment.mode' ${LIVE_DATA_FILE})"
DEPLOYMENT_GIT_URL="$(yq -r '.deployment.git_url' ${LIVE_DATA_FILE})"
DEPLOYMENT_GIT_USERNAME="$(yq -r '.deployment.git_username' ${LIVE_DATA_FILE})"
DEPLOYMENT_GIT_PASSWORD="$(yq -r '.deployment.git_password' ${LIVE_DATA_FILE})"
LIVE_TARGET_IP="$(yq -r '.live_target.ip' ${LIVE_DATA_FILE})"
LIVE_TARGET_PASSWORD="$(yq -r '.live_target.password' ${LIVE_DATA_FILE})"
DEVICE_TYPE="$(yq -r '.device.type' ${LIVE_DATA_FILE})"
hierarchy_preparation
setup_ssh
+11 -11
View File
@@ -27,21 +27,21 @@
<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="justify-center flex flex-col items-center sm:p-6">
<img class="auto drop-shadow-2xl animate-pulse-slow mt-4 w-32 h-32 sm:mt-0 sm:w-48 sm:h-48 2xl:w-64 2xl:h-64" src="/media/logo.png" alt="Numbus Logo">
<h1 class="text-center font-extrabold tracking-tight p-4 pb-2 pt-2 text-3xl sm:p-2 sm:pt-4 sm:pb-7 sm:text-4xl md:text-5xl 2xl:text-6xl 2xl:pt-8 2xl:pb-10">Welcome to <span class="text-sky-400 animate-pulse-slow text-shadow-glow">NUMBUS</span></h1>
<p class="text-center text-sm pl-4 pr-4 p-2 sm:text-lg sm:pl-10 sm:pr-10 md:text-xl xl:text-2xl 2xl:p-4">Transform your device into a <strong>reliable and private</strong> appliance <br class="invisible md:visible"> using the power of open-source software.</p>
<p class="text-center text-sm pl-4 pr-4 pt-2 sm:text-lg sm:pl-10 sm:pr-10 md:text-xl xl:text-2xl 2xl:p-4">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>
<div class="bg-amber-500/20 border border-amber-500/30 rounded-xl flex text-left items-center mx-auto gap-5 mt-5 mb-5 ml-4 mr-4 p-2 sm:p-4 sm:ml-20 sm:mr-20 sm:mt-10 max-w-3xl">
<span class="bg-amber-500 rounded-full shrink-0 p-1 px-2">
<i class="mdi mdi-shield-lock text-slate-900 text-md sm:text-lg md:text-2xl 2xl:text-4xl"></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.
<p class="text-amber-200/90 italic text-xs sm:text-md md:text-lg xl:text-xl"><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 class="animate-pulse-slow drop-shadow-2xl pt-6 pb-4 pl-4 pr-4 sm:p-12 2xl:p-14">
<a class="text-shadow-glow px-10 py-4 bg-fuchsia-600 hover:bg-fuchsia-500 rounded-full text-sm sm: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>