<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tranga</title> <link rel="stylesheet" href="style.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> <searchdiv> <label for="searchbox"></label><input id="searchbox" placeholder="Filter" type="text"> </searchdiv> <img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog"> </topbar> <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> <popup-title>Settings</popup-title> <popup-content> <div> <p class="title">Download Location:</p> <span id="downloadLocation"></span> </div> <div> <p class="title">API-URI</p> <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri"> </div> <div> <span class="title">Komga</span> <div>Configured: <span id="komgaConfigured">✅❌</span></div> <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> <div> <span class="title">Kavita</span> <div>Configured: <span id="kavitaConfigured">✅❌</span></div> <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> <div> <span class="title">Gotify</span> <div>Configured: <span id="gotifyConfigured">✅❌</span></div> <label for="gotifyUrl"></label><input placeholder="URL" id="gotifyUrl" type="text"> <label for="gotifyAppToken"></label><input placeholder="App-Token" id="gotifyAppToken" type="text"> </div> <div> <span class="title">LunaSea</span> <div>Configured: <span id="lunaseaConfigured">✅❌</span></div> <label for="lunaseaWebhook"></label><input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text"> </div> <div> <span class="title">Ntfy</span> <div>Configured: <span id="ntfyConfigured">✅❌</span></div> <label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text"> <label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text"> </div> <div> <input type="submit" value="Update" onclick="UpdateSettings()"> </div> </popup-content> </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-information> <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-information> </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>