From 00c0250617b2692a213e9b319c5ac87d83c61421 Mon Sep 17 00:00:00 2001
From: krzysztof <krzysztof@kw-technix.pl>
Date: Thu, 27 Aug 2026 07:28:38 +0000
Subject: [PATCH] Update home.html

---
 home.html | 189 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 182 insertions(+), 7 deletions(-)
diff --git a/home.html b/home.html
index 9feda6d..ee5fb0a 100644
--- a/home.html
+++ b/home.html
@@ -1,10 +1,20 @@
 <html>
     <head>
+        <script src="https://kit.fontawesome.com/cb9d270ae6.js" crossorigin="anonymous"></script>
         <style>
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+:root {
+    /* colors */
+    --top: #f6f8fa;
+    --hover: #f0f1f2;
+    --border: #d1d9e0;
+    --dim: #5b6067;
+    --active-border: #f05133;
+}
 body {
     display: grid;
     grid-template-columns: 1fr 200px;
-    grid-template-rows: 64px 128px 1fr 24px;
+    grid-template-rows: 48px 100px 1fr 24px;
     grid-template-areas: "header header"
                         "nav nav"
                         "main aside"
@@ -12,17 +22,29 @@ body {
     height: 100vh;
     width: 100vw;
     padding: 0;
+    margin: 0;
+    font-family: 'Nunito';
 }
 header {
     grid-area: header;
-    background-color: black;
-    color: white;
+    background-color: var(--top);
+    color: black;
+    border-bottom: 1px solid var(--border);
+    padding: 0 8px;
+    font-size: 12px;
 }
 nav {
     grid-area: nav;
-    background-color: whitesmoke;
+    background-color: white;
     color: black;
-    border-bottom: 1px solid lightgray;
+    border-bottom: 1px solid var(--border);
+    position: relative;
+}
+nav > table {
+    width: 100%;
+}
+nav > table td {
+    width: 50%;
 }
 main {
     grid-area: main;
@@ -39,14 +61,167 @@ footer {
     background-color: white;
     color: black;
 }
+
+ul.pathlist {
+    list-style: none;
+    padding: 8px;
+    margin: 0;
+    font-size: 20px;
+}
+ul.pathlist li {
+    display: inline-block;
+}
+ul.pathlist li:not(li:has(i)):not(li:last-child)::after {
+    content: '/';
+    padding: 0 8px;
+}
+ul.pathlist li:has(i) {
+    padding: 0 8px 0 4px;
+}
+ul a, menu a {
+    color: inherit;
+    text-decoration: none;
+}
+ul.pathlist a {
+    padding: 4px;
+    border-radius: 4px;
+    background-color: transparent;
+}
+ul.pathlist a:hover {
+    background-color: var(--hover);
+}
+nav menu {
+    list-style: none;
+    padding: 0 0 0 16px;;
+    margin: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+nav menu li {
+    display: inline-block;
+    font-size: 16px;
+    padding: 8px;
+    margin: 0 4px 0 0;
+}
+nav menu li.active {
+    font-weight: 600;
+    border-bottom: 2px solid var(--active-border);
+}
+nav menu li i {
+    padding-right: 4px;
+}
+header menu {
+    list-style: none;
+    margin: 0;
+    padding: 8px;
+    height: 32px;
+    line-height: 32px;
+}
+td:has(ul.toollist) {
+    text-align: right;
+    padding-right: 8px;
+}
+ul.toollist {
+    margin: 0;
+    padding: 0;
+}
+ul.toollist li {
+    display: inline-block;
+    margin: 0 4px 0 0;
+    background-color: var(--top);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    color: var(--dim);
+    overflow: hidden;
+}
+ul.toollist li a {
+    padding: 0 6px;
+    font-size: 12px;
+    height: 24px;
+    line-height: 24px;
+    display: inline-block;
+}
+ul.toollist li a i {
+    line-height: 24px;
+}
         </style>
     </head>
 <body>
     <header>
-h
+        <menu>
+            <li>
+                <a href="#">Explore</a>
+            </li>
+        </menu>
     </header>
     <nav>
-n
+        <table>
+            <tr>
+                <td>
+                    <ul class="pathlist">
+                        <li>
+                            <i class="fa-solid fa-cube"></i>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <strong>Krzysztof</strong>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <span>new-proj</span>
+                            </a>
+                        </li>
+                    </ul>
+                </td>
+                <td>
+                    <ul class="toollist">
+                        <li>
+                            <a href="#share">
+                                <i class="fa-solid fa-share"></i>
+                            </a>
+                        </li>
+                    </ul>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="1">
+                    <menu>
+                        <li class="active">
+                            <a href="#">
+                                <i class="fa-regular fa-folder-open"></i>
+                                <span>Projekt</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="fa-regular fa-clock"></i>
+                                <span>Historia</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="fa-regular fa-circle-dot"></i>
+                                <span>Zastrzeżenia</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="fa-regular fa-file-lines"></i>
+                                <span>Instrukcje</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="fa-solid fa-shuffle"></i>
+                                <span>Odmiany</span>
+                            </a>
+                        </li>
+                    </menu>
+                </td>
+            </tr>
+        </table>
     </nav>
     <main>
 m
