mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-19 04:00:59 -04:00
228 lines
10 KiB
HTML
228 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<link rel="stylesheet" href="../../../.common/styles/global.css" />
|
||
<link rel="stylesheet" href="./style.css" />
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- Update All Button -->
|
||
<button onclick="OpenUpdateAllDialog()">
|
||
<img src="https://api.iconify.design/material-symbols:edit-square-outline.svg?color=%23ffffff"> Update All
|
||
</button>
|
||
|
||
<div style="display: flex; flex-direction: column; gap: 0.5em;">
|
||
<!-- List of all broadcasts -->
|
||
<div id="broadcast-list">
|
||
</div>
|
||
|
||
<!-- YouTube warning -->
|
||
<div id="youtube-warning" class="broadcast">
|
||
<img class="platform-icon" id="platform-icon" src="icons/platforms/youtube.png" />
|
||
|
||
<div class="broadcast-info">
|
||
<label class="setting-attribute">
|
||
<i>YouTube stream info can only be updated while live</i>
|
||
</label>
|
||
</div>
|
||
|
||
<div id="broadcast-buttons">
|
||
<button id="broadcast-dashboard-button" class="icon-button" title="Dashboard"><img class="button-icon"
|
||
src="https://api.iconify.design/gridicons:popout.svg?color=%23ffffff"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Blur Layer -->
|
||
<div id="blur-layer" class="blur"></div>
|
||
|
||
<!-- Update All Popup -->
|
||
<div id="update-all-dialog" class="dialog">
|
||
<button class="dialog-nav-button" onclick="CloseUpdateAllDialog()">×</button>
|
||
|
||
<label class="title" style="text-align: center;">Stream Info</label>
|
||
|
||
<div class="field">
|
||
<div style="display: flex; flex-direction: row; align-items: end; gap: 1em;">
|
||
<label>Title</label>
|
||
<div id="all-title-char-limit" class="char-limit">
|
||
<span id="all-title-char-count"></span>/<span id="all-title-char-max"></span>
|
||
</div>
|
||
</div>
|
||
<input type="text" id="all-title-input" placeholder="Leave empty to keep current title">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Category</label>
|
||
<input type="text" id="all-category-input" placeholder="Leave empty to keep current category">
|
||
</div>
|
||
|
||
<button id="all-submit-button" onclick="UpdateAllSubmit()">Update All</button>
|
||
</div>
|
||
|
||
<!-- Update Twitch Popup -->
|
||
<div id="update-twitch-dialog" class="dialog">
|
||
<button class="dialog-nav-button" onclick="CloseUpdateTwitchDialog()">×</button>
|
||
|
||
<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1em;">
|
||
<img src="icons/platforms/twitch.png" class="platform-icon">
|
||
<label class="title" style="text-align: center;">Stream Info</label>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div style="display: flex; flex-direction: row; align-items: end; gap: 1em;">
|
||
<label>Title</label>
|
||
<div id="twitch-title-char-limit" class="char-limit">
|
||
<span id="twitch-title-char-count"></span>/<span id="twitch-title-char-max"></span>
|
||
</div>
|
||
</div>
|
||
<input type="text" id="twitch-title-input" placeholder="Leave empty to keep current title">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Category</label>
|
||
<input type="text" id="twitch-category-input" placeholder="Leave empty to keep current category">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div style="display: flex; flex-direction: row; align-items: end; gap: 1em;">
|
||
<label>Tags</label>
|
||
<div id="twitch-tags-char-limit" class="char-limit">
|
||
<span id="twitch-tags-too-long-warning">Tag too long • </span><span id="twitch-tags-char-count"></span>/<span id="twitch-tags-char-max"></span> Tags
|
||
</div>
|
||
</div>
|
||
<label class="setting-description">Add up to 10 tags. Each tag can be 25 characters long with no spaces or special characters.</label>
|
||
<input type="text" id="twitch-tags-input" placeholder="Leave empty to keep current tags">
|
||
</div>
|
||
|
||
<button id="twitch-submit-button" onclick="UpdateTwitchSubmit()">Update</button>
|
||
</div>
|
||
|
||
<!-- Update Kick Popup -->
|
||
<div id="update-kick-dialog" class="dialog">
|
||
<button class="dialog-nav-button" onclick="CloseUpdateKickDialog()">×</button>
|
||
|
||
<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1em;">
|
||
<img src="icons/platforms/kick.png" class="platform-icon">
|
||
<label class="title" style="text-align: center;">Stream Info</label>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div style="display: flex; flex-direction: row; align-items: end; gap: 1em;">
|
||
<label>Title</label>
|
||
<div id="kick-title-char-limit" class="char-limit">
|
||
<span id="kick-title-char-count"></span>/<span id="kick-title-char-max"></span>
|
||
</div>
|
||
</div>
|
||
<input type="text" id="kick-title-input" placeholder="Leave empty to keep current title">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Category</label>
|
||
<input type="text" id="kick-category-input" placeholder="Leave empty to keep current category">
|
||
</div>
|
||
|
||
<button id="kick-submit-button" onclick="UpdateKickSubmit()">Update</button>
|
||
</div>
|
||
|
||
<!-- Update YouTube Popup -->
|
||
<div id="update-youtube-dialog" class="dialog">
|
||
<button class="dialog-nav-button" onclick="CloseUpdateYouTubeDialog()">×</button>
|
||
|
||
<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1em;">
|
||
<img src="icons/platforms/youtube.png" class="platform-icon">
|
||
<label class="title" style="text-align: center;">Stream Info</label>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div style="display: flex; flex-direction: row; align-items: end; gap: 1em;">
|
||
<label>Title</label>
|
||
<div id="youtube-title-char-limit" class="char-limit">
|
||
<span id="youtube-title-char-count"></span>/<span id="youtube-title-char-max"></span>
|
||
</div>
|
||
</div>
|
||
<input type="text" id="youtube-title-input" placeholder="Leave empty to keep current title">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div style="display: flex; flex-direction: row; align-items: end; gap: 1em;">
|
||
<label>Description</label>
|
||
<div id="youtube-description-char-limit" class="char-limit">
|
||
<span id="youtube-description-char-count"></span>/<span id="youtube-description-char-max"></span>
|
||
</div>
|
||
</div>
|
||
<textarea type="text" id="youtube-description-input" placeholder="Leave empty to keep current description"
|
||
class="textarea-description"></textarea>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Category</label>
|
||
<select id="youtube-category-input">
|
||
<option value="Autos & Vehicles">Autos & Vehicles</option>
|
||
<option value="Comedy">Comedy</option>
|
||
<option value="Education">Education</option>
|
||
<option value="Entertainment">Entertainment</option>
|
||
<option value="Film & Animation">Film & Animation</option>
|
||
<option value="Gaming">Gaming</option>
|
||
<option value="Howto & Style">Howto & Style</option>
|
||
<option value="Music">Music</option>
|
||
<option value="News & Politics">News & Politics</option>
|
||
<option value="Nonprofits & Activism">Nonprofits & Activism</option>
|
||
<option value="People & Blogs">People & Blogs</option>
|
||
<option value="Pets & Animals">Pets & Animals</option>
|
||
<option value="Science & Technology">Science & Technology</option>
|
||
<option value="Sports">Sports</option>
|
||
<option value="Travel & Events">Travel & Events</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div style="display: flex; flex-direction: row; align-items: end; gap: 1em;">
|
||
<label>Tags</label>
|
||
<div id="youtube-tags-char-limit" class="char-limit">
|
||
<span id="youtube-tags-char-count"></span>/<span id="youtube-tags-char-max"></span>
|
||
</div>
|
||
</div>
|
||
<input type="text" id="youtube-tags-input" placeholder="Leave empty to keep current tags">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Visibility</label>
|
||
<select id="youtube-privacy-select">
|
||
<option value="private">Private</option>
|
||
<option value="unlisted">Unlisted</option>
|
||
<option value="public">Public</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button id="youtube-submit-button" onclick="UpdateYouTubeSubmit()">Update</button>
|
||
</div>
|
||
</body>
|
||
|
||
</html>
|
||
|
||
<!-- Broadcast Template -->
|
||
<template id="broadcast-template">
|
||
<div class="broadcast">
|
||
<img class="platform-icon" id="platform-icon" src="" />
|
||
|
||
<div class="broadcast-info">
|
||
<label id="broadcast-title"></label>
|
||
<label id="broadcast-category" class="setting-description"></label>
|
||
<label id="kick-warning" class="setting-attribute"><br><i>Stream info only available when live — Showing
|
||
last known stream title</i></label>
|
||
</div>
|
||
|
||
<div id="broadcast-buttons">
|
||
<button id="broadcast-stream-button" class="icon-button" title="Open Stream"><img class="button-icon"
|
||
src="https://api.iconify.design/streamline:button-play-solid.svg?color=%23ffffff"></button>
|
||
<button id="broadcast-dashboard-button" class="icon-button" title="Dashboard"><img class="button-icon"
|
||
src="https://api.iconify.design/gridicons:popout.svg?color=%23ffffff"></button>
|
||
<button id="broadcast-edit-button" class="icon-button flip-that-shit-homie" title="Edit">✎</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script src="script.js"></script> |