Dark mode

index.js

@@ -2,19 +2,21 @@ const express = require("express");
 const Eta = require("eta");
 const fs = require("fs");
 const request = require("request");
-const imdb = require("imdb-api");
-const requestSync = require("sync-request");
 var Config = require('config-js');
 const app = express();
 const PrismaClient = require('@prisma/client').PrismaClient;
+const nameToImdb = require("name-to-imdb");
+const imdbHelper = require("./node_modules/name-to-imdb/helpers");
+const imdbLight = require("imdb-light");
 const port = 4000;
 const eanConvAdress = "http://127.0.0.1:9999/"
 
-const typeIndex = {0: "Physical", 1: "Digital - Maxdome", 2: "Digital - Amazon Prime Video", 3: "Digital - DVR"}
+const typeIndex = { 0: "Physical", 1: "Digital - Maxdome", 2: "Digital - Amazon Prime Video", 3: "Digital - DVR" }
 
 const prisma = new PrismaClient();
 
 var responseBuffer = { allBufferd: [] };
+const imdbBuffer = {}
 
 responseBuffer = JSON.parse(fs.readFileSync("chache.bin", "utf8"));
 
@@ -22,6 +24,7 @@ var config = new Config('key.cfg');
 
 
 app.use(express.static("static"));
+app.use(express.static("node_modules"));
 
 app.get("/", async function handleIndex(req, res) {
   // https://imdb-api.com/de/API/Posters//[ID HERE]
@@ -42,6 +45,11 @@ app.get("/add", function (req, res) {
   res.send(Eta.render(data, { isDisplay: false }));
 });
 
+app.get("/addByTitle", function (req, res) {
+  const data = fs.readFileSync("template/addByTitle.html", "utf8");
+  res.send(Eta.render(data, { isDisplay: false }));
+});
+
 app.get("/delete", function (req, res) {
   console.log(req.query.id)
   prisma.movieInfo.delete({
@@ -55,6 +63,7 @@ app.get("/delete", function (req, res) {
   res.send("Done.");
 });
 
+
 app.get("/returnSaveResult", function (req, res) {
   const data = fs.readFileSync("template/addToShelf.html", "utf8");
   responseJson = responseBuffer[req.query["reponseID"]];
@@ -71,23 +80,39 @@ app.get("/returnSaveResult", function (req, res) {
   );
 });
 
+/********
+* test endpoint
+*/
+
+app.get("/test", function (req, res) {
+  const respo = imdbLight.fetch(req.query.id, (details) => {
+    console.log(details)
+    res.send(details)
+  })
+});
+
+
 app.get("/showDetails", async function (req, res) {
   const data = fs.readFileSync("template/movieDetails.html", "utf8");
-  console.log(req.query["id"])
   const movie = await prisma.movieInfo.findFirst({
     where: {
       movieID: req.query["id"]
     }
   })
-  res.send(
-    Eta.render(data, {
-      internalID: movie.id,
-      id: movie.movieID,
-      cover: movie.posterUrl,
-      titleByAPI: movie.movieTitel,
-      type: typeIndex[movie.type],
-    })
-  )
+  imdbLight.fetch(req.query.id, function handleImdbResp(details) {
+    console.log(details);
+    res.send(
+      Eta.render(data, {
+        internalID: movie.id,
+        id: movie.movieID,
+        cover: movie.posterUrl,
+        titleByAPI: details.Title,
+        type: typeIndex[movie.type],
+        extendedData: details
+      })
+    )
+  })
+
 });
 
 app.get("/editDetails", async function (req, res) {
@@ -110,7 +135,7 @@ app.get("/editDetails", async function (req, res) {
   )
 });
 
-app.get("/api/edit", function handleEdit(req, res){
+app.get("/api/edit", function handleEdit(req, res) {
   console.log(req.query)
   prisma.movieInfo.update({
     where: {
@@ -138,49 +163,29 @@ app.get("/apiCallBack", function (req, res) {
         } else {
           var searchTerm = response.body;
           searchTerm = searchTerm.replace("/", " ")
-          var reqString =
-            "https://imdb-api.com/en/API/SearchTitle/" + config.get('keys.imdb') + "/" +
-            searchTerm;
-          request(reqString, function (error, response2, body) {
-            jsonBody = JSON.parse(response2.body);
+          
+          imdbLight.fetch(imdbID, function handleLightReponse(details) {
 
-            console.log(jsonBody.length);
-            if (jsonBody.errorMessage.includes("Maximum usage")) {
-              res.send({ state: "ERR_IMDB_LIMIT_REACHED" });
-            } else {
+            console.log(details);
               jsonBody = jsonBody.results[0];
-              //const data = fs.readFileSync("template/addToShelf.html.html", "utf8");
               timest = new Date().valueOf();
               responseJson = {
                 state: "OK",
                 id: jsonBody.id,
-                coverImage: jsonBody.image,
-                titleByAPI: response.body,
+                coverImage: details.Poster,
+                titleByAPI: details.Title,
                 ean: req.query["ean"],
                 reponseID: req.query["ean"],
               };
               responseBuffer[req.query["ean"]] = responseJson;
               responseBuffer.allBufferd.push(req.query["ean"]);
-
-              // ToDo: Rewrite chache (and all pages!!!) to use ean instead of timeid
-
-
               try {
                 fs.writeFileSync("chache.bin", JSON.stringify(responseBuffer));
               } catch (err) {
                 console.error(err);
               }
               res.send(responseJson);
-              /* res.send(
-              Eta.render(data, {
-                id: jsonBody.id,
-                cover: jsonBody.image,
-                titleByAPI: response.body,
-                ean: req.query["ean"],
-                isDisplay: true,
-              })
-            );*/
-            }
+            
           });
         }
       }
@@ -193,6 +198,32 @@ app.get("/apiCallBack", function (req, res) {
 });
 
 
+
+app.get("/apiCallBackTitle", function (req, res) {
+  //console.log(req.query);
+  nameToImdb({ name: imdbHelper.parseSearchTerm(req.query.title) }, function handleImdbResp(err, imdbID, imdbData) {
+    if (err) {
+      res.send({ state: "ERR_BACK_FAIL" });
+      console.log(err.stack);
+    }
+    imdbLight.fetch(imdbID, function handleLightReponse(details) {
+      const randId = Math.floor(Math.random() * 100000) + "NO_EAN";
+      responseJson = {
+        state: "OK",
+        id: imdbID,
+        coverImage: details.Poster,
+        titleByAPI: details.Title,
+        ean: String(randId),
+        reponseID: String(randId),
+      };
+      responseBuffer[randId] = responseJson;
+      res.send(responseJson);
+    })
+  })
+
+});
+
+
 app.get("/save", async function handleSave(req, res) {
   responseJson = responseBuffer[req.query["reponseID"]];
   const type = parseInt(req.query["type"]) || 0;
@@ -202,7 +233,7 @@ app.get("/save", async function handleSave(req, res) {
       movieID: responseJson.id
     }
   })
-  if(moveiTest.length == 0){
+  if (moveiTest.length == 0) {
     prisma.movieInfo.create({
       data: {
         movieID: responseJson.id,
@@ -215,7 +246,7 @@ app.get("/save", async function handleSave(req, res) {
       console.log(result)
     })
     res.send({ status: "OK" });
-  }else{
+  } else {
     res.send({ status: "ERR_ALREADY_EXIST" });
   }
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmoviedb",
-  "version": "1.0.0",
+  "version": "1.0.5",
   "description": "An openmoviedb where you can save which movies you own.",
   "main": "index.js",
   "scripts": {
@@ -15,23 +15,24 @@
     "imdb"
   ],
   "author": "TheGreydiamond",
-  "license": "ISC",
+  "license": "",
   "dependencies": {
     "config-js": "^1.1.14",
+    "darkreader": "^4.9.46",
     "eta": "^1.12.1",
     "express": "^4.17.1",
     "form-data": "^4.0.0",
     "imdb-api": "^4.4.1",
+    "imdb-light": "^1.1.5",
+    "name-to-imdb": "^3.0.2",
     "node-fetch": "^2.6.1",
     "node-html-parser": "^3.1.2",
     "prisma": "^3.12.0",
     "quagga": "^0.12.1",
-    "request": "^2.88.2",
-    "sqlite3": "^5.0.2",
-    "sync-request": "^6.1.0"
+    "request": "^2.88.2"
   },
   "devDependencies": {
-    "@types/node": "^17.0.23",
-    "@prisma/client": "^3.12.0"
+    "@prisma/client": "^3.12.0",
+    "@types/node": "^17.0.23"
   }
 }

template/add.html

@@ -24,6 +24,75 @@
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <link rel="stylesheet" href="css/normalize.css" />
     <link rel="stylesheet" href="css/skeleton.css" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+  <script src="/darkreader/darkreader.js">    </script>
+  <style>
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 60px;
+      height: 34px;
+    }
+    
+    .switch input { 
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 26px;
+      width: 26px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    input:checked + .slider {
+      background-color: #2196F3;
+    }
+    
+    input:focus + .slider {
+      box-shadow: 0 0 1px #2196F3;
+    }
+    
+    input:checked + .slider:before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+    
+    /* Rounded sliders */
+    .slider.round {
+      border-radius: 34px;
+    }
+    
+    .slider.round:before {
+      border-radius: 50%;
+    }
+
+    iconContainer {
+      padding: 4px;
+      font-size: 1.5em;
+    }
+    </style>
     <style>
         
         /* In order to place the tracking correctly */
@@ -84,7 +153,8 @@
             <% } else{ %>
                 <div id="scanner-container"></div>
                 <input type="button" id="btn" value="Start/Stop the scanner" />
-                <div id="currentEAN">EAN: Waiting for valid EAN...</div>
+                <div id="currentEAN">EAN: Waiting for valid EAN...</div><br>
+                <button onclick="window.location.href = '/addByTitle'"><i class="fas fa-radar"></i> Search by title</button>
                 <button onclick="sendEanConvRequest()" disabled id="searchBtn"> <i class="fas fa-search"></i>Search</button>
                 <button onclick="window.location.href = '/'"><i class="fas fa-home"></i> Back to home</button>
                 <button type="button" class="collapsible">Manual input</button>
@@ -96,7 +166,16 @@
     </div>
 </div>
     <!-- Include the image-diff library -->
-
+    <script>
+        DarkReader.auto()
+        $("#darkToggle").on("change", function(test){
+          if(test.currentTarget.checked){
+            DarkReader.enable()
+          } else {
+            DarkReader.disable()
+          }
+        })
+      </script>
     <script>
 
         var coll = document.getElementsByClassName("collapsible");

template/addByTitle.html

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Basic Page Needs
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <meta charset="utf-8" />
+    <title>OpenMovieDB - Bookshelf</title>
+    <meta name="description" content="OpenMovieDB - Bookshelf" />
+    <meta name="author" content="TheGreydiamond" />
+
+    <!-- Mobile Specific Metas
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- FONT
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <link
+      href="//fonts.googleapis.com/css?family=Raleway:400,300,600"
+      rel="stylesheet"
+      type="text/css"
+    />
+
+    <!-- CSS
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <link rel="stylesheet" href="css/normalize.css" />
+    <link rel="stylesheet" href="css/skeleton.css" />
+    <style>
+        
+        /* In order to place the tracking correctly */
+        canvas.drawing, canvas.drawingBuffer {
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+        /* Style the button that is used to open and close the collapsible content */
+        .collapsible {
+          background-color: #eee;
+          color: #444;
+          cursor: pointer;
+          /*padding: 18px;*/
+          /*width: 100%;*/
+          border: none;
+          /*text-align: left;*/
+          outline: none;
+          font-size: 15px;
+        }
+        
+        /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+        .active, .collapsible:hover {
+          background-color: #ccc;
+        }
+        
+        /* Style the collapsible content. Note: hidden by default */
+        .content {
+          padding: 0 18px;
+          display: none;
+          overflow: hidden;
+          background-color: #f1f1f1;
+        }
+
+
+    </style>
+
+    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+  <script src="/darkreader/darkreader.js">    </script>
+  <style>
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 60px;
+      height: 34px;
+    }
+    
+    .switch input { 
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 26px;
+      width: 26px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    input:checked + .slider {
+      background-color: #2196F3;
+    }
+    
+    input:focus + .slider {
+      box-shadow: 0 0 1px #2196F3;
+    }
+    
+    input:checked + .slider:before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+    
+    /* Rounded sliders */
+    .slider.round {
+      border-radius: 34px;
+    }
+    
+    .slider.round:before {
+      border-radius: 50%;
+    }
+
+    iconContainer {
+      padding: 4px;
+      font-size: 1.5em;
+    }
+    </style>
+  </head>
+  <body>
+
+<body>
+    <div class="container">
+        <div class="row">
+            <div class="one-half column" style="margin-top: 15%" id="mainCont">
+                <h4>OpenMovieDB - Add a new movie (by title)</h4>
+        <!-- Div to show the scanner -->
+        <% if(it.isDisplay == true) { %>
+            <%= it.titleByAPI %><br>
+            <%= it.id %><br>
+            <img src="<%= it.cover %>" alt="Cover image" style="height: 200px;"></img><br>
+            <button onclick="saveToLibary()"> Add to libary</button>
+            <% } else { %>
+                <input type="text" placeholder="Movie title" id="movieTitle"> 
+                
+                <button onclick="sendEanConvRequest()" id="searchBtn"> <i class="fas fa-search"></i>Search</button><br>
+                <button onclick="window.location.href = '/add'"><i class="fas fa-radar"></i> Search by EAN</button>
+                <button onclick="window.location.href = '/'"><i class="fas fa-home"></i> Back to home</button>
+            <% } %>
+            </div>
+    </div>
+</div>
+    <!-- Include the image-diff library -->
+    <script>
+      DarkReader.auto()
+      $("#darkToggle").on("change", function(test){
+        if(test.currentTarget.checked){
+          DarkReader.enable()
+        } else {
+          DarkReader.disable()
+        }
+      })
+    </script>
+    <script>
+
+        var coll = document.getElementsByClassName("collapsible");
+        var i;
+        
+        for (i = 0; i < coll.length; i++) {
+          coll[i].addEventListener("click", function() {
+            this.classList.toggle("active");
+            var content = this.nextElementSibling;
+            if (content.style.display === "block") {
+              content.style.display = "none";
+            } else {
+              content.style.display = "block";
+            }
+          });
+        }
+
+        setTimeout(function(){
+            document.getElementById("btn").style.backgroundColor = "rgba(255, 0, 0, 0.5)";
+            document.getElementById("searchBtn").style.backgroundColor = "rgba(10, 10, 10, 0.5);"
+        }, 20)
+        
+
+
+        function sendEanConvRequest(){
+            const curTitle = document.getElementById("movieTitle").value;
+            document.getElementById("mainCont").innerHTML = "<h4>OpenMovieDB - Add a new movie</h4><center><div class=\"lds-grid\"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><br><i>Searching database...</i></center>";
+            /*if(curEan[0] == "0"){
+                curEan = curEan.substring(1);
+            }*/
+            console.warn(curTitle)
+            url = "/apiCallBackTitle?title=" + curTitle;
+            //window.open(url)
+            $.get(url,function(data,status) {
+                var respon = JSON.parse(data)
+                if(respon.state == "OK"){
+                    url = "/returnSaveResult?reponseID=" + respon.reponseID;
+                    window.location.href = url
+                }else{
+                   // alert("An error with the api occured.")
+                    document.getElementById("mainCont").innerHTML = "<h4>OpenMovieDB - Add a new movie</h4><center><i style='color: #cc0000; font-size: 100px;' class=\"fas fa-exclamation-circle\"></i><br>Ohno, the API returned an error. Errorcode: <br> <code>" + respon.state + "</code><br><br><button onclick=\"window.location.href = '/'\"><i class=\"fas fa-home\"></i> Back to home</button></center>"
+                }
+                 console.log(data); 
+                },'html');
+            //alert(curEan)
+        }
+
+        function saveToLibary(){
+            url = "/saveTitle?title=<%= it.ean %>";
+
+            $.get(url,function(data,status) { console.log(data); console.log(status) },'html');
+        }
+    </script>
+</body>
+
+</html>

template/addToShelf.html

@@ -66,9 +66,76 @@
     <!-- Favicon
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <link rel="icon" type="image/png" href="images/favicon.png" />
-    <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
     <script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+    <script src="/darkreader/darkreader.js">    </script>
+    <style>
+      .switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+      }
+      
+      .switch input { 
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+      
+      .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #ccc;
+        -webkit-transition: .4s;
+        transition: .4s;
+      }
+      
+      .slider:before {
+        position: absolute;
+        content: "";
+        height: 26px;
+        width: 26px;
+        left: 4px;
+        bottom: 4px;
+        background-color: white;
+        -webkit-transition: .4s;
+        transition: .4s;
+      }
+      
+      input:checked + .slider {
+        background-color: #2196F3;
+      }
+      
+      input:focus + .slider {
+        box-shadow: 0 0 1px #2196F3;
+      }
+      
+      input:checked + .slider:before {
+        -webkit-transform: translateX(26px);
+        -ms-transform: translateX(26px);
+        transform: translateX(26px);
+      }
+      
+      /* Rounded sliders */
+      .slider.round {
+        border-radius: 34px;
+      }
+      
+      .slider.round:before {
+        border-radius: 50%;
+      }
+  
+      iconContainer {
+        padding: 4px;
+        font-size: 1.5em;
+      }
+      </style>
   </head>
   <body>
 
@@ -108,7 +175,16 @@
     </div>
 </div>
     <!-- Include the image-diff library -->
-
+    <script>
+      DarkReader.auto()
+      $("#darkToggle").on("change", function(test){
+        if(test.currentTarget.checked){
+          DarkReader.enable()
+        } else {
+          DarkReader.disable()
+        }
+      })
+    </script>
     <script>
         function on() {
           document.getElementById("overlay").style.display = "block";

template/bookshelf.html

@@ -1,90 +1,174 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <!-- Basic Page Needs
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <meta charset="utf-8" />
-    <title>OpenMovieDB - Bookshelf</title>
-    <meta name="description" content="OpenMovieDB - Bookshelf" />
-    <meta name="author" content="TheGreydiamond" />
 
-    <!-- Mobile Specific Metas
+<head>
+  <!-- Basic Page Needs
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta charset="utf-8" />
+  <title>OpenMovieDB - Bookshelf</title>
+  <meta name="description" content="OpenMovieDB - Bookshelf" />
+  <meta name="author" content="TheGreydiamond" />
 
-    <!-- FONT
+  <!-- Mobile Specific Metas
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link
-      href="//fonts.googleapis.com/css?family=Raleway:400,300,600"
-      rel="stylesheet"
-      type="text/css"
-    />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <!-- CSS
+  <!-- FONT
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link rel="stylesheet" href="css/normalize.css" />
-    <link rel="stylesheet" href="css/skeleton.css" />
+  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css" />
+  
 
-    <!-- Favicon
+  <!-- CSS
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link rel="icon" type="image/png" href="images/favicon.png" />
-    <script
-      src="https://kit.fontawesome.com/d7b80a780b.js"
-      crossorigin="anonymous"
-    ></script>
-  </head>
-  <body>
-    <!-- Primary Page Layout
+  <link rel="stylesheet" href="css/normalize.css" />
+  <link rel="stylesheet" href="css/skeleton.css" />
+
+  <!-- Favicon
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <div class="container">
-      <div class="row">
+  <link rel="icon" type="image/png" href="images/favicon.png" />
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+  <script src="/darkreader/darkreader.js">    </script>
+  <style>
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 60px;
+      height: 34px;
+    }
+    
+    .switch input { 
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 26px;
+      width: 26px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    input:checked + .slider {
+      background-color: #2196F3;
+    }
+    
+    input:focus + .slider {
+      box-shadow: 0 0 1px #2196F3;
+    }
+    
+    input:checked + .slider:before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+    
+    /* Rounded sliders */
+    .slider.round {
+      border-radius: 34px;
+    }
+    
+    .slider.round:before {
+      border-radius: 50%;
+    }
+
+    iconContainer {
+      padding: 4px;
+      font-size: 1.5em;
+    }
+    </style>
+</head>
+
+<body>
+
+  <!-- Primary Page Layout
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <div class="container">
+    <div class="row">
+
+      <div class="eleven column" style="margin-top: 15%">
+        <h4>OpenMovieDB - Bookshelf</h4>
         
-        <div class="eleven column" style="margin-top: 15%">
-          <h4>OpenMovieDB - Bookshelf</h4>
-          <div style="float: right; top: -20px;">
+        
+        <div style="float: right; top: -20px;">
             <input class="u-full-width" type="text" placeholder="Search" id="search">
-          </div>
-          <button
-            class="button-primary"
-            onclick="window.location.href = '/add'"
-          >
-            <i class="fas fa-plus"></i> Add new movie</button
-          ><br />
-          <div id="listOfMovies" class=""></div>
         </div>
         
-      </div>
-    </div>
-    <script>
-      ser = document.getElementById("search");
-      ser.addEventListener("input", updateValue);
-      json = <%~ it.jsonRespo %>;
-      function updateValue(e) {
-        console.log(e.target.value)
-        outList = [];
-        i = 0;
-        elem = document.getElementById("listOfMovies");
-        elem.innerHTML = ""
-        while(i < json.length){
-          currenElm = json[i]
-          if(currenElm.movieTitel.toLowerCase().replace("(", "").replace(")", "").includes(e.target.value.toLowerCase())){
-            console.log(currenElm.movieID)
-            elem.innerHTML += "<a style='width: 150px; float: left; padding: 4px; height: 309 ,jmnpx;' href='/showDetails?id=" + currenElm.movieID + "'><div ><img src='" + currenElm.posterUrl + '\' style="width: 100%;"><br><center><b>' + currenElm.movieTitel + "</b></center></div></a>"
-          }
-          i++
-        }
         
-      }
-      i = 0;
-      elem = document.getElementById("listOfMovies")
-      while(i < json.length){
-        currenElm = json[i]
-        elem.innerHTML += "<a style='width: 150px; float: left; padding: 4px; height: 309px;' href='/showDetails?id=" + currenElm.movieID + "'><div ><img src='" + currenElm.posterUrl + '\' style="width: 100%;"><br><center><b>' + currenElm.movieTitel + "</b></center></div></a>"
-        i++;
-      }
       
-    </script>
-    <!-- End Document
+
+        <button class="button-primary" onclick="window.location.href = '/add'">
+          <i class="fas fa-plus"></i> Add new movie</button>
+          <label class="switch" style="">
+            <input type="checkbox" checked id="darkToggle">
+            <span class="slider round"><iconContainer> <i class="fas fa-sun"></i> <i class="fas fa-moon"></i></iconContainer></span>
+          </label><br />
+
+        <div id="listOfMovies" class=""></div>
+
+      </div>
+
+    </div>
+  </div>
+  <script>
+    DarkReader.auto()
+    $("#darkToggle").on("change", function(test){
+      if(test.currentTarget.checked){
+        DarkReader.enable()
+      } else {
+        DarkReader.disable()
+      }
+    })
+  </script>
+    <script>
+    ser = document.getElementById("search");
+    ser.addEventListener("input", updateValue);
+    json = <% ~it.jsonRespo %>;
+    function updateValue(e) {
+      console.log(e.target.value)
+      outList = [];
+      i = 0;
+      elem = document.getElementById("listOfMovies");
+      elem.innerHTML = ""
+      while (i < json.length) {
+        currenElm = json[i]
+        if (currenElm.movieTitel.toLowerCase().replace("(", "").replace(")", "").includes(e.target.value.toLowerCase())) {
+          console.log(currenElm.movieID)
+          elem.innerHTML += "<a style='width: 150px; float: left; padding: 4px; height: 309 ,jmnpx;' href='/showDetails?id=" + currenElm.movieID + "'><div ><img src='" + currenElm.posterUrl + '\' style="width: 100%;"><br><center><b>' + currenElm.movieTitel + "</b></center></div></a>"
+        }
+        i++
+      }
+
+    }
+    i = 0;
+    elem = document.getElementById("listOfMovies")
+    while (i < json.length) {
+      currenElm = json[i]
+      elem.innerHTML += "<a style='width: 150px; float: left; padding: 4px; height: 309px;' href='/showDetails?id=" + currenElm.movieID + "'><div ><img src='" + currenElm.posterUrl + '\' style="width: 100%;"><br><center><b>' + currenElm.movieTitel + "</b></center></div></a>"
+      i++;
+    }
+
+  </script>
+  <!-- End Document
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  </body>
-</html>
+</body>
+
+</html>

template/editDetails.html

@@ -64,12 +64,75 @@
         }
         </style>
 
-    <!-- Favicon
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link rel="icon" type="image/png" href="images/favicon.png" />
-    <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
-    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+        <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+        <script src="/darkreader/darkreader.js">    </script>
+        <style>
+          .switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 34px;
+          }
+          
+          .switch input { 
+            opacity: 0;
+            width: 0;
+            height: 0;
+          }
+          
+          .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            -webkit-transition: .4s;
+            transition: .4s;
+          }
+          
+          .slider:before {
+            position: absolute;
+            content: "";
+            height: 26px;
+            width: 26px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            -webkit-transition: .4s;
+            transition: .4s;
+          }
+          
+          input:checked + .slider {
+            background-color: #2196F3;
+          }
+          
+          input:focus + .slider {
+            box-shadow: 0 0 1px #2196F3;
+          }
+          
+          input:checked + .slider:before {
+            -webkit-transform: translateX(26px);
+            -ms-transform: translateX(26px);
+            transform: translateX(26px);
+          }
+          
+          /* Rounded sliders */
+          .slider.round {
+            border-radius: 34px;
+          }
+          
+          .slider.round:before {
+            border-radius: 50%;
+          }
+      
+          iconContainer {
+            padding: 4px;
+            font-size: 1.5em;
+          }
+          </style>
   </head>
   <body>
 
@@ -98,6 +161,17 @@
             </div>
     </div>
 </div>
+
+<script>
+  DarkReader.auto()
+  $("#darkToggle").on("change", function(test){
+    if(test.currentTarget.checked){
+      DarkReader.enable()
+    } else {
+      DarkReader.disable()
+    }
+  })
+</script>
     <script>
 
       function on() {

template/index.html

@@ -5,6 +5,7 @@
     <title></title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="/darkreader/darkreader.js">    </script>
     <style>
         /* In order to place the tracking correctly */
         canvas.drawing, canvas.drawingBuffer {
@@ -26,7 +27,16 @@
     <button onclick="sendEanConvRequest()"> Search</button>
 
     <!-- Include the image-diff library -->
-
+    <script>
+        DarkReader.auto()
+        $("#darkToggle").on("change", function(test){
+          if(test.currentTarget.checked){
+            DarkReader.enable()
+          } else {
+            DarkReader.disable()
+          }
+        })
+      </script>
     <script>
         var _scannerIsRunning = false;
 

template/movieDetails.html

@@ -1,133 +1,267 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <!-- Basic Page Needs
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <meta charset="utf-8" />
-    <title>OpenMovieDB - Bookshelf</title>
-    <meta name="description" content="OpenMovieDB - Bookshelf" />
-    <meta name="author" content="TheGreydiamond" />
 
-    <!-- Mobile Specific Metas
+<head>
+  <!-- Basic Page Needs
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta charset="utf-8" />
+  <title>OpenMovieDB - Bookshelf</title>
+  <meta name="description" content="OpenMovieDB - Bookshelf" />
+  <meta name="author" content="TheGreydiamond" />
 
-    <!-- FONT
+  <!-- Mobile Specific Metas
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link
-      href="//fonts.googleapis.com/css?family=Raleway:400,300,600"
-      rel="stylesheet"
-      type="text/css"
-    />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <!-- CSS
+  <!-- FONT
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link rel="stylesheet" href="css/normalize.css" />
-    <link rel="stylesheet" href="css/skeleton.css" />
-    <style>
-        #overlay {
-          position: fixed;
-          display: none;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background-color: rgba(0,0,0,0.5);
-          z-index: 2;
-          cursor: pointer;
-        }
+  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css" />
 
-        #overlay2 {
-          position: fixed;
-          display: none;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background-color: rgba(0,0,0,0.5);
-          z-index: 2;
-          cursor: pointer;
-        }
-        
-        #text{
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          font-size: 50px;
-          color: white;
-          transform: translate(-50%,-50%);
-          -ms-transform: translate(-50%,-50%);
-        }
-        </style>
-
-    <!-- Favicon
+  <!-- CSS
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link rel="icon" type="image/png" href="images/favicon.png" />
-    <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
-    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-  </head>
-  <body>
+  <link rel="stylesheet" href="css/normalize.css" />
+  <link rel="stylesheet" href="css/skeleton.css" />
+  <style>
+    #overlay {
+      position: fixed;
+      display: none;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 2;
+      cursor: pointer;
+    }
+
+    #overlay2 {
+      position: fixed;
+      display: none;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 2;
+      cursor: pointer;
+    }
+
+    #text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      font-size: 50px;
+      color: white;
+      transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+    }
+
+    summary::-webkit-details-marker {
+      display: none
+    }
+
+    summary:after {
+      border-radius: 5px;
+      content: "+";
+      color: #fff;
+      float: left;
+      font-size: 1.5em;
+      font-weight: bold;
+      margin: -5px 10px 0 0;
+      padding: 0;
+      text-align: center;
+      width: 20px;
+    }
+
+    details[open] summary:after {
+      content: "-";
+    }
+
+    details {
+      background-color: rgba(65, 65, 65, 0.39);
+      border-radius: 4px;
+      padding: 5px;
+    }
+  </style>
+
+  <!-- Favicon
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link rel="icon" type="image/png" href="images/favicon.png" />
+  <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+  <script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
 
 <body>
-  <div id="overlay" onclick="off()">
-    <div id="text"><svg class='checkmark' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'><circle class='checkmark__circle ' cx='26' cy='26' r='25' fill='none'/><path class='checkmark__check' fill='none' d='M14.1 27.2l7.1 7.2 16.7-16.8'/></svg><style>.checkmark__circle {  stroke-dasharray: 166;  stroke-dashoffset: 166;  stroke-width: 2;  stroke-miterlimit: 10;  stroke: #7ac142;  fill: none;  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;}.checkmark {  width: 56px;  height: 56px;  border-radius: 50%;  display: block;  stroke-width: 2;  stroke: #fff;  stroke-miterlimit: 10;  margin: 10% auto;  box-shadow: inset 0px 0px 0px #7ac142;  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;}.checkmark__check {  transform-origin: 50% 50%;  stroke-dasharray: 48;  stroke-dashoffset: 48;  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;}@keyframes stroke {  100% {    stroke-dashoffset: 0;  }}@keyframes scale {  0%, 100% {    transform: none;  }  50% {    transform: scale3d(1.1, 1.1, 1);  }}@keyframes fill {  100% {    box-shadow: inset 0px 0px 0px 30px #7ac142;  }}</style></div>
-  </div>
 
-  <div id="overlay2" onclick="off()">
-    <div id="text">Do you really want to remove this movie?<br>
-      <button onclick="sureDelete()" style="background-color: rgba(174, 255, 128, 0.699)"><i class="fas fa-trash"></i> Yes</button>
-      <button onclick="off()" style="background-color: rgba(255, 95, 95, 0.719)"><i class="fas fa-times"></i> No</button>
-    
+  <body>
+    <div id="overlay" onclick="off()">
+      <div id="text"><svg class='checkmark' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>
+          <circle class='checkmark__circle ' cx='26' cy='26' r='25' fill='none' />
+          <path class='checkmark__check' fill='none' d='M14.1 27.2l7.1 7.2 16.7-16.8' />
+        </svg>
+        <style>
+          .checkmark__circle {
+            stroke-dasharray: 166;
+            stroke-dashoffset: 166;
+            stroke-width: 2;
+            stroke-miterlimit: 10;
+            stroke: #7ac142;
+            fill: none;
+            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+          }
+
+          .checkmark {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            display: block;
+            stroke-width: 2;
+            stroke: #fff;
+            stroke-miterlimit: 10;
+            margin: 10% auto;
+            box-shadow: inset 0px 0px 0px #7ac142;
+            animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
+          }
+
+          .checkmark__check {
+            transform-origin: 50% 50%;
+            stroke-dasharray: 48;
+            stroke-dashoffset: 48;
+            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+          }
+
+          @keyframes stroke {
+            100% {
+              stroke-dashoffset: 0;
+            }
+          }
+
+          @keyframes scale {
+
+            0%,
+            100% {
+              transform: none;
+            }
+
+            50% {
+              transform: scale3d(1.1, 1.1, 1);
+            }
+          }
+
+          @keyframes fill {
+            100% {
+              box-shadow: inset 0px 0px 0px 30px #7ac142;
+            }
+          }
+        </style>
+      </div>
+    </div>
+
+    <div id="overlay2" onclick="off()">
+      <div id="text">Do you really want to remove this movie?<br>
+        <button onclick="sureDelete()" style="background-color: rgba(174, 255, 128, 0.699)"><i class="fas fa-trash"></i>
+          Yes</button>
+        <button onclick="off()" style="background-color: rgba(255, 95, 95, 0.719)"><i class="fas fa-times"></i>
+          No</button>
+
+      </div>
     </div>
-  </div>
 
     <div class="container">
-        <div class="row">
-            <div class="one-half column" style="margin-top: 10%" id="mainCont">
-                <h4>OpenMovieDB - Moviedetails</h4>
-            <div style="width: 300px;">
-                <img src="<%= it.cover %>" alt="Cover image" style="width: 100%;"></img><br>
-                <center><%= it.titleByAPI %><br><i><%= it.id %></i><br>
-                <b>Type: </b> <%= it.type %></center>
-            </div><br>
-            <button onclick="handleEdit()" id="editBtn"><i class="fas fa-pen"></i> Edit</button>
-            <button onclick="handelDelete()" id="delBtn"><i class="fas fa-trash"></i> Delete</button>
-            <button onclick="window.location.href = '/'"><i class="fas fa-home"></i> Back to home</button>
-            </div>
+      <div class="row">
+        <div class="one-half column" style="margin-top: 10%" id="mainCont">
+          <h4>OpenMovieDB - Moviedetails</h4>
+          <div style="width: 300px;">
+            <img src="<%= it.cover %>" alt="Cover image" style="width: 100%;"></img><br>
+            <center>
+              <%= it.titleByAPI %><br><i>
+                  <%= it.id %>
+                </i><br>
+            </center>
+
+            <details>
+              <summary>
+                Details
+              </summary><br>
+              <p>
+                Year: <%= it.extendedData.Year %>
+                <br>
+                  Director: <%= it.extendedData.Director %>
+                  <br>
+                  Starring: <%= it.extendedData.Actors %>
+                  <br>
+                  Writers: <%= it.extendedData.Writers %>
+                  <br>
+                  Release: <%= it.extendedData.Release %>
+                  <br>
+                  Rating: <%= it.extendedData.Rating %>
+                  <br>
+                  <details>
+                    <summary>
+                      Plot
+                    </summary>
+                    <p>
+                      <%~ it.extendedData.Plot %>
+                    </p>
+                  </details>
+                  
+              </p>
+            </details>
+            <br>
+
+            <b>Type: </b>
+            <%= it.type %>
+
+          </div><br>
+          <button onclick="handleEdit()" id="editBtn"><i class="fas fa-pen"></i> Edit</button>
+          <button onclick="handelDelete()" id="delBtn"><i class="fas fa-trash"></i> Delete</button>
+          <button onclick="window.location.href = '/'"><i class="fas fa-home"></i> Back to home</button>
+        </div>
+      </div>
     </div>
-</div>
+
+    <script>
+      DarkReader.auto()
+      $("#darkToggle").on("change", function(test){
+        if(test.currentTarget.checked){
+          DarkReader.enable()
+        } else {
+          DarkReader.disable()
+        }
+      })
+    </script>
     <script>
 
       function on() {
         document.getElementById("overlay").style.display = "block";
       }
-      
+
       function off() {
         document.getElementById("overlay").style.display = "none";
         document.getElementById("overlay2").style.display = "none";
       }
 
-      function handleEdit(){
+      function handleEdit() {
         console.log("Editing movie")
         window.location.href = '/editDetails?id=<%= it.id %>';
       }
 
-      function sureDelete(){
+      function sureDelete() {
         console.log("Deleting movie")
         url = "/delete?id=<%= it.internalID %>";
         document.getElementById("delBtn").remove();
-        $.get(url,function(data,status) { console.log(data); console.log(status); on(); setTimeout(function(){window.location.href = '/';}, 1000); },'html');
+        $.get(url, function (data, status) { console.log(data); console.log(status); on(); setTimeout(function () { window.location.href = '/'; }, 1000); }, 'html');
       }
 
-      function handelDelete(){
+      function handelDelete() {
         document.getElementById("overlay2").style.display = "block";
       }
     </script>
-</body>
+  </body>
 
 </html>