Add taskbar

Glamurio · Dec 30, 2023 · 38e73d9 · 38e73d9
1 parent 0fec11b
commit 38e73d9
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 16 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -53,11 +53,51 @@ body {
 #os-text-2 {
     color: orange;
 }
+#task-bar {
+    position: fixed;
+    bottom: 9px;
+    left: 9px;
+    height: 40px;
+    width: calc(100% - 17px);
+    background: lightgray;
+    display: flex;
+    align-items: center;
+    box-shadow: inset 0px -5px 20px -5px rgba(0,0,0,1);
+    border-top: 1px solid darkgray;
+}
+#start-menu {
+    font-size: 32px;
+    display: flex;
+    padding: 0 0.5em 0 0.3em;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    border-right: 1px solid black;
+    cursor: pointer;
+}
+#start-menu:hover {
+    background-color: dodgerblue;
+}
+#start-text-1 {
+    color: black;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: orange;
+}
+#start-text-2 {
+    color: orange;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: black;
+}
+#start-icon {
+    font-size: 24px;
+    margin-top: 1px;
+}
+
+/* Context Menu */
 #context-menu {
     background-color: #d0d0d0;
     position: absolute;
     border: 2px solid #989FA2;
     z-index: 5;
+    cursor: pointer;
 }
 #context-menu ul {
     margin: 0;
@@ -68,6 +108,9 @@ body {
     padding: 0.5em;
     border-bottom: 1px solid black;
 }
+#context-menu li:hover {
+    background-color: dodgerblue;
+}
 #context-menu li > * {
     color: black;
     text-decoration: none;

diff --git a/index.html b/index.html
@@ -25,16 +25,18 @@
         <div class="hide focus" id="context-menu">
             <ul>
                 <li>
-                    <a href="http://www.google.com">Google</a>
-                </li>
-                <li>
-                    <a href="http://localhost:8080/login">Localhost</a>
-                </li>
-
-                <li>
-                    <a href="C:\">C</a>
+                    New Folder
                 </li>
             </ul>
         </div>
     </body>
+    <footer>
+        <div id="task-bar">
+            <div id="start-menu">
+                <span id="start-icon">👺</span>
+                <span id="start-text-1">G</span>
+                <span id="start-text-2">o!</span>
+            </div>
+        </div>
+    </footer>
 </html>
diff --git a/index.js b/index.js
@@ -1,15 +1,15 @@
 $( document ).ready(function() {
 
     /* Context Menu */
-    $('#main-container').on('contextmenu', function(event) {
-        console.log('check')
-        event.preventDefault();
-        $('#context-menu').removeClass('hide')
-        $('#context-menu')[0].style.top = mouseY(event) + 'px';
-        $('#context-menu')[0].style.left = mouseX(event) + 'px';
+    // $('#main-container').on('contextmenu', function(event) {
+    //     console.log('check')
+    //     event.preventDefault();
+    //     $('#context-menu').removeClass('hide')
+    //     $('#context-menu')[0].style.top = mouseY(event) + 'px';
+    //     $('#context-menu')[0].style.left = mouseX(event) + 'px';
 
-        window.event.returnValue = false;
-    });
+    //     window.event.returnValue = false;
+    // });
 
     function mouseX(evt) {
         if (evt.pageX) {