From 361badecd23fe63e6f6f4d34e13fa5aedb71a924 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Sun, 28 Jan 2024 03:10:04 +0100
Subject: [PATCH] Make the "ENABLE JAVASCRIPT" message more prominent.

---
 src/index.html  |  8 ++++----
 src/styles.scss | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 5 deletions(-)
diff --git a/src/index.html b/src/index.html
index 42c6ac3..a8dc30f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,12 +11,12 @@
 </head>
 <body>
 <h1>Convert it all</h1>
-<noscript>This webpage lets you convert data and text to and from various formats. But
-  it requires you to <strong>enable Javascript</strong> to do so. So please turn it on in your
-  Browser. You won't regret it!
+<noscript class="noscript">
+  This webpage lets you convert data and text to and from various formats. But it requires you to <strong>enable
+  Javascript</strong> to do so. So please turn it on in your Browser. You won't regret it!
 </noscript>
 <app-root>
-  <div class="apploader">Please hold on, we're starting the turbines ...</div>
+  <div class="app_loader">Please hold on, we're starting the turbines ...</div>
 </app-root>
 </body>
 </html>
diff --git a/src/styles.scss b/src/styles.scss
index 4d8aa03..a24f0f1 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -30,6 +30,17 @@ h1 {
   text-align: center;
 }
 
-.apploader {
+.noscript {
+  border: 0.1em solid red;
+  border-radius: 1em;
+  display: block;
+  margin: 2em;
+  font-size: x-large;
+  padding: 1.5em;
+  text-align: center;
+}
+
+.app_loader {
+  margin: 2em;
   text-align: center;
 }
