Update style.css

Mohdjey123 · Jan 16, 2025 · d419198 · d419198
1 parent 874c30a
commit d419198
Showing 1 changed file with 98 additions and 19 deletions.
diff --git a/docs/style.css b/docs/style.css
@@ -2,76 +2,148 @@ body {
     margin-bottom: 50px;
     font-family: var(--font-family, "MS Sans Serif"), sans-serif;
 }
+
 #products {
     padding: 20px;
 }
 
 #product-list {
     display: flex;
-    flex-wrap: wrap; 
-    justify-content: center; 
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+}
+
+/* Loading state */
+.loading {
+    text-align: center;
+    padding: 20px;
+    color: #666;
+    width: 100%;
+}
+
+/* Error message */
+.error-message {
+    background-color: #ffebee;
+    color: #c62828;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ef9a9a;
+    text-align: center;
+    width: 100%;
 }
 
 .product-card {
     margin: 10px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    width: 200px; 
-    border: 2px solid #000; 
+    width: 280px;
+    border: 2px solid #000;
+    transition: transform 0.2s ease;
+}
+
+.product-card:hover {
+    transform: translateY(-5px);
 }
 
 .card {
-    padding: 10px; 
+    padding: 15px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .product-card img {
-    max-width: 100%;
-    height: auto;
-    border-bottom: 2px solid #000; 
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-bottom: 2px solid #000;
 }
 
 .card-content {
-    padding: 5px 0; 
+    padding: 10px 0;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.card-content h3 {
+    margin: 0 0 10px 0;
+    font-size: 1.1em;
+}
+
+.card-content p {
+    margin: 5px 0;
+    line-height: 1.4;
 }
 
 .button-container {
     text-align: center;
     margin-top: auto;
+    padding-top: 10px;
 }
 
-
 button {
     padding: 8px 16px;
     cursor: pointer;
     font-size: 14px;
 }
 
+button:focus {
+    outline: 2px solid #000080;
+}
+
+/* Feedback message */
+.feedback-message {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background-color: #c0c0c0;
+    border: 2px solid #808080;
+    padding: 10px 20px;
+    border-radius: 4px;
+    animation: fadeInOut 2s ease-in-out;
+    z-index: 1000;
+}
+
+@keyframes fadeInOut {
+    0% { opacity: 0; transform: translateY(-20px); }
+    20% { opacity: 1; transform: translateY(0); }
+    80% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(-20px); }
+}
+
 /* Taskbar styles */
 .taskbar {
     display: flex;
     align-items: center;
-    background-color: #c0c0c0; 
+    background-color: #c0c0c0;
     height: 40px;
     padding: 0 10px;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
-    border-top: 2px solid #808080; 
+    border-top: 2px solid #808080;
+    z-index: 1000;
 }
 
 .start-menu {
     position: relative;
 }
 
 #start-button {
-    background-color: #d3d3d3; 
+    background-color: #d3d3d3;
     border: 1px solid #808080;
-    padding: 10px ;
+    padding: 10px;
     cursor: pointer;
 }
 
+#start-button:focus {
+    outline: 2px solid #000080;
+}
+
 /* Start Menu Content */
 .start-menu-content {
     display: none;
@@ -92,12 +164,10 @@ button {
     margin: 0;
 }
 
-
 .start-menu-content li {
     padding: 5px 10px;
 }
 
-
 /* Start Menu Hover */
 .start-menu-content li:hover {
     background-color: #000080;
@@ -120,14 +190,23 @@ button {
     font-family: inherit;
     font-size: 14px;
     text-decoration: none;
-    color: white;
+    color: black;
+    display: block;
+    width: 100%;
 }
 
-.start-menu-content a:hover {
-    background-color: #000080;
+.start-menu-content li:hover a {
+    color: white;
 }
+
 /* Show Menu */
 .show {
     display: block;
 }
 
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .product-card {
+        width: calc(100% - 20px);
+    }
+}