From 68bf754762027694d99665396f8cf03e9ee25467 Mon Sep 17 00:00:00 2001 From: aradhyacp Date: Sat, 3 Jan 2026 20:46:46 +0530 Subject: [PATCH 1/9] Fix viewport meta tag for improved UI responsiveness --- aperisolve/templates/base.html | 1 + 1 file changed, 1 insertion(+) diff --git a/aperisolve/templates/base.html b/aperisolve/templates/base.html index 292879c..bfd2ddc 100644 --- a/aperisolve/templates/base.html +++ b/aperisolve/templates/base.html @@ -3,6 +3,7 @@ + Aperi'Solve From 3d459e1f8bb3e170dd73df5dcc7780fb78d7af1e Mon Sep 17 00:00:00 2001 From: aradhyacp Date: Sat, 3 Jan 2026 20:53:10 +0530 Subject: [PATCH 2/9] Enhance UI responsiveness by adding box-sizing and preventing horizontal overflow --- aperisolve/static/css/aperisolve.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/aperisolve/static/css/aperisolve.css b/aperisolve/static/css/aperisolve.css index 62d1901..90960a3 100644 --- a/aperisolve/static/css/aperisolve.css +++ b/aperisolve/static/css/aperisolve.css @@ -18,10 +18,15 @@ html { --bs-progress-bar-bg: #f00 !important; } +* { + box-sizing: border-box; +} + body { background-color: var(--dark-bg); color: #e0e0e0; font-family: 'Fira Code', monospace; + overflow-x: hidden; } /* ======== Typography ======== */ From 0f75666094491e849c01a2529d8e229570e89e18 Mon Sep 17 00:00:00 2001 From: aradhyacp Date: Sat, 3 Jan 2026 20:54:06 +0530 Subject: [PATCH 3/9] Improve UI responsiveness by adjusting table cell dimensions and modal image sizing --- aperisolve/static/css/aperisolve.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/aperisolve/static/css/aperisolve.css b/aperisolve/static/css/aperisolve.css index 90960a3..9ba02b1 100644 --- a/aperisolve/static/css/aperisolve.css +++ b/aperisolve/static/css/aperisolve.css @@ -224,7 +224,6 @@ pre { background-color: var(--dark-bg-hover); box-shadow: 0 0 10px var(--theme-green); } - #upload-form { transition: height 0.4s ease, padding 0.4s ease, margin 0.4s ease; overflow: hidden; @@ -274,6 +273,7 @@ td { display: inline-block; padding: 10px; box-sizing: border-box; + min-width: 150px; } /* ======== Modal ======== */ @@ -294,7 +294,10 @@ td { } #image-modal-container img { - width: 60%; + width: 90%; + max-width: 800px; + max-height: 90vh; + object-fit: contain; border: 2px solid var(--theme-green); box-shadow: 0 0 20px var(--theme-green); cursor: pointer; @@ -309,6 +312,7 @@ td { display: inline-block; padding: 10px; width: 25%; + min-width: 150px; } /* ======== FAQ ======== */ From 499108370c32175bdde8d3684af869978b5e159c Mon Sep 17 00:00:00 2001 From: aradhyacp Date: Sat, 3 Jan 2026 20:55:10 +0530 Subject: [PATCH 4/9] Enhance UI responsiveness by adjusting image and table dimensions, and improving layout flexibility --- aperisolve/static/css/aperisolve.css | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/aperisolve/static/css/aperisolve.css b/aperisolve/static/css/aperisolve.css index 9ba02b1..e55d80f 100644 --- a/aperisolve/static/css/aperisolve.css +++ b/aperisolve/static/css/aperisolve.css @@ -354,6 +354,19 @@ td { #cheatsheet img, #cheatsheet table { margin-bottom: 15px; + max-width: 100%; + height: auto; +} + +#cheatsheet table { + min-width: auto; + width: auto; +} + +.command { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + word-wrap: break-word; } /* ======== Analyzer Blocks ======== */ @@ -364,15 +377,14 @@ td { #result-infos { display: flex; + flex-wrap: wrap; + gap: 15px; } #result-infos>div { - height: 100%; - width: 50%; height: auto; - flex: 1 1 0; - width: 50%; - display: inline-block; + flex: 1 1 300px; + min-width: 280px; padding: 10px; box-sizing: border-box; vertical-align: top; From eb6e412635776a3fb29044599f22a4f54c6a5565 Mon Sep 17 00:00:00 2001 From: aradhyacp Date: Sat, 3 Jan 2026 20:56:09 +0530 Subject: [PATCH 5/9] Enhance UI responsiveness with media queries for various screen sizes, adjusting image and container widths --- aperisolve/static/css/aperisolve.css | 47 ++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/aperisolve/static/css/aperisolve.css b/aperisolve/static/css/aperisolve.css index e55d80f..1efc99f 100644 --- a/aperisolve/static/css/aperisolve.css +++ b/aperisolve/static/css/aperisolve.css @@ -412,6 +412,7 @@ footer { margin: 0 20px 20px 0; justify-content: flex-end !important; } + @media screen and (min-width: 1800px) { footer { position: fixed; @@ -446,3 +447,49 @@ footer a i { #httperror h1, #httperror h2{ text-align: center; } + +/* ======== Responsive Design ======== */ + +/* Large tablets and small desktops */ +@media screen and (max-width: 1200px) { + .results_img { + width: 33.333%; + } + + .browse-images { + width: 33.333%; + } +} + +/* Tablets */ +@media screen and (max-width: 992px) { + .container { + padding-left: 15px; + padding-right: 15px; + } + + .results_img { + width: 50%; + } + + .browse-images { + width: 50%; + } + + #result-infos { + flex-direction: column; + } + + #result-infos > div { + width: 100%; + flex: 1 1 100%; + } + + table { + font-size: 0.9rem; + } + + th, td { + padding: 0.5rem; + } +} \ No newline at end of file From d6ad1cf393634085002bb681d7141926843232ac Mon Sep 17 00:00:00 2001 From: aradhyacp Date: Sat, 3 Jan 2026 20:56:54 +0530 Subject: [PATCH 6/9] Enhance UI responsiveness for large phones and small tablets with media queries, adjusting font sizes, container paddings, and making tables scrollable --- aperisolve/static/css/aperisolve.css | 118 +++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) diff --git a/aperisolve/static/css/aperisolve.css b/aperisolve/static/css/aperisolve.css index 1efc99f..b069c3f 100644 --- a/aperisolve/static/css/aperisolve.css +++ b/aperisolve/static/css/aperisolve.css @@ -492,4 +492,122 @@ footer a i { th, td { padding: 0.5rem; } +} + + +/* Large phones and small tablets */ +@media screen and (max-width: 768px) { + body { + font-size: 14px; + } + + .container { + margin-top: 20px !important; + padding-left: 10px; + padding-right: 10px; + } + + h1 { + font-size: 1.5rem; + } + + h2 { + font-size: 1.25rem; + } + + h3 { + font-size: 1.1rem; + } + + #water-logo { + width: 50px; + } + + .card, .form-control, .table, .border, .card-hack { + border-radius: 0.35rem; + } + + .card { + padding: 15px !important; + } + + #drop-zone { + padding: 20px !important; + } + + #drop-zone p { + font-size: 0.9rem; + } + + .results_img { + width: 50%; + padding: 5px; + } + + .browse-images { + width: 50%; + padding: 5px; + } + + textarea.form-control, pre { + padding: 15px; + font-size: 0.85rem; + } + + .a-strings textarea { + height: 250px; + } + + .a-exiftool .table-container { + max-height: 300px; + } + + /* Make tables scrollable horizontally */ + .table-container { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + table { + font-size: 0.8rem; + min-width: 400px; + } + + th, td { + padding: 0.4rem; + word-break: break-word; + } + + footer { + justify-content: center !important; + margin: 20px 0; + flex-wrap: wrap; + gap: 15px; + } + + footer a i { + font-size: 28px; + } + + #coffee { + height: 28px; + } + + /* FAQ/Cheatsheet adjustments */ + #cheatsheet > div { + padding: 8px; + margin-bottom: 30px; + } + + #cheatsheet img { + max-width: 100%; + height: auto; + } + + .command { + padding: 8px; + font-size: 0.85rem; + overflow-x: auto; + white-space: nowrap; + } } \ No newline at end of file From 77118738df85c09d586ebf129bce28be9fe2c8f9 Mon Sep 17 00:00:00 2001 From: aradhyacp Date: Sat, 3 Jan 2026 20:57:29 +0530 Subject: [PATCH 7/9] Enhance UI responsiveness for small devices by adjusting font sizes, paddings, and layout elements --- aperisolve/static/css/aperisolve.css | 116 +++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) diff --git a/aperisolve/static/css/aperisolve.css b/aperisolve/static/css/aperisolve.css index b069c3f..fd88544 100644 --- a/aperisolve/static/css/aperisolve.css +++ b/aperisolve/static/css/aperisolve.css @@ -610,4 +610,120 @@ footer a i { overflow-x: auto; white-space: nowrap; } +} + +/* Phones */ +@media screen and (max-width: 576px) { + body { + font-size: 13px; + } + + .container { + margin-top: 15px !important; + padding-left: 8px; + padding-right: 8px; + } + + h1 { + font-size: 1.3rem; + } + + h2 { + font-size: 1.1rem; + } + + h3 { + font-size: 1rem; + } + + #water-logo { + width: 40px; + } + + .card { + padding: 12px !important; + } + + #drop-zone { + padding: 15px !important; + } + + #drop-zone p { + font-size: 0.85rem; + } + + .btn, .btn-primary, .btn-hack { + width: 100%; + padding: 12px; + font-size: 1rem; + } + + .results_img { + width: 100%; + padding: 5px; + } + + .browse-images { + width: 100%; + padding: 5px; + } + + #result-infos > div { + padding: 5px; + } + + textarea.form-control, pre { + padding: 10px; + font-size: 0.8rem; + } + + .a-strings textarea { + height: 200px; + } + + .a-exiftool .table-container { + max-height: 250px; + } + + table { + font-size: 0.75rem; + } + + th, td { + padding: 0.3rem; + } + + .copy-icon { + display: block; + right: 5px; + margin-top: -35px; + } + + footer { + gap: 12px; + } + + footer a i { + font-size: 24px; + } + + #coffee { + height: 24px; + } + + #image-modal-container img { + width: 95%; + } + + .analyzer { + margin-top: 15px; + } + + .analyzer h2 + div { + margin-top: 10px; + } + + .analyzer h3 { + margin-top: 15px; + } } \ No newline at end of file From 77859aa9eb06ad74f8b6d01026d5d5a70a7f92fd Mon Sep 17 00:00:00 2001 From: aradhyacp Date: Sat, 3 Jan 2026 20:57:52 +0530 Subject: [PATCH 8/9] Enhance FAQ/Cheatsheet layout by adjusting padding and font sizes for list items and commands --- aperisolve/static/css/aperisolve.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/aperisolve/static/css/aperisolve.css b/aperisolve/static/css/aperisolve.css index fd88544..70cafff 100644 --- a/aperisolve/static/css/aperisolve.css +++ b/aperisolve/static/css/aperisolve.css @@ -726,4 +726,19 @@ footer a i { .analyzer h3 { margin-top: 15px; } + + /* FAQ/Cheatsheet adjustments */ + #cheatsheet li { + padding-left: 20px; + font-size: 0.9rem; + } + + .command { + font-size: 0.75rem; + padding: 6px; + } + + #httperror { + padding-top: 50px; + } } \ No newline at end of file From f60925be9b97e2ee23ce78a9a6097e695ae53383 Mon Sep 17 00:00:00 2001 From: aradhyacp Date: Sat, 3 Jan 2026 20:58:43 +0530 Subject: [PATCH 9/9] Enhance UI responsiveness for extra small devices and touch optimizations with media queries --- aperisolve/static/css/aperisolve.css | 94 +++++++++++++++++++++++++++- 1 file changed, 92 insertions(+), 2 deletions(-) diff --git a/aperisolve/static/css/aperisolve.css b/aperisolve/static/css/aperisolve.css index 70cafff..732a323 100644 --- a/aperisolve/static/css/aperisolve.css +++ b/aperisolve/static/css/aperisolve.css @@ -726,7 +726,7 @@ footer a i { .analyzer h3 { margin-top: 15px; } - + /* FAQ/Cheatsheet adjustments */ #cheatsheet li { padding-left: 20px; @@ -741,4 +741,94 @@ footer a i { #httperror { padding-top: 50px; } -} \ No newline at end of file +} + +/* Extra small phones */ +@media screen and (max-width: 380px) { + body { + font-size: 12px; + } + + h1 { + font-size: 1.1rem; + } + + #water-logo { + width: 35px; + } + + .btn, .btn-primary, .btn-hack { + padding: 10px; + font-size: 0.9rem; + } + + footer a i { + font-size: 22px; + } + + #coffee { + height: 22px; + } +} + + +/* Touch device optimizations */ +@media (hover: none) and (pointer: coarse) { + .copy-icon { + display: block; + opacity: 0.7; + } + + .btn, .btn-primary, .btn-hack { + min-height: 44px; + } + + input, textarea, select { + font-size: 16px; /* Prevents zoom on iOS */ + } + + a, button { + min-height: 44px; + min-width: 44px; + } +} + +/* Landscape mode on phones */ +@media screen and (max-height: 500px) and (orientation: landscape) { + .container { + margin-top: 10px !important; + } + + #image-modal-container img { + max-height: 85vh; + width: auto; + max-width: 95%; + } +} + +/* Print styles */ +@media print { + #three-bg { + display: none; + } + + body { + background-color: white; + color: black; + } + + .card, .form-control, .table, .border, .card-hack { + background-color: white; + border-color: #333 !important; + box-shadow: none; + } + + h1, h2, h3, h4, h5, h6, strong, .highlight { + color: #333; + text-shadow: none; + } + + a, .text-accent { + color: #333; + } +}