grey/openMovieBookshelf
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Dark mode

Browse Source
This commit is contained in:
Sören Oesterwind
2022-04-12 21:35:11 +02:00
parent 94f9dbd84a
commit 1edc90103b
11 changed files with 630 additions and 1993 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
template/add.html
View File

@@ -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");

83
template/addByTitle.html
View File

@@ -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");

80
template/addToShelf.html
View File

@@ -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";

228
template/bookshelf.html
View File

@@ -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>

86
template/editDetails.html
View File

@@ -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() {

12
template/index.html
View File

@@ -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;

33
template/movieDetails.html
View File

@@ -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() {