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

Initial commit.

Browse Source
This commit is contained in:
Sören Oesterwind
2021-04-10 22:44:45 +02:00
commit acc661d15b
19 changed files with 4127 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
template/addToShelf.html Normal file
View File

@@ -0,0 +1,133 @@
<!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>