https://virtual-labs.github.io/virtual-labs/exp-non-enzymatic-brownin…

…g-iitk click on the link to test your code.

README.md

@@ -0,0 +1,7 @@
+This folder has 
+### Aim
+### Theory
+### Procedure 
+### Pre Test
+### Post Test
+### References

aim.md

@@ -0,0 +1 @@
+This experiment aims to determine Non-enzymatic browning reactions which are initiated during food processes due to interaction of reducing sugars and amino acids under certain conditions, which may be desirable or undesirable. Its determination is important to optimize the processing conditions and in order to get desirable product. 

assets/css/common-styles-responsive.css

@@ -0,0 +1,97 @@
+.slidecontainer {
+    text-align: center;
+}
+
+.slider {
+    width: 10%;
+}
+
+.text-box {
+    padding: 7px 20px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    width: 14%; 
+}
+
+.legend { list-style: none; }
+.legend li { padding-bottom : 1.5vw; width: 20vw; }
+.legend span { border: 0.1vw solid black; float: left; border-radius: 50%;}
+.legend .grey { background-color: grey; }
+.legend .green { background-color: #a4c652; }
+.legend .black { background-color: black; }
+
+.button-input {
+    border-radius: 50vw;
+    background-color: #288ec8;
+    border: none;
+    color: white;
+    padding: 1%;
+    margin-left: 1%;
+    margin-right: 1%;
+    padding-bottom: 1%;
+    padding-top: 1%;
+    padding-left: 2%;
+    padding-right: 2%;
+}
+
+.button-input:hover {
+    background-color:gray;
+    cursor:pointer;
+}
+
+.comment-box {
+    position: relative;
+    padding: 1vw;
+    width: 30vw;
+    text-align: center;
+}
+
+.instruction-box {
+    position: relative;
+    width: 100%;
+    transition: width 0.2s ease-out;
+    border: 0.1vw solid grey;
+    z-index : 10;
+}
+
+.collapsible {
+    background-color: Transparent;
+    color: "grey";
+    cursor: pointer;
+    width: 100%;
+    border: none;
+    text-align: center;
+    outline: none;
+    font-weight: bold;
+    padding-top: 1%;
+    padding-bottom: 1%;
+}
+
+.collapsible::-moz-focus-inner {
+    border: 0;
+}
+
+.active, .collapsible:hover {
+    background-color: "white";
+}
+
+/*The unicode \25BE is for ▾ (Dropdown arrow) */
+.collapsible:after {
+    content: "\25BE";
+    color: "grey";
+    font-weight: bold;
+    float: right;
+    margin-left: 5px;
+}
+
+.active:after {
+    content: "\25B4";
+}
+
+.content {
+    padding: 0 1.8vw;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    background-color: "white";
+}

assets/css/common-styles.css

@@ -0,0 +1,104 @@
+.slidecontainer {
+    text-align: center;
+}
+
+.slider {
+    width: 10%;
+}
+
+.text-box {
+    padding: 7px 20px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    width: 14%; 
+}
+
+.legend{
+    font-size: 1.4vw;
+}
+.legend { list-style: none; }
+.legend li { padding-bottom : 1.5vw; width: 20vw; }
+.legend span { border: 0.1vw solid black; float: left; width: 2vw; height: 2vw; margin-right : 0.5vw; border-radius: 50%;}
+.legend .grey { background-color: grey; }
+.legend .green { background-color: #a4c652; }
+.legend .black { background-color: black; }
+
+.button-input {
+    border-radius: 50vw;
+    background-color: #288ec8;
+    border: none;
+    color: white;
+    padding: 1%;
+    font-size: 1.3vw;
+    margin-left: 1%;
+    margin-right: 1%;
+    padding-bottom: 1%;
+    padding-top: 1%;
+    padding-left: 2%;
+    padding-right: 2%;
+}
+
+.button-input:hover {
+    background-color:gray;
+    cursor:pointer;
+}
+
+.comment-box {
+    position: relative;
+    padding: 1vw;
+    width: 30vw;
+    font-size: 1.5vw;
+    text-align: center;
+}
+
+.instruction-box {
+    position: relative;
+    width: 100%;
+    transition: width 0.2s ease-out;
+    border: 0.1vw solid grey;
+    font-size: 1.5vw;
+    z-index : 10;
+}
+
+.collapsible {
+    background-color: Transparent;
+    color: "grey";
+    cursor: pointer;
+    width: 100%;
+    border: none;
+    text-align: center;
+    outline: none;
+    font-size: 1.5vw;
+    font-weight: bold;
+    padding-top: 1%;
+    padding-bottom: 1%;
+}
+
+.collapsible::-moz-focus-inner {
+    border: 0;
+}
+
+.active, .collapsible:hover {
+    background-color: "white";
+}
+
+.collapsible:after {
+    content: '\25BE';
+    color: "grey";
+    font-weight: bold;
+    float: right;
+    margin-left: 5px;
+}
+
+.active:after {
+    content: "\25B4";
+}
+
+.content {
+    padding: 0 1.8vw;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    background-color: "white";
+}
+

assets/css/toast.css

@@ -0,0 +1,16 @@
+/* assets/css/toast.css */
+.custom-toast-popup {
+    border-radius: 10px; /* Rounded corners */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Custom shadow */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed; /* Fixed positioning */
+    top: 50%; /* Center vertically */
+    left: 50%; /* Center horizontally */
+    transform: translate(-50%, -50%); /* Adjust for exact centering */
+    z-index: 1000; /* Ensure it appears above other elements */
+    padding: 10px;
+    color: #fff;
+    font-size: 1rem;
+  }