<h2 class="foot">
	<span class="dashicons dashicons-admin-appearance"></span> HTML5 & Rich Media Creator
</h2>
<div>
    <span class="dashicons dashicon-14 dashicons-arrow-left-alt"></span> <a href="/wp-admin/admin.php?page=bsa-pro-sub-menu-spaces">back to <strong>spaces / ads</strong></a>
</div>

<?php $hdsnjo = ''; ?>
<?php if ( get_option('bsa_pro_u'.$hdsnjo.'pd'.'at'.$hdsnjo.'e'.'_s'.$hdsnjo.'ta'.'tus') == 'i'.$hdsnjo.'n'.'v'.$hdsnjo.'a'.'l'.$hdsnjo.'i'.$hdsnjo.'d' ): ?>

	<tr class="bsaAdminTable showAdvanced">
		<td colspan="2">
			<div class="bsaLockedContent bsaLockedWhite">
				<strong>Trial Version</strong><br>
				Use purchase code to unlock Standard Ad Creator and other features.<br><br>
				Paste purchase code in the <a href="<?php echo admin_url() ?>admin.php?page=bsa-pro-sub-menu-opts">settings</a> (Ads Pro > Settings > Purchase Code).<br>
				Where is your purchase code? <a href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-" target="_blank">Learn more</a>.<br><br>
				- or -<br><br>
				<a href="https://1.envato.market/buy-regular-ads-pro-6" target="_blank">Buy now</a> the latest version of Ads Pro.
			</div>
		</td>
	</tr>

<?php else: ?>

    <header class="topbar">
        <div class="left">
            <button class="auto-cls-13" id="btn-new" title="Nowy projekt (reset)">Nowy</button>
            <label class="btn-file">
                Import JSON
                <input accept="application/json" class="auto-cls-14" id="import-json" type="file"/>
            </label>
            <button class="auto-cls-15" id="btn-save">Zapisz</button>
            <label class="ml" title="Zapisuj co 1 minutę do localStorage">Zapisuj automatycznie <input class="auto-cls-16" id="auto-save" type="checkbox"/></label>
            <button class="auto-cls-17" id="btn-export-json">Export JSON</button>
            <button class="auto-cls-18" id="btn-export-html">Export HTML</button>
        </div>
        <div class="center">
            <label class="auto-cls-19">Zoom: <input class="auto-cls-20" id="zoom" max="400" min="25" step="1" type="range" value="100"/></label>
            <span class="auto-cls-21" id="zoomLabel">100%</span>
            <label class="ml">Siatka <input checked="" class="auto-cls-22" id="gridToggle" type="checkbox"/></label>
            <label class="ml">Przyciąganie <input checked="" class="auto-cls-23" id="snapToggle" type="checkbox"/></label>
        </div>
        <div class="right">
            <button class="auto-cls-24" id="btn-undo" title="Cofnij (Ctrl+Z)">⟲</button>
            <button class="auto-cls-25" id="btn-redo" title="Ponów (Ctrl+Y)">⟳</button>
            <button class="auto-cls-26 hidden" id="btn-help" title="Pomoc">?</button>
            <button id="btn-lang" class="hidden" title="Język / Language">PL</button>
            <label class="ml" for="theme-select">Style
                <select id="theme-select">
                    <option value="auto">Auto</option>
                    <option value="dark">Dark</option>
                    <option value="light">Light</option>
                </select>
            </label>
        </div>
    </header>
    <main class="layout">
        <aside class="sidebar left">
            <div class="section">
                <h3 class="auto-cls-27">Warstwy</h3>
                <div class="layer-toolbar">
                    <button class="auto-cls-28" id="add-text">+ Text</button>
                    <button class="auto-cls-29" id="add-image">+ Image</button>
                    <button class="auto-cls-29" id="add-video">+ Video</button>
                    <button class="auto-cls-30" id="add-icon">+ Icon</button>
                </div>
                <ul class="auto-cls-31" id="layers"></ul>
            </div>
            <div class="section">
                <h3 class="auto-cls-32">Pole robocze</h3>
                <label class="auto-cls-33">W: <input class="auto-cls-34" id="canvas-w" max="4000" min="1" type="number" value="300"/></label>
                <label class="auto-cls-35">H: <input class="auto-cls-36" id="canvas-h" max="4000" min="1" type="number" value="250"/></label>
                <h4 class="auto-cls-37">Tło</h4>
                <label class="auto-cls-38"><select class="auto-cls-39" id="bg-type">
                        <option class="auto-cls-40" value="transparent">Transparent</option>
                        <option class="auto-cls-41" value="color">Color</option>
                        <option class="auto-cls-42" value="image">Image</option>
                    </select></label>
                <label class="hidden" id="bg-color-wrap">Color: <input class="auto-cls-43" id="bg-color" type="color" value="#ffffff"/></label>
                <div class="hidden" id="bg-image-wrap">
                    <label class="auto-cls-44">URL: <input class="auto-cls-45" id="bg-image-url" placeholder="https://..." type="text"/></label>
                    <label class="btn-file small">Upload
                        <input accept="image/*" class="auto-cls-46" id="bg-image-file" type="file"/>
                    </label>
                    <label class="auto-cls-47">Fit:
                        <select class="auto-cls-48" id="bg-fit">
                            <option class="auto-cls-49" value="cover">cover</option>
                            <option class="auto-cls-50" value="contain">contain</option>
                        </select>
                    </label>
                    <label class="auto-cls-51">Repeat:
                        <select class="auto-cls-52" id="bg-repeat">
                            <option class="auto-cls-53" value="no-repeat">no-repeat</option>
                            <option class="auto-cls-54" value="repeat">repeat</option>
                        </select>
                    </label>
                    <label class="auto-cls-55">Position: <input class="auto-cls-56" id="bg-position" type="text" value="center center"/></label>
                </div>
            </div>
        </aside>
        <section class="canvas-wrap">
            <div class="grid" id="canvas"></div>
            <div class="timeline">
                <div class="timeline-controls">
                    <button class="auto-cls-57" id="tl-play">▶</button>
                    <button class="auto-cls-58" id="tl-stop">■</button>
                    <label class="auto-cls-59">Czas: <span class="auto-cls-60" id="tl-now">0</span> ms</label>
                    <label class="auto-cls-59-1 ms-15">Total time: <input id="tl-total" type="number" min="1" value="" placeholder="2000"/> ms</label>
                </div>
                <div class="auto-cls-61" id="clips">
                    <div id="tl-cursor"></div>
                </div>
            </div>
        </section>
        <aside class="sidebar right">
            <div class="section">
                <h3 class="auto-cls-62">Element</h3>
                <div class="auto-cls-63" id="no-selection">Brak zaznaczenia</div>
                <div class="hidden" id="props">
                    <label class="auto-cls-64">Name: <input class="auto-cls-65" id="prop-name" type="text"/></label>
                    <label class="auto-cls-66">X: <input class="auto-cls-67" id="prop-x" type="number"/></label>
                    <label class="auto-cls-68">Y: <input class="auto-cls-69" id="prop-y" type="number"/></label>
                    <label class="auto-cls-70">Szer.: <input class="auto-cls-71" id="prop-w" type="number"/></label>
                    <label class="auto-cls-72">Wys.: <input class="auto-cls-73" id="prop-h" type="number"/></label>
                    <label class="auto-cls-74">Obrót: <input class="auto-cls-75" id="prop-rot" type="number" value="0"/></label>
                    <label class="auto-cls-76">Opacity: <input class="auto-cls-77" id="prop-op" max="1" min="0" step="0.05" type="number" value="1"/></label>
                    <label class="auto-cls-78">Padding TB: <input class="auto-cls-79" id="prop-pad-tb" type="number" value="0"/></label>
                    <label class="auto-cls-80">Padding LR: <input class="auto-cls-81" id="prop-pad-lr" type="number" value="0"/></label>
                    <label class="auto-cls-82">Radius: <input class="auto-cls-83" id="prop-radius" type="number" value="0"/></label>
                    <label class="auto-cls-84">Background: <input class="auto-cls-85" id="prop-bg" type="color" value="#ffffff"/><input class="auto-cls-86" id="prop-bg-transp" type="checkbox"/> transparent</label>
                    <div class="hidden mt-15" id="text-props">
                        <h4 class="auto-cls-87 mt-10">Text</h4>
                        <div class="inline-tools">
                            <button class="auto-cls-88" data-cmd="bold"><b class="auto-cls-89">B</b></button>
                            <button class="auto-cls-90" data-cmd="italic"><i class="auto-cls-91">I</i></button>
                            <button class="auto-cls-92" data-cmd="underline"><u class="auto-cls-93">U</u></button>
                            <button class="auto-cls-94" data-cmd="strikeThrough"><s class="auto-cls-95">S</s></button>
                        </div>
                        <label class="auto-cls-96">Font: <input class="auto-cls-97" id="text-font" type="text" value="Inter"/></label>
                        <label class="auto-cls-98">Size (px): <input class="auto-cls-99" id="text-size" type="number" value="18"/></label>
                        <label class="auto-cls-100">Weight: <input class="auto-cls-101" id="text-weight" type="number" value="600"/></label>
                        <label class="auto-cls-102">Line: <input class="auto-cls-103" id="text-line" step="0.1" type="number" value="1.3"/></label>
                        <label class="auto-cls-104">Letters: <input class="auto-cls-105" id="text-track" step="0.1" type="number" value="0"/></label>
                        <label class="auto-cls-106">Color: <input class="auto-cls-107" id="text-color" type="color" value="#111111"/></label>
                        <label class="auto-cls-108">Align:
                            <select class="auto-cls-109" id="text-align">
                                <option class="auto-cls-110">left</option><option class="auto-cls-111">center</option><option class="auto-cls-112">right</option>
                            </select>
                        </label>
                        <label class="auto-cls-113">Popular fonts:
                            <select class="auto-cls-114" id="font-preset">
                                <option class="auto-cls-115" value="">— select —</option>
                                <option class="auto-cls-116">Inter</option>
                                <option class="auto-cls-117">Roboto</option>
                                <option class="auto-cls-118">Open Sans</option>
                                <option class="auto-cls-119">Lato</option>
                                <option class="auto-cls-120">Montserrat</option>
                                <option class="auto-cls-121">Poppins</option>
                                <option class="auto-cls-122">Oswald</option>
                                <option class="auto-cls-123">Raleway</option>
                                <option class="auto-cls-124">Playfair Display</option>
                                <option class="auto-cls-125">Merriweather</option>
                                <option class="auto-cls-126">Nunito</option>
                                <option class="auto-cls-127">Comfortaa</option>
                            </select>
                        </label>
                        <div class="note">Podwójny klik na elemencie, aby edytować tekst.</div>
                    </div>
                    <div class="hidden mt-15" id="image-props">
                        <h4 class="auto-cls-128 mt-10">Image</h4>
                        <label class="auto-cls-129">URL: <input class="auto-cls-130" id="img-url" placeholder="https://..." type="text"/></label>
                        <label class="btn-file small">Upload
                            <input accept="image/*" class="auto-cls-131" id="img-file" type="file"/>
                        </label>
                        <label class="auto-cls-132">Fit:
                            <select class="auto-cls-133" id="img-fit">
                                <option class="auto-cls-134">cover</option><option class="auto-cls-135">contain</option><option class="auto-cls-136">fill</option>
                            </select>
                        </label>
                        <label class="auto-cls-137">Position: <input class="auto-cls-138" id="img-pos" type="text" value="center"/></label>
                    </div>

                    <div class="hidden mt-15" id="video-props">
                        <h4 class="auto-cls-128 mt-10">Video</h4>
                        <label class="auto-cls-129">Video URL:
                            <input class="auto-cls-130" id="video-url" placeholder="https://youtu.be/... or https://..." type="text"/>
                        </label>
                        <label class="auto-cls-132">Aspect ratio:
                            <select class="auto-cls-133" id="video-ratio">
                                <option value="">Auto / contain</option>
                                <option value="16:9">16:9</option>
                                <option value="4:3">4:3</option>
                                <option value="1:1">1:1</option>
                                <option value="9:16">9:16</option>
                            </select>
                        </label>
                        <div class="mt-10">
                            <label class="auto-cls-132">
                                <input type="checkbox" id="video-autoplay" /> Autoplay
                            </label>
                            <label class="auto-cls-132 ml-10">
                                <input type="checkbox" id="video-controls" checked /> Controls
                            </label>
                            <label class="auto-cls-132 ml-10">
                                <input type="checkbox" id="video-loop" /> Loop
                            </label>
                        </div>
                    </div>
                    <div class="hidden mt-15" id="icon-props">
                        <h4 class="auto-cls-139 mt-10">Icon (Boxicons)</h4>
                        <label class="auto-cls-140">Name:
                            <select class="auto-cls-141" id="icon-name"></select>
                        </label>
                        <label class="auto-cls-142">Size (px): <input class="auto-cls-143" id="icon-size" type="number" value="48"/></label>
                        <label class="auto-cls-144">Color: <input class="auto-cls-145" id="icon-color" type="color" value="#111111"/></label>
                    </div>
                    <div class="auto-cls-146 mt-15" id="link-props">
                        <h4 class="auto-cls-147 mt-10">Link</h4>
                        <label class="auto-cls-148">href: <input class="auto-cls-149" id="link-href" placeholder="https://..." type="text"/></label>
                        <label class="auto-cls-150">target:
                            <select class="auto-cls-151" id="link-target">
                                <option class="auto-cls-153" value="_blank">_blank</option>
                                <option class="auto-cls-152" value="_self">_self</option>
                            </select>
                        </label>
                        <label class="auto-cls-154">clickTag: <input class="auto-cls-155" id="link-clicktag" placeholder="https://..." type="text"/></label>
                        <label class="auto-cls-156">clickFn: <input class="auto-cls-157" id="link-clickfn" placeholder="globalFunctionName" type="text"/></label>
                        <label class="auto-cls-158">data-link: <input class="auto-cls-159" id="link-datalink" placeholder="promo-1" type="text"/></label>
                    </div>
                    <div class="auto-cls-160 mt-15" id="anim-props">
                        <h4 class="auto-cls-161 mt-10">Animations</h4>
                        <div class="anim-row">
                            <label class="auto-cls-162">Effect
                                <select class="auto-cls-163" id="anim-name">
                                    <optgroup label="Entry animations">
                                        <option>fadeIn</option>
                                        <option>fadeInUp</option>
                                        <option>fadeInDown</option>
                                        <option>fadeInLeft</option>
                                        <option>fadeInRight</option>
                                        <option>zoomIn</option>
                                        <option>zoomInUp</option>
                                        <option>zoomInDown</option>
                                        <option>zoomInLeft</option>
                                        <option>zoomInRight</option>
                                        <option>bounceIn</option>
                                        <option>bounceInUp</option>
                                        <option>bounceInDown</option>
                                        <option>bounceInLeft</option>
                                        <option>bounceInRight</option>
                                        <option>slideInUp</option>
                                        <option>slideInDown</option>
                                        <option>slideInLeft</option>
                                        <option>slideInRight</option>
                                        <option>backInUp</option>
                                        <option>backInDown</option>
                                        <option>backInLeft</option>
                                        <option>backInRight</option>
                                        <option>flipInX</option>
                                        <option>flipInY</option>
                                    </optgroup>
                                    <optgroup label="Element animations">
                                        <option>bounce</option>
                                        <option>flash</option>
                                        <option>pulse</option>
                                        <option>rubberBand</option>
                                        <option>shakeX</option>
                                        <option>shakeY</option>
                                        <option>swing</option>
                                        <option>tada</option>
                                        <option>wobble</option>
                                        <option>jello</option>
                                        <option>heartBeat</option>
                                    </optgroup>
                                    <optgroup label="Exit animations">
                                        <option>fadeOut</option>
                                        <option>fadeOutUp</option>
                                        <option>fadeOutDown</option>
                                        <option>fadeOutLeft</option>
                                        <option>fadeOutRight</option>
                                        <option>zoomOut</option>
                                        <option>zoomOutUp</option>
                                        <option>zoomOutDown</option>
                                        <option>zoomOutLeft</option>
                                        <option>zoomOutRight</option>
                                        <option>bounceOut</option>
                                        <option>bounceOutUp</option>
                                        <option>bounceOutDown</option>
                                        <option>bounceOutLeft</option>
                                        <option>bounceOutRight</option>
                                        <option>backOutUp</option>
                                        <option>backOutDown</option>
                                        <option>backOutLeft</option>
                                        <option>backOutRight</option>
                                        <option>slideOutUp</option>
                                        <option>slideOutDown</option>
                                        <option>slideOutLeft</option>
                                        <option>slideOutRight</option>
                                    </optgroup>
                                </select>
                            </label>
                            <label class="auto-cls-179">Start (ms) <input class="auto-cls-180" id="anim-start" type="number" value="0"/></label>
                            <label class="auto-cls-181">End (ms) <input class="auto-cls-182" id="anim-end" type="number" value="1200"/></label>
                            <label class="auto-cls-183">Time (ms) <input class="auto-cls-184" id="anim-duration" type="number" value="800"/></label>
                            <label class="auto-cls-185">Delay (ms) <input class="auto-cls-186" id="anim-delay" type="number" value="0"/></label>
                            <label class="auto-cls-187">Repeats <input class="auto-cls-188" id="anim-iter" type="text" value="1"/></label>
                            <div class="anim-visible-modes mt-5">
                                <label><input type="checkbox" id="anim-hide-before"> hide before animation</label>
                                <label><input type="checkbox" id="anim-hide-after"> hide after animation</label>
                            </div>

                            <button class="auto-cls-189" id="anim-add">Add clip</button>
                        </div>
                        <ul class="auto-cls-190" id="anim-list"></ul>
                    </div>
                </div>
            </div>
        </aside>
    </main>
    <footer class="foot">
        <small class="auto-cls-191">HTML5 & Rich Media Creator v5.0</small>
    </footer>
    <div class="auto-cls-192" id="toast"></div>
    <script class="auto-cls-193" src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js"></script>

<?php endif; ?>

<script>
    (function($) {
        "use strict";
        // - start - open page
        let bsaPageContent = $(".wrap");
        let waitingContent = $(".waitingContent");
        $(document).ready(function(){
            bsaPageContent.fadeIn();
            waitingContent.fadeOut();
        });
        // - end - open page
    })(jQuery);
</script>