486 lines
30 KiB
HTML
486 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>LoquendoBot</title>
|
|
|
|
<!--#region css styles -->
|
|
<link rel="stylesheet" href="./fonts/FRAMCDN/font.css" />
|
|
<link rel="stylesheet" href="./fonts/Aven/stylesheet.css" />
|
|
<link rel="stylesheet" href="./css/checkbox.css" />
|
|
<link rel="stylesheet" href="./css/chat.css" />
|
|
<link rel="stylesheet" href="./css/home.css" />
|
|
<link rel="stylesheet" href="./css/menu.css" />
|
|
<link rel="stylesheet" href="./css/tabs.css" />
|
|
<link rel="stylesheet" href="./css/tts-menu.css" />
|
|
<link rel="stylesheet" href="./css/volume-slider.css" />
|
|
<link rel="stylesheet" href="./css/sliders.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
|
|
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
/>
|
|
<link rel="stylesheet" href="./css/logger.css" />
|
|
<!--#endregion -->
|
|
</head>
|
|
|
|
<body>
|
|
<!--#region title bar -->
|
|
<header id="titlebar">
|
|
<div id="drag-region">
|
|
<div class="language-selector">
|
|
<span class="flag-icon" id="selected-flag">🇬🇧</span>
|
|
<span id="selected-language">EN</span>
|
|
<div class="language-dropdown" id="languageDropdown">
|
|
<div class="language-item" language="NL" flag="🇳🇱">🇳🇱 NL</div>
|
|
<div class="language-item" language="ES" flag="🇪🇸">🇪🇸 ES</div>
|
|
<div class="language-item" language="EN" flag="🇬🇧">🇬🇧 EN</div>
|
|
</div>
|
|
</div>
|
|
<div id="window-controls">
|
|
<div class="button" id="min-button">
|
|
<i class="fa-solid fa-window-minimize"></i>
|
|
</div>
|
|
<div class="button" id="max-button">
|
|
<i class="fa-solid fa-window-maximize"></i>
|
|
</div>
|
|
<div class="button" id="close-button">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!--#endregion -->
|
|
|
|
<div class="container">
|
|
<!-- #region Notifications -->
|
|
<div id="toasts"></div>
|
|
<!--#endregion -->
|
|
|
|
<!--#region Menu, left section-->
|
|
<div class="sidepanel-left" id="sidepanel-left">
|
|
<nav class="menu">
|
|
<ul class="items">
|
|
<li class="item item-active" tip="Chat" id="btnChat">
|
|
<i class="fa fa-comments"></i>
|
|
</li>
|
|
<li class="item" tip="Logs" id="btnLogs">
|
|
<i class="fa fa-clipboard menu-icon"></i>
|
|
</li>
|
|
<li class="item" tip="BrowserSource ChatBubble" id="btnBrowsersourceChat">
|
|
<i class="fa fa-history menu-icon"></i>
|
|
</li>
|
|
<li class="item" tip="Vtuber" id="btnBrowsersourceVtuber">
|
|
<i class="fa fa-user menu-icon"></i>
|
|
</li>
|
|
<li class="item" tip="Configuration" id="btnConfiguration">
|
|
<i class="fa fa-cogs menu-icon"></i>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div tip="Hide Menu">
|
|
<div class="circle-left">
|
|
<i class="fa fa-cog hide"></i>
|
|
</div>
|
|
</div>
|
|
<!--#endregion -->
|
|
|
|
<!-- #region Chat, middle section-->
|
|
<div class="mid">
|
|
<!-- #region Commands Screen-->
|
|
<div class="OptionPanel" id="Logs">
|
|
<table id="logTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Level</th>
|
|
<th>Message</th>
|
|
<th>Metadata</th>
|
|
<th>Timestamp</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="logContent"></tbody>
|
|
</table>
|
|
</div>
|
|
<!--#endregion -->
|
|
|
|
<!-- #region Commands Screen-->
|
|
<div class="OptionPanel" id="BrowsersourceChat"></div>
|
|
<!--#endregion -->
|
|
|
|
<!-- #region Commands Screen-->
|
|
<div class="OptionPanel" id="BrowsersourceVtuber"></div>
|
|
<!--#endregion -->
|
|
|
|
<!-- #region Configuration Screen-->
|
|
<div class="OptionPanel" id="Configuration">
|
|
<div id="tstx">
|
|
<div>
|
|
<div class="optionrow">
|
|
<button class="AdvancedMenuButton" id="ShowThemeCreator">Open Theme Creator</button>
|
|
</div>
|
|
|
|
<div class="SaveConfig">
|
|
<fieldset id="NotificationMenu" class="AdvancedMenu">
|
|
<legend class="legendStyle" tip="Enable/Disable notification sounds">
|
|
<img class="AdvancedMenuIcon" src="./images/tts.svg" alt=" " />
|
|
<div class="AdvancedMenuLabel">Enable TTS</div>
|
|
<input type="checkbox" id="USE_TTS" class="checkbox" />
|
|
<label for="USE_TTS" class="toggle-small "></label>
|
|
</legend>
|
|
<div class="AdvancedMenuRow inputTTS">
|
|
<div class="AdvancedMenuLabel">Primary TTS Voice</div>
|
|
<select name="primaryVoice" id="primaryVoice"></select>
|
|
<select
|
|
name="language"
|
|
class="language"
|
|
id="primaryLanguage"
|
|
tip="Primary language to detect in chat"
|
|
></select>
|
|
</div>
|
|
<div class="AdvancedMenuRow inputTTS">
|
|
<div class="AdvancedMenuLabel">Secondary TTS Voice</div>
|
|
<select name="secondaryVoice" id="secondaryVoice"></select>
|
|
<select
|
|
name="language"
|
|
class="language"
|
|
id="secondaryLanguage"
|
|
tip="Secondary language to detect in chat"
|
|
></select>
|
|
</div>
|
|
<div class="AdvancedMenuRow inputTTS">
|
|
<div class="AdvancedMenuLabel">TTS Volume</div>
|
|
<div class="slider-container">
|
|
<input id="ttsVolumeSlider" class="styled-slider slider-progress1" type="range" />
|
|
</div>
|
|
<div class="option-icon-container">
|
|
<i class="fa fa-volume-up fa-2x" id="volume-icon"></i>
|
|
<input type="text" id="ttsVolume" class="inputBox" />
|
|
</div>
|
|
</div>
|
|
<div class="AdvancedMenuRow inputTTS">
|
|
<div class="AdvancedMenuLabel">Test TTS</div>
|
|
<textarea id="TTSTest">Hi, This is a test</textarea>
|
|
<div class="option-icon-container" tip="Test TTS">
|
|
<i class="fa fa-play-circle fa-2x SmallButton option-icon-container" id="TTSTestButton"></i>
|
|
<label class="testLabel Basiclabel"></label>
|
|
</div>
|
|
</div>
|
|
<div class="AdvancedMenuRow inputTTS">
|
|
<div class="AdvancedMenuLabel">TTS Output Device</div>
|
|
<select name="ttsAudioDevice" id="ttsAudioDevice"></select>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset id="NotificationMenu" class="AdvancedMenu">
|
|
<legend class="legendStyle" tip="Enable/Disable notification sounds">
|
|
<img class="AdvancedMenuIcon" src="./images/note.svg" alt=" " />
|
|
<div class="AdvancedMenuLabel">Enable notification sounds</div>
|
|
<input type="checkbox" id="USE_NOTIFICATION_SOUNDS" class="checkbox" />
|
|
<label for="USE_NOTIFICATION_SOUNDS" class="toggle-small "></label>
|
|
</legend>
|
|
<div class="AdvancedMenuRow inputNotificationSound">
|
|
<div class="AdvancedMenuLabel">Notification Volume</div>
|
|
<div class="slider-container">
|
|
<input id="notificationVolumeSlider" class="styled-slider slider-progress2" type="range" />
|
|
</div>
|
|
<div class="option-icon-container">
|
|
<i class="fa fa-volume-up fa-2x" id="volume-icon"></i>
|
|
<input type="text" id="notificationVolume" class="inputBox" />
|
|
</div>
|
|
</div>
|
|
<div class="AdvancedMenuRow inputNotificationSound">
|
|
<div class="AdvancedMenuLabel">Notification Sound</div>
|
|
<select name="notification" id="notification"></select>
|
|
<div class="option-icon-container">
|
|
<i
|
|
class="fa fa-play-circle fa-2x SmallButton option-icon-container"
|
|
id="SoundTestButton"
|
|
tip="Test Sound"
|
|
></i>
|
|
<label class="testLabel Basiclabel"></label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset id="TwitchMenu" class="AdvancedMenu">
|
|
<legend class="legendStyle" tip="Enable/Disable Twitch">
|
|
<img class="AdvancedMenuIcon" src="./images/twitch.svg" alt=" " />
|
|
|
|
<div class="AdvancedMenuLabel">Enable Twitch</div>
|
|
<input type="checkbox" id="USE_TWITCH" class="checkbox" />
|
|
<label for="USE_TWITCH" class="toggle-small "></label>
|
|
</legend>
|
|
<div class="AdvancedMenuRow inputTwitch">
|
|
<div class="AdvancedMenuLabel">Channel Name</div>
|
|
<input type="text" class="fname inputTwitch" id="TWITCH_CHANNEL_NAME" />
|
|
<i
|
|
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
|
id="Info_TWITCH_CHANNEL_NAME"
|
|
tip="The channel you want to connect to"
|
|
></i>
|
|
</div>
|
|
<div class="AdvancedMenuRow inputTwitch">
|
|
<div class="AdvancedMenuLabel">Oauth Token</div>
|
|
<input type="password" type2="text" class="fname inputTwitch" id="TWITCH_OAUTH_TOKEN" />
|
|
<button class="password-toggle-btn password-toggle-btn1">
|
|
<span class="password-toggle-icon">👁️</span>
|
|
</button>
|
|
<i
|
|
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
|
id="Info_USERNAME"
|
|
tip="Get OAuth Token"
|
|
></i>
|
|
</div>
|
|
<div class="AdvancedMenuRow inputTwitch">
|
|
<div class="AdvancedMenuLabel">Test credentials</div>
|
|
<button type="text" class="AdvancedMenuButton" id="TestTwitchCredentials">Test</button>
|
|
<i
|
|
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
|
id="Info_TWITCH_TEST_CREDENTIALS"
|
|
tip="Test Twitch credentials"
|
|
></i>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset id="AdvancedMenuServer" class="AdvancedMenu">
|
|
<legend class="legendStyle" tip="Enable/Disable Server">
|
|
<img class="AdvancedMenuIcon" src="./images/server.svg" alt />
|
|
<div class="AdvancedMenuLabel">Enable Server</div>
|
|
<input type="checkbox" id="USE_SERVER" class="checkbox" />
|
|
<label for="USE_SERVER" class="toggle-small "></label>
|
|
</legend>
|
|
<div class="AdvancedMenuRow inputServer">
|
|
<div class="AdvancedMenuLabel">Port</div>
|
|
<input type="text" class="fname inputServer" id="PORT" />
|
|
<i
|
|
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
|
id="Info_PORT"
|
|
tip="Port to use to host additional services"
|
|
></i>
|
|
</div>
|
|
<div class="AdvancedMenuRow inputServer">
|
|
<div class="AdvancedMenuLabel">Use Vtuber</div>
|
|
<input type="checkbox" id="USE_VTUBER" class="checkbox" />
|
|
<label for="USE_VTUBER" class="toggle-small "></label>
|
|
<input type="url" type2="text" class="fname inputServer" id="VTUBER_URL" />
|
|
<i
|
|
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
|
id="Info_VTUBER"
|
|
tip="You can use it as a browsersource on http://localhost:PORT/vtuber"
|
|
></i>
|
|
</div>
|
|
<div class="AdvancedMenuRow inputServer">
|
|
<div class="AdvancedMenuLabel">Use ChatBubble</div>
|
|
<input type="checkbox" id="USE_CHATBUBBLE" class="checkbox" />
|
|
<label for="USE_CHATBUBBLE" class="toggle-small "></label>
|
|
<input type="url" type2="text" class="fname inputServer" id="CHATBUBBLE_URL" />
|
|
<i
|
|
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
|
id="Info_CHATBUBBLE"
|
|
tip="You can use it as a browsersource on http://localhost:PORT/chat"
|
|
></i>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset id="AdvancedMenuAmazon" class="AdvancedMenu">
|
|
<legend class="legendStyle" tip="Enable/Disable Amazon">
|
|
<img class="AdvancedMenuIcon" src="./images/amazon.svg" alt />
|
|
<div class="AdvancedMenuLabel">Enable Amazon TTS</div>
|
|
<input type="checkbox" id="USE_AMAZON" class="checkbox" />
|
|
<label for="USE_AMAZON" class="toggle-small "></label>
|
|
</legend>
|
|
<div class="AdvancedMenuRow inputAmazon">
|
|
<div class="AdvancedMenuLabel">Access Key</div>
|
|
<input type="password" type2="text" class="fname inputAmazon" id="AMAZON_ACCESS_KEY" /><button
|
|
class="password-toggle-btn password-toggle-btn4"
|
|
>
|
|
<span class="password-toggle-icon">👁️</span>
|
|
</button>
|
|
<i
|
|
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
|
id="Info_AMAZON_ACCESS_KEY"
|
|
tip="Amazon Access Key"
|
|
></i>
|
|
</div>
|
|
<div class="AdvancedMenuRow inputAmazon">
|
|
<div class="AdvancedMenuLabel">Access Secret</div>
|
|
<input type="password" type2="text" class="fname inputAmazon" id="AMAZON_ACCESS_SECRET" /><button
|
|
class="password-toggle-btn password-toggle-btn5"
|
|
>
|
|
<span class="password-toggle-icon">👁️</span>
|
|
</button>
|
|
<i
|
|
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
|
id="Info_AMAZON_ACCESS_SECRET"
|
|
tip="Amazon Access Secret"
|
|
></i>
|
|
</div>
|
|
<div class="AdvancedMenuRow inputAmazon">
|
|
<div class="AdvancedMenuLabel">Test credentials</div>
|
|
<button type="text" class="AdvancedMenuButton" id="TestAmazonCredentials">Test</button>
|
|
<i
|
|
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
|
id="Info_AMAZON_TEST_CREDENTIALS"
|
|
tip="Test Amazon credentials"
|
|
></i>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset id="AdvancedMenuGoogle" class="AdvancedMenu">
|
|
<legend class="legendStyle" tip="Enable/Disable Google service">
|
|
<img class="AdvancedMenuIcon" src="./images/google.svg" alt />
|
|
<div class="AdvancedMenuLabel">Enable Google TTS</div>
|
|
<input type="checkbox" id="USE_GOOGLE" class="checkbox" />
|
|
<label for="USE_GOOGLE" class="toggle-small "></label>
|
|
</legend>
|
|
<div class="AdvancedMenuRow inputGoogle">
|
|
<div class="AdvancedMenuLabel">API Key</div>
|
|
<input type="password" type2="text" class="fname inputGoogle" id="GOOGLE_API_KEY" /><button
|
|
class="password-toggle-btn password-toggle-btn6"
|
|
>
|
|
<span class="password-toggle-icon">👁️</span>
|
|
</button>
|
|
<i
|
|
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
|
id="Info_GOOGLE_APPI_KEY"
|
|
tip="Google API Key"
|
|
></i>
|
|
</div>
|
|
<div class="AdvancedMenuRow inputGoogle">
|
|
<div class="AdvancedMenuLabel">Test credentials</div>
|
|
<button type="text" class="AdvancedMenuButton" id="TestGoogleCredentials">Test</button>
|
|
<i
|
|
class="fa fa-question-circle fa-2x SmallButton option-icon-container"
|
|
id="Info_GOOGLE_TEST_CREDENTIALS"
|
|
tip="Test Google credentials"
|
|
></i>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div id="ThemeCreator_mask">
|
|
<div class="SaveConfig">
|
|
<div class="AdvancedMenuRow">
|
|
<button class="AdvancedMenuButton" id="HideThemeCreator">Close Theme Creator</button>
|
|
<label class="testLabel Basiclabel"></label>
|
|
</div>
|
|
|
|
<div id="mini-container">
|
|
<div id="mini-top-bar"></div>
|
|
<div id="mini-main">
|
|
<div id="mini-left"></div>
|
|
<div id="mini-mid"></div>
|
|
<div id="mini-right"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<fieldset>
|
|
<legend class="legendStyle" tip="Enable/Disable Custom Theme">
|
|
<img class="AdvancedMenuIcon" src="./images/theme.svg" alt />
|
|
<div class="AdvancedMenuLabel">Enable Custom Theme</div>
|
|
<input type="checkbox" id="USE_CUSTOM_THEME" class="checkbox" />
|
|
<label for="USE_CUSTOM_THEME" class="toggle-small"></label>
|
|
</legend>
|
|
<div class="AdvancedMenuRow">
|
|
<input type="color" id="MAIN_COLOR_1" value="#0000ff" />
|
|
<div class="AdvancedMenuLabel2">Main Color 1</div>
|
|
</div>
|
|
<div class="AdvancedMenuRow">
|
|
<input type="color" id="MAIN_COLOR_2" value="#0000ff" />
|
|
<div class="AdvancedMenuLabel2">Main Color 2</div>
|
|
</div>
|
|
<div class="AdvancedMenuRow">
|
|
<input type="color" id="MAIN_COLOR_3" value="#0000ff" />
|
|
<div class="AdvancedMenuLabel2">Main Color 3</div>
|
|
</div>
|
|
<div class="AdvancedMenuRow">
|
|
<input type="color" id="MAIN_COLOR_4" value="#0000ff" />
|
|
<div class="AdvancedMenuLabel2">Main Color 4</div>
|
|
</div>
|
|
<div class="AdvancedMenuRow">
|
|
<input type="color" id="TOP_BAR" value="#0000ff" />
|
|
<div class="AdvancedMenuLabel2">Top Bar</div>
|
|
</div>
|
|
<div class="AdvancedMenuRow">
|
|
<input type="color" id="MID_SECTION" value="#0000ff" />
|
|
<div class="AdvancedMenuLabel2">Mid Section</div>
|
|
</div>
|
|
<div class="AdvancedMenuRow">
|
|
<input type="color" id="CHAT_BUBBLE_BG" value="#0000ff" />
|
|
<div class="AdvancedMenuLabel2">Chat Bubble Background</div>
|
|
</div>
|
|
<div class="AdvancedMenuRow">
|
|
<input type="color" id="CHAT_BUBBLE_HEADER" value="#0000ff" />
|
|
<div class="AdvancedMenuLabel2">Chat Bubble Header</div>
|
|
</div>
|
|
<div class="AdvancedMenuRow">
|
|
<input type="color" id="CHAT_BUBBLE_MESSAGE" value="#0000ff" />
|
|
<div class="AdvancedMenuLabel2">Chat Bubble Message</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--#endregion -->
|
|
|
|
<!-- #region Main chat box-->
|
|
<div class="OptionPanel show" id="Chat">
|
|
<div id="chatBox" class="message-window"></div>
|
|
<!-- User input box-->
|
|
<div id="userInput" class="chat-input">
|
|
<!-- User text input-->
|
|
<input id="textInput" class="input-box" type="text" name="msg" placeholder="Tap 'Enter' to send a message" />
|
|
|
|
<!-- Send button-->
|
|
<button class="SmallButton" id="SendButton">
|
|
<i class="fa fa-play-circle fa-2x" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!--#endregion -->
|
|
</div>
|
|
<!--#endregion -->
|
|
|
|
<!-- #region Viewer list, right section-->
|
|
<div class="sidepanel-right">
|
|
<div class="viewer-list">
|
|
<div class="tabx-bar">
|
|
<a class="tabx" href="#" data-text="Twitch">
|
|
<img class="tab" src="./images/twitch.svg" alt=" " />
|
|
</a>
|
|
</div>
|
|
<section id="content1">
|
|
<h1 class="titles">Moderators</h1>
|
|
<ul class="no-bullets" id="moderators"></ul>
|
|
<h1 class="titles">Viewers</h1>
|
|
<ul class="no-bullets" id="viewers"></ul>
|
|
</section>
|
|
<section id="content2">
|
|
<ul class="no-bullets">
|
|
<li>a</li>
|
|
<li>b</li>
|
|
<li>c</li>
|
|
</ul>
|
|
</section>
|
|
<section id="content3">
|
|
<ul class="no-bullets">
|
|
<li>1</li>
|
|
<li>2</li>
|
|
<li>3</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<div tip="Hide Viewers" tip-left>
|
|
<div class="circle-right">
|
|
<i class="fa fa-eye hide" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
<!-- #endregion -->
|
|
</div>
|
|
</body>
|
|
<!-- #region js scripts -->
|
|
<script src="./js/renderer.js"></script>
|
|
<!--#endregion -->
|
|
</html>
|