Update footer

templates/index.html

@@ -39,6 +39,7 @@
         @media (max-width: 480px) { .page-header h1 { font-size: 1.5rem; } }
         .grid { display: grid; grid-template-columns: repeat(5, 3rem); gap: .5rem; }
         .grid input { text-align: center; font-size: 1.25rem; padding: .4rem; background: var(--input-bg); color: var(--input-text); border: 1px solid var(--border); border-radius: .375rem; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace; text-transform: uppercase; }
+        .grid input.filled { background: #6baa64; color: #ffffff; }
         .text-input { font-size: 1.1rem; padding: .5rem; background: var(--input-bg); color: var(--input-text); border: 1px solid var(--border); border-radius: .375rem; width: 100%; box-sizing: border-box; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace; text-transform: uppercase; }
         .letter-input { width: calc(1ch + 2rem); padding: .5rem 1rem; font-size: 1rem; line-height: 1; background: var(--input-bg); color: var(--input-text); border: 1px solid var(--border); border-radius: .5rem; text-align: center; text-transform: uppercase; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace; }
         .plus-button { width: calc(1ch + 2rem); text-align: center; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace; }
@@ -46,7 +47,10 @@
         .results { margin-top: 1.5rem; }
         .results-box { border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; }
         .badge { display: inline-block; padding: .25rem .5rem; background: var(--badge-bg); color: var(--badge-text); border-radius: .375rem; margin-right: .25rem; margin-bottom: .25rem; }
+        .badge .letter { display: inline-block; }
+        .badge .letter.included { background: #ffc100; color: #ffffff; border-radius: .25rem; padding: 0 .1rem; }
         #includes-list .badge, #excludes-list .badge { cursor: pointer; }
+        #includes-list .badge { background: #ffc100; color: #ffffff; }
         .source { font-size: .75rem; padding: .1rem .35rem; border-radius: .25rem; margin-left: .25rem; }
         .source.ot { background: #dbeafe; color: #1e40af; }
         .source.wf { background: #dcfce7; color: #065f46; }
@@ -146,7 +150,14 @@
                                         {% set srcs = sources_map.get(w, []) %}
                                         {% set has_umlaut = ('ä' in w or 'ö' in w or 'ü' in w or 'ß' in w) %}
                                         <li data-sources="{{ srcs|join(' ') }}" data-umlaut="{{ 1 if has_umlaut else 0 }}">
-                                            <span class="badge">{{ w }}
+                                            <span class="badge">
+                                                {% for ch in w %}
+                                                    {% if ch in includes|lower %}
+                                                        <span class="letter included">{{ ch }}</span>
+                                                    {% else %}
+                                                        <span class="letter">{{ ch }}</span>
+                                                    {% endif %}
+                                                {% endfor %}
                                                 {% for s in srcs %}
                                                     {% if s == 'ot' %}
                                                         <span class="source ot">OT</span>
@@ -171,7 +182,7 @@
         </main>
 
         <footer class="footer">
-            Yet another <a href="https://gitea.elpatron.me/elpatron/wordle-cheater" rel="noopener noreferrer">Open Source Project</a>, vibe coded in less than 1 hour by <a href="mailto:elpatron@mailbox.org">Markus F.J. Busche</a>
+            Yet another <a href="https://gitea.elpatron.me/elpatron/wordle-cheater" rel="noopener noreferrer">Open Source Project</a>, vibe coded in less than 4 hours by <a href="mailto:elpatron@mailbox.org">Markus F.J. Busche</a>
         </footer>
     </div>
 
@@ -275,6 +286,9 @@
             input.value = '';
             input.focus();
         }
+        // Drag-Status für Positionsfelder
+        var dragSourcePosInput = null;
+        var dragAccepted = false;
         window.addEventListener('load', function() {
             var ot = document.getElementById('filter-ot');
             var wf = document.getElementById('filter-wf');
@@ -283,6 +297,24 @@
             if (wf) wf.addEventListener('change', applyFilters);
             if (uml) uml.addEventListener('change', applyFilters);
             applyFilters();
+            // Status der Positionsfelder (filled) initial setzen und bei Eingaben aktualisieren
+            function updatePosFilledState() {
+                for (var i = 1; i <= 5; i++) {
+                    var el = document.getElementById('pos' + i);
+                    if (!el) continue;
+                    if ((el.value || '').trim()) el.classList.add('filled');
+                    else el.classList.remove('filled');
+                }
+            }
+            updatePosFilledState();
+            for (var i = 1; i <= 5; i++) {
+                (function(idx){
+                    var el = document.getElementById('pos' + idx);
+                    if (!el) return;
+                    el.addEventListener('input', updatePosFilledState);
+                    el.addEventListener('change', updatePosFilledState);
+                })(i);
+            }
             // Listen initial aus Hidden-Feldern rendern
             var hiddenInc = document.getElementById('includes');
             var hiddenExc = document.getElementById('excludes');
@@ -320,6 +352,27 @@
                 (function(idx){
                     var input = document.getElementById('pos' + idx);
                     if (!input) return;
+                    // Als Drag-Quelle nutzbar machen
+                    input.draggable = true;
+                    input.addEventListener('dragstart', function(e){
+                        var val = (input.value || '').trim().toLowerCase();
+                        if (!val) { try { e.preventDefault(); } catch (err) {} return; }
+                        dragSourcePosInput = input;
+                        dragAccepted = false;
+                        try {
+                            e.dataTransfer.setData('text/plain', val);
+                            e.dataTransfer.setData('text/source', 'pos');
+                            e.dataTransfer.effectAllowed = 'move';
+                        } catch (err) {}
+                    });
+                    input.addEventListener('dragend', function(){
+                        if (dragSourcePosInput === input && !dragAccepted) {
+                            input.value = '';
+                            input.classList.remove('filled');
+                        }
+                        dragSourcePosInput = null;
+                        dragAccepted = false;
+                    });
                     input.addEventListener('dragover', function(e){
                         e.preventDefault();
                         try { e.dataTransfer.dropEffect = 'move'; } catch (err) {}
@@ -331,9 +384,18 @@
                         input.classList.remove('drop-target');
                         var letter = (e.dataTransfer.getData('text/plain') || '').trim().toLowerCase();
                         var sourceList = e.dataTransfer.getData('text/list') || '';
-                        if (letter && sourceList === 'includes-list' && /[a-zäöüß]/i.test(letter)) {
+                        var sourceType = e.dataTransfer.getData('text/source') || '';
+                        if (letter && /[a-zäöüß]/i.test(letter) && (sourceList === 'includes-list' || sourceType === 'pos')) {
+                            dragAccepted = true;
                             input.value = letter;
+                            if ((input.value || '').trim()) input.classList.add('filled');
+                            if (sourceList === 'includes-list') {
                                 removeLetterFromList('includes', 'includes-list', letter);
+                            }
+                            if (sourceType === 'pos' && dragSourcePosInput && dragSourcePosInput !== input) {
+                                dragSourcePosInput.value = '';
+                                dragSourcePosInput.classList.remove('filled');
+                            }
                             input.focus();
                         }
                     });
@@ -347,7 +409,7 @@
                     // Alle Positionsfelder zurücksetzen
                     for (var i = 1; i <= 5; i++) {
                         var posField = document.getElementById('pos' + i);
-                        if (posField) posField.value = '';
+                        if (posField) { posField.value = ''; posField.classList.remove('filled'); }
                     }
                     
                     // Weitere Felder zurücksetzen