updated gui

sk66641 · May 25, 2024 · 8cd9056 · 8cd9056
1 parent 40e850b
commit 8cd9056
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -36,8 +36,15 @@ <h1>Random Disco Light Simulator</h1>
                 <button id="reset" onclick="window.location.reload()">Reset</button>
             </div>
             <div id="error"></div>
+            <div style="display: flex; justify-content: center;">
+                <a href="https://github.com/sk66641/Random-Disco-Light-Simulator">
+                    <img src="github.jpeg" alt="github">
+                </a>
+            </div>
+
         </div>
     </div>
+
     <script src="script.js"></script>
 
 </body>

diff --git a/linkedin.png b/linkedin.png
diff --git a/script.js b/script.js
@@ -23,25 +23,25 @@ function run() {
 
     if (n < 0) {
         document.getElementById("error").innerText = "Please enter a positive integer in 'Number of Colors'!"
-        document.getElementById("error").style.color = "orange"
+        document.getElementById("error").style.color = "red"
     }
 
     else if (Number.isInteger(n) == false || n == "") {
         if (n == "") {
 
             document.getElementById("error").innerText = "Please enter 'Number of Colors'!"
-            document.getElementById("error").style.color = "orange"
+            document.getElementById("error").style.color = "red"
         }
         else if (Number.isInteger(n) == false) {
             document.getElementById("error").innerText = "Please enter a positive integer in 'Number of Colors'!"
-            document.getElementById("error").style.color = "orange"
+            document.getElementById("error").style.color = "red"
         }
 
     }
 
     else if (view == "select") {
         document.getElementById("error").innerText = "Please select 'View'!"
-        document.getElementById("error").style.color = "orange"
+        document.getElementById("error").style.color = "red"
     }
 
     else {

diff --git a/style.css b/style.css
@@ -20,10 +20,10 @@ h1 {
 }
 
 .box {
-    background: linear-gradient(magenta, darkorchid);
+    background: linear-gradient(magenta, gold);
     border-radius: 20px;
     padding: 0px 10px 10px 10px;
-    box-shadow: 0px 0px 20px 10px black;
+    box-shadow: 0px 0px 15px 10px black;
 }
 
 #view {
@@ -89,71 +89,84 @@ img {
     cursor: pointer;
     box-shadow: 0px 0px 5px 5px black;
     border-radius: 5px;
+    margin-top: 5px;
+    height: 50px;
+    width: 50px;
 }
 
 img:hover {
     transform: scale(1.1);
 }
 
-@media only screen and (max-width: 1065px) {
+@media only screen and (max-width: 1048px) {
     * {
-        font-size: 30px;
+        font-size: 35px;
     }
 
     .button {
         margin-top: 30px;
         margin-bottom: 12px;
     }
 
-    .img1 {
+    img {
         width: 45px;
         height: 45px;
     }
+}
 
-    .img2 {
-        width: 45px;
-        height: 45px;
+@media only screen and (max-width: 924px) {
+    * {
+        font-size: 30px;
     }
 }
 
-@media only screen and (max-width: 815px) {
+@media only screen and (max-width: 800px) {
     * {
-        font-size: 20px;
+        font-size: 25px;
     }
 
     .button {
         margin-top: 20px;
         margin-bottom: 8px;
     }
 
-    .img1 {
+    img {
         width: 35px;
         height: 35px;
+        box-shadow: 0px 0px 3px 3px black;
     }
 
-    .img2 {
-        width: 35px;
-        height: 35px;
+    .box {
+        padding: 0px 5px 5px 5px;
+        box-shadow: 0px 0px 10px 5px black;
     }
 }
 
-@media only screen and (max-width: 564px) {
+@media only screen and (max-width: 676px) {
     * {
-        font-size: 10px;
+        font-size: 20px;
+    }
+}
+
+@media only screen and (max-width: 552px) {
+    * {
+        font-size: 15px;
     }
 
     .button {
         margin-top: 10px;
         margin-bottom: 4px;
     }
 
-    .img1 {
+    img {
         width: 25px;
         height: 25px;
+
     }
+}
 
-    .img2 {
-        width: 20px;
-        height: 20px;
+@media only screen and (max-width: 428px) {
+    * {
+        font-size: 10px;
     }
 }