From e8fd12793a4c2127492e250f4c0d19ff01a06ca7 Mon Sep 17 00:00:00 2001 From: Jagdish Prajapati Date: Sun, 28 Jun 2026 08:22:24 +0530 Subject: [PATCH 1/5] Fix matrix rain and responsiveness on 404 page --- frontend/404.html | 74 +++++++++++----------------------------------- frontend/js/404.js | 10 +++++++ 2 files changed, 27 insertions(+), 57 deletions(-) create mode 100644 frontend/js/404.js diff --git a/frontend/404.html b/frontend/404.html index 381fa674..4e73d60d 100644 --- a/frontend/404.html +++ b/frontend/404.html @@ -26,17 +26,6 @@ position: relative; } - /* Matrix rain canvas */ - #matrix { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; - opacity: 0.18; - } - /* Main panel */ .panel { position: relative; @@ -159,11 +148,20 @@ pointer-events: none; z-index: 2; } + + @media (max-width: 768px) { + .panel { + padding: 2rem 2rem; + max-width: 90%; + } + } + @media (max-width: 480px) { .panel { padding: 1.5rem 1.2rem; width: 95%; } + .title { font-size: 1.6rem; } @@ -171,17 +169,22 @@ .subtitle { font-size: 0.75rem; } + .line { font-size: 0.82rem; line-height: 1.6; } + .nav-links { flex-direction: column; + align-items: center; gap: 0.75rem; } + .nav-links a { text-align: center; width: 100%; + max-width: 280px; box-sizing: border-box; } } @@ -189,7 +192,7 @@ - +
404 — Not Found
@@ -262,50 +265,7 @@
- + + diff --git a/frontend/js/404.js b/frontend/js/404.js new file mode 100644 index 00000000..aef8496d --- /dev/null +++ b/frontend/js/404.js @@ -0,0 +1,10 @@ +document.addEventListener("DOMContentLoaded", () => { + // Inject actual bad path + const p = window.location.pathname; + + const cdLine = document.getElementById("cd-line"); + const pathDisplay = document.getElementById("path-display"); + + if (cdLine) cdLine.textContent = " cd " + p; + if (pathDisplay) pathDisplay.textContent = p; +}); From fa54a9325cd75d81deafebfc7e6d28aafc0b9ea5 Mon Sep 17 00:00:00 2001 From: Jagdish Prajapati Date: Sun, 28 Jun 2026 08:31:31 +0530 Subject: [PATCH 2/5] Responsiveness main page --- frontend/styles/main.css | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/frontend/styles/main.css b/frontend/styles/main.css index b377f3bb..747c7e08 100644 --- a/frontend/styles/main.css +++ b/frontend/styles/main.css @@ -3369,3 +3369,34 @@ input[type="checkbox"].compare-checkbox:checked::after { display: none; } } + +/* Hero responsive */ +@media (max-width: 768px) { + .hero-title { + font-size: 2.8rem; + } + .hero-content { + padding: 2rem; + } +} + +@media (max-width: 480px) { + .hero-title { + font-size: 2rem; + word-break: break-word; + } + .hero-subtitle { + font-size: 0.85rem; + } + .hero-content { + padding: 1.2rem; + } + .hero-buttons { + flex-direction: column; + width: 100%; + } + .hero-buttons .btn { + width: 100%; + max-width: 100%; + } +} From 7ebc896ae2cb126cc66e4895f19a401aea10ce8c Mon Sep 17 00:00:00 2001 From: Jagdish Prajapati Date: Sun, 28 Jun 2026 10:20:09 +0530 Subject: [PATCH 3/5] Add responsivenees compare mode --- frontend/leaderboard.html | 1 + frontend/styles/main.css | 79 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 80 insertions(+) diff --git a/frontend/leaderboard.html b/frontend/leaderboard.html index 76af64cd..ba325cc9 100644 --- a/frontend/leaderboard.html +++ b/frontend/leaderboard.html @@ -751,6 +751,7 @@

Leaderboard

style=" display: flex; gap: 10px; + flex-wrap: wrap; margin: 1.5rem 0 1rem 0; justify-content: center; " diff --git a/frontend/styles/main.css b/frontend/styles/main.css index 747c7e08..e594cdf7 100644 --- a/frontend/styles/main.css +++ b/frontend/styles/main.css @@ -3400,3 +3400,82 @@ input[type="checkbox"].compare-checkbox:checked::after { max-width: 100%; } } + +/* Compare Module Responsive */ +@media (max-width: 768px) { + .floating-compare-bar { + width: calc(100% - 32px); + max-width: 100%; + gap: 1rem; + padding: 0.75rem 1rem; + } + .floating-compare-bar .selected-list { + font-size: 0.78rem; + } + .compare-card { + padding: 20px 16px; + } + .compare-table th, + .compare-table td { + padding: 0.5rem 0.4rem; + font-size: 0.72rem; + } + .compare-chart-card { + height: 280px; + min-height: 280px; + max-height: 280px; + } + .compare-chart-card canvas { + height: calc(100% - 50px) !important; + } +} + +@media (max-width: 480px) { + .floating-compare-bar { + flex-direction: column; + gap: 0.75rem; + padding: 0.8rem 1rem; + text-align: center; + bottom: 12px; + } + .floating-compare-bar .actions { + width: 100%; + justify-content: center; + flex-wrap: wrap; + } + .floating-compare-bar .btn-compare, + .floating-compare-bar .btn-clear { + flex: 1; + text-align: center; + } + .compare-card { + padding: 16px 12px; + width: 100vw; + max-width: 100vw; + border-radius: 0; + } + .compare-card-header { + flex-direction: column; + gap: 12px; + align-items: center; + text-align: center; + } + .compare-card-title { + font-size: 0.82rem; + } + .compare-table th, + .compare-table td { + padding: 0.4rem 0.3rem; + font-size: 0.65rem; + white-space: nowrap; + } + .compare-chart-card { + height: 240px; + min-height: 240px; + max-height: 240px; + } + .compare-chart-title { + font-size: 0.68rem; + margin-bottom: 0.5rem; + } +} From 650d59ac5b910fa6b4fdc47c47cf5b77fb7d9218 Mon Sep 17 00:00:00 2001 From: Jagdish Prajapati Date: Sun, 28 Jun 2026 10:32:13 +0530 Subject: [PATCH 4/5] Fix realative path issue in 404 page --- frontend/404.html | 8 ++++---- server.js | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/404.html b/frontend/404.html index 4e73d60d..58740f67 100644 --- a/frontend/404.html +++ b/frontend/404.html @@ -4,14 +4,14 @@ 404 — Not Found | CodePVG - + - +