feat: archive

aculei · Oct 21, 2024 · 1dbf718 · 1dbf718
1 parent 321f36a
commit 1dbf718
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 3 deletions.
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
@@ -1,5 +1,5 @@
 <div
-  class="flex fixed top-0 p-4 left-0 z-10 w-screen justify-between text-l text-gray-400 font-mono_lite"
+  class="flex absolute top-0 p-4 left-0 z-50 w-screen justify-between text-l text-gray-400 font-mono_lite"
 >
   <div class="flex gap-6">
     <div class="cursor-pointer">EXPERIENCE</div>

diff --git a/src/app/pages/archive/archive.component.html b/src/app/pages/archive/archive.component.html
@@ -1,7 +1,97 @@
-<div class="w-screen h-screen bg-black">
+<div class="w-screen h-screen bg-black font-mono_lite text-2xs">
   <div
     class="mt-12 relative h-full flex flex-col text-gray-300 w-full text-xs p-6"
   >
+    <div class="w-full">
+      <div class="bg-green-700 h-4 w-full"></div>
+      <div class="w-full flex justify-between">
+        <div></div>
+        <div class="flex gap-4">
+          <button
+            class="bg-green-700 p-2 flex justify-between items-center min-w-64"
+          >
+            <div>BEAR</div>
+            <div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-3"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="m19.5 8.25-7.5 7.5-7.5-7.5"
+                />
+              </svg>
+            </div>
+          </button>
+          <button
+            class="bg-green-700 p-2 gap-2 flex justify-between items-center"
+          >
+            <div>2021-08</div>
+            <div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-3"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="m19.5 8.25-7.5 7.5-7.5-7.5"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+        <div class="flex gap-4">
+          <button class="bg-green-700 p-2 flex justify-between items-center min-w-24">
+            <div>14°C</div>
+            <div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-3"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="m19.5 8.25-7.5 7.5-7.5-7.5"
+                />
+              </svg>
+            </div>
+          </button>
+          <button class="bg-green-700 p-2 flex justify-between items-center min-w-24">
+            <div>O</div>
+            <div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-3"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="m19.5 8.25-7.5 7.5-7.5-7.5"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
     @for (item of items; track $index) {
 
     <div class="flex gap-8 font-mono_lite mb-1">

diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -1,4 +1,4 @@
-<div class="w-screen h-screen">
+<div class="w-screen h-screen absolute top-0 z-0">
   <video
     class="w-full h-full object-cover absolute top-0 left-0 z-0"
     autoplay