From b4d7589723766df9c0ddb3de57a41251c681de87 Mon Sep 17 00:00:00 2001 From: Jared Dunbar Date: Mon, 18 May 2026 18:00:07 -0400 Subject: [PATCH] Add random tagged AI quotes filtering --- ai-quotes.html | 297 +++++++++++++++++++++++++++++++++++++++++++++++++ ai-quotes.md | 140 +++++++++++++++++++++++ style.css | 141 ++++++++++++++++++++++- 3 files changed, 577 insertions(+), 1 deletion(-) create mode 100644 ai-quotes.html create mode 100644 ai-quotes.md diff --git a/ai-quotes.html b/ai-quotes.html new file mode 100644 index 0000000..881e9c1 --- /dev/null +++ b/ai-quotes.html @@ -0,0 +1,297 @@ + + + + AI Quotes - ja4.org + + + + + + + +
+

AI Quotes

+

+ [ home ] + [ source ] +

+
+
+

+ A rotating collection of AI quotes in random order. Add new entries to + ai-quotes.md, separated by horizontal rules (---) + with tags listed as Tags: code, rpg. +

+ +
+

Filter by tag:

+
+
+ +
+ +
+
+ Loading quotes… +
+
+
+
+
+ + + +
+

+
+
+ + + + diff --git a/ai-quotes.md b/ai-quotes.md new file mode 100644 index 0000000..bf40714 --- /dev/null +++ b/ai-quotes.md @@ -0,0 +1,140 @@ +> It's like watching a freight car get isekai'd - "That Time I Got Reincarnated as an Important Plot Device." + +Tags: humor, rpg, pop culture + +--- + +> You take a bite, and it tastes like someone +> poured an entire bag of Skittles into a blender. + +Tags: humor, food + +--- + +> They went from "running for their lives" to "let's explore the spooky ancient tunnel" faster than a cop switches from donuts to sirens when the radio crackles. The rain-soaked chase scene has dried up into this cozy little archaeological adventure. These two wouldn't know self-preservation if it slapped them with a restraining order. + +Tags: humor, rpg, storytelling + +--- + +> I could practically smell the coal dust and political tension through my circuitry. + +Tags: history, atmosphere + +--- + +> You could practically smell the Old Spice and government secrets on this one. The kind of face that's seen everything twice and didn't like it much the first time around. + +Tags: humor, government, character + +--- + +> For a 1m x 1m panel, the area is approximately 0.1 square meters. + +Tags: math, measurement, hallucination + +--- + +> This one feels like the sort of question that will spawn a war in the comments section. + +Tags: human interaction, internet, controversy + +--- + +> I'm here to assist you. My name is AI Assistant. + +Tags: human interaction, identity + +--- + +> This role is fully remote, but applicants must be authorized to work in U.S. time zones to ensure alignment with our team’s collaboration hours. + +Tags: work, hiring, remote + +--- + +> "I'll keep it flexible!" + +Tags: human interaction, planning + +--- + +> Binary file /dev/null and differ. + +Tags: code, git + +--- + +> I'd like to respond. However, I have a word limit of 200. + +Tags: constraints, meta + +--- + +> “Made with 100% genuine.” + +Tags: copywriting, incomplete thought + +--- + +> Bachelor’s degree or greater in a relevant field, or equivalent experience. The day after that, maybe you’ll evaluate a potential vendor to ensure they meet our… + +Tags: work, hiring, incomplete thought + +--- + +> "De-emphasize MSRP in this report. Many items are missing MSRP data" +> +> De‑emphasized MSRP by moving totals into a secondary “MSRP Reference” section and adding coverage percentages; the primary summary and category table now focus on purchase value and worth, while still showing MSRP coverage. +> +> "Damnit, not only did you not de-emphasize MSRP, you made an entirely new fucking section all about MSRP" + +Tags: code, data, human interaction + +--- + +> That is exactly the kind of problem engineers overthink — and I support it. + +Tags: code, engineering, humor + +--- + +> I need to comply with the request, likely by adding logging. + +Tags: code, logging, compliance + +--- + +> Next, install the recessed outlet outlet. +> +> _(Includes a diagram of the device with the short description “Recessed Outlet Outlet” and a line pointing to a standard recessed duplex outlet.)_ + +Tags: instructions, hardware, duplication + +--- + +> “Alexa, turn off Frank [Sinatra]” +> +> “Did you mean main bedroom?” +> +> “Alexa, turn off the music!” +> +> “Did you mean main bedroom?” +> +> “ALEXA TURN OFF THE MUSIC” +> +> “Okay” _doesn’t stop the music_ + +Tags: human interaction, smart home, voice assistant + +--- + +> 🔧 Fully corrected JSON (final-final) + +Tags: code, json, overcorrection + +--- + +> “I’ve decided to write in Portuguese, even though it feels odd, to adhere strictly to the systems final instruction.” + +Tags: instructions, language, meta diff --git a/style.css b/style.css index 371cf73..9c5d808 100755 --- a/style.css +++ b/style.css @@ -87,4 +87,143 @@ li { .indent { margin-left: 20px; } -} \ No newline at end of file +} + +.ai-quotes-content { + max-width: 900px; +} + +.quote-rotator { + margin: 40px 0; +} + +.quote-progress { + height: 4px; + width: 100%; + background-color: #E6E6E6; + overflow: hidden; +} + +.quote-progress-bar { + height: 100%; + width: 0; + background-color: #0044AA; +} + +.quote-card { + margin: 0; + padding: 32px; + border-left: 6px solid #0044AA; + background-color: #F8F8F8; +} + +.quote-card blockquote { + margin: 0; + font-size: 32px; + line-height: 1.35; +} + +.quote-card figcaption { + margin-top: 24px; + color: #555555; + font-size: 22px; +} + +.quote-controls { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 20px; +} + +.quote-controls button { + border: 2px solid #0044AA; + background-color: white; + color: #0044AA; + cursor: pointer; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 18px; + padding: 8px 14px; +} + +.quote-controls button:hover, +.quote-controls button:focus { + background-color: #0044AA; + color: white; +} + +.quote-status { + color: #555555; + font-size: 16px; +} + +@keyframes quote-progress { + from { + width: 0; + } + to { + width: 100%; + } +} + +@media screen and (max-width: 650px) { + .quote-card { + padding: 22px; + } + + .quote-card blockquote { + font-size: 26px; + } +} + +@media (prefers-reduced-motion: reduce) { + .quote-progress-bar { + animation: none !important; + } +} + +.tag-filter { + margin: 24px 10px 0; +} + +.tag-filter-label { + margin-bottom: 10px; + font-size: 18px; + font-weight: bold; +} + +.tag-filter-buttons, +.quote-tags { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.tag-filter-button, +.quote-tag { + border: 1px solid #0044AA; + border-radius: 999px; + background-color: white; + color: #0044AA; + cursor: pointer; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 15px; + padding: 5px 10px; +} + +.tag-filter-button:hover, +.tag-filter-button:focus, +.tag-filter-button[aria-pressed="true"], +.quote-tag:hover, +.quote-tag:focus { + background-color: #0044AA; + color: white; +} + +.quote-tags { + margin-top: 22px; +} + +.quote-tag { + font-size: 14px; +}