Updated style of gen-param

This commit is contained in:
sairaj mote 2021-07-26 16:29:22 +05:30
parent 732dcfce18
commit cadea29b4e

View File

@ -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>