133 lines
5.7 KiB
HTML
133 lines
5.7 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%);
|
||
}
|
||
</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"><h1>!</h1><red>This movie already exists in the DB.</red></div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="one-half column" style="margin-top: 15%" id="mainCont">
|
||
<h4>OpenMovieDB - Add a new movie</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></center>
|
||
</div>
|
||
<button onclick="saveToLibary()" class="button-primary" id="addToBtn"> Add to libary</button>
|
||
<button onclick="window.location.href = '/'"><i class="fas fa-home"></i> Back to home</button>
|
||
<button
|
||
|
||
onclick="window.location.href = '/add'"
|
||
>
|
||
<i class="fas fa-plus"></i> Add new movie</button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Include the image-diff library -->
|
||
|
||
<script>
|
||
function on() {
|
||
document.getElementById("overlay").style.display = "block";
|
||
}
|
||
function on2() {
|
||
document.getElementById("overlay2").style.display = "block";
|
||
}
|
||
|
||
function off() {
|
||
document.getElementById("overlay").style.display = "none";
|
||
document.getElementById("overlay2").style.display = "none";
|
||
}
|
||
|
||
function saveToLibary(){
|
||
url = "/save?reponseID=<%= it.ean %>";
|
||
document.getElementById("addToBtn").remove();
|
||
$.get(url,function(data,status) {
|
||
console.log(JSON.parse(data))
|
||
if(JSON.parse(data).status == "OK"){
|
||
on();
|
||
}else{
|
||
console.log("exist")
|
||
on2()
|
||
}
|
||
},'html');
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |