college changes

thoughtlessnerd · May 6, 2024 · 8fa4147 · 8fa4147
1 parent daf3efe
commit 8fa4147
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 174 deletions.
diff --git a/css/dropdown.css b/css/dropdown.css
@@ -1,89 +1,110 @@
-*:focus
-{
-    outline: none;
+/* Define color variables */
+:root {
+  --background-color: rgba(35, 35, 35, 0.95);
+  --box-shadow-color: #111;
+  --text-color: #c0c0c0;
+  --hover-text-color: #ddd;
+  --hover-background-color: #5379b4;
+  --border-color: #444;
 }
 
+/* Remove outline on focus */
+*:focus {
+  outline: none;
+}
+
+/* Body styles */
 body {
-    font: normal 10px verdana;
+  font: normal 10px verdana;
 }
 
+/* Dropdown menu styles */
 ul#dropdown {
-    display: none;
-    position: absolute;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    width: 200px; /* Width of Menu Items */
-    border-radius: 5px;
-    padding: 7px 0px;
-    background: rgba(35, 35, 35, .95);
-    box-shadow: 0px 0px 5px #111;
+  display: none;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  width: 200px; /* Width of Menu Items */
+  border-radius: 5px;
+  padding: 7px 0px;
+  background: var(--background-color);
+  box-shadow: 0px 0px 5px var(--box-shadow-color);
+  z-index: 10;
 }
 
 ul#dropdown li {
-    position: relative;
-    background: transparent;
+  position: relative;
+  background: transparent;
 }
 
 li ul#dropdown {
-    position: absolute;
-    left: 199px; /* Set 1px less than menu width */
-    top: -6px;
-    display: none;
+  position: absolute;
+  left: 199px; /* Set 1px less than menu width */
+  top: -6px;
+  display: none;
 }
 
-/* li ul li
-{
-    padding: 5px;
-} */
-
-li ul#dropdown li a
-{
-    font-size: 10px;
+li ul#dropdown li a {
+  font-size: 10px;
 }
 
-ul#dropdown li span
-{
-    display: block;
-    padding: 3px 10px 10px 10px;
-    color: #888;
-    font-size: 11px;
-    cursor: default;
+ul#dropdown li span {
+  display: block;
+  padding: 3px 10px 10px 10px;
+  color: #888;
+  font-size: 11px;
+  cursor: default;
 }
 
-ul#dropdown li ul#dropdown li span
-{
-    padding: 3px 10px 3px 10px;
+ul#dropdown li ul#dropdown li span {
+  padding: 3px 10px 3px 10px;
 }
 
-ul#dropdown li a
-{
-    display: block;
-    text-decoration: none;
-    background: transparent; /* IE6 Bug */
-    width: 200px;
-    background: transparent;
-    color: #C0C0C0;
-    padding: 5px 35px;
-    cursor: default;
+ul#dropdown li a {
+  display: block;
+  text-decoration: none;
+  background: transparent; /* IE6 Bug */
+  width: 200px;
+  background: transparent;
+  color: var(--text-color);
+  padding: 5px 35px;
+  cursor: default;
 }
 
-ul#dropdown li#search
-{
-    border: none;
-    border-top: 1px solid #444;
-    border-bottom: 1px solid #444;
-    padding: 5px 0px;
+ul#dropdown li#search {
+  border: none;
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  padding: 5px 0px;
 }
 
 /* Fix IE. Hide from IE Mac \*/
-* html ul#dropdown li { float: left; height: 1%; }
-* html ul#dropdown li a { height: 1%; }
+* html ul#dropdown li {
+  float: left;
+  height: 1%;
+}
+* html ul#dropdown li a {
+  height: 1%;
+}
 /* End */
 
-ul#dropdown li a:hover { color: #ddd; background: #5379B4; } /* Hover Styles */
+ul#dropdown li a:hover {
+  color: var(--hover-text-color);
+  background: var(--hover-background-color);
+} /* Hover Styles */
 
-li ul#dropdown li a { padding: 5px 30px; } /* Sub Menu Styles */
+li ul#dropdown li a {
+  padding: 5px 30px;
+} /* Sub Menu Styles */
 
-li:hover ul#dropdown, li.over-left ul#dropdown { display: block; left: -201px} /* The magic */
-li:hover ul#dropdown, li.over-right ul#dropdown { display: block; left: 199px} /* The magic */
+li:hover ul#dropdown,
+li.over-left ul#dropdown {
+  display: block;
+  left: -201px;
+} /* The magic */
+li:hover ul#dropdown,
+li.over-right ul#dropdown {
+  display: block;
+  left: 199px;
+} /* The magic */
diff --git a/css/nav.css b/css/nav.css
@@ -1,66 +1,62 @@
-ul#nav
-{
-    position: absolute;
-    top: 0;
-    width: 100%;
-    background-color: #333;
-    box-shadow: 0px 2px 10px #111;
-    padding: 5px;
+ul#nav {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background-color: #333;
+  box-shadow: 0px 2px 10px #111;
+  padding: 0.5rem;
 }
 
-ul#nav li
-{
-    display: inline-block;
-    margin: 0px 5px;
+ul#nav li {
+  display: inline-block;
+  margin: 0px 0.5rem;
 }
 
-ul#nav li a
-{
-    display: inline-block;
-    padding: 7px;
-    font-size: 12px;
-    background-color: #666;
-    color: #ddd;
-    border-radius: 10px;
+ul#nav li a {
+  display: inline-block;
+  padding: 0.5rem;
+  font-size: 12px;
+  background-color: #666;
+  color: #ddd;
+  border-radius: 10px;
 }
 
-ul#nav li a:hover
-{
-    background: #5379B4;
+ul#nav li a:hover {
+  background: #5379b4;
 }
 
-ul#fileDropdown
-{
-    display: none;
-    position: absolute;
-    top: 40px;
-    left: 0;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    width: 200px; /* Width of Menu Items */
-    border-radius: 5px;
-    padding: 7px 0px;
-    background: rgba(35, 35, 35, .95);
-    box-shadow: 0px 0px 10px #111;
+ul#fileDropdown {
+  display: none;
+  position: absolute;
+  top: 40px;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  width: 200px; /* Width of Menu Items */
+  border-radius: 5px;
+  padding: 7px 0px;
+  background: rgba(35, 35, 35, 0.95);
+  box-shadow: 0px 0px 10px #111;
 }
 
-ul#fileDropdown li
-{
-    position: relative;
-    background: transparent;
+ul#fileDropdown li {
+  position: relative;
+  background: transparent;
 }
 
-ul#fileDropdown li a
-{
-    display: block;
-    text-decoration: none;
-    background: transparent; /* IE6 Bug */
-    width: 100%;
-    background: transparent;
-    color: #C0C0C0;
-    padding: 5px 35px;
-    cursor: default;
+ul#fileDropdown li a {
+  display: block;
+  text-decoration: none;
+  background: transparent; /* IE6 Bug */
+  width: 100%;
+  background: transparent;
+  color: #c0c0c0;
+  padding: 5px 35px;
+  cursor: default;
 }
 
-ul#fileDropdown li a:hover { color: #ddd; background: #5379B4; }
+ul#fileDropdown li a:hover {
+  color: #ddd;
+  background: #5379b4;
+}
diff --git a/images/graphw.jpg b/images/graphw.jpg
diff --git a/index.html b/index.html
@@ -27,9 +27,20 @@
         align-items: center;
         justify-content: center;
       }
+
+      div.overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0);
+        /* display: none; */
+      }
     </style>
   </head>
   <body>
+    <div class="overlay"></div>
     <ul id="searchBox">
       <li>
         <input type="text" id="SearchText" placeholder="Search..." />
@@ -88,9 +99,10 @@
       </li>
     </ul>
 
-    <ul id="nav">
+    <ul id="nav" style="z-index: 10">
       <li><a onclick="showFileDropdown()">File</a></li>
       <li><a>Edit</a></li>
+      <li><a onclick="showAddMenu()">Add</a></li>
     </ul>
 
     <ul id="fileDropdown">
@@ -99,7 +111,7 @@
       <li><a>Save</a></li>
       <li><a>Exit</a></li>
     </ul>
-    <canvas id="graph"></canvas>
+    <canvas id="graph" style="z-index: 1"></canvas>
     <input
       type="range"
       id="scale"
@@ -110,9 +122,9 @@
     />
   </body>
   <script defer>
-    alert(
-      "Quick instructions to use:\nshift + A - add nodes\nx - delete nodes\ng - move nodes"
-    );
+    // alert(
+    //   "Quick instructions to use:\nshift + A - add nodes\nx - delete nodes\ng - move nodes"
+    // );
   </script>
   <script defer src="./scripts/logicGatesClasses.js"></script>
   <script defer src="./scripts/logicGatesSetup.js"></script>