225 lines
12 KiB
HTML
225 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>MaalFlows Admin</title>
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<link rel="stylesheet" href="/admin.css">
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<section id="loginView" class="login">
|
|
<form id="loginForm" class="panel">
|
|
<h1>MaalFlows</h1>
|
|
<label>Uzivatel <input name="username" autocomplete="username" required></label>
|
|
<label>Heslo <input name="password" type="password" autocomplete="current-password" required></label>
|
|
<button type="submit">Prihlasit</button>
|
|
<p id="loginError" class="error"></p>
|
|
</form>
|
|
</section>
|
|
|
|
<section id="appView" class="app hidden">
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<h1>MaalFlows</h1>
|
|
<div class="brand-actions">
|
|
<label class="online-dot-toggle" title="Online stav chatu" aria-label="Online stav chatu">
|
|
<input id="onlineToggle" type="checkbox">
|
|
<span></span>
|
|
</label>
|
|
<button id="settingsButton" class="icon-button" type="button" title="Nastaveni" aria-label="Nastaveni">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2-1.5-2-3.5-2.4 1a8 8 0 0 0-2.6-1.5L14 2h-4l-.4 2.5A8 8 0 0 0 7 6L4.6 5l-2 3.5 2 1.5a9.7 9.7 0 0 0 0 3l-2 1.5 2 3.5L7 18a8 8 0 0 0 2.6 1.5L10 22h4l.4-2.5A8 8 0 0 0 17 18l2.4 1 2-3.5-2-1.5ZM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="admin-sound-control" title="Zvuk notifikaci v BO">
|
|
<button id="adminSoundToggle" class="icon-button" type="button" aria-label="Vypnout zvuk notifikaci">
|
|
<svg class="sound-on" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M4 9v6h4l5 4V5L8 9H4Zm12.2-1.8-1.4 1.4A4.9 4.9 0 0 1 16 12c0 1.3-.5 2.5-1.2 3.4l1.4 1.4A6.9 6.9 0 0 0 18 12c0-1.8-.7-3.5-1.8-4.8Zm2.6-2.6-1.4 1.4A8.8 8.8 0 0 1 20 12a8.8 8.8 0 0 1-2.6 6l1.4 1.4A10.8 10.8 0 0 0 22 12c0-2.9-1.2-5.5-3.2-7.4Z"></path>
|
|
</svg>
|
|
<svg class="sound-off" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M4 9v6h4l5 4V5L8 9H4Zm12.4 3 2.3-2.3-1.4-1.4-2.3 2.3-2.3-2.3-1.4 1.4 2.3 2.3-2.3 2.3 1.4 1.4 2.3-2.3 2.3 2.3 1.4-1.4-2.3-2.3Z"></path>
|
|
</svg>
|
|
</button>
|
|
<input id="adminSoundVolume" type="range" min="0" max="100" step="5" aria-label="Hlasitost notifikaci">
|
|
</div>
|
|
<button id="logoutButton" class="logout-compact icon-button" type="button" title="Odhlasit" aria-label="Odhlasit">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M10 3h9v18h-9v-2h7V5h-7V3Zm-1.2 5.2 1.4 1.4L7.8 12l2.4 2.4-1.4 1.4L4 11l4.8-2.8ZM5.4 11h8.8v2H5.4v-2Z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="list-tools">
|
|
<label>Filtr
|
|
<select id="conversationFilter">
|
|
<option value="active">aktivni</option>
|
|
<option value="all">vse</option>
|
|
<option value="new">nove</option>
|
|
<option value="open">otevrene</option>
|
|
<option value="resolved">vyresene</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div id="conversationList" class="conversation-list"></div>
|
|
</aside>
|
|
|
|
<section class="conversation">
|
|
<header id="conversationHeader" class="conversation-header">
|
|
<div>
|
|
<h2>Vyber konverzaci</h2>
|
|
</div>
|
|
</header>
|
|
<div id="messages" class="messages"></div>
|
|
<div id="typingNotice" class="typing hidden">Zakaznik pise...</div>
|
|
<form id="replyForm" class="reply hidden">
|
|
<div class="reply-composer">
|
|
<textarea name="message" rows="3" placeholder="Napsat odpoved..."></textarea>
|
|
<label class="reply-icon-button attach-button" title="Pridat fotku" aria-label="Pridat fotku">
|
|
<input name="attachments" type="file" accept=".jpg,.jpeg,.png,.webp,.gif,.avif,image/jpeg,image/png,image/webp,image/gif,image/avif" multiple>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M7.5 18.5a5 5 0 0 1 0-7.1l7.7-7.7a3.5 3.5 0 0 1 5 5l-8.4 8.4a2.1 2.1 0 0 1-3-3l7.8-7.8 1.4 1.4-7.8 7.8a.1.1 0 0 0 .1.1l8.4-8.4a1.5 1.5 0 0 0-2.1-2.1l-7.7 7.7a3 3 0 0 0 4.2 4.2l7.5-7.5 1.4 1.4-7.5 7.5a5 5 0 0 1-7 0Z"></path>
|
|
</svg>
|
|
</label>
|
|
<button class="reply-icon-button send-button" type="submit" title="Odeslat" aria-label="Odeslat">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M3.7 20.3 21 12 3.7 3.7l2.5 7.1L14 12l-7.8 1.2-2.5 7.1Z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="replyAttachments" class="reply-attachments"></div>
|
|
</form>
|
|
</section>
|
|
|
|
<aside class="visitor-panel">
|
|
<header>
|
|
<h2>Navstevnici</h2>
|
|
<button id="hideBotsToggle" class="visitor-filter-toggle" type="button">Skryt boty</button>
|
|
<span id="visitorCount">0 online</span>
|
|
</header>
|
|
<div id="visitorList" class="visitor-list">
|
|
<p class="empty-list">Zatim nikdo online.</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<aside id="settingsPanel" class="settings hidden">
|
|
<div class="settings-head">
|
|
<h2>Nastaveni</h2>
|
|
<button id="closeSettingsButton" type="button">Zavrit</button>
|
|
</div>
|
|
<div class="settings-tabs" role="tablist" aria-label="Nastaveni">
|
|
<button class="active" type="button" data-settings-tab="widget">Widget</button>
|
|
<button type="button" data-settings-tab="admin">BO</button>
|
|
</div>
|
|
<section class="settings-tab-panel active" data-settings-panel="widget">
|
|
<form id="settingsForm">
|
|
<label>Titulek CS <input name="titleCs"></label>
|
|
<label>Intro CS <textarea name="introCs" rows="2"></textarea></label>
|
|
<label>Titulek EN <input name="titleEn"></label>
|
|
<label>Intro EN <textarea name="introEn" rows="2"></textarea></label>
|
|
<label class="color-field">Barva
|
|
<span class="color-row">
|
|
<input name="brand" type="color">
|
|
<input name="brandHex" class="hex-input" type="text" inputmode="text" maxlength="7" placeholder="#0f8f6f" pattern="#?[0-9a-fA-F]{6}">
|
|
</span>
|
|
</label>
|
|
<label>Pozice desktop <select name="desktopSide"><option>right</option><option>left</option></select></label>
|
|
<label>Desktop bottom px <input name="desktopBottom" type="number"></label>
|
|
<label>Desktop offset px <input name="desktopOffset" type="number"></label>
|
|
<label>Pozice mobil <select name="mobileSide"><option>right</option><option>left</option></select></label>
|
|
<label>Mobil bottom px <input name="mobileBottom" type="number"></label>
|
|
<label>Mobil offset px <input name="mobileOffset" type="number"></label>
|
|
<fieldset class="effect-settings">
|
|
<legend>Online efekt tlacitka</legend>
|
|
<label><input name="launcherBreathe" type="checkbox"> jemne dychani</label>
|
|
<label><input name="launcherRing" type="checkbox"> svetelny prstenec</label>
|
|
<label><input name="launcherHoverLabel" type="checkbox"> napis pri najeti</label>
|
|
<label><input name="launcherAvatar" type="checkbox"> mini avatar styl</label>
|
|
</fieldset>
|
|
<fieldset class="effect-settings">
|
|
<legend>Efekt pri nove zprave</legend>
|
|
<label><input name="messagePulse" type="checkbox"> pulzovani</label>
|
|
<label><input name="messageBadge" type="checkbox"> badge s poctem</label>
|
|
<label><input name="messageLabel" type="checkbox"> kratky stitek</label>
|
|
<label><input name="messageWiggle" type="checkbox"> zhoupnuti</label>
|
|
</fieldset>
|
|
<button type="submit">Ulozit</button>
|
|
</form>
|
|
<h3>GTM snippet</h3>
|
|
<pre id="snippet"></pre>
|
|
</section>
|
|
<section class="settings-tab-panel" data-settings-panel="admin">
|
|
<div class="admin-preferences">
|
|
<label class="setting-switch">Zvuk notifikaci <input id="adminSoundToggleSettings" type="checkbox"></label>
|
|
<label>Hlasitost <input id="adminSoundVolumeSettings" type="range" min="0" max="100" step="5"></label>
|
|
<label>Styl zvuku
|
|
<select id="adminSoundStyle">
|
|
<option value="bright">Jasny</option>
|
|
<option value="soft">Jemny</option>
|
|
<option value="chime">Cinknuti</option>
|
|
<option value="urgent">Vyrazny</option>
|
|
<option value="tap">Kratke tuknuti</option>
|
|
<option value="double">Dvojite upozorneni</option>
|
|
</select>
|
|
</label>
|
|
<label class="setting-switch">Opakovat do otevreni chatu <input id="adminSoundRepeat" type="checkbox"></label>
|
|
<button id="adminSoundTest" type="button">Otestovat zvuk</button>
|
|
<fieldset class="effect-settings ai-settings">
|
|
<legend>AI preklady</legend>
|
|
<p class="ai-help">
|
|
OpenAI API key vytvoris v
|
|
<a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">OpenAI Platform / API keys</a>.
|
|
Klic se ulozi jen pro tento projekt a v BO se potom zobrazi jen maskovane.
|
|
</p>
|
|
<label><input id="translationEnabled" type="checkbox"> zapnout preklady</label>
|
|
<label>Jazyk operatora
|
|
<select id="operatorLanguage">
|
|
<option value="cs">Cestina</option>
|
|
<option value="sk">Slovenstina</option>
|
|
<option value="pl">Polstina</option>
|
|
<option value="en">Anglictina</option>
|
|
<option value="de">Nemcina</option>
|
|
</select>
|
|
</label>
|
|
<label class="full-row">OpenAI API key
|
|
<input id="openaiApiKey" type="password" autocomplete="off" placeholder="sk-...">
|
|
<small id="openaiApiKeyStatus">Klic neni ulozeny.</small>
|
|
</label>
|
|
<label class="full-row">OpenAI model
|
|
<span class="model-row">
|
|
<select id="translationModel"></select>
|
|
<button id="refreshAiModels" type="button">Obnovit</button>
|
|
</span>
|
|
</label>
|
|
<div class="ai-actions">
|
|
<button id="saveAiSettings" type="button">Ulozit AI nastaveni</button>
|
|
<button id="testOpenAiKey" type="button">Otestovat klic</button>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset class="effect-settings admin-users-settings">
|
|
<legend>BO uzivatele</legend>
|
|
<form id="adminUserForm" class="admin-user-form">
|
|
<label>Login
|
|
<input name="username" autocomplete="off" placeholder="petr" required>
|
|
</label>
|
|
<label>Jmeno
|
|
<input name="displayName" autocomplete="off" placeholder="Petr">
|
|
</label>
|
|
<label>Heslo
|
|
<input name="password" type="password" autocomplete="new-password" placeholder="min. 8 znaku" required>
|
|
</label>
|
|
<button type="submit">Pridat uzivatele</button>
|
|
</form>
|
|
<div id="adminUsersList" class="admin-users-list"></div>
|
|
<small id="adminUsersStatus"></small>
|
|
</fieldset>
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
</section>
|
|
</main>
|
|
<script src="/admin.js"></script>
|
|
</body>
|
|
</html>
|