feat: Show download progress (#608)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/build.yml

@@ -8,6 +8,10 @@ on:
     paths-ignore:
       - '**/*.md'
       - '**/*.yml'
+      - '**/*.js'
+      - '**/*.css'
+      - '**/*.html'
+      - 'web/**'
       - '.gitignore'
       - '.dockerignore'
       - '.github/**'

.github/workflows/hub.yml

@@ -15,7 +15,7 @@ jobs:
     - uses: actions/checkout@v4
     - 
       name: Docker Hub Description
-      uses: peter-evans/dockerhub-description@v3
+      uses: peter-evans/dockerhub-description@v4
       with:
         username: ${{ secrets.DOCKERHUB_USERNAME }}
         password: ${{ secrets.DOCKERHUB_TOKEN }}

readme.md

@@ -17,7 +17,6 @@ Virtual DSM in a docker container.
 
  - Multiple disks
  - KVM acceleration
- - GPU pass-through
  - Upgrades supported
  
 ## Usage
@@ -47,24 +46,22 @@ services:
 Via `docker run`
 
 ```bash
-docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-timeout 60 vdsm/virtual-dsm
+docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-timeout 120 vdsm/virtual-dsm
 ```
 
 ## FAQ
 
-  * ### How do I use it?
+* ### How do I use it?
 
   Very simple! These are the steps:
   
-    - Start the container and get some coffee.
-
-    - Connect to port 5000 of the container in your web browser.
+  - Start the container and connect to [port 5000](http://localhost:5000) using your web browser.
 
   - Wait until DSM is ready, choose an username and password, and you will be taken to the desktop.
   
-    - Enjoy your brand new machine, and don't forget to star this repo!
+  Enjoy your brand new machine, and don't forget to star this repo!
 
-  * ### How do I change the size of the disk?
+* ### How do I change the size of the disk?
 
   To expand the default size of 16 GB, locate the `DISK_SIZE` setting in your compose file and modify it to your preferred capacity:
 
@@ -75,7 +72,7 @@ docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-ti
   
   This can also be used to resize the existing disk to a larger capacity without any data loss. 
 
-  * ### How do I change the storage location?
+* ### How do I change the storage location?
 
   To change the storage location, include the following bind mount in your compose file:
 
@@ -86,7 +83,7 @@ docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-ti
 
   Replace the example path `/var/dsm` with the desired storage folder.
 
-  * ### How do I create a growable disk?
+* ### How do I create a growable disk?
 
   By default, the entire capacity of the disk is reserved in advance.
 
@@ -112,7 +109,7 @@ docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-ti
     - /mnt/data/example:/storage3
   ```
 
-  * ### How do I pass-through a disk?
+* ### How do I pass-through a disk?
 
    It is possible to pass-through disk devices directly by adding them to your compose file in this way:
 
@@ -129,7 +126,7 @@ docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-ti
 
   Do NOT use this feature with the goal of sharing files from the host, they will all be lost without warning when DSM creates the volume.
 
-  * ### How do I increase the amount of CPU or RAM?
+* ### How do I increase the amount of CPU or RAM?
 
   By default, a single CPU core and 1 GB of RAM are allocated to the container.
 
@@ -141,7 +138,7 @@ docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-ti
     CPU_CORES: "4"
   ```
 
-  * ### How do I verify if my system supports KVM?
+* ### How do I verify if my system supports KVM?
 
   To verify if your system supports KVM, run the following commands:
 
@@ -152,7 +149,7 @@ docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-ti
 
   If you receive an error from `kvm-ok` indicating that KVM acceleration can't be used, check the virtualization settings in the BIOS.
 
-  * ### How do I assign an individual IP address to the container?
+* ### How do I assign an individual IP address to the container?
 
   By default, the container uses bridge networking, which shares the IP address with the host. 
 
@@ -188,7 +185,7 @@ docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-ti
 
   Please note that this IP address won't be accessible from the Docker host due to the design of macvlan, which doesn't permit communication between the two. If this is a concern, you need to create a [second macvlan](https://blog.oddbit.com/post/2018-03-12-using-docker-macvlan-networks/#host-access) as a workaround.
 
-  * ### How can DSM acquire an IP address from my router?
+* ### How can DSM acquire an IP address from my router?
 
   After configuring the container for macvlan (see above), it is possible for DSM to become part of your home network by requesting an IP from your router, just like your other devices.
 
@@ -203,7 +200,7 @@ docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-ti
 
   Please note that even if you don't want DHCP, it's still recommended to enable this feature, as it prevents NAT issues and increases performance by using a `macvtap` interface. In that case, just set a static IP from the DSM control panel after you enabled this mode.
 
-  * ### How do I pass-through the GPU?
+* ### How do I pass-through the GPU?
 
   To pass-through your Intel GPU, add the following lines to your compose file:
 
@@ -216,7 +213,7 @@ docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-ti
 
   This can be used to enable the facial recognition function in Synology Photos for example.
 
-  * ### How do I install a specific version of vDSM?
+* ### How do I install a specific version of vDSM?
 
   By default, version 7.2 will be installed, but if you prefer an older version, you can add its download URL to your compose file as follows:
 
@@ -227,11 +224,11 @@ docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-ti
 
   With this method, it is even possible to switch between different versions while keeping all your file data intact.
 
-  * ### What are the differences compared to the standard DSM?
+* ### What are the differences compared to the standard DSM?
 
   There are only two minor differences: the Virtual Machine Manager package is not available, and Surveillance Station will not include any free licenses.
   
-  * ### Is this project legal?
+* ### Is this project legal?
 
   Yes, this project contains only open-source code and does not distribute any copyrighted material. Neither does it try to circumvent any copyright protection measures. So under all applicable laws, this project would be considered legal. 
   

src/config.sh

@@ -3,8 +3,8 @@ set -Eeuo pipefail
 
 DEF_OPTS="-nodefaults -boot strict=on"
 RAM_OPTS=$(echo "-m $RAM_SIZE" | sed 's/MB/M/g;s/GB/G/g;s/TB/T/g')
-CPU_OPTS="-cpu $CPU_MODEL -smp $CPU_CORES,sockets=1,dies=1,cores=$CPU_CORES,threads=1"
-MAC_OPTS="-machine type=q35,usb=off,dump-guest-core=off,hpet=off${KVM_OPTS}"
+CPU_OPTS="-cpu $CPU_FLAGS -smp $CPU_CORES,sockets=1,dies=1,cores=$CPU_CORES,threads=1"
+MAC_OPTS="-machine type=q35,usb=off,vmport=off,dump-guest-core=off,hpet=off${KVM_OPTS}"
 DEV_OPTS="-device virtio-balloon-pci,id=balloon0,bus=pcie.0,addr=0x4"
 DEV_OPTS="$DEV_OPTS -object rng-random,id=objrng0,filename=/dev/urandom"
 DEV_OPTS="$DEV_OPTS -device virtio-rng-pci,rng=objrng0,id=rng0,bus=pcie.0,addr=0x1c"

src/disk.sh

@@ -112,8 +112,8 @@ createDisk() {
     fi
   fi
 
-  MSG="Creating a $DISK_TYPE $DISK_DESC image in $DISK_FMT format with a size of $DISK_SPACE..."
-  info "$MSG" && html "$MSG"
+  html "Creating a $DISK_DESC image..."
+  info "Creating a $DISK_SPACE $DISK_TYPE $DISK_DESC image in $DISK_FMT format..."
 
   local FAIL="Could not create a $DISK_TYPE $DISK_FMT $DISK_DESC image of $DISK_SPACE ($DISK_FILE)"
 
@@ -266,8 +266,8 @@ convertDisk() {
     fi
   fi
 
-  MSG="Converting $DISK_DESC to $DST_FMT, please wait until completed..."
-  info "$MSG" && html "$MSG"
+  html "Converting $DISK_DESC to $DST_FMT..."
+  info "Converting $DISK_DESC to $DST_FMT, please wait until completed..."
 
   local CONV_FLAGS="-p"
   local DISK_PARAM="$DISK_ALLOC"
@@ -306,8 +306,8 @@ convertDisk() {
     fi
   fi
 
-  MSG="Conversion of $DISK_DESC to $DST_FMT completed succesfully!"
-  info "$MSG" && html "$MSG"
+  html "Conversion of $DISK_DESC completed..."
+  info "Conversion of $DISK_DESC to $DST_FMT completed succesfully!"
 
   return 0
 }

src/entry.sh

@@ -18,11 +18,13 @@ cd /run
 
 trap - ERR
 
+info "Booting $APP using $VERS..."
+[[ "$DEBUG" == [Yy1]* ]] && echo "Arguments: $ARGS" && echo
+
 if [[ "$CONSOLE" == [Yy]* ]]; then
   exec qemu-system-x86_64 ${ARGS:+ $ARGS}
 fi
 
-[[ "$DEBUG" == [Yy1]* ]] && info "$VERS" && echo "Arguments: $ARGS" && echo
 { qemu-system-x86_64 ${ARGS:+ $ARGS} >"$QEMU_OUT" 2>"$QEMU_LOG"; rc=$?; } || :
 (( rc != 0 )) && error "$(<"$QEMU_LOG")" && exit 15
 

src/install.sh

@@ -105,6 +105,7 @@ RDC="$STORAGE/dsm.rd"
 if [ ! -f "$RDC" ]; then
 
   MSG="Downloading installer..."
+  PRG="Downloading installer ([P])..."
   info "Install: $MSG" && html "$MSG"
 
   RD="$TMP/rd.gz"
@@ -112,7 +113,11 @@ if [ ! -f "$RDC" ]; then
   VERIFY="b4215a4b213ff5154db0488f92c87864"
   LOC="$DL/release/7.0.1/42218/DSM_VirtualDSM_42218.pat"
 
+  rm -f "$RD"
+  /run/progress.sh "$RD" "$PRG" &
   { curl -r "$POS" -sfk -S -o "$RD" "$LOC"; rc=$?; } || :
+
+  fKill "progress.sh"
   (( rc != 0 )) && error "Failed to download $LOC, reason: $rc" && exit 60
 
   SUM=$(md5sum "$RD" | cut -f 1 -d " ")
@@ -123,8 +128,12 @@ if [ ! -f "$RDC" ]; then
     rm "$RD"
     rm -f "$PAT"
 
+    html "$MSG"
+    /run/progress.sh "$PAT" "$PRG" &
     { wget "$LOC" -O "$PAT" -q --no-check-certificate --show-progress "$PROGRESS"; rc=$?; } || :
-    (( rc != 0 )) && error "Failed to download $LOC, reason: $rc" && exit 60
+
+    fKill "progress.sh"
+    (( rc != 0 )) && error "Failed to download $LOC , reason: $rc" && exit 60
 
     tar --extract --file="$PAT" --directory="$(dirname "$RD")"/. "$(basename "$RD")"
     rm "$PAT"
@@ -174,8 +183,11 @@ fi
 
 rm -rf "$TMP" && mkdir -p "$TMP"
 
-MSG="Downloading $BASE.pat..."
-info "Install: $MSG" && html "$MSG"
+info "Install: Downloading $BASE.pat..."
+
+MSG="Downloading DSM..."
+PRG="Downloading DSM ([P])..."
+html "$MSG"
 
 PAT="/$BASE.pat"
 rm -f "$PAT"
@@ -186,8 +198,12 @@ if [[ "$URL" == "file://"* ]]; then
 
 else
 
+  /run/progress.sh "$PAT" "$PRG" &
+
   { wget "$URL" -O "$PAT" -q --no-check-certificate --show-progress "$PROGRESS"; rc=$?; } || :
-  (( rc != 0 )) && error "Failed to download $URL, reason: $rc" && exit 69
+
+  fKill "progress.sh"
+  (( rc != 0 )) && error "Failed to download $URL , reason: $rc" && exit 69
 
 fi
 

src/network.sh

@@ -83,7 +83,9 @@ configureDNS() {
   DNSMASQ_OPTS=$(echo "$DNSMASQ_OPTS" | sed 's/\t/ /g' | tr -s ' ' | sed 's/^ *//')
 
   [[ "$DEBUG" == [Yy1]* ]] && set -x
-  $DNSMASQ ${DNSMASQ_OPTS:+ $DNSMASQ_OPTS}
+  if ! $DNSMASQ ${DNSMASQ_OPTS:+ $DNSMASQ_OPTS}; then
+    error "Failed to start dnsmasq, reason: $?" && exit 29
+  fi
   { set +x; } 2>/dev/null
   [[ "$DEBUG" == [Yy1]* ]] && echo
 
@@ -254,8 +256,8 @@ if [[ "$DHCP" == [Yy1]* ]]; then
   # Configuration for DHCP IP
   configureDHCP
 
-  MSG="Please wait while discovering IP..."
-  html "$MSG" "2000"
+  MSG="Booting DSM instance..."
+  html "$MSG"
 
 else
 

src/power.sh

@@ -98,7 +98,6 @@ terminal() {
 
 _graceful_shutdown() {
 
-  local cnt=0
   local code=$?
   local pid url response
 
@@ -144,6 +143,8 @@ _graceful_shutdown() {
 
   fi
 
+  local cnt=0
+
   while [ "$cnt" -lt "$QEMU_TIMEOUT" ]; do
 
     ! isAlive "$pid" && break

src/print.sh

@@ -7,6 +7,7 @@ info () { printf "%b%s%b" "\E[1;34m❯ \E[1;36m" "$1" "\E[0m\n" >&2; }
 error () { printf "%b%s%b" "\E[1;31m❯ " "ERROR: $1" "\E[0m\n" >&2; }
 
 file="/run/shm/dsm.url"
+info="/run/shm/msg.html"
 page="/run/shm/index.html"
 address="/run/shm/qemu.ip"
 shutdown="/run/shm/qemu.end"
@@ -80,6 +81,7 @@ if [[ "$location" != "20.20"* ]]; then
   HTML="${HTML/\[5\]/}"
 
   echo "$HTML" > "$page"
+  echo "$body" > "$info"
 
 else
 

src/proc.sh

@@ -5,8 +5,8 @@ set -Eeuo pipefail
 
 : "${KVM:="Y"}"
 : "${HOST_CPU:=""}"
+: "${CPU_FLAGS:=""}"
 : "${CPU_MODEL:="host"}"
-: "${CPU_FEATURES:="+ssse3,+sse4.1,+sse4.2"}"
 
 [ "$ARCH" != "amd64" ] && KVM="N"
 
@@ -37,6 +37,7 @@ fi
 
 if [[ "$KVM" != [Nn]* ]]; then
 
+  CPU_FEATURES="kvm=on"
   KVM_OPTS=",accel=kvm -enable-kvm"
 
   if ! grep -qE '^flags.* (sse4_2)' /proc/cpuinfo; then
@@ -48,15 +49,23 @@ if [[ "$KVM" != [Nn]* ]]; then
 else
 
   KVM_OPTS=""
+  CPU_FEATURES="+ssse3,+sse4.1,+sse4.2"
+
+  if [[ "${CPU_MODEL,,}" == "host"* ]]; then
 
-  if [[ "$CPU_MODEL" == "host"* ]]; then
     if [[ "$ARCH" == "amd64" ]]; then
-      CPU_MODEL="max,$CPU_FEATURES"
+      CPU_MODEL="max"
     else
-      CPU_MODEL="qemu64,$CPU_FEATURES"
-    fi
+      CPU_MODEL="qemu64"
     fi
 
+  fi
+fi
+
+if [ -z "$CPU_FLAGS" ]; then
+  CPU_FLAGS="$CPU_MODEL,$CPU_FEATURES"
+else
+  CPU_FLAGS="$CPU_MODEL,$CPU_FEATURES,$CPU_FLAGS"
 fi
 
 if [ -z "$HOST_CPU" ]; then

src/progress.sh

@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+set -Eeuo pipefail
+
+escape () {
+    local s
+    s=${1//&/\&}
+    s=${s//</\&lt;}
+    s=${s//>/\&gt;}
+    s=${s//'"'/\&quot;}
+    printf -- %s "$s"
+    return 0
+}
+
+file="$1"
+body=$(escape "$2")
+info="/run/shm/msg.html"
+
+if [[ "$body" == *"..." ]]; then
+  body="<p class=\"loading\">${body/.../}</p>"
+fi
+
+while true
+do
+  if [ -f "$file" ]; then
+    bytes=$(du -sb "$file" | cut -f1)
+    if (( bytes > 1000 )); then
+      size=$(echo "$bytes" | numfmt --to=iec --suffix=B  | sed -r 's/([A-Z])/ \1/')
+      echo "${body//(\[P\])/($size)}"> "$info"
+    fi
+  fi
+  sleep 1
+done

src/reset.sh

@@ -29,6 +29,7 @@ echo
 # Helper variables
 
 STORAGE="/storage"
+INFO="/run/shm/msg.html"
 PAGE="/run/shm/index.html"
 TEMPLATE="/var/www/index.html"
 FOOTER1="$APP for Docker v$(</run/version)"
@@ -39,20 +40,20 @@ MINOR=$(uname -r | cut -d '.' -f2)
 ARCH=$(dpkg --print-architecture)
 VERS=$(qemu-system-x86_64 --version | head -n 1 | cut -d '(' -f 1)
 
+# Check system
+
+if [ ! -d "/dev/shm" ]; then
+  error "Directory /dev/shm not found!" && exit 14
+else
+  [ ! -d "/run/shm" ] && ln -s /dev/shm /run/shm
+fi
+
 # Check folder
 
 if [ ! -d "$STORAGE" ]; then
   error "Storage folder ($STORAGE) not found!" && exit 13
 fi
 
-if [ ! -d "/run/shm" ]; then
-  if [ -d "/dev/shm" ]; then
-    ln -s /dev/shm /run/shm
-  else
-    error "Folder /dev/shm not found!" && exit 14
-  fi
-fi
-
 # Cleanup files
 rm -f /run/shm/qemu.*
 rm -f /run/shm/dsm.url
@@ -118,6 +119,7 @@ html()
 {
     local title
     local body
+    local script
     local footer
 
     title=$(escape "$APP")
@@ -129,10 +131,7 @@ html()
       body="<p class=\"loading\">${body/.../}</p>"
     fi
 
-    local timeout="4999"
-    [ -n "${2:-}" ] && timeout="$2"
-    local script="<script>setTimeout(() => { document.location.reload(); }, $timeout);</script>"
-    [[ "$timeout" == "0" ]] && script=""
+    [ -n "${2:-}" ] && script="$2" || script=""
 
     local HTML
     HTML=$(<"$TEMPLATE")
@@ -143,6 +142,7 @@ html()
     HTML="${HTML/\[5\]/$FOOTER2}"
 
     echo "$HTML" > "$PAGE"
+    echo "$body" > "$INFO"
 
     return 0
 }

web/css/style.css

@@ -0,0 +1,167 @@
+body {
+	color: white;
+	background-color: #125bdb;
+	font-smoothing: antialiased;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-family: Verdana, Geneva, sans-serif;
+}
+
+#info {
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
+}
+
+#content {
+	text-align: center;
+	padding: 20px;
+	margin-top: 50px;
+}
+
+footer {
+	width: 98%;
+	position: fixed;
+	bottom: 0px;
+	height: 40px;
+	text-align: center;
+	color: #0c8aeb;
+	text-shadow: 0 0 1px #0c8aeb;
+}
+
+#empty {
+	height: 40px;
+	/* Same height as footer */
+}
+
+a,
+a:hover,
+a:active,
+a:visited {
+	color: white;
+}
+
+footer a:link,
+footer a:visited,
+footer a:active {
+	color: #0c8aeb;
+}
+
+footer a:hover {
+	color: #73e6ff;
+}
+
+.loading:after {
+	content: " .";
+	animation: dots 1s steps(5, end) infinite;
+}
+
+@keyframes dots {
+
+	0%,
+	20% {
+		color: rgba(0, 0, 0, 0);
+		text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
+	}
+
+	40% {
+		color: white;
+		text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
+	}
+
+	60% {
+		text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);
+	}
+
+	80%,
+	100% {
+		text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;
+	}
+}
+
+.spinner_LWk7 {
+	animation: spinner_GWy6 1.2s linear infinite, spinner_BNNO 1.2s linear infinite
+}
+
+.spinner_yOMU {
+	animation: spinner_GWy6 1.2s linear infinite, spinner_pVqn 1.2s linear infinite;
+	animation-delay: .15s
+}
+
+.spinner_KS4S {
+	animation: spinner_GWy6 1.2s linear infinite, spinner_6uKB 1.2s linear infinite;
+	animation-delay: .3s
+}
+
+.spinner_zVee {
+	animation: spinner_GWy6 1.2s linear infinite, spinner_Qw4x 1.2s linear infinite;
+	animation-delay: .45s
+}
+
+@keyframes spinner_GWy6 {
+
+	0%,
+	50% {
+		width: 9px;
+		height: 9px
+	}
+
+	10% {
+		width: 11px;
+		height: 11px
+	}
+}
+
+@keyframes spinner_BNNO {
+
+	0%,
+	50% {
+		x: 1.5px;
+		y: 1.5px
+	}
+
+	10% {
+		x: .5px;
+		y: .5px
+	}
+}
+
+@keyframes spinner_pVqn {
+
+	0%,
+	50% {
+		x: 13.5px;
+		y: 1.5px
+	}
+
+	10% {
+		x: 12.5px;
+		y: .5px
+	}
+}
+
+@keyframes spinner_6uKB {
+
+	0%,
+	50% {
+		x: 13.5px;
+		y: 13.5px
+	}
+
+	10% {
+		x: 12.5px;
+		y: 12.5px
+	}
+}
+
+@keyframes spinner_Qw4x {
+
+	0%,
+	50% {
+		x: 1.5px;
+		y: 13.5px
+	}
+
+	10% {
+		x: .5px;
+		y: 12.5px
+	}
+}

web/img/favicon.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 511.962 511.962" height="512" viewBox="0 0 511.962 511.962" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m489.965 120.063c0-5.77-3.31-11.028-8.512-13.524l-218.984-105.063c-4.102-1.967-8.875-1.967-12.977 0l-218.985 105.063c-5.202 2.496-8.511 7.755-8.511 13.524l-.003 271.834c0 5.77 3.31 11.028 8.512 13.524l218.989 105.064c2.051.983 4.27 1.476 6.488 1.476 2.219 0 4.438-.492 6.488-1.476l218.989-105.064c5.202-2.496 8.512-7.755 8.512-13.524z" fill="#4e6ba6"/><path d="m489.965 120.063c0-5.77-3.31-11.028-8.512-13.524l-218.984-105.063c-2.051-.984-4.269-1.476-6.488-1.476v511.962c2.219 0 4.438-.492 6.488-1.476l218.989-105.064c5.202-2.496 8.512-7.755 8.512-13.524z" fill="#28487a"/><path d="m425.812 160.441c0-2.27-.519-4.457-1.457-6.432l-336.701-.095c-.967 1.999-1.504 4.22-1.504 6.526l-.002 191.081c0 5.769 3.31 11.028 8.512 13.524l154.833 74.285c2.051.983 4.27 1.476 6.488 1.476 2.219 0 4.438-.492 6.488-1.476l154.834-74.285c5.202-2.496 8.512-7.755 8.512-13.524z" fill="#8dc2eb"/><path d="m424.354 154.009h-168.373v286.798c2.219 0 4.438-.492 6.488-1.476l154.834-74.285c5.202-2.496 8.512-7.755 8.512-13.524l-.003-191.081c0-2.27-.52-4.458-1.458-6.432z" fill="#5e9ff6"/><path d="m417.3 146.916-154.831-74.284c-4.102-1.967-8.875-1.967-12.977 0l-154.831 74.284c-3.122 1.498-5.555 3.996-7.007 6.998l168.328 80.812 168.374-80.717c-1.448-3.044-3.9-5.579-7.056-7.093z" fill="#ecf9fd"/><path d="m417.3 146.916-154.831-74.284c-2.051-.983-4.27-1.476-6.488-1.476v163.569l168.374-80.717c-1.447-3.043-3.899-5.578-7.055-7.092z" fill="#d9f3fc"/></g></svg>

web/index.html

@@ -5,22 +5,30 @@
         [1]
         <meta http-equiv="Cache-Control" content="no-cache" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="stylesheet" type="text/css" href="style.css" /> 
+        <link rel="stylesheet" type="text/css" href="/css/style.css" />
+        <link rel="icon" href="/img/favicon.svg" type="image/x-icon">
         [2]
     </head>
 
     <body>
-        <div id="page-container">
-            <div id="content-wrap">
-                <h1>[3]</h1>
+        <div id="page">
+            <div id="content">
+                <svg id="spinner" width="64" height="64" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <rect class="spinner_LWk7" fill="#0c8aeb" x="1.5" y="1.5" rx="1" width="9" height="9"/>
+                    <rect class="spinner_yOMU" fill="#0c8aeb" x="13.5" y="1.5" rx="1" width="9" height="9"/>
+                    <rect class="spinner_KS4S" fill="#0c8aeb" x="13.5" y="13.5" rx="1" width="9" height="9"/>
+                    <rect class="spinner_zVee" fill="#0c8aeb" x="1.5" y="13.5" rx="1" width="9" height="9"/>
+                </svg>
+                <h1 id="info">[3]</h1>
             </div>
-            <div id="empty-space">
+            <div id="empty">
             </div>
-            <div id="footer">
+            <footer id="footer">
                 [4]<br />
                 [5]
+            </footer>
         </div>
-        </div>
+        <script type="text/javascript" src="/js/script.js"></script>
     </body>
 
 </html>

web/js/script.js

@@ -0,0 +1,130 @@
+var request;
+var interval = 1000;
+
+function getInfo() {
+
+    var url = "/msg.html";
+
+    try {
+
+        if (window.XMLHttpRequest) {
+            request = new XMLHttpRequest();
+        } else {
+            throw "XMLHttpRequest not available!";
+        }
+
+        request.onreadystatechange = processInfo;
+        request.open("GET", url, true);
+        request.send();
+
+    } catch (e) {
+        var err = "Error: " + e.message;
+        console.log(err);
+        setError(err);
+    }
+}
+
+function processInfo() {
+    try {
+        if (request.readyState != 4) {
+            return true;
+        }
+
+        var msg = request.responseText;
+        if (msg == null || msg.length == 0) {
+            setInfo("Booting DSM instance", true);
+            schedule();
+            return false;
+        }
+
+        var notFound = (request.status == 404);
+
+        if (request.status == 200) {
+            if (msg.toLowerCase().indexOf("<html>") !== -1) {
+                notFound = true;
+            } else {
+                if (msg.toLowerCase().indexOf("href=") !== -1) {
+                    var div = document.createElement("div");
+                    div.innerHTML = msg;
+                    var url = div.querySelector("a").href;
+                    setTimeout(() => {
+                        window.location.assign(url);
+                    }, 3000);
+                    setInfo(msg);
+                    return true;
+                } else {
+                    setInfo(msg);
+                    schedule();
+                    return true;
+                }
+            }
+        }
+
+        if (notFound) {
+            setInfo("Connecting to web portal", true);
+            reload();
+            return true;
+        }
+
+        setError("Error: Received statuscode " + request.status);
+        schedule();
+        return false;
+
+    } catch (e) {
+        var err = "Error: " + e.message;
+        console.log(err);
+        setError(err);
+        return false;
+    }
+}
+
+function setInfo(msg, loading, error) {
+
+    try {
+        if (msg == null || msg.length == 0) {
+            return false;
+        }
+
+        var el = document.getElementById("spinner");
+
+        error = !!error;
+        if (!error) {
+            el.style.visibility = 'visible';
+        } else {
+            el.style.visibility = 'hidden';
+        }
+
+        loading = !!loading;
+        if (loading) {
+            msg = "<p class=\"loading\">" + msg + "</p>";
+        }
+
+        el = document.getElementById("info");
+
+        if (el.innerHTML != msg) {
+            el.innerHTML = msg;
+        }
+
+        return true;
+
+    } catch (e) {
+        console.log("Error: " + e.message);
+        return false;
+    }
+}
+
+function setError(text) {
+    return setInfo(text, false, true);
+}
+
+function schedule() {
+    setTimeout(getInfo, interval);
+}
+
+function reload() {
+    setTimeout(() => {
+        document.location.reload();
+    }, 3000);
+}
+
+schedule();

web/style.css

@@ -1,59 +0,0 @@
-body {
-	color: white;
-	background-color: #125bdb;
-	font-family: Verdana, Arial, sans-serif;
-}
-
-#content-wrap {
-	text-align: center;
-	padding: 20px;
-	margin-top: 100px;
-}
-
-#footer {
-	width: 98%;
-	position: fixed;
-	bottom: 0px;
-	height: 40px;
-  text-align: center;
-}
-
-#empty-space {
-	height: 40px;
-	/* Same height as footer */
-}
-
-a,
-a:hover,
-a:active,
-a:visited {
-	color: white;
-}
-
-.loading:after {
-	content: " .";
-	animation: dots 1s steps(5, end) infinite;
-}
-
-@keyframes dots {
-
-	0%,
-	20% {
-		color: rgba(0, 0, 0, 0);
-		text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
-	}
-
-	40% {
-		color: white;
-		text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
-	}
-
-	60% {
-		text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);
-	}
-
-	80%,
-	100% {
-		text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;
-	}
-}