WIP: start working on the layout

2024-01-19 09:21:29 +01:00
5 changed files with 124 additions and 118 deletions
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -0,0 +1,21 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.96941850185397 101.64176070538349" width="100.96941850185397" height="101.64176070538349">
+    <!-- svg-source:excalidraw -->
+
+    <defs>
+        <style class="style-fonts">
+            @font-face {
+            font-family: "Virgil";
+            src: url("https://excalidraw.com/Virgil.woff2");
+            }
+            @font-face {
+            font-family: "Cascadia";
+            src: url("https://excalidraw.com/Cascadia.woff2");
+            }
+            @font-face {
+            font-family: "Assistant";
+            src: url("https://excalidraw.com/Assistant-Regular.woff2");
+            }
+        </style>
+
+    </defs>
+    <rect x="0" y="0" width="100.96941850185397" height="101.64176070538349" fill="#ffffff"></rect><g stroke-linecap="round" transform="translate(30.68886733576653 30.58496175482867) rotate(0 20 20)"><path d="M7.04 4.8 C7.04 4.8, 7.04 4.8, 7.04 4.8 M7.04 4.8 C7.04 4.8, 7.04 4.8, 7.04 4.8 M0.88 17.99 C6.17 11.84, 9.42 6.19, 15.31 1.39 M0.88 17.99 C5.57 12.56, 10.96 7.1, 15.31 1.39 M1.93 22.88 C6.82 18.7, 9.97 13.37, 21.61 0.24 M1.93 22.88 C6.86 16.97, 11.84 10.47, 21.61 0.24 M2.98 27.77 C10.65 18.29, 19.96 9.13, 25.29 2.11 M2.98 27.77 C9.98 19.87, 17.08 11.42, 25.29 2.11 M4.69 31.9 C12.5 22.12, 21.89 12.33, 29.62 3.22 M4.69 31.9 C12.74 22.05, 21.29 12.78, 29.62 3.22 M7.71 34.52 C14.37 28.65, 19.87 21.59, 33.29 5.09 M7.71 34.52 C15.76 24.65, 24.57 15.15, 33.29 5.09 M10.72 37.15 C19.18 28.2, 26.43 20.24, 35 9.22 M10.72 37.15 C16.87 29.34, 24.05 21.47, 35 9.22 M13.74 39.77 C19.2 34.09, 23.77 27.5, 37.36 12.6 M13.74 39.77 C18.98 33.71, 23.88 27.77, 37.36 12.6 M19.39 39.38 C23.88 34.71, 28.56 29.35, 39.72 15.98 M19.39 39.38 C23.99 34.52, 27.88 29.32, 39.72 15.98 M25.03 38.98 C29.47 34.41, 32.61 31.28, 38.81 23.13 M25.03 38.98 C30.87 32.56, 36.18 26.41, 38.81 23.13" stroke="#868e96" stroke-width="0.5" fill="none"></path><path d="M19.34 -0.28 C23.43 -0.67, 29.07 1.79, 32.4 4.53 C35.73 7.28, 38.41 12.07, 39.32 16.19 C40.24 20.31, 39.98 25.54, 37.89 29.26 C35.8 32.98, 30.9 36.85, 26.76 38.51 C22.62 40.17, 16.98 40.54, 13.07 39.22 C9.15 37.9, 5.41 34.27, 3.28 30.6 C1.16 26.93, -0.35 21.56, 0.31 17.22 C0.97 12.89, 3.78 7.53, 7.23 4.59 C10.67 1.65, 18.6 0.3, 20.97 -0.42 C23.33 -1.14, 21.53 -0.11, 21.42 0.28 M19.92 -0.58 C24 -0.59, 29.44 2.32, 32.66 5.28 C35.89 8.24, 38.61 13.02, 39.26 17.18 C39.91 21.35, 38.74 26.68, 36.55 30.29 C34.36 33.9, 30.07 37.34, 26.14 38.82 C22.2 40.3, 16.97 40.56, 12.96 39.17 C8.95 37.78, 4.1 34.31, 2.07 30.47 C0.05 26.64, -0.2 20.38, 0.79 16.17 C1.77 11.97, 4.74 7.88, 7.97 5.24 C11.21 2.61, 18.27 1.22, 20.19 0.36 C22.12 -0.5, 19.56 -0.23, 19.53 0.09" stroke="#000000" stroke-width="1" fill="none"></path></g><g stroke-linecap="round" transform="translate(10.688867335766531 10.584961754828669) rotate(0 40 40)"><path d="M55.59 3.51 C62.08 5.82, 68.4 11.99, 72.59 17.81 C76.78 23.62, 80.63 31.27, 80.72 38.41 C80.82 45.55, 77.21 54.27, 73.16 60.64 C69.1 67.01, 62.61 73.35, 56.41 76.61 C50.2 79.87, 42.89 81.07, 35.93 80.19 C28.96 79.31, 20.13 76.15, 14.59 71.35 C9.04 66.54, 4.78 58.46, 2.66 51.35 C0.54 44.24, 0.26 35.58, 1.88 28.67 C3.5 21.77, 7.22 14.63, 12.38 9.91 C17.54 5.18, 25.21 1.33, 32.85 0.32 C40.5 -0.69, 53.86 2.89, 58.24 3.83 C62.61 4.77, 59.54 5.35, 59.11 5.95 M50.97 2.18 C57.64 3.59, 65.11 8.87, 69.89 14.56 C74.68 20.24, 78.86 28.89, 79.7 36.28 C80.53 43.67, 77.92 52.62, 74.9 58.89 C71.88 65.16, 67.37 70.16, 61.6 73.9 C55.82 77.65, 47.62 81.38, 40.26 81.36 C32.9 81.34, 23.86 78.17, 17.46 73.77 C11.06 69.38, 4.72 61.65, 1.86 54.99 C-1.01 48.32, -1.33 40.71, 0.27 33.77 C1.88 26.82, 6.5 18.73, 11.47 13.32 C16.45 7.91, 23.36 3.18, 30.11 1.31 C36.86 -0.56, 48.27 1.66, 51.95 2.11 C55.63 2.55, 52.24 3.25, 52.17 3.97" stroke="#000000" stroke-width="1" fill="none"></path></g><g stroke-linecap="round"><g transform="translate(50.688867335766645 10.584961754828669) rotate(0 0 40)"><path d="M0.98 -0.58 C0.88 12.81, -0.57 66.37, -0.69 79.68 M0.03 1.72 C0.33 15.35, 1.72 67.97, 1.66 81.06" stroke="#000000" stroke-width="1" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(10.688867335766531 50.58496175482867) rotate(0 40 0)"><path d="M-0.69 -0.32 C12.53 -0.34, 66.81 -0.91, 80.28 -0.71 M1.15 -1.53 C14.15 -1.35, 66.43 0.36, 79.48 0.45" stroke="#000000" stroke-width="1" fill="none"></path></g></g><mask></mask></svg>
--- a/public/next.svg
+++ b/public/next.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/public/vercel.svg
+++ b/public/vercel.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,26 +2,50 @@
@tailwind components;
@tailwind utilities;

-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+html, body {
+  height: 100%;
+  padding: 20px;
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+.layout-container {
+
+  display: flex;
+  flex-flow: column;
+
+  height: 100%;
 }

-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+.layout-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.layout-content {
+  flex-grow: 2;
+}
+
+.layout-footer {
+
+}
+
+/* TODO: move those to a CSS module for header component/page component*/
+.navigation ul {
+  list-style-type: none;
+  display: inline-block;
+}
+
+.nav-link {
+  margin: 12px;
+  display: inline-block;
+}
+
+/* TODO: move those to a CSS module for header Form component*/
+
+.report-form-container {
+  display: grid;
+  grid-template-columns: 200px 150px 200px 50px 300px 100px;
+  grid-column-gap: 5px;
+  grid-row-gap: 5px;
+  justify-content: center;
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,111 +2,74 @@ import Image from 'next/image'

 export default function Home() {
  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
+    <main className="layout-container">
+
+      {/* Header */}
+      <div className="layout-header">
+        <div className="m-3 flex items-center">
+          <Image className="inline" src="/logo.svg" alt="TM logger logo" width="96" height="96" />
+          <div className="">
+             <span className="text-xl font-bold">TM Logger</span>
+              <br />
+             <span className="text-m">The tool to simplify time tracking for Artinians</span>
          </div>
        </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
+        <nav className="navigation">
+          <ul>
+          <li className="nav-link">Home</li>
+          <li className="nav-link">Login/Logout</li>
+          <li className="nav-link">Settings</li>
+          </ul>
+        </nav>
      </div>

-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
+      {/* Main content */}
+      <div className="layout-content ">

-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
+        <form className="report-form-container">

-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore starter templates for Next.js.
-          </p>
-        </a>
+          {/* Row example */}
+          <span><input type="date" name="date" id="date"/> icon</span>
+          <select name="project" id="project">
+            <option>A</option>
+            <option>B</option>
+          </select>
+          <select name="type_of_work" id="work_type">
+            <option>1</option>
+            <option>2</option>
+          </select>
+          <input type="number" name="hours" id="hours" />
+          <input type="text" name="detail" id="detail" />
+          <span>Remove Icon</span>

-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
+          {/* Row example */}
+          <span><input type="date" name="date" id="date"/> icon</span>
+          <select name="project" id="project">
+            <option>A</option>
+            <option>B</option>
+          </select>
+          <select name="type_of_work" id="work_type">
+            <option>1</option>
+            <option>2</option>
+          </select>
+          <input type="number" name="hours" id="hours" />
+          <input type="text" name="detail" id="detail" />
+          <span>Remove Icon</span>
+          {/* Row example */}
+          <span><input type="date" name="date" id="date"/> icon</span>
+          <select name="project" id="project">
+            <option>A</option>
+            <option>B</option>
+          </select>
+          <select name="type_of_work" id="work_type">
+            <option>1</option>
+            <option>2</option>
+          </select>
+          <input type="number" name="hours" id="hours" />
+          <input type="text" name="detail" id="detail" />
+          <span>Remove Icon</span>
+
+        </form>
      </div>
    </main>
  )
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>