# F.R.O.S.T. – Pushing Knack to the Limit (Dark Mode Maps, Gamification, & CSS Overhauls) **URL:** \ **Category:** Show & Tell\ **Created:** [December 29, 2025, 2:12pm UTC](https://forums.knack.com/t/f-r-o-s-t-pushing-knack-to-the-limit-dark-mode-maps-gamification-css-overhauls/20108 "2025-12-29T14:12:04Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![Erik](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/erik/32/982_2.png) [@Erik](https://forums.knack.com/u/Erik)\ **Post date:** [December 29, 2025, 2:12pm UTC](https://forums.knack.com/t/f-r-o-s-t-pushing-knack-to-the-limit-dark-mode-maps-gamification-css-overhauls/20108/1 "2025-12-29T14:12:04Z")
* * * Hey all, I wanted to share a project I recently built for the **Contra [#HolidayChallenge2025](https://on.contra.com/qwz699)**. The prompt was to build a holiday-themed app, but instead of a simple gift tracker, I decided to see how far I could bend the **Knack Classic Builder** to create an immersive “Alternate Reality Game” (ARG). The result is **F.R.O.S.T.** (Festive Resonance Operations & Sentiment Tracker). It’s a career simulator for the “Ministry of Mirth,” a secret 1940s bureaucratic agency protecting holiday cheer. **👉 [F.R.O.S.T.](https://ivegotaknack.knack.com/f-r-o-s-t#home/)** _(Feel free to sign up and test it—it’s a dummy app for the contest! You can also explore quite a bit without signing up. )_ * * * ### **The Challenge** We all know Knack is amazing for business logic, but it usually looks like… well, business software. My goal was to completely hide the “Knack-ness” of the app and create a specific **“Whimsical Bureaucracy” / WWII / Cold War Spy** aesthetic (Vellum paper, typewriters, radar screens). Here is a breakdown of how I hacked the UI/UX: ### **1. Role-Based Gamification** I used Knack’s native User Roles to create a 4-tier career path. - **Rank 1 (Observer):** Can only see public pages. - **Rank 2 (Agent):** Unlocks the “Archives.” - **Rank 3 (Senior Analyst):** Unlocks the “War Room.” - **The Logic:** A simple count field on the User object tracks approved reports. JS checks this count on page load and updates the user’s “ID Card” (a custom HTML view) in real-time. ### **2. The “War Room” (Custom Map Styling)** Standard Knack Maps didn’t fit the “War Room” vibe. - **The Fix:** I used CSS Filters (`invert`, `hue-rotate`, `sepia`) on the native Knack Map view container. - **The Result:** A “Night Vision” radar screen (Black & Neon Green) without needing a custom Mapbox integration. - **Custom UI:** I used a `MutationObserver` in JavaScript to detect when a map popup opens, scrape the data, and inject a custom “Terminal Style” HTML card into the popup. ### **3. Progressive Disclosure (Redaction)** I wanted lower-ranked users to see “Classified” documents they couldn’t read yet. - **The Fix:** I wrap text in the Rich Text field with a specific class (e.g., `
`). - **The Script:** On page render, JavaScript checks the logged-in user’s role. If they don’t have the rank, it applies a CSS class that turns the text `transparent` and adds a “Black Tape” or background gradient. _(note: this is not a secure method of redacting information. You can easily inspect the element and see the contents. It’s more for “fun” and “atmosphere”.)_ ### **4. Optimistic UI** To let users select an avatar (“Cover Identity”), I didn’t want the page to reload and break immersion. - **The Fix:** I used JavaScript to intercept the click on an image, instantly swap the HTML on the ID card, and submit a hidden Knack form in the background. Zero lag for the user. * * * ### **Screenshots** ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/6/612750a00f246179d97e8e538369e65abb8e5bba.jpeg) ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/b/b6042e18adb9842dd666e4bcaa152c1978e8acf3.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/a/a1c7682a3fe3d79017dabfffb9f93edd0ebfb5c7.jpeg) ### **Takeaway** This project was a blast to build. It was fun to push Knack with some CSS and a little JavaScript to see how Knack could handle a highly custom, narrative-driven interface. Happy to answer any questions about the CSS selectors or JS logic used here! **Vigilance is the price of Merriment.** 🎅🕵️‍♂️ * * * ---
**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\ **Post date:** [December 29, 2025, 5:02pm UTC](https://forums.knack.com/t/f-r-o-s-t-pushing-knack-to-the-limit-dark-mode-maps-gamification-css-overhauls/20108/2 "2025-12-29T17:02:15Z")
Wow - thats a crazy Knack build - well done on building out this festive application 🎅 ---
**Author:** ![Erik](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/erik/32/982_2.png) [@Erik](https://forums.knack.com/u/Erik)\ **Post date:** [December 29, 2025, 6:55pm UTC](https://forums.knack.com/t/f-r-o-s-t-pushing-knack-to-the-limit-dark-mode-maps-gamification-css-overhauls/20108/3 "2025-12-29T18:55:33Z")
Thanks Carl. It was a blast. Oh, and most of it was “AI Induced” Gemini 3 Pro is a hell of a drug… 😁