Tranga-Website/Website/index.html
2024-04-18 17:33:08 -04:00

300 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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')" >&times</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'">&times</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">Rate Limits</span>
<row><label for="DefaultRL">Default:</label><input id="defaultRL" type="text" ></row>
<row><label for="CoverRL">Manga Covers:</label><input id="coverRL" type="text"></row>
<row><label for="ImageRL">Manga Images:</label><input id="imageRL" type="text"></row>
<row><label for="InfoRL">Manga Info:</label><input id="infoRL" type="text"></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>
</div> -->
<!-- <div class="section-item dyn-height">
<span class="title"><img src="connector-icons/mangasee.png"><a href="https://mangasee123.com">MangaSee</a></span>
</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="mDexFeedRL">Feed Rate Limit:</label><input id="mDexFeedRL" type="text"></row>
<row><label for="mDexImageRL">Image Rate Limit:</label><input id="mDexImageRL" 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>
</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>
</div> -->
<!-- <div class="section-item dyn-height">
<span class="title"><img src="connector-icons/bato.ico"><a href="https://bato.to">Bato</a></span>
</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>
</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 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="blurBackgroundSettingsPopup" onclick="jobStatusView.style.display = 'none';"></blur-background>
<popup-window>
<border-bar>
<popup-title>Jobs</popup-title>
<popup-close onclick="jobStatusView.style.display = 'none'">&times</popup-close>
</border-bar>
<popup-content>
<div class="popup-section">
RUNNING JOBS
<div class="section-content" id="jobStatusRunning">
</div>
</div>
<div class="popup-section">
QUEUED JOBS
<div class="section-content" id="jobStatusWaiting">
</div>
</div>
</popup-content>
<border-bar>
<!-- <div class="button-container">
<border-bar-button class="primary" onclick="UpdateSettings()">Apply Settings</border-bar-button>
</div> -->
</border-bar>
</popup-window>
</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>