diff --git a/templates/index.html b/templates/index.html
index 63df01b..cd905ba 100644
--- a/templates/index.html
+++ b/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) %}
- {{ w }}
+
+ {% for ch in w %}
+ {% if ch in includes|lower %}
+ {{ ch }}
+ {% else %}
+ {{ ch }}
+ {% endif %}
+ {% endfor %}
{% for s in srcs %}
{% if s == 'ot' %}
OT
@@ -171,7 +182,7 @@
@@ -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;
- removeLetterFromList('includes', 'includes-list', 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