diff --git a/Website/apiConnector.js b/Website/apiConnector.js index dbe3dbc..55abef3 100644 --- a/Website/apiConnector.js +++ b/Website/apiConnector.js @@ -163,13 +163,18 @@ function UpdateDownloadLocation(downloadLocation){ PostData(uri); } +function ChangeStyleSheet(sheet){ + var uri = `${apiUri}/Settings/ChangeStyleSheet?styleSheet=${sheet}`; + PostData(uri); +} + function UpdateKomga(komgaUrl, komgaAuth){ var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`; PostData(uri); } function UpdateKavita(kavitaUrl, kavitaUsername, kavitaPassword){ - var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword={kavitaPassword}`; + var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword=${kavitaPassword}`; PostData(uri); } diff --git a/Website/index.html b/Website/index.html index fcb68ee..9cf6850 100644 --- a/Website/index.html +++ b/Website/index.html @@ -3,7 +3,7 @@ Tranga - + @@ -97,6 +97,10 @@ +
+ +
+
@@ -108,7 +112,7 @@ cover - + Best Manga there is A Manga Glax @@ -122,7 +126,7 @@ Monitor ➕ Download Chapter 📥 - + diff --git a/Website/interaction.js b/Website/interaction.js index 2dd3e5a..5b55dd6 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -40,6 +40,7 @@ const settingGotifyConfigured = document.querySelector("#gotifyConfigured"); const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured"); const settingNtfyConfigured = document.querySelector("#ntfyConfigured"); const settingApiUri = document.querySelector("#settingApiUri"); +const settingMangaHoverCheckbox = document.querySelector("#mangaHoverCheckbox"); const newMangaPopup = document.querySelector("#newMangaPopup"); const newMangaConnector = document.querySelector("#newMangaConnector"); const newMangaTitle = document.querySelector("#newMangaTitle"); @@ -80,6 +81,19 @@ function Setup(){ ResetContent(); UpdateJobs(); + GetSettings().then((json) => { + //console.log(json); + settingDownloadLocation.innerText = json.downloadLocation; + settingApiUri.placeholder = apiUri; + //console.log(json.styleSheet); + if (json.styleSheet == 'hover') { + settingMangaHoverCheckbox.checked = true; + document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css'); + } else { + settingMangaHoverCheckbox.checked = false; + document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css'); + } + }); setInterval(() => { UpdateJobs(); }, 1000); @@ -294,11 +308,20 @@ function OpenSettings(){ settingNtfyAuth.value = ""; settingNtfyEndpoint.value = ""; settingApiUri.value = ""; + settingMangaHoverCheckbox.checked = false; GetSettings().then((json) => { //console.log(json); settingDownloadLocation.innerText = json.downloadLocation; settingApiUri.placeholder = apiUri; + //console.log(json.styleSheet); + if (json.styleSheet == 'hover') { + settingMangaHoverCheckbox.checked = true; + document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css'); + } else { + settingMangaHoverCheckbox.checked = false; + document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css'); + } }); GetLibraryConnectors().then((json) => { //console.log(json); @@ -356,6 +379,15 @@ function UpdateSettings(){ setCookie("apiUri", apiUri); Setup(); } + + // If the checkbox is checked, set the style to style_mangahover.css and + if (document.getElementById("mangaHoverCheckbox").checked == true){ + ChangeStyleSheet('hover') + //console.log('Changing theme to mangahover') + } else { + ChangeStyleSheet('default'); + //console.log('Changing theme to default') + } if(settingKomgaUrl.value != "" && settingKomgaUser.value != "" && @@ -407,7 +439,7 @@ function UpdateJobs(){ monitoringJobsCount = json.length; } }); - + //Get the jobs that are waiting in the queue GetWaitingJobs().then((json) => { jobsQueuedTag.innerText = json.length; diff --git a/Website/style.css b/Website/styles/style_default.css similarity index 91% rename from Website/style.css rename to Website/styles/style_default.css index 486a5dd..19c0f52 100644 --- a/Website/style.css +++ b/Website/styles/style_default.css @@ -223,11 +223,22 @@ publication-information { justify-content: start; } +publication-details { + display: flex; + flex-direction: column; + justify-content: start; +} + publication-information * { z-index: 1; color: var(--accent-color); } +publication-details * { + z-index: 1; + color: var(--accent-color); +} + connector-name{ width: fit-content; margin: 10px 0; @@ -408,48 +419,48 @@ publication-viewer img { z-index: 0; } -publication-viewer publication-information > * { +publication-viewer publication-details > * { margin: 5px 0; } -publication-viewer publication-information publication-name { +publication-viewer publication-details publication-name { width: initial; overflow-x: scroll; white-space: nowrap; scrollbar-width: none; } -publication-viewer publication-information publication-tags::before { +publication-viewer publication-details publication-tags::before { content: "Tags"; display: block; font-weight: bolder; } -publication-viewer publication-information publication-tags { +publication-viewer publication-details publication-tags { overflow-x: scroll; white-space: nowrap; scrollbar-width: none; } -publication-viewer publication-information publication-author::before { +publication-viewer publication-details publication-author::before { content: "Author: "; font-weight: bolder; } -publication-viewer publication-information publication-description::before { +publication-viewer publication-details publication-description::before { content: "Description"; display: block; font-weight: bolder; } -publication-viewer publication-information publication-description { +publication-viewer publication-details publication-description { font-size: 12pt; margin: 5px 0; height: 145px; overflow-x: scroll; } -publication-viewer publication-information publication-interactions { +publication-viewer publication-details publication-interactions { display: flex; flex-direction: row; justify-content: end; @@ -457,25 +468,25 @@ publication-viewer publication-information publication-interactions { width: 100%; } -publication-viewer publication-information publication-interactions > * { +publication-viewer publication-details publication-interactions > * { margin: 0 10px; font-size: 16pt; cursor: pointer; } -publication-viewer publication-information publication-interactions publication-starttask { +publication-viewer publication-details publication-interactions publication-starttask { color: var(--secondary-color); } -publication-viewer publication-information publication-interactions publication-delete { +publication-viewer publication-details publication-interactions publication-delete { color: red; } -publication-view publication-information publication-interactions publication-canceltask { +publication-view publication-details publication-interactions publication-canceltask { color: yellow; } -publication-viewer publication-information publication-interactions publication-add { +publication-viewer publication-details publication-interactions publication-add { color: limegreen; } diff --git a/Website/styles/style_mangahover.css b/Website/styles/style_mangahover.css new file mode 100644 index 0000000..949a185 --- /dev/null +++ b/Website/styles/style_mangahover.css @@ -0,0 +1,661 @@ +:root{ + --background-color: #030304; + --second-background-color: #fff; + --primary-color: #f5a9b8; + --secondary-color: #5bcefa; + --accent-color: #fff; + --topbar-height: 60px; + box-sizing: border-box; +} + +body{ + padding: 0; + margin: 0; + height: 100vh; + background-color: var(--background-color); + font-family: "Inter", sans-serif; + overflow-x: hidden; +} + +wrapper { + display: flex; + flex-flow: column; + flex-wrap: nowrap; + height: 100vh; +} + +background-placeholder{ + background-color: var(--second-background-color); + opacity: 1; + position: absolute; + width: 100%; + height: 100%; + border-radius: 0 0 5px 0; + z-index: -1; +} + +topbar { + display: flex; + align-items: center; + height: var(--topbar-height); + background-color: var(--secondary-color); + z-index: 100; + box-shadow: 0 0 20px black; +} + +titlebox { + position: relative; + display: flex; + margin: 0 0 0 40px; + height: 100%; + align-items:center; + justify-content:center; +} + +titlebox span{ + cursor: default; + font-size: 24pt; + font-weight: bold; + background: linear-gradient(150deg, var(--primary-color), var(--accent-color)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-left: 20px; +} + +titlebox img { + height: 100%; + margin-right: 10px; + cursor: grab; +} + +spacer{ + flex-grow: 1; +} + +searchdiv{ + display: block; + margin: 0 10px 0 0; +} + +#searchbox { + padding: 3px 10px; + border: 0; + border-radius: 4px; + font-size: 14pt; + width: 250px; +} + +#settingscog { + cursor: pointer; + margin: 0px 30px; + height: 50%; + filter: invert(100%) sepia(0%) saturate(7465%) hue-rotate(115deg) brightness(116%) contrast(101%); +} + +viewport { + position: relative; + display: flex; + flex-flow: row; + flex-wrap: nowrap; + flex-grow: 1; + height: 100%; + overflow-y: scroll; +} + +footer { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + width: 100%; + height: 40px; + align-items: center; + justify-content: center; + background-color: var(--primary-color); + align-content: center; +} + +footer > div { + height: 100%; + margin: 0 30px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + cursor: pointer; +} + +footer > div > *{ + height: 40%; + margin: 0 5px; +} + +#madeWith { + flex-grow: 1; + text-align: right; + margin-right: 20px; + cursor: url("media/blahaj.png"), grab; +} + +content { + position: relative; + flex-grow: 1; + border-radius: 5px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: start; + align-content: start; +} + +#settingsPopup{ + z-index: 300; +} + +#settingsPopup popup-content{ + flex-direction: column; + align-items: start; + margin: 15px 10px; +} + +#settingsPopup popup-content > * { + margin: 5px 10px; +} + +#settingsPopup popup-content .title { + font-weight: bolder; +} + +#addPublication { + cursor: pointer; + background-color: var(--secondary-color); + width: 180px; + height: 300px; + border-radius: 5px; + margin: 10px 10px; + padding: 15px 20px; + position: relative; +} + +#addPublication p{ + width: 100%; + text-align: center; + font-size: 150pt; + vertical-align: middle; + line-height: 300px; + margin: 0; + color: var(--accent-color); +} + +.pill { + flex-grow: 0; + height: 14pt; + font-size: 12pt; + border-radius: 9pt; + background-color: var(--primary-color); + padding: 2pt 17px; + color: black; +} + +publication{ + cursor: pointer; + background-color: var(--secondary-color); + width: 180px; + height: 300px; + border-radius: 5px; + margin: 10px 10px; + padding: 15px 20px; + position: relative; + flex-shrink: 0; +} + +publication:hover { + background-color: black; +} + +publication:hover::after{ + background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)); +} + +publication:hover > publication-information { + display: flex; + opacity:1; +} + +publication::after{ + content: ''; + position: absolute; + left: 0; top: 0; + border-radius: 5px; + width: 100%; height: 100%; +} + +publication-information { + display: none; + flex-direction: column; + justify-content: start; +} + +publication-information * { + z-index: 1; + color: var(--accent-color); +} + +connector-name{ + width: fit-content; + margin: 10px 0; +} + +publication-name{ + width: fit-content; + font-size: 16pt; + font-weight: bold; +} + +publication-details { + display: flex; + flex-direction: column; + justify-content: start; +} + +publication-details * { + z-index: 1; + color: var(--accent-color); +} + +publication img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 0; + border-radius: 5px; +} + +popup{ + display: none; + width: 100%; + min-height: 100%; + top: 0; + left: 0; + position: fixed; + z-index: 2; + flex-direction: column; +} + + +popup popup-window { + position: absolute; + z-index: 3; + left: 25%; + top: 100px; + width: 50%; + display: flex; + flex-direction: column; + background-color: var(--second-background-color); + border-radius: 3px; + overflow: hidden; +} + +popup popup-window popup-title { + height: 30px; + font-size: 14pt; + font-weight: bolder; + padding: 5px 10px; + margin: 0; + display: flex; + align-items: center; + background-color: var(--primary-color); + color: var(--accent-color) +} + +popup popup-window popup-content{ + margin: 15px 10px; + display: flex; + align-items: center; + justify-content: space-evenly; +} + +popup popup-window popup-content div > * { + margin: 2px 3px 0 0; +} + +popup popup-window popup-content input, select { + padding: 3px 4px; + width: 130px; + border: 1px solid lightgrey; + background-color: var(--accent-color); + border-radius: 3px; +} + +#newMangaPopup > div { + z-index: 3; + position: relative; +} + +#newMangaPopup > #newMangaPopupSelector { + width: 600px; + height: 40px; + margin: 80px auto 0; +} + +#newMangaPopup > div > #newMangaConnector, #newMangaTitle, #newMangaTranslatedLanguage { + margin: 0; + display: inline-block; + height: 40px; +} + +#newMangaPopup #newMangaConnector { + width: 100px; + padding: 0 0 0 5px; + border-radius: 5px 0 0 5px; + border: 0; + border-right: 1px solid darkgray; +} + +#newMangaPopup #newMangaTitle{ + width: 445px; + padding: 0 5px 0 5px; + border: 0; +} + +#newMangaPopup #newMangaTranslatedLanguage { + width: 45px; + border-radius: 0 5px 5px 0; + border: 0; + border-left: 1px solid darkgray; + margin-left: -5px; +} + +#newMangaResult { + display: none; + flex-direction: row; + justify-content: flex-start; + margin: 5px auto 0; + border-radius: 5px; + padding: 5px; + width: min-content; + max-width: 98%; + max-height: 400px; + overflow-x: scroll; + overflow-y: hidden; +} + +blur-background { + width: 100%; + height: 100%; + position: absolute; + left: 0; + background: rgba(245, 169, 184, 0.58); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(4.5px); + -webkit-backdrop-filter: blur(4.5px); +} + +#publicationViewerPopup{ + z-index: 5; +} + +publication-viewer{ + display: block; + width: 460px; + position: absolute; + top: 200px; + left: 400px; + background-color: var(--accent-color); + border-radius: 5px; + overflow: hidden; + padding: 15px; +} + +publication-viewer::after{ + content: ''; + position: absolute; + left: 0; top: 0; + border-radius: 5px; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.8); + backdrop-filter: blur(3px); +} + +publication-viewer img { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + object-fit: cover; + border-radius: 5px; + z-index: 0; +} + +publication-viewer publication-details > * { + margin: 5px 0; +} + +publication-viewer publication-details publication-name { + width: initial; + overflow-x: scroll; + white-space: nowrap; + scrollbar-width: none; +} + +publication-viewer publication-details publication-tags::before { + content: "Tags"; + display: block; + font-weight: bolder; +} + +publication-viewer publication-details publication-tags { + overflow-x: scroll; + white-space: nowrap; + scrollbar-width: none; +} + +publication-viewer publication-details publication-author::before { + content: "Author: "; + font-weight: bolder; +} + +publication-viewer publication-details publication-description::before { + content: "Description"; + display: block; + font-weight: bolder; +} + +publication-viewer publication-details publication-description { + font-size: 12pt; + margin: 5px 0; + height: 145px; + overflow-x: scroll; +} + +publication-viewer publication-details publication-interactions { + display: flex; + flex-direction: row; + justify-content: end; + align-items: start; + width: 100%; +} + +publication-viewer publication-details publication-interactions > * { + margin: 0 10px; + font-size: 16pt; + cursor: pointer; +} + +publication-viewer publication-details publication-interactions publication-starttask { + color: var(--secondary-color); +} + +publication-viewer publication-details publication-interactions publication-delete { + color: red; +} + +publication-view publication-details publication-interactions publication-canceltask { + color: yellow; +} + +publication-viewer publication-details publication-interactions publication-add { + color: limegreen; +} + +footer-tag-popup { + display: none; + padding: 2px 4px; + position: fixed; + bottom: 58px; + left: 20px; + background-color: var(--second-background-color); + z-index: 8; + border-radius: 5px; + max-height: 400px; +} + +footer-tag-content{ + position: relative; + max-height: 400px; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + overflow-y: scroll; +} + +footer-tag-content > * { + margin: 2px 5px; +} + +footer-tag-popup::before{ + content: ""; + width: 0; + height: 0; + position: absolute; + border-right: 10px solid var(--second-background-color); + border-left: 10px solid transparent; + border-top: 10px solid var(--second-background-color); + border-bottom: 10px solid transparent; + left: 0; + bottom: -17px; + border-radius: 0 0 0 5px; +} + +#loaderdiv { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + z-index: 200; +} + +#loader { + border: 16px solid transparent; + border-top: 16px solid var(--secondary-color); + border-bottom: 16px solid var(--primary-color); + border-radius: 50%; + width: 120px; + height: 120px; + animation: spin 2s linear infinite; + position: absolute; + left: calc(50% - 60px); + top: calc(50% - 120px); + z-index: 201; +} + +#loaderText { + position: relative; + margin: 0 auto; + top: calc(50% + 80px); + z-index: 201; + text-align: center; + color: var(--second-background-color); + font-size: 20pt; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +#jobStatusView { + z-index: 50; +} + +#jobStatusView > popup-window { + top: 80px; + width: 50%; + max-height: calc(100% - 140px); + display: flex; + flex-direction: row; + flex-wrap: nowrap; + background-color: transparent; +} + +#jobStatusView > popup-window > div { + overflow-y: scroll; + overflow-x: hidden; + width: 50%; + margin: 0; + max-height: 100%; +} + +#jobStatusView > popup-window > div > div { + overflow-x: hidden; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + width: 100%; + margin: 0; +} + +.jobWrapper { + width: 90%; + margin: 2px 5%; + height: 100px; + position: relative; + flex-shrink: 0; + background-color: rgba(187,187,187,0.4); + border-radius: 3px; +} + +.jobWrapper > .jobImage { + height: 90%; + width: 20%; + left: 5px; + object-fit: contain; + position: absolute; + top: 5%; +} + +.jobWrapper > .jobTitle { + position: absolute; + left: calc(20% + 10px); + top: 5px; +} + +.jobWrapper > .jobProgressBar { + position: absolute; + left: calc(20% + 10px); + bottom: calc(12pt + 10px); + width: calc(80% - 20px); + height: 10px; +} + +.jobWrapper > .jobProgressSpan { + position: absolute; + right: 10px; + bottom: calc(12pt + 20px); + width: 60%; + text-align: right; +} + +.jobWrapper > .jobCancel { + position: absolute; + right: 10px; + bottom: 5px; + font-size: 12pt; + color: var(--secondary-color); + cursor: pointer; +} \ No newline at end of file