Initial commit.
This commit is contained in:
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
node_modules/
|
||||
.vscode/
|
||||
*.sqllite
|
||||
testStuff/
|
||||
chache.bin
|
||||
key.cfg
|
||||
334
index.js
Normal file
334
index.js
Normal file
@ -0,0 +1,334 @@
|
||||
const express = require("express");
|
||||
const Eta = require("eta");
|
||||
const fs = require("fs");
|
||||
const request = require("request");
|
||||
const imdb = require("imdb-api");
|
||||
const sqlite3 = require("sqlite3");
|
||||
const requestSync = require("sync-request");
|
||||
var Config = require('config-js');
|
||||
const app = express();
|
||||
const port = 4000;
|
||||
|
||||
const initalTableSQL =
|
||||
"CREATE TABLE `movieInfo` ( \
|
||||
`id` INT NOT NULL, \
|
||||
`movieID` VARCHAR(128), \
|
||||
`movieTitel` VARCHAR(255), \
|
||||
`place` INT zerofill, \
|
||||
`type` INT zerofill, \
|
||||
`posterUrl` VARCHAR(255) \
|
||||
);";
|
||||
|
||||
const initalTableSQL2 =
|
||||
"CREATE TABLE `apiChache` ( \
|
||||
`imdbID` VARCHAR(128), \
|
||||
`url` VARCHAR(255) \
|
||||
);";
|
||||
|
||||
var responseBuffer = { allBufferd: [] };
|
||||
|
||||
responseBuffer = JSON.parse(fs.readFileSync("chache.bin", "utf8"));
|
||||
|
||||
var db = new sqlite3.Database("database.sqllite");
|
||||
if (!fs.existsSync("database.sqllite")) {
|
||||
console.log("Creating table.");
|
||||
db.serialize(() => {
|
||||
db.run(initalTableSQL);
|
||||
//db.run(initalTableSQL2);
|
||||
});
|
||||
}
|
||||
db.close();
|
||||
var db = new sqlite3.Database("database.sqllite");
|
||||
|
||||
var config = new Config('key.cfg');
|
||||
|
||||
|
||||
async function doesMovieExistInDatabase(imdbID) {
|
||||
console.warn(imdbID);
|
||||
db.all(
|
||||
"SELECT * FROM movieInfo WHERE movieID='" + imdbID + "'",
|
||||
function (err, rows) {
|
||||
console.log("!!!" + rows);
|
||||
if (rows == undefined) {
|
||||
console.log(false);
|
||||
return false;
|
||||
} else {
|
||||
console.log(true);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function getBufferdResponse(type, imdbID) {
|
||||
// Cover image
|
||||
if (type == 1) {
|
||||
db.all(
|
||||
"SELECT * FROM apiChache WHERE imdbID=" + imdbID,
|
||||
function (err, rows) {
|
||||
// Okay, there is no result, lets ask the real api
|
||||
if (rows == undefined) {
|
||||
console.log("No chache");
|
||||
var res = requestSync(
|
||||
"GET",
|
||||
"https://imdb-api.com/en/API/Posters//" + imdbID,
|
||||
{}
|
||||
);
|
||||
const jsonParsed = JSON.parse(res.body);
|
||||
// Well frick, api limit reached
|
||||
if (jsonParsed.errorMessage.includes("Maximum usage")) {
|
||||
console.warn("API limit reached!");
|
||||
|
||||
return "https://tse2.mm.bing.net/th?id=OIP.SW4X5yWbxOMofUFxMwSTbAHaJQ&pid=Api"; // Return "No cover image"
|
||||
console.log("unreachable");
|
||||
} else {
|
||||
// Cool, we got an response
|
||||
posterUrl =
|
||||
"https://tse2.mm.bing.net/th?id=OIP.SW4X5yWbxOMofUFxMwSTbAHaJQ&pid=Api"; // Just a fallback
|
||||
if (jsonParsed.posters[0] != undefined) {
|
||||
posterUrl = jsonParsed.posters[0].link;
|
||||
// Lets save the response
|
||||
db.run(
|
||||
"INSERT INTO apiChache(imdbID, url) VALUES(?, ?)",
|
||||
[imdbID, posterUrl],
|
||||
(err) => {
|
||||
if (err) {
|
||||
return console.log(err.message);
|
||||
}
|
||||
console.log("Saved url to chache");
|
||||
}
|
||||
);
|
||||
}
|
||||
// Return the url
|
||||
return posterUrl;
|
||||
}
|
||||
} else {
|
||||
// There is a result, lets return the result
|
||||
return rows[0].url;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
app.use(express.static("static"));
|
||||
|
||||
app.get("/", function (req, res) {
|
||||
// https://imdb-api.com/de/API/Posters//[ID HERE]
|
||||
var buildString = "";
|
||||
db.serialize(function () {
|
||||
db.all("SELECT * FROM movieInfo ORDER BY movieTitel ASC;", function (err, rows) {
|
||||
/* rows.forEach((row) => {
|
||||
console.log(row.id + ": " + row.movieTitel);
|
||||
//var posterLink = getBufferdResponse(1, row.movieID);
|
||||
posterLink = row.posterUrl;
|
||||
console.log(posterLink);
|
||||
|
||||
/*var res = requestSync(
|
||||
"GET",
|
||||
"https://imdb-api.com/en/API/Posters//" + row.movieID,
|
||||
{}
|
||||
);
|
||||
const jsonParsed = JSON.parse(res.body);
|
||||
console.log(jsonParsed);
|
||||
posterLink = "";
|
||||
if (jsonParsed.posters[0] == undefined) {
|
||||
posterLink =
|
||||
"https://tse2.mm.bing.net/th?id=OIP.SW4X5yWbxOMofUFxMwSTbAHaJQ&pid=Api";
|
||||
} else {
|
||||
posterLink = jsonParsed.posters[0].link;
|
||||
}*/
|
||||
/*buildString +=
|
||||
"<a href='/showDetails?id=" +
|
||||
row.id +
|
||||
"'><div style='width: 150px; float: left; padding: 5px;'><img src='" +
|
||||
posterLink +
|
||||
'\' style="width: 100%;"><br><center><b>' +
|
||||
row.movieTitel +
|
||||
"</b></center></div></a>";
|
||||
|
||||
});*/
|
||||
|
||||
console.log(rows)
|
||||
const data = fs.readFileSync("template/bookshelf.html", "utf8");
|
||||
res.send(Eta.render(data, {jsonRespo: JSON.stringify(rows)}));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
app.get("/add", function (req, res) {
|
||||
const data = fs.readFileSync("template/add.html", "utf8");
|
||||
res.send(Eta.render(data, { isDisplay: false }));
|
||||
});
|
||||
|
||||
app.get("/delete", function (req, res) {
|
||||
db.run(`DELETE FROM movieInfo WHERE id=?`, req.query["id"], function (err) {
|
||||
if (err) {
|
||||
return console.error(err.message);
|
||||
}
|
||||
console.log(`Row(s) deleted ${this.changes}`);
|
||||
res.send("Done.");
|
||||
});
|
||||
});
|
||||
|
||||
app.get("/returnSaveResult", function (req, res) {
|
||||
const data = fs.readFileSync("template/addToShelf.html", "utf8");
|
||||
responseJson = responseBuffer[req.query["reponseID"]];
|
||||
console.log(responseBuffer);
|
||||
res.send(
|
||||
Eta.render(data, {
|
||||
id: responseJson.id,
|
||||
cover: responseJson.coverImage,
|
||||
titleByAPI: responseJson.titleByAPI,
|
||||
ean: responseJson.ean,
|
||||
isDisplay: true,
|
||||
responseID: req.query["reponseID"],
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
app.get("/showDetails", function (req, res) {
|
||||
const data = fs.readFileSync("template/movieDetails.html", "utf8");
|
||||
console.log( req.query["id"])
|
||||
db.serialize(function () {
|
||||
db.all(
|
||||
"SELECT * FROM movieInfo WHERE movieID='" + req.query["id"] + "'",
|
||||
function (err, rows) {
|
||||
//+ req.params["id"]
|
||||
row = rows[0];
|
||||
console.log(row);
|
||||
|
||||
res.send(
|
||||
Eta.render(data, {
|
||||
internalID: row.id,
|
||||
id: row.movieID,
|
||||
cover: row.posterUrl,
|
||||
titleByAPI: row.movieTitel,
|
||||
})
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
/*responseJson = responseBuffer[req.query["reponseID"]];
|
||||
console.log(responseBuffer);
|
||||
res.send(
|
||||
Eta.render(data, {
|
||||
id: responseJson.id,
|
||||
cover: responseJson.coverImage,
|
||||
titleByAPI: responseJson.titleByAPI,
|
||||
ean: responseJson.ean,
|
||||
isDisplay: true,
|
||||
responseID: req.query["reponseID"]
|
||||
})
|
||||
);*/
|
||||
});
|
||||
|
||||
app.get("/apiCallBack", function (req, res) {
|
||||
//console.log(req.query);
|
||||
if (!responseBuffer.allBufferd.includes(req.query["ean"])) {
|
||||
request(
|
||||
"http://localhost:9999/?ean=" + req.query["ean"],
|
||||
function (error, response, body) {
|
||||
if (response.statusCode != 200) {
|
||||
console.log("OH NO");
|
||||
res.send({ state: "ERR_EAN_CONV_NO_200" });
|
||||
} else {
|
||||
var reqString =
|
||||
"https://imdb-api.com/en/API/SearchTitle/" + config.get('keys.imdb') + "/" +
|
||||
response.body;
|
||||
request(reqString, function (error, response2, body) {
|
||||
jsonBody = JSON.parse(response2.body);
|
||||
console.log(response.body);
|
||||
if (jsonBody.errorMessage.includes("Maximum usage")) {
|
||||
res.send({ state: "ERR_IMDB_LIMIT_REACHED" });
|
||||
} else {
|
||||
jsonBody = jsonBody.results[0];
|
||||
//const data = fs.readFileSync("template/addToShelf.html.html", "utf8");
|
||||
timest = new Date().valueOf();
|
||||
responseJson = {
|
||||
state: "OK",
|
||||
id: jsonBody.id,
|
||||
coverImage: jsonBody.image,
|
||||
titleByAPI: response.body,
|
||||
ean: req.query["ean"],
|
||||
reponseID: req.query["ean"],
|
||||
};
|
||||
responseBuffer[req.query["ean"]] = responseJson;
|
||||
responseBuffer.allBufferd.push(req.query["ean"]);
|
||||
|
||||
// ToDo: Rewrite chache (and all pages!!!) to use ean instead of timeid
|
||||
|
||||
|
||||
try {
|
||||
fs.writeFileSync("chache.bin", JSON.stringify(responseBuffer));
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
res.send(responseJson);
|
||||
/* res.send(
|
||||
Eta.render(data, {
|
||||
id: jsonBody.id,
|
||||
cover: jsonBody.image,
|
||||
titleByAPI: response.body,
|
||||
ean: req.query["ean"],
|
||||
isDisplay: true,
|
||||
})
|
||||
);*/
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
} else {
|
||||
console.log("Using chache");
|
||||
responseJson = responseBuffer[req.query["ean"]];
|
||||
res.send(responseJson);
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/save", function (req, res) {
|
||||
responseJson = responseBuffer[req.query["reponseID"]];
|
||||
|
||||
db.all(
|
||||
"SELECT * FROM movieInfo WHERE movieID='" + responseJson.id + "'",
|
||||
function (err, rows) {
|
||||
console.log(rows);
|
||||
if (rows == undefined || rows.length == 0) {
|
||||
db.run(
|
||||
"INSERT INTO movieInfo(id, movieID, movieTitel, place, type, posterUrl) VALUES(?, ?, ?, ?, ?, ?)",
|
||||
[
|
||||
new Date().valueOf(),
|
||||
responseJson.id,
|
||||
responseJson.titleByAPI,
|
||||
0,
|
||||
0,
|
||||
responseJson.coverImage,
|
||||
],
|
||||
(err) => {
|
||||
if (err) {
|
||||
return console.log(err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
res.send({ status: "OK" });
|
||||
} else {
|
||||
res.send({ status: "ERR_ALREADY_EXIST" });
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
//var res = request('POST', 'https://ssl.ofdb.de/view.php?page=suchergebnis', {
|
||||
// json: {'SText': '4030521376748', 'Kat':'EAN'},
|
||||
//});
|
||||
|
||||
//var temp2 = String(res.getBody('utf8'))
|
||||
//temp = //temp.replace("<script>", "").replace("<html>", "").replace("\n", "").replace("\r", "").replace("\t", "")
|
||||
//htmlBlock = htmlParser.parse(temp)
|
||||
//temp2 = temp2.split(/\r?\n/)
|
||||
//temp = temp.split('img src="https://ssl.ofdb.de/images/shim.gif" width="1" height="10" border="0" alt=""></td>')[0]
|
||||
//console.log(temp2.find(checkForString))
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(`Movie DB app listening at http://localhost:${port}`);
|
||||
});
|
||||
1795
package-lock.json
generated
Normal file
1795
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "openmoviedb",
|
||||
"version": "1.0.0",
|
||||
"description": "An openmoviedb where you can save which movies you own.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "openmoviedb"
|
||||
},
|
||||
"keywords": [
|
||||
"movie",
|
||||
"imdb"
|
||||
],
|
||||
"author": "TheGreydiamond",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"config-js": "^1.1.14",
|
||||
"eta": "^1.12.1",
|
||||
"express": "^4.17.1",
|
||||
"form-data": "^4.0.0",
|
||||
"imdb-api": "^4.4.1",
|
||||
"node-fetch": "^2.6.1",
|
||||
"node-html-parser": "^3.1.2",
|
||||
"quagga": "^0.12.1",
|
||||
"request": "^2.88.2",
|
||||
"sqlite3": "^5.0.2",
|
||||
"sync-request": "^6.1.0"
|
||||
}
|
||||
}
|
||||
56
python/eanConverter.py
Normal file
56
python/eanConverter.py
Normal file
@ -0,0 +1,56 @@
|
||||
from http.server import BaseHTTPRequestHandler, HTTPServer
|
||||
import time
|
||||
import requests
|
||||
|
||||
hostName = "localhost"
|
||||
serverPort = 9999
|
||||
|
||||
class MyServer(BaseHTTPRequestHandler):
|
||||
def do_GET(self):
|
||||
|
||||
print(self.path)
|
||||
if(self.path.startswith("/?ean=")):
|
||||
print("EAN request")
|
||||
|
||||
eanCode = self.path.split("=")[1]
|
||||
print(eanCode)
|
||||
url = 'https://ssl.ofdb.de/view.php?page=suchergebnis'
|
||||
myobj = {'SText': eanCode, 'Kat':'EAN'} #'4030521376748'
|
||||
|
||||
x = requests.post(url, data = myobj)
|
||||
tme = x.text
|
||||
try:
|
||||
tme = tme.split('<div data-nx-container="inread"><!-- INREAD --></div>')[1]
|
||||
tme = tme.split('img src="https://ssl.ofdb.de/images/shim.gif" width="1" height="10" border="0" alt=""></td>')[0]
|
||||
tme = tme.split(',SHADOW,true)"><b>')[1]
|
||||
tme = tme.split('</b></a><br>')[0]
|
||||
tme = tme[:len(tme)-7]
|
||||
except IndexError:
|
||||
self.send_response(500)
|
||||
self.send_header("Content-type", "text/html")
|
||||
self.end_headers()
|
||||
self.wfile.write(bytes("Invalid EAN", "utf-8"))
|
||||
else:
|
||||
self.send_response(200)
|
||||
self.send_header("Content-type", "text/html")
|
||||
self.end_headers()
|
||||
self.wfile.write(bytes(tme, "utf-8"))
|
||||
else:
|
||||
self.send_response(404)
|
||||
self.send_header("Content-type", "text/html")
|
||||
self.end_headers()
|
||||
|
||||
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
webServer = HTTPServer((hostName, serverPort), MyServer)
|
||||
print("Server started http://%s:%s" % (hostName, serverPort))
|
||||
|
||||
try:
|
||||
webServer.serve_forever()
|
||||
except KeyboardInterrupt:
|
||||
pass
|
||||
|
||||
webServer.server_close()
|
||||
print("Server stopped.")
|
||||
427
static/css/normalize.css
vendored
Normal file
427
static/css/normalize.css
vendored
Normal file
@ -0,0 +1,427 @@
|
||||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
487
static/css/skeleton.css
vendored
Normal file
487
static/css/skeleton.css
vendored
Normal file
@ -0,0 +1,487 @@
|
||||
/*
|
||||
* Skeleton V2.0.4
|
||||
* Copyright 2014, Dave Gamache
|
||||
* www.getskeleton.com
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* 12/29/2014
|
||||
*/
|
||||
|
||||
|
||||
/* Table of contents
|
||||
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
- Grid
|
||||
- Base Styles
|
||||
- Typography
|
||||
- Links
|
||||
- Buttons
|
||||
- Forms
|
||||
- Lists
|
||||
- Code
|
||||
- Tables
|
||||
- Spacing
|
||||
- Utilities
|
||||
- Clearing
|
||||
- Media Queries
|
||||
*/
|
||||
|
||||
|
||||
/* Grid
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box; }
|
||||
.column,
|
||||
.columns {
|
||||
width: 100%;
|
||||
float: left;
|
||||
box-sizing: border-box; }
|
||||
|
||||
/* For devices larger than 400px */
|
||||
@media (min-width: 400px) {
|
||||
.container {
|
||||
width: 85%;
|
||||
padding: 0; }
|
||||
}
|
||||
|
||||
/* For devices larger than 550px */
|
||||
@media (min-width: 550px) {
|
||||
.container {
|
||||
width: 80%; }
|
||||
.column,
|
||||
.columns {
|
||||
margin-left: 4%; }
|
||||
.column:first-child,
|
||||
.columns:first-child {
|
||||
margin-left: 0; }
|
||||
|
||||
.one.column,
|
||||
.one.columns { width: 4.66666666667%; }
|
||||
.two.columns { width: 13.3333333333%; }
|
||||
.three.columns { width: 22%; }
|
||||
.four.columns { width: 30.6666666667%; }
|
||||
.five.columns { width: 39.3333333333%; }
|
||||
.six.columns { width: 48%; }
|
||||
.seven.columns { width: 56.6666666667%; }
|
||||
.eight.columns { width: 65.3333333333%; }
|
||||
.nine.columns { width: 74.0%; }
|
||||
.ten.columns { width: 82.6666666667%; }
|
||||
.eleven.columns { width: 91.3333333333%; }
|
||||
.twelve.columns { width: 100%; margin-left: 0; }
|
||||
|
||||
.one-third.column { width: 30.6666666667%; }
|
||||
.two-thirds.column { width: 65.3333333333%; }
|
||||
|
||||
.one-half.column { width: 48%; }
|
||||
|
||||
/* Offsets */
|
||||
.offset-by-one.column,
|
||||
.offset-by-one.columns { margin-left: 8.66666666667%; }
|
||||
.offset-by-two.column,
|
||||
.offset-by-two.columns { margin-left: 17.3333333333%; }
|
||||
.offset-by-three.column,
|
||||
.offset-by-three.columns { margin-left: 26%; }
|
||||
.offset-by-four.column,
|
||||
.offset-by-four.columns { margin-left: 34.6666666667%; }
|
||||
.offset-by-five.column,
|
||||
.offset-by-five.columns { margin-left: 43.3333333333%; }
|
||||
.offset-by-six.column,
|
||||
.offset-by-six.columns { margin-left: 52%; }
|
||||
.offset-by-seven.column,
|
||||
.offset-by-seven.columns { margin-left: 60.6666666667%; }
|
||||
.offset-by-eight.column,
|
||||
.offset-by-eight.columns { margin-left: 69.3333333333%; }
|
||||
.offset-by-nine.column,
|
||||
.offset-by-nine.columns { margin-left: 78.0%; }
|
||||
.offset-by-ten.column,
|
||||
.offset-by-ten.columns { margin-left: 86.6666666667%; }
|
||||
.offset-by-eleven.column,
|
||||
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
|
||||
|
||||
.offset-by-one-third.column,
|
||||
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
|
||||
.offset-by-two-thirds.column,
|
||||
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
|
||||
|
||||
.offset-by-one-half.column,
|
||||
.offset-by-one-half.columns { margin-left: 52%; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Base Styles
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/* NOTE
|
||||
html is set to 62.5% so that all the REM measurements throughout Skeleton
|
||||
are based on 10px sizing. So basically 1.5rem = 15px :) */
|
||||
html {
|
||||
font-size: 62.5%; }
|
||||
body {
|
||||
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #222; }
|
||||
|
||||
|
||||
/* Typography
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 300; }
|
||||
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
||||
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
||||
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
||||
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
||||
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
||||
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
||||
|
||||
/* Larger than phablet */
|
||||
@media (min-width: 550px) {
|
||||
h1 { font-size: 5.0rem; }
|
||||
h2 { font-size: 4.2rem; }
|
||||
h3 { font-size: 3.6rem; }
|
||||
h4 { font-size: 3.0rem; }
|
||||
h5 { font-size: 2.4rem; }
|
||||
h6 { font-size: 1.5rem; }
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0; }
|
||||
|
||||
|
||||
/* Links
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
a {
|
||||
color: #1EAEDB; }
|
||||
a:hover {
|
||||
color: #0FA0CE; }
|
||||
|
||||
|
||||
/* Buttons
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
padding: 0 30px;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 38px;
|
||||
letter-spacing: .1rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #bbb;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box; }
|
||||
.button:hover,
|
||||
button:hover,
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="button"]:hover,
|
||||
.button:focus,
|
||||
button:focus,
|
||||
input[type="submit"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
input[type="button"]:focus {
|
||||
color: #333;
|
||||
border-color: #888;
|
||||
outline: 0; }
|
||||
.button.button-primary,
|
||||
button.button-primary,
|
||||
input[type="submit"].button-primary,
|
||||
input[type="reset"].button-primary,
|
||||
input[type="button"].button-primary {
|
||||
color: #FFF;
|
||||
background-color: #33C3F0;
|
||||
border-color: #33C3F0; }
|
||||
.button.button-primary:hover,
|
||||
button.button-primary:hover,
|
||||
input[type="submit"].button-primary:hover,
|
||||
input[type="reset"].button-primary:hover,
|
||||
input[type="button"].button-primary:hover,
|
||||
.button.button-primary:focus,
|
||||
button.button-primary:focus,
|
||||
input[type="submit"].button-primary:focus,
|
||||
input[type="reset"].button-primary:focus,
|
||||
input[type="button"].button-primary:focus {
|
||||
color: #FFF;
|
||||
background-color: #1EAEDB;
|
||||
border-color: #1EAEDB; }
|
||||
|
||||
|
||||
/* Forms
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea,
|
||||
select {
|
||||
height: 38px;
|
||||
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
|
||||
background-color: #fff;
|
||||
border: 1px solid #D1D1D1;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box; }
|
||||
/* Removes awkward default styles on some inputs for iOS */
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="text"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
textarea {
|
||||
min-height: 65px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px; }
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border: 1px solid #33C3F0;
|
||||
outline: 0; }
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 600; }
|
||||
fieldset {
|
||||
padding: 0;
|
||||
border-width: 0; }
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline; }
|
||||
label > .label-body {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
font-weight: normal; }
|
||||
|
||||
|
||||
/* Lists
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
ul {
|
||||
list-style: circle inside; }
|
||||
ol {
|
||||
list-style: decimal inside; }
|
||||
ol, ul {
|
||||
padding-left: 0;
|
||||
margin-top: 0; }
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin: 1.5rem 0 1.5rem 3rem;
|
||||
font-size: 90%; }
|
||||
li {
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
|
||||
/* Code
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
code {
|
||||
padding: .2rem .5rem;
|
||||
margin: 0 .2rem;
|
||||
font-size: 90%;
|
||||
white-space: nowrap;
|
||||
background: #F1F1F1;
|
||||
border: 1px solid #E1E1E1;
|
||||
border-radius: 4px; }
|
||||
pre > code {
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: pre; }
|
||||
|
||||
|
||||
/* Tables
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
th,
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #E1E1E1; }
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
padding-left: 0; }
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
padding-right: 0; }
|
||||
|
||||
|
||||
/* Spacing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
button,
|
||||
.button {
|
||||
margin-bottom: 1rem; }
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
fieldset {
|
||||
margin-bottom: 1.5rem; }
|
||||
pre,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
table,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
form {
|
||||
margin-bottom: 2.5rem; }
|
||||
|
||||
|
||||
/* Utilities
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.u-full-width {
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-max-full-width {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-pull-right {
|
||||
float: right; }
|
||||
.u-pull-left {
|
||||
float: left; }
|
||||
|
||||
|
||||
/* Misc
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
hr {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3.5rem;
|
||||
border-width: 0;
|
||||
border-top: 1px solid #E1E1E1; }
|
||||
|
||||
|
||||
/* Clearing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
.container:after,
|
||||
.row:after,
|
||||
.u-cf {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
|
||||
/* Media Queries
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/*
|
||||
Note: The best way to structure the use of media queries is to create the queries
|
||||
near the relevant code. For example, if you wanted to change the styles for buttons
|
||||
on small devices, paste the mobile query code up in the buttons section and style it
|
||||
there.
|
||||
*/
|
||||
|
||||
|
||||
/* Larger than mobile */
|
||||
@media (min-width: 400px) {}
|
||||
|
||||
/* Larger than phablet (also point when grid becomes active) */
|
||||
@media (min-width: 550px) {}
|
||||
|
||||
/* Larger than tablet */
|
||||
@media (min-width: 750px) {}
|
||||
|
||||
/* Larger than desktop */
|
||||
@media (min-width: 1000px) {}
|
||||
|
||||
/* Larger than Desktop HD */
|
||||
@media (min-width: 1200px) {}
|
||||
|
||||
|
||||
.lds-grid {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.lds-grid div {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #dfc;
|
||||
animation: lds-grid 1.2s linear infinite;
|
||||
}
|
||||
.lds-grid div:nth-child(1) {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.lds-grid div:nth-child(2) {
|
||||
top: 8px;
|
||||
left: 32px;
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
.lds-grid div:nth-child(3) {
|
||||
top: 8px;
|
||||
left: 56px;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
.lds-grid div:nth-child(4) {
|
||||
top: 32px;
|
||||
left: 8px;
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
.lds-grid div:nth-child(5) {
|
||||
top: 32px;
|
||||
left: 32px;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
.lds-grid div:nth-child(6) {
|
||||
top: 32px;
|
||||
left: 56px;
|
||||
animation-delay: -1.2s;
|
||||
}
|
||||
.lds-grid div:nth-child(7) {
|
||||
top: 56px;
|
||||
left: 8px;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
.lds-grid div:nth-child(8) {
|
||||
top: 56px;
|
||||
left: 32px;
|
||||
animation-delay: -1.2s;
|
||||
}
|
||||
.lds-grid div:nth-child(9) {
|
||||
top: 56px;
|
||||
left: 56px;
|
||||
animation-delay: -1.6s;
|
||||
}
|
||||
@keyframes lds-grid {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
BIN
static/images/favicon.png
Normal file
BIN
static/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
5
static/jquery-1.11.3.min.js
vendored
Normal file
5
static/jquery-1.11.3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
18
static/test.html
Normal file
18
static/test.html
Normal file
@ -0,0 +1,18 @@
|
||||
<h1>Testpage</h1>
|
||||
<div style="width: 150px; float: left; padding: 5px;">
|
||||
<img src="https://imdb-api.com/images/original/MV5BNjM0NTc0NzItM2FlYS00YzEwLWE0YmUtNTA2ZWIzODc2OTgxXkEyXkFqcGdeQXVyNTgwNzIyNzg@._V1_Ratio0.6800_AL_.jpg" style="width: 100%;">
|
||||
<br>
|
||||
<center><b>Txt</b></center>
|
||||
</div>
|
||||
|
||||
<div style="width: 150px; float: left; padding: 5px;">
|
||||
<img src="https://imdb-api.com/images/original/MV5BNjM0NTc0NzItM2FlYS00YzEwLWE0YmUtNTA2ZWIzODc2OTgxXkEyXkFqcGdeQXVyNTgwNzIyNzg@._V1_Ratio0.6800_AL_.jpg" style="width: 100%;">
|
||||
<br>
|
||||
<center><b>Txt 2</b></center>
|
||||
</div>
|
||||
|
||||
<div style="width: 150px; float: left; padding: 5px;">
|
||||
<img src="https://imdb-api.com/images/original/MV5BNjM0NTc0NzItM2FlYS00YzEwLWE0YmUtNTA2ZWIzODc2OTgxXkEyXkFqcGdeQXVyNTgwNzIyNzg@._V1_Ratio0.6800_AL_.jpg" style="width: 100%;">
|
||||
<br>
|
||||
<center><b>Txt 3</b></center>
|
||||
</div>
|
||||
206
static/video.js
Normal file
206
static/video.js
Normal file
@ -0,0 +1,206 @@
|
||||
var videoElement = document.querySelector('video');
|
||||
var canvas = document.getElementById('pcCanvas');
|
||||
var mobileCanvas = document.getElementById('mobileCanvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
var mobileCtx = mobileCanvas.getContext('2d');
|
||||
var videoSelect = document.querySelector('select#videoSource');
|
||||
var videoOption = document.getElementById('videoOption');
|
||||
var buttonGo = document.getElementById('go');
|
||||
var barcode_result = document.getElementById('dbr');
|
||||
|
||||
var isPaused = false;
|
||||
var videoWidth = 640,
|
||||
videoHeight = 480;
|
||||
var mobileVideoWidth = 240,
|
||||
mobileVideoHeight = 320;
|
||||
var isPC = true;
|
||||
|
||||
var ZXing = null;
|
||||
var decodePtr = null;
|
||||
|
||||
var tick = function () {
|
||||
if (window.ZXing) {
|
||||
ZXing = ZXing();
|
||||
decodePtr = ZXing.Runtime.addFunction(decodeCallback);
|
||||
} else {
|
||||
setTimeout(tick, 10);
|
||||
}
|
||||
};
|
||||
tick();
|
||||
|
||||
var decodeCallback = function (ptr, len, resultIndex, resultCount) {
|
||||
var result = new Uint8Array(ZXing.HEAPU8.buffer, ptr, len);
|
||||
console.log(String.fromCharCode.apply(null, result));
|
||||
barcode_result.textContent = String.fromCharCode.apply(null, result);
|
||||
buttonGo.disabled = false;
|
||||
if (isPC) {
|
||||
canvas.style.display = 'block';
|
||||
} else {
|
||||
mobileCanvas.style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
// check devices
|
||||
function browserRedirect() {
|
||||
var deviceType;
|
||||
var sUserAgent = navigator.userAgent.toLowerCase();
|
||||
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
||||
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
||||
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
||||
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
||||
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
||||
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
||||
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
||||
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||||
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
|
||||
deviceType = 'phone';
|
||||
} else {
|
||||
deviceType = 'pc';
|
||||
}
|
||||
return deviceType;
|
||||
}
|
||||
|
||||
if (browserRedirect() == 'pc') {
|
||||
isPC = true;
|
||||
} else {
|
||||
isPC = false;
|
||||
}
|
||||
|
||||
// stackoverflow: http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158
|
||||
function dataURItoBlob(dataURI) {
|
||||
// convert base64/URLEncoded data component to raw binary data held in a string
|
||||
var byteString;
|
||||
if (dataURI.split(',')[0].indexOf('base64') >= 0)
|
||||
byteString = atob(dataURI.split(',')[1]);
|
||||
else
|
||||
byteString = unescape(dataURI.split(',')[1]);
|
||||
|
||||
// separate out the mime component
|
||||
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
|
||||
|
||||
// write the bytes of the string to a typed array
|
||||
var ia = new Uint8Array(byteString.length);
|
||||
for (var i = 0; i < byteString.length; i++) {
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
}
|
||||
|
||||
return new Blob([ia], {
|
||||
type: mimeString
|
||||
});
|
||||
}
|
||||
|
||||
// add button event
|
||||
buttonGo.onclick = function () {
|
||||
if (isPC) {
|
||||
canvas.style.display = 'none';
|
||||
} else {
|
||||
mobileCanvas.style.display = 'none';
|
||||
}
|
||||
|
||||
isPaused = false;
|
||||
scanBarcode();
|
||||
buttonGo.disabled = true;
|
||||
};
|
||||
|
||||
// scan barcode
|
||||
function scanBarcode() {
|
||||
barcode_result.textContent = "";
|
||||
|
||||
if (ZXing == null) {
|
||||
buttonGo.disabled = false;
|
||||
alert("Barcode Reader is not ready!");
|
||||
return;
|
||||
}
|
||||
|
||||
var data = null,
|
||||
context = null,
|
||||
width = 0,
|
||||
height = 0,
|
||||
dbrCanvas = null;
|
||||
|
||||
if (isPC) {
|
||||
context = ctx;
|
||||
width = videoWidth;
|
||||
height = videoHeight;
|
||||
dbrCanvas = canvas;
|
||||
} else {
|
||||
context = mobileCtx;
|
||||
width = mobileVideoWidth;
|
||||
height = mobileVideoHeight;
|
||||
dbrCanvas = mobileCanvas;
|
||||
}
|
||||
|
||||
context.drawImage(videoElement, 0, 0, width, height);
|
||||
|
||||
var vid = document.getElementById("video");
|
||||
console.log("video width: " + vid.videoWidth + ", height: " + vid.videoHeight);
|
||||
var barcodeCanvas = document.createElement("canvas");
|
||||
barcodeCanvas.width = vid.videoWidth;
|
||||
barcodeCanvas.height = vid.videoHeight;
|
||||
var barcodeContext = barcodeCanvas.getContext('2d');
|
||||
var imageWidth = vid.videoWidth, imageHeight = vid.videoHeight;
|
||||
barcodeContext.drawImage(videoElement, 0, 0, imageWidth, imageHeight);
|
||||
// read barcode
|
||||
var imageData = barcodeContext.getImageData(0, 0, imageWidth, imageHeight);
|
||||
var idd = imageData.data;
|
||||
var image = ZXing._resize(imageWidth, imageHeight);
|
||||
console.time("decode barcode");
|
||||
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
|
||||
ZXing.HEAPU8[image + j] = idd[i];
|
||||
}
|
||||
var err = ZXing._decode_any(decodePtr);
|
||||
console.timeEnd('decode barcode');
|
||||
console.log("error code", err);
|
||||
if (err == -2) {
|
||||
setTimeout(scanBarcode, 30);
|
||||
}
|
||||
}
|
||||
// https://github.com/samdutton/simpl/tree/gh-pages/getusermedia/sources
|
||||
var videoSelect = document.querySelector('select#videoSource');
|
||||
|
||||
navigator.mediaDevices.enumerateDevices()
|
||||
.then(gotDevices).then(getStream).catch(handleError);
|
||||
|
||||
videoSelect.onchange = getStream;
|
||||
|
||||
function gotDevices(deviceInfos) {
|
||||
for (var i = deviceInfos.length - 1; i >= 0; --i) {
|
||||
var deviceInfo = deviceInfos[i];
|
||||
var option = document.createElement('option');
|
||||
option.value = deviceInfo.deviceId;
|
||||
if (deviceInfo.kind === 'videoinput') {
|
||||
option.text = deviceInfo.label || 'camera ' +
|
||||
(videoSelect.length + 1);
|
||||
videoSelect.appendChild(option);
|
||||
} else {455
|
||||
console.log('Found one other kind of source/device: ', deviceInfo);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getStream() {
|
||||
buttonGo.disabled = false;
|
||||
if (window.stream) {
|
||||
window.stream.getTracks().forEach(function(track) {
|
||||
track.stop();
|
||||
});
|
||||
}
|
||||
|
||||
var constraints = {
|
||||
video: {
|
||||
deviceId: {exact: videoSelect.value}
|
||||
}
|
||||
};
|
||||
|
||||
navigator.mediaDevices.getUserMedia(constraints).
|
||||
then(gotStream).catch(handleError);
|
||||
}
|
||||
|
||||
function gotStream(stream) {
|
||||
window.stream = stream; // make stream available to console
|
||||
videoElement.srcObject = stream;
|
||||
}
|
||||
|
||||
function handleError(error) {
|
||||
console.log('Error: ', error);
|
||||
}
|
||||
36
static/zxing.js
Normal file
36
static/zxing.js
Normal file
File diff suppressed because one or more lines are too long
211
template/add.html
Normal file
211
template/add.html
Normal file
@ -0,0 +1,211 @@
|
||||
<!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>
|
||||
|
||||
/* In order to place the tracking correctly */
|
||||
canvas.drawing, canvas.drawingBuffer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
</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 class="container">
|
||||
<div class="row">
|
||||
<div class="one-half column" style="margin-top: 15%" id="mainCont">
|
||||
<h4>OpenMovieDB - Add a new movie</h4>
|
||||
<!-- Div to show the scanner -->
|
||||
<% if(it.isDisplay == true) { %>
|
||||
<%= it.titleByAPI %><br>
|
||||
<%= it.id %><br>
|
||||
<img src="<%= it.cover %>" alt="Cover image" style="height: 200px;"></img><br>
|
||||
<button onclick="saveToLibary()"> Add to libary</button>
|
||||
<% } else{ %>
|
||||
<div id="scanner-container"></div>
|
||||
<input type="button" id="btn" value="Start/Stop the scanner" />
|
||||
<div id="currentEAN">EAN: Waiting for valid EAN...</div>
|
||||
<button onclick="sendEanConvRequest()" disabled id="searchBtn"> <i class="fas fa-search"></i>Search</button>
|
||||
<button onclick="window.location.href = '/'"><i class="fas fa-home"></i> Back to home</button>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Include the image-diff library -->
|
||||
|
||||
<script>
|
||||
setTimeout(function(){
|
||||
document.getElementById("btn").style.backgroundColor = "rgba(255, 0, 0, 0.5)";
|
||||
document.getElementById("searchBtn").style.backgroundColor = "rgba(10, 10, 10, 0.5);"
|
||||
}, 20)
|
||||
|
||||
var _scannerIsRunning = false;
|
||||
|
||||
function startScanner() {
|
||||
Quagga.init({
|
||||
inputStream: {
|
||||
name: "Live",
|
||||
type: "LiveStream",
|
||||
target: document.querySelector('#scanner-container'),
|
||||
constraints: {
|
||||
width: 480,
|
||||
height: 320,
|
||||
facingMode: "environment"
|
||||
},
|
||||
},
|
||||
decoder: {
|
||||
readers: [
|
||||
"code_128_reader",
|
||||
"ean_reader",
|
||||
"ean_8_reader",
|
||||
"code_39_reader",
|
||||
"code_39_vin_reader",
|
||||
"codabar_reader",
|
||||
"upc_reader",
|
||||
"upc_e_reader",
|
||||
"i2of5_reader"
|
||||
],
|
||||
debug: {
|
||||
showCanvas: false,
|
||||
showPatches: false,
|
||||
showFoundPatches: false,
|
||||
showSkeleton: false,
|
||||
showLabels: false,
|
||||
showPatchLabels: false,
|
||||
showRemainingPatchLabels: false,
|
||||
boxFromPatches: {
|
||||
showTransformed: false,
|
||||
showTransformedBox: false,
|
||||
showBB: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}, function (err) {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
return
|
||||
}
|
||||
|
||||
console.log("Initialization finished. Ready to start");
|
||||
Quagga.start();
|
||||
|
||||
// Set flag to is running
|
||||
_scannerIsRunning = true;
|
||||
});
|
||||
|
||||
/*Quagga.onProcessed(function (result) {
|
||||
//var drawingCtx = Quagga.canvas.ctx.overlay,
|
||||
//drawingCanvas = Quagga.canvas.dom.overlay;
|
||||
|
||||
/*if (result) {
|
||||
if (result.boxes) {
|
||||
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
|
||||
result.boxes.filter(function (box) {
|
||||
return box !== result.box;
|
||||
}).forEach(function (box) {
|
||||
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
|
||||
});
|
||||
}
|
||||
|
||||
if (result.box) {
|
||||
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
|
||||
}
|
||||
|
||||
if (result.codeResult && result.codeResult.code) {
|
||||
Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
|
||||
}
|
||||
}
|
||||
});*/
|
||||
|
||||
|
||||
Quagga.onDetected(function (result) {
|
||||
console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
|
||||
if(String(result.codeResult.code).length == 13){
|
||||
document.getElementById("currentEAN").innerHTML = "EAN: " + result.codeResult.code
|
||||
console.log(result.codeResult.code)
|
||||
document.getElementById("searchBtn").style.backgroundColor = "color: #555;"
|
||||
document.getElementById("searchBtn").disabled = false;
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Start/stop scanner
|
||||
document.getElementById("btn").addEventListener("click", function () {
|
||||
if (_scannerIsRunning) {
|
||||
document.getElementById("btn").style.backgroundColor = "rgba(255, 0, 0, 0.5)";
|
||||
Quagga.stop();
|
||||
} else {
|
||||
document.getElementById("btn").style.backgroundColor = "rgba(0, 255, 0, 0.5)";
|
||||
startScanner();
|
||||
}
|
||||
}, false);
|
||||
|
||||
function sendEanConvRequest(){
|
||||
curEan = document.getElementById("currentEAN").innerHTML
|
||||
curEan = curEan.replace("EAN: ", "")
|
||||
document.getElementById("mainCont").innerHTML = "<h4>OpenMovieDB - Add a new movie</h4><center><div class=\"lds-grid\"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><br><i>Searching database...</i></center>";
|
||||
if(curEan[0] == "0"){
|
||||
curEan = curEan.substring(1);
|
||||
}
|
||||
url = "/apiCallBack?ean=" + curEan;
|
||||
//window.open(url)
|
||||
$.get(url,function(data,status) {
|
||||
var respon = JSON.parse(data)
|
||||
if(respon.state == "OK"){
|
||||
url = "/returnSaveResult?reponseID=" + respon.reponseID;
|
||||
window.location.href = url
|
||||
}else{
|
||||
// alert("An error with the api occured.")
|
||||
document.getElementById("mainCont").innerHTML = "<h4>OpenMovieDB - Add a new movie</h4><center><i style='color: #cc0000; font-size: 100px;' class=\"fas fa-exclamation-circle\"></i><br>Ohno, the API returned an error. Errorcode: <br> <code>" + respon.state + "</code><br><br><button onclick=\"window.location.href = '/'\"><i class=\"fas fa-home\"></i> Back to home</button></center>"
|
||||
}
|
||||
console.log(data);
|
||||
},'html');
|
||||
//alert(curEan)
|
||||
}
|
||||
|
||||
function saveToLibary(){
|
||||
url = "/save?ean=<%= it.ean %>";
|
||||
|
||||
$.get(url,function(data,status) { console.log(data); console.log(status) },'html');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
133
template/addToShelf.html
Normal file
133
template/addToShelf.html
Normal 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>
|
||||
90
template/bookshelf.html
Normal file
90
template/bookshelf.html
Normal file
@ -0,0 +1,90 @@
|
||||
<!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" />
|
||||
|
||||
<!-- Favicon
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<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
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="eleven column" style="margin-top: 15%">
|
||||
<h4>OpenMovieDB - Bookshelf</h4>
|
||||
<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"></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 href='/showDetails?id=" + currenElm.movieID + "'><div style='width: 150px; float: left; padding: 5px;'><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 href='/showDetails?id=" + currenElm.movieID + "'><div style='width: 150px; float: left; padding: 5px;'><img src='" + currenElm.posterUrl + '\' style="width: 100%;"><br><center><b>' + currenElm.movieTitel + "</b></center></div></a>"
|
||||
i++;
|
||||
}
|
||||
|
||||
</script>
|
||||
<!-- End Document
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
</body>
|
||||
</html>
|
||||
138
template/index.html
Normal file
138
template/index.html
Normal file
@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
/* In order to place the tracking correctly */
|
||||
canvas.drawing, canvas.drawingBuffer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<%= it.titleByAPI %><br>
|
||||
<%= it.id %><br>
|
||||
<img src="<%= it.cover %>" alt="Cover image" style="height: 200px;"></img>
|
||||
<!-- Div to show the scanner -->
|
||||
<div id="scanner-container"></div>
|
||||
<input type="button" id="btn" value="Start/Stop the scanner" />
|
||||
<div id="currentEAN">Waiting for proper EAN..</div>
|
||||
<button onclick="sendEanConvRequest()"> Search</button>
|
||||
|
||||
<!-- Include the image-diff library -->
|
||||
|
||||
<script>
|
||||
var _scannerIsRunning = false;
|
||||
|
||||
function startScanner() {
|
||||
Quagga.init({
|
||||
inputStream: {
|
||||
name: "Live",
|
||||
type: "LiveStream",
|
||||
target: document.querySelector('#scanner-container'),
|
||||
constraints: {
|
||||
width: 480,
|
||||
height: 320,
|
||||
facingMode: "environment"
|
||||
},
|
||||
},
|
||||
decoder: {
|
||||
readers: [
|
||||
"code_128_reader",
|
||||
"ean_reader",
|
||||
"ean_8_reader",
|
||||
"code_39_reader",
|
||||
"code_39_vin_reader",
|
||||
"codabar_reader",
|
||||
"upc_reader",
|
||||
"upc_e_reader",
|
||||
"i2of5_reader"
|
||||
],
|
||||
debug: {
|
||||
showCanvas: true,
|
||||
showPatches: true,
|
||||
showFoundPatches: true,
|
||||
showSkeleton: true,
|
||||
showLabels: true,
|
||||
showPatchLabels: true,
|
||||
showRemainingPatchLabels: true,
|
||||
boxFromPatches: {
|
||||
showTransformed: true,
|
||||
showTransformedBox: true,
|
||||
showBB: true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}, function (err) {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
return
|
||||
}
|
||||
|
||||
console.log("Initialization finished. Ready to start");
|
||||
Quagga.start();
|
||||
|
||||
// Set flag to is running
|
||||
_scannerIsRunning = true;
|
||||
});
|
||||
|
||||
Quagga.onProcessed(function (result) {
|
||||
var drawingCtx = Quagga.canvas.ctx.overlay,
|
||||
drawingCanvas = Quagga.canvas.dom.overlay;
|
||||
|
||||
if (result) {
|
||||
if (result.boxes) {
|
||||
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
|
||||
result.boxes.filter(function (box) {
|
||||
return box !== result.box;
|
||||
}).forEach(function (box) {
|
||||
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
|
||||
});
|
||||
}
|
||||
|
||||
if (result.box) {
|
||||
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
|
||||
}
|
||||
|
||||
if (result.codeResult && result.codeResult.code) {
|
||||
Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Quagga.onDetected(function (result) {
|
||||
console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
|
||||
if(String(result.codeResult.code).length == 13){
|
||||
document.getElementById("currentEAN").innerHTML = result.codeResult.code
|
||||
console.log(result.codeResult.code)
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Start/stop scanner
|
||||
document.getElementById("btn").addEventListener("click", function () {
|
||||
if (_scannerIsRunning) {
|
||||
Quagga.stop();
|
||||
} else {
|
||||
startScanner();
|
||||
}
|
||||
}, false);
|
||||
|
||||
function sendEanConvRequest(){
|
||||
url = "/apiCallBack?ean=" + document.getElementById("currentEAN").innerHTML;
|
||||
window.open(url)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
126
template/movieDetails.html
Normal file
126
template/movieDetails.html
Normal file
@ -0,0 +1,126 @@
|
||||
<!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">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></center>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
function on() {
|
||||
document.getElementById("overlay").style.display = "block";
|
||||
}
|
||||
|
||||
function off() {
|
||||
document.getElementById("overlay").style.display = "none";
|
||||
document.getElementById("overlay2").style.display = "none";
|
||||
}
|
||||
|
||||
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>
|
||||
26
testEANconver.js
Normal file
26
testEANconver.js
Normal file
@ -0,0 +1,26 @@
|
||||
|
||||
|
||||
|
||||
|
||||
/*const FormData = require('form-data');
|
||||
const http = require('http');
|
||||
|
||||
const form = new FormData();
|
||||
form.append('SText', '4010884546217');
|
||||
form.append('Kat', 'EAN');
|
||||
const uploadResponse = fetch("https://ssl.ofdb.de/view.php?page=suchergebnis", {method: 'POST', body: form });
|
||||
|
||||
setTimeout(() => {
|
||||
console.log(uploadResponse)
|
||||
}, 500);
|
||||
*/
|
||||
|
||||
const { URLSearchParams } = require('url');
|
||||
const fetch = require('node-fetch');
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.append('SText', '4010884546217');
|
||||
params.append('Kat', 'EAN');
|
||||
|
||||
fetch('https://ssl.ofdb.de/view.php?page=suchergebnis', { method: 'POST', body: params })
|
||||
.then(res => console.log(res.statusCode))
|
||||
Reference in New Issue
Block a user