AI Disclosure page

pages.yaml

@@ -3,6 +3,7 @@
 - cover.html
 - hack-the-planet.html
 - wtf.html
+- ai-disclosure.html
 - drivingmissmuni.html
 - crashman.html
 - vranklevictim.html

pages/ai-disclosure.html

@@ -0,0 +1,129 @@
+<style>
+    #ai-disclosure-page {
+        background: url("assets/img/circuit-board.jpg") no-repeat center center;
+        background-size: cover;
+
+        font: 8.75pt/1.40 Tahoma, sans-serif;
+        padding: 10px;
+        hyphens: auto;
+        overflow-wrap: break-word;
+    }
+
+    h2 {
+        font-family: "Heading Now";
+        font-size: 23px;
+    }
+
+    h3 {
+        font-family: "Heading Now";
+        font-size: 24px;
+        text-align: right;
+    }
+
+    p {
+        font-family: Helvetica, sans-serif;
+        font-size: 12.75pt;
+    }
+
+    /* Windows 98 styles — green/teal variant */
+    div#overlay-window {
+        background: #d4d0c8;
+
+        /* Vertically center the window in the page */
+        position: relative;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    h1#titlebar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        padding: 4px 8px;
+        min-height: 22px;
+        font-weight: bold;
+        color: #ffffff;
+        background: linear-gradient(90deg, #004000 0%, #10a050 50%, #004000 100%);
+    }
+
+    h1#titlebar img {
+        width: 28px;
+        height: 28px;
+        image-rendering: pixelated;
+    }
+
+    h1#titlebar span {
+        margin: 0 8px;
+    }
+
+    div#content {
+        background: #f0f0e8c0;
+        padding: 10px;
+        color: #000000;
+        line-height: 1.4;
+    }
+
+    span#dumb {
+        font-family: "Heading Now";
+        font-size: large;
+        font-stretch: condensed;
+        font-style: italic;
+    }
+
+    span.stuff {
+        font-weight: bold;
+        font-style: italic;
+    }
+</style>
+
+<div id="ai-disclosure-page" class="page-base">
+    <div id="overlay-window">
+        <h1 id="titlebar">
+            <img src="assets/img/computer_2_cool-3.png" alt="">
+            <span>AI Disclosure</span>
+            <img src="assets/img/computer_2_cool-3.png" alt="">
+        </h1>
+        <div id="content">
+            <h2>A DISCLOSURE ABOUT AI USAGE</h2>
+
+            <p>
+                Seems like everything is slop now days. And I'm not just talking about stuff
+                generated by the <span class="stuff">"Large Language Models."</span>
+            </p>
+
+            <p>
+                You, dear reader, deserve better than slop. Therefore, we are proud to declare that
+                nothing in this issue of <strong>SMART BAR</strong> is generated by A.I. We're
+                talking 100% pure homegrown human creativity, the best this side of the Bay Area has
+                to offer.
+            </p>
+
+            <p>
+                That's not to say that we didn't try. Writing good quality content is hard, which is
+                why we tasked our <strong>Tech Wizard</strong> <em>P. Michael Cho</em> with employing the
+                newest, hottest transformers to create hard-hitting philosophical pieces for this
+                issue.
+            </p>
+
+            <p>
+                Unfortunately, <span id="dumb">WE COULDN'T FIGURE IT OUT</span>.
+            </p>
+
+            <p>
+                Despite paying a hundred bucks for <span class="stuff">G.P.T. Pro Max
+                    Extreme</span>, getting <span class="stuff">"API Keys,"</span> and doodling a
+                couple of <span class="stuff">shell scripts</span>, we kept getting back <span
+                    class="stuff">MUFFIN RECIPES</span> and <span class="stuff">PYTHON
+                    PROGRAMS</span>. Needless to say, this is not content that you spent your hard
+                earned cash on to read.
+            </p>
+
+            <p>
+                In any case, we hope you enjoy these words and ideas from a couple of baseline
+                humans.
+            </p>
+        </div>
+    </div>
+</div>