deckcreate-oldal-javitas #62
@@ -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={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={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={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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
</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..."
|
||||
/>
|
||||
{/* 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>
|
||||
|
||||
Reference in New Issue
Block a user