Dark mode

index.js

@@ -2,13 +2,12 @@ const express = require("express");
 const Eta = require("eta");
 const fs = require("fs");
 const request = require("request");
-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 imdb = require("imdb");
+const imdbLight = require("imdb-light");
 const port = 4000;
 const eanConvAdress = "http://127.0.0.1:9999/"
 
@@ -25,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]
@@ -80,32 +80,35 @@ 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"]
     }
   })
-  nameToImdb({name: imdbHelper.parseSearchTerm(movie.movieTitel)},  function handleImdbResp(err, imdbID, imdbData) {
+  imdbLight.fetch(req.query.id, function handleImdbResp(details) {
-    if (err) {
+    console.log(details);
-      console.log(err.stack);
-    }
-    if(imdbData.isCached != true) {
-      imdbBuffer[imdbID] = imdbData;
-    } else {
-      imdbData = imdbBuffer[imdbID];
-    }
-    console.log(imdbData, movie.movieID, imdbID);
     res.send(
       Eta.render(data, {
         internalID: movie.id,
         id: movie.movieID,
         cover: movie.posterUrl,
-        titleByAPI: movie.movieTitel,
+        titleByAPI: details.Title,
         type: typeIndex[movie.type],
-        extendedData: imdbData.meta
+        extendedData: details
       })
     )
   })
@@ -160,23 +163,17 @@ 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') + "/" +
+          imdbLight.fetch(imdbID, function handleLightReponse(details) {
-            searchTerm;
-          request(reqString, function (error, response2, body) {
-            jsonBody = JSON.parse(response2.body);
 
-            console.log(jsonBody.length);
+            console.log(details);
-            if (jsonBody.errorMessage.includes("Maximum usage")) {
-              res.send({ state: "ERR_IMDB_LIMIT_REACHED" });
-            } else {
               jsonBody = jsonBody.results[0];
               timest = new Date().valueOf();
               responseJson = {
                 state: "OK",
                 id: jsonBody.id,
-                coverImage: jsonBody.image,
+                coverImage: details.Poster,
-                titleByAPI: response.body,
+                titleByAPI: details.Title,
                 ean: req.query["ean"],
                 reponseID: req.query["ean"],
               };
@@ -188,7 +185,7 @@ app.get("/apiCallBack", function (req, res) {
                 console.error(err);
               }
               res.send(responseJson);
-            }
+            
           });
         }
       }
@@ -204,29 +201,26 @@ 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) {
+  nameToImdb({ name: imdbHelper.parseSearchTerm(req.query.title) }, function handleImdbResp(err, imdbID, imdbData) {
     if (err) {
       res.send({ state: "ERR_BACK_FAIL" });
       console.log(err.stack);
     }
-    if(imdbData.isCached != true) {
+    imdbLight.fetch(imdbID, function handleLightReponse(details) {
-      imdbBuffer[imdbID] = imdbData;
+      const randId = Math.floor(Math.random() * 100000) + "NO_EAN";
-    } else {
+      responseJson = {
-      imdbData = imdbBuffer[imdbID];
+        state: "OK",
-    }
+        id: imdbID,
-    const randId = Math.floor(Math.random() * 100000) + "NO_EAN";
+        coverImage: details.Poster,
-    
+        titleByAPI: details.Title,
-    responseJson = {
+        ean: String(randId),
-      state: "OK",
+        reponseID: String(randId),
-      id: imdbID,
+      };
-      coverImage: imdbData.meta.image.src,
+      responseBuffer[randId] = responseJson;
-      titleByAPI: imdbData.meta.name,
+      res.send(responseJson);
-      ean: String(randId),
+    })
-      reponseID: String(randId),
-    };
-    responseBuffer[randId] = responseJson;
-    res.send(responseJson);
   })
+
 });
 
 

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,22 +15,21 @@
     "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": "^1.1.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",
+    "request": "^2.88.2"
-    "sqlite3": "^5.0.2",
-    "sync-request": "^6.1.0"
   },
   "devDependencies": {
     "@prisma/client": "^3.12.0",

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 */
@@ -97,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

@@ -61,12 +61,76 @@
 
     </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://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>
 
@@ -92,7 +156,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/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
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
-      href="//fonts.googleapis.com/css?family=Raleway:400,300,600"
-      rel="stylesheet"
-      type="text/css"
-    />
 
-    <!-- CSS
+  <!-- FONT
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link rel="stylesheet" href="css/normalize.css" />
+  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css" />
-    <link rel="stylesheet" href="css/skeleton.css" />
+  
 
-    <!-- Favicon
+  <!-- CSS
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link rel="icon" type="image/png" href="images/favicon.png" />
+  <link rel="stylesheet" href="css/normalize.css" />
-    <script
+  <link rel="stylesheet" href="css/skeleton.css" />
-      src="https://kit.fontawesome.com/d7b80a780b.js"
+
-      crossorigin="anonymous"
+  <!-- Favicon
-    ></script>
-  </head>
-  <body>
-    <!-- Primary Page Layout
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <div class="container">
+  <link rel="icon" type="image/png" href="images/favicon.png" />
-      <div class="row">
+  <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>
+</body>
-</html>
+
+</html>

template/editDetails.html

@@ -64,12 +64,75 @@
         }
         </style>
 
-    <!-- Favicon
+        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+        <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
-    <link rel="icon" type="image/png" href="images/favicon.png" />
+        <script src="/darkreader/darkreader.js">    </script>
-    <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+        <style>
-    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
+          .switch {
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+            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

@@ -189,9 +189,27 @@
                 Details
               </summary><br>
               <p>
-                Year: <%= it.extendedData.year %>
+                Year: <%= it.extendedData.Year %>
+                <br>
+                  Director: <%= it.extendedData.Director %>
                   <br>
-                  Starring: <%= it.extendedData.starring %>
+                  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>
@@ -206,6 +224,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() {