init
This commit is contained in:
commit
491b68c3c3
16 changed files with 637 additions and 0 deletions
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
.idea
|
||||||
|
.vs
|
||||||
|
.vscode
|
||||||
|
|
||||||
|
css/
|
||||||
|
node_modules
|
||||||
|
tmp/
|
||||||
2
README.md
Normal file
2
README.md
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
# Jensmemes
|
||||||
|
The new <a href="https://jensmem.es">jensmem.es</a> Website!
|
||||||
80
index.html
Normal file
80
index.html
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Jensmemes</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header id="header">
|
||||||
|
<!-- Trigger/Open The Modal -->
|
||||||
|
<button id="openInfo"></button>
|
||||||
|
|
||||||
|
<!-- The Modal -->
|
||||||
|
<div id="info" class="modal">
|
||||||
|
|
||||||
|
<!-- Modal content -->
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<span class="close">×</span>
|
||||||
|
<h2>Jensmemes</h2>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p>
|
||||||
|
Das Token für das Login kannst du im Discord von Jens bzw. in Anvilcraft -Discord über den Befehl !register erhalten. Es wird nach der Eingabe für 30 Tage im Browser gespeichert - dannach muss es neu eingegeben werden. Durch den Logout-Button rechts kann mann es löschen.
|
||||||
|
</p>
|
||||||
|
<b>Erstellt von:</b>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://data.tilera.xyz/git/JensMemes/jmserver">tilera - API</a></li>
|
||||||
|
<li><a href="https://data.tilera.xyz/git/LordMZTE/jensmemesclient">LordMZTE - CLI CLient</a></li>
|
||||||
|
<li><a href="http://gitlab.a-hoefler.eu/ha/jensmemes">ITbyHF - Website</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="catswitcher">
|
||||||
|
Category:
|
||||||
|
<select id="categorySelect">
|
||||||
|
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="uploadForm">
|
||||||
|
<input type="file" id="fileToUpload" name="fileToUpload">
|
||||||
|
<span id="_jmtoken"> <input type="text" id="jmtoken" placeholder="JM Token">
|
||||||
|
</span>
|
||||||
|
<input type="text" id="jmcat" placeholder="JM Category id">
|
||||||
|
<input type="button" id="submitUpload" onclick="uploadFile()" value="Hochladen">
|
||||||
|
<span id="output"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img id="logout-btn" src="https://cdn.a-hoefler.eu/apps/p5mtz51z2c/login.png" onclick="logout()">
|
||||||
|
|
||||||
|
<div class="loginmodal" id="loginmodal">
|
||||||
|
<div class="loginmodal-content">
|
||||||
|
<div class="loginmodal-header">
|
||||||
|
<span class="loginclose">×</span>
|
||||||
|
<h2>Login</h2>
|
||||||
|
</div>
|
||||||
|
<div class="loginmodal-body">
|
||||||
|
<i>JensMemes - Token:</i> <input type="text" id="jmlogintoken"><br>
|
||||||
|
<input type="button" onclick="login()" value="Anmelden" id="btn-login">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<div class="images">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
<script src="js/modal.js"></script>
|
||||||
|
<script src="js/upload.js"></script>
|
||||||
|
<script src="js/libs/md5.min.js"></script>
|
||||||
|
<script src="js/login.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2
js/libs/md5.min.js
vendored
Normal file
2
js/libs/md5.min.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
!function(n){"use strict";function d(n,t){var r=(65535&n)+(65535&t);return(n>>16)+(t>>16)+(r>>16)<<16|65535&r}function f(n,t,r,e,o,u){return d((c=d(d(t,n),d(e,u)))<<(f=o)|c>>>32-f,r);var c,f}function l(n,t,r,e,o,u,c){return f(t&r|~t&e,n,t,o,u,c)}function v(n,t,r,e,o,u,c){return f(t&e|r&~e,n,t,o,u,c)}function g(n,t,r,e,o,u,c){return f(t^r^e,n,t,o,u,c)}function m(n,t,r,e,o,u,c){return f(r^(t|~e),n,t,o,u,c)}function i(n,t){var r,e,o,u;n[t>>5]|=128<<t%32,n[14+(t+64>>>9<<4)]=t;for(var c=1732584193,f=-271733879,i=-1732584194,a=271733878,h=0;h<n.length;h+=16)c=l(r=c,e=f,o=i,u=a,n[h],7,-680876936),a=l(a,c,f,i,n[h+1],12,-389564586),i=l(i,a,c,f,n[h+2],17,606105819),f=l(f,i,a,c,n[h+3],22,-1044525330),c=l(c,f,i,a,n[h+4],7,-176418897),a=l(a,c,f,i,n[h+5],12,1200080426),i=l(i,a,c,f,n[h+6],17,-1473231341),f=l(f,i,a,c,n[h+7],22,-45705983),c=l(c,f,i,a,n[h+8],7,1770035416),a=l(a,c,f,i,n[h+9],12,-1958414417),i=l(i,a,c,f,n[h+10],17,-42063),f=l(f,i,a,c,n[h+11],22,-1990404162),c=l(c,f,i,a,n[h+12],7,1804603682),a=l(a,c,f,i,n[h+13],12,-40341101),i=l(i,a,c,f,n[h+14],17,-1502002290),c=v(c,f=l(f,i,a,c,n[h+15],22,1236535329),i,a,n[h+1],5,-165796510),a=v(a,c,f,i,n[h+6],9,-1069501632),i=v(i,a,c,f,n[h+11],14,643717713),f=v(f,i,a,c,n[h],20,-373897302),c=v(c,f,i,a,n[h+5],5,-701558691),a=v(a,c,f,i,n[h+10],9,38016083),i=v(i,a,c,f,n[h+15],14,-660478335),f=v(f,i,a,c,n[h+4],20,-405537848),c=v(c,f,i,a,n[h+9],5,568446438),a=v(a,c,f,i,n[h+14],9,-1019803690),i=v(i,a,c,f,n[h+3],14,-187363961),f=v(f,i,a,c,n[h+8],20,1163531501),c=v(c,f,i,a,n[h+13],5,-1444681467),a=v(a,c,f,i,n[h+2],9,-51403784),i=v(i,a,c,f,n[h+7],14,1735328473),c=g(c,f=v(f,i,a,c,n[h+12],20,-1926607734),i,a,n[h+5],4,-378558),a=g(a,c,f,i,n[h+8],11,-2022574463),i=g(i,a,c,f,n[h+11],16,1839030562),f=g(f,i,a,c,n[h+14],23,-35309556),c=g(c,f,i,a,n[h+1],4,-1530992060),a=g(a,c,f,i,n[h+4],11,1272893353),i=g(i,a,c,f,n[h+7],16,-155497632),f=g(f,i,a,c,n[h+10],23,-1094730640),c=g(c,f,i,a,n[h+13],4,681279174),a=g(a,c,f,i,n[h],11,-358537222),i=g(i,a,c,f,n[h+3],16,-722521979),f=g(f,i,a,c,n[h+6],23,76029189),c=g(c,f,i,a,n[h+9],4,-640364487),a=g(a,c,f,i,n[h+12],11,-421815835),i=g(i,a,c,f,n[h+15],16,530742520),c=m(c,f=g(f,i,a,c,n[h+2],23,-995338651),i,a,n[h],6,-198630844),a=m(a,c,f,i,n[h+7],10,1126891415),i=m(i,a,c,f,n[h+14],15,-1416354905),f=m(f,i,a,c,n[h+5],21,-57434055),c=m(c,f,i,a,n[h+12],6,1700485571),a=m(a,c,f,i,n[h+3],10,-1894986606),i=m(i,a,c,f,n[h+10],15,-1051523),f=m(f,i,a,c,n[h+1],21,-2054922799),c=m(c,f,i,a,n[h+8],6,1873313359),a=m(a,c,f,i,n[h+15],10,-30611744),i=m(i,a,c,f,n[h+6],15,-1560198380),f=m(f,i,a,c,n[h+13],21,1309151649),c=m(c,f,i,a,n[h+4],6,-145523070),a=m(a,c,f,i,n[h+11],10,-1120210379),i=m(i,a,c,f,n[h+2],15,718787259),f=m(f,i,a,c,n[h+9],21,-343485551),c=d(c,r),f=d(f,e),i=d(i,o),a=d(a,u);return[c,f,i,a]}function a(n){for(var t="",r=32*n.length,e=0;e<r;e+=8)t+=String.fromCharCode(n[e>>5]>>>e%32&255);return t}function h(n){var t=[];for(t[(n.length>>2)-1]=void 0,e=0;e<t.length;e+=1)t[e]=0;for(var r=8*n.length,e=0;e<r;e+=8)t[e>>5]|=(255&n.charCodeAt(e/8))<<e%32;return t}function e(n){for(var t,r="0123456789abcdef",e="",o=0;o<n.length;o+=1)t=n.charCodeAt(o),e+=r.charAt(t>>>4&15)+r.charAt(15&t);return e}function r(n){return unescape(encodeURIComponent(n))}function o(n){return a(i(h(t=r(n)),8*t.length));var t}function u(n,t){return function(n,t){var r,e,o=h(n),u=[],c=[];for(u[15]=c[15]=void 0,16<o.length&&(o=i(o,8*n.length)),r=0;r<16;r+=1)u[r]=909522486^o[r],c[r]=1549556828^o[r];return e=i(u.concat(h(t)),512+8*t.length),a(i(c.concat(e),640))}(r(n),r(t))}function t(n,t,r){return t?r?u(t,n):e(u(t,n)):r?o(n):e(o(n))}"function"==typeof define&&define.amd?define(function(){return t}):"object"==typeof module&&module.exports?module.exports=t:n.md5=t}(this);
|
||||||
|
//# sourceMappingURL=md5.min.js.map
|
||||||
1
js/libs/md5.min.js.map
Normal file
1
js/libs/md5.min.js.map
Normal file
File diff suppressed because one or more lines are too long
89
js/login.js
Normal file
89
js/login.js
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
let _jmtoken = document.getElementById("_jmtoken");
|
||||||
|
if(!getCookie("jmtoken")){
|
||||||
|
}else{
|
||||||
|
_jmtoken.innerHTML="";
|
||||||
|
$.ajax({
|
||||||
|
url: 'https://data.tilera.xyz/api/jensmemes/users',
|
||||||
|
type: 'get',
|
||||||
|
contentType: false,
|
||||||
|
processData: false,
|
||||||
|
success: function(response){
|
||||||
|
if(response != 0){
|
||||||
|
$.each(response["users"], function () {
|
||||||
|
if (this["tokenhash"]==md5(getCookie("jmtoken"))){
|
||||||
|
_jmtoken.innerHTML="<i id='logged-in'>"+this["name"]+"</i>";
|
||||||
|
document.getElementById("logout-btn").src = "https://cdn.a-hoefler.eu/apps/ebstgymidx/logout.png";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
console.log("API fetch for users failed");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//Login Modal
|
||||||
|
var loginModal = document.getElementById("loginmodal");
|
||||||
|
|
||||||
|
// Get the button that opens the modal
|
||||||
|
var openLogin = document.getElementById("btn-logout");
|
||||||
|
|
||||||
|
// Get the <span> element that closes the modal
|
||||||
|
var closeLogin = document.getElementsByClassName("loginclose")[0];
|
||||||
|
|
||||||
|
// When the user clicks on <span> (x), close the modal
|
||||||
|
closeLogin.onclick = function() {
|
||||||
|
loginModal.style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
// When the user clicks anywhere outside of the modal, close it
|
||||||
|
window.onclick = function(event) {
|
||||||
|
if (event.target == loginModal) {
|
||||||
|
loginModal.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function logout(){
|
||||||
|
if(!getCookie("jmtoken")){
|
||||||
|
loginModal.style.display = "block";
|
||||||
|
} else{
|
||||||
|
//User is logged in
|
||||||
|
document.cookie = "jmtoken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
|
||||||
|
location.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function login(){
|
||||||
|
setCookie("jmtoken",document.getElementById("jmlogintoken").value,30);
|
||||||
|
location.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function setCookie(cname, cvalue, exdays) {
|
||||||
|
var d = new Date();
|
||||||
|
d.setTime(d.getTime() + (exdays*24*60*60*1000));
|
||||||
|
var expires = "expires="+ d.toUTCString();
|
||||||
|
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
|
||||||
|
}
|
||||||
|
function getCookie(cname) {
|
||||||
|
var name = cname + "=";
|
||||||
|
var decodedCookie = decodeURIComponent(document.cookie);
|
||||||
|
var ca = decodedCookie.split(';');
|
||||||
|
for(var i = 0; i <ca.length; i++) {
|
||||||
|
var c = ca[i];
|
||||||
|
while (c.charAt(0) == ' ') {
|
||||||
|
c = c.substring(1);
|
||||||
|
}
|
||||||
|
if (c.indexOf(name) == 0) {
|
||||||
|
return c.substring(name.length, c.length);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
}
|
||||||
119
js/main.js
Normal file
119
js/main.js
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
let offset = 0;
|
||||||
|
let maxView = 50;
|
||||||
|
let offsetLoadNext = 200;
|
||||||
|
|
||||||
|
let memes;
|
||||||
|
let categories = [];
|
||||||
|
let categorySelect = document.querySelector("#categorySelect");
|
||||||
|
let imagesDiv = document.querySelector(".images");
|
||||||
|
let docElem = document.documentElement;
|
||||||
|
let docBody = document.body;
|
||||||
|
|
||||||
|
|
||||||
|
addCategory({
|
||||||
|
name: "All",
|
||||||
|
id: "all"
|
||||||
|
});
|
||||||
|
|
||||||
|
let xhr = new XMLHttpRequest();
|
||||||
|
xhr.onreadystatechange = function (){
|
||||||
|
if(this.status === 200 && this.readyState === 4){
|
||||||
|
memes = JSON.parse(this.responseText)["memes"];
|
||||||
|
updateImages();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
xhr.open("GET", "https://api.tilera.xyz/jensmemes/v1/memes");
|
||||||
|
xhr.send();
|
||||||
|
|
||||||
|
|
||||||
|
xhr = new XMLHttpRequest();
|
||||||
|
xhr.onreadystatechange = function (){
|
||||||
|
if(this.status === 200 && this.readyState === 4){
|
||||||
|
let categories = JSON.parse(this.responseText)["categories"];
|
||||||
|
categories.forEach((element) => {
|
||||||
|
addCategory(element);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
xhr.open("GET", "https://api.tilera.xyz/jensmemes/v1/categories");
|
||||||
|
xhr.send();
|
||||||
|
|
||||||
|
function addCategory(category){
|
||||||
|
let optionItem = document.createElement("option");
|
||||||
|
optionItem.setAttribute("value", category["id"]);
|
||||||
|
optionItem.innerText = category["name"];
|
||||||
|
categorySelect.appendChild(optionItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateImages(clear = false){
|
||||||
|
if(clear){
|
||||||
|
imagesDiv.innerHTML = "";
|
||||||
|
offset = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
let category = categorySelect.value
|
||||||
|
console.log("showing all elements of category " + category);
|
||||||
|
let count = 0;
|
||||||
|
console.log("offset: " + offset + " meme length: " + memes.length)
|
||||||
|
for(let i = offset; i < memes.length; i++){
|
||||||
|
let meme = memes[i];
|
||||||
|
if(category === meme["category"] || category === "all" && count < maxView){
|
||||||
|
count++;
|
||||||
|
let container = document.createElement("div")
|
||||||
|
container.className = "imgContainer";
|
||||||
|
|
||||||
|
if(endsWithArray(meme["link"], [".mp4", ".3gp"])){
|
||||||
|
let video = document.createElement("video")
|
||||||
|
video.setAttribute("src", meme["link"]);
|
||||||
|
video.setAttribute("controls", "");
|
||||||
|
video.setAttribute("onerror", "imageNotFound();");
|
||||||
|
video.setAttribute("onclick", "openImgInNewTab(this);");
|
||||||
|
container.appendChild(video);
|
||||||
|
} else {
|
||||||
|
let image = document.createElement("img")
|
||||||
|
image.setAttribute("src", meme["link"]);
|
||||||
|
image.setAttribute("onerror", "imageNotFound(this);");
|
||||||
|
image.setAttribute("onclick", "openImgInNewTab(this);");
|
||||||
|
container.appendChild(image);
|
||||||
|
}
|
||||||
|
imagesDiv.appendChild(container);
|
||||||
|
|
||||||
|
} else if(count >= maxView){
|
||||||
|
offset = i;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
offset = memes.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function endsWithArray(text = "", array = []){
|
||||||
|
for(let i = 0; i < array.length; i++){
|
||||||
|
if(text.endsWith(array[i])){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('scroll', (event) => {
|
||||||
|
let scrollTop = (docBody.scrollTop || docElem.scrollTop);
|
||||||
|
let height = docElem.scrollHeight - docElem.clientHeight;
|
||||||
|
if(scrollTop + offsetLoadNext > height){
|
||||||
|
updateImages();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
categorySelect.onchange = () => {
|
||||||
|
updateImages(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function imageNotFound(element) {
|
||||||
|
console.log("deleting " + element.getAttribute("src") + ", because not found");
|
||||||
|
element.parentNode.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
function openImgInNewTab(element){
|
||||||
|
window.open(element.src);
|
||||||
|
}
|
||||||
24
js/modal.js
Normal file
24
js/modal.js
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
var modal = document.getElementById("info");
|
||||||
|
|
||||||
|
// Get the button that opens the modal
|
||||||
|
var btn = document.getElementById("openInfo");
|
||||||
|
|
||||||
|
// Get the <span> element that closes the modal
|
||||||
|
var span = document.getElementsByClassName("close")[0];
|
||||||
|
|
||||||
|
// When the user clicks the button, open the modal
|
||||||
|
btn.onclick = function() {
|
||||||
|
modal.style.display = "block";
|
||||||
|
}
|
||||||
|
|
||||||
|
// When the user clicks on <span> (x), close the modal
|
||||||
|
span.onclick = function() {
|
||||||
|
modal.style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
// When the user clicks anywhere outside of the modal, close it
|
||||||
|
window.onclick = function(event) {
|
||||||
|
if (event.target == modal) {
|
||||||
|
modal.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
62
js/upload.js
Normal file
62
js/upload.js
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
function uploadFile(){
|
||||||
|
var fd = new FormData();
|
||||||
|
|
||||||
|
var ins = document.getElementById('fileToUpload').files.length;
|
||||||
|
for (var x = 0; x < ins; x++) {
|
||||||
|
fd.append("file[]", document.getElementById('fileToUpload').files[x]);
|
||||||
|
}
|
||||||
|
|
||||||
|
fd.append('category', document.getElementById("jmcat").value)
|
||||||
|
|
||||||
|
if(!getCookie("jmtoken")){
|
||||||
|
fd.append('token', document.getElementById("jmtoken").value)
|
||||||
|
} else{
|
||||||
|
//User is logged in
|
||||||
|
fd.append('token',getCookie("jmtoken"))
|
||||||
|
}
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: 'https://data.tilera.xyz/api/jensmemes/upload',
|
||||||
|
type: 'post',
|
||||||
|
data: fd,
|
||||||
|
contentType: false,
|
||||||
|
processData: false,
|
||||||
|
success: function(response){
|
||||||
|
if(response != 0){
|
||||||
|
console.log("Upload Successfull")
|
||||||
|
console.log(response);
|
||||||
|
let output = document.getElementById("output");
|
||||||
|
output.innerHTML="Upload Erfolgreich. Meme <a href='"+response.files[0]+"' style='text-decoration: underline;'>hier</a>"
|
||||||
|
output.style.display="unset";
|
||||||
|
|
||||||
|
setCookie("jmtoken",response.token,30);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
console.log("Upload Failed")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function setCookie(cname, cvalue, exdays) {
|
||||||
|
var d = new Date();
|
||||||
|
d.setTime(d.getTime() + (exdays*24*60*60*1000));
|
||||||
|
var expires = "expires="+ d.toUTCString();
|
||||||
|
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
|
||||||
|
}
|
||||||
|
function getCookie(cname) {
|
||||||
|
var name = cname + "=";
|
||||||
|
var decodedCookie = decodeURIComponent(document.cookie);
|
||||||
|
var ca = decodedCookie.split(';');
|
||||||
|
for(var i = 0; i <ca.length; i++) {
|
||||||
|
var c = ca[i];
|
||||||
|
while (c.charAt(0) == ' ') {
|
||||||
|
c = c.substring(1);
|
||||||
|
}
|
||||||
|
if (c.indexOf(name) == 0) {
|
||||||
|
return c.substring(name.length, c.length);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
}
|
||||||
1
scss/_colorMixer.scss
Normal file
1
scss/_colorMixer.scss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
$backColor2: darken($backColor, $darkenColor);
|
||||||
14
scss/_general.scss
Normal file
14
scss/_general.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
body, *{
|
||||||
|
background-color: $backColor;
|
||||||
|
color: $textColor;
|
||||||
|
font-family: $font;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
100
scss/_header.scss
Normal file
100
scss/_header.scss
Normal file
|
|
@ -0,0 +1,100 @@
|
||||||
|
header {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 4;
|
||||||
|
height: 40px;
|
||||||
|
max-width: 80%;
|
||||||
|
background-color: $backColor2;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
select {
|
||||||
|
background-color: $backColor2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#openInfo{
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
#catswitcher{
|
||||||
|
grid-column: 2;
|
||||||
|
background-color: $backColor2;
|
||||||
|
margin-right: 30px;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
#catswitcher select option, #catswitcher select{
|
||||||
|
background-color: $backColor;
|
||||||
|
}
|
||||||
|
#uploadForm{
|
||||||
|
grid-column: 3;
|
||||||
|
background-color: $backColor2;
|
||||||
|
}
|
||||||
|
#logout-btn{
|
||||||
|
grid-column: 4;
|
||||||
|
height: 40px;
|
||||||
|
background-color: transparent;
|
||||||
|
margin-left: 30px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#uploadForm{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 3;
|
||||||
|
grid-template-rows: 3;
|
||||||
|
#fileToUpload{
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
margin:1px;
|
||||||
|
border: 1.5px $accentColor solid;
|
||||||
|
}
|
||||||
|
#_jmtoken{
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
margin:1px;
|
||||||
|
border: 1.5px $accentColor solid;
|
||||||
|
}
|
||||||
|
#jmtoken{
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
#jmcat{
|
||||||
|
grid-column: 3;
|
||||||
|
grid-row: 1;
|
||||||
|
margin:1px;
|
||||||
|
border: 1.5px $accentColor solid;
|
||||||
|
}
|
||||||
|
#submitUpload{
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 2;
|
||||||
|
padding: 4px;
|
||||||
|
margin:1px;
|
||||||
|
border: 1.5px $accentColor solid;
|
||||||
|
}
|
||||||
|
#output{
|
||||||
|
display: none;
|
||||||
|
grid-row: 3;
|
||||||
|
}
|
||||||
|
input::placeholder{
|
||||||
|
color: $ligtherText;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#logged-in{
|
||||||
|
color:red;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
#jmlogintoken{
|
||||||
|
margin:1px;
|
||||||
|
border: 1.5px $accentColor solid;
|
||||||
|
}
|
||||||
|
#jmlogintoken::placeholder{
|
||||||
|
color: $ligtherText;
|
||||||
|
}
|
||||||
|
#btn-login{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 4px;
|
||||||
|
margin:1px;
|
||||||
|
border: 1.5px $accentColor solid;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
13
scss/_imgContainer.scss
Normal file
13
scss/_imgContainer.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
.imgContainer {
|
||||||
|
max-width: 20%;
|
||||||
|
padding: 10px;
|
||||||
|
border: 2px solid $accentColor;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
flex-basis: 100%;
|
||||||
|
|
||||||
|
img, video {
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
110
scss/_modal.scss
Normal file
110
scss/_modal.scss
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
/* The Modal (background) */
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
padding-top: 100px;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: rgb(0,0,0);
|
||||||
|
background-color: rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
.loginmodal{
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
padding-top: 100px;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: rgb(0,0,0);
|
||||||
|
background-color: rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Content */
|
||||||
|
.modal-content {
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
padding: 0;
|
||||||
|
width: 80%;
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
|
||||||
|
-webkit-animation-name: animatetop;
|
||||||
|
-webkit-animation-duration: 0.4s;
|
||||||
|
animation-name: animatetop;
|
||||||
|
animation-duration: 0.4s
|
||||||
|
}
|
||||||
|
.loginmodal-content {
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
padding: 0;
|
||||||
|
width: 80%;
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
|
||||||
|
-webkit-animation-name: animatetop;
|
||||||
|
-webkit-animation-duration: 0.4s;
|
||||||
|
animation-name: animatetop;
|
||||||
|
animation-duration: 0.4s
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add Animation */
|
||||||
|
@-webkit-keyframes animatetop {
|
||||||
|
from {top:-300px; opacity:0}
|
||||||
|
to {top:0; opacity:1}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animatetop {
|
||||||
|
from {top:-300px; opacity:0}
|
||||||
|
to {top:0; opacity:1}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The Close Button */
|
||||||
|
.close {
|
||||||
|
color: white;
|
||||||
|
float: right;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.loginclose {
|
||||||
|
color: white;
|
||||||
|
float: right;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close:hover,
|
||||||
|
.close:focus{
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.loginclose:hover,.loginclose:focus{
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
padding: 2px 16px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.loginmodal-header {
|
||||||
|
padding: 2px 16px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.loginmodal-body {padding: 2px 16px;}
|
||||||
|
.modal-body {padding: 2px 16px;}
|
||||||
|
#openInfo{
|
||||||
|
background: url(https://cdn.a-hoefler.eu/apps/sd7w4ksoja/info.png)no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
color:white;
|
||||||
|
background-color: transparent;
|
||||||
|
height:40px;
|
||||||
|
width: 40px;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
7
scss/_vars.scss
Normal file
7
scss/_vars.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
$backColor: #262626;
|
||||||
|
$textColor: White;
|
||||||
|
$accentColor: #3c3c3c;
|
||||||
|
|
||||||
|
$darkenColor: 5%;
|
||||||
|
$ligtherText: #1cb09a;
|
||||||
|
$font: Arial, Helvetica, sans-serif;
|
||||||
6
scss/style.scss
Normal file
6
scss/style.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
@import "vars";
|
||||||
|
@import "colorMixer";
|
||||||
|
@import "general";
|
||||||
|
@import "header";
|
||||||
|
@import "imgContainer";
|
||||||
|
@import "modal";
|
||||||
Loading…
Reference in a new issue