UI: Beállítások szekció letiltása a feladat kártyáknál

- Pontszám, Időlimit és Karakterlimit mezők letiltva
- Magyarázat mező is letiltva
- Szöveges válasz típusnál a beállítások (kis/nagy betű, pontos egyezés, stb.) letiltva
- Egységes 'Hamarosan elérhető' effekt az összes letiltott szekción
- Tipp mező továbbra is opcionális és használható
- Ezek a beállítások nem kötelezőek a kártya mentéséhez

SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx

@@ -374,37 +374,48 @@ export default function TaskCardEditor({ card, onChange }) {
             </div>
           </div>
 
-          {/* Beállítások */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="checkbox"
-                checked={card.caseSensitive || false}
-                onChange={(e) => updateField('caseSensitive', e.target.checked)}
-                className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
-              />
-              <span className="text-[color:var(--color-text)]">Kis/nagy betű érzékeny</span>
-            </label>
+          {/* Beállítások - Később elérhető */}
+          <div className="relative">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 opacity-50 pointer-events-none blur-[1px]">
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={false}
+                  disabled
+                  className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
+                />
+                <span className="text-[color:var(--color-text)]">Kis/nagy betű érzékeny</span>
+              </label>
+              
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={false}
+                  disabled
+                  className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
+                />
+                <span className="text-[color:var(--color-text)]">Pontos egyezés</span>
+              </label>
+              
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={false}
+                  disabled
+                  className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
+                />
+                <span className="text-[color:var(--color-text)]">Részleges elfogadás</span>
+              </label>
+            </div>
             
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="checkbox"
-                checked={card.exactMatch || false}
-                onChange={(e) => updateField('exactMatch', e.target.checked)}
-                className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
-              />
-              <span className="text-[color:var(--color-text)]">Pontos egyezés</span>
-            </label>
-            
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="checkbox"
-                checked={card.partialAccepted || true}
-                onChange={(e) => updateField('partialAccepted', e.target.checked)}
-                className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
-              />
-              <span className="text-[color:var(--color-text)]">Részleges elfogadás</span>
-            </label>
+            {/* Hamarosan elérhető felület */}
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="bg-[color:var(--color-warning)]/20 backdrop-blur-sm border-2 border-[color:var(--color-warning)] rounded-lg px-4 py-2">
+                <span className="text-[color:var(--color-warning)] font-semibold text-sm flex items-center gap-2">
+                  🚧 Hamarosan elérhető
+                </span>
+              </div>
+            </div>
           </div>
 
           {/* Tipp */}
@@ -423,76 +434,83 @@ export default function TaskCardEditor({ card, onChange }) {
         </div>
       )}
 
-      {/* Közös beállítások */}
-      <div className="bg-[color:var(--color-surface)] rounded-xl p-6">
+      {/* Közös beállítások - Később elérhető */}
+      <div className="bg-[color:var(--color-surface)] rounded-xl p-6 relative">
         <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
           ⚙️ Beállítások
         </h3>
         
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          {/* Pontszám */}
-          <div>
-            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-              💰 Pontszám
-            </label>
-            <input
-              type="number"
-              value={card.points || 10}
-              onChange={(e) => updateField('points', parseInt(e.target.value) || 0)}
-              className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-              min="0"
-              max="1000"
-            />
-          </div>
+        <div className="relative">
+          <div className="opacity-50 pointer-events-none blur-[1px]">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {/* Pontszám */}
+              <div>
+                <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+                  💰 Pontszám
+                </label>
+                <input
+                  type="number"
+                  value={10}
+                  disabled
+                  className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+                  min="0"
+                  max="1000"
+                />
+              </div>
 
-          {/* Időlimit */}
-          <div>
-            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-              ⏱️ Időlimit
-            </label>
-            <select
-              value={card.timeLimit || 30}
-              onChange={(e) => updateField('timeLimit', parseInt(e.target.value))}
-              className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-            >
-              {timeLimits.map(time => (
-                <option key={time.value} value={time.value}>
-                  {time.label}
-                </option>
-              ))}
-            </select>
-          </div>
+              {/* Időlimit */}
+              <div>
+                <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+                  ⏱️ Időlimit
+                </label>
+                <select
+                  disabled
+                  className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+                >
+                  <option>30 másodperc</option>
+                </select>
+              </div>
 
-          {/* Karakterlimit (csak szöveges válasznál) */}
-          {card.subType === 'text' && (
-            <div>
+              {/* Karakterlimit (csak szöveges válasznál) */}
+              {card.subType === 'text' && (
+                <div>
+                  <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+                    📝 Karakterlimit
+                  </label>
+                  <input
+                    type="number"
+                    value={100}
+                    disabled
+                    className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
+                    min="10"
+                    max="500"
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Magyarázat */}
+            <div className="mt-6">
               <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-                📝 Karakterlimit
+                💡 Magyarázat (opcionális)
               </label>
-              <input
-                type="number"
-                value={card.characterLimit || 100}
-                onChange={(e) => updateField('characterLimit', parseInt(e.target.value) || 0)}
-                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
-                min="10"
-                max="500"
+              <textarea
+                disabled
+                className="w-full px-4 py-3 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 resize-none"
+                rows="3"
+                placeholder="Magyarázat a helyes válaszhoz..."
               />
             </div>
-          )}
-        </div>
-
-        {/* Magyarázat */}
-        <div className="mt-6">
-          <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-            💡 Magyarázat (opcionális)
-          </label>
-          <textarea
-            value={card.explanation || ''}
-            onChange={(e) => updateField('explanation', e.target.value)}
-            className="w-full px-4 py-3 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200 resize-none"
-            rows="3"
-            placeholder="Magyarázat a helyes válaszhoz..."
-          />
+          </div>
+          
+          {/* Hamarosan elérhető felület */}
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="bg-[color:var(--color-warning)]/20 backdrop-blur-sm border-2 border-[color:var(--color-warning)] rounded-lg px-4 py-2">
+              <span className="text-[color:var(--color-warning)] font-semibold text-sm flex items-center gap-2">
+                🚧 Hamarosan elérhető
+              </span>
+            </div>
+          </div>
         </div>
       </div>
     </div>