add nice ui

subnet/deployment-generator/src/ui.js

@@ -11,6 +11,7 @@ app.set("views", path.join(__dirname, "views"));
 router.use(express.urlencoded({
   extended: true
 })) 
+app.use(express.static('css'));
 
 router.get("/", (req, res) => {
   res.render("index", {
@@ -63,7 +64,7 @@ OS=mac
   console.log(genOut)
 
   res.render("submit", { title: "Hey", message: "this is submit" });
-  process.exit()
+  // process.exit()
 });
 
 router.post("/confirm", (req, res) => {
@@ -80,24 +81,17 @@ console.log("Running at Port 3000");
 function callExec(command) {
   try {
     const stdout = execSync(command, { timeout: 200000 });
-    // const stdout = execSync(command)
     output = stdout.toString();
-    // console.log(`${stdout}`);
     console.log(output);
     return output;
   } catch (error) {
     if (error.code) {
-      // Spawning child process failed
       if (error.code == "ETIMEDOUT") {
         throw Error("Timed out (200 seconds)");
       } else {
         throw Error(error);
       }
     } else {
-      // Child was spawned but exited with non-zero exit code
-      // Error contains any stdout and stderr from the child
-      // const { stdout, stderr } = error;
-      // console.error({ stdout, stderr });
       throw Error(error);
     }
   }

subnet/deployment-generator/src/views/custom.css

@@ -0,0 +1,147 @@
+.myForm {
+  margin-left: 200px;
+  /* margin-right: 200px; */
+  max-width: 1100px;
+}
+
+.test{
+  background-color: rgb(255, 165, 223);
+}
+
+/* body{
+  background-color: red;
+} */
+
+.content {
+  display: none;
+  background-color: #f0f0f0;
+  margin-right: 100px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+#toggle:checked ~ .content {
+  display: block;
+}
+
+#toggle2:checked ~ .grayedout{
+  background-color: gray
+  disabled
+}
+
+#lite-mode-extra-info{
+  color:red
+}
+
+
+/* hover trick */
+.info-container {
+  position: relative;
+  display: inline-block;
+}
+
+.info-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-color: #007bff;
+  color: white;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 20px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+.info-icon-all-gray{
+  color: #f0f0f0;
+  background-color: #f0f0f0;
+}
+
+.tooltip {
+  visibility: hidden;
+  width: 200px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 10px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+
+.info-icon:hover + .tooltip,
+.info-icon:focus + .tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+
+#information1{
+  display:none;
+}
+#expand1:hover + #information1{
+  display:block;
+}
+
+/* expanding after selection */
+#linuxoption{
+  display:none;
+}
+#os-radio-linux:checked+#linuxoption{
+  display:block;
+}
+
+#customkeys{
+  display:none;
+}
+#customkeys-checkbox:checked+#customkeys{
+  display:block;
+}
+
+#customversion{
+  display:none;
+}
+#customversion-checkbox:checked+#customversion{
+  display:block;
+}
+
+#xdczero{
+  display:none;
+}
+#xdczero-checkbox:checked+#xdczero{
+  display:block;
+}
+
+/* #rm-radio-full:checked ~ #xdczero-upper{
+  display:block;
+}
+#rm-radio-lite:checked ~ #xdczero-upper{
+  display:block;
+} */
+
+#zerobidi{
+  display:none;
+}
+#zm-radio-bi:checked ~ #zerobidi{
+  display:block;
+}
+#zm-radio-one:checked ~ #zerobidi{
+  display:none;
+}