diff --git a/product-img-save.php b/product-img-save.php
index 9441a0b..1d9c79b 100644
--- a/product-img-save.php
+++ b/product-img-save.php
@@ -1,12 +1,12 @@
 <?php
 // upload.php
 
-// Налаштування папок (Ustawienia katalogów)
+// Ustawienia katalogów
 $uploadDir = 'product_uploads/' . $_POST['product_id'] . '/';
 $originalDir = $uploadDir . 'originals/';
 $croppedDir = $uploadDir . 'cropped/';
 
-// Створюємо папки, якщо немає (Tworzenie katalogów, jeśli nie istnieją)
+// Tworzenie katalogów, jeśli nie istnieją
 if (!file_exists($originalDir)) mkdir($originalDir, 0777, true);
 if (!file_exists($croppedDir)) mkdir($croppedDir, 0777, true);
 
@@ -32,7 +32,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         }
     }
 
-    // Відповідь клієнту (Odpowiedź)
+    // Odpowiedź
     if ($successOriginal && $successCropped) {
         echo "<div style='color:green; border: 1px solid green; padding: 10px;'>";
         echo "<strong>Zapisano pomyślnie!</strong><br>";
@@ -40,9 +40,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         echo "Wykadrowane: " . $croppedPath;
         echo "</div>";
         
-        // Тут можна додати SQL запит до БД (Tutaj można dodać zapytanie SQL do bazy danych)
-        // Np.: INSERT INTO product_images (original, cropped) VALUES ('$originalPath', '$croppedPath');
-        
+        // Tutaj można dodać zapytanie SQL do bazy danych)
     } else {
         echo "<div style='color:red;'>Wystąpił błąd podczas zapisywania plików.</div>";
     }
diff --git a/product-img-upl.php b/product-img-upl.php
index f1bea28..8e655fa 100644
--- a/product-img-upl.php
+++ b/product-img-upl.php
@@ -3,180 +3,239 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Przesyłanie i kadrowanie zdjęć</title>
+  <title>Edytor Zdjęć Produktowych</title>
 
   <style>
-    body { font-family: sans-serif; padding: 20px; }
+    /* --- GŁÓWNE STYLE --- */
+    body { font-family: sans-serif; padding: 20px; color: #333; }
+    h2 { margin-bottom: 20px; }
 
+    /* --- WRAPPER CROPPERA --- */
     .cropper-wrapper {
+      position: relative;
       width: 100%;
       height: 500px;
-      background: #333;
-      margin-bottom: 10px;
-      display: none;
-      position: relative;
+      background: #222;
+      margin-bottom: 15px;
+      border-radius: 8px;
       overflow: hidden;
-      border-radius: 6px;
+      display: none; /* Ukryty domyślnie */
       user-select: none;
-      touch-action: none; /* важливо для drag на мобільних */
+      touch-action: none;
     }
 
     cropper-canvas { width: 100%; height: 100%; }
 
-    .btn {
-      padding: 10px 16px;
-      background-color: #007bff;
-      color: white;
-      border: none;
-      cursor: pointer;
-      font-size: 16px;
-      border-radius: 6px;
-    }
-    .btn:disabled { background-color: #ccc; cursor: not-allowed; }
-
-    /* Червона рамка і не блокує drag */
+    /* Stała ramka wyboru */
     cropper-selection {
-      outline: 3px solid red !important;
+      outline: 2px solid #e74c3c !important; /* Czerwona ramka */
       pointer-events: none;
     }
 
+    /* --- OVERLAY I UCHWYTY (HANDLES) --- */
+    .photo-handles {
+      position: absolute;
+      inset: 0;
+      pointer-events: none; /* Kluczowe: przepuszcza kliki do obrazka */
+      z-index: 20;
+    }
+
+    .photo-outline {
+      position: absolute;
+      inset: 6px;
+      border: 2px dashed rgba(255, 255, 255, 0.6);
+      border-radius: 6px;
+    }
+
+    .handle {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: #fff;
+      border: 2px solid #007bff;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.4);
+      pointer-events: auto; /* Tylko kropki są klikalne */
+      transition: transform 0.1s;
+    }
+    .handle:active { transform: scale(1.2); }
+
+    /* Pozycje uchwytów */
+    .handle.tl { left: 10px; top: 10px; cursor: nwse-resize; }
+    .handle.tr { right: 10px; top: 10px; cursor: nesw-resize; }
+    .handle.bl { left: 10px; bottom: 10px; cursor: nesw-resize; }
+    .handle.br { right: 10px; bottom: 10px; cursor: nwse-resize; }
+
+    /* --- PASEK NARZĘDZI --- */
     #toolbar {
       display: none;
       gap: 10px;
       align-items: center;
-      margin: 10px 0 15px 0;
       flex-wrap: wrap;
+      margin-bottom: 20px;
     }
     #toolbar.show { display: flex; }
-    #toolbar .btn { padding: 8px 14px; font-size: 16px; }
 
-    #hint { color: #444; font-size: 14px; margin-left: 6px; }
-    .chip {
-      padding: 6px 10px;
-      border: 1px solid #ddd;
-      border-radius: 999px;
-      font-size: 13px;
-      background: #f7f7f7;
-    }
-
-    /* ====== РУЧКИ "RESIZE FOTO" (overlay) ====== */
-    .photo-handles {
-      position: absolute;
-      inset: 0;
-      pointer-events: none; /* включимо лише коли активні */
-      z-index: 20;
-    }
-    .photo-handles.active {
-      pointer-events: auto;
-    }
-    .handle {
-      position: absolute;
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
-      background: #fff;
-      border: 2px solid #007bff;
-      box-shadow: 0 1px 4px rgba(0,0,0,0.35);
-      pointer-events: auto;
-    }
-    .handle.nw { left: 10px; top: 10px; cursor: nwse-resize; }
-    .handle.ne { right: 10px; top: 10px; cursor: nesw-resize; }
-    .handle.sw { left: 10px; bottom: 10px; cursor: nesw-resize; }
-    .handle.se { right: 10px; bottom: 10px; cursor: nwse-resize; }
-
-    /* маленька рамка для “фото-режиму” */
-    .photo-outline {
-      position: absolute;
-      inset: 6px;
-      border: 2px dashed rgba(255,255,255,0.5);
+    .btn {
+      padding: 8px 16px;
+      background-color: #007bff;
+      color: white;
+      border: none;
+      cursor: pointer;
+      font-size: 15px;
       border-radius: 6px;
-      pointer-events: none;
+      transition: background 0.2s;
     }
+    .btn:hover { background-color: #0056b3; }
+    .btn:disabled { background-color: #ccc; cursor: not-allowed; }
+
+    .chip {
+      padding: 6px 12px;
+      border: 1px solid #ccc;
+      border-radius: 20px;
+      font-size: 13px;
+      background: #f8f9fa;
+      font-weight: 600;
+    }
+    
+    #hint { font-size: 13px; color: #666; margin-left: auto; }
   </style>
 </head>
 
 <body>
+
   <h2>Przesyłanie zdjęcia produktu</h2>
 
   <div style="margin-bottom: 20px;">
-    <label for="inputImage">Wybierz zdjęcie:</label>
-    <input type="file" id="inputImage" accept="image/*" />
+    <label class="btn" for="inputImage">📂 Wybierz zdjęcie</label>
+    <input type="file" id="inputImage" accept="image/*" style="display:none" />
+    <span id="fileName" style="margin-left: 10px; color:#555;"></span>
   </div>
 
   <div class="cropper-wrapper" id="cropperWrapper">
     <cropper-canvas id="my-cropper" background>
-      <cropper-image
-        id="cropperImage"
-        initial-center-size="cover"
-        translatable
+      <cropper-image 
+        id="cropperImage" 
+        initial-center-size="cover" 
+        translatable 
         scalable
       ></cropper-image>
-
-      <!-- Drag obrazu -->
+      
       <cropper-handle action="move" plain></cropper-handle>
 
-      <!-- Stała ramka (format admina ustawiamy w JS) -->
       <cropper-selection id="cropperSelection" initial-coverage="0.6"></cropper-selection>
     </cropper-canvas>
 
-    <!-- Overlay: “resize foto za rogi” -->
-    <div class="photo-handles active" id="photoHandles">
+    <div class="photo-handles" id="photoHandles">
       <div class="photo-outline"></div>
-      <div class="handle nw" data-corner="nw" title="Zmień rozmiar zdjęcia"></div>
-      <div class="handle ne" data-corner="ne" title="Zmień rozmiar zdjęcia"></div>
-      <div class="handle sw" data-corner="sw" title="Zmień rozmiar zdjęcia"></div>
-      <div class="handle se" data-corner="se" title="Zmień rozmiar zdjęcia"></div>
+      <div class="handle tl" data-pos="top" title="Zmień rozmiar"></div>
+      <div class="handle tr" data-pos="top" title="Zmień rozmiar"></div>
+      <div class="handle bl" data-pos="bottom" title="Zmień rozmiar"></div>
+      <div class="handle br" data-pos="bottom" title="Zmień rozmiar"></div>
     </div>
   </div>
 
   <div id="toolbar">
-    <button type="button" class="btn" id="zoomIn">+</button>
-    <button type="button" class="btn" id="zoomOut">-</button>
-    <button type="button" class="btn" id="resetImg">Reset</button>
+    <button type="button" class="btn" id="btnZoomIn">+</button>
+    <button type="button" class="btn" id="btnZoomOut">-</button>
+    <button type="button" class="btn" id="btnReset">Reset</button>
     <span class="chip" id="formatInfo"></span>
-    <span id="hint">Przesuwaj zdjęcie myszą/palcem, zoom kółkiem lub złap za rogi</span>
+    <span id="hint">Mysz/Dotyk: Przesuń | Kółko/Rogi: Zoom</span>
   </div>
 
-  <button id="btnUpload" class="btn" style="display:none;">Przytnij i Zapisz</button>
+  <button id="btnUpload" class="btn" style="display:none; width: 100%; padding: 12px;">Przytnij i Zapisz</button>
   <div id="result" style="margin-top: 20px;"></div>
 
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://unpkg.com/cropperjs@2.1.0/dist/cropper.js"></script>
 
   <script>
-    $(document).ready(function () {
-      const $inputImage = $("#inputImage");
-      const $cropperWrapper = $("#cropperWrapper");
-      const $btnUpload = $("#btnUpload");
-      const $toolbar = $("#toolbar");
+    /**
+     * KONFIGURACJA
+     * Wszystkie stałe w jednym miejscu dla łatwej edycji.
+     */
+    const CONFIG = {
+      dims: {
+        adminW: 8,    // cm
+        adminH: 12,   // cm
+        outputW: 800, // px
+        outputH: 1200 // px
+      },
+      zoomSensitivity: 0.004,
+      selectors: {
+        input: '#inputImage',
+        fileName: '#fileName',
+        wrapper: '#cropperWrapper',
+        uploadBtn: '#btnUpload',
+        toolbar: '#toolbar',
+        result: '#result',
+        cropperCanvas: 'my-cropper',
+        cropperImage: 'cropperImage',
+        cropperSelection: 'cropperSelection',
+        handles: '.handle'
+      }
+    };
 
-      const cropperCanvas = document.getElementById("my-cropper");
-      const cropperSelection = document.getElementById("cropperSelection");
-      const cropperImage = document.getElementById("cropperImage");
+    /**
+     * STATE
+     * Przechowywanie stanu aplikacji
+     */
+    const State = {
+      isResizing: false,
+      startY: 0,
+      isInverted: false // Czy używamy dolnych uchwytów (odwrócona logika)
+    };
 
-      const photoHandles = document.getElementById("photoHandles");
+    /**
+     * DOM MANAGER
+     * Cache'owanie elementów jQuery i JS
+     */
+    const DOM = {
+      $input: $(CONFIG.selectors.input),
+      $name: $(CONFIG.selectors.fileName),
+      $wrapper: $(CONFIG.selectors.wrapper),
+      $uploadBtn: $(CONFIG.selectors.uploadBtn),
+      $toolbar: $(CONFIG.selectors.toolbar),
+      $result: $(CONFIG.selectors.result),
+      elCanvas: document.getElementById(CONFIG.selectors.cropperCanvas),
+      elImage: document.getElementById(CONFIG.selectors.cropperImage),
+      elSelection: document.getElementById(CONFIG.selectors.cropperSelection),
+      elsHandles: document.querySelectorAll(CONFIG.selectors.handles)
+    };
 
-      // ADMIN (z serwera)
-      const ADMIN_W_CM = 8;
-      const ADMIN_H_CM = 12;
+    /**
+     * GŁÓWNY KONTROLER APLIKACJI
+     */
+    const App = {
+      init() {
+        this.renderInfo();
+        this.bindGlobalEvents();
+        this.bindZoomHandlers();
+      },
 
-      // wynik px
-      const OUT_W_PX = 800;
-      const OUT_H_PX = 1200;
+      // Wyświetlenie formatu na toolbarze
+      renderInfo() {
+        const { adminW, adminH } = CONFIG.dims;
+        $('#formatInfo').text(`Format: ${adminW}×${adminH} cm`);
+      },
 
-      $("#formatInfo").text(`Format: ${ADMIN_W_CM}×${ADMIN_H_CM} cm`);
+      // Obliczanie i centrowanie ramki wyboru
+      centerSelection() {
+        const { adminW, adminH } = CONFIG.dims;
+        const ratio = adminW / adminH;
+        
+        DOM.elSelection.aspectRatio = ratio;
 
-      function centerFixedSelection() {
-        const ratio = ADMIN_W_CM / ADMIN_H_CM;
-        cropperSelection.aspectRatio = ratio;
-
-        const rect = cropperCanvas.getBoundingClientRect();
+        const rect = DOM.elCanvas.getBoundingClientRect();
         if (!rect.width || !rect.height) return;
 
+        // Maksymalnie 70% obszaru
         const maxW = rect.width * 0.7;
         const maxH = rect.height * 0.7;
 
         let selW, selH;
+        
+        // Dopasowanie do węższego wymiaru
         if (maxW / maxH > ratio) {
           selH = maxH;
           selW = selH * ratio;
@@ -188,136 +247,156 @@
         const x = (rect.width - selW) / 2;
         const y = (rect.height - selH) / 2;
 
-        cropperSelection.$change(x, y, selW, selH, ratio);
-      }
+        DOM.elSelection.$change(x, y, selW, selH, ratio);
+      },
 
-      function bindToolbar() {
-        $("#zoomIn").off("click").on("click", () => cropperImage.$zoom(0.1));
-        $("#zoomOut").off("click").on("click", () => cropperImage.$zoom(-0.1));
-        $("#resetImg").off("click").on("click", () => cropperImage.$center("cover"));
-      }
+      // Obsługa zdarzeń globalnych (pliki, przyciski)
+      bindGlobalEvents() {
+        // 1. Wczytanie pliku
+        DOM.$input.on('change', function() {
+          const [file] = this.files;
+          if (!file) return;
 
-      // Wheel zoom
-      $cropperWrapper.on("wheel", function (e) {
-        e.preventDefault();
-        const delta = e.originalEvent.deltaY;
-        cropperImage.$zoom(delta < 0 ? 0.08 : -0.08);
-      });
+          if (!/^image\/\w+$/.test(file.type)) {
+            alert("To nie jest plik graficzny!");
+            return;
+          }
 
-      // ===== "Resize foto za rogi" через zoom =====
-      let isResizingPhoto = false;
-      let startY = 0;
+          DOM.$name.text(file.name);
+          DOM.elImage.src = URL.createObjectURL(file);
 
-      function onPointerDown(e) {
-        isResizingPhoto = true;
-        startY = e.clientY;
-        e.preventDefault();
-        e.stopPropagation();
-        document.addEventListener("pointermove", onPointerMove, { passive: false });
-        document.addEventListener("pointerup", onPointerUp, { passive: false, once: true });
-      }
+          // Pokaż UI
+          DOM.$wrapper.fadeIn();
+          DOM.$uploadBtn.fadeIn();
+          DOM.$toolbar.addClass('show');
 
-      function onPointerMove(e) {
-        if (!isResizingPhoto) return;
-
-        const dy = e.clientY - startY;
-        startY = e.clientY;
-
-        // dy < 0 => zoom in, dy > 0 => zoom out
-        const step = (-dy) * 0.004; // czułość
-        if (step !== 0) cropperImage.$zoom(step);
-
-        e.preventDefault();
-      }
-
-      function onPointerUp() {
-        isResizingPhoto = false;
-        document.removeEventListener("pointermove", onPointerMove);
-      }
-
-      // podepnij do 4 uchwytów
-      photoHandles.querySelectorAll(".handle").forEach((el) => {
-        el.addEventListener("pointerdown", onPointerDown, { passive: false });
-      });
-
-      // Upload
-      $inputImage.change(function () {
-        const files = this.files;
-        if (!files || !files.length) return;
-
-        const file = files[0];
-        if (!/^image\/\w+$/.test(file.type)) {
-          alert("Proszę wybrać plik obrazu.");
-          return;
-        }
-
-        const uploadedImageURL = URL.createObjectURL(file);
-        cropperImage.src = uploadedImageURL;
-
-        $cropperWrapper.show();
-        $btnUpload.show();
-        $toolbar.addClass("show");
-
-        bindToolbar();
-
-        cropperImage.$ready(() => {
-          cropperImage.$center("cover");
-          centerFixedSelection();
+          // Inicjalizacja croppera
+          DOM.elImage.$ready(() => {
+            DOM.elImage.$center('cover');
+            App.centerSelection();
+          });
         });
-      });
 
-      window.addEventListener("resize", () => {
-        if ($cropperWrapper.is(":visible")) centerFixedSelection();
-      });
+        // 2. Toolbar - Przyciski
+        $('#btnZoomIn').on('click', () => DOM.elImage.$zoom(0.1));
+        $('#btnZoomOut').on('click', () => DOM.elImage.$zoom(-0.1));
+        $('#btnReset').on('click', () => DOM.elImage.$center('cover'));
 
-      // Save
-      $btnUpload.click(function () {
-        $btnUpload.prop("disabled", true).text("Przetwarzanie...");
+        // 3. Zoom kółkiem myszy
+        DOM.$wrapper.on('wheel', (e) => {
+          e.preventDefault();
+          const delta = e.originalEvent.deltaY;
+          DOM.elImage.$zoom(delta < 0 ? 0.08 : -0.08);
+        });
 
-        cropperSelection
-          .$toCanvas({ width: OUT_W_PX, height: OUT_H_PX })
-          .then((canvas) => {
-            canvas.toBlob(
-              (blob) => {
-                const formData = new FormData();
-                formData.append("original_image", $inputImage[0].files[0]);
-                formData.append("cropped_image", blob, "cropped.jpg");
-                formData.append("product_id", "123");
+        // 4. Resize okna przeglądarki
+        window.addEventListener('resize', () => {
+          if (DOM.$wrapper.is(':visible')) App.centerSelection();
+        });
 
-                formData.append("admin_w_cm", ADMIN_W_CM);
-                formData.append("admin_h_cm", ADMIN_H_CM);
-                formData.append("out_w_px", OUT_W_PX);
-                formData.append("out_h_px", OUT_H_PX);
+        // 5. Upload (Zapisz)
+        DOM.$uploadBtn.on('click', this.handleUpload);
+      },
 
-                $.ajax({
-                  url: "product-img-save.php",
-                  method: "POST",
-                  data: formData,
-                  processData: false,
-                  contentType: false,
-                  success: function (response) {
-                    $("#result").html(response);
-                    $cropperWrapper.hide();
-                    $toolbar.removeClass("show");
-                    $btnUpload.hide().prop("disabled", false).text("Przytnij i Zapisz");
-                    $inputImage.val("");
-                  },
-                  error: function () {
-                    alert("Błąd podczas przesyłania.");
-                    $btnUpload.prop("disabled", false).text("Przytnij i Zapisz");
-                  },
-                });
-              },
-              "image/jpeg",
-              0.92
-            );
+      // Logika "Ciągnij za rogi by zmienić zoom"
+      bindZoomHandlers() {
+        const onPointerDown = (e) => {
+          State.isResizing = true;
+          State.startY = e.clientY;
+          // Sprawdzamy czy to dolny uchwyt (bl, br) używając dataset lub klasy
+          State.isInverted = e.target.dataset.pos === 'bottom';
+
+          e.preventDefault();
+          e.stopPropagation();
+
+          document.addEventListener('pointermove', onPointerMove, { passive: false });
+          document.addEventListener('pointerup', onPointerUp, { passive: false, once: true });
+        };
+
+        const onPointerMove = (e) => {
+          if (!State.isResizing) return;
+
+          let dy = e.clientY - State.startY;
+          State.startY = e.clientY;
+
+          // Jeśli dolny uchwyt -> odwracamy znak
+          if (State.isInverted) dy = -dy;
+
+          // Oblicz zoom
+          const step = (-dy) * CONFIG.zoomSensitivity;
+          if (step !== 0) DOM.elImage.$zoom(step);
+
+          e.preventDefault();
+        };
+
+        const onPointerUp = () => {
+          State.isResizing = false;
+          document.removeEventListener('pointermove', onPointerMove);
+        };
+
+        // Podpięcie pod wszystkie uchwyty
+        DOM.elsHandles.forEach(el => {
+          el.addEventListener('pointerdown', onPointerDown, { passive: false });
+        });
+      },
+
+      // Logika wysyłki na serwer
+      handleUpload() {
+        const btn = $(this);
+        btn.prop('disabled', true).text('Przetwarzanie...');
+
+        const { outputW, outputH, adminW, adminH } = CONFIG.dims;
+
+        // Generowanie canvasu
+        DOM.elSelection.$toCanvas({ width: outputW, height: outputH })
+          .then(canvas => {
+            canvas.toBlob(blob => {
+              const formData = new FormData();
+              
+              // Destrukturyzacja do dodania danych
+              formData.append("original_image", DOM.$input[0].files[0]);
+              formData.append("cropped_image", blob, "cropped.jpg");
+              
+              // Metadane
+              const meta = { product_id: 123, admin_w_cm: adminW, admin_h_cm: adminH, out_w_px: outputW, out_h_px: outputH };
+              Object.entries(meta).forEach(([key, val]) => formData.append(key, val));
+
+              // AJAX
+              $.ajax({
+                url: "product-img-save.php",
+                method: "POST",
+                data: formData,
+                processData: false,
+                contentType: false,
+                success: (resp) => {
+                  DOM.$result.html(resp);
+                  App.resetUI();
+                },
+                error: () => {
+                  alert("Błąd zapisu!");
+                  btn.prop('disabled', false).text('Przytnij i Zapisz');
+                }
+              });
+            }, "image/jpeg", 0.92);
           })
           .catch(() => {
-            alert("Nie udało się przygotować obrazu do zapisu.");
-            $btnUpload.prop("disabled", false).text("Przytnij i Zapisz");
+            alert("Błąd generowania obrazu.");
+            btn.prop('disabled', false).text('Przytnij i Zapisz');
           });
-      });
-    });
+      },
+
+      // Reset po udanym wgraniu
+      resetUI() {
+        DOM.$wrapper.hide();
+        DOM.$toolbar.removeClass('show');
+        DOM.$uploadBtn.hide().prop('disabled', false).text('Przytnij i Zapisz');
+        DOM.$input.val('');
+        DOM.$name.text('');
+      }
+    };
+
+    // START
+    $(document).ready(() => App.init());
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file
