Merge pull request #11 from davideast/main

Add an API banner key

Author: twerske

src/app/pages/home/home.component.html

@@ -14,6 +14,13 @@
  limitations under the License.
 -->
 
+<div class="api-key-banner">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M280-400q-33 0-56.5-23.5T200-480q0-33 23.5-56.5T280-560q33 0 56.5 23.5T360-480q0 33-23.5 56.5T280-400Zm0 160q-100 0-170-70T40-480q0-100 70-170t170-70q67 0 121.5 33t86.5 87h352l120 120-180 180-80-60-80 60-85-60h-47q-32 54-86.5 87T280-240Zm0-80q56 0 98.5-34t56.5-86h125l58 41 82-61 71 55 75-75-40-40H435q-14-52-56.5-86T280-640q-66 0-113 47t-47 113q0 66 47 113t113 47Z"/></svg>
+    <p>Open <code>functions/.env</code> and add your Gemini API key.</p>
+  </div>
+</div>
+
 <header>
   <svg
     class="web"

src/app/pages/home/home.component.scss

@@ -122,3 +122,39 @@ header {
     }
   }
 }
+
+.api-key-banner {
+  position: absolute;
+  top: 10px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  
+  & div {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
+    padding: 16px;
+    border: 2px solid var(--primary);
+    color: var(--contrast);
+    border-radius: 12px;
+    max-width: fit-content;
+
+    & svg {
+      animation: wobble 1s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes wobble {
+  0%, 50% {
+    transform: translateX(0); 
+  }
+  12.5% {
+    transform: translateX(-5px);
+  }
+  37.5% {
+    transform: translateX(5px);
+  }
+}