feat: Dynamic page content (#585)

readme.md

@@ -58,7 +58,7 @@ docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-ti
 
     - Start the container and get some coffee.
 
-    - Connect to port 5000 of the container in your web browser.
+    - Connect to [port 5000](http://localhost:5000) of the container in your web browser.
 
     - Wait until DSM is ready, choose an username and password, and you will be taken to the desktop.
 

src/install.sh

@@ -174,8 +174,8 @@ fi
 
 rm -rf "$TMP" && mkdir -p "$TMP"
 
-MSG="Downloading $BASE.pat..."
-info "Install: $MSG" && html "$MSG"
+info "Install: Downloading $BASE.pat..."
+html "Install: Downloading DSM from Synology..."
 
 PAT="/$BASE.pat"
 rm -f "$PAT"

src/network.sh

@@ -254,8 +254,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/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/reset.sh

@@ -29,6 +29,7 @@ echo
 # Helper variables
 
 STORAGE="/storage"
+INFO="/dev/shm/msg.html"
 PAGE="/run/shm/index.html"
 TEMPLATE="/var/www/index.html"
 FOOTER1="$APP for Docker v$(</run/version)"
@@ -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,154 @@
+body {
+	color: white;
+	background-color: #125bdb;
+	font-family: Verdana, Arial, sans-serif;
+}
+
+#content {
+	text-align: center;
+	padding: 20px;
+	margin-top: 50px;
+}
+
+footer {
+	width: 98%;
+	position: fixed;
+	bottom: 0px;
+	height: 40px;
+	text-align: center;
+	color: #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/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]
-            </div>
+            </footer>
         </div>
+        <script type="text/javascript" src="/js/script.js"></script>
     </body>
 
 </html>