feat(header and footer): Enhance header and footer

- Add Aperi'Solve version in header
- Add logo, Aperi'Solve and version in footer
- Add github profile in README.md

README.md

@@ -99,6 +99,7 @@ Thanks to contributors:
 - [Zeecka](https://www.zeecka.fr/) - **(author)**
 - [aradhyacp](https://github.com/aradhyacp)
 - [Philip Zimmermann](https://github.com/Philip-Zimmermann)
+- [abneeeees](https://github.com/abneeeees)
 
 Thanks to the open-source community:
 [binwalk](https://github.com/ReFirmLabs/binwalk), [exiftool](https://exiftool.org/), [GraphicsMagick identify](http://www.graphicsmagick.org/identify.html), [foremost](https://foremost.sourceforge.net/), [openstego](https://www.openstego.com/), [outguess](https://www.rbcafe.com/software/outguess/), [pngcheck](https://www.libpng.org/pub/png/apps/pngcheck.html), [steghide](https://steghide.sourceforge.net/), [strings](https://pubs.opengroup.org/onlinepubs/9799919799/utilities/strings.html), [zsteg](https://github.com/zed-0xff/zsteg), ...

aperisolve/static/css/aperisolve.css

@@ -48,16 +48,32 @@ a,
     text-decoration: none;
 }
 
-a:hover {
-    color: #ccff66;
-    text-shadow: 0 0 5px #ccff66;
-}
-
 .title_link {
     text-decoration: none;
     color: inherit;
 }
 
+#water-logo {
+    height: 80px;
+    width: auto;
+}
+
+.title_text {
+    color: #ccff66;
+    text-shadow: 0 0 5px #ccff66;
+    font-size: 2.5rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.title_version {
+    color: #ccff66;
+    text-shadow: 0 0 5px #ccff66;
+    font-size: 1.25rem;
+    line-height: 1;
+    align-self: flex-end;
+}
+
 /* ======== Background ======== */
 
 #three-bg {
@@ -490,6 +506,37 @@ footer a i {
     width: auto;
 }
 
+#water-logo_footer {
+    height: 50px;
+    width: auto;
+    top: -6px;
+}
+
+.title_link_footer {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    white-space: nowrap;
+    text-decoration: none;
+    color: inherit;
+    transform: translateY(-15px);
+}
+
+.title_text_footer {
+    color: #ccff66;
+    text-shadow: 0 0 5px #ccff66;
+    font-size: 2.5rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.title_version_footer {
+    color: #ccff66;
+    text-shadow: 0 0 5px #ccff66;
+    font-size: 1.25rem;
+    align-self: flex-end;
+}
+
 /* ======== Utility ======== */
 
 .glow-border {

aperisolve/templates/base.html

@@ -16,7 +16,10 @@
   <div id="three-bg"></div>
   <div class="container mt-5">
     <a class="title_link" href="/">
-      <h1 class="mb-4"><img id="water-logo" src="/static/img/logo.svg" /> Aperi'Solve</h1>
+      <img src="/static/img/logo.svg" alt="logo" id="water-logo"/>
+      <span class="title_text">  Aperi'Solve </span>
+      <span class="title_version">v3.1.3</span>
+      <br><br>
     </a>
     {% block body_content %} {% endblock %}
   </div>
@@ -39,4 +42,4 @@
   {% include "footer.html" %}
 </body>
 
-</html>
+</html>

aperisolve/templates/footer.html

@@ -1,4 +1,11 @@
-<footer class="d-flex justify-content-center gap-4 my-4">
+<footer class="d-flex justify-content-center gap-4 my-4 flex-wrap">
+    <div>
+        <a class="title_link_footer" href="/">
+            <img src="/static/img/logo.svg" alt="logo" id="water-logo_footer"/>
+            <span class="title_text_footer">Aperi'Solve</span>
+            <span class="title_version_footer">v3.1.3</span>
+        </a>
+    </div>
     <div>
         <a href="https://buymeacoffee.com/aperisolve" title="Coffee" class="text-light text-decoration-none">
             <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" id="coffee" />

pyproject.toml

@@ -3,7 +3,7 @@
 
 [project]
 name = "aperisolve"
-version = "3.1.2"
+version = "3.1.3"
 description = "Open-source steganalysis web platform for automated image analysis and steganography detection"
 readme = "README.md"
 requires-python = ">=3.12"