From 0dc8dcc09da8bcbf29145a05f20c208bd3387147 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Sat, 27 Dec 2025 13:52:15 -0800
Subject: [PATCH] feat: add disclaimer modal

---
 src/app/disclaimer/disclaimer.css  |  6 ++++++
 src/app/disclaimer/disclaimer.html | 22 +++++++++++++++++++++-
 src/app/disclaimer/disclaimer.ts   |  9 ++++++++-
 src/styles.css                     | 21 +++++++++++++++++++++
 4 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/src/app/disclaimer/disclaimer.css b/src/app/disclaimer/disclaimer.css
index e69de29..503bb5c 100644
--- a/src/app/disclaimer/disclaimer.css
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/app/disclaimer/disclaimer.html b/src/app/disclaimer/disclaimer.html
index cb054f2..8ab4a07 100644
--- a/src/app/disclaimer/disclaimer.html
+++ b/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>
+}
\ No newline at end of file
diff --git a/src/app/disclaimer/disclaimer.ts b/src/app/disclaimer/disclaimer.ts
index 9842aa6..fce2d8b 100644
--- a/src/app/disclaimer/disclaimer.ts
+++ b/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);
+  }
 }
diff --git a/src/styles.css b/src/styles.css
index a756cb7..0d0d0cd 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -33,4 +33,25 @@ main {
     margin: 0 auto;
     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);
 }
\ No newline at end of file