267 lines
7.9 KiB
HTML
267 lines
7.9 KiB
HTML
<!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>
|
||
#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>
|
||
|
||
<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 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>
|
||
</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>
|
||
|
||
<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() {
|
||
console.log("Editing movie")
|
||
window.location.href = '/editDetails?id=<%= it.id %>';
|
||
}
|
||
|
||
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');
|
||
}
|
||
|
||
function handelDelete() {
|
||
document.getElementById("overlay2").style.display = "block";
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |