Merge branch 'master' into cuttingedge

# Conflicts:
#	.github/workflows/docker-image-vite-react-ts.yml

.github/workflows/docker-image-cuttingedge.yml

@@ -3,6 +3,8 @@ name: Docker Image CI
 on:
   push:
     branches: [ "cuttingedge" ]
+  pull_request:
+    branches: [ "cuttingedge" ] 
   workflow_dispatch:
 
 jobs:
@@ -17,12 +19,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.2.0
+        uses: docker/setup-qemu-action@v3.6.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v2.10.0
+        uses: docker/setup-buildx-action@v3.11.0
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -33,12 +35,12 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v4.1.1
+        uses: docker/build-push-action@v6.18.0
         with:
-          context: ./Website
+          context: .
           file: ./Dockerfile
           #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
-          platforms: linux/amd64
+          platforms: linux/amd64,linux/arm64
           pull: true
           push: true
           tags: |

.github/workflows/docker-image-master.yml

@@ -3,8 +3,6 @@ name: Docker Image CI
 on:
   push:
     branches: [ "master" ]
-  pull_request:
-    branches: [ "master" ]
   workflow_dispatch:
 
 jobs:
@@ -19,12 +17,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.2.0
+        uses: docker/setup-qemu-action@v3.6.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v2.10.0
+        uses: docker/setup-buildx-action@v3.11.0
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -35,12 +33,12 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v4.1.1
+        uses: docker/build-push-action@v6.18.0
         with:
-          context: ./Website
+          context: ./
           file: ./Dockerfile
           #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
-          platforms: linux/amd64
+          platforms: linux/amd64,linux/arm64
           pull: true
           push: true
           tags: |

.github/workflows/docker-image-vite-react-ts.yml

@@ -2,7 +2,7 @@ name: Docker Image CI
 
 on:
   push:
-    branches: [ "cuttingedge" ]
+    branches: [ "vite-react-ts" ]
   workflow_dispatch:
 
 jobs:
@@ -17,12 +17,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.2.0
+        uses: docker/setup-qemu-action@v3.6.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v2.10.0
+        uses: docker/setup-buildx-action@v3.11.0
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -33,13 +33,13 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v4.1.1
+        uses: docker/build-push-action@v6.18.0
         with:
-          context: ./Website
+          context: .
           file: ./Dockerfile
           #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
           platforms: linux/amd64
           pull: true
           push: true
           tags: |
-            glax/tranga-website:dev
+            glax/tranga-website:Server-V2

.gitignore

@@ -18,4 +18,9 @@ riderModule.iml
 /dataSources.local.xml
 /.idea
 cover.jpg
-cover.png
+cover.png
+.vs/slnx.sqlite
+.vs/tranga-website/config/applicationhost.config
+.vs/tranga-website/FileContentIndex/91a465d3-1190-42e0-95eb-fa3694744e58.vsidx
+.vs/tranga-website/v17/.wsuo
+.vs/VSWorkspaceState.json

Dockerfile

@@ -1,4 +1,6 @@
 FROM nginx:alpine3.17-slim
-COPY . /usr/share/nginx/html
+COPY ./Website /usr/share/nginx/html
+COPY ./nginx /etc/nginx
 EXPOSE 80
+ENV API_URL=http://tranga-api:6531
 CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,11 +1,6 @@
-<!-- PROJECT SHIELDS -->
+# Testers for V2 wanted!
-<!--
+
-*** I'm using markdown "reference style" links for readability.
+[Details](https://github.com/C9Glax/tranga/pull/355#issuecomment-2764217944)
-*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
-*** See the bottom of this document for the declaration of the reference variables
-*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
-*** https://www.markdownguide.org/basic-syntax/#reference-style-links
--->
 
 <!-- PROJECT LOGO -->
 <br />

Website/apiConnector.js

@@ -1,6 +1,4 @@
-let apiUri = `http://${window.location.host.split(':')[0]}:6531`
+if(getCookie("apiUri") != ""){
-
-if(getCookie("apiUri") != ""){
     apiUri = getCookie("apiUri");
 }
 setCookie("apiUri", apiUri);
@@ -39,10 +37,11 @@ async function GetData(uri){
     return json;
 }
 
-function PostData(uri){
+async function PostData(uri){
-    fetch(uri, {
+    let request = await fetch(uri, {
         method: 'POST'
     });
+    //console.log(request);
 }
 
 function DeleteData(uri){
@@ -143,6 +142,12 @@ async function GetLibraryConnectors(){
 	return json;
 }
 
+async function GetRateLimits() {
+    var uri = `${apiUri}/Settings/customRequestLimit`
+    let json = await GetData(uri);
+    return json;
+}
+
 function CreateMonitorJob(connector, internalId, language){
     var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=03:00:00&translatedLanguage=${language}`;
     PostData(uri);
@@ -163,36 +168,164 @@ function UpdateDownloadLocation(downloadLocation){
     PostData(uri);	
 }
 
-function ChangeStyleSheet(sheet){
+function RefreshLibraryMetadata() {
-    var uri = `${apiUri}/Settings/ChangeStyleSheet?styleSheet=${sheet}`;
+    var uri = `${apiUri}/Jobs/UpdateMetadata`;
     PostData(uri);
 }
 
+async function DownloadLogs() {
+    var uri = `${apiUri}/LogFile`;
+
+    //Below taken from https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream
+    fetch(uri)
+    .then((response) => response.body)
+    .then((rb) => {
+      const reader = rb.getReader();
+  
+      return new ReadableStream({
+        start(controller) {
+          // The following function handles each data chunk
+          function push() {
+            // "done" is a Boolean and value a "Uint8Array"
+            reader.read().then(({ done, value }) => {
+              // If there is no more data to read
+              if (done) {
+                console.log("done", done);
+                controller.close();
+                return;
+              }
+              // Get the data and send it to the browser via the controller
+              controller.enqueue(value);
+              // Check chunks by logging to the console
+              console.log(done, value);
+              push();
+            });
+          }
+  
+          push();
+        },
+      });
+    })
+    .then((stream) =>
+      // Respond with our stream
+      new Response(stream, { headers: { "Content-Type": "text/html" } }).text(),
+    )
+    .then((result) => {
+      // Do things with result
+      //console.log(result);
+
+      //Below download taken from https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server
+      var element = document.createElement('a');
+      element.setAttribute('href', 'data:text/plain;charset-utf-8,' + encodeURIComponent(result));
+      var newDate = new Date();
+      var filename = "Tranga_Logs_" + newDate.today() + "_" + newDate.timeNow() + ".log";
+      element.setAttribute('download', filename);
+      element.click();
+    });
+}
+
+//Following date-time code taken from: https://stackoverflow.com/questions/10211145/getting-current-date-and-time-in-javascript
+// For todays date;
+Date.prototype.today = function () { 
+    return ((this.getDate() < 10)?"0":"") + this.getDate() +"/"+(((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +"/"+ this.getFullYear();
+}
+
+// For the time now
+Date.prototype.timeNow = function () {
+     return ((this.getHours() < 10)?"0":"") + this.getHours() +"_"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +"_"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds();
+}
+
+//Komga
 function UpdateKomga(komgaUrl, komgaAuth){
     var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
     PostData(uri);
 }
 
+function ResetKomga(){
+    var uri = `${apiUri}/LibraryConnectors/Reset?libraryConnector=Komga`;
+    PostData(uri);
+}
+
+function TestKomga(komgaUrl, komgaAuth){
+    var uri = `${apiUri}/LibraryConnectors/Test?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
+    PostData(uri);
+}
+
+
+//Kavita
 function UpdateKavita(kavitaUrl, kavitaUsername, kavitaPassword){
     var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword=${kavitaPassword}`;
     PostData(uri);
 }
 
+function ResetKavita(){
+    var uri = `${apiUri}/LibraryConnectors/Reset?libraryConnector=Kavita`;
+    PostData(uri);
+}
+
+function TestKavita(kavitaUrl, kavitaUsername, kavitaPassword){
+    var uri = `${apiUri}/LibraryConnectors/Test?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword=${kavitaPassword}`;
+    PostData(uri);
+}
+
+//Gotify
 function UpdateGotify(gotifyUrl, gotifyAppToken){
     var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=Gotify&gotifyUrl=${gotifyUrl}&gotifyAppToken=${gotifyAppToken}`;
     PostData(uri);
 }
 
+function ResetGotify(){
+    var uri = `${apiUri}/NotificationConnectors/Reset?notificationConnector=Gotify`;
+    PostData(uri);
+}
+
+function TestGotify(gotifyUrl, gotifyAppToken){
+    var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=Gotify&gotifyUrl=${gotifyUrl}&gotifyAppToken=${gotifyAppToken}`;
+    PostData(uri);
+}
+
+//LunaSea
 function UpdateLunaSea(lunaseaWebhook){
     var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=LunaSea&lunaseaWebhook=${lunaseaWebhook}`;
     PostData(uri);
 }
 
+function ResetLunaSea(){
+    var uri = `${apiUri}/NotificationConnectors/Reset?notificationConnector=LunaSea`;
+    PostData(uri);
+}
+
+function TestLunaSea(lunaseaWebhook){
+    var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=LunaSea&lunaseaWebhook=${lunaseaWebhook}`;
+    PostData(uri);
+}
+
+//Ntfy
 function UpdateNtfy(ntfyEndpoint, ntfyAuth){
     var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=Ntfy&ntfyUrl=${ntfyEndpoint}&ntfyAuth=${ntfyAuth}`;
     PostData(uri);
 }
 
+function ResetNtfy(){
+    var uri = `${apiUri}/NotificationConnectors/Reset?notificationConnector=Ntfy`;
+    PostData(uri);
+}
+
+function TestNtfy(ntfyEndpoint, ntfyAuth){
+    var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=Ntfy&ntfyUrl=${ntfyEndpoint}&ntfyAuth=${ntfyAuth}`;
+    PostData(uri);
+}
+
+function UpdateUserAgent(userAgent){
+    var uri = `${apiUri}/Settings/userAgent?userAgent=${userAgent}`;
+    PostData(uri);
+}
+
+function UpdateRateLimit(byteValue, rateLimit) {
+    var uri = `${apiUri}/Settings/customRequestLimit?requestType=${byteValue}&requestsPerMinute=${rateLimit}`;
+    PostData(uri);
+}
+
 function RemoveJob(jobId){
     var uri = `${apiUri}/Jobs?jobId=${jobId}`;
     DeleteData(uri);
@@ -206,5 +339,6 @@ function CancelJob(jobId){
 async function GetLogmessages(count){
 	var uri = `${apiUri}/LogMessages?count=${count}`;
 	let json = await GetData(uri);
+    console.log(json);
 	return json;
 }

Website/connector-icons/komga.svg

@@ -0,0 +1,113 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+        xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+        xmlns:dc="http://purl.org/dc/elements/1.1/"
+        xmlns:cc="http://creativecommons.org/ns#"
+        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+        height="512pt"
+        viewBox="0 0 512 512"
+        width="512pt"
+        version="1.1"
+        id="svg4586"
+        sodipodi:docname="komga - Copy.svg"
+        inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+    <metadata
+            id="metadata4592">
+        <rdf:RDF>
+            <cc:Work
+                    rdf:about="">
+                <dc:format>image/svg+xml</dc:format>
+                <dc:type
+                        rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+            </cc:Work>
+        </rdf:RDF>
+    </metadata>
+    <defs
+            id="defs4590">
+        <linearGradient
+                id="linearGradient6082"
+                osb:paint="solid">
+            <stop
+                    style="stop-color:#000000;stop-opacity:1;"
+                    offset="0"
+                    id="stop6080"/>
+        </linearGradient>
+        <linearGradient
+                id="linearGradient6076"
+                osb:paint="solid">
+            <stop
+                    style="stop-color:#000000;stop-opacity:1;"
+                    offset="0"
+                    id="stop6074"/>
+        </linearGradient>
+        <linearGradient
+                inkscape:collect="always"
+                xlink:href="#linearGradient6082"
+                id="linearGradient6084"
+                x1="77.866812"
+                y1="386.00679"
+                x2="217.20259"
+                y2="386.00679"
+                gradientUnits="userSpaceOnUse"/>
+    </defs>
+    <sodipodi:namedview
+            pagecolor="#ffffff"
+            bordercolor="#666666"
+            borderopacity="1"
+            objecttolerance="10"
+            gridtolerance="10"
+            guidetolerance="10"
+            inkscape:pageopacity="0"
+            inkscape:pageshadow="2"
+            inkscape:window-width="1656"
+            inkscape:window-height="1368"
+            id="namedview4588"
+            showgrid="false"
+            inkscape:zoom="1.2512475"
+            inkscape:cx="264.73114"
+            inkscape:cy="305.20589"
+            inkscape:window-x="-7"
+            inkscape:window-y="0"
+            inkscape:window-maximized="0"
+            inkscape:current-layer="svg4586"/>
+    <path
+            d="m512 256c0 141.386719-114.613281 256-256 256s-256-114.613281-256-256 114.613281-256 256-256 256 114.613281 256 256zm0 0"
+            fill="#005ed3"
+            id="path4556"/>
+    <path
+            d="m 512,256 c 0,-11.71094 -0.80469,-23.23047 -2.32422,-34.52344 L 382.48047,94.28125 320.52344,121.85938 256,56.933594 212.69531,131.30469 129.51953,94.28125 141.86719,178.42187 49.949219,193.81641 114.32031,256 l -64.371091,62.18359 82.121091,82.16016 -2.55078,17.375 91.95703,91.95703 C 232.76953,511.19531 244.28906,512 256,512 397.38672,512 512,397.38672 512,256 Z"
+            id="path4558"
+            inkscape:connector-curvature="0"
+            style="fill:#00459f"
+            sodipodi:nodetypes="scccccccccccccss"/>
+    <path
+            d="m256 86.742188 37.109375 63.738281 70.574219-31.414063-10.527344 71.71875 77.078125 12.910156-54.144531 52.304688 54.144531 52.304688-77.078125 12.910156 10.527344 71.71875-70.574219-31.414063-37.109375 63.738281-37.109375-63.738281-70.574219 31.414063 10.527344-71.71875-77.078125-12.910156 54.144531-52.304688-54.144531-52.304688 77.078125-12.910156-10.527344-71.71875 70.574219 31.414063zm0 0"
+            fill="#ff0335"
+            id="path4560"/>
+    <path
+            d="m430.230469 308.300781-77.070313 12.910157 10.519532 71.71875-70.570313-31.410157-37.109375 63.742188v-338.523438l37.109375 63.742188 70.570313-31.410157-6.757813 46.101563-3.761719 25.617187 58.800782 9.851563 18.269531 3.058594-13.390625 12.929687-40.75 39.371094 11.378906 10.988281zm0 0"
+            fill="#c2001b"
+            id="path4562"/>
+    <path
+            d="m256 455.066406-43.304688-74.371094-83.175781 37.023438 12.347657-84.140625-91.917969-15.394531 64.371093-62.183594-64.371093-62.183594 91.917969-15.394531-12.347657-84.140625 83.179688 37.023438 43.300781-74.371094 43.304688 74.371094 83.175781-37.023438-12.347657 84.140625 91.917969 15.394531-64.371093 62.183594 64.371093 62.183594-91.917969 15.398437 12.347657 84.136719-83.175781-37.023438zm-30.917969-112.722656 30.917969 53.101562 30.917969-53.101562 57.964843 25.800781-8.703124-59.292969 62.238281-10.425781-43.917969-42.425781 43.917969-42.425781-62.238281-10.425781 8.703124-59.292969-57.964843 25.800781-30.917969-53.101562-30.917969 53.101562-57.964843-25.800781 8.703124 59.292969-62.238281 10.425781 43.917969 42.425781-43.917969 42.425781 62.238281 10.425781-8.703124 59.292969zm0 0"
+            fill="#ffdf47"
+            id="path4564"/>
+    <path
+            d="m403.308594 261.441406-5.628906-5.441406 25.160156-24.300781 39.210937-37.878907-55.75-9.339843-36.171875-6.058594 2.800782-19.09375 9.550781-65.046875-83.179688 37.019531-43.300781-74.371093v59.621093l30.921875 53.109375 57.957031-25.808594-3.910156 26.667969-2.546875 17.378907-2.242187 15.25 2.480468.421874 59.761719 10.007813-43.921875 42.421875 16.96875 16.390625 26.953125 26.03125-62.242187 10.429687 8.699218 59.296876-57.957031-25.808594-30.921875 53.109375v59.621093l43.300781-74.371093 83.179688 37.019531-12.351563-84.140625 91.921875-15.398437zm0 0"
+            fill="#fec000"
+            id="path4566"/>
+    <g
+            aria-label="K"
+            transform="matrix(1.1590846,-0.34467221,0.22789693,0.794981,0,0)"
+            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:296.55969238px;line-height:125%;font-family:Impact;-inkscape-font-specification:Impact;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.54528999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+            id="text4596">
+        <path
+                d="m 220.91497,266.9035 -34.89789,105.85211 38.2284,128.58643 H 161.2555 L 136.63873,400.84769 V 501.34204 H 75.676021 V 266.9035 h 60.962709 v 91.08205 l 27.07845,-91.08205 z"
+                style="font-size:296.55969238px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.54528999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+                id="path824"/>
+    </g>
+</svg>

Website/connector-icons/ntfy.svg

@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50mm" height="50mm" viewBox="0 0 50 50">
+    <defs>
+        <linearGradient id="b">
+            <stop offset="0" style="stop-color:#348878;stop-opacity:1"/>
+            <stop offset="1" style="stop-color:#52bca6;stop-opacity:1"/>
+        </linearGradient>
+        <linearGradient id="a">
+            <stop offset="0" style="stop-color:#348878;stop-opacity:1"/>
+            <stop offset="1" style="stop-color:#56bda8;stop-opacity:1"/>
+        </linearGradient>
+        <linearGradient xlink:href="#a" id="e" x1="160.722" x2="168.412" y1="128.533" y2="134.326" gradientTransform="matrix(3.74959 0 0 3.74959 -541.79 -387.599)" gradientUnits="userSpaceOnUse"/>
+        <linearGradient xlink:href="#b" id="c" x1=".034" x2="50.319" y1="0" y2="50.285" gradientTransform="matrix(.99434 0 0 .99434 -.034 0)" gradientUnits="userSpaceOnUse"/>
+        <filter id="d" width="1.176" height="1.211" x="-.076" y="-.092" style="color-interpolation-filters:sRGB">
+            <feFlood flood-color="#fff" flood-opacity=".192" result="flood"/>
+            <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/>
+            <feGaussianBlur in="composite1" result="blur" stdDeviation="4"/>
+            <feOffset dx="3" dy="2.954" result="offset"/>
+            <feComposite in="SourceGraphic" in2="offset" result="composite2"/>
+        </filter>
+    </defs>
+    <g style="display:inline">
+        <path d="M0 0h50v50H0z" style="fill:url(#c);fill-opacity:1;stroke:none;stroke-width:.286502;stroke-linejoin:bevel"/>
+    </g>
+    <g style="display:inline">
+        <path d="M50.4 46.883c-9.168 0-17.023 7.214-17.023 16.387v.007l.09 71.37-2.303 16.992 31.313-8.319h77.841c9.17 0 17.024-7.224 17.024-16.396V63.27c0-9.17-7.85-16.383-17.016-16.387h-.008zm0 11.566h89.926c3.222.004 5.45 2.347 5.45 4.82v63.655c0 2.475-2.232 4.82-5.457 4.82h-79.54l-15.908 4.807.162-.938-.088-72.343c0-2.476 2.23-4.82 5.455-4.82z" style="color:#fff;display:inline;fill:#fff;stroke:none;stroke-width:1.93113;-inkscape-stroke:none;filter:url(#d)" transform="scale(.26458)"/>
+    </g>
+    <g style="display:inline">
+        <path d="M88.2 95.309H64.92c-1.601 0-2.91 1.236-2.91 2.746l.022 18.602-.435 2.506 6.231-1.881H88.2c1.6 0 2.91-1.236 2.91-2.747v-16.48c0-1.51-1.31-2.746-2.91-2.746z" style="color:#fff;fill:url(#e);stroke:none;stroke-width:2.49558;-inkscape-stroke:none" transform="translate(-51.147 -81.516)"/>
+        <path d="M50.4 46.883c-9.168 0-17.023 7.214-17.023 16.387v.007l.09 71.37-2.303 16.992 31.313-8.319h77.841c9.17 0 17.024-7.224 17.024-16.396V63.27c0-9.17-7.85-16.383-17.016-16.387h-.008zm0 11.566h89.926c3.222.004 5.45 2.347 5.45 4.82v63.655c0 2.475-2.232 4.82-5.457 4.82h-79.54l-15.908 4.807.162-.938-.088-72.343c0-2.476 2.23-4.82 5.455-4.82z" style="color:#fff;fill:#fff;stroke:none;stroke-width:1.93113;-inkscape-stroke:none" transform="scale(.26458)"/>
+        <g style="font-size:8.48274px;font-family:sans-serif;letter-spacing:0;word-spacing:0;fill:#fff;stroke:none;stroke-width:.525121">
+            <path d="M62.57 116.77v-1.312l3.28-1.459q.159-.068.306-.102.158-.045.283-.068l.271-.022v-.09q-.136-.012-.271-.046-.125-.023-.283-.057-.147-.045-.306-.113l-3.28-1.459v-1.323l5.068 2.319v1.413z" style="color:#fff;-inkscape-font-specification:&quot;JetBrains Mono, Bold&quot;;fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.45366 0 0 1.72815 -75.122 -171.953)"/>
+            <path d="M62.309 110.31v1.903l3.437 1.53.022.007-.022.008-3.437 1.53v1.892l.37-.17 5.221-2.39v-1.75zm.525.817 4.541 2.08v1.076l-4.541 2.078v-.732l3.12-1.389.003-.002a1.56 1.56 0 0 1 .258-.086h.006l.008-.002c.094-.027.176-.047.246-.06l.498-.041v-.574l-.24-.02a1.411 1.411 0 0 1-.231-.04l-.008-.001-.008-.002a9.077 9.077 0 0 1-.263-.053 2.781 2.781 0 0 1-.266-.097l-.004-.002-3.119-1.39z"
+                  style="color:#fff;-inkscape-font-specification:&quot;JetBrains Mono, Bold&quot;;fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.45366 0 0 1.72815 -75.122 -171.953)"/>
+        </g>
+        <g style="font-size:8.48274px;font-family:sans-serif;letter-spacing:0;word-spacing:0;fill:#fff;stroke:none;stroke-width:.525121">
+            <path d="M69.171 117.754h5.43v1.278h-5.43Z" style="color:#fff;-inkscape-font-specification:&quot;JetBrains Mono, Bold&quot;;fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.44935 0 0 1.66414 -74.104 -166.906)"/>
+            <path d="M68.908 117.492v1.802h5.955v-1.802zm.526.524h4.904v.754h-4.904z" style="color:#fff;-inkscape-font-specification:&quot;JetBrains Mono, Bold&quot;;fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.44935 0 0 1.66414 -74.104 -166.906)"/>
+        </g>
+    </g>
+</svg>

Website/defaultApiUri.js

@@ -0,0 +1 @@
+let apiUri = `${window.location.protocol}//${window.location.host.split(':')[0]}:6531`

Website/index.html

@@ -3,22 +3,50 @@
 <head>
   <meta charset="UTF-8">
   <title>Tranga</title>
-  <link id='pagestyle' rel="stylesheet" href="styles/style_default.css">
+  <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>
-      <searchdiv>
+      <img id="filterFunnel" src="media/filter-funnel.svg" height="50%" alt="filterFunnel">
-        <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>
+
+    <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>
@@ -53,58 +81,149 @@
       </popup>
       
       <popup id="settingsPopup">
-        <blur-background id="blurBackgroundSettingsPopup" onclick="
+        <blur-background id="blurBackgroundSettingsPopup" onclick="settingsPopup.style.display = 'none';"></blur-background>
-    settingsPopup.style.display = 'none';"></blur-background>
         <popup-window>
-          <popup-title>Settings</popup-title>
+          <border-bar>
+            <popup-title>Settings</popup-title>
+            <popup-close onclick="settingsPopup.style.display = 'none'">&times</popup-close>
+          </border-bar>
           <popup-content>
-            <div>
+
-              <p class="title">Download Location:</p>
+            <div class="popup-section">
-              <span id="downloadLocation"></span>
+              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>
+
-              <p class="title">API-URI</p>
+            <div class="popup-section">
-              <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
+              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>
+
-              <span class="title">Komga</span>
+            <div class="popup-section">
-              <div>Configured: <span id="komgaConfigured">✅❌</span></div>
+              LIBRARY CONNECTORS
-              <label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
+              <div class="section-content">
-              <label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
+                <div class="section-item">
-              <label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
+                  <span class="title"><img src='connector-icons/komga.svg'>Komga<connector-configured id="komgaConfigured"></connector-configured></span>
-            </div>
+                  <label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
-            <div>
+                  <label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
-              <span class="title">Kavita</span>
+                  <label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
-              <div>Configured: <span id="kavitaConfigured">✅❌</span></div>
+                  <div class="section-buttons-container">
-              <label for="kavitaUrl"></label><input placeholder="URL" id="kavitaUrl" type="text">
+                      <span onclick="TestKomga(komgaUrl.value, utf8_to_b64(`${komgaUsername.value}:${komgaPassword.value}`))" class='section-button' id="test-connector">Test</span>
-              <label for="kavitaUsername"></label><input placeholder="Username" id="kavitaUsername" type="text">
+                      <span onclick="ClearKomga()" class='section-button' id="reset">Reset</span>
-              <label for="kavitaPassword"></label><input placeholder="Password" id="kavitaPassword" type="password">
+                      <span onclick="UpdateKomga(komgaUrl.value, utf8_to_b64(`${komgaUsername.value}:${komgaPassword.value}`))" class='section-button'>Apply</span>
-            </div>
+                  </div>
-            <div>
+                </div>
-              <span class="title">Gotify</span>
+                <div class="section-item">
-              <div>Configured: <span id="gotifyConfigured">✅❌</span></div>
+                  <span class="title"><img src='connector-icons/kavita.png'>Kavita<connector-configured id="kavitaConfigured"></connector-configured></span>
-              <label for="gotifyUrl"></label><input placeholder="URL" id="gotifyUrl" type="text">
+                  <label for="kavitaUrl"></label><input placeholder="URL" id="kavitaUrl" type="text">
-              <label for="gotifyAppToken"></label><input placeholder="App-Token" id="gotifyAppToken" type="text">
+                  <label for="kavitaUsername"></label><input placeholder="Username" id="kavitaUsername" type="text">
-            </div>
+                  <label for="kavitaPassword"></label><input placeholder="Password" id="kavitaPassword" type="password">
-            <div>
+                  <div class="section-buttons-container">
-              <span class="title">LunaSea</span>
+                    <span onclick="TestKavita(kavitaUrl.value, kavitaUsername.value, kavitaPassword.value)" class='section-button' id="test-connector">Test</span>
-              <div>Configured: <span id="lunaseaConfigured">✅❌</span></div>
+                    <span onclick="ClearKavita()" class='section-button' id="reset">Reset</span>
-              <label for="lunaseaWebhook"></label><input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text">
+                    <span onclick="UpdateKavita(kavitaUrl.value, kavitaUsername.value, kavitaPassword.value)" class='section-button'>Apply</span>
-            </div>
+                </div>
-            <div>
+                </div>
-              <span class="title">Ntfy</span>
+              </div>
-              <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="checkbox" id="mangaHoverCheckbox" name="css-style" value="style_mangahover.css">
-              <label for="css-style"> Show manga titles and sources on hover</label><br>
-            </div>
-            <div>
-              <input type="submit" value="Update" onclick="UpdateSettings()">
             </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>
 		
@@ -129,18 +248,39 @@
           </publication-details>
         </publication-viewer>
       </popup>
-      
+
       <popup id="jobStatusView">
-        <blur-background id="blurBackgroundJobStatus" onclick="jobStatusView.style.display= 'none';"></blur-background>
+        <blur-background id="blurBackgroundSettingsPopup" onclick="jobStatusView.style.display = 'none';"></blur-background>
         <popup-window>
-          <div>
+          <border-bar>
-            <div id="jobStatusRunning" style="border-right: 1px solid gray;"></div>
+            <popup-title>Jobs</popup-title>
-          </div>
+            <popup-close onclick="jobStatusView.style.display = 'none'">&times</popup-close>
-          <div>
+          </border-bar>
-            <div id="jobStatusWaiting" style="border-left: 1px solid gray;"></div>
+          <popup-content>
-          </div>
+
+            <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>
-      </popup>
     </viewport>
 	  
     <footer>
@@ -153,7 +293,8 @@
       <p id="madeWith">Made with Blåhaj 🦈</p>
     </footer> 
   </wrapper>
-  
+
+  <script src="defaultApiUri.js"></script>
   <script src="apiConnector.js"></script>
   <script src="interaction.js"></script>
 </body>

Website/interaction.js

@@ -5,16 +5,26 @@ let notificationConnectorTypes = [];
 let libraryConnectorTypes = [];
 let selectedManga;
 let selectedJob;
+let searchMatch;
+
+let connectorMatch = [];
+let connectorNameMatch;
+let statusMatch = [];
+let statusNameMatch = [];
 
 const searchBox = document.querySelector("#searchbox");
 const settingsPopup = document.querySelector("#settingsPopup");
+const filterBox = document.querySelector("#filterBox");
 const settingsCog = document.querySelector("#settingscog");
+const filterFunnel = document.querySelector("#filterFunnel");
 const tasksContent = document.querySelector("content");
 const createMonitorTaskButton = document.querySelector("#createMonitoJobButton");
 const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterJobButton");
 const startJobButton = document.querySelector("#startJobButton");
 const cancelJobButton = document.querySelector("#cancelJobButton");
 const deleteJobButton = document.querySelector("#deleteJobButton");
+
+//Manga viewer popup
 const mangaViewerPopup = document.querySelector("#publicationViewerPopup");
 const mangaViewerWindow = document.querySelector("publication-viewer");
 const mangaViewerDescription = document.querySelector("#publicationViewerDescription");
@@ -22,30 +32,55 @@ const mangaViewerName = document.querySelector("#publicationViewerName");
 const mangaViewerTags = document.querySelector("#publicationViewerTags");
 const mangaViewerAuthor = document.querySelector("#publicationViewerAuthor");
 const mangaViewCover = document.querySelector("#pubviewcover");
-const settingDownloadLocation = document.querySelector("#downloadLocation");
+
+//General Rate Limits
+const defaultRL = document.querySelector("#defaultRL");
+const coverRL = document.querySelector("#coverRL");
+const imageRL = document.querySelector("#imageRL");
+const infoRL = document.querySelector("#infoRL");
+
+//MangaDex Rate Limits
+const mDexFeedRL = document.querySelector("#mDexFeedRL");
+const mDexImageRL = document.querySelector("#mDexImageRL");
+
+//Komga
 const settingKomgaUrl = document.querySelector("#komgaUrl");
 const settingKomgaUser = document.querySelector("#komgaUsername");
 const settingKomgaPass = document.querySelector("#komgaPassword");
+
+//Kavita
 const settingKavitaUrl = document.querySelector("#kavitaUrl");
 const settingKavitaUser = document.querySelector("#kavitaUsername");
 const settingKavitaPass = document.querySelector("#kavitaPassword");
+
+//Gotify
 const settingGotifyUrl = document.querySelector("#gotifyUrl");
 const settingGotifyAppToken = document.querySelector("#gotifyAppToken");
+
+//Lunasea
 const settingLunaseaWebhook = document.querySelector("#lunaseaWebhook");
+
+//Ntfy
 const settingNtfyEndpoint = document.querySelector("#ntfyEndpoint");
 const settingNtfyAuth = document.querySelector("#ntfyAuth");
+
+//Connector Configured
 const settingKomgaConfigured = document.querySelector("#komgaConfigured");
 const settingKavitaConfigured = document.querySelector("#kavitaConfigured");
 const settingGotifyConfigured = document.querySelector("#gotifyConfigured");
 const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured");
 const settingNtfyConfigured = document.querySelector("#ntfyConfigured");
+
+const settingUserAgent = document.querySelector("#userAgent");
 const settingApiUri = document.querySelector("#settingApiUri");
-const settingMangaHoverCheckbox = document.querySelector("#mangaHoverCheckbox");
+const settingCSSStyle = document.querySelector('#cssStyle');
 const newMangaPopup = document.querySelector("#newMangaPopup");
 const newMangaConnector = document.querySelector("#newMangaConnector");
 const newMangaTitle = document.querySelector("#newMangaTitle");
 const newMangaResult = document.querySelector("#newMangaResult");
 const newMangaTranslatedLanguage = document.querySelector("#newMangaTranslatedLanguage");
+
+//Jobs
 const jobsRunningTag = document.querySelector("#jobsRunningTag");
 const jobsQueuedTag = document.querySelector("#jobsQueuedTag");
 const loaderdiv = document.querySelector('#loaderdiv');
@@ -58,49 +93,161 @@ function Setup(){
     loaderdiv.style.display = 'none';
     
     GetAvailableNotificationConnectors().then((json) => {
+      //console.log(json);
       json.forEach(connector => {
         notificationConnectorTypes[connector.Key] = connector.Value;
       });
     });
 
     GetAvailableLibraryConnectors().then((json) => {
+      //console.log(json);
       json.forEach(connector => {
         libraryConnectorTypes[connector.Key] = connector.Value;
       });
     });
 
     GetAvailableControllers().then((json) => {
+      //console.log(json);
       newMangaConnector.replaceChildren();
-      json.forEach(connector => {        
+      connectorFilterBox = document.querySelector("#connectorFilterBox");
+      connectorFilterBox.replaceChildren();
+      json.forEach(connector => {
+        //Add the connector to the New Manga dropdown        
         var option = document.createElement('option');
         option.value = connector;
         option.innerText = connector;
         newMangaConnector.appendChild(option);
+
+        //Add the connector to the filter box
+        connectorFilter = document.createElement('connector-name');
+        connectorFilter.innerText = connector;
+        connectorFilter.className = "pill";
+        connectorFilter.style.backgroundColor = stringToColour(connector);
+
+        connectorFilter.addEventListener("click", (event) => {
+          ToggleFilterConnector(connector, event);
+        });
+        connectorFilterBox.appendChild(connectorFilter);
       });
     });
+
+    //Add the publication status options to the filter bar
+    publicationStatusOptions = ["Ongoing", "Completed", "On Hiatus", "Cancelled", "Upcoming", "Status Unavailable"]; 
+    statusFilterBox = document.querySelector("#statusFilterBox");
+    statusFilterBox.replaceChildren();
+    publicationStatusOptions.forEach(publicationStatus => {
+      var releaseStatus = document.createElement('status-filter');
+      releaseStatus.innerText = publicationStatus;
+      releaseStatus.setAttribute("release-status", publicationStatus);
+      releaseStatus.addEventListener("click", (event) => {
+        ToggleFilterStatus(publicationStatus, event);
+      });
+
+      statusFilterBox.appendChild(releaseStatus);
+    });
     
     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');
-      }
     });
+    GetRateLimits().then((json) => {
+      defaultRL.placeholder = json.Default + ' Requests/Minute';
+      coverRL.placeholder = json.MangaCover + ' Requests/Minute';
+      imageRL.placeholder = json.MangaImage + ' Requests/Minute';
+      infoRL.placeholder = json.MangaInfo + ' Requests/Minute';
+      mDexFeedRL.placeholder = json.MangaDexFeed + ' Requests/Minute';
+      mDexImageRL.placeholder = json.MangaDexImage + ' Requests/Minute';
+    });
+
+    //If the cssStyle key isn't in the local storage of the browser, then set the css style to the default and load the page
+    //Otherwise get the style key from storage and set it.
+    if (!localStorage.getItem('cssStyle')) {
+      localStorage.setItem('cssStyle', 'card_compact');
+      document.getElementById('librarystyle').setAttribute('href', 'styles/' + localStorage.getItem('cssStyle') + '.css');
+      document.getElementById('card_compact').selected = true;
+    } else {
+      css_style = localStorage.getItem('cssStyle');
+      document.getElementById('librarystyle').setAttribute('href', 'styles/' + css_style + '.css');
+      document.getElementById(css_style).selected = true;
+    }
     setInterval(() => {
       UpdateJobs();
-    }, 1000);
+    }, 5000);
   });
+  //Clear the previous values if any exist.
+  searchBox.value = "";
+  connectorMatch.length = 0;
+  statusMatch.length = 0;
 }
 Setup();
 
+function ToggleFilterConnector(connector, event) {
+  //console.log("Initial Array:");
+  //console.log(connectorMatch);
+  if (connectorMatch.includes(connector)) {
+    idx = connectorMatch.indexOf(connector);
+    connectorMatch.splice(idx, 1);
+    event.target.style.outline = 'none';
+    event.target.style.outlineOffset = "0px";
+  } else {
+    connectorMatch.push(connector);
+    event.target.style.outline = '4px solid var(--secondary-color)';
+    event.target.style.outlineOffset = '3px';
+  }
+  //console.log("Final Array");
+  //console.log(connectorMatch);
+  FilterResults();
+}
+
+function ToggleFilterStatus(status, event) {
+  //console.log("Initial Array:");
+  //console.log(statusMatch);
+  if (statusMatch.includes(status)) {
+    idx = statusMatch.indexOf(status);
+    statusMatch.splice(idx, 1);
+    event.target.style.outline = 'none';
+    event.target.style.outlineOffset = "0px";
+  } else {
+    statusMatch.push(status);
+    event.target.style.outline = '4px solid var(--secondary-color)';
+    event.target.style.outlineOffset = '3px';
+  }
+  //console.log("Final Array");
+  //console.log(statusMatch);
+  FilterResults();
+}
+
+function ClearFilter() {
+  searchBox.value = "";
+  statusMatch.length = 0;
+  connectorMatch.length = 0;
+  FilterResults();
+
+  //Get rid of the outlines
+  connectorFilterBox = document.querySelector("#connectorFilterBox");
+  connectorFilterBox.childNodes.forEach(connector => {
+    if (connector.nodeName.toLowerCase() == 'connector-name') {
+      connector.style.outline = 'none';
+      connector.style.outlineOffset = "0px";
+    }
+  });
+
+  statusFilterBox = document.querySelector("#statusFilterBox");
+  statusFilterBox.childNodes.forEach(publicationStatus => {
+    if (publicationStatus.nodeName.toLowerCase() == 'status-filter') {
+      publicationStatus.style.outline = 'none';
+      publicationStatus.style.outlineOffset = "0px";
+    }
+  });
+}
+
+settingCSSStyle.addEventListener("change", (event) => {
+  localStorage.setItem('cssStyle', settingCSSStyle.value);
+  document.getElementById('librarystyle').setAttribute('href', 'styles/' + localStorage.getItem('cssStyle') + '.css');
+}); 
+
 function ResetContent(){
     //Delete everything
     tasksContent.replaceChildren();
@@ -134,7 +281,11 @@ function ShowNewMangaSearch(){
   newMangaResult.replaceChildren();
 }
 
-newMangaTitle.addEventListener("keypress", (event) => { if(event.key === "Enter") GetNewMangaItems();})
+newMangaTitle.addEventListener("keypress", (event) => { if(event.key === "Enter") GetNewMangaItems();});
+
+
+
+
 function GetNewMangaItems(){
   if(newMangaTitle.value.length < 4)
     return;
@@ -186,31 +337,31 @@ function CreateManga(manga, connector){
 
     //Create the publication status indicator
     var releaseStatus = document.createElement('publication-status');
-    var statusTooltip = document.createElement('status-tooltip');
+    releaseStatus.setAttribute("release-status", manga.releaseStatus);
-    if (manga.releaseStatus == 0) {
+    switch(manga.releaseStatus){
-      releaseStatus.style.backgroundColor = 'limegreen';
+      case 0:
-      statusTooltip.innerText = "Ongoing"
+        releaseStatus.setAttribute("release-status", "Ongoing");
-    }else if(manga.releaseStatus == 1){
+        break;
-      releaseStatus.style.backgroundColor = 'blueviolet';
+      case 1:
-      statusTooltip.innerText = "Completed"
+        releaseStatus.setAttribute("release-status", "Completed");
-    } else if (manga.releaseStatus == 2) {
+        break;
-      releaseStatus.style.backgroundColor = 'darkorange';
+      case 2:
-      statusTooltip.innerText = "On Hiatus"
+        releaseStatus.setAttribute("release-status", "On Hiatus");
-    } else if (manga.releaseStatus == 3) {
+        break;
-      releaseStatus.style.backgroundColor = 'firebrick';
+      case 3:
-      statusTooltip.innerText = "Cancelled"
+        releaseStatus.setAttribute("release-status", "Cancelled");
-    } else if (manga.releaseStatus == 4) {
+        break;
-      releaseStatus.style.backgroundColor = 'aqua';
+      case 4:
-      statusTooltip.innerText = "Upcoming";
+        releaseStatus.setAttribute("release-status", "Upcoming");
-    } else {
+        break;
-      releaseStatus.style.backgroundColor = 'gray';
+      default:
-        statusTooltip.innerText = 'Status Unavailable';
+        releaseStatus.setAttribute("release-status", "Status Unavailable");
+        break;
     }
-    releaseStatus.appendChild(statusTooltip);         //Append the tooltip to the indicator circle
-    mangaName.appendChild(releaseStatus);                  //Append the release status indicator to the info block
 
     info.appendChild(mangaName);
     mangaElement.appendChild(info);
+    mangaElement.appendChild(releaseStatus);                  //Append the release status indicator to the publication element
     return mangaElement;
 }
 
@@ -218,7 +369,6 @@ createMonitorJobButton.addEventListener("click", () => {
   CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
   UpdateJobs();
   mangaViewerPopup.style.display = "none";
-  ResetContent();
 });
 startJobButton.addEventListener("click", () => {
   StartJob(selectedJob.id);
@@ -232,7 +382,6 @@ deleteJobButton.addEventListener("click", () => {
   RemoveJob(selectedJob.id);
   UpdateJobs();
   mangaViewerPopup.style.display = "none";
-  ResetContent();
 });
 
 function ShowMangaWindow(job, manga, event, add){
@@ -284,25 +433,72 @@ function HidePublicationPopup(){
 searchBox.addEventListener("keyup", () => FilterResults());
 //Filter shown jobs
 function FilterResults(){
-    if(searchBox.value.length > 0){
+  //For each publication   
-        tasksContent.childNodes.forEach(publication => {
+  tasksContent.childNodes.forEach(publication => {
-            publication.childNodes.forEach(item => {
+    //If the search box isn't empty check that the title contains the searchbox content. If it does then
-                if(item.nodeName.toLowerCase() == "publication-information"){
+    //'searchMatch' is true and the manga is shown. If the search box is empty, then consider this field
-                    item.childNodes.forEach(information => {
+    //to be true anyways.
-                        if(information.nodeName.toLowerCase() == "publication-name"){
+    if (searchBox.value.length > 0) {
-                            if(!information.textContent.toLowerCase().includes(searchBox.value.toLowerCase())){
+      publication.childNodes.forEach(item => {
-                                publication.style.display = "none";
+        if (item.nodeName.toLowerCase() == "publication-information"){
-                            }else{
+          item.childNodes.forEach(information => {
-                                publication.style.display = "initial";
+            if (information.nodeName.toLowerCase() == "publication-name") {
-                            }
+              if (information.textContent.toLowerCase().includes(searchBox.value.toLowerCase())){
-                        }
+                searchMatch = 1;
-                    });
+              } else {
-                }
+                searchMatch = 0;
-            });
+              }
-        });
+            }
-    }else{
+          });
-        tasksContent.childNodes.forEach(publication => publication.style.display = "initial");
+        }
+      });
+    } else {  
+      searchMatch = 1;
     }
+
+    //If the array connectorMatch isn't empty then check that the connector matches one of the ones
+    //in the array
+    if (connectorMatch.length > 0) {
+      publication.childNodes.forEach(item => {
+        if (item.nodeName.toLowerCase() == "publication-information"){
+          item.childNodes.forEach(information => {
+            if (information.nodeName.toLowerCase() == "connector-name") {
+              if (connectorMatch.includes(information.textContent)){
+                connectorNameMatch = 1;
+              } else {
+                connectorNameMatch = 0;
+              }
+            }
+          });
+        }
+      });
+    } else {
+      connectorNameMatch = 1;
+    }
+
+    //If the array statusMatch isn't empty then check that the status matches one of the ones
+    //in the array
+    if (statusMatch.length > 0) {
+      publication.childNodes.forEach(item => {
+        if (item.nodeName.toLowerCase() == "publication-status"){
+          if (statusMatch.includes(item.getAttribute('release-status'))) {
+            statusNameMatch = 1;
+          } else {
+            statusNameMatch = 0;
+          }
+        }
+      });
+    } else {
+      statusNameMatch = 1;
+    }
+
+    //If all of the filtering conditions are met then show the manga, otherwise hide it.
+    if (searchMatch && connectorNameMatch && statusNameMatch) {
+      publication.style.display = 'initial';
+    } else {
+      publication.style.display = 'none';
+    }
+  });
 }
 
 settingsCog.addEventListener("click", () => {
@@ -310,7 +506,11 @@ settingsCog.addEventListener("click", () => {
   settingsPopup.style.display = "flex";
 });
 
-settingKomgaUrl.addEventListener("keypress", (event) => { { if(event.key === "Enter") UpdateSettings(); } });
+filterFunnel.addEventListener("click", () => {
+  filterBox.classList.toggle("animate");
+});
+
+settingKomgaUrl.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingKomgaUser.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingKomgaPass.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingKavitaUrl.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
@@ -321,14 +521,23 @@ settingGotifyAppToken.addEventListener("keypress", (event) => { if(event.key ===
 settingLunaseaWebhook.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingNtfyEndpoint.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingNtfyAuth.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
+settingUserAgent.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 settingApiUri.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
 
+defaultRL.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings();}); 
+coverRL.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings();}); 
+imageRL.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings();}); 
+infoRL.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings();}); 
+mDexFeedRL.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings();}); 
+mDexImageRL.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings();}); 
+
+
 function OpenSettings(){
-  settingGotifyConfigured.innerText = "❌";
+  settingGotifyConfigured.setAttribute("configuration", "Not Configured");
-  settingLunaseaConfigured.innerText = "❌";
+  settingLunaseaConfigured.setAttribute("configuration", "Not Configured");
-  settingNtfyConfigured.innerText = "❌";
+  settingNtfyConfigured.setAttribute("configuration", "Not Configured");
-  settingKavitaConfigured.innerText = "❌";
+  settingKavitaConfigured.setAttribute("configuration", "Not Configured");
-  settingKomgaConfigured.innerText = "❌";
+  settingKomgaConfigured.setAttribute("configuration", "Not Configured");
   settingKomgaUrl.value = "";
   settingKomgaUser.value = "";
   settingKomgaPass.value = "";
@@ -340,34 +549,41 @@ function OpenSettings(){
   settingLunaseaWebhook.value = "";
   settingNtfyAuth.value = "";
   settingNtfyEndpoint.value = "";
+  settingUserAgent.value = "";
   settingApiUri.value = "";
-  settingMangaHoverCheckbox.checked = false;
+  defaultRL.value = "";
+  coverRL.value = "";
+  imageRL.value = "";
+  infoRL.value = "";
+  mDexFeedRL.value = "";
+  mDexImageRL.value = "";
   
   GetSettings().then((json) => {
     //console.log(json);
-    settingDownloadLocation.innerText = json.downloadLocation;
     settingApiUri.placeholder = apiUri;
+    settingUserAgent.placeholder = json.userAgent;
     //console.log(json.styleSheet);
-    if (json.styleSheet == 'hover') {
+  });
-      settingMangaHoverCheckbox.checked = true;
+  GetRateLimits().then((json) => {
-      document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css');
+    defaultRL.placeholder = json.Default + ' Requests/Minute';
-    } else {
+    coverRL.placeholder = json.MangaCover + ' Requests/Minute';
-      settingMangaHoverCheckbox.checked = false;
+    imageRL.placeholder = json.MangaImage + ' Requests/Minute';
-      document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css');
+    infoRL.placeholder = json.MangaInfo + ' Requests/Minute';
-    }
+    mDexFeedRL.placeholder = json.MangaDexFeed + ' Requests/Minute';
+    mDexImageRL.placeholder = json.MangaDexImage + ' Requests/Minute';
   });
   GetLibraryConnectors().then((json) => {
     //console.log(json);
     json.forEach(connector => {
       switch(libraryConnectorTypes[connector.libraryType]){
         case "Kavita":
-          settingKavitaConfigured.innerText = "✅";
+          settingKavitaConfigured.setAttribute("configuration", "Active");
           settingKavitaUrl.placeholder = connector.baseUrl;
           settingKavitaUser.placeholder = "***";
           settingKavitaPass.placeholder = "***";
           break;
         case "Komga":
-          settingKomgaConfigured.innerText = "✅";
+          settingKomgaConfigured.setAttribute("configuration", "Active");
           settingKomgaUrl.placeholder = connector.baseUrl;
           settingKomgaUser.placeholder = "***";
           settingKomgaPass.placeholder = "***";
@@ -380,20 +596,19 @@ function OpenSettings(){
     });
   });
   GetNotificationConnectors().then((json) => {
-    //console.log(json);
     json.forEach(connector => {
       switch(notificationConnectorTypes[connector.notificationConnectorType]){
         case "Gotify":
           settingGotifyUrl.placeholder = connector.endpoint;
           settingGotifyAppToken.placeholder = "***";
-          settingGotifyConfigured.innerText = "✅";
+          settingGotifyConfigured.setAttribute("configuration", "Active");
           break;
         case "LunaSea":
-          settingLunaseaConfigured.innerText = "✅";
+          settingLunaseaConfigured.setAttribute("configuration", "Active");
           settingLunaseaWebhook.placeholder = connector.id;
           break;
         case "Ntfy":
-          settingNtfyConfigured.innerText = "✅";
+          settingNtfyConfigured.setAttribute("configuration", "Active");
           settingNtfyEndpoint.placeholder = connector.endpoint;
           settingNtfyAuth.placeholder = "***";
           break;
@@ -406,21 +621,49 @@ function OpenSettings(){
   });
 }
 
+//Functions for clearing/resetting connectors in the settings pop-up
+function ClearKomga(){
+  settingKomgaUrl.value = "";
+  settingKomgaUser.value = "";
+  settingKomgaPass.value = "";
+  settingKomgaConfigured.setAttribute("configuration", "Not Configured");
+  ResetKomga();
+}
+
+function ClearKavita(){
+  settingKavitaUrl.value = "";
+  settingKavitaUser.value = "";
+  settingKavitaPass.value = "";
+  settingKavitaConfigured.setAttribute("configuration", "Not Configured");
+  ResetKavita();
+}
+
+function ClearGotify(){
+  settingGotifyUrl.value = "";
+  settingGotifyAppToken.value = ""
+  settingGotifyConfigured.setAttribute("configuration", "Not Configured");
+  ResetGotify();
+}
+
+function ClearLunasea(){
+  settingLunaseaWebhook.value = "";
+  settingLunaseaConfigured.setAttribute("configuration", "Not Configured");
+  ResetLunaSea();
+}
+
+function ClearNtfy(){
+  settingNtfyEndpoint.value = "";
+  settingNtfyAuth.value = "";
+  settingNtfyConfigured.setAttribute("configuration", "Not Configured");
+  ResetNtfy();
+}
+
 function UpdateSettings(){
   if(settingApiUri.value != ""){
     apiUri = settingApiUri.value;
     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 != "" &&
@@ -448,8 +691,38 @@ function UpdateSettings(){
     UpdateNtfy(settingNtfyEndpoint.value, settingNtfyAuth.value);
   }
   
-  OpenSettings();
+  if(settingUserAgent.value != ""){
-  Setup();
+      UpdateUserAgent(settingUserAgent.value);
+  }
+
+  if (defaultRL.value != "") {
+    UpdateRateLimit(0, defaultRL.value);
+  }
+
+  if (coverRL.value != "") {
+    UpdateRateLimit(3, coverRL.value);
+  }
+
+  if (imageRL.value != "") {
+    UpdateRateLimit(2, imageRL.value);
+  }
+
+  if (infoRL.value != "") {
+    UpdateRateLimit(6, infoRL.value);
+  }
+
+  if (mDexFeedRL.value != "") {
+    UpdateRateLimit(1, mDexFeedRL.value);
+  }
+
+  if (mDexImageRL.value != "") {
+    UpdateRateLimit(5, mDexImageRL.value);
+  }
+  
+  setTimeout(() => {
+      OpenSettings();
+      Setup();
+  }, 100)
 }
 
 function utf8_to_b64(str) {
@@ -461,14 +734,6 @@ function UpdateJobs(){
   GetMonitorJobs().then((json) => {
     if(monitoringJobsCount != json.length){
       ResetContent();
-      //console.log(json);
-      json.forEach(job => {
-        var mangaView = CreateManga(job.manga, job.mangaConnector.name);
-        mangaView.addEventListener("click", (event) => {
-          ShowMangaWindow(job, job.manga, event, false);
-        });
-        tasksContent.appendChild(mangaView);
-      });
       monitoringJobsCount = json.length;
     }
   });
@@ -528,39 +793,44 @@ function createJob(jobjson){
   
   
   var wrapper = document.createElement("div");
-  wrapper.className = "jobWrapper";
+  wrapper.className = "section-item";
   wrapper.id = GetValidSelector(jobjson.id);
   
   var image = document.createElement("img");
   image.className = "jobImage";
   image.src = GetCoverUrl(manga.internalId);
   wrapper.appendChild(image);
-  
+
+  var details = document.createElement("div");
+  details.className = 'jobDetails';
+
   var title = document.createElement("span");
   title.className = "jobTitle";
   if(jobjson.chapter != null)
     title.innerText = `${manga.sortName} - ${jobjson.chapter.fileName}`;
   else if(jobjson.manga != null)
     title.innerText = manga.sortName;
-  wrapper.appendChild(title);
+  details.appendChild(title);
   
   var progressBar = document.createElement("progress");
   progressBar.className = "jobProgressBar";
   progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`;
-  wrapper.appendChild(progressBar);
+  details.appendChild(progressBar);
   
   var progressSpan = document.createElement("span");
   progressSpan.className = "jobProgressSpan";
   progressSpan.id = `jobProgressSpan${GetValidSelector(jobjson.id)}`;
-  progressSpan.innerText = "0% 00:00:00";
+  progressSpan.innerText = "Pending...";
-  wrapper.appendChild(progressSpan);
+  details.appendChild(progressSpan);
   
   var cancelSpan = document.createElement("span");
   cancelSpan.className = "jobCancel";
   cancelSpan.innerText = "Cancel";
   cancelSpan.addEventListener("click", () => CancelJob(jobjson.id));
-  wrapper.appendChild(cancelSpan);
+  details.appendChild(cancelSpan);
   
+  wrapper.appendChild(details);
+
   return wrapper;
 }
 
@@ -603,4 +873,4 @@ const stringToColour = (str) => {
     colour += value.toString(16).padStart(2, '0')
   }
   return colour
-}
+}

Website/media/filter-funnel.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 971.986 971.986"
+	 xml:space="preserve">
+<g>
+	<path d="M370.216,459.3c10.2,11.1,15.8,25.6,15.8,40.6v442c0,26.601,32.1,40.101,51.1,21.4l123.3-141.3
+		c16.5-19.8,25.6-29.601,25.6-49.2V500c0-15,5.7-29.5,15.8-40.601L955.615,75.5c26.5-28.8,6.101-75.5-33.1-75.5h-873
+		c-39.2,0-59.7,46.6-33.1,75.5L370.216,459.3z"/>
+</g>
+</svg>

Website/styles/base.css

@@ -0,0 +1,960 @@
+:root{
+    --background-color: #030304;
+    --second-background-color: white;
+    --primary-color: #f5a9b8;
+    --secondary-color:  #5bcefa;
+    --blur-background: rgba(245, 169, 184, 0.58);
+    --accent-color: #fff;
+    /* --primary-color: green;
+    --secondary-color: gold;
+    --blur-background: rgba(86, 131, 36, 0.8);
+    --accent-color: olive; */
+    --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%;
+    cursor: grab;
+}
+
+spacer{
+    flex-grow: 1;
+}
+
+filter-box {
+    display: none;
+    align-self: center;
+    flex-direction: column;
+    position: relative;
+
+    margin: 10px;
+    background-color: var(--second-background-color);
+    border-style: solid;
+    border-color: var(--primary-color);
+    border-width: 2px;
+    border-radius: 15px;
+    min-width: 300px;
+    width: 50%;
+    overflow: hidden;
+    max-height: 50%;
+    height: 600px;
+}
+
+filter-box.animate {
+    display: flex;
+}
+
+filter-box border-bar popup-title{
+    font-size: 12pt;
+}
+
+filter-box border-bar popup-close {
+    height: 20px;
+    width: 20px;
+    font-size: 12pt;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+border-bar-button.clearFilter{
+    font-weight: bold;
+    margin: 0px 10px 10px 10px;
+    border-color: lightgray;
+    color: gray;
+    align-content: center;
+    justify-content: center;
+}
+
+border-bar-button.clearFilter:hover {
+    background-color: red;
+    border-color: var(--second-background-color);
+    color: var(--second-background-color);
+}
+
+status-filter {
+    display: block;
+    margin: 10px;
+
+    /*Text Properties*/
+    font-size:10pt;
+    font-weight:bold;
+    color:white;
+    text-align: center;
+
+    /*Size*/
+    padding: 3px 8px;
+    border-radius: 6px;
+    border: 0px;
+    background-color: inherit;
+
+    cursor: pointer;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+status-filter[release-status="Ongoing"]{
+    background-color: limegreen;
+}
+
+status-filter[release-status="Completed"]{
+    background-color: blueviolet;
+}
+
+status-filter[release-status="On Hiatus"]{
+    background-color: darkorange;
+}
+
+status-filter[release-status="Cancelled"]{
+    background-color: firebrick;
+}
+
+status-filter[release-status="Upcoming"]{
+    background-color: aqua;
+}
+
+status-filter[release-status="Status Unavailable"]{
+    background-color: gray;
+}
+
+
+searchdiv{
+    display: flex;
+    width: 100%;
+}
+
+#searchbox {
+    display: flex;
+    padding: 3px 5px;
+    margin: 5px;
+    border-style: solid;
+    border-width: 2px;
+    border-radius: 10px;
+    font-size: 12pt;   
+    outline: none;
+    border-color: lightgray;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+#searchbox:focus {
+    border-color: var(--secondary-color);
+}
+
+.pill {
+    flex-grow: 0;
+    height: 14pt;
+    font-size: 12pt;
+    border-radius: 9pt;
+    background-color: var(--primary-color);
+    padding: 2pt 17px;
+    color: black;
+}
+
+#connectorFilterBox .pill {
+    margin: 10px;
+    cursor: pointer;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+#settingscog {
+    cursor: pointer;
+    margin: 0px 30px;
+    margin-left: 15px;
+    height: 50%;
+    filter: invert(100%) sepia(0%) saturate(7465%) hue-rotate(115deg) brightness(116%) contrast(101%);
+}
+
+#filterFunnel {
+    cursor: pointer;
+    margin: 0px 15px;
+    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;
+    scrollbar-color: var(--accent-color) var(--primary-color);
+    scrollbar-width: thin;
+}
+
+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;
+}
+
+popup{
+    display: none;
+    width: 100%;
+    min-height: 100%;
+    top: 0;
+    left: 0;
+    position: fixed;
+    z-index: 2;
+    flex-direction: column;
+}
+
+border-bar {
+    display: flex;
+    flex-direction: row;
+    background-color: var(--primary-color);
+    color: var(--accent-color);
+    font-weight: bolder;
+    padding: 7px 5px;
+    margin:0;
+    align-items: center;
+    position: relative;
+    width: 100%;
+}
+
+popup-title {
+    font-size: 14pt;
+    display: flex;
+    margin-top: 3px;
+    margin-left: 5px;
+    color: var(--second-background-color);
+}
+
+popup-close {
+    border: none;
+    background-color: inherit;
+    color: var(--second-background-color);;
+    font-weight: inherit;
+    font-size: 27px;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    display: flex;
+    cursor: pointer;
+    margin-left: auto;
+    margin-right: 15px;
+    height: 32px;
+    width: 32px;
+    border-radius: 16px;
+    align-content: center;
+    justify-content: center;
+}
+
+popup-close:hover {
+    background-color: var(--secondary-color);
+}
+
+border-bar > .button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-right: 0;
+    margin-left: auto;
+}
+
+border-bar-button {
+    border-style: solid;
+    border-width: 2px;
+    background-color: inherit;
+    color: var(--second-background-color);
+    font-weight: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    display: flex;
+    cursor: pointer;
+    margin: 0px 5px;
+    padding: 5px 20px;
+    border-radius: 20px;
+    height: 20px;
+    align-items: center;
+    border-color: var(--accent-color);
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+border-bar-button:hover {
+    border-color: var(--secondary-color);
+}
+
+border-bar-button.primary {
+    background-color: var(--secondary-color);
+    color: var(--accent-color);
+    border-color: var(--primary-color);
+    margin-right: 10px;
+}
+
+border-bar-button.primary:hover {
+    border-color: var(--accent-color);
+}
+
+border-bar-button.section {
+    font-weight: bold;
+    color: darkgray;
+    border-color: darkgray;
+    text-align: center;
+    padding: 5px;
+    flex-grow: 1;
+    justify-content: center;
+}
+
+border-bar-button.section:hover {
+    color: var(--secondary-color);
+    border-color: var(--secondary-color);
+}
+
+
+popup popup-window {
+    position: absolute;
+    z-index: 3;
+    left: 10%;
+    top: 10%;
+    height: 80%;
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--second-background-color);
+    border-radius: 15px;
+    overflow: hidden;
+}
+
+popup#jobStatusView popup-window {
+    left: 20%;
+    top: 20%;
+    height: 60%;
+    width: 60%;
+}
+
+popup-content{
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    height: calc(100% - 60px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color:  var(--secondary-color) var(--second-background-color);
+}
+
+popup-content > .popup-section {
+    margin: 5px;
+    margin-bottom: 10px;
+    font-size: 10pt;
+    font-weight: 100;
+    display: block;
+    border-top-style: solid;
+    border-top-width: 1px;
+    border-top-color: lightgray;
+    width: calc(100%-10px);
+    padding: 10px;
+}
+
+.section-content {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.section-item {
+    display: flex;
+    flex-direction: column;
+    width: 22%;
+    min-width: 300px;
+    height: auto;
+    border-radius: 10px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: lightgray;
+    margin: 7px; 
+    padding: 5px;
+}
+
+.section-item.dyn-height {
+    height: fit-content;
+}
+
+.section-item > .title {
+    font-weight: bold;
+    vertical-align: bottom;
+    line-height: 32px;
+    font-size: 12pt;
+    width: 100%;
+}
+
+a:link {
+    color: inherit;
+    text-decoration: none;
+}
+
+a:visited {
+    color: inherit;
+    text-decoration: none;
+}
+
+a:hover {
+    color: inherit;
+    text-decoration: underline solid var(--secondary-color) 3px;
+}
+
+a:active {
+    color: inherit;
+    text-decoration: none;
+}
+
+.section-item > .title > img {
+    width: auto;
+    height: 32px;
+    margin: 5px;
+    vertical-align: middle;
+    border-radius: 5px;
+}
+
+.section-item > .title > connector-configured {
+    display:block;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    margin: 5px;
+    float: right;
+    top: 5px;
+    right: 5px;
+}
+
+.section-item > .title > connector-configured::after {
+    display: block;
+    content: attr(configuration);
+    float: right;
+    width: max-content;
+    width: -webkit-max-content;
+    width: -mox-max-content;
+    width: intrinsic;
+ 
+    visibility: hidden;
+
+    /*Text Properties*/
+    font-size:8pt;
+    font-weight:bold;
+    color:white;
+    text-align: right;
+
+    /*Size*/
+    padding: 0px 8px;
+    border-radius: 6px;
+    border: 0px;
+    background-color: inherit;
+}
+
+.section-item > .title > connector-configured:hover::after{
+    visibility:visible;
+} 
+
+.section-item > .title > connector-configured[configuration="Active"] {   
+    background-color: limegreen;
+}
+
+.section-item > .title > connector-configured[configuration="Not Configured"] {
+    background-color: gray;
+}
+
+.section-item > input {
+    margin: 2px; 
+    padding: 5px;
+    height: 20px;
+    border-radius: 10px;
+    border-style: solid;
+    outline: none;
+}
+.section-item > input:focus {
+    border-color: var(--secondary-color);
+}
+
+.section-item > row {
+    width: calc(100%-20px);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 5px;
+    margin-bottom: 5px;
+}
+
+.section-item > row > input {
+    margin-left: auto;
+    margin-right: 2px; 
+    padding: 5px;
+    height: 20px;
+    border-radius: 10px;
+    border-style: solid;
+    outline: none;
+    flex-grow: 0;
+    text-align: end;
+    float: right;
+    width: 200px;
+}
+.section-item > row > input:focus {
+    border-color: var(--secondary-color);
+}
+
+.section-item > row > select {
+    margin-left: auto;
+    margin-right: 2px; 
+    padding: 2px;
+    height: 30px;
+    border-radius: 10px;
+    border-style: solid;
+    outline: none;
+    flex-grow: 0;
+    text-align: end;
+    float: right;
+    width: 200px;
+}
+
+.section-item > row > select:focus {
+    border-color: var(--secondary-color);
+}
+
+.section-buttons-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    margin-left: auto;
+    margin-top: auto;
+    margin-bottom: 0;
+    margin-right: 0;
+}
+
+.section-buttons-container > .section-button {
+    font-size: 12px;
+    padding: 3px 10px;
+    margin: 3px;
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: lightgray;
+    font-weight: bold;
+    color: gray;
+    cursor: pointer;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+.section-button#reset:hover {
+    color: red;
+    border-color: red;
+}
+.section-buttons-container > .section-button:hover {
+    border-color: var(--secondary-color);
+    color: var(--secondary-color);
+}
+
+#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: var(--blur-background);
+    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); }
+}
+
+#jobStatusRunning > .section-item {
+    flex-direction: row;
+    height: 150px;
+    padding: 0;
+    overflow: hidden;
+}
+
+#jobStatusWaiting > .section-item {
+    flex-direction: row;
+    height: 150px;
+    padding: 0;
+    overflow: hidden;
+}
+
+.section-item > .jobImage {
+  height: 100%;
+  width: auto;
+  left: 0;
+  top: 0;
+  border-radius: 10px;
+}
+
+.jobDetails {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+}
+
+.section-item > .jobDetails > .jobTitle {
+  margin: 5px;
+  font-size: 11pt;
+  font-weight: bold;
+  text-wrap: wrap;
+}
+
+.section-item > .jobDetails > .jobProgressBar {
+  margin: 5px;
+  height: 10px;
+  border-radius: 7px;
+}
+
+.section-item > .jobDetails > .jobProgressSpan {
+    margin: 5px;
+    margin-left: auto;
+    margin-right: 5px;
+}
+
+.section-item > .jobDetails > .jobCancel {
+  margin-top: auto;
+  margin-bottom: 5px;
+  margin-left: auto;
+  margin-right: 5px;
+  font-size: 12pt;
+  color: var(--secondary-color);
+  cursor: pointer;
+}

Website/styles/card_compact.css

@@ -0,0 +1,159 @@
+#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 19px;
+    position: relative;
+    flex-shrink: 0;
+}
+
+publication::after{
+    content: '';
+    position: absolute;
+    left: 0; top: 0;
+    border-radius: 5px;
+    width: 100%; height: 100%;
+    background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2));
+}
+
+publication-information {
+    display: flex;
+    flex-direction: column;
+    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;
+}
+
+publication-name{
+    width: fit-content;
+    font-size: 16pt;
+    font-weight: bold;
+    color: white;
+}
+
+publication-status {
+    display:block;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    margin: 5px;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 2;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
+}
+
+publication-status::after {
+    content: attr(release-status);
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    visibility: hidden;
+
+    /*Text Properties*/
+    font-size:10pt;
+    font-weight:bold;
+    color:white;
+    text-align: center;
+
+    /*Size*/
+    padding: 3px 8px;
+    border-radius: 6px;
+    border: 0px;
+    background-color: inherit;
+}
+
+publication-status:hover::after{
+    visibility:visible;
+}
+
+
+publication-status[release-status="Ongoing"]{
+    background-color: limegreen;
+}
+
+publication-status[release-status="Completed"]{
+    background-color: blueviolet;
+}
+
+publication-status[release-status="On Hiatus"]{
+    background-color: darkorange;
+}
+
+publication-status[release-status="Cancelled"]{
+    background-color: firebrick;
+}
+
+publication-status[release-status="Upcoming"]{
+    background-color: aqua;
+}
+
+publication-status[release-status="Status Unavailable"]{
+    background-color: gray;
+}
+
+publication img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 0;
+    border-radius: 5px;
+}

Website/styles/card_hover.css

@@ -0,0 +1,172 @@
+#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 19px;
+    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%;
+    background: none;
+}
+
+publication-information {
+    display: none;
+    flex-direction: column;
+    justify-content: start;
+}
+
+publication-information * {
+    z-index: 1;
+    color: white;
+}
+
+connector-name{
+    width: fit-content;
+    margin: 10px 0;
+}
+
+publication-name{
+    width: fit-content;
+    font-size: 16pt;
+    font-weight: bold;
+}
+
+publication-status {
+    display:block;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    margin: 5px;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 2;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
+}
+
+publication-status::after {
+    content: attr(release-status);
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    visibility: hidden;
+
+    /*Text Properties*/
+    font-size:10pt;
+    font-weight:bold;
+    color:white;
+    text-align: center;
+
+    /*Size*/
+    padding: 3px 8px;
+    border-radius: 6px;
+    border: 0px;
+    background-color: inherit;
+}
+
+publication-status:hover::after{
+    visibility:visible;
+}
+
+
+publication-status[release-status="Ongoing"]{
+    background-color: limegreen;
+}
+
+publication-status[release-status="Completed"]{
+    background-color: blueviolet;
+}
+
+publication-status[release-status="On Hiatus"]{
+    background-color: darkorange;
+}
+
+publication-status[release-status="Cancelled"]{
+    background-color: firebrick;
+}
+
+publication-status[release-status="Upcoming"]{
+    background-color: aqua;
+}
+
+publication-status[release-status="Status Unavailable"]{
+    background-color: gray;
+}
+
+
+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;
+}

Website/styles/style_default.css

@@ -1,696 +0,0 @@
-: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::after{
-    content: '';
-    position: absolute;
-    left: 0; top: 0;
-    border-radius: 5px;
-    width: 100%; height: 100%;
-    background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2));
-}
-
-publication-information {
-    display: flex;
-    flex-direction: column;
-    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;
-}
-
-publication-name{
-    width: fit-content;
-    font-size: 16pt;
-    font-weight: bold;
-}
-
-publication-status {
-    display: inline-block;
-    height: 10px;
-    width: 10px;
-    border-radius: 50%;
-    margin: 5px;
-    position: relative;
-    vertical-align: middle;
-}
-
-publication-status:hover > status-tooltip {
-    visibility: visible;
-}
-
-status-tooltip {
-    visibility: hidden;
-    position: absolute;
-
-    /*Position*/
-    left: -50px ;
-    bottom: 150%;
-    z-index: 3;
-    
-    /*Text Properties*/
-    font-size:10pt;
-    font-weight:bold;
-    color:white;
-    text-align: center;
-    padding: 5px 5px;
-
-    /*Size*/
-    width:100px;
-    background-color: black;
-    border-radius: 6px;
-}
-
-status-tooltip::after {
-    content: " ";
-    position: absolute;
-    top: 100%; /* At the bottom of the tooltip */
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: black transparent transparent transparent;
-  }
-
-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;
-}

Website/styles/style_mangahover.css

@@ -1,709 +0,0 @@
-: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-status {
-    display: inline-block;
-    height: 10px;
-    width: 10px;
-    border-radius: 50%;
-    margin: 5px;
-    position: relative;
-    vertical-align: middle;
-}
-
-publication-status:hover > status-tooltip {
-    visibility: visible;
-}
-
-status-tooltip {
-    visibility: hidden;
-    position: absolute;
-
-    /*Position*/
-    left: -50px ;
-    bottom: 150%;
-    z-index: 3;
-    
-    /*Text Properties*/
-    font-size:10pt;
-    font-weight:bold;
-    color:white;
-    text-align: center;
-    padding: 5px 5px;
-
-    /*Size*/
-    width:100px;
-    background-color: black;
-    border-radius: 6px;
-}
-
-status-tooltip::after {
-    content: " ";
-    position: absolute;
-    top: 100%; /* At the bottom of the tooltip */
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: black transparent transparent transparent;
-  }
-
-
-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;
-}

docker-compose.yaml

@@ -1,21 +0,0 @@
-version: '3'
-services:
-  tranga-api:
-    image: glax/tranga-api:cuttingedge
-    container_name: tranga-api
-    volumes:
-      - ./tranga:/usr/share/Tranga-API #1 when replacing ./tranga replace #2 with same value
-      - ./Manga:/Manga
-    ports:
-      - "6531:6531"
-    restart: unless-stopped
-  tranga-website:
-    image: glax/tranga-website:cuttingedge
-    container_name: tranga-website
-    volumes:
-      - ./tranga/imageCache:/usr/share/nginx/html/imageCache:ro #2 when replacing Point to same value as #1/imageCache
-    ports:
-      - "9555:80"
-    depends_on: 
-      - tranga-api
-    restart: unless-stopped

nginx/fastcgi.conf

@@ -0,0 +1,26 @@
+
+fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
+fastcgi_param  QUERY_STRING       $query_string;
+fastcgi_param  REQUEST_METHOD     $request_method;
+fastcgi_param  CONTENT_TYPE       $content_type;
+fastcgi_param  CONTENT_LENGTH     $content_length;
+
+fastcgi_param  SCRIPT_NAME        $fastcgi_script_name;
+fastcgi_param  REQUEST_URI        $request_uri;
+fastcgi_param  DOCUMENT_URI       $document_uri;
+fastcgi_param  DOCUMENT_ROOT      $document_root;
+fastcgi_param  SERVER_PROTOCOL    $server_protocol;
+fastcgi_param  REQUEST_SCHEME     $scheme;
+fastcgi_param  HTTPS              $https if_not_empty;
+
+fastcgi_param  GATEWAY_INTERFACE  CGI/1.1;
+fastcgi_param  SERVER_SOFTWARE    nginx/$nginx_version;
+
+fastcgi_param  REMOTE_ADDR        $remote_addr;
+fastcgi_param  REMOTE_PORT        $remote_port;
+fastcgi_param  SERVER_ADDR        $server_addr;
+fastcgi_param  SERVER_PORT        $server_port;
+fastcgi_param  SERVER_NAME        $server_name;
+
+# PHP only, required if PHP was built with --enable-force-cgi-redirect
+fastcgi_param  REDIRECT_STATUS    200;

nginx/fastcgi_params

@@ -0,0 +1,25 @@
+
+fastcgi_param  QUERY_STRING       $query_string;
+fastcgi_param  REQUEST_METHOD     $request_method;
+fastcgi_param  CONTENT_TYPE       $content_type;
+fastcgi_param  CONTENT_LENGTH     $content_length;
+
+fastcgi_param  SCRIPT_NAME        $fastcgi_script_name;
+fastcgi_param  REQUEST_URI        $request_uri;
+fastcgi_param  DOCUMENT_URI       $document_uri;
+fastcgi_param  DOCUMENT_ROOT      $document_root;
+fastcgi_param  SERVER_PROTOCOL    $server_protocol;
+fastcgi_param  REQUEST_SCHEME     $scheme;
+fastcgi_param  HTTPS              $https if_not_empty;
+
+fastcgi_param  GATEWAY_INTERFACE  CGI/1.1;
+fastcgi_param  SERVER_SOFTWARE    nginx/$nginx_version;
+
+fastcgi_param  REMOTE_ADDR        $remote_addr;
+fastcgi_param  REMOTE_PORT        $remote_port;
+fastcgi_param  SERVER_ADDR        $server_addr;
+fastcgi_param  SERVER_PORT        $server_port;
+fastcgi_param  SERVER_NAME        $server_name;
+
+# PHP only, required if PHP was built with --enable-force-cgi-redirect
+fastcgi_param  REDIRECT_STATUS    200

nginx/mimes.types

@@ -0,0 +1,99 @@
+                                                                    
+types {                                                                    
+    text/html                                        html htm shtml;
+    text/css                                         css;                    
+    text/xml                                         xml;        
+    image/gif                                        gif;            
+    image/jpeg                                       jpeg jpg;   
+    application/javascript                           js;                   
+    application/atom+xml                             atom;       
+    application/rss+xml                              rss;                    
+                                                                  
+    text/mathml                                      mml;            
+    text/plain                                       txt;         
+    text/vnd.sun.j2me.app-descriptor                 jad;                  
+    text/vnd.wap.wml                                 wml;  
+    text/x-component                                 htc;                    
+                                                                 
+    image/avif                                       avif;           
+    image/png                                        png;         
+    image/svg+xml                                    svg svgz;             
+    image/tiff                                       tif tiff;
+    image/vnd.wap.wbmp                               wbmp;                   
+    image/webp                                       webp;       
+    image/x-icon                                     ico;            
+    image/x-jng                                      jng;         
+    image/x-ms-bmp                                   bmp;                  
+                                                           
+    font/woff                                        woff;                   
+    font/woff2                                       woff2;
+                                                                             
+    application/java-archive                         jar war ear;
+    application/json                                 json;           
+    application/mac-binhex40                         hqx;        
+    application/msword                               doc;                  
+    application/pdf                                  pdf;        
+    application/postscript                           ps eps ai;              
+    application/rtf                                  rtf;         
+    application/vnd.apple.mpegurl                    m3u8;           
+    application/vnd.google-earth.kml+xml             kml;         
+    application/vnd.google-earth.kmz                 kmz;                  
+    application/vnd.ms-excel                         xls;  
+    application/vnd.ms-fontobject                    eot;                    
+    application/vnd.ms-powerpoint                    ppt;        
+    application/vnd.oasis.opendocument.graphics      odg;                    
+    application/vnd.oasis.opendocument.presentation  odp;         
+    application/vnd.oasis.opendocument.spreadsheet   ods;                  
+    application/vnd.oasis.opendocument.text          odt;     
+    application/vnd.openxmlformats-officedocument.presentationml.presentation
+                                                     pptx;       
+    application/vnd.openxmlformats-officedocument.spreadsheetml.sheet        
+                                                     xlsx;        
+    application/vnd.openxmlformats-officedocument.wordprocessingml.document
+                                                     docx; 
+    application/vnd.wap.wmlc                         wmlc;                   
+    application/wasm                                 wasm;
+    application/x-7z-compressed                      7z;                   
+    application/x-cocoa                              cco;           
+    application/x-java-archive-diff                  jardiff;                
+    application/x-java-jnlp-file                     jnlp;       
+    application/x-makeself                           run;                    
+    application/x-perl                               pl pm;      
+    application/x-pilot                              prc pdb;              
+    application/x-rar-compressed                     rar;        
+    application/x-redhat-package-manager             rpm;                    
+    application/x-sea                                sea;         
+    application/x-shockwave-flash                    swf;                    
+    application/x-stuffit                            sit;         
+    application/x-tcl                                tcl tk;               
+    application/x-x509-ca-cert                       der pem crt;
+    application/x-xpinstall                          xpi;                    
+    application/xhtml+xml                            xhtml;      
+    application/xspf+xml                             xspf;                   
+    application/zip                                  zip;         
+                                                                           
+    application/octet-stream                         bin exe dll;
+    application/octet-stream                         deb;                    
+    application/octet-stream                         dmg;        
+    application/octet-stream                         iso img;                
+    application/octet-stream                         msi msp msm; 
+                                                                           
+    audio/midi                                       mid midi kar;
+    audio/mpeg                                       mp3;                    
+    audio/ogg                                        ogg;
+    audio/x-m4a                                      m4a;                  
+    audio/x-realaudio                                ra;         
+                                                                             
+    video/3gpp                                       3gpp 3gp;   
+    video/mp2t                                       ts;                     
+    video/mp4                                        mp4;         
+    video/mpeg                                       mpeg mpg;             
+    video/quicktime                                  mov;        
+    video/webm                                       webm;                   
+    video/x-flv                                      flv;        
+    video/x-m4v                                      m4v;                    
+    video/x-mng                                      mng;         
+    video/x-ms-asf                                   asx asf;              
+    video/x-ms-wmv                                   wmv;         
+    video/x-msvideo                                  avi;                    
+}                                                       

nginx/nginx.conf

@@ -0,0 +1,32 @@
+                      
+user  nginx;                               
+worker_processes  auto;                    
+                                           
+error_log  /var/log/nginx/error.log notice;
+pid        /var/run/nginx.pid;
+                             
+                             
+events {                     
+    worker_connections  1024;
+}     
+                                        
+                                           
+http {                                     
+    include       /etc/nginx/mime.types;                                     
+    default_type  application/octet-stream;                                  
+                                                                             
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '  
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+                                                
+    access_log  /var/log/nginx/access.log  main;
+                       
+    sendfile        on;   
+    #tcp_nopush     on;   
+                          
+    keepalive_timeout  65;
+                                     
+    #gzip  on;
+                          
+    include /etc/nginx/conf.d/*.conf;
+}

nginx/scgi_params

@@ -0,0 +1,17 @@
+
+scgi_param  REQUEST_METHOD     $request_method;
+scgi_param  REQUEST_URI        $request_uri;
+scgi_param  QUERY_STRING       $query_string;
+scgi_param  CONTENT_TYPE       $content_type;
+
+scgi_param  DOCUMENT_URI       $document_uri;
+scgi_param  DOCUMENT_ROOT      $document_root;
+scgi_param  SCGI               1;
+scgi_param  SERVER_PROTOCOL    $server_protocol;
+scgi_param  REQUEST_SCHEME     $scheme;
+scgi_param  HTTPS              $https if_not_empty;
+
+scgi_param  REMOTE_ADDR        $remote_addr;
+scgi_param  REMOTE_PORT        $remote_port;
+scgi_param  SERVER_PORT        $server_port;
+scgi_param  SERVER_NAME        $server_name;

nginx/templates/default.conf.template

@@ -0,0 +1,29 @@
+server {
+    listen       80 default_server;
+    listen  [::]:80 default_server;
+
+    http2  on;
+
+    server_name  _;
+
+    access_log  /dev/stdout  main;
+    error_log  /dev/stderr;
+
+    location /api/ {
+        proxy_pass_request_headers on;
+        rewrite ^/api/(.*)$ /$1 break;
+        proxy_pass $API_URL;
+    }
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+    }
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

nginx/uwsgi_params

@@ -0,0 +1,17 @@
+
+uwsgi_param  QUERY_STRING       $query_string;
+uwsgi_param  REQUEST_METHOD     $request_method;
+uwsgi_param  CONTENT_TYPE       $content_type;
+uwsgi_param  CONTENT_LENGTH     $content_length;
+
+uwsgi_param  REQUEST_URI        $request_uri;
+uwsgi_param  PATH_INFO          $document_uri;
+uwsgi_param  DOCUMENT_ROOT      $document_root;
+uwsgi_param  SERVER_PROTOCOL    $server_protocol;
+uwsgi_param  REQUEST_SCHEME     $scheme;
+uwsgi_param  HTTPS              $https if_not_empty;
+
+uwsgi_param  REMOTE_ADDR        $remote_addr;
+uwsgi_param  REMOTE_PORT        $remote_port;
+uwsgi_param  SERVER_PORT        $server_port;
+uwsgi_param  SERVER_NAME        $server_name;