A modern, animated Web Application Firewall (WAF) incident screen built with plain HTML, CSS, and JavaScript. The interface presents a cyber-security styled DDoS mitigation page with bilingual TR/EN copy, live simulated event logs, animated security metrics, and a branded founder profile panel.
This project is designed as a polished front-end template for blocked-request, rate-limit, or Layer 7 attack detection pages. It works directly from index.html and can also be deployed as a static site on GitHub Pages, Netlify, Vercel, Cloudflare Pages, or any standard web server.
- Modern cyber-security dashboard layout
- Animated RGB founder signature for
aka erx4nz - Clickable profile image linked to GitHub
- Turkish and English language toggle
- Live simulated WAF event stream
- Dynamic blocked-request and suspicious-RPS counters
- Animated scanlines, particles, neon borders, and glitch effects
- Responsive layout for desktop, tablet, and mobile screens
- No build step, no framework, no runtime dependencies
- Offline-friendly static files
Open the project locally by double-clicking index.html, or serve the folder with any static server.
python -m http.server 5173Then visit:
http://127.0.0.1:5173/index.html
.
|-- index.html
|-- styles.css
|-- script.js
|-- Waf Korunma - Tespit Ekrani.html
|-- aka-erx4nz/
| `-- aka.jpg
|-- README.md
|-- LICENSE
`-- .gitignore
index.html
Defines the main WAF interface, profile links, metrics, event stream container, language toggle, and page structure.
styles.css
Contains the full visual system: responsive layout, glass panels, neon RGB effects, glitch animation, scanlines, profile card effects, and optimized cyber-security motion.
script.js
Controls bilingual text switching, simulated WAF log generation, metric updates, particle creation, retry feedback, and event ID copy behavior.
aka-erx4nz/aka.jpg
Brand/profile image used in the avatar and main profile panel.
Legacy redirect HTML file
Compatibility redirect page for older local filenames. It redirects to index.html.
Clone or download the repository:
git clone https://github.com/erx4nz/your-repository-name.git
cd your-repository-nameOpen directly:
index.html
Or run a local static server:
python -m http.server 5173- Push the project to a GitHub repository.
- Open the repository settings.
- Go to Pages.
- Set the source to the default branch, usually
main. - Select the root folder.
- Save and wait for GitHub Pages to publish the site.
The application does not require Node.js, npm, bundling, or environment variables.
Update the profile URL in index.html:
href="https://github.com/erx4nz/"Replace:
aka-erx4nz/aka.jpg
Keep the same filename if you do not want to edit the HTML.
All translated interface text lives in the translations object inside script.js.
Animation intensity can be adjusted in:
styles.cssfor visual animation duration, glow strength, scanlines, and RGB effectsscript.jsfor particle count, particle interval, and log update interval
The current animation settings are intentionally balanced to preserve the cyber-security feel while avoiding excessive CPU usage.
The interface is intended for modern browsers:
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Safari
Some visual effects such as backdrop-filter, CSS masks, and advanced blend modes may render differently across browsers.
This project is a static front-end interface. It does not provide real WAF protection, DDoS mitigation, request blocking, rate limiting, bot detection, or server-side security controls.
Use it as a visual template, landing page, demo screen, or custom error page. Real production protection requires infrastructure-level and application-level security controls.
The included aka.jpg image is treated as a project-specific brand asset. If you fork or reuse this repository publicly, replace the image unless you have permission to use it.
This project is licensed under the MIT License. See LICENSE for details.