HTML + CSSFilter
Schärfegrad mit Chilis
Fünf Chilischoten leuchten von Gelb bis Dunkelrot auf und zeigen, wie viel Schärfe du verträgst.
Einstellungen
16px
1x
Code
<fieldset class="uvq05-ch"><legend>Maximale Schärfe</legend><div class="row"><label style="--h:#f7c548"><input type="radio" name="uvq05-ch" aria-label="Mild"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:#f59e0b"><input type="radio" name="uvq05-ch" aria-label="Mittel"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:#f06b1f"><input type="radio" name="uvq05-ch" aria-label="Scharf" checked><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:var(--c1)"><input type="radio" name="uvq05-ch" aria-label="Sehr scharf"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label><label style="--h:#a3121f"><input type="radio" name="uvq05-ch" aria-label="Feuer"><svg viewBox="0 0 24 40" aria-hidden="true"><path d="M12 9c0-3 1.5-5.5 4.5-6.5" fill="none" stroke="#3f8f3a" stroke-width="2.2" stroke-linecap="round"/><path d="M7.5 10.5c1.5-2 7.5-2 9 0l-.5 2.5h-8z" fill="#4caf50"/><path class="bd" d="M7.8 12.5h8.4c1.2 7.5-.2 15-3.2 21.5-1.2 2.6-3.6 3.3-4.6 1.4 2.4-5.4 1.6-13.8-.6-22.9z"/><path d="M10.2 15c.6 4 .7 8.4-.3 12.6" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/></svg></label></div><div class="bar" aria-hidden="true"><i></i></div><p class="lv" aria-hidden="true"><span>Mild</span><span>Mittel</span><span>Scharf</span><span>Sehr scharf</span><span>Feuer</span></p></fieldset>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Ein Bewertungsfilter für Speisekarten und Lieferdienste, bei dem die Skala Schärfe statt Sterne ist. Jede Schote ist ein Inline-SVG mit Farbe aus einer CSS-Variable, die Radiogruppe füllt alle bis zur gewählten, und ein Verlaufsbalken samt kurzem Wort bestätigt die Stufe. Auf der höchsten Stufe glühen die Chilis.
Die Hauptfarbe bestimmt die schärfste Schote, die zweite Farbe den Anfang des Balkens, so reicht die Skala von mildem Grün bis feurigem Rot. Benenne die Stufen nach deiner Küche um oder nutz das Muster mit anderen Symbolen für Süße oder Stärke.