From 75161e4957c2332e725c7683ef12732a933f3e33 Mon Sep 17 00:00:00 2001
From: Kibi Kelburton <git@f0ck.it>
Date: Thu, 16 Jul 2026 21:44:49 +0200
Subject: [PATCH] hgdfhf

---
 public/s/css/f0ckm.css  | 92 +++++++++++++++++++++++++++++++++++++++++
 public/s/js/settings.js | 45 +++++---------------
 2 files changed, 102 insertions(+), 35 deletions(-)

diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css
index b973318..4f2ef8c 100644
--- a/public/s/css/f0ckm.css
+++ b/public/s/css/f0ckm.css
@@ -16659,3 +16659,95 @@ a.lazy-thumb.filtered-upload-ghost:hover::after {
   line-height: 1.3;
   font-weight: 400;
 }
+
+/* ── Banner Crop Modal ─────────────────────────────────────────────────────── */
+
+.banner-crop-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  background: rgba(0, 0, 0, 0.92);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 20px;
+  box-sizing: border-box;
+  font-family: inherit;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.banner-crop-wrapper {
+  width: auto;
+  max-width: 1200px;
+  background: var(--bg);
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid var(--nav-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.banner-crop-title {
+  margin: 0;
+  color: #fff;
+}
+
+.banner-crop-hint {
+  color: #aaa;
+  font-size: 0.85em;
+  text-align: center;
+  margin-bottom: 4px;
+}
+
+.banner-crop-canvas-wrapper {
+  width: 100%;
+  max-width: 400px;
+  aspect-ratio: 400 / 120;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--nav-border-color);
+  border-radius: 4px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
+  background: #111;
+  margin: 0 auto;
+}
+
+.banner-crop-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: move;
+  touch-action: none;
+  pointer-events: auto !important;
+}
+
+.banner-crop-controls {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: 15px;
+}
+
+.banner-crop-zoom-label {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex: 1;
+  min-width: 200px;
+  color: #fff;
+}
+
+.banner-crop-zoom-slider {
+  flex: 1;
+}
+
+.banner-crop-actions {
+  display: flex;
+  gap: 10px;
+}
diff --git a/public/s/js/settings.js b/public/s/js/settings.js
index dadb212..b1bab93 100644
--- a/public/s/js/settings.js
+++ b/public/s/js/settings.js
@@ -370,69 +370,44 @@
     // ── Crop Modal ──────────────────────────────────────────────────────────
     const showBannerCropModal = (file, existingConfig = null) => new Promise((resolve) => {
         const overlay = document.createElement('div');
-        overlay.style.cssText = `
-            position:fixed;inset:0;z-index:99999;
-            background:rgba(0,0,0,0.92);
-            display:flex;flex-direction:column;align-items:center;justify-content:center;
-            gap:16px;padding:20px;box-sizing:border-box;
-            font-family: inherit;
-            user-select: none;
-            -webkit-user-select: none;
-        `;
+        overlay.className = 'banner-crop-overlay';
 
 
         const title = document.createElement('h3');
+        title.className = 'banner-crop-title';
         title.textContent = 'Position Banner';
-        title.style.margin = '0';
-        title.style.color = '#fff';
 
         const hint = document.createElement('div');
+        hint.className = 'banner-crop-hint';
         hint.textContent = 'Drag to position. Use the slider below to zoom.';
-        hint.style.cssText = 'color:#aaa;font-size:0.85em;text-align:center;margin-bottom:4px;';
 
         const canvasWrapper = document.createElement('div');
-        canvasWrapper.style.cssText = `
-            width: 100%;
-            max-width: 400px;
-            aspect-ratio: 400 / 140;
-            position: relative;
-            overflow: hidden;
-            border: 1px solid var(--nav-border-color);
-            border-radius: 4px;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.8);
-            background: #111;
-            margin: 0 auto;
-        `;
+        canvasWrapper.className = 'banner-crop-canvas-wrapper';
 
         const canvas = document.createElement('canvas');
+        canvas.className = 'banner-crop-canvas';
         canvas.width = 400;
         canvas.height = 140;
-        canvas.style.cssText = 'width:100%;height:100%;display:block;cursor:move;touch-action:none;pointer-events:auto !important;';
         canvasWrapper.appendChild(canvas);
 
         const controls = document.createElement('div');
-        controls.style.cssText = 'display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 15px;';
+        controls.className = 'banner-crop-controls';
 
         const zoomLabel = document.createElement('label');
+        zoomLabel.className = 'banner-crop-zoom-label';
         zoomLabel.textContent = 'Zoom:';
-        zoomLabel.style.display = 'flex';
-        zoomLabel.style.gap = '10px';
-        zoomLabel.style.alignItems = 'center';
-        zoomLabel.style.flex = '1';
-        zoomLabel.style.minWidth = '200px';
-        zoomLabel.style.color = '#fff';
 
         const zoomSlider = document.createElement('input');
         zoomSlider.type = 'range';
+        zoomSlider.className = 'banner-crop-zoom-slider';
         zoomSlider.min = '0';
         zoomSlider.max = '100';
         zoomSlider.step = '0.01';
         zoomSlider.value = '0';
-        zoomSlider.style.flex = '1';
         zoomLabel.appendChild(zoomSlider);
 
         const actions = document.createElement('div');
-        actions.style.cssText = 'display: flex; gap: 10px;';
+        actions.className = 'banner-crop-actions';
 
         const cancelBtn = document.createElement('button');
         cancelBtn.className = 'button button-danger';
@@ -449,7 +424,7 @@
         controls.appendChild(actions);
 
         const wrapper = document.createElement('div');
-        wrapper.style.cssText = 'width: 90%; max-width: 1200px; background: var(--bg); padding: 20px; border-radius: 8px; border: 1px solid var(--nav-border-color); display: flex; flex-direction: column; gap: 15px;';
+        wrapper.className = 'banner-crop-wrapper';
 
         wrapper.appendChild(title);
         wrapper.appendChild(hint);