Skip to content

Commit

Permalink
Added Taskbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mohdjey123
Mohdjey123 committed Sep 25, 2024
1 parent 7644c09 commit f874924
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 78 deletions.
70 changes: 59 additions & 11 deletions docs/cart.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
body {
margin-bottom: 50px;
}
/* Cart styles */
#cart {
padding: 20px;
Expand All @@ -6,14 +9,14 @@
#cart-list {
display: flex;
flex-direction: column;
align-items: center;
align-items: left;
}

/* Style for the cart items */
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
align-items:center;
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
Expand Down Expand Up @@ -49,18 +52,63 @@
font-size: 14px;
}

#checkout-button:hover, #continue-shopping-button:hover {
background-color: #000;
color: #fff;
/* Taskbar styles */
.taskbar {
display: flex;
align-items: center;
background-color: #c0c0c0; /* Light gray color */
height: 40px;
padding: 0 10px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-top: 2px solid #808080; /* Darker gray */
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
}

.start-menu {
position: relative;
}

#start-button {
background-color: #d3d3d3; /* Light gray */
border: 1px solid #808080;
padding: 5px 10px;
cursor: pointer;
}

#window {
.start-menu-content {
display: none; /* Hidden by default */
position: absolute;
left: 20px;
top: 40px;
width: 200px;
bottom: 40px; /* Position above the taskbar */
left: 0;
background-color: #c0c0c0;
border: 1px solid #808080;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
z-index: 1000;
}

.start-menu-content ul {
list-style: none;
padding: 5px 0;
margin: 0;
}

.start-menu-content li {
padding: 5px 10px;
}

.start-menu-content li:hover {
background-color: #a0a0a0; /* Darker gray on hover */
}

.taskbar-items {
margin-left: 20px; /* Space between start menu and taskbar items */
color: black;
}

.title-bar-text {
margin-left: 250px;
/* Show start menu on button click */
.show {
display: block; /* Show when toggled */
}
46 changes: 18 additions & 28 deletions docs/cart.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MoCart - Cart</title>
<link rel="stylesheet" href="https://unpkg.com/98.css">
<link rel="stylesheet" href="cart.css"> <!-- Your custom styles if needed -->
<link rel="stylesheet" href="cart.css">
</head>

<body>

<header class="window">
<div class="title-bar">
<div class="title-bar-text">MoCart - Shopping Cart</div>
Expand All @@ -22,32 +20,23 @@
</div>
</header>

<!-- Menu section with tree view -->
<section class="window" id="window">
<ul class="tree-view">
<li>
<span class="caret">Home</span>
</li>
<li>
<span class="caret">Products</span>
<ul class="nested">
<li><a href="index.html">View All Products</a></li>
</ul>
</li>
<li>
<span class="caret">Cart</span>
<ul class="nested">
<li><a href="cart.html">View Cart</a></li>
</ul>
</li>
<li>
<span class="caret">Contact</span>
<ul class="nested">
<li><a href="#contact">Contact Us</a></li>
<!-- Windows 98 Taskbar -->
<div class="taskbar">
<div class="start-menu">
<button id="start-button">Start</button>
<div class="start-menu-content">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Products</a></li>
<li><a href="cart.html">Cart</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</li>
</ul>
</section>
</div>
</div>
<div class="taskbar-items">
<span>MoCart</span>
</div>
</div>

<section class="window" id="cart">
<h2 class="title-bar-text">Your Cart</h2>
Expand All @@ -68,6 +57,7 @@ <h2 class="title-bar-text">Your Cart</h2>
</section>

<script src="script.js"></script>

</body>

</html>
41 changes: 16 additions & 25 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,32 +21,23 @@
</div>
</header>

<!-- Menu section with tree view -->
<section class="window" id="window">
<ul class="tree-view">
<li>
<span class="caret">Home</span>
</li>
<li>
<span class="caret">Products</span>
<ul class="nested">
<li><a href="index.html">View All Products</a></li>
<!-- Windows 98 Taskbar -->
<div class="taskbar">
<div class="start-menu">
<button id="start-button">Start</button>
<div class="start-menu-content">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Products</a></li>
<li><a href="cart.html">Cart</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</li>
<li>
<span class="caret">Cart</span>
<ul class="nested">
<li><a href="cart.html">View Cart</a></li>
</ul>
</li>
<li>
<span class="caret">Contact</span>
<ul class="nested">
<li><a href="#contact">Contact Us</a></li>
</ul>
</li>
</ul>
</section>
</div>
</div>
<div class="taskbar-items">
<span>MoCart</span>
</div>
</div>

<section id="products" class="window">
<h2 class="title-bar-text">Our Products</h2>
Expand Down
14 changes: 14 additions & 0 deletions docs/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,20 @@ if (continueShoppingButton) {
}


document.getElementById('start-button').addEventListener('click', function() {
const menu = document.querySelector('.start-menu-content');
menu.classList.toggle('show'); // Toggle visibility
});

// Close the start menu if clicking outside of it
document.addEventListener('click', function(event) {
const menu = document.querySelector('.start-menu-content');
if (!menu.contains(event.target) && event.target.id !== 'start-button') {
menu.classList.remove('show');
}
});


document.addEventListener('DOMContentLoaded', () => {
loadProducts();
});
74 changes: 60 additions & 14 deletions docs/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
body {
background-color: #c0c0c0;
font-family: 'Tahoma', sans-serif;
display: flex;
flex-direction: column;
margin-bottom: 50px;
}

#products {
padding: 20px;
}
Expand Down Expand Up @@ -50,21 +46,71 @@ button {
font-size: 14px;
}

button:hover {
background-color: #000;
color: #fff;







/* Taskbar styles */
.taskbar {
display: flex;
align-items: center;
background-color: #c0c0c0; /* Light gray color */
height: 40px;
padding: 0 10px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-top: 2px solid #808080; /* Darker gray */
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
}

.start-menu {
position: relative;
}

#start-button {
background-color: #d3d3d3; /* Light gray */
border: 1px solid #808080;
padding: 5px 10px;
cursor: pointer;
}

#window {
.start-menu-content {
display: none; /* Hidden by default */
position: absolute;
left: 20px;
top: 40px;
width: 200px;
bottom: 40px; /* Position above the taskbar */
left: 0;
background-color: #c0c0c0;
border: 1px solid #808080;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
z-index: 1000;
}

.title-bar-text {
margin-left: 250px; /* Move the text 60px to the right */
.start-menu-content ul {
list-style: none;
padding: 5px 0;
margin: 0;
}

.start-menu-content li {
padding: 5px 10px;
}

.start-menu-content li:hover {
background-color: #a0a0a0; /* Darker gray on hover */
}

.taskbar-items {
margin-left: 20px; /* Space between start menu and taskbar items */
color: black;
}

/* Show start menu on button click */
.show {
display: block; /* Show when toggled */
}

0 comments on commit f874924

Please sign in to comment.