feat: add disclaimer modal

src/app/disclaimer/disclaimer.css

@@ -0,0 +1,6 @@
+#modal {
+    background-color: var(--color-background);
+    border-radius: 10px;
+    border: 2px solid var(--color-accent);
+    color: var(--color-primary);
+}

src/app/disclaimer/disclaimer.html

@@ -1 +1,21 @@
-<p>disclaimer works!</p>
+@if (showModal()) {
+<div class="fixed top-0 left-0 w-full h-full flex items-center justify-center text-center z-50">
+    <div id="modal" class="p-5">
+        <aside>
+            <h1 class="text-2xl font-bold">Disclaimer</h1>
+            <p>This website incorporates AI-generated art. Before you proceed, we wanted to make very clear:</p>
+            <ul class="list-disc list-inside text-left">
+                <li>Our company do not support the use of AI to replace human artists.</li>
+                <li>Our company are aware of the ethical conerns around generative AI and how training data are sourced.</li>
+                <li>We have a long history of supporting and promoting human artists, and have no intention of changing that.</li>
+                <li>However, because we currently operate at a significant loss, our budget is very limited.</li>
+                <li>When funds allow, we absolutely intend to replace all art on this page with human works.</li>
+            </ul>
+            <p>If you are an artist and would like to donate art, or if you have cash and would like to donate to our cause, check our <a href="https://donate.nhcarrigan.com" target="_blank">donation page</a>.</p>
+            <p>Thank you for understanding. Please confirm you understand our stance, and that you will not start flaming us for just trying to survive.</p>
+        </aside>
+        <button (click)="closeModal()" class="mt-5 border-r-4 border-b-4 border-l-4 border-t-2 border-accent rounded-md p-2 cursor-pointer">I understand, and I will not attack you for trying to survive.</button>
+    </div>
+</div>
+<div id="modal-overlay" class="fixed top-0 left-0 w-full h-full bg-black/75 z-40"></div>
+}

src/app/disclaimer/disclaimer.ts

@@ -3,7 +3,7 @@
  * @license Naomi's Public License
  * @author Naomi Carrigan
  */
-import { Component } from "@angular/core";
+import { Component, signal } from "@angular/core";
 
 /**
  * Renders the disclaimer page.
@@ -15,5 +15,12 @@ import { Component } from "@angular/core";
   templateUrl: "./disclaimer.html",
 })
 export class Disclaimer {
+  protected readonly showModal = signal<boolean>(true);
 
+  /**
+   * Closes the modal, should remain closed until the page is refreshed.
+   */
+  public closeModal(): void {
+    this.showModal.set(false);
+  }
 }

src/styles.css

@@ -34,3 +34,24 @@ main {
     background-color: var(--color-background);
     color: var(--color-primary);
 }
+
+a {
+    color: var(--color-accent);
+    text-decoration: underline;
+    font-weight: bold;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: var(--color-primary);
+}
+
+button {
+    background-color: var(--color-accent);
+    color: var(--color-secondary);
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: var(--color-primary);
+}