diff --git a/website/button.js b/website/button.js new file mode 100644 index 0000000..9bd8724 --- /dev/null +++ b/website/button.js @@ -0,0 +1,17 @@ +const realFileBtn = document.getElementById("real-file"); +const customBtn = document.getElementById("custom-button"); +const customTxt = document.getElementById("custom-text"); + +customBtn.addEventListener("click", function() { + realFileBtn.click(); +}); + +realFileBtn.addEventListener("change", function() { + if (realFileBtn.value) { + customTxt.innerHTML = realFileBtn.value.match( + /[\/\\]([\w\d\s\.\-\(\)]+)$/ + )[1]; + } else { + customTxt.innerHTML = "No file chosen, yet."; + } +}); diff --git a/website/clientIP.php b/website/clientIP.php new file mode 100644 index 0000000..e8b8287 --- /dev/null +++ b/website/clientIP.php @@ -0,0 +1,7 @@ + diff --git a/website/dbcon.php b/website/dbcon.php index 3c9518f..8a1738b 100644 --- a/website/dbcon.php +++ b/website/dbcon.php @@ -1,5 +1,5 @@ - JensMemes v2 - - - - + JensMemes v2 + + + + + -
- - -
-
Eine zentrale Seite für alle Jens Memes!

-
-
- - '; - } else{ - echo 'Authentifiziert.'; - } - ?> - -
+ +
+
+
+
+ +
+ + +
+

+
+

+
+ +
+

Theme:

+ +
+ + Authentifiziert'; + } ?> +
+ + + _ + '; + } else { + } + ?> +
+
+
+
+
+ + "; - echo " + $ext = strtolower(pathinfo($image, PATHINFO_EXTENSION)); + if (in_array($ext, $supported_file)) { + echo "
"; + echo " \n "; - echo "
"; - } elseif ($ext == "mp4") { + echo "
"; + } elseif ($ext == "mp4") { - // echo basename($image); + // echo basename($image); - echo "
"; - echo ''; - echo "
"; - } - else { - continue; - } -} -?> -
+ echo "
"; + echo ''; + echo "
"; + } else { + continue; + } + } + ?> +
- + \ No newline at end of file diff --git a/website/script.js b/website/script.js new file mode 100644 index 0000000..284f71d --- /dev/null +++ b/website/script.js @@ -0,0 +1,36 @@ +const openModalButtons = document.querySelectorAll('[data-modal-target]') +const closeModalButtons = document.querySelectorAll('[data-close-button]') +const overlay = document.getElementById('overlay') + +openModalButtons.forEach(button => { + button.addEventListener('click', () => { + const modal = document.querySelector(button.dataset.modalTarget) + openModal(modal) + }) +}) + +overlay.addEventListener('click', () => { + const modals = document.querySelectorAll('.modal.active') + modals.forEach(modal => { + closeModal(modal) + }) +}) + +closeModalButtons.forEach(button => { + button.addEventListener('click', () => { + const modal = button.closest('.modal') + closeModal(modal) + }) +}) + +function openModal(modal) { + if (modal == null) return + modal.classList.add('active') + overlay.classList.add('active') +} + +function closeModal(modal) { + if (modal == null) return + modal.classList.remove('active') + overlay.classList.remove('active') +} diff --git a/website/switcher.js b/website/switcher.js new file mode 100644 index 0000000..16dc0d7 --- /dev/null +++ b/website/switcher.js @@ -0,0 +1,44 @@ +let select = document.getElementById("themeswitcher"); +let theme = document.getElementById("theme"); + +if (checkCookie("theme")) { + setTheme(getCookie("theme")); + select.value = getCookie("theme"); +} + +select.addEventListener("change", e => { + let selTheme = select.options[select.selectedIndex].value; + setTheme(selTheme); + setCookie("theme", selTheme, 60); +}); + +function setTheme(themeName) { + theme.href = "themes/" + themeName + ".css"; +} + +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 ""; +} + +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 checkCookie(cookieName) { + return getCookie(cookieName) != ""; +} diff --git a/website/themes/bg-img.jpg b/website/themes/bg-img.jpg new file mode 100644 index 0000000..a54475a Binary files /dev/null and b/website/themes/bg-img.jpg differ diff --git a/website/themes/bg.png b/website/themes/bg.png new file mode 100644 index 0000000..cb5ff64 Binary files /dev/null and b/website/themes/bg.png differ diff --git a/website/themes/dark.css b/website/themes/dark.css new file mode 100644 index 0000000..06fc08b --- /dev/null +++ b/website/themes/dark.css @@ -0,0 +1,196 @@ +body{ + color: #fff; +background: url(bg-img.jpg)no-repeat center center fixed; +background-size: cover; +font-family: 'Arial'; +letter-spacing: 0.2px; +margin-top: 0px; +} + +.Bilder_ { + padding: 10px; + max-width: 300px; + max-height:150px; + vertical-align: bottom; + display: block; + margin-top:auto; + margin-bottom:auto; + margin-left:auto; + margin-right:auto; + vertical-align: middle; + border: 0 none; + max-width: 200px; + +} + +#themediv { + float: left; +} + +.Videos_ { + padding: 10px; + max-width: 200px; + max-height:150px; + margin-top:auto; + margin-bottom:auto; + margin-left:auto; + margin-right:auto; + display: block; +} + + +.kasten{ +background: rgba(0,0,0,0.6); +margin-left: 10px; +margin-bottom: 10px; +border: 5px solid grey; +float:left; +width: 250px; +height: 200px; +min-height: 10em; +border: 4px solid #88f; +} + +.bar-main{ + background: rgba(0,0,0,0.6); + text-align: center; +} + + +#btn-close-CSS { + background: url(head.png)no-repeat; + display: flex; + justify-content: space-around; + background-size: contain; + background-position: center; + color:white; + background-color: lightgray; + border:noe; + height:50px; + width: 50px; +} +.img-fixed-info{ + position: fixed; + width: 40px; + +} +input[type=text] { + background-color: rgba(0, 0, 0, 0.4); + color: white; +} +.btn-logout{ + background: url(logout.png)no-repeat; + background-size: contain; + background-position: center; + color:white; + background-color: transparent; + border:none; + float: right; + margin-top: 5px; + padding: 15px; +} +#custom-button { + padding: 5px; + color: white; + background-color: #009578; + border: 1px solid #000; + border-radius: 5px; +} + +#custom-button:hover { + background-color: #32353b; +} + +#custom-text { + margin-left: 10px; + color: #aaa; +} +*, *::after, *::before { + box-sizing: border-box; +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0); + transition: 200ms ease-in-out; + border: 1px solid black; + border-radius: 10px; + z-index: 10; + background-color:#36393f; + width: 500px; + max-width: 80%; +} + +.modal.active { + transform: translate(-50%, -50%) scale(1); +} + +.modal-header { + padding: 10px 15px; + display: flex; + justify-content: space-around; + align-items: center; + border-bottom: 1px solid black; +} + +.modal-header .title { + font-size: 1.25rem; + font-weight: bold; +} + +.modal-header .close-button { + cursor: pointer; + border: none; + outline: none; + background: none; + font-size: 1.25rem; + font-weight: bold; +} +.close-button{ + position: absolute; + right: 0px; + width: 30px; + font-size: 20px; +} +.modal-body { + padding: 10px 15px; +} + +#overlay { + position: fixed; + opacity: 0; + transition: 200ms ease-in-out; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color:rgba(50,53,59,0.9); + pointer-events: none; +} + +#overlay.active { + opacity: 1; + pointer-events: all; +} +.btn-modal{ + background: url(info.png)no-repeat; + background-size: contain; + background-position: center; + color:white; + background-color: transparent; + border:none; + height:40px; + width: 50px; + padding: 15px; + float: left; +} +a{ + color: white; + text-decoration: none; +} +a:hover{ + font-weight: bold; + color:green; +} diff --git a/website/themes/head.png b/website/themes/head.png new file mode 100644 index 0000000..9abd901 Binary files /dev/null and b/website/themes/head.png differ diff --git a/website/themes/info.png b/website/themes/info.png new file mode 100644 index 0000000..1580c29 Binary files /dev/null and b/website/themes/info.png differ diff --git a/website/themes/light.css b/website/themes/light.css new file mode 100644 index 0000000..c1b502a --- /dev/null +++ b/website/themes/light.css @@ -0,0 +1,208 @@ +:root { + --rainbow: #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff; +} + +body { + color: #fff; + background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), + url(bg.png); + background-repeat: repeat; + background-size: 100px; + font-family: "Arial"; + letter-spacing: 0.2px; + margin-top: 0px; +} + +.Bilder_ { + object-fit: contain; + padding: 10px; + height: 100%; + display: block; + margin-top: auto; + margin-bottom: auto; + margin-left: auto; + margin-right: auto; + max-width: 100%; +} + +.Videos_ { + object-fit: contain; + padding: 10px; + height: 100%; + display: block; + margin-top: auto; + margin-bottom: auto; + margin-left: auto; + margin-right: auto; + max-width: 100%; +} + +.kasten { + background: #000000; + align-self: stretch; + margin-left: 10px; + margin-bottom: 10px; + border: 5px solid grey; + float: left; + height: 300px; + min-height: 10em; + border: 5px solid #cc0000; +} + +.bar-main { + border: 5px solid #000000; + background: linear-gradient(to right, var(--rainbow)); + text-align: center; +} + +#btn-close-CSS { + background: url(upload.png) no-repeat; + display: flex; + justify-content: space-around; + background-size: contain; + background-position: center; + color: white; + background-color: lightgray; + border: noe; + height: 50px; + width: 50px; +} + +.img-fixed-info { + position: fixed; + width: 40px; +} + +input[type="text"] { + background-color: rgba(0, 0, 0, 0.4); + color: white; +} + +.btn-logout { + background: url(logout.png) no-repeat; + background-size: contain; + background-position: center; + color: white; + background-color: transparent; + border: none; + float: left; + height: 50px; + width: 50px; + margin: 10px; +} + +#custom-button { + padding: 5px; + color: white; + background-color: #009578; + border: 1px solid #000; + border-radius: 5px; +} + +#custom-button:hover { + background-color: #32353b; +} + +#custom-text { + margin-left: 10px; + color: #aaa; +} +*, +*::after, +*::before { + box-sizing: border-box; +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0); + transition: 200ms ease-in-out; + border: 5px solid #cc0000; + z-index: 10; + background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), + url(bg.png); + background-repeat: repeat; + background-size: 100px; + width: 500px; + max-width: 80%; +} + +.modal.active { + transform: translate(-50%, -50%) scale(1); +} + +.modal-header { + padding: 10px 15px; + display: flex; + justify-content: space-around; + align-items: center; + border-bottom: 1px solid black; +} + +.modal-header .title { + font-size: 1.25rem; + font-weight: bold; +} + +.modal-header .close-button { + cursor: pointer; + border: none; + outline: none; + background: none; + font-size: 1.25rem; + font-weight: bold; +} + +#themediv { + float: left; +} + +.close-button { + position: absolute; + right: 0px; + width: 30px; + font-size: 20px; +} + +.modal-body { + padding: 10px 15px; +} + +#overlay { + position: fixed; + opacity: 0; + transition: 200ms ease-in-out; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(50, 53, 59, 0.9); + pointer-events: none; +} + +#overlay.active { + opacity: 1; + pointer-events: all; +} +.btn-modal { + background: url(info.png) no-repeat; + background-size: contain; + background-position: center; + color: white; + background-color: transparent; + border: none; + float: left; + height: 50px; + width: 50px; + margin: 10px; +} +a { + color: white; + text-decoration: none; +} +a:hover { + font-weight: bold; + color: green; +} diff --git a/website/themes/logout.png b/website/themes/logout.png new file mode 100644 index 0000000..a677b56 Binary files /dev/null and b/website/themes/logout.png differ diff --git a/website/themes/old.css b/website/themes/old.css new file mode 100644 index 0000000..5ad7390 --- /dev/null +++ b/website/themes/old.css @@ -0,0 +1,37 @@ +.Bilder_ { + padding: 10px; + max-width: 300px; + max-height:150px; + vertical-align: bottom; + display: block; + margin-top:auto; + margin-bottom:auto; + margin-left:auto; + margin-right:auto; + +} + +.Videos_ { + padding: 10px; + max-width: 300px; + max-height:150px; + margin-top:auto; + margin-bottom:auto; + margin-left:auto; + margin-right:auto; + display: block; +} + + +.kasten{ +background: #555555; +margin-left: 10px; +margin-bottom: 10px; +border: 5px solid grey; +float:left; +width: 300px; +height: 250px; + } +body{ +background: #676767; +} diff --git a/website/themes/upload.png b/website/themes/upload.png new file mode 100644 index 0000000..6c7a6db Binary files /dev/null and b/website/themes/upload.png differ diff --git a/website/uploadOK.php b/website/uploadOK.php index 7828acf..53decbd 100644 --- a/website/uploadOK.php +++ b/website/uploadOK.php @@ -16,6 +16,7 @@ if(!empty($rowtoken) || !empty($rowpost)){ //echo "Authenticated."; }else{ $uploadOK = false; - echo "unauthenticated."; + echo "unauthenticated."; } + ?>