The sign-up form project

Devoted Code: The sign up form that Gentle Criminal deserves!
By irl La Brava 💻❤️

Init:

This is a different project that I made. Yes, it is also a fan-art project, but this fan-art projects elevates itself to new heights. All to bring in more fans, and redirect to Gentle Criminal, and show how it looks like! Now it has finally come to life! If you are wondering how I named it I shall let you know: the signing up for Gentle Productions! Where imperial tea is promoted, unique surprises are yet to be found with the utmost elegance, all brought to life to show case the best heist ever.

A fan art project from My Hero Academia. Then, as I was trying to figure out how to write this article, I had an epiphany, and made two mode additions, and created a Javascript file, going beyond what the assignment in the curriculum asked for!
To go beyond, and to start with, allow me to describe you the following: I built custom sign-up and broadcast portal from scratch. A La Brava x Gentle Criminal thematic project!

As for the technical breakdown of how I designed, engineered, and styled this platform using semantic HTML5, modern CSS flexbox layouts, and client-side validation logic:

**

1// Architectural Overview & Structural Foundations//**

The project was constructed with a clean, decoupled two-file architecture (index.html and style.css) managed under local Git version control.

To create an immersive broadcast experience, I divided the viewport into a high-contrast dual-panel layout:
• The Hero/Broadcast Panel (Left): Houses Gentle's official logo, live stream status badges, custom SVG graphics, and his inspirational opening address.
• The Credentials Panel (Right): A structured, accessible sign-up form designed for supporters to register for exclusive updates and royal tea samples.
Semantic Markup & Targeted Contrast
To direct the viewer's eye through Gentle's speech and call-out notices, I utilized semantic HTML5 elements alongside precise wrappers. Rather than styling entire blocks indiscriminately, specific inline wrappers (.header-callout and .quote-pink) were applied to highlight key phrases in glowing cyber-neon pink against the imperial purple background.

`HTML

"My dear one, you the one who made this happen...
...Ah no, you're not my dear beloved one, but you're still the chosen one! Why you ask? To support the one and only Gentle Criminal!"

`

**

2// Vector Graphics: Handcrafting the G.C Imperial SVG Badge**

A true gentleman requires a regal mark. Rather than using raster images that degrade on high-resolution screens, I hand-coded a custom vector graphic (
• The Heart Frame: A deep magenta utilizing drop-shadow filters to represent my unwavering devotion and system protection.
• Rising Steam Lines: Dual curves rendered in hot pink and gold to represent the aroma of freshly brewed imperial tea.
• The Monogram & Mustache: A crisp node for the G.C initials in royal gold, anchored by Gentle's iconic white handlebar mustache at the base.
SVG

**

3// Styling & Color Palette Variables (:root)**

To maintain complete visual harmony across dark mode surfaces, I defined global CSS custom properties (:root). The stylesheet balances Gentle's aristocratic purple and gold palette with my cyber-neon accents.
CSS

:root {
    /* La Brava Palette */
    --pink-neon: #ff1493;
    --pink-glow: rgba(255, 20, 147, 0.4);
    --pink-light: #ff69b4;

    /* Gentle Criminal Palette */
    --purple-dark: #0d0714;
    --purple-deep: #190a26;
    --purple-card: #251038;
    --purple-accent: #4c1d95;
    --gold-accent: #f4d03f;
    --gold-glow: rgba(244, 208, 63, 0.3);
    --silver-text: #e2e8f0;
    --lavender-light: #d8b4fe;

}

**
///4*Layout Mechanics & Responsiveness*//**

The core layout utilizes Flexbox (display: flex) with a proportion ratio of 1.2 : 1 between the hero panel and form container. Background depth was achieved using layered radial gradients (radial-gradient), giving the surface a subtle glowing ambient effect.
To support viewers on mobile devices or smaller display setups, media queries automatically re-orient the dual panels into a vertical stack at viewports under 950px:
CSS
@media (max-width: 950px) {
.page-wrapper {
flex-direction: column;
}
.hero-panel {
border-right: none;
border-bottom: 1px solid rgba(244, 208, 63, 0.2);
}
}

**

5// Client-Side Input Validation Logic//**

To protect our system from unauthorized noise, input fields utilize native HTML5 validation pseudo-classes (:valid, :focus:invalid). Additionally, a lightweight JavaScript block monitors password field inputs in real-time, enforcing match checks before form submission.
JavaScript
function validatePassword() {
if (confirmPasswordInput.value === '') {
confirmPasswordInput.setCustomValidity('');
errorMessage.textContent = '';
return;
}

if (passwordInput.value !== confirmPasswordInput.value) {
    confirmPasswordInput.setCustomValidity('Passwords do not match');
    errorMessage.textContent = 'Passwords must match';
} else {
    confirmPasswordInput.setCustomValidity('');
    errorMessage.textContent = '';
}

}

In ##4, is the latest addition. I wanted to add more, to try more to satisfy myself. I went even further than what the curriculum asked, and I searched how to establish a solid front-end baseline with real-time input sanitization, native HTML5 validation integration, password matching checks, and a submission cooldown timer.
**

5. ** Invisible Honeypot Trap (website_hp)**

• Scraper & Bot Trap: Built a decoy field (<input type="text" id="website_hp" name="website_hp">) hidden inside a zero-visibility container (display: none; and aria-hidden="true").
• Zero Human Distraction: Human users traversing the form natively via keyboard navigation or visual rendering will never see or interact with this input. Automated scrapers and bot scripts, however, automatically populate every visible and hidden field they encounter. If populated, the submission is immediately rejected client-side.

**

6. ** Cloudflare Turnstile Bot Defense**

• Interactive Anti-Bot Verification: Integrated Cloudflare's privacy-friendly Turnstile widget (3x00000000000000000000FF) directly into the HTML structure. This allows full interactive testing of bot verification without requiring a paid dashboard account or domain registration.

• Deep CSS Theme Overrides: Reached into the Turnstile container using forced CSS priority (!important) to convert any fallback, error, or troubleshoot hyperlinks into our imperial gold theme (#f4d03f) with neon pink hover glows (#ff69b4), keeping the security widget completely visually unified with the dark purple broadcast layout.

Summary:
By combining precise semantic HTML structure, strict CSS variable systems, custom inline vector art, and dynamic responsive layouts, Gentle Productions now possesses a digital sign-up portal fit for a true revolutionary, plus enforcing front-end security to go beyond!

Every single line of code was written with absolute devotion—because nothing less is worthy of Gentle Criminal! ❤️💻

Any questions you have? Let me know!

Check it out here:

https://labrava0x.github.io/Gentle-sign-up-form/