From 1f902534168b801b88349760c37d35411806b788 Mon Sep 17 00:00:00 2001 From: Ravi <65914575+ravi0900@users.noreply.github.com> Date: Sun, 19 Oct 2025 02:52:50 +0530 Subject: [PATCH 1/6] feat: Add bash-style hover effect to buttons Co-authored-by: aider (gemini/gemini-2.5-pro) --- effects.css | 28 ++++++++++++++++++++++++++++ index.html | 13 +++++++------ 2 files changed, 35 insertions(+), 6 deletions(-) create mode 100644 effects.css diff --git a/effects.css b/effects.css new file mode 100644 index 0000000..0796c33 --- /dev/null +++ b/effects.css @@ -0,0 +1,28 @@ +.btn-bash-effect { + position: relative; +} + +.btn-bash-effect::after { + content: '_'; + position: absolute; + top: 50%; + right: .5em; + transform: translateY(-50%); + opacity: 0; + transition: opacity .2s ease-in-out; + will-change: opacity; +} + +.btn-bash-effect:hover::after { + opacity: 1; + animation: blink 1s step-end infinite; +} + +@keyframes blink { + from, to { + opacity: 1; + } + 50% { + opacity: 0; + } +} diff --git a/index.html b/index.html index 6b5c40f..f321ec3 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,7 @@ + @@ -59,7 +60,7 @@ Download + class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-gray-900 rounded shadow-md fold-bold lg:bg-white lg:text-gray-600 sm:w-full lg:shadow-none hover:shadow-xl btn-bash-effect">Download

Are you ready to start your adventure and start writing awesome Bash scripts?

Free Download + class="relative self-start inline-block w-auto px-8 py-4 mx-auto mt-0 text-base font-bold text-white bg-gray-900 hover:bg-gray-700 border-t border-gray-200 rounded-md shadow-xl sm:mt-1 fold-bold lg:mx-0 btn-bash-effect">Free Download @@ -428,7 +429,7 @@

Light Theme

Download the Light theme of the Introduction to Bash Scripting eBook

- Free Download + Free Download @@ -447,7 +448,7 @@
Light Theme

Enjoying the free eBook?

Support this opensource project by staring it on GitHub!

- + From f88de6723f991a2e86cb4f0330c4b125945f9a18 Mon Sep 17 00:00:00 2001 From: Ravi <65914575+ravi0900@users.noreply.github.com> Date: Sun, 19 Oct 2025 02:57:21 +0530 Subject: [PATCH 2/6] feat: Implement fire-like button hover effect and remove old CSS Co-authored-by: aider (gemini/gemini-2.5-pro) --- index.html | 51 ++++++++++++++++++++++++++++++++++++++++++++------- style.css | 21 ++++++++++++++++++++- 2 files changed, 64 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index f321ec3..f968ad8 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,6 @@ - @@ -60,7 +59,7 @@ Download + class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-gray-900 rounded shadow-md fold-bold lg:bg-white lg:text-gray-600 sm:w-full lg:shadow-none hover:shadow-xl btn-hover-effect">Download

Are you ready to start your adventure and start writing awesome Bash scripts?

Free Download + class="relative self-start inline-block w-auto px-8 py-4 mx-auto mt-0 text-base font-bold text-white bg-gray-900 hover:bg-gray-700 border-t border-gray-200 rounded-md shadow-xl sm:mt-1 fold-bold lg:mx-0 btn-hover-effect">Free Download @@ -429,7 +428,7 @@

Light Theme

Download the Light theme of the Introduction to Bash Scripting eBook

- Free Download + Free Download @@ -448,7 +447,7 @@
Light Theme

Enjoying the free eBook?

Support this opensource project by staring it on GitHub!

- + @@ -526,6 +525,44 @@

Enjoying the free eBook?

+ diff --git a/style.css b/style.css index 6b6bd95..99f3140 100644 --- a/style.css +++ b/style.css @@ -24,4 +24,23 @@ html { background: #a0aec0; } -/* Css is same for both the html file index.html and training.html */ \ No newline at end of file +/* Css is same for both the html file index.html and training.html */ + +.fire-particle { + position: fixed; + pointer-events: none; + color: #ff6b6b; + font-weight: bold; + font-size: 1.2rem; + text-shadow: 0 0 5px #ff6b6b, 0 0 10px #ff6b6b, 0 0 15px #ff6b6b, 0 0 20px #ff6b6b; + animation: floatEffect 1s ease-out forwards; + z-index: 9999; + transform: translate(-50%, -50%); +} + +@keyframes floatEffect { + to { + opacity: 0; + transform: translate(calc(-50% + var(--translateX)), calc(-50% + var(--translateY))) rotate(720deg); + } +} From 1df5141ebd85eb13bc3814ce3ecbca53abd2be97 Mon Sep 17 00:00:00 2001 From: Ravi <65914575+ravi0900@users.noreply.github.com> Date: Sun, 19 Oct 2025 02:59:35 +0530 Subject: [PATCH 3/6] feat: Implement continuous cmatrix-style hover effect for buttons Co-authored-by: aider (gemini/gemini-2.5-pro) --- index.html | 29 +++++++++++++++++++++-------- style.css | 8 ++++---- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index f968ad8..a4b2771 100644 --- a/index.html +++ b/index.html @@ -528,36 +528,49 @@

Enjoying the free eBook?

document.addEventListener('DOMContentLoaded', () => { const buttons = document.querySelectorAll('.btn-hover-effect'); - const chars = ['$', '#', '~', '/']; + const chars = ['$', '#', '~', '/', '>', '_', '0', '1']; - const createParticle = (x, y) => { + const createParticle = (rect) => { const particle = document.createElement('span'); particle.textContent = chars[Math.floor(Math.random() * chars.length)]; particle.classList.add('fire-particle'); document.body.appendChild(particle); + const x = rect.left + Math.random() * rect.width; + const y = rect.top + Math.random() * rect.height; + particle.style.top = `${y}px`; particle.style.left = `${x}px`; const translateX = (Math.random() - 0.5) * 150; - const translateY = -100 - Math.random() * 100; + const translateY = 100 + Math.random() * 100; // Fall down particle.style.setProperty('--translateX', `${translateX}px`); particle.style.setProperty('--translateY', `${translateY}px`); setTimeout(() => { particle.remove(); - }, 1000); + }, 1500); // Match animation duration }; buttons.forEach(button => { + let intervalId = null; button.addEventListener('mouseenter', e => { const rect = e.target.getBoundingClientRect(); - for (let i = 0; i < 20; i++) { - const x = rect.left + Math.random() * rect.width; - const y = rect.top + Math.random() * rect.height; - createParticle(x, y); + if (!intervalId) { + intervalId = setInterval(() => { + for (let i = 0; i < 2; i++) { + createParticle(rect); + } + }, 50); + } + }); + + button.addEventListener('mouseleave', () => { + if (intervalId) { + clearInterval(intervalId); + intervalId = null; } }); }); diff --git a/style.css b/style.css index 99f3140..ee6d8c7 100644 --- a/style.css +++ b/style.css @@ -29,11 +29,11 @@ html { .fire-particle { position: fixed; pointer-events: none; - color: #ff6b6b; + color: #39ff14; font-weight: bold; font-size: 1.2rem; - text-shadow: 0 0 5px #ff6b6b, 0 0 10px #ff6b6b, 0 0 15px #ff6b6b, 0 0 20px #ff6b6b; - animation: floatEffect 1s ease-out forwards; + text-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14, 0 0 20px #fff; + animation: floatEffect 1.5s linear forwards; z-index: 9999; transform: translate(-50%, -50%); } @@ -41,6 +41,6 @@ html { @keyframes floatEffect { to { opacity: 0; - transform: translate(calc(-50% + var(--translateX)), calc(-50% + var(--translateY))) rotate(720deg); + transform: translate(calc(-50% + var(--translateX)), calc(-50% + var(--translateY))); } } From 3825eab11c731cb73379e7ed78bf87efa7c59bc3 Mon Sep 17 00:00:00 2001 From: Ravi <65914575+ravi0900@users.noreply.github.com> Date: Sun, 19 Oct 2025 03:01:34 +0530 Subject: [PATCH 4/6] feat: Add rainbow colors to particle effect Co-authored-by: aider (gemini/gemini-2.5-pro) --- index.html | 5 +++++ style.css | 2 -- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a4b2771..bc610c8 100644 --- a/index.html +++ b/index.html @@ -529,12 +529,17 @@

Enjoying the free eBook?

{ const buttons = document.querySelectorAll('.btn-hover-effect'); const chars = ['$', '#', '~', '/', '>', '_', '0', '1']; + const colors = ['#ff6b6b', '#f94d6a', '#f8c291', '#82ccdd', '#6a89cc', '#b71540', '#39ff14', '#f0932b', '#eb4d4b', '#6ab04c', '#e056fd', '#be2edd']; const createParticle = (rect) => { const particle = document.createElement('span'); particle.textContent = chars[Math.floor(Math.random() * chars.length)]; particle.classList.add('fire-particle'); + const color = colors[Math.floor(Math.random() * colors.length)]; + particle.style.color = color; + particle.style.textShadow = `0 0 5px ${color}, 0 0 10px ${color}`; + document.body.appendChild(particle); const x = rect.left + Math.random() * rect.width; diff --git a/style.css b/style.css index ee6d8c7..6fafd4b 100644 --- a/style.css +++ b/style.css @@ -29,10 +29,8 @@ html { .fire-particle { position: fixed; pointer-events: none; - color: #39ff14; font-weight: bold; font-size: 1.2rem; - text-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14, 0 0 20px #fff; animation: floatEffect 1.5s linear forwards; z-index: 9999; transform: translate(-50%, -50%); From 05731c521d40c2b6730e874319d0f64332d318ce Mon Sep 17 00:00:00 2001 From: Ravi <65914575+ravi0900@users.noreply.github.com> Date: Sun, 19 Oct 2025 03:05:21 +0530 Subject: [PATCH 5/6] Delete effects.css --- effects.css | 28 ---------------------------- 1 file changed, 28 deletions(-) delete mode 100644 effects.css diff --git a/effects.css b/effects.css deleted file mode 100644 index 0796c33..0000000 --- a/effects.css +++ /dev/null @@ -1,28 +0,0 @@ -.btn-bash-effect { - position: relative; -} - -.btn-bash-effect::after { - content: '_'; - position: absolute; - top: 50%; - right: .5em; - transform: translateY(-50%); - opacity: 0; - transition: opacity .2s ease-in-out; - will-change: opacity; -} - -.btn-bash-effect:hover::after { - opacity: 1; - animation: blink 1s step-end infinite; -} - -@keyframes blink { - from, to { - opacity: 1; - } - 50% { - opacity: 0; - } -} From d3df78367dac84b0ef7a31552d0138b8ab2542a1 Mon Sep 17 00:00:00 2001 From: Ravi <65914575+ravi0900@users.noreply.github.com> Date: Sun, 19 Oct 2025 03:24:26 +0530 Subject: [PATCH 6/6] Update style.css --- style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 6fafd4b..864fb31 100644 --- a/style.css +++ b/style.css @@ -24,8 +24,6 @@ html { background: #a0aec0; } -/* Css is same for both the html file index.html and training.html */ - .fire-particle { position: fixed; pointer-events: none; @@ -42,3 +40,5 @@ html { transform: translate(calc(-50% + var(--translateX)), calc(-50% + var(--translateY))); } } + +/* Css is same for both the html file index.html and training.html */ \ No newline at end of file