c7e49fb6bc
Changed CSS style to be stored in local storage since we might want it to be browser specific (mobile vs desktop vs tablet)
272 lines
14 KiB
HTML
272 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Tranga</title>
|
||
<link id='basestyle' rel="stylesheet" href="styles/base.css">
|
||
<link id='librarystyle' rel="stylesheet" href="styles/style_default.css">
|
||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||
</head>
|
||
<body>
|
||
<wrapper>
|
||
|
||
<topbar>
|
||
<titlebox>
|
||
<img alt="website image is Blahaj" src="media/blahaj.png">
|
||
<span>Tranga</span>
|
||
</titlebox>
|
||
<spacer></spacer>
|
||
<img id="filterFunnel" src="media/filter-funnel.svg" height="50%" alt="filterFunnel">
|
||
<img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
|
||
</topbar>
|
||
|
||
<filter-box id="filterBox">
|
||
<border-bar>
|
||
<popup-title>Filter by: </popup-title>
|
||
<popup-close onclick="filterBox.classList.toggle('animate')" >×</popup-close>
|
||
</border-bar>
|
||
<popup-content id="filterContent">
|
||
<div class="popup-section">
|
||
NAME:
|
||
<div class="section-content">
|
||
<label for="searchbox"></label><input id="searchbox" placeholder="Title" type="text">
|
||
</div>
|
||
</div>
|
||
<div class = "popup-section">
|
||
CONNECTOR:
|
||
<div class="section-content" id="connectorFilterBox">
|
||
</div>
|
||
</div>
|
||
<div class = "popup-section">
|
||
STATUS:
|
||
<div class="section-content" id="statusFilterBox">
|
||
</div>
|
||
</div>
|
||
</popup-content>
|
||
<border-bar-button onclick="ClearFilter()" class="clearFilter">Clear Filter</border-bar-button>
|
||
</filter-box>
|
||
|
||
|
||
<viewport>
|
||
<div id="loaderdiv">
|
||
<blur-background></blur-background>
|
||
<div id="loader"></div>
|
||
<p id="loaderText">Check your Settings > API-URI</p>
|
||
</div>
|
||
<content>
|
||
<div id="addPublication">
|
||
<p>+</p>
|
||
</div>
|
||
<publication onclick="ShowNewMangaSearch()">
|
||
<img alt="cover" src="media/cover.jpg">
|
||
<publication-information>
|
||
<connector-name class="pill">Sample</connector-name>
|
||
<publication-name>Best Manga there is</publication-name>
|
||
</publication-information>
|
||
</publication>
|
||
</content>
|
||
|
||
<popup id="newMangaPopup">
|
||
<blur-background id="blurBackgroundNewMangaPopup" onclick="newMangaPopup.style.display = 'none';"></blur-background>
|
||
<div id="newMangaPopupSelector">
|
||
<select id="newMangaConnector" />
|
||
<input type="text" placeholder="Title" id="newMangaTitle" />
|
||
<select id="newMangaTranslatedLanguage">
|
||
<option selected="selected">en</option>
|
||
<option>it</option>
|
||
<option>de</option>
|
||
</select>
|
||
</div>
|
||
<div id="newMangaResult"></div>
|
||
</popup>
|
||
|
||
<popup id="settingsPopup">
|
||
<blur-background id="blurBackgroundSettingsPopup" onclick="settingsPopup.style.display = 'none';"></blur-background>
|
||
<popup-window>
|
||
<border-bar>
|
||
<popup-title>Settings</popup-title>
|
||
<popup-close onclick="settingsPopup.style.display = 'none'">×</popup-close>
|
||
</border-bar>
|
||
<popup-content>
|
||
|
||
<div class="popup-section">
|
||
TRANGA
|
||
<div class="section-content">
|
||
<div class="section-item dyn-height">
|
||
<span class="title">API Settings</span>
|
||
<row><label for="settingApiUri">API URI:</label><input placeholder="https://" type="text" id="settingApiUri"></row>
|
||
<row><label for="userAgent">User Agent:</label><input placeholder="UserAgent" id="userAgent" type="text"></row>
|
||
<row>
|
||
<border-bar-button class="section" onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>
|
||
<border-bar-button class="section" onclick="DownloadLogs()">Download Logs</border-bar-button>
|
||
</row>
|
||
</div>
|
||
<div class="section-item dyn-height">
|
||
<span class="title">Appearance</span>
|
||
<row><label for="cssStyle">Library Style:</label><select id="cssStyle">
|
||
<option id="card_compact" value="card_compact">Cards (Compact)</option>
|
||
<option id="card_hover" value="card_hover">Cards (Hover)</option>
|
||
</select></row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="popup-section">
|
||
MANGA SOURCES
|
||
<div class="section-content">
|
||
<div class="section-item dyn-height">
|
||
<span class="title"><img src="connector-icons/manganato.png"><a href="https://manganato.com">MangaNato</a></span>
|
||
<row><label for="manganatoRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="manganatoRL" type="text"></row>
|
||
</div>
|
||
<div class="section-item dyn-height">
|
||
<span class="title"><img src="connector-icons/mangasee.png"><a href="https://mangasee123.com">MangaSee</a></span>
|
||
<row><label for="mangaseeRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mangaseeRL" type="text"></row>
|
||
</div>
|
||
<div class="section-item dyn-height">
|
||
<span class="title"><img src="connector-icons/mangadex-logo.svg"><a href="https://mangadex.org">MangaDex</a></span>
|
||
<row><label for="mDexRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mDexRL" type="text"></row>
|
||
</div>
|
||
<div class="section-item dyn-height">
|
||
<span class="title"><img src="connector-icons/mangakatana.png"><a href="https://mangakatana.com">MangaKatana</a></span>
|
||
<row><label for="mKatanaRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mKatanaRL" type="text"></row>
|
||
</div>
|
||
<div class="section-item dyn-height">
|
||
<span class="title"><img src="connector-icons/mangaworld.png"><a href="https://www.mangaworld.ac">MangaWorld</a></span>
|
||
<row><label for="mWorldRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mWorldRL" type="text"></row>
|
||
</div>
|
||
<div class="section-item dyn-height">
|
||
<span class="title"><img src="connector-icons/bato.ico"><a href="https://bato.to">Bato</a></span>
|
||
<row><label for="batoRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="batoRL" type="text"></row>
|
||
</div>
|
||
<div class="section-item dyn-height">
|
||
<span class="title"><img src="connector-icons/mangalife.png"><a href="https://www.manga4life.com">MangaLife</a></span>
|
||
<row><label for="mLifeRL">Rate Limit: </label><input placeholder="60 Requests/Minute" id="mLifeRL" type="text"></row>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="popup-section">
|
||
LIBRARY CONNECTORS
|
||
<div class="section-content">
|
||
<div class="section-item">
|
||
<span class="title"><img src='connector-icons/komga.svg'>Komga<connector-configured id="komgaConfigured"></connector-configured></span>
|
||
<label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
|
||
<label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
|
||
<label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
|
||
<div class="section-buttons-container">
|
||
<span onclick="TestKomga(komgaUrl.value, utf8_to_b64(`${komgaUsername.value}:${komgaPassword.value}`))" class='section-button' id="test-connector">Test</span>
|
||
<span onclick="ClearKomga()" class='section-button' id="reset">Reset</span>
|
||
<span onclick="UpdateKomga(komgaUrl.value, utf8_to_b64(`${komgaUsername.value}:${komgaPassword.value}`))" class='section-button'>Apply</span>
|
||
</div>
|
||
</div>
|
||
<div class="section-item">
|
||
<span class="title"><img src='connector-icons/kavita.png'>Kavita<connector-configured id="kavitaConfigured"></connector-configured></span>
|
||
<label for="kavitaUrl"></label><input placeholder="URL" id="kavitaUrl" type="text">
|
||
<label for="kavitaUsername"></label><input placeholder="Username" id="kavitaUsername" type="text">
|
||
<label for="kavitaPassword"></label><input placeholder="Password" id="kavitaPassword" type="password">
|
||
<div class="section-buttons-container">
|
||
<span onclick="TestKavita(kavitaUrl.value, kavitaUsername.value, kavitaPassword.value)" class='section-button' id="test-connector">Test</span>
|
||
<span onclick="ClearKavita()" class='section-button' id="reset">Reset</span>
|
||
<span onclick="UpdateKavita(kavitaUrl.value, kavitaUsername.value, kavitaPassword.value)" class='section-button'>Apply</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="popup-section">
|
||
NOTIFICATION CONNECTORS
|
||
<div class="section-content">
|
||
<div class="section-item">
|
||
<span class="title"><img src='connector-icons/gotify-logo.png'>Gotify<connector-configured id="gotifyConfigured"></connector-configured></span>
|
||
<label for="gotifyUrl"></label><input placeholder="URL" id="gotifyUrl" type="text">
|
||
<label for="gotifyAppToken"></label><input placeholder="App-Token" id="gotifyAppToken" type="text">
|
||
<div class="section-buttons-container">
|
||
<span onclick="TestGotify(gotifyUrl.value, gotifyAppToken.value)" class='section-button' id="test-connector">Test</span>
|
||
<span onclick="ClearGotify()" class='section-button' id="reset">Reset</span>
|
||
<span onclick="UpdateGotify(gotifyUrl.value, gotifyAppToken.value)" class='section-button'>Apply</span>
|
||
</div>
|
||
</div>
|
||
<div class="section-item">
|
||
<span class="title"><img src='connector-icons/lunasea.png'>LunaSea<connector-configured id="lunaseaConfigured"></connector-configured></span>
|
||
<label for="lunaseaWebhook"></label><input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text">
|
||
<div class="section-buttons-container">
|
||
<span onclick="TestLunaSea(lunaseaWebhook.value);" class='section-button' id="test-connector">Test</span>
|
||
<span onclick="ClearLunasea()" class='section-button' id="reset">Reset</span>
|
||
<span onclick="UpdateLunaSea(lunaseaWebhook.value);" class='section-button'>Apply</span>
|
||
</div>
|
||
</div>
|
||
<div class="section-item">
|
||
<span class="title"><img src='connector-icons/ntfy.svg'>Ntfy<connector-configured id="ntfyConfigured"></connector-configured></span>
|
||
<label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
|
||
<label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
|
||
<div class="section-buttons-container">
|
||
<span onclick="TestNtfy(ntfyEndpoint.value, ntfyAuth.value);" class='section-button' id="test-connector">Test</span>
|
||
<span onclick="ClearNtfy()" class='section-button' id="reset">Reset</span>
|
||
<span onclick="UpdateNtfy(ntfyEndpoint.value, ntfyAuth.value);" class='section-button'>Apply</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</popup-content>
|
||
|
||
<border-bar>
|
||
<div class="button-container">
|
||
<border-bar-button onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>
|
||
<border-bar-button class="primary" onclick="UpdateSettings()">Apply Settings</border-bar-button>
|
||
</div>
|
||
</border-bar>
|
||
|
||
</popup-window>
|
||
</popup>
|
||
|
||
<popup id="publicationViewerPopup">
|
||
<blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background>
|
||
<publication-viewer>
|
||
<img id="pubviewcover" src="media/cover.jpg" alt="cover">
|
||
<publication-details>
|
||
<publication-name id="publicationViewerName">Best Manga there is</publication-name>
|
||
<publication-tags id="publicationViewerTags">A Manga</publication-tags>
|
||
<publication-author id="publicationViewerAuthor">Glax</publication-author>
|
||
<publication-description id="publicationViewerDescription">
|
||
An interesting description. The description is very intriguing, yet wholesome.
|
||
</publication-description>
|
||
<publication-interactions>
|
||
<publication-starttask id="startJobButton">Start Job ▶️</publication-starttask>
|
||
<publication-canceltask id="cancelJobButton">Cancel Job ❌</publication-canceltask>
|
||
<publication-delete id="deleteJobButton">Delete Job 🗑️</publication-delete>
|
||
<publication-add id="createMonitorJobButton">Monitor ➕</publication-add>
|
||
<publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add>
|
||
</publication-interactions>
|
||
</publication-details>
|
||
</publication-viewer>
|
||
</popup>
|
||
|
||
<popup id="jobStatusView">
|
||
<blur-background id="blurBackgroundJobStatus" onclick="jobStatusView.style.display= 'none';"></blur-background>
|
||
<popup-window>
|
||
<div>
|
||
<div id="jobStatusRunning" style="border-right: 1px solid gray;"></div>
|
||
</div>
|
||
<div>
|
||
<div id="jobStatusWaiting" style="border-left: 1px solid gray;"></div>
|
||
</div>
|
||
</popup-window>
|
||
</popup>
|
||
</viewport>
|
||
|
||
<footer>
|
||
<div onclick="ShowJobQueue();">
|
||
<img src="media/running.svg" alt="running"><div id="jobsRunningTag">0</div>
|
||
</div>
|
||
<div onclick="ShowJobQueue();">
|
||
<img src="media/queue.svg" alt="queue"><div id="jobsQueuedTag">0</div>
|
||
</div>
|
||
<p id="madeWith">Made with Blåhaj 🦈</p>
|
||
</footer>
|
||
</wrapper>
|
||
|
||
<script src="apiConnector.js"></script>
|
||
<script src="interaction.js"></script>
|
||
</body>
|
||
</html> |