venus/aperisolve
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor CSS work to refactor the landing page (#183)

Browse Source 
* Enhance landing UI with updated typography, button styles, and footer layout

* Update Fira Code font weight for improved typography

* Refactor footer layout for improved structure and readability

* Improve landing page UI by adding a question class to the header and simplifying the browse button style

* Remove unused font imports to optimize CSS file size

* Fix command comment in Dockerfile from french to english

* Fix footer CSS rule by closing the declaration block

* Update text-shadow properties for title elements and clean up footer styles

* Refactor footer HTML structure to simplify copyright display

* Add icon to 'Choose an image' button for improved UI

* Remove unnecessary footer-container styles to streamline layout
This commit is contained in:
Aradhya C P
2026-02-02 21:24:36 +01:00
committed by GitHub
parent 202b57e51e
commit 6660cd2e5d
5 changed files with 38 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dockerfile
+1 -1
View File
@@ -80,5 +80,5 @@ COPY --from=builder /usr/local/bin/jphide /usr/local/bin/jphide
COPY --from=builder /usr/local/bin/jpseek /usr/local/bin/jpseek
COPY --from=builder /usr/local/bin/jsteg /usr/local/bin/jsteg
# Commande de lancement
# Command to start
CMD gunicorn -w ${WEB_WORKERS:-8} -b 0.0.0.0:5000 --access-logfile - --error-logfile - --log-level info --capture-output aperisolve.utils.wsgi:application
aperisolve/static/css/aperisolve.css
+32 -4
View File
@@ -82,17 +82,19 @@ a:hover {
.title-text {
color: var(--theme-green);
text-shadow: 0 0 0.3125rem var(--theme-green-shadow);
text-shadow: 0 0 8px var(--theme-green-shadow2);
font-size: 2.5rem;
font-weight: 700;
font-weight: 400;
line-height: 1;
font-family: var(--font-base)
}
.title-version {
color: var(--theme-green);
text-shadow: 0 0 0.3125rem var(--theme-green-shadow);
text-shadow: 0 0 4px var(--theme-green-shadow2);
font-size: 1.25rem;
line-height: 1;
margin-top: 3px;
}
/* ======== Background ======== */
@@ -125,6 +127,12 @@ form {
border-radius: var(--border-radius);
}
.question{
color : var(--theme-green);
font-weight: 400;
font-family: var(--font-base);
}
/* Drop Zone */
.drop-zone {
background-color: var(--dark-bg);
@@ -143,7 +151,7 @@ form {
.btn, .btn-primary, .btn-hack {
background-color: var(--theme-green);
color: #000;
font-weight: bold;
/* font-weight: bold; */
border: none;
text-shadow: none;
transition: box-shadow 0.3s ease;
@@ -154,6 +162,23 @@ form {
box-shadow: 0 0 0.625rem var(--theme-green-shadow2);
}
/* Ensure the inline browse button inside the drop-zone shows the same hover behaviour */
#browse-btn {
background-color: var(--theme-green);
color: #000;
border: none;
text-shadow: none;
transition: box-shadow 0.3s ease;
pointer-events: auto;
}
#browse-btn:hover {
background-color: var(--theme-green);
box-shadow: 0 0 0.625rem var(--theme-green-shadow2);
transform: translateY(-0.0625rem);
color: white;
}
/* Bootstrap color overrides */
.text-success, .bg-success {
color: var(--theme-green) !important;
@@ -486,6 +511,7 @@ footer {
.footer-text {
color: var(--theme-green);
font-size: 0.9rem;
margin: 0 !important;
}
.footer-link {
@@ -494,6 +520,7 @@ footer {
transition: color 0.3s, text-shadow 0.3s;
display: inline-flex;
align-items: center;
}
.footer-link:hover {
@@ -666,6 +693,7 @@ footer {
padding: var(--spacing-sm);
font-size: 0.85rem;
}
}
/* Phones */
@media screen and (max-width: 36rem) {
aperisolve/templates/base.html
+1 -1
View File
@@ -9,7 +9,7 @@
<link rel="icon" type="image/svg+xml" href="/static/img/logo.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/aperisolve.css" rel="stylesheet">
aperisolve/templates/footer.html
+1 -1
View File
@@ -7,7 +7,7 @@
</div>
<!-- Links -->
<div class="d-flex align-items-center gap-3 flex-wrap">
<div class="d-flex align-items-center gap-3 flex-wrap link-container">
<a href="https://buymeacoffee.com/aperisolve" title="Buy Me A Coffee" class="footer-link">
<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" class="footer-icon-img" />
</a>
aperisolve/templates/index.html
+2 -2
View File
@@ -3,7 +3,7 @@
<form id="upload-form" class="card p-4 mb-4" method="POST" enctype="multipart/form-data">
<!-- Description Section -->
<section class="mb-4">
<h2 class="h4 mb-3">What is this?</h2>
<h2 class="h4 mb-3 question">What is this?</h2>
<p class="text-light-emphasis mb-0">
Aperi'Solve is an online platform which performs layer analysis on images.
The platform also uses zsteg, steghide, outguess, exiftool, binwalk, foremost and strings
@@ -17,7 +17,7 @@
<div id="drop-zone" class="drop-zone border border-2 border-dashed rounded-3 p-4 text-center">
<p id="drag-msg" class="mb-3">📂 Drag and drop an image here or click to select</p>
<input type="file" id="image" name="image" accept="image/*" class="visually-hidden" required>
<button type="button" class="btn btn-secondary" id="browse-btn" aria-label="Choose image file">
<button type="button" class="btn" id="browse-btn" aria-label="Choose image file">
<i class="fa fa-folder-open me-2"></i>Choose an image
</button>
</div>