From fa2b3e9d0fceb5a405613a9cdde11f2d6f636ed5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=96FLER=20Alec=20=5Bha=5D?= <ha@HF-INTRANET.local>
Date: Wed, 22 Jul 2020 15:21:26 +0200
Subject: [PATCH] Preloading verbessert

---
 website/dbcon.php         |   2 +-
 website/incl/img.php      | 269 ++++++++++++++++++++------------------
 website/index.php         |  19 ++-
 website/randomapi.php     |   3 +-
 website/script/preload.js |  29 ++++
 website/script/show.js    |  48 +++++++
 6 files changed, 235 insertions(+), 135 deletions(-)
 create mode 100644 website/script/preload.js
 create mode 100644 website/script/show.js

diff --git a/website/dbcon.php b/website/dbcon.php
index 44a7f44..a803896 100644
--- a/website/dbcon.php
+++ b/website/dbcon.php
@@ -2,7 +2,7 @@
 
 $SQLHost = "db.a-hoefler.eu";
 $SQLUser = "root";
-$SQLPasswort = "";
+$SQLPasswort = "bqCdUHZYgHeTd583kZ3cMVd9";
 $SQLDatenbank = "jensmemes";
 $con = mysqli_connect($SQLHost, $SQLUser, $SQLPasswort, $SQLDatenbank);
 
diff --git a/website/incl/img.php b/website/incl/img.php
index f911407..118f416 100644
--- a/website/incl/img.php
+++ b/website/incl/img.php
@@ -1,143 +1,152 @@
+<div id="all">
 <?php
 include ('../dbcon.php');
 ?>
-<h2>JensMemes</h2>
-    <?php
-    $sqlJens = "SELECT * FROM images";
-    $db_ergJens = mysqli_query( $con, $sqlJens);
-    if ( ! $db_ergJens )
-    {
-        die('Ungültige Abfrage: ' . mysqli_error());
-    }
-    while ($zeile = mysqli_fetch_array( $db_ergJens, MYSQLI_ASSOC))
-    {
-        if($zeile[cat]=="jens"){
-            $ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
+    <div id="jens">
+            <h2>Jens Memes</h2>
+                <?php
+                $sqlJens = "SELECT * FROM images";
+                $db_ergJens = mysqli_query( $con, $sqlJens);
+                if ( ! $db_ergJens )
+                {
+                    die('Ungültige Abfrage: ' . mysqli_error());
+                }
+                while ($zeile = mysqli_fetch_array( $db_ergJens, MYSQLI_ASSOC))
+                {
+                    if($zeile[cat]=="jens"){
+                        $ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
 
-        if($ext=="mp4"){
-            echo '
-            
-                <div class="kasten">
-                <a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
-                </div>
-            
-            ';
-        } else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
-            echo '
-                        <div class="kasten">
-                        <a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'"></a>
-                        </div>
+                    if($ext=="mp4"){
+                        echo '
+
+                            <div class="kasten">
+                            <a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
+                            </div>
+
+                        ';
+                    } else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
+                        echo '
+                                    <div class="kasten">
+                                    <a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'" loading="lazy"></a>
+                                    </div>
+                                ';
+                    }
+
+                    }
+
+                }
+                mysqli_free_result( $db_ergJens );
+                ?>
+    </div>
+    <div id="random">
+                <h2>$hit Memes</h2>
+                <?php
+                $sqlrandom = "SELECT * FROM images";
+                $db_ergrandom = mysqli_query( $con, $sqlrandom);
+                if ( ! $db_ergrandom )
+                {
+                    die('Ungültige Abfrage: ' . mysqli_error());
+                }
+                while ($zeile = mysqli_fetch_array( $db_ergrandom, MYSQLI_ASSOC))
+                {
+                    if($zeile[cat]=="random"){
+                        $ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
+
+                        if($ext=="mp4"){
+                            echo '
+                            
+                                <div class="kasten">
+                                <a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
+                                </div>
+                            
+                            ';
+                        } else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
+                            echo '
+                                        <div class="kasten">
+                                        <a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'" loading="lazy"></a>
+                                        </div>
+                                        
+                                    ';
+                        }
+
+                    }
+
+                }
+                mysqli_free_result( $db_ergrandom );
+                ?>
+    </div>
+    <div id="realtox">
+            <h2>Realtox Memes</h2>
+            <?php
+            $sqlrealtox = "SELECT * FROM images";
+            $db_ergrealtox = mysqli_query( $con, $sqlrealtox);
+            if ( ! $db_ergrealtox )
+            {
+                die('Ungültige Abfrage: ' . mysqli_error());
+            }
+            while ($zeile = mysqli_fetch_array( $db_ergrealtox, MYSQLI_ASSOC))
+            {
+                if($zeile[cat]=="realtox"){
+                    $ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
+
+                    if($ext=="mp4"){
+                        echo '
                         
-                    ';
-        }
-
-        }
-
-    }
-    mysqli_free_result( $db_ergJens );
-    ?>
-<h2>randomMemes</h2>
-<?php
-$sqlrandom = "SELECT * FROM images";
-$db_ergrandom = mysqli_query( $con, $sqlrandom);
-if ( ! $db_ergrandom )
-{
-    die('Ungültige Abfrage: ' . mysqli_error());
-}
-while ($zeile = mysqli_fetch_array( $db_ergrandom, MYSQLI_ASSOC))
-{
-    if($zeile[cat]=="random"){
-        $ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
-
-        if($ext=="mp4"){
-            echo '
-            
-                <div class="kasten">
-                <a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
-                </div>
-            
-            ';
-        } else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
-            echo '
-                        <div class="kasten">
-                        <a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'"></a>
-                        </div>
+                            <div class="kasten">
+                            <a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
+                            </div>
                         
-                    ';
-        }
+                        ';
+                    } else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
+                        echo '
+                                    <div class="kasten">
+                                    <a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'" loading="lazy"></a>
+                                    </div>
+                                    
+                                ';
+                    }
 
-    }
+                }
 
-}
-mysqli_free_result( $db_ergrandom );
-?>
-<h2>realtoxMemes</h2>
-<?php
-$sqlrealtox = "SELECT * FROM images";
-$db_ergrealtox = mysqli_query( $con, $sqlrealtox);
-if ( ! $db_ergrealtox )
-{
-    die('Ungültige Abfrage: ' . mysqli_error());
-}
-while ($zeile = mysqli_fetch_array( $db_ergrealtox, MYSQLI_ASSOC))
-{
-    if($zeile[cat]=="realtox"){
-        $ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
+            }
+            mysqli_free_result( $db_ergrealtox );
+            ?>
+    </div>
+    <div id="hendrik">
+                <h2>Hendrik Memes</h2>
+            <?php
+            $sqlhendrik = "SELECT * FROM images";
+            $db_erghendrik = mysqli_query( $con, $sqlhendrik);
+            if ( ! $db_erghendrik )
+            {
+                die('Ungültige Abfrage: ' . mysqli_error());
+            }
+            while ($zeile = mysqli_fetch_array( $db_erghendrik, MYSQLI_ASSOC))
+            {
+                if($zeile[cat]=="hendrik"){
+                    $ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
 
-        if($ext=="mp4"){
-            echo '
-            
-                <div class="kasten">
-                <a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
-                </div>
-            
-            ';
-        } else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
-            echo '
-                        <div class="kasten">
-                        <a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'"></a>
-                        </div>
+                    if($ext=="mp4"){
+                        echo '
                         
-                    ';
-        }
-
-    }
-
-}
-mysqli_free_result( $db_ergrealtox );
-?>
-    <h2>hendrikMemes</h2>
-<?php
-$sqlhendrik = "SELECT * FROM images";
-$db_erghendrik = mysqli_query( $con, $sqlhendrik);
-if ( ! $db_erghendrik )
-{
-    die('Ungültige Abfrage: ' . mysqli_error());
-}
-while ($zeile = mysqli_fetch_array( $db_erghendrik, MYSQLI_ASSOC))
-{
-    if($zeile[cat]=="hendrik"){
-        $ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
-
-        if($ext=="mp4"){
-            echo '
-            
-                <div class="kasten">
-                <a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
-                </div>
-            
-            ';
-        } else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
-            echo '
-                        <div class="kasten">
-                        <a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'"></a>
-                        </div>
+                            <div class="kasten">
+                            <a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
+                            </div>
                         
-                    ';
-        }
+                        ';
+                    } else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
+                        echo '
+                                    <div class="kasten">
+                                    <a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'" loading="lazy"></a>
+                                    </div>
+                                    
+                                ';
+                    }
 
-    }
+                }
 
-}
-mysqli_free_result( $db_erghendrik );
-?>
\ No newline at end of file
+            }
+            mysqli_free_result( $db_erghendrik );
+            ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/website/index.php b/website/index.php
index 478e083..9316b73 100644
--- a/website/index.php
+++ b/website/index.php
@@ -7,10 +7,12 @@
     <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1">
   <link id="theme" rel="stylesheet" href="themes/llama.css" />
-  <script defer src="/script/modal.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
+        <script defer src="/script/modal.js"></script>
   <script defer src="/script/button.js"></script>
   <script defer src="/script/switcher.js"></script>
-
+  <!--  <script src="/script/preload.js"></script> --!>
+    <script src="script/show.js"></script>
 </head>
 
 <body class="">
@@ -69,6 +71,19 @@
             <option value="dark">Dark</option>
           </select>
         </div>
+
+          <div id="themediv">
+
+              <p>Anzeigen::</p>
+          <select id='show'>
+          <option value="0" selected>All</option>
+          <option value="1">JensMemes</option>
+          <option value="2">Realtox Memes</option>
+          <option value="3">Hendrik Memes</option>
+          <option value="4">Random Memes</option>
+          <option value="5">Hide all Memes</option>
+          </select>
+          </div>
         <?php
         $tokencookie = $_COOKIE['token'];
         if (!empty($tokencookie)) {
diff --git a/website/randomapi.php b/website/randomapi.php
index 2b8ec68..2d50b08 100644
--- a/website/randomapi.php
+++ b/website/randomapi.php
@@ -3,5 +3,4 @@ $files = glob("images/*/*");
 $random = rand(0, count($files) - 1);
 $file = $files[$random];
 echo "https://jensmemes.tilera.xyz/" . $file;
-?>
-
+?>
\ No newline at end of file
diff --git a/website/script/preload.js b/website/script/preload.js
new file mode 100644
index 0000000..c82a0e7
--- /dev/null
+++ b/website/script/preload.js
@@ -0,0 +1,29 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var lazyloadImages = document.querySelectorAll("img.lazy");
+    var lazyloadThrottleTimeout;
+
+    function lazyload () {
+        if(lazyloadThrottleTimeout) {
+            clearTimeout(lazyloadThrottleTimeout);
+        }
+
+        lazyloadThrottleTimeout = setTimeout(function() {
+            var scrollTop = window.pageYOffset;
+            lazyloadImages.forEach(function(img) {
+                if(img.offsetTop < (window.innerHeight + scrollTop)) {
+                    img.src = img.dataset.src;
+                    img.classList.remove('lazy');
+                }
+            });
+            if(lazyloadImages.length == 0) {
+                document.removeEventListener("scroll", lazyload);
+                window.removeEventListener("resize", lazyload);
+                window.removeEventListener("orientationChange", lazyload);
+            }
+        }, 20);
+    }
+
+    document.addEventListener("scroll", lazyload);
+    window.addEventListener("resize", lazyload);
+    window.addEventListener("orientationChange", lazyload);
+});
\ No newline at end of file
diff --git a/website/script/show.js b/website/script/show.js
new file mode 100644
index 0000000..96734c1
--- /dev/null
+++ b/website/script/show.js
@@ -0,0 +1,48 @@
+$(document).ready(function(){
+    $('#show').on('change', function() {
+        if ( this.value == '0')
+        {
+            $("#jens").show();
+            $("#realtox").show();
+            $("#random").show();
+            $("#hendrik").show();
+            $("#jens").show();
+
+        }
+        else if(this.value == '1')
+        {
+            $("#jens").hide();
+            $("#realtox").hide();
+            $("#random").hide();
+            $("#hendrik").hide();
+            $("#jens").show();
+        }else if(this.value == '2')
+        {
+            $("#jens").hide();
+            $("#realtox").show();
+            $("#random").hide();
+            $("#hendrik").hide();
+            $("#jens").hide();
+        }else if(this.value == '3')
+        {
+            $("#jens").hide();
+            $("#realtox").hide();
+            $("#random").hide();
+            $("#hendrik").show();
+            $("#jens").hide();
+        }else if(this.value == '4')
+        {
+            $("#jens").hide();
+            $("#realtox").hide();
+            $("#random").show();
+            $("#hendrik").hide();
+            $("#jens").hide();
+        }else if(this.value == '5')
+        {
+            $("#jens").hide();
+            $("#realtox").hide();
+            $("#random").hide();
+            $("#hendrik").hide();
+        }
+    });
+});
\ No newline at end of file