250 lines
19 KiB
HTML
250 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" c\ontent="width=device-width, initial-scale=1.0">
|
|
<title>ChatRD - Config</title>
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-notify@1.0.4/dist/simple-notify.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
|
|
|
<link rel="stylesheet" href="css/settings.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="chat-divided">
|
|
<div id="chat-settings">
|
|
<h1>ChatRD - Setup</h1>
|
|
|
|
|
|
<div class="tab-content" id="config">
|
|
<h2><i class="fa-solid fa-screwdriver-wrench"></i> Config</h2>
|
|
|
|
<div class="setting">
|
|
<small id="memberemotesbstatus" class="offline" style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;">
|
|
<i class="fa-solid fa-power-off"></i>
|
|
<span>Streamer.Bot is Offline!</span>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="setting field"><label>Streamer.bot WebSocket Server</label><input type="text" name="streamerBotServerAddress" value="127.0.0.1"></div>
|
|
<div class="setting field"><label>Streamer.bot WebSocket Port</label><input type="text" name="streamerBotServerPort" value="8080"></div>
|
|
|
|
<div class="setting"><label>Run Locally<br><small>In case you want to download ChatRD to run locally or over the network.<br><strong><a target="_blank" href="https://github.com/vortisrd/chatrd#%EF%B8%8F-how-to-use-it-in-a-local-network">Follow the tutorial</a></strong>.</small></label><label class="switch"><input type="checkbox" name="runThisLocally"><span class="slider"></span></label></div>
|
|
|
|
<div class="setting"></div>
|
|
|
|
<div class="setting"><small style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;"><i class="fa-solid fa-volume-high"></i> Speaker.Bot is required for Text-to-Speech! <strong><a target="_blank" href="https://github.com/vortisrd/chatrd#-how-to-set-tts-with-speakerbot">Follow the tutorial</a>.</strong></small></label></div>
|
|
|
|
<div class="setting"></div>
|
|
|
|
<div class="setting"><label>Text-to-Speech Chat<br><small>Enables TTS for Chat.</small></label><label class="switch"><input type="checkbox" name="ttsSpeakerBotChat"><span class="slider"></span></label></div>
|
|
|
|
<div class="setting"><label>Text-to-Speech Events<br><small>Enables TTS for Events.</small></label><label class="switch"><input type="checkbox" name="ttsSpeakerBotEvents"><span class="slider"></span></label></div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="geral">
|
|
<h2><i class="fa-solid fa-gears"></i> General</h2>
|
|
<div class="setting select">
|
|
<label>Language<br><small>Change the chat's events language.</small></label>
|
|
<select name="language">
|
|
<option value="ptbr">Brazilian Portuguese</option>
|
|
<option value="en" selected>English</option>
|
|
<option value="es">Spanish</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="setting slider">
|
|
<label>Chat Font Size<br><small>Changes ChatRD's font size</small></label>
|
|
<label>
|
|
<input type="range" id="font-slider" name="chatFontSize" min="0.1" max="2" step="0.1" value="1">
|
|
<br><em id="font-value">100%</em>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting"><label>Events Mockup<br><small>Will show random fake events when Streamer.bot is <strong><u>offline</u></strong>.</small></label></label><label class="switch"><input type="checkbox" name="eventsMockup" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Horizontal Direction<br><small>Chat/Events will be horizontal.</small></label></label><label class="switch"><input type="checkbox" name="chatHorizontal"><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Platforms<br><small>Shows the platforms icons.</small></label></label><label class="switch"><input type="checkbox" name="showPlatform" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Avatars</label><label class="switch"><input type="checkbox" name="showAvatar" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Timestamps</label><label class="switch"><input type="checkbox" name="showTimestamps" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> AM/PM</label><label class="switch"><input type="checkbox" name="ampmTimeStamps"><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Badges</label><label class="switch"><input type="checkbox" name="showBadges" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Platform Statistics<br><small>Shows all platform statistics.</small></label><label class="switch"><input type="checkbox" name="showPlatformStatistics" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Ignore Commands<br><small>Ignores texts starting with "!".</small></label><label class="switch"><input type="checkbox" name="excludeCommands" checked><span class="slider"></span></label></div>
|
|
<div class="setting field"><label>Ignore Chatters<br><small>Separate their names by commas. eg.: StreamLabs,StreamElements</small></label><input type="text" name="ignoreChatters" value="Streamlabs,Streamelements"></div>
|
|
<div class="setting field"><label>Hide Chat Msg<br><small>Hides a message after X seconds. (0 disables it)</small></label><input type="number" name="hideAfter" value="0"></div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="twitch">
|
|
<h2><i class="fa-brands fa-twitch"></i> Twitch</h2>
|
|
<div class="setting"><label>Chat</label><label class="switch"><input type="checkbox" name="showTwitchMessages" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Followers</label><label class="switch"><input type="checkbox" name="showTwitchFollows" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Bits</label><label class="switch"><input type="checkbox" name="showTwitchBits" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Announcements</label><label class="switch"><input type="checkbox" name="showTwitchAnnouncements" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Subscriptions<br><small>Show Subscription events. <u><strong>Disabling this disables all sub events</strong></u>.</small></label><label class="switch"><input type="checkbox" name="showTwitchSubs" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Subs<br><small>When a user gifts another user a sub.</small></label><label class="switch"><input type="checkbox" name="showTwitchGiftedSubs" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Bomb<br><small>When a user gifts subs massively.</small></label><label class="switch"><input type="checkbox" name="showTwitchMassGiftedSubs" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Bomb Users Train<br><small>Shows all users that were gifted a sub on a Gifted Bomb.</small></label><label class="switch"><input type="checkbox" name="showTwitchGiftedSubsUserTrain" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Channel Point Rewards</label><label class="switch"><input type="checkbox" name="showTwitchRewardRedemptions" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Raids</label><label class="switch"><input type="checkbox" name="showTwitchRaids" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Shared Chat</label><label class="switch"><input type="checkbox" name="showTwitchSharedChat" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Viewers</label><label class="switch"><input type="checkbox" name="showTwitchViewers" checked><span class="slider"></span></label></div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="youtube">
|
|
<h2><i class="fa-brands fa-youtube"></i> YouTube</h2>
|
|
<div class="setting"><label>Chat</label><label class="switch"><input type="checkbox" name="showYouTubeMessages" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>SuperChat</label><label class="switch"><input type="checkbox" name="showYouTubeSuperChats" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Super Sticker</label><label class="switch"><input type="checkbox" name="showYouTubeSuperStickers" checked><span class="slider"></span></label></div>
|
|
|
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Show Super Sticker GIF</label><label class="switch"><input type="checkbox" name="showYouTubeSuperStickerGif" checked><span class="slider"></span></label></div>
|
|
|
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Full Size Super Sticker<br><small>Shows the sticker above the event in full.</small></label><label class="switch"><input type="checkbox" name="showYouTubeSuperStickerFullSize"><span class="slider"></span></label></div>
|
|
|
|
<div class="setting"><label>Membership<br><small>Show Membership events. <u><strong>Disabling this disables all member events</strong></u>.</small></label><label class="switch"><input type="checkbox" name="showYouTubeMemberships" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Membership<br><small>Shows the person gifting members.</small></label><label class="switch"><input type="checkbox" name="showYouTubeGiftMemberships" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Membership Train<br><small>Shows all users that were gifted a membership on a massive gifting membership.</small></label><label class="switch"><input type="checkbox" name="showYouTubeMembershipsTrain" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Statistics<br><small>Shows viewers and likes.</small></label><label class="switch"><input type="checkbox" name="showYouTubeStatistics" checked><span class="slider"></span></label></div>
|
|
|
|
<div class="setting"></div>
|
|
|
|
<div class="setting"><small style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;"><i class="fa-solid fa-circle-exclamation"></i> YouTube API doesn't expose Member Emotes. <strong><a target="_blank" href="https://github.com/vortisrd/chatrd/tree/main?tab=readme-ov-file#about-youtube-membership-emojis">Read more</a>.</strong></small></label></div>
|
|
|
|
<div class="setting"></div>
|
|
|
|
|
|
<div class="setting column">
|
|
<label>
|
|
Members Only Emotes
|
|
<br>
|
|
<small>You have to add member emotes manually. <em>Really YouTube!?</em> 🤨
|
|
</small>
|
|
</label>
|
|
<div class="emote-list">
|
|
|
|
<span class="emote-item">
|
|
<button class="add"><i class="fa-solid fa-plus"></i></button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Textarea for debugging purposes -->
|
|
<textarea name="youTubeCustomEmotes" style="display: none;">{}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="tiktok">
|
|
<h2><i class="fa-brands fa-tiktok"></i> TikTok</h2>
|
|
<div class="setting"><label>Chat</label><label class="switch"><input type="checkbox" name="showTikTokMessages" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Followers</label><label class="switch"><input type="checkbox" name="showTikTokFollows" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Likes<br><small>Show likes in <strong>15</strong> increments. Why? <em>Blame TikFinity!</em> 🤣</small></label><label class="switch"><input type="checkbox" name="showTikTokLikes" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Gifts</label><label class="switch"><input type="checkbox" name="showTikTokGifts" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Subscriptions</label><label class="switch"><input type="checkbox" name="showTikTokSubs" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Statistics<br><small>Shows viewers and likes.</small></label><label class="switch"><input type="checkbox" name="showTikTokStatistics" checked><span class="slider"></span></label></div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="kick">
|
|
<h2>
|
|
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800">
|
|
<polygon class="st0" points="336 111 336 239 401 239 401 175 465 175 465 111 657 111 657 303 593 303 593 367 529 367 529 432 593 432 593 496 657 496 657 689 465 689 465 624 401 624 401 560 336 560 336 689 143 689 143 111 336 111"/>
|
|
</svg>
|
|
Kick
|
|
</h2>
|
|
|
|
<div class="setting"><small style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;"><i class="fa-solid fa-triangle-exclamation"></i> This is a <strong>BETA</strong> feature! <a href="https://github.com/vortisrd/chatrd/tree/main#%EF%B8%8F-kick-is-a-beta-feature" target="_blank">Read more</a>.</small></label></div>
|
|
|
|
<div class="setting"></div>
|
|
|
|
<div class="setting field"><label>Your Kick Username<br><small>Your user handle. It's on kick.com/<strong><u>username</u></strong></small></label><input type="text" name="kickUserName" value=""></div>
|
|
<div class="setting"><label>Viewers<br><small>Self-updates each 15 seconds.</small></label><label class="switch"><input type="checkbox" name="showKickViewers" checked><span class="slider"></span></label></div>
|
|
|
|
<div class="setting"><label>Chat</label><label class="switch"><input type="checkbox" name="showKickMessages" checked><span class="slider"></span></label></div>
|
|
|
|
<div class="setting"></div>
|
|
|
|
<div class="setting"><small style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;"><i class="fa-solid fa-circle-exclamation"></i> <strong><a href="https://github.com/Sehelitar/Kick.bot/" target="_blank">Kick.Bot</a></strong> is required for events. <strong><a target="_blank" href="https://github.com/vortisrd/chatrd/tree/main#kickbot-installation-on-streamerbot">Follow the tutorial</a>.</strong></small></label></div>
|
|
|
|
<div class="setting"></div>
|
|
|
|
<div class="setting"><label>Followers</label><label class="switch"><input type="checkbox" name="showKickFollows" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Subscriptions<br><small>Show Subscription events. <u><strong>Disabling this disables all sub events</strong></u>.</small></label><label class="switch"><input type="checkbox" name="showKickSubs" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Subs<br><small>When a user gifts another user a sub.</small></label><label class="switch"><input type="checkbox" name="showKickGiftedSubs" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Bomb<br><small>When a user gifts subs massively.</small></label><label class="switch"><input type="checkbox" name="showKickMassGiftedSubs" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>Raids</label><label class="switch"><input type="checkbox" name="showKickRaids" checked><span class="slider"></span></label></div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="extras">
|
|
<h2><i class="fa-solid fa-dollar-sign"></i> Donations</h2>
|
|
<div class="setting"><label>Streamlabs Tips</label><label class="switch"><input type="checkbox" name="showStreamlabsDonations" checked><span class="slider"></span></label></div>
|
|
<div class="setting"><label>StreamElements Tips</label><label class="switch"><input type="checkbox" name="showStreamElementsTips" checked><span class="slider"></span></label></div>
|
|
</div>
|
|
|
|
<footer>
|
|
|
|
<div class="nav-bar">
|
|
<a href="#config" class="active"><i class="fa-solid fa-screwdriver-wrench"></i></a>
|
|
<a href="#geral"><i class="fa-solid fa-gears"></i></a>
|
|
<a href="#twitch"><i class="fa-brands fa-twitch"></i></a>
|
|
<a href="#youtube"><i class="fa-brands fa-youtube"></i></a>
|
|
<a href="#tiktok"><i class="fa-brands fa-tiktok"></i></a>
|
|
<a href="#kick">
|
|
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800">
|
|
<polygon class="st0" points="336 111 336 239 401 239 401 175 465 175 465 111 657 111 657 303 593 303 593 367 529 367 529 432 593 432 593 496 657 496 657 689 465 689 465 624 401 624 401 560 336 560 336 689 143 689 143 111 336 111"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#extras"><i class="fa-solid fa-dollar-sign"></i></a>
|
|
|
|
</div>
|
|
|
|
<div class="url-bar">
|
|
<input type="text" id="outputUrl" placeholder="URL Here..." readonly="">
|
|
<button onclick="copyUrl()">Copy URL</button>
|
|
</div>
|
|
|
|
<p>Made with ❤️ by <strong>VortisRD</strong></p>
|
|
<p>
|
|
<a target="_blank" href="https://twitch.com/vortisrd"><i class="fa-brands fa-twitch"></i></a>
|
|
<a target="_blank" href="https://youtube.com/@vortisrd"><i class="fa-brands fa-youtube"></i></a>
|
|
<a target="_blank" href="https://tiktok.com/@vortisrd"><i class="fa-brands fa-tiktok"></i></a>
|
|
<a target="_blank" href="https://kick.com/vortisrd">
|
|
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800">
|
|
<polygon class="st0" points="336 111 336 239 401 239 401 175 465 175 465 111 657 111 657 303 593 303 593 367 529 367 529 432 593 432 593 496 657 496 657 689 465 689 465 624 401 624 401 560 336 560 336 689 143 689 143 111 336 111"/>
|
|
</svg>
|
|
</a>
|
|
<a target="_blank" href="https://x.com/vortisrd"><i class="fa-brands fa-x-twitter"></i></a>
|
|
<a target="_blank" href="https://github.com/vortisrd"><i class="fa-brands fa-github"></i></a>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<div id="chat-preview">
|
|
<iframe src="" frameborder="0"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="addEmoteModal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<h3>Add YouTube Custom Emote</h3>
|
|
<label>
|
|
Emote Name
|
|
<input type="text" id="newEmoteName" placeholder="Use 'EmoteName', not ':EmoteName:'" class="avoid">
|
|
</label>
|
|
<label>
|
|
Image URL
|
|
<input type="text" id="newEmoteURL" placeholder="https://example.com/emote.png" class="avoid">
|
|
</label>
|
|
<div class="modal-buttons">
|
|
<button id="confirmAddEmote">Add</button>
|
|
<button id="cancelAddEmote">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
|
|
<script src="js/settings.js"></script>
|
|
</body>
|
|
</html>
|