The Hacker's Wedding: Unpacking arffsaad/design-templates

This is a collection of design templates I've created for various purposes.

arffsaad, Project Author · GitHub README

A Repository in Disguise

At first glance, the repository appears entirely mundane. The name suggests a collection of boilerplate HTML and CSS. The official description is similarly unassuming.

But the code tells a completely different story. This is not a starter kit. It is a mutation engine. The author needed custom Stripe payments and strict RSVP limits for their own wedding, but the off-the-shelf SaaS provider they chose did not support these features. Instead of building a custom full-stack application from scratch, they wrote an injection script. They weaponized old-school DOM manipulation to overwrite the live site, forcing the closed platform to bend to their exact requirements.

The Art of the Monkey Patch

The core of this heist lives in two files named inject.js and inject2.js. These scripts are not meant to run in isolation. They are designed to be loaded into the target environment (a platform called ekaddigital.com) to radically alter its behavior. The script begins by checking window.location.href. If the user is not on the author's specific vanity domain, it forces an immediate redirect.

From there, it uses jQuery as a blunt instrument to restructure the page. It swaps form action attributes, reorders DOM elements, and injects entirely new multi-language support into a system that lacked it natively. It physically rips out standard buttons and replaces them with a custom Stripe payment flow for digital wedding gifts.

// Injecting the custom payment card directly after the RSVP section
$('#rsvp').after(sumbanganCard);

// Hijacking the default form submission
$('form#rsvp-form').attr('action', customEndpointUrl);

A Serverless Database in the URL

The most ingenious architectural decision is the RSVP logic. Managing guest lists usually requires a database to track who is allowed to bring a plus-one. This repository bypasses the backend entirely. It uses a hardcoded dictionary mapping arbitrary URL hashes to integers.

When a guest clicks their personalized WhatsApp link, the browser extracts the hash. The injected script looks up that hash in its dictionary (for example, mapping '4293026' to an allowance of 6 guests). If the hash is valid, it dynamically generates a dropdown UI allowing the user to select up to 6 attendees. If the hash is missing or invalid, the script disables the RSVP button and triggers a SweetAlert2 error modal. It is a lightweight, database-less authorization system built entirely on the client.

Hot-Prototyping the Injection

Building an injection payload requires testing complex UI components before deploying them into the hostile DOM of a third-party site. The repository includes an index.html file that serves as a hot-prototyping laboratory. By importing Tailwind CSS directly via CDN, the developer bypasses modern build steps completely.

This setup allows for instant, browser-native iteration of the custom Stripe modals and RSVP forms. Once the design is perfected in the static HTML file, the resulting markup can be seamlessly copied into the jQuery injection script. It is the perfect workflow for a one-off guerilla patch.

The Disappearing Guerilla Web

Modern web development instincts heavily favor over-engineering. Faced with a complex business requirement like custom event ticketing, the default response is often to purchase a domain, set up a serverless framework, integrate a Postgres database, and wire up a payment SDK. This standard approach guarantees weeks of work.

This repository proves that alternative paths still exist. By paying a small fee for a generic SaaS product and spending a weekend writing a 100-line jQuery script to inject missing functionality, the author solved the problem with a fraction of the effort. It is a vivid reminder that sometimes the best architecture is the one you do not have to build.