Restyle the UI to match lumeex's back-office look, add repo links

Reworked static/style.css to follow the same visual language as lumeex's back office (near-black background, cyan accent, gradient pill buttons, translucent bordered panels) instead of the previous generic dark-teal theme. Dropzones now use a dashed border while empty, turning solid once a file is picked. Also fixes a stale CSS selector (.dropzone label.tag) that never matched the actual markup (a <span>), so the SDR/HDR tag labels were unstyled before. Adds Gitea and GitHub repo links in the footer, using the same icons and link pattern as lumeex.
2026-08-01 14:33:48 +02:00
parent fefcef4021
commit d67a2569f4
10 changed files with 156 additions and 88 deletions
@@ -13,15 +13,8 @@ itself based on the reverse-engineering work of
 [karachungen/instagram-hdr-converter](https://github.com/karachungen/instagram-hdr-converter).
 Original MIT license kept in [LICENSE](LICENSE). 

-Only the upstream's Method 2 (starting from an HDR JPEG that already
-carries a gain map) is implemented here. Method 1's AVIF decoding and
-its quality/transfer/gamut settings were dropped, but the HDR side can
-still be a 32-bit float linear TIFF (Lightroom's HDR TIFF export)
-instead of a gain-map JPEG for a more precise result. Either way the
-gain map is recomputed rather than reused as-is (see below), since it
-needs to be correct against the SDR file you actually provide.

-![Instagram HDR Assembler screenshot](screenshots/insta-hdr.png)
+![Instagram HDR Assembler screenshot](screenshots/insta-hdr-1.png)

 ## How it works

@@ -8,8 +8,4 @@ services:
    container_name: instagram-hdr-web
    restart: unless-stopped
    ports:
-      - "5050:5000"  # host:container — change 5050 if that's taken too
-    # Put a reverse proxy (Traefik/nginx/SWAG) in front of this if you
-    # want it reachable outside your LAN — the Flask app itself has no
-    # auth and no rate limiting, so keep it internal-only or add both
-    # before exposing it further than your own network.
+      - "5050:5000"  # host:container — change 5050 if that's taken too
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#48cf51ff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Gitea icon</title><path d="M4.186 5.421C2.341 5.417-.13 6.59.006 9.531c.213 4.594 4.92 5.02 6.801 5.057.206.862 2.42 3.834 4.059 3.99h7.18c4.306-.286 7.53-13.022 5.14-13.07-3.953.186-6.296.28-8.305.296v3.975l-.626-.277-.004-3.696c-2.306-.001-4.336-.108-8.189-.298-.482-.003-1.154-.085-1.876-.087zm.261 1.625h.22c.262 2.355.688 3.732 1.55 5.836-2.2-.26-4.072-.899-4.416-3.285-.178-1.235.422-2.524 2.646-2.552zm8.557 2.315c.15.002.303.03.447.096l.749.323-.537.979a.672.597 0 0 0-.241.038.672.597 0 0 0-.405.764.672.597 0 0 0 .112.174l-.926 1.686a.672.597 0 0 0-.222.038.672.597 0 0 0-.405.764.672.597 0 0 0 .86.36.672.597 0 0 0 .404-.765.672.597 0 0 0-.158-.22l.902-1.642a.672.597 0 0 0 .293-.03.672.597 0 0 0 .213-.112c.348.146.633.265.838.366.308.152.417.253.45.365.033.11-.003.322-.177.694-.13.277-.345.67-.599 1.133a.672.597 0 0 0-.251.038.672.597 0 0 0-.405.764.672.597 0 0 0 .86.36.672.597 0 0 0 .404-.764.672.597 0 0 0-.137-.202c.251-.458.467-.852.606-1.148.188-.402.286-.701.2-.99-.086-.289-.35-.477-.7-.65-.23-.113-.517-.233-.86-.377a.672.597 0 0 0-.038-.239.672.597 0 0 0-.145-.209l.528-.963 2.924 1.263c.528.229.746.79.49 1.26l-2.01 3.68c-.257.469-.888.663-1.416.435l-4.137-1.788c-.528-.228-.747-.79-.49-1.26l2.01-3.679c.176-.323.53-.515.905-.53h.064z"/></svg>
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+    <title>github [#142]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#ffffffff">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>
@@ -1,17 +1,25 @@
 :root {
-  --bg: #14161a;
-  --surface: #1c1f25;
-  --surface-raised: #242830;
-  --border: #33373f;
-  --text: #eef1f4;
-  --text-muted: #8b93a0;
-  --accent: #2dd4bf;
-  --accent-dim: #2a8577;
-  --ok: #7fa37a;
-  --err: #c4604a;
-  --serif: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif;
+  --bg: #111010;
+  --surface: rgb(67 67 67 / 26%);
+  --surface-raised: #1f2223;
+  --surface-focus: #161616;
+  --border: #2f2e2e80;
+  --border-solid: #585858;
+  --text: #fbfbfb;
+  --text-muted: #9a9a9a;
+  --placeholder: #585858;
+  --accent: #55c3ec;
+  --accent-start: #26c4ff;
+  --accent-end: #016074;
+  --accent-hover-start: #72d9ff;
+  --accent-hover-end: #26657e;
+  --gold: #ffc700;
+  --ok: #049b3d;
+  --ok-bright: #28c76f;
+  --err: #dc3545;
+  --err-dim: rgb(121 26 19);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
-  --sans: -apple-system, "Segoe UI", system-ui, sans-serif;
+  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }

 * { box-sizing: border-box; }
@@ -20,8 +28,6 @@ body {
  margin: 0;
  padding: 3rem 1.5rem 5rem;
  background: var(--bg);
-  background-image:
-    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(45, 212, 191, 0.07), transparent);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
@@ -34,19 +40,20 @@ body {
 }

 .eyebrow {
-  font-family: var(--mono);
-  font-size: 0.72rem;
-  letter-spacing: 0.14em;
+  font-family: var(--sans);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
 }

 h1 {
-  font-family: var(--serif);
-  font-weight: 500;
-  font-size: 2.1rem;
-  line-height: 1.15;
+  font-family: var(--sans);
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 1.2;
  margin: 0 0 0.5rem;
  color: var(--text);
 }
@@ -54,14 +61,15 @@ h1 {
 .subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
-  margin: 0 0 2.5rem;
+  margin: 0 0 2rem;
  max-width: 46ch;
 }

 .card {
  background: var(--surface);
  border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1.75rem;
 }

@@ -91,32 +99,33 @@ form { display: block; }
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-solid);
  border-radius: 50%;
-  background: var(--surface-raised);
+  background: #2d2d2d;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  z-index: 1;
+  transition: background 0.2s ease, color 0.2s ease;
 }

 .duo:first-child .remove-duo { display: none; }
-.remove-duo:hover { color: var(--err); border-color: var(--err); }
+.remove-duo:hover { background: var(--err-dim); color: var(--text); }

 .add-duo {
  display: block;
  width: 100%;
  background: transparent;
-  border: 1px dashed var(--border);
-  color: var(--text-muted);
+  border: 1px solid var(--border-solid);
+  color: var(--text);
  padding: 0.6rem 1rem;
-  border-radius: 7px;
+  border-radius: 30px;
  font-size: 0.85rem;
  cursor: pointer;
-  transition: border-color 0.15s ease, color 0.15s ease;
+  transition: background 0.2s ease;
 }

-.add-duo:hover { color: var(--text); border-color: var(--accent-dim); }
+.add-duo:hover { background: #2d2d2d; }

 .checkbox-row {
  display: flex;
@@ -128,7 +137,7 @@ form { display: block; }
  cursor: pointer;
 }

-.checkbox-row input { cursor: pointer; }
+.checkbox-row input { cursor: pointer; accent-color: var(--accent); }

 .dropzones {
  display: grid;
@@ -143,7 +152,7 @@ form { display: block; }

 .dropzone {
  position: relative;
-  border: 1px dashed var(--border);
+  border: 1px dashed var(--border-solid);
  border-radius: 8px;
  padding: 1.25rem 1rem;
  text-align: center;
@@ -152,20 +161,21 @@ form { display: block; }
 }

 .dropzone:has(input:focus-visible) {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
+  border-color: var(--accent);
+  background: var(--surface-focus);
 }

 .dropzone.has-file {
-  border-color: var(--accent-dim);
  border-style: solid;
+  border-color: var(--accent);
 }

-.dropzone label.tag {
+.dropzone .tag {
  display: block;
-  font-family: var(--mono);
-  font-size: 0.68rem;
-  letter-spacing: 0.1em;
+  font-family: var(--sans);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
@@ -197,26 +207,27 @@ form { display: block; }
 button.run {
  width: 100%;
  margin-top: 1.5rem;
-  background: var(--accent);
-  color: #06211d;
+  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
+  color: #fff;
  border: none;
-  padding: 0.75rem 1rem;
-  border-radius: 7px;
+  padding: 0.8rem 1rem;
+  border-radius: 30px;
  font-size: 0.95rem;
-  font-weight: 600;
+  font-weight: 700;
  cursor: pointer;
-  transition: background 0.15s ease;
+  box-shadow: 0 4px 16px rgba(38, 196, 255, 0.15);
+  transition: background 0.2s ease;
 }

-button.run:hover { background: #5eead4; }
+button.run:hover { background: linear-gradient(135deg, var(--accent-hover-start), var(--accent-hover-end)); }
 button.run:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

 .error-banner {
-  background: rgba(196, 96, 74, 0.12);
-  border: 1px solid rgba(196, 96, 74, 0.4);
-  color: #e2a795;
+  background: rgba(220, 53, 69, 0.12);
+  border: 1px solid rgba(220, 53, 69, 0.4);
+  color: #f28b95;
  padding: 0.7rem 0.9rem;
-  border-radius: 7px;
+  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
 }
@@ -225,36 +236,36 @@ button.run:focus-visible { outline: 2px solid var(--text); outline-offset: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
-  font-family: var(--mono);
+  font-family: var(--sans);
+  font-weight: 700;
  font-size: 0.8rem;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  padding: 0.35rem 0.7rem;
-  border-radius: 5px;
+  letter-spacing: 0.02em;
+  padding: 0.35rem 0.9rem;
+  border-radius: 30px;
  margin-bottom: 1.25rem;
 }

-.status.ok { background: rgba(127, 163, 122, 0.14); color: var(--ok); }
-.status.err { background: rgba(196, 96, 74, 0.14); color: var(--err); }
+.status.ok { background: rgba(4, 155, 61, 0.16); color: var(--ok-bright); }
+.status.err { background: rgba(220, 53, 69, 0.14); color: #f28b95; }

 .warning-banner {
-  background: rgba(45, 212, 191, 0.1);
-  border: 1px solid rgba(45, 212, 191, 0.35);
-  color: var(--accent);
+  background: rgba(255, 199, 0, 0.1);
+  border: 1px solid rgba(255, 199, 0, 0.35);
+  color: var(--gold);
  padding: 0.7rem 0.9rem;
-  border-radius: 7px;
+  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
 }

 pre.log {
-  background: #0e1015;
+  background: #0a0a0a;
  border: 1px solid var(--border);
-  border-radius: 7px;
+  border-radius: 8px;
  padding: 1rem;
  font-family: var(--mono);
  font-size: 0.76rem;
-  color: #b6c0c8;
+  color: #c7c7c7;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
@@ -273,24 +284,24 @@ pre.log {
 .btn-secondary {
  display: inline-block;
  text-decoration: none;
-  padding: 0.65rem 1.1rem;
-  border-radius: 7px;
+  padding: 0.65rem 1.3rem;
+  border-radius: 30px;
  font-size: 0.88rem;
-  font-weight: 600;
+  font-weight: 700;
 }

 .btn-download {
-  background: var(--accent);
-  color: #06211d;
+  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
+  color: #fff;
 }
-.btn-download:hover { background: #5eead4; }
+.btn-download:hover { background: linear-gradient(135deg, var(--accent-hover-start), var(--accent-hover-end)); }

 .btn-secondary {
  background: transparent;
-  color: var(--text-muted);
-  border: 1px solid var(--border);
+  color: var(--text);
+  border: 1px solid var(--border-solid);
 }
-.btn-secondary:hover { color: var(--text); border-color: var(--accent-dim); }
+.btn-secondary:hover { background: #2d2d2d; }

 .footnote {
  margin-top: 2rem;
@@ -302,6 +313,7 @@ pre.log {
 .footnote code {
  font-family: var(--mono);
  background: var(--surface-raised);
+  color: var(--accent);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
 }
@@ -312,4 +324,30 @@ pre.log {
  font-family: var(--mono);
  font-size: 0.7rem;
  opacity: 0.6;
-}
+}
+
+.repo-links {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.6rem;
+}
+
+.repo-links a {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.repo-links a:hover { color: var(--text); }
+
+.repo-links .icon {
+  width: 14px;
+  height: 14px;
+  display: flex;
+}
+
+.repo-links .icon img { width: 100%; height: 100%; }
@@ -59,6 +59,16 @@
      than the JPEG gain-map route.
    </p>
    <p class="version">Instagram HDR Assembler v{{ app_version }}</p>
+    <div class="repo-links">
+      <a href="https://git.djeex.fr/Djeex/insta-hdr-converter" target="_blank" rel="noopener">
+        <span class="icon"><img src="{{ url_for('static', filename='gitea.svg') }}" alt=""></span>
+        Gitea
+      </a>
+      <a href="https://github.com/Djeex/insta-hdr-converter" target="_blank" rel="noopener">
+        <span class="icon"><img src="{{ url_for('static', filename='github.svg') }}" alt=""></span>
+        GitHub
+      </a>
+    </div>
  </div>

  <script>
@@ -44,6 +44,16 @@
      <code>Original</code> as the crop — not the default 1:1 crop.
    </p>
    <p class="version">Instagram HDR Assembler v{{ app_version }}</p>
+    <div class="repo-links">
+      <a href="https://git.djeex.fr/Djeex/insta-hdr-converter" target="_blank" rel="noopener">
+        <span class="icon"><img src="{{ url_for('static', filename='gitea.svg') }}" alt=""></span>
+        Gitea
+      </a>
+      <a href="https://github.com/Djeex/insta-hdr-converter" target="_blank" rel="noopener">
+        <span class="icon"><img src="{{ url_for('static', filename='github.svg') }}" alt=""></span>
+        GitHub
+      </a>
+    </div>
  </div>

  <script>