From cd13d21e5ff920614f4eca0dea0c4b407c031858 Mon Sep 17 00:00:00 2001
From: B3rcik <berbertolos@gmail.com>
Date: Fri, 21 Nov 2025 23:27:46 +0100
Subject: [PATCH] Update index.html

---
 index.html | 148 ++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 106 insertions(+), 42 deletions(-)
diff --git a/index.html b/index.html
index ca2cc4b..c28edec 100644
--- a/index.html
+++ b/index.html
@@ -10,55 +10,118 @@
 </head>
 
 <body>
-    <div class="toolbar">
-        <p>Kształty - przeciągnij i upuść</p>
-        <div class="shape-wrapper toolbar-wrapper">
-            <div id="shape-rectangle" class="shape" data-type="rectangle"></div>
-            <div id="shape-ellipse" class="shape" data-type="ellipse"></div>
-            <div id="shape-diamond" class="shape" data-type="diamond"></div>
-            <div id="shape-text" class="shape" data-type="text">Tekst</div>
-        </div>
-        <p>Akcje</p>
-        <div class="tools-wrapper toolbar-wrapper">
-            <button id="btn-delete">Usuń</button>
-            <button id="btn-copy">Kopiuj</button>
-            <button id="btn-paste">Wklej</button>
-        </div>
-        <p>Zoom</p>
-        <div class="zoom-wrapper toolbar-wrapper">
-            <button id="zoom-in">+</button>
-            <button id="zoom-out">-</button>
-        </div>
+<div class="toolbar">
+    <p>Kształty - przeciągnij i upuść</p>
+    <div class="shape-wrapper toolbar-wrapper">
+        <div id="shape-rectangle" class="shape" data-type="rectangle"></div>
+        <div id="shape-ellipse" class="shape" data-type="ellipse"></div>
+        <div id="shape-diamond" class="shape" data-type="diamond"></div>
+        <div id="shape-text" class="shape" data-type="text">Tekst</div>
     </div>
-
-    <div id="resize-handle" style="position: absolute; display: none; border: 2px dashed #4A90E2; z-index: 10;"></div>
-    <div class="canvas-container">
-        <div id="paper"></div>
+    <p>Akcje</p>
+    <div class="tools-wrapper toolbar-wrapper">
+        <button id="btn-delete">Usuń</button>
+        <button id="btn-copy">Kopiuj</button>
+        <button id="btn-paste">Wklej</button>
+        <button id="btn-connect">Połącz</button>       <!-- DODANE -->
+        <button id="btn-change-color">Kolor</button>   <!-- DODANE -->
     </div>
+    <p>Zoom</p>
+    <div class="zoom-wrapper toolbar-wrapper">
+        <button id="zoom-in">+</button>
+        <button id="zoom-out">-</button>
+    </div>
+</div>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
-    <script src="joint.js"></script>
-    <script>
-        let selectedElement = null;
-        let activeElementView = null;
-        let clipboard = null;
+<div id="resize-handle" style="position: absolute; display: none; border: 2px dashed #4A90E2; z-index: 10;"></div>
+<div class="canvas-container">
+    <div id="paper"></div>
+</div>
 
-        $(document).ready(function () {
-            //init paper - Start
-            const graph = new joint.dia.Graph();
-            const paper = new joint.dia.Paper({
-                el: $('#paper'),
-                model: graph,
-                width: window.innerWidth,
-                height: window.innerHeight,
-                gridSize: 20,
+<!-- DODANY KONTAINER DLA PALETY KOLORÓW -->
+<div id="color-palette" style="position:absolute; display:none; padding:8px; background:#fff; border:1px solid #ccc; border-radius:6px; gap:6px; z-index:2000;"></div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
+<script src="joint.js"></script>
+<script>
+    let selectedElement = null;
+    let activeElementView = null;
+    let clipboard = null;
+
+
+    $(document).ready(function () {
+        const graph = new joint.dia.Graph();
+        const paper = new joint.dia.Paper({
+            el: $('#paper'),
+            model: graph,
+            width: window.innerWidth,
+            height: window.innerHeight,
+            gridSize: 20,
+        });
+
+        const $resizeHandle = $('#resize-handle');
+
+        // --- DODANE FUNKCJE START ---
+        let connectMode = false;
+
+        $('#btn-connect').click(function() {
+            if (!selectedElement) return;
+            connectMode = !connectMode;
+            $(this).css('background', connectMode ? '#e3f2fd' : '#fff');
+        });
+
+        const paletteColors = ['#FF4B4B','#FFA500','#FFD700','#4CAF50','#00BCD4','#2196F3','#9C27B0','#795548','#000000'];
+        const $palette = $('#color-palette');
+        $palette.css({ display:'grid', gridTemplateColumns:'repeat(3,28px)' });
+
+        paletteColors.forEach(c => {
+            // ZMIANA TUTAJ: Dodajemy width, height, border i cursor
+            const tile = $('<div></div>').css({
+                background: c,
+                width: '28px',       // Dodane
+                height: '28px',      // Dodane
+                border: '1px solid #444', // Dodane dla widoczności
+                cursor: 'pointer'    // Dodane dla kursora rączki
             });
-            //init paper - END
 
-            const $resizeHandle = $('#resize-handle');
+            tile.on('click', function() {
+                if (selectedElement) {
+                    try {
+                        // Ustawianie koloru
+                        selectedElement.attr('body/fill', c);
+                        if (selectedElement.attributes.type === 'standard.TextBlock') {
+                            selectedElement.attr('label/fill', c);
+                        }
+                    } catch(e) { /* ignoruj */ }
+                }
+                $palette.hide();
+            });
+            $palette.append(tile);
+        });
 
-            // obwódka i znaczek usuwanie
+        $('#btn-change-color').on('click', function() {
+            const off = $(this).offset();
+            $palette.css({ top: off.top + 36, left: off.left }).toggle();
+        });
+        $(document).on('click', function(e) {
+            if (!$(e.target).closest('#color-palette,#btn-change-color').length) $palette.hide();
+        });
+
+
+        paper.on('element:pointerclick', function (elementView) {
+            if (connectMode && selectedElement && selectedElement !== elementView.model) {
+                const link = new joint.shapes.standard.Link();
+                link.source(selectedElement);
+                link.target(elementView.model);
+                graph.addCell(link);
+                connectMode = false;
+                $('#btn-connect').css('background','#fff');
+            }
+        });
+        // --- DODANE FUNKCJE KONIEC ---
+
+        // obwódka i znaczek usuwanie
             function createToolsView() {
                 return new joint.dia.ToolsView({
                     tools: [
@@ -431,6 +494,7 @@
 
 
 
+
             // Zoom
             const zoomStep = 0.2;
             const minScale = 0.2;
