From cadea29b4eac81993a1ca78e9d12fcffc92c8862 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Mon, 26 Jul 2021 16:29:22 +0530
Subject: [PATCH] Updated style of gen-param

---
 gen-param.html | 82 +++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 68 insertions(+), 14 deletions(-)
diff --git a/gen-param.html b/gen-param.html
index 069e2bc..b44561f 100644
--- a/gen-param.html
+++ b/gen-param.html
@@ -1,19 +1,70 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
-    <title>Gen Param</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Generate parameters</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            font-family: 'Inter', sans-serif;
+        }
+        body {
+            display: grid;
+            place-content: center;
+            padding: 3rem 1.5rem;
+            text-align: center;
+        }
+        h1{
+            margin-top: 3rem;
+            margin-bottom: 0.5rem;
+        }
+        p{
+            margin-bottom: 3rem;
+        }
+        h3{
+            margin-bottom: 1rem;
+        }
+        strong{
+            display: flex;
+            padding: 0.6rem 0.8rem;
+            border-radius: 0.3rem;
+            background-color: khaki;
+            margin: 1.5rem 0;
+        }
+        a{
+            padding: 0.3rem 0.5rem;
+            text-decoration: none;
+            font-weight: 500;
+            background-color: rgba(0,0,0, 0.1);
+            border-radius: 0.3rem;
+        }
+        .icon{
+            height: 2.6rem;
+            width: 2.6rem;
+            padding: 1rem;
+            border-radius: 50%;
+            margin-bottom: 0.5rem;
+            fill: teal;
+            background-color: rgba(0,0,0, 0.1);
+        }
+    </style>
 </head>
 
 <body>
-
-    <h2>Generate Parameters</h2>
+    <h1>Generate Parameters</h1>
+    <p>This page will automatically generate param.json file</p>
     <div>
-        <h4>This page will automatically generate param.json file</h4>
         <div id="status"></div>
     </div>
     <script>
-        (function(fileName) {
-            var status = document.getElementById("status");
+        (function (fileName) {
+            const status = document.getElementById("status");
             //Generate param
             var param = {
                 screen: {
@@ -49,21 +100,24 @@
                     type: navigator.mimeTypes[i].type,
                     suffixes: navigator.mimeTypes[i].suffixes
                 };
-            
+
             console.log(param);
+            status.innerHTML += `
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 12h3l-4 4-4-4h3V8h2v4zm2-8H5v16h14V8h-4V4zM3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992z"/></svg>
+                <h3>Downloading file...</h3>
+                <br/>If the download does't start automatically,
+            `
             //Download the file
-            status.innerHTML += "<br/>Downloading file...";
-            status.innerHTML += "<br/>If the download doesnot start automatically, click ";
-            let anchor = document.createElement("a");
+            const anchor = document.createElement("a");
             //anchor.style = "display: none";
             anchor.href = window.URL.createObjectURL(new Blob([JSON.stringify(param)], {
                 type: "octet/stream"
             }));
-            anchor.innerHTML = "here";
+            anchor.textContent = "click here";
             anchor.download = fileName;
             status.appendChild(anchor);
-            anchor.click();
-            status.innerHTML += "<br/><b>Note: Save <i>param.json</i> file in SuperNodeStorage directory</b>";
+            // anchor.click();
+            status.innerHTML += `<strong>Note: Save "param.json" file in SuperNodeStorage directory</strong>`;
         })("param.json");
     </script>
 </body>
