diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f4d43a9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+ Secret Click Button
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..86438f5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,52 @@
+(function () {
+ const button = document.getElementById('magicButton');
+ if (!button) return;
+
+ const clickTimestamps = [];
+ let purpleTimeoutId = null;
+
+ function isPurpleActive() {
+ return purpleTimeoutId !== null;
+ }
+
+ function pruneOld(nowMs) {
+ const cutoff = nowMs - 5000; // 5 seconds window
+ while (clickTimestamps.length && clickTimestamps[0] < cutoff) {
+ clickTimestamps.shift();
+ }
+ }
+
+ function triggerPurple() {
+ if (purpleTimeoutId !== null) {
+ clearTimeout(purpleTimeoutId);
+ }
+ button.classList.add('purple');
+
+ purpleTimeoutId = setTimeout(() => {
+ button.classList.remove('purple');
+ purpleTimeoutId = null;
+ }, 5000); // purple for 5 seconds
+ }
+
+ button.addEventListener('click', () => {
+ const now = Date.now();
+
+ // Always turn red on any click
+ button.classList.add('red');
+
+ // If purple is active, keep it until its timer ends
+ if (isPurpleActive()) {
+ return;
+ }
+
+ // Count clicks within last 5 seconds
+ pruneOld(now);
+ clickTimestamps.push(now);
+
+ if (clickTimestamps.length >= 5) {
+ triggerPurple();
+ // Reset sequence so user needs another 5-in-5s after this
+ clickTimestamps.length = 0;
+ }
+ });
+})();
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..10cbc37
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,55 @@
+* {
+ box-sizing: border-box;
+}
+
+html, body {
+ height: 100%;
+}
+
+body {
+ margin: 0;
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+ background: #101319;
+ color: #e5e7eb;
+ display: grid;
+ place-items: center;
+}
+
+.container {
+ display: grid;
+ place-items: center;
+ gap: 1rem;
+}
+
+.btn {
+ appearance: none;
+ border: none;
+ border-radius: 12px;
+ padding: 0.9rem 1.2rem;
+ font-size: 1.05rem;
+ font-weight: 600;
+ background: #2d3748; /* slate */
+ color: white;
+ cursor: pointer;
+ box-shadow: 0 6px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
+ transition: background-color 160ms ease, transform 60ms ease, box-shadow 160ms ease;
+}
+
+.btn:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
+}
+
+.btn:active {
+ transform: translateY(0);
+}
+
+/* Red state on any click */
+.btn.red {
+ background: #dc2626; /* red-600 */
+}
+
+/* Purple easter egg overrides red while active */
+.btn.purple {
+ background: #7c3aed; /* violet-600 */
+}