45 lines
3.9 KiB
HTML
45 lines
3.9 KiB
HTML
<div class="flex flex-col gap-2 text-on-surface dark:text-on-surface-dark" role="group" aria-labelledby="voiceToneTitle">
|
|
<span id="voiceToneTitle" class="w-fit pl-0.5 text-sm font-medium">Voice Tone</span>
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
|
|
<label class="flex border border-transparent bg-surface-alt px-2 py-1.5 text-xs font-medium has-checked:border-primary has-checked:text-primary dark:bg-surface-dark-alt dark:has-checked:border-primary-dark dark:has-checked:text-primary-dark rounded-radius has-focus-visible:outline-2 has-focus-visible:outline-primary has-focus-visible:outline-offset-2 dark:has-focus-visible:outline-primary-dark" for="checkToneFriendly">
|
|
<input type="checkbox" class="appearance-none" id="checkToneFriendly" value="friendly" name="tone" />
|
|
<span class="flex items-center gap-2">
|
|
<span class="text-base" aria-hidden="true">🤗</span>
|
|
Friendly
|
|
</span>
|
|
</label>
|
|
|
|
<label class="flex border border-transparent bg-surface-alt px-2 py-1.5 text-xs font-medium has-checked:border-primary has-checked:text-primary dark:bg-surface-dark-alt dark:has-checked:border-primary-dark dark:has-checked:text-primary-dark rounded-radius has-focus-visible:outline-2 has-focus-visible:outline-primary has-focus-visible:outline-offset-2 dark:has-focus-visible:outline-primary-dark" for="checkToneProfessional">
|
|
<input type="checkbox" class="appearance-none" id="checkToneProfessional" value="professional" name="tone" />
|
|
<span class="flex items-center gap-2">
|
|
<span class="text-base" aria-hidden="true">🤓</span>
|
|
Professional
|
|
</span>
|
|
</label>
|
|
|
|
<label class="flex border border-transparent bg-surface-alt px-2 py-1.5 text-xs font-medium has-checked:border-primary has-checked:text-primary dark:bg-surface-dark-alt dark:has-checked:border-primary-dark dark:has-checked:text-primary-dark rounded-radius has-focus-visible:outline-2 has-focus-visible:outline-primary has-focus-visible:outline-offset-2 dark:has-focus-visible:outline-primary-dark" for="checkToneCheerful">
|
|
<input type="checkbox" class="appearance-none" id="checkToneCheerful" value="cheerful" name="tone" />
|
|
<span class="flex items-center gap-2">
|
|
<span class="text-base" aria-hidden="true">🤩</span>
|
|
Cheerful
|
|
</span>
|
|
</label>
|
|
|
|
<label class="flex border border-transparent bg-surface-alt px-2 py-1.5 text-xs font-medium has-checked:border-primary has-checked:text-primary dark:bg-surface-dark-alt dark:has-checked:border-primary-dark dark:has-checked:text-primary-dark rounded-radius has-focus-visible:outline-2 has-focus-visible:outline-primary has-focus-visible:outline-offset-2 dark:has-focus-visible:outline-primary-dark" for="checkToneFunny">
|
|
<input type="checkbox" class="appearance-none" id="checkToneFunny" value="funny" name="tone" />
|
|
<span class="flex items-center gap-2">
|
|
<span class="text-base" aria-hidden="true">🤭</span>
|
|
Funny
|
|
</span>
|
|
</label>
|
|
|
|
<label class="flex border border-transparent bg-surface-alt px-2 py-1.5 text-xs font-medium has-checked:border-primary has-checked:text-primary dark:bg-surface-dark-alt dark:has-checked:border-primary-dark dark:has-checked:text-primary-dark rounded-radius has-focus-visible:outline-2 has-focus-visible:outline-primary has-focus-visible:outline-offset-2 dark:has-focus-visible:outline-primary-dark" for="checkTonePersuasive">
|
|
<input type="checkbox" class="appearance-none" id="checkTonePersuasive" value="persuasive" name="tone" />
|
|
<span class="flex items-center gap-2">
|
|
<span class="text-base" aria-hidden="true">😎</span>
|
|
Persuasive
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div> |