filipriec/kompress_eshop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

penguinui is now in the root dir in penguinui-components/

Browse Source
This commit is contained in:
Priec
2026-06-18 10:21:29 +02:00
parent 0a619517b6
commit ee944ed5ce
181 changed files with 7699 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
penguinui-components/ai-options/image-style-selector.html Normal file
View File

@@ -0,0 +1,59 @@
<div class="flex max-w-sm flex-col gap-4 border-outline bg-surface-alt p-6 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark rounded-radius border">
<span id="voiceToneTitle" class="w-fit pl-0.5 text-sm font-medium">Image Style</span>
<div class="grid grid-cols-3 place-content-center gap-4" role="group" aria-label="image style">
<label for="imageStyleCustom" class="text-cente relative flex flex-col items-center">
<input type="file" id="imageStyleCustom" class="peer fixed opacity-0 size-0 appearance-none"/>
<div class="flex h-full w-full items-center justify-center border border-dashed border-on-surface peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-primary dark:border-on-surface-dark dark:peer-focus:outline-primary-dark rounded-radius">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-10">
<path fill-rule="evenodd" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.03 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v4.94a.75.75 0 0 0 1.5 0v-4.94l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd"/>
</svg>
</div>
<span class="mt-1 text-xs capitalize">Upload</span>
</label>
<label for="imageStyleReal" class="text-center relative flex flex-col items-center" >
<input id="imageStyleReal" type="radio" class="peer appearance-none size-0" value="real" name="imageStyle" checked />
<img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/real.webp" class="object-cover rounded-radius peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-primary dark:peer-focus:outline-primary-dark" alt="real" aria-hidden="true"/>
<span class="mt-1 text-xs capitalize">real</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="absolute right-1 top-1 size-5 fill-surface opacity-0 peer-checked:opacity-100 dark:fill-surface-dark" >
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
</svg>
</label>
<label for="imageStyleWatercolor" class="text-center relative flex flex-col items-center" >
<input id="imageStyleWatercolor" type="radio" class="peer appearance-none size-0" value="watercolor" name="imageStyle" />
<img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/watercolor.webp" class="object-cover rounded-radius peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-primary dark:peer-focus:outline-primary-dark" alt="watercolor" aria-hidden="true"/>
<span class="mt-1 text-xs capitalize">watercolor</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="absolute right-1 top-1 size-5 fill-surface opacity-0 peer-checked:opacity-100 dark:fill-surface-dark" >
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
</svg>
</label>
<label for="imageStyle3d" class="text-center relative flex flex-col items-center" >
<input id="imageStyle3d" type="radio" class="peer appearance-none size-0" value="3d" name="imageStyle" />
<img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/3d.webp" class="object-cover rounded-radius peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-primary dark:peer-focus:outline-primary-dark" alt="3d" aria-hidden="true"/>
<span class="mt-1 text-xs capitalize">3d</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="absolute right-1 top-1 size-5 fill-surface opacity-0 peer-checked:opacity-100 dark:fill-surface-dark" >
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
</svg>
</label>
<label for="imageStyleIsometric" class="text-center relative flex flex-col items-center" >
<input id="imageStyleIsometric" type="radio" class="peer appearance-none size-0" value="isometric" name="imageStyle" />
<img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/isometric.webp" class="object-cover rounded-radius peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-primary dark:peer-focus:outline-primary-dark" alt="isometric" aria-hidden="true"/>
<span class="mt-1 text-xs capitalize">isometric</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="absolute right-1 top-1 size-5 fill-surface opacity-0 peer-checked:opacity-100 dark:fill-surface-dark" >
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
</svg>
</label>
<label for="imageStyleFlat" class="text-center relative flex flex-col items-center" >
<input id="imageStyleFlat" type="radio" class="peer appearance-none size-0" value="flat" name="imageStyle" />
<img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/flat.webp" class="object-cover rounded-radius peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-primary dark:peer-focus:outline-primary-dark" alt="flat" aria-hidden="true"/>
<span class="mt-1 text-xs capitalize">flat</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="absolute right-1 top-1 size-5 fill-surface opacity-0 peer-checked:opacity-100 dark:fill-surface-dark" >
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
</svg>
</label>
</div>
</div>

39
penguinui-components/ai-options/model-selector.html Normal file
View File

@@ -0,0 +1,39 @@
<div class="flex w-full max-w-sm flex-col gap-4 rounded-radius border border-outline bg-surface-alt p-4 sm:p-6 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark" role="group" aria-labelledby="aiModelTitle">
<span id="aiModelTitle" class="w-fit px-4 text-sm font-medium">Model</span>
<label for="model3" class="flex items-center justify-between gap-2 px-4 py-2 rounded-radius hover:bg-surface-dark/5 has-focus-visible:bg-surface-dark/5 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-primary dark:hover:bg-surface/5 dark:has-focus-visible:bg-surface/5 dark:has-focus-visible:outline-primary-dark">
<div class="flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0 fill-primary dark:fill-primary-dark" aria-hidden="true">
<path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z"/>
</svg>
<div class="text-left">
<p class="text-sm font-bold">Pengu AI 3.1</p>
<p class="text-xs text-on-surface dark:text-on-surface-dark">The most advanced AI model</p>
</div>
</div>
<input id="model3" type="radio" class="peer appearance-none" name="model" value="3.1" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="size-6 opacity-0 peer-checked:opacity-100" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
</svg>
</label>
<label for="model2" class="flex items-center justify-between gap-2 px-4 py-2 rounded-radius hover:bg-surface-dark/5 has-focus-visible:bg-surface-dark/5 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-primary dark:hover:bg-surface/5 dark:has-focus-visible:bg-surface/5 dark:has-focus-visible:outline-primary-dark">
<div class="flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0 fill-secondary dark:fill-secondary-dark" aria-hidden="true">
<path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z"/>
</svg>
<div class="text-left">
<p class="text-sm font-bold">Pengu AI 2.4</p>
<p class="text-xs text-on-surface dark:text-on-surface-dark">The older AI model</p>
</div>
</div>
<input id="model2" type="radio" class="peer appearance-none" name="model" value="2.4" checked />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="size-6 opacity-0 peer-checked:opacity-100" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
</svg>
</label>
<button type="button" class="mx-4 mt-2 whitespace-nowrap bg-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:has-focus-visible:bg-surface/5 dark:focus-visible:outline-primary-dark rounded-radius">Upgrade to Pro</button>
</div>

45
penguinui-components/ai-options/voice-tone-selector.html Normal file
View File

@@ -0,0 +1,45 @@
<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>