File: /home/pclast/www/wp-content/plugins/zhaket-updater/assets/admin/ai/ai-modal.html
<div id="zhaket-ai-modal-overlay" class="zhaket-ai-modal-overlay zhkup" style="display: none;">
<div class="zhaket-ai-modal-container relative rounded-[12px] shadow-[0px_5px_25px_0px_rgba(126,137,155,0.11)] relative w-[400px] items-center justify-start bg-white p-[2px] md:w-[450px] *:w-full max-w-[80vw] mx-auto">
<button type="button" class="close absolute left-3 !w-3 inline-block top-3 cursor-pointer z-50 zhaket-ai-modal-close"
aria-label="${zhAiGetString('close')}">
<img class="w-5" src="data:image/svg+xml,%3csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1%201L21%2021'%20stroke='%23646464'%20stroke-width='2'%20stroke-linecap='round'/%3e%3cpath%20d='M21%201L1%2021'%20stroke='%23646464'%20stroke-width='2'%20stroke-linecap='round'/%3e%3c/svg%3e" alt="">
</button>
<div class="flex flex-col overflow-hidden">
<div class="flex items-center justify-center flex-col rounded-lg bg-[linear-gradient(180deg,_#f8b33514_8%,_#ffffff00_43.89%)] pt-[26px] pb-2">
<p class="transition duration-300 text-[20px] leading-7 font-bold text-[#424244] pt-4 zhaket-ai-modal-title flex items-end gap-3">
${zhAiGetString('aiGenerator')}
</p>
</div>
</div>
<form id="zhaket-ai-modal-form" class="zhaket-ai-modal-body">
<div class="zhaket-ai-form-group">
<textarea
id="zhaket-ai-prompt"
name="prompt"
rows="4"
class="shadow-[0_5px_15px_0px_rgba(73,75,84,0.06)] border border-[#E0E0E0] rounded-[9px] resize-none w-full px-[16px] py-4 text-[#615B5B] text-[14px] h-[100px] text-[14px]"
placeholder="${zhAiGetString('describeWhatYouWantToGenerate')}"
required
></textarea>
</div>
<!-- Image Type Selection (for image generation) -->
<div class="zhaket-ai-form-group flex items-center justify-between flex-wrap" id="zhaket-ai-image-type-group" style="display: none;">
<label for="zhaket-ai-image-type" class="flex items-center gap-2">${zhAiGetString('imageType')}:</label>
<div class="custom-select-wrapper relative" data-select-id="zhaket-ai-image-type">
<button type="button" class="custom-select-trigger border border-[#C1C3C8] rounded-[7px] h-[38px] flex items-center justify-between px-1 md:px-2 cursor-pointer inline-block gap-4 min-w-[150px] max-w" data-value="">
<span class="custom-select-text">${zhAiGetString('Photography')}</span>
<span class="custom-select-arrow"><svg data-v-b1c8d02a="" class="rotate-180 transition-transform duration-200" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path data-v-b1c8d02a="" d="M1 4L4 1L7 4" stroke="#878F9B" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
</button>
<div class="custom-select-list bottom-[40px] left-0 items bg-white rounded-[8px] absolute mt-1 border border-[#F4F4F4] min-w-[170px] z-10 shadow-md overflow-hidden overflow-y-auto max-h-60 flex-col w-max" id="zhaket-ai-image-type-list" style="display: none;">
<ul class="flex flex-col [&>*]:flex [&>*]:rounded-sm [&>*]:items-stretch [&>*]:cursor-pointer [&>*]:!m-0 p-2">
<!-- Options will be populated dynamically -->
</ul>
</div>
<input type="hidden" id="zhaket-ai-image-type" name="image_type" value="">
</div>
</div>
<!-- Image Dimensions (for image generation) -->
<div class="zhaket-ai-form-group flex items-center justify-between flex-wrap" id="zhaket-ai-dimensions-group" style="display: none;">
<label for="zhaket-ai-dimensions">${zhAiGetString('imageDimensions')}:</label>
<div class="custom-select-wrapper relative" data-select-id="zhaket-ai-dimensions">
<button type="button" class="custom-select-trigger border border-[#C1C3C8] rounded-[7px] h-[38px] flex items-center justify-between px-1 md:px-2 cursor-pointer inline-block gap-4 min-w-[150px] max-w" data-value="1024x1024">
<span class="custom-select-text">1:1 (1024×1024)</span>
<span class="custom-select-arrow"><svg data-v-b1c8d02a="" class="rotate-180 transition-transform duration-200" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path data-v-b1c8d02a="" d="M1 4L4 1L7 4" stroke="#878F9B" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
</button>
<div class="custom-select-list bottom-[40px] left-0 items bg-white rounded-[8px] absolute mt-1 border border-[#F4F4F4] min-w-[170px] z-10 shadow-md overflow-hidden overflow-y-auto max-h-60 flex-col w-max" style="display: none;">
<ul>
<li class="custom-select-option flex" data-value="1024x1024">
<div class="hover:bg-[#FFF5E6] group transition-all duration-300 w-full justify-start text-[#424244] text-[13px] px-4 py-[9px] rounded cursor-pointer">1:1 (1024×1024)</div>
</li>
<li class="custom-select-option flex" data-value="1024x768">
<div class="hover:bg-[#FFF5E6] group transition-all duration-300 w-full justify-start text-[#424244] text-[13px] px-4 py-[9px] rounded cursor-pointer">4:3 (1024×768)</div>
</li>
<li class="custom-select-option flex" data-value="1024x512">
<div class="hover:bg-[#FFF5E6] group transition-all duration-300 w-full justify-start text-[#424244] text-[13px] px-4 py-[9px] rounded cursor-pointer">2:1 (1024×512)</div>
</li>
<li class="custom-select-option flex" data-value="768x1024">
<div class="hover:bg-[#FFF5E6] group transition-all duration-300 w-full justify-start text-[#424244] text-[13px] px-4 py-[9px] rounded cursor-pointer">3:4 (768×1024)</div>
</li>
<li class="custom-select-option flex" data-value="512x1024">
<div class="hover:bg-[#FFF5E6] group transition-all duration-300 w-full justify-start text-[#424244] text-[13px] px-4 py-[9px] rounded cursor-pointer">1:2 (512×1024)</div>
</li>
<li class="custom-select-option flex" data-value="custom">
<div class="hover:bg-[#FFF5E6] group transition-all duration-300 w-full justify-start text-[#424244] text-[13px] px-4 py-[9px] rounded cursor-pointer">${zhAiGetString('custom')}</div>
</li>
</ul>
</div>
<input type="hidden" id="zhaket-ai-dimensions" name="dimensions" value="1024x1024">
</div>
<div class="zhaket-ai-dimensions-inputs ltr flex flex-row-reverse w-auto justify-end " id="zhaket-ai-custom-dimensions" style="display: none;">
<input
type="number"
id="zhaket-ai-width"
name="width"
placeholder="${zhAiGetString('width')}"
min="256"
max="2048"
step="64"
value="1024"
class="!w-[70px] flex-grow-0 flex-shrink-0 !py-1"
/>
<span class="dimensions-separator">×</span>
<input
type="number"
id="zhaket-ai-height"
name="height"
placeholder="${zhAiGetString('height')}"
min="256"
max="2048"
step="64"
value="1024"
class="!w-[70px] flex-grow-0 flex-shrink-0 !py-1"
/>
</div>
</div>
<div class="zhaket-ai-advanced-toggle flex justify-between">
<button type="button" class="zhaket-ai-toggle-btn" id="zhaket-ai-advanced-toggle">
<span class="toggle-text">${zhAiGetString('showAdvancedOptions')}</span>
<span class="toggle-icon"><svg data-v-b1c8d02a="" class="rotate-180 transition-transform duration-200" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path data-v-b1c8d02a="" d="M1 4L4 1L7 4" stroke="#878F9B" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
</button>
<div class="zhaket-ai-charge-display flex gap-[2px]" id="zhaket-ai-charge-display" style="display: none;">
<span class="charge-label">${zhAiGetString('aiCharge')}:</span>
<span class="charge-value" id="zhaket-ai-charge-value">0</span>
<span class="charge-value" id="zhaket-ai-charge-value">${zhAiGetString('currency')}</span>
<a href="${zhaketAIConfig.addCredit}" target="_blank" class="zhaket-ai-plus-svg mr-1 ltr:ml-1 ltr:mr-0">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
<mask id="path-1-outside-1_19_17170" maskUnits="userSpaceOnUse" x="0" y="0" width="17" height="17" fill="black">
<rect fill="white" width="17" height="17"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.40791 16.0026H10.5947C14.3837 16.0026 16.0026 14.3837 16.0026 10.5947V6.40791C16.0026 2.61888 14.3837 1 10.5947 1H6.40791C2.61888 1 1 2.61888 1 6.40791V10.5947C1 14.3837 2.61888 16.0026 6.40791 16.0026ZM2.04669 6.40791C2.04669 3.19107 3.19107 2.04669 6.40791 2.04669H10.5947C13.8115 2.04669 14.9559 3.19107 14.9559 6.40791V10.5947C14.9559 13.8115 13.8115 14.9559 10.5947 14.9559H6.40791C3.19107 14.9559 2.04669 13.8115 2.04669 10.5947V6.40791ZM8.50381 11.8158C8.21772 11.8158 7.98047 11.5786 7.98047 11.2925V9.02463H5.71085C5.42475 9.02463 5.1875 8.78738 5.1875 8.50128C5.1875 8.21519 5.42475 7.97794 5.71085 7.97794H7.98047V5.71011C7.98047 5.42402 8.21772 5.18677 8.50381 5.18677C8.78991 5.18677 9.02716 5.42402 9.02716 5.71011V7.97794H11.2932C11.5793 7.97794 11.8165 8.21519 11.8165 8.50128C11.8165 8.78738 11.5793 9.02463 11.2932 9.02463H9.02716V11.2925C9.02716 11.5786 8.78991 11.8158 8.50381 11.8158Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.40791 16.0026H10.5947C14.3837 16.0026 16.0026 14.3837 16.0026 10.5947V6.40791C16.0026 2.61888 14.3837 1 10.5947 1H6.40791C2.61888 1 1 2.61888 1 6.40791V10.5947C1 14.3837 2.61888 16.0026 6.40791 16.0026ZM2.04669 6.40791C2.04669 3.19107 3.19107 2.04669 6.40791 2.04669H10.5947C13.8115 2.04669 14.9559 3.19107 14.9559 6.40791V10.5947C14.9559 13.8115 13.8115 14.9559 10.5947 14.9559H6.40791C3.19107 14.9559 2.04669 13.8115 2.04669 10.5947V6.40791ZM8.50381 11.8158C8.21772 11.8158 7.98047 11.5786 7.98047 11.2925V9.02463H5.71085C5.42475 9.02463 5.1875 8.78738 5.1875 8.50128C5.1875 8.21519 5.42475 7.97794 5.71085 7.97794H7.98047V5.71011C7.98047 5.42402 8.21772 5.18677 8.50381 5.18677C8.78991 5.18677 9.02716 5.42402 9.02716 5.71011V7.97794H11.2932C11.5793 7.97794 11.8165 8.21519 11.8165 8.50128C11.8165 8.78738 11.5793 9.02463 11.2932 9.02463H9.02716V11.2925C9.02716 11.5786 8.78991 11.8158 8.50381 11.8158Z" fill="#A4A4A4"/>
<path d="M7.98047 9.02463H8.18047V8.82463H7.98047V9.02463ZM7.98047 7.97794V8.17794H8.18047V7.97794H7.98047ZM9.02716 7.97794H8.82716V8.17794H9.02716V7.97794ZM9.02716 9.02463V8.82463H8.82716V9.02463H9.02716ZM10.5947 15.8026H6.40791V16.2026H10.5947V15.8026ZM15.8026 10.5947C15.8026 12.4662 15.402 13.7542 14.5781 14.5781C13.7542 15.402 12.4662 15.8026 10.5947 15.8026V16.2026C12.5121 16.2026 13.9281 15.7937 14.8609 14.8609C15.7937 13.9281 16.2026 12.5121 16.2026 10.5947H15.8026ZM15.8026 6.40791V10.5947H16.2026V6.40791H15.8026ZM10.5947 1.2C12.4662 1.2 13.7542 1.60059 14.5781 2.42449C15.402 3.24839 15.8026 4.53635 15.8026 6.40791H16.2026C16.2026 4.49044 15.7937 3.07445 14.8609 2.14165C13.9281 1.20885 12.5121 0.8 10.5947 0.8V1.2ZM6.40791 1.2H10.5947V0.8H6.40791V1.2ZM1.2 6.40791C1.2 4.53635 1.60059 3.24839 2.42449 2.42449C3.24839 1.60059 4.53635 1.2 6.40791 1.2V0.8C4.49044 0.8 3.07445 1.20885 2.14165 2.14165C1.20885 3.07445 0.8 4.49044 0.8 6.40791H1.2ZM1.2 10.5947V6.40791H0.8V10.5947H1.2ZM6.40791 15.8026C4.53635 15.8026 3.24839 15.402 2.42449 14.5781C1.60059 13.7542 1.2 12.4662 1.2 10.5947H0.8C0.8 12.5121 1.20885 13.9281 2.14165 14.8609C3.07445 15.7937 4.49044 16.2026 6.40791 16.2026V15.8026ZM6.40791 1.84669C4.78538 1.84669 3.62592 2.13322 2.87957 2.87957C2.13322 3.62592 1.84669 4.78538 1.84669 6.40791H2.24669C2.24669 4.8136 2.53236 3.79246 3.16241 3.16241C3.79246 2.53236 4.8136 2.24669 6.40791 2.24669V1.84669ZM10.5947 1.84669H6.40791V2.24669H10.5947V1.84669ZM15.1559 6.40791C15.1559 4.78538 14.8694 3.62592 14.123 2.87957C13.3767 2.13322 12.2172 1.84669 10.5947 1.84669V2.24669C12.189 2.24669 13.2101 2.53236 13.8402 3.16241C14.4702 3.79246 14.7559 4.8136 14.7559 6.40791H15.1559ZM15.1559 10.5947V6.40791H14.7559V10.5947H15.1559ZM10.5947 15.1559C12.2172 15.1559 13.3767 14.8694 14.123 14.123C14.8694 13.3767 15.1559 12.2172 15.1559 10.5947H14.7559C14.7559 12.189 14.4702 13.2101 13.8402 13.8402C13.2101 14.4702 12.189 14.7559 10.5947 14.7559V15.1559ZM6.40791 15.1559H10.5947V14.7559H6.40791V15.1559ZM1.84669 10.5947C1.84669 12.2172 2.13322 13.3767 2.87957 14.123C3.62592 14.8694 4.78538 15.1559 6.40791 15.1559V14.7559C4.8136 14.7559 3.79246 14.4702 3.16241 13.8402C2.53236 13.2101 2.24669 12.189 2.24669 10.5947H1.84669ZM1.84669 6.40791V10.5947H2.24669V6.40791H1.84669ZM7.78047 11.2925C7.78047 11.689 8.10726 12.0158 8.50381 12.0158V11.6158C8.32818 11.6158 8.18047 11.4681 8.18047 11.2925H7.78047ZM7.78047 9.02463V11.2925H8.18047V9.02463H7.78047ZM5.71085 9.22463H7.98047V8.82463H5.71085V9.22463ZM4.9875 8.50128C4.9875 8.89783 5.31429 9.22463 5.71085 9.22463V8.82463C5.53521 8.82463 5.3875 8.67692 5.3875 8.50128H4.9875ZM5.71085 7.77794C5.31429 7.77794 4.9875 8.10473 4.9875 8.50128H5.3875C5.3875 8.32564 5.53521 8.17794 5.71085 8.17794V7.77794ZM7.98047 7.77794H5.71085V8.17794H7.98047V7.77794ZM7.78047 5.71011V7.97794H8.18047V5.71011H7.78047ZM8.50381 4.98677C8.10726 4.98677 7.78047 5.31356 7.78047 5.71011H8.18047C8.18047 5.53447 8.32818 5.38677 8.50381 5.38677V4.98677ZM9.22716 5.71011C9.22716 5.31356 8.90037 4.98677 8.50381 4.98677V5.38677C8.67945 5.38677 8.82716 5.53447 8.82716 5.71011H9.22716ZM9.22716 7.97794V5.71011H8.82716V7.97794H9.22716ZM11.2932 7.77794H9.02716V8.17794H11.2932V7.77794ZM12.0165 8.50128C12.0165 8.10473 11.6898 7.77794 11.2932 7.77794V8.17794C11.4688 8.17794 11.6165 8.32564 11.6165 8.50128H12.0165ZM11.2932 9.22463C11.6898 9.22463 12.0165 8.89783 12.0165 8.50128H11.6165C11.6165 8.67692 11.4688 8.82463 11.2932 8.82463V9.22463ZM9.02716 9.22463H11.2932V8.82463H9.02716V9.22463ZM9.22716 11.2925V9.02463H8.82716V11.2925H9.22716ZM8.50381 12.0158C8.90037 12.0158 9.22716 11.689 9.22716 11.2925H8.82716C8.82716 11.4681 8.67945 11.6158 8.50381 11.6158V12.0158Z" fill="#A4A4A4" mask="url(#path-1-outside-1_19_17170)"/>
<script xmlns=""/></svg>
</a>
</div>
</div>
<div class="zhaket-ai-advanced-options" id="zhaket-ai-advanced-options" style="display: none;">
<div class="zhaket-ai-form-group flex items-center justify-between flex-wrap" id="zhaket-ai-text-model-group" style="display: none;">
<label for="zhaket-ai-text-model" class="flex items-center gap-2">${zhAiGetString('textModel')}:</label>
<div class="custom-select-wrapper relative" data-select-id="zhaket-ai-text-model">
<button type="button" class="custom-select-trigger border border-[#C1C3C8] rounded-[7px] h-[38px] flex items-center justify-between px-1 md:px-2 cursor-pointer inline-block gap-4 min-w-[150px] w-max" data-value="">
<span class="custom-select-text">${zhAiGetString('default')}</span>
<span class="custom-select-arrow"><svg data-v-b1c8d02a="" class="rotate-180 transition-transform duration-200" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path data-v-b1c8d02a="" d="M1 4L4 1L7 4" stroke="#878F9B" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
</button>
<div class="custom-select-list bottom-[40px] left-0 items bg-white rounded-[8px] absolute mt-1 border border-[#F4F4F4] min-w-[170px] z-10 shadow-md overflow-hidden overflow-y-auto max-h-60 flex-col" id="zhaket-ai-text-model-list" style="display: none;">
<ul class="flex flex-col [&>*]:flex [&>*]:rounded-sm [&>*]:items-stretch [&>*]:cursor-pointer [&>*]:!m-0 p-2">
<!-- Options will be populated dynamically -->
</ul>
</div>
<input type="hidden" id="zhaket-ai-text-model" name="text_model" value="">
</div>
</div>
<!-- Tone/Style Selection (for text generation) -->
<div class="zhaket-ai-form-group flex items-center gap-6 justify-between flex-row" id="zhaket-ai-tone-group" style="display: none;">
<label for="zhaket-ai-tone" class="flex items-center gap-2">${zhAiGetString('toneAndStyle')}:</label>
<div class="custom-select-wrapper relative" data-select-id="zhaket-ai-tone">
<button type="button" class="custom-select-trigger border border-[#C1C3C8] rounded-[7px] h-[38px] flex items-center justify-between px-1 md:px-2 cursor-pointer inline-block gap-4 min-w-[150px] max-w" data-value="">
<span class="custom-select-text">${zhAiGetString('default')}</span>
<span class="custom-select-arrow"><svg data-v-b1c8d02a="" class="rotate-180 transition-transform duration-200" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path data-v-b1c8d02a="" d="M1 4L4 1L7 4" stroke="#878F9B" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
</button>
<div class="custom-select-list bottom-[40px] left-0 items bg-white rounded-[8px] absolute mt-1 border border-[#F4F4F4] min-w-[170px] z-10 shadow-md overflow-hidden overflow-y-auto max-h-60 flex-col w-max" id="zhaket-ai-tone-list" style="display: none;">
<ul class="flex flex-col [&>*]:flex [&>*]:rounded-sm [&>*]:items-stretch [&>*]:cursor-pointer [&>*]:!m-0 p-2">
<!-- Options will be populated dynamically -->
</ul>
</div>
<input type="hidden" id="zhaket-ai-tone" name="tone" value="">
</div>
</div>
<div class="zhaket-ai-form-group flex items-center justify-between flex-wrap" id="zhaket-ai-image-model-group" style="display: none;">
<label for="zhaket-ai-image-model" class="flex items-center gap-2">${zhAiGetString('imageModel')}:</label>
<div class="custom-select-wrapper relative" data-select-id="zhaket-ai-image-model">
<button type="button" class="custom-select-trigger border border-[#C1C3C8] rounded-[7px] h-[38px] flex items-center justify-between px-1 md:px-2 cursor-pointer inline-block gap-4 min-w-[150px] max-w" data-value="">
<span class="custom-select-text">${zhAiGetString('default')}</span>
<span class="custom-select-arrow"><svg data-v-b1c8d02a="" class="rotate-180 transition-transform duration-200" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path data-v-b1c8d02a="" d="M1 4L4 1L7 4" stroke="#878F9B" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
</button>
<div class="custom-select-list bottom-[40px] left-0 items bg-white rounded-[8px] absolute mt-1 border border-[#F4F4F4] min-w-[170px] z-10 shadow-md overflow-hidden overflow-y-auto max-h-60 flex-col w-max" id="zhaket-ai-image-model-list" style="display: none;">
<ul class="flex flex-col [&>*]:flex [&>*]:rounded-sm [&>*]:items-stretch [&>*]:cursor-pointer [&>*]:!m-0 p-2">
<!-- Options will be populated dynamically -->
</ul>
</div>
<input type="hidden" id="zhaket-ai-image-model" name="image_model" value="">
</div>
</div>
</div>
<div class="zhaket-ai-modal-footer">
<button type="button" class="zhaket-ai-btn zhaket-ai-btn-cancel hidden">${zhAiGetString('cancel')}</button>
<button type="submit" class="zhaket-ai-cta-btn border-none h-[46px]">
<span class="btn-text">${zhAiGetString('generate')}</span>
<img data-loader-img="spinner/white-loading.svg" alt="" class="btn-loader h-[25px] p-0" style="display: none;">
</button>
</div>
</form>
</div>
</div>