fixes

src/index.ts

@@ -1,8 +1,12 @@
+import "./scss/index.scss";
+
 import valueToHTML from "./utils/toJson";
 import {data} from "./utils/jsonData";
 
 document.getElementById("json").innerHTML = valueToHTML(data);
 
+const toggle = document.getElementById('toggle')
+
 let collapsers, $selectedLI;
 
 function init() {
@@ -18,28 +22,15 @@ function init() {
         }
     }
 
-    const $copyPath = document.createElement('div')
-    $copyPath.className = 'copy-path'
-
-    const $toolbox = document.createElement('div')
-    $toolbox.className = 'toolbox'
-
-    const $expand = document.createElement('button')
-    $expand.id = 'expand_all'
-    $expand.textContent = '+'
-
-    const $reduce = document.createElement('button')
-    $reduce.id = 'reduce_all'
-    $reduce.textContent = '-'
-
-    $toolbox.append($expand)
-    $toolbox.append($reduce)
-
-    document.body.append($toolbox)
     document.body.onclick = onMouseClick
 
-    $expand.onclick = onExpand
-    $reduce.onclick = onReduce
+    toggle.addEventListener('change', e => {
+        if (!e.target["checked"]) {
+            onExpand()
+        } else {
+            onReduce()
+        }
+    });
 }
 
 function onToggle(e, id, $collapser) {

src/scss/index.scss

@@ -0,0 +1,226 @@
+body {
+  margin: 0;
+  padding: 1rem;
+  white-space: normal !important;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0 0 0 26px;
+}
+
+li {
+  position: relative;
+}
+
+.hoverable {
+  transition: background-color .2s ease-out 0s;
+  -webkit-transition: background-color .2s ease-out 0s;
+  display: inline-block;
+}
+
+.hovered {
+  transition-delay: .2s;
+  -webkit-transition-delay: .2s;
+}
+
+.selected {
+  outline: dotted 1px;
+}
+
+.collapsed > .collapsible {
+  display: none;
+}
+
+.ellipsis {
+  display: none;
+}
+
+.collapsed > .ellipsis {
+  display: inherit;
+}
+
+.collapser {
+  position: absolute;
+  top: 1px;
+  left: -1.5em;
+  cursor: default;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+body {
+  white-space: pre;
+  font-family: monospace;
+}
+
+.property {
+  font-weight: bold;
+  color: #FF5237;
+  text-transform: capitalize;
+}
+
+.type-null {
+  color: gray;
+}
+
+.type-boolean {
+  color: firebrick;
+}
+
+.type-number {
+  color: green;
+}
+
+.type-string {
+  color: #5B36F7;
+}
+
+.callback-function {
+  color: gray;
+}
+
+.collapser:after {
+  font-size: 13px;
+  content: "-";
+}
+
+.collapsed > .collapser:after {
+  font-size: 13px;
+  content: "+";
+}
+
+.ellipsis:after {
+  content: attr(data-value);
+}
+
+.collapsible {
+  margin-left: 2em;
+}
+
+.hoverable {
+  padding: 1px 2px;
+  border-radius: 2px;
+  width: 100%;
+}
+
+.hovered {
+  background-color: rgba(235, 238, 249, 1);
+}
+
+.collapser {
+  padding-right: 6px;
+  padding-left: 6px;
+}
+
+.tgl {
+  display: none;
+
+  &,
+  &:after,
+  &:before,
+  & *,
+  & *:after,
+  & *:before,
+  & + .tgl-btn {
+    box-sizing: border-box;
+
+    &::selection {
+      background: none;
+    }
+  }
+
+  + .tgl-btn {
+    outline: 0;
+    display: block;
+    width: 8em;
+    height: 2em;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+
+    &:after,
+    &:before {
+      position: relative;
+      display: block;
+      content: "";
+      width: 50%;
+      height: 100%;
+    }
+
+    &:after {
+      left: 0;
+    }
+
+    &:before {
+      display: none;
+    }
+  }
+
+  &:checked + .tgl-btn:after {
+    left: 50%;
+  }
+}
+
+.tgl-flip {
+  + .tgl-btn {
+    padding: 2px;
+    transition: all .2s ease;
+    font-family: sans-serif;
+    perspective: 100px;
+
+    &:after,
+    &:before {
+      display: inline-block;
+      transition: all .4s ease;
+      width: 100%;
+      text-align: center;
+      position: absolute;
+      line-height: 2em;
+      font-weight: bold;
+      color: #fff;
+      top: 0;
+      left: 0;
+      backface-visibility: hidden;
+      border-radius: 4px;
+    }
+
+    &:after {
+      content: attr(data-tg-on);
+      background: #02C66F;
+      transform: rotateY(-180deg);
+    }
+
+    &:before {
+      background: #FF3A19;
+      content: attr(data-tg-off);
+    }
+
+    &:active:before {
+      transform: rotateY(-20deg);
+    }
+  }
+
+  &:checked + .tgl-btn {
+    &:before {
+      transform: rotateY(180deg);
+    }
+
+    &:after {
+      transform: rotateY(0);
+      left: 0;
+      background: #7FC6A6;
+    }
+
+    &:active:after {
+      transform: rotateY(20deg);
+    }
+  }
+}
+
+.tool {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+}

src/sections/guests.ts

@@ -1,17 +1,17 @@
-function makeCard(name = "", title = "", description = "", image = "/img/guests/woman.png") {
+function makeCard({name , title = "" , organization = ""}) {
     return `
     <div class="shadow-xl ">
         <div class="w-full h-20 bg-[#FF5237]  ">
 
         </div>
         <div class="flex flex-col items-center justify-center -mt-8 pb-12 lg:pb-12">
             <div class="h-16 w-16 rounded-full border-2 border-white  bg-gray-300">
-                <img class="rounded-full " src="${image}">
+                <img class="rounded-full " src="/img/guests/woman.png" alt="dp">
             </div>
             <div class="flex flex-col items-center justify-center ">
                 <span class="font-semibold " >${name}</span>
                 <span class="text-sm text-[#666666]">${title}</span>
-                <span class="text-xs text-[#666666]">${description}</span>
+                <span class="text-xs text-[#666666]">${organization}</span>
             </div>
         </div>
     </div>
@@ -21,16 +21,14 @@ function makeCard(name = "", title = "", description = "", image = "/img/guests/
 const cardsContainer = document.getElementById("guestCards");
 
 export const Guests = [
-    ['Athira T J ', 'Data Associate', 'Reap Benefit', '/img/guests/athira.jpeg'],
-    ['Akhila ', 'Co-Founder', 'Tech4Good Community', '/img/guests/akhila.jpeg'],
-    ['Vidya ', 'Ex Data Scientist', 'Tech4Good Community', '/img/guests/vidya.jpeg'],
-    ['K J'],
-    ['Riya'],
-    ['Ananya'],
-    ['Sumeeti'],
-    ['Laya'],
-    ['G G'],
+        {name: 'Athira T J ', title: 'Data Associate', organization: 'Reap Benefit'},
+        {name: 'Akhila ', title: 'Co-Founder',  organization: 'Tech4Good Community'},
+        {name: 'Vidya ', title: 'Ex Data Scientist', organization: 'Tech4Good Community'},
+        {name: 'Riya'},
+        {name: 'Ananya'},
+        {name: 'Sumeeti'},
+        {name: 'Laya'},
 ];
 
 if (cardsContainer)
-    cardsContainer.innerHTML = Guests.map((row) => makeCard(...row)).join("\n");
+    cardsContainer.innerHTML = Guests.map((row) => makeCard(row)).join("\n");