Redesigning front page and renaming "KingOfDogTV.de" to "KingOfDog.eu"

.gitignore

@@ -21,3 +21,12 @@ dataSources.local.xml
 /.idea/httpRequests/
 rest-client.private.env.json
 http-client.private.env.json
+
+/.idea
+/files/thumbs
+/files - Kopie
+/controllers/node_modules
+/piwik
+/piwik_alt
+/user_guide
+/node_modules

application/language/de/faq_lang.php

@@ -5,7 +5,7 @@ $lang['faq_title'] = 'FAQ - Häufig gestellte Fragen';
 $lang['faq_des'] = 'Hier gibt es die Antworten auf alle häufig gestellten Fragen!';
 $lang['faq_section1_title'] = 'Was ist das hier für eine Seite?';
 $lang['faq_section1_q1'] = 'Was gibt es hier so?';
-$lang['faq_section1_a1'] = 'Diese Seite ist sehr vielseitig. Der Hauptbestandteil ist der Blog und das Portfolio, in dem alle bisherigen, erwähnenswerten Projekte von KingOfDog zu finden sind. Mehr zu dem Blog ist in dem 5. Abschnitt zu lesen. Außerdem gibt es hier einige Tools, schau sie dir einfach selbst mal an, und eine Download-Seite, mit einigen nützlichen Dingen zum Downloaden. Das, was am meisten Entwicklungszeit gekostet hat, ist aber das Nutzersystem, mit eigenen Profilen und einem Kommentarsystem und vielem mehr! Erstell dir doch einfach kostenfrei ein Konto (mehr dazu im Abschnitt "Accounts auf KingOfDogTV.de" und erkunde das System selbst.';
+$lang['faq_section1_a1'] = 'Diese Seite ist sehr vielseitig. Der Hauptbestandteil ist der Blog und das Portfolio, in dem alle bisherigen, erwähnenswerten Projekte von KingOfDog zu finden sind. Mehr zu dem Blog ist in dem 5. Abschnitt zu lesen. Außerdem gibt es hier einige Tools, schau sie dir einfach selbst mal an, und eine Download-Seite, mit einigen nützlichen Dingen zum Downloaden. Das, was am meisten Entwicklungszeit gekostet hat, ist aber das Nutzersystem, mit eigenen Profilen und einem Kommentarsystem und vielem mehr! Erstell dir doch einfach kostenfrei ein Konto (mehr dazu im Abschnitt "Accounts auf KingOfDog.eu" und erkunde das System selbst.';
 $lang['faq_section1_q2'] = 'Und von wem ist das?';
 $lang['faq_section1_a2'] = 'Wie man es Anhand des Namens schon erahnen kann: KingOfDog (eigentlich: Marcel). KingOfDog ist ein YouTuber (mit drei Kanälen: KingOfDog [Gaming, Meinungsvideos, Tutorials etc.], ZeybeFX [Designs] und ZeybeOfficial[Musik]), Designer, Programmierer und Developer. Fast im Alleingang hat er diese Webseite programmiert! Aber er möchte sich an dieser Stelle nicht zu sehr loben und herausheben: solltet ihr mehr wissen wollen, schaut auf der "About"-Seite vorbei oder lest euch den nächsten Abschnitt durch.';
 $lang['faq_section1_q3'] = 'Kostest die Seite was?';
@@ -25,7 +25,7 @@ $lang['faq_section2_q4'] = 'Warum hat er diese Seite gemacht?';
 $lang['faq_section2_a4'] = 'Vor allem aus Langeweile. An zweiter Stelle folgt wahrscheinlich "Fähigkeiten im Webdesign trainieren und PHP lernen". Danach kommt nochmal Langeweile und an letzter Stelle Idiotismus. <br> Nein, mal ernsthaft: Man bringt sich einfach am besten eine Programmiersprache oder ähnliches bei, indem man etwas damit programmiert bzw. entwickelt. Und das ist auch der Grund für diese Webseite! Und vielleicht auch noch ein wenig Zurschaustellung der eigenen Leistungen!';
 $lang['faq_section2_q5'] = 'Wo hat er Programmieren und Designen gelernt?';
 $lang['faq_section2_a5'] = 'Was heißt hier "wo"? Programmieren bringt man sich am besten, genauso wie Designen, selbst bei und zwar durch "Learning by Doing". Man lernt am besten eine Programmiersprache, wenn man einfach anfängt etwas in dieser Sprache zu programmieren und gleichzeitig nachguckt, wie man etwas bestimmtes macht, was man gerade zum Coden braucht. Beim Designen ist das ähnlich. Sobald du die Grundbedienung deines verwendeten Programmes raushast, designest du einfach, als wäre dein Leben in Gefahr. Dann guckst du dir hier das eine Video dazu an, liest dir da den Blog dazu durch und das wichtigste: designest diese Ding nach. So lernt man einfach am besten - egal wobei!';
-$lang['faq_section3_title'] = 'Accounts auf KingOfDogTV.de';
+$lang['faq_section3_title'] = 'Accounts auf KingOfDog.eu';
 $lang['faq_section3_q1'] = 'Was bringt mir ein Account?';
 $lang['faq_section3_a1'] = 'Wenn du dir ein Account auf dieser Seite erstellst, bekommst du die Möglichkeit Kommentare unter Blog-Posts zu hinterlassen und selbige zu bewerten. Außerdem erhält jeder Nutzer eine Profile Page mit verschiedenen Inhalten. In Zukunft wird diese Profile Page auch noch ausgebaut und mit mehr Funktionen versehen. Manchmal erhälst du als Nutzer auch Ankündigungen und bekommst die exklusive Möglichkeit, an Gewinnspielen teilzunehmen!';
 $lang['faq_section3_q2'] = 'Kostet das was?';

application/language/de/general_lang.php

@@ -1,7 +1,7 @@
 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 
-$lang['website_name'] = 'KingOfDogTV.de';
+$lang['website_name'] = 'KingOfDog.eu';
 $lang['person_by'] = 'von';
 $lang['additional_more'] = 'Mehr';
 $lang['close'] = 'Schließen';

application/language/de/home_lang.php

@@ -34,4 +34,4 @@ $lang['home_date'] = 'd.m.Y \u\m H:i \U\h\r';
 $lang['home_posts'] = 'Letzte Posts';
 
 $lang['home_ads_title'] = 'Wieso zeigen wir Werbung?';
-$lang['home_ads_description'] = 'Das Angebot dieser Seite ist komplett kostenlos und das soll auch so bleiben. Die Werbeeinnahmen werden ausschließlich für die Finanzierung und Erweiterung des Servers genutzt. So können wir auch weiterhin alle Funktionen kostenlos anbieten! Wir verfolgen jedoch das Motto "Höchstens eine Werbung pro Seite". Das heißt jede Seite von KingOfDogTV.de enthält maximal einen einzigen Werbebanner. So wird die Werbung nicht zu nervig, die Seite braucht nicht allzu viel länger zum Laden und trotzdem können die Kosten für den Webserver (hoffentlich) gedeckt werden.';
+$lang['home_ads_description'] = 'Das Angebot dieser Seite ist komplett kostenlos und das soll auch so bleiben. Die Werbeeinnahmen werden ausschließlich für die Finanzierung und Erweiterung des Servers genutzt. So können wir auch weiterhin alle Funktionen kostenlos anbieten! Wir verfolgen jedoch das Motto "Höchstens eine Werbung pro Seite". Das heißt jede Seite von KingOfDog.eu enthält maximal einen einzigen Werbebanner. So wird die Werbung nicht zu nervig, die Seite braucht nicht allzu viel länger zum Laden und trotzdem können die Kosten für den Webserver (hoffentlich) gedeckt werden.';

application/language/en/faq_lang.php

@@ -19,7 +19,7 @@ $lang['faq_section2_q2'] = 'And what does this guy do?';
 $lang['faq_section2_q3'] = 'From where could I know him?';
 $lang['faq_section2_q4'] = 'Why did he create this website?';
 $lang['faq_section2_q5'] = 'How did he learn to code and to design?';
-$lang['faq_section3_title'] = 'Accounts on KingOfDogTV.de';
+$lang['faq_section3_title'] = 'Accounts on KingOfDog.eu';
 $lang['faq_section3_q1'] = 'What\'s the purpose of an account?';
 $lang['faq_section3_q2'] = 'Do I have to pay for it?';
 $lang['faq_section3_q3'] = 'And why should I create an account?';

application/language/en/general_lang.php

@@ -1,7 +1,7 @@
 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 
-$lang['website_name'] = 'KingOfDogTV.de';
+$lang['website_name'] = 'KingOfDog.eu';
 $lang['person_by'] = 'by';
 $lang['additional_more'] = 'More';
 $lang['close'] = 'Close';

application/language/en/home_lang.php

@@ -34,4 +34,4 @@ $lang['home_date'] = 'Y-m-d \a\t g:i a';
 $lang['home_posts'] = 'Most Recent Posts';
 
 $lang['home_ads_title'] = 'Why are we showing ads?';
-$lang['home_ads_description'] = 'The whole page and all of its services are completely free. And we want this to be the same in the future. The earnings through advertising are only used for financing and expanding the servers. Ads allow us to keep offering this free service! But we follow the motto "At Most One Ad per Site". That means that every page of KingOfDogTV.de contains maximally one single advertisment. So we achieve a not too annoying advertising model, the page doesn\'t take longer to load, and despite we can (hopefully) cover the costs for the webservers.';
+$lang['home_ads_description'] = 'The whole page and all of its services are completely free. And we want this to be the same in the future. The earnings through advertising are only used for financing and expanding the servers. Ads allow us to keep offering this free service! But we follow the motto "At Most One Ad per Site". That means that every page of KingOfDog.eu contains maximally one single advertisment. So we achieve a not too annoying advertising model, the page doesn\'t take longer to load, and despite we can (hopefully) cover the costs for the webservers.';

application/language/fr/general_lang.php

@@ -1,7 +1,7 @@
 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 
-$lang['website_name'] = 'KingOfDogTV.de';
+$lang['website_name'] = 'KingOfDog.eu';
 $lang['person_by'] = 'de';
 $lang['additional_more'] = 'plus';
 $lang['close'] = 'Près';

application/models/LoginModel.php

@@ -112,7 +112,7 @@ class LoginModel extends CI_Model
         // TODO: TRANSLATE
         $message = "Hallo, bitte aktiviere deinen Account: " . base_url('activate/' . md5($email) . '/' . $activation_key);
         // TODO: Send email
-        mail($email, "Registrierung auf KingOfDogTV.de", $message);
+        mail($email, "Registrierung auf KingOfDog.eu", $message);
 
         // Send notification
         $createdUser = $this->db->query('SELECT ID FROM users WHERE username = ?', [$username])->result_array();

application/views/footer.php

@@ -103,12 +103,12 @@
 </footer>
 <!--/#footer-->
 <script src="/assets/js/lib/jquery.min.js"></script>
+<script src="/assets/js/lib/popper.min.js"></script>
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>-->
 <!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>-->
 <?php
     $scripts = [
         'lib/bootstrap.min.js',
-        'lib/popper.min.js',
         'lib/jquery.PageScroll2id.min.js',
         'lib/jquery.mobile.custom.min.js',
         'post-create.js',

application/views/home.php

@@ -43,7 +43,7 @@
                     </div>
                 </div>
             </div>
-            <div class="carousel-item" style="background-image: url(/f/91200698b76de87f559d104781e1eacf)">
+            <div class="carousel-item" style="background-image: url('/f/91200698b76de87f559d104781e1eacf')">
                 <div class="carousel-caption">
                     <div class="container">
                         <div class="row">
@@ -209,8 +209,88 @@
     </div>
 </section>
 
-<section class="section-parallax"
+<section class="section-parallax section-green">
-         style="background-image:url('<?= base_url('f/b6e1fe7b54c60db4b2a36380948e932a?w=1920') ?> ')"></section>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <h1>KOD Network</h1>
+                <p class="lead">
+                    Jeder kennt die etablierten Netzwerke wie YouTube, Twitter, Instagram etc. Aber warum sollte man nicht einfach mal aus Spaß und um den Algorithmus-Giganten entgegenzuwirken sein eigenes soziales Netzwerk entwickeln? <br>
+                    Genau, diese Frage habe ich mir nicht gestellt und wahrscheinlich auch niemand anderes. Dennoch ist das einfallsreich benannte Netzwerk <b>KOD Network</b> nun funktionsfähig...
+                </p>
+                <a href="<?= base_url('posts/popular') ?>" class="btn btn-default round">Beliebte Posts</a>
+            </div>
+            <div class="col">
+
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="dark">
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
+                <h2><?= lang('home_active_users') ?></h2>
+                <?php foreach ($currentlyActiveUsers as $activeUser):
+                    $loginTime = strtotime($activeUser['lastLogin']); ?>
+                    <div class="user-item">
+                        <img src="<?= $activeUser['profile_picture'] ?>?w=50" alt="" class="img-fluid rounded-circle">
+                        <div class="user-info">
+                            <a href="<?= base_url('user/' . $activeUser['username']) ?>">
+                                <h2><?= $activeUser['displayname'] ?></h2>
+                            </a>
+                            <small><?= $activeUser['follower_count'] ?> Followers | online
+                                                                        seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$loginTime"), $_SESSION['site_lang'])) ?></small>
+                        </div>
+                    </div>
+                <?php endforeach; ?>
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
+                <h2><?= lang('home_newest_users') ?></h2>
+                <?php
+                    foreach ($newestUsers as $newestUser):
+                        $registeredDate = strtotime($newestUser['date_created']); ?>
+                        <div class="user-item">
+                            <img src="<?= $newestUser['profile_picture'] ?>?w=50" alt="" class="img-fluid rounded-circle">
+                            <div class="user-info">
+                                <a href="<?= base_url('user/' . $newestUser['username']) ?>">
+                                    <h2><?= $newestUser['displayname'] ?></h2>
+                                </a>
+                                <small><?= $newestUser['follower_count'] ?> Followers |
+                                                                            registriert
+                                                                            seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$registeredDate"), $_SESSION['site_lang'])) ?></small>
+                            </div>
+                        </div>
+                    <?php endforeach; ?>
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
+                <h2><?= lang('home_newest_posts') ?></h2>
+                <ul class="comment-list">
+                    <?php foreach ($newestPosts as $newestPost):
+                        $this->load->view('network/posts/post_item', $newestPost);
+                    endforeach; ?>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="section-parallax section-orange">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-6">
+                <h1>Portfolio</h1>
+                <p class="lead">
+                    Seit ich angefangen habe YouTube-Videos hochzuladen, bin ich auch langsam in Richtung Design, Programmieren, Fotografie, Videoschnitt, Animation etc. hineingeraten. Mit der Zeit haben sich einige mehr oder weniger gute Projekte angehäuft, die ihr in meinem Portfolio betrachten könnt.
+                </p>
+                <a href="<?= base_url('projects') ?>" class="btn btn-default round">Projekte ansehen</a>
+            </div>
+            <div class="col-md-6">
+            </div>
+        </div>
+    </div>
+</section>
 
 <section class="container">
     <h1>Social Media</h1>
@@ -281,59 +361,6 @@
     </div>
 </section>
 
-<section class="dark">
-    <div class="container">
-        <h1>KOD Network</h1>
-        <div class="row">
-            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
-                <h2><?= lang('home_active_users') ?></h2>
-                <?php foreach ($currentlyActiveUsers as $activeUser):
-                    $loginTime = strtotime($activeUser['lastLogin']); ?>
-                    <div class="user-item">
-                        <img src="<?= $activeUser['profile_picture'] ?>?w=50" alt="" class="img-fluid rounded-circle">
-                        <div class="user-info">
-                            <a href="<?= base_url('user/' . $activeUser['username']) ?>">
-                                <h2><?= $activeUser['displayname'] ?></h2>
-                            </a>
-                            <small><?= $activeUser['follower_count'] ?> Followers | online
-                                                                        seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$loginTime"), $_SESSION['site_lang'])) ?></small>
-                        </div>
-                    </div>
-                <?php endforeach; ?>
-            </div>
-            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
-                <h2><?= lang('home_newest_users') ?></h2>
-                <?php
-                    foreach ($newestUsers as $newestUser):
-                        $registeredDate = strtotime($newestUser['date_created']); ?>
-                        <div class="user-item">
-                            <img src="<?= $newestUser['profile_picture'] ?>?w=50" alt="" class="img-fluid rounded-circle">
-                            <div class="user-info">
-                                <a href="<?= base_url('user/' . $newestUser['username']) ?>">
-                                    <h2><?= $newestUser['displayname'] ?></h2>
-                                </a>
-                                <small><?= $newestUser['follower_count'] ?> Followers |
-                                                                            registriert
-                                                                            seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$registeredDate"), $_SESSION['site_lang'])) ?></small>
-                            </div>
-                        </div>
-                    <?php endforeach; ?>
-            </div>
-            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
-                <h2><?= lang('home_newest_posts') ?></h2>
-                <ul class="comment-list">
-                    <?php foreach ($newestPosts as $newestPost):
-                        $this->load->view('network/posts/post_item', $newestPost);
-                    endforeach; ?>
-                </ul>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section class="section-parallax"
-         style="background-image:url('<?= base_url('f/09ae7236fe64a83f41759413cdd6cf18?w=1920') ?>')"></section>
-
 <section class="container">
     <div class="row">
         <h1 class="col-xs-12"><?= lang('home_posts') ?></h1>
@@ -380,10 +407,22 @@
     </button>
 </section>
 
-<section class="section-parallax"
+<section class="section-parallax section-red">
-         style="background-image:url('<?= base_url('f/aaddc4d0d5aa02b6cff5371c76a13e63?w=1920') ?>')"></section>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-6">
+                <h1>Blog</h1>
+                <p class="lead">
+                    Seid ihr an Programmierung, Design, Technik, Internet, Aktuellem, Gaming, zufälligem Kram und mehr interessiert? Dann ist mein Blog zwar nicht die erste Anlaufstelle, dennoch könnte man ihn eventuell ein-zwei Mal berücksichtigen. Schaut doch einfach mal vorbei und lasst euch selbst überraschen.
+                </p>
+                <a href="<?= base_url('blog') ?>" class="btn btn-default round">Zum Blog</a>
+            </div>
+            <div class="col-md-6"></div>
+        </div>
+    </div>
+</section>
 
-<section class="section-red">
+<section class="section">
     <div class="container">
         <div class="row">
             <div class="col-sm-1">

application/views/network/posts/posts_list.php

@@ -121,18 +121,20 @@
 
             <div class="row vertical-tab-menu">
                 <div class="list-group w-100">
+                    <?php if (isset($_SESSION['user']) && !empty($_SESSION['user'])): ?>
                         <a class="list-group-item text-center <?= $active == 'feed' ? 'active' : '' ?>" href="<?= base_url('posts/feed') ?>">
                             <?= lang('feed_your_feed') ?>
                         </a>
+                    <?php endif; ?>
                     <a class="list-group-item text-center <?= $active == 'popular' ? 'active' : '' ?>" href="<?= base_url('posts/popular') ?>">
                         <?= lang('feed_popular') ?>
                     </a>
-                    <a href="<?= base_url('users/top') ?>" class="list-group-item text-center">
+                    <li class="list-group-item text-center disabled" disabled="">
                         <?= lang('feed_top_users') ?>
-                    </a>
+                    </li>
-                    <a href="<?= base_url('users/trending') ?>" class="list-group-item text-center">
+                    <li class="list-group-item text-center disabled" disabled="">
                         <?= lang('feed_trending_users') ?>
-                    </a>
+                    </li>
                     <?php if (isset($_SESSION['user']) && !empty($_SESSION['user'])): ?>
                         <a class="list-group-item text-center" href="<?= base_url('user/' . $_SESSION['user']['username']) ?>">
                             <?= lang('feed_your_profile') ?>

assets/css/fix-bootstrap-4.css

@@ -172,3 +172,7 @@ p {
 .breadcrumb .breadcrumb-item:hover a {
     color: #0D47A1 !important;
 }
+
+.dropdown-item:focus {
+    color: #fff;
+}

assets/css/main.css

@@ -36,6 +36,15 @@ body > section {
     color: rgba(255,255,255,.5) !important;
 }
 
+.primary .btn.btn-default, .secondary .btn.btn-default, .section-red .btn.btn-default, .section-green .btn.btn-default, .section-orange .btn.btn-default {
+    color: #fff;
+    border-color: #fff;
+}
+
+.primary .btn.btn-default:hover, .secondary .btn.btn-default:hover, .section-red .btn.btn-default:hover, .section-green .btn.btn-default:hover, .section-orange .btn.btn-default:hover {
+    color: #555;
+}
+
 .primary {
     background-color: #2272ff;
 }
@@ -95,8 +104,9 @@ body > section {
 
 .section-parallax {
     width: 101vw;
-    height: 33vh;
+    min-height: 33vh;
-    background: #2272ff fixed center;
+    background-attachment: fixed;
+    background-position: center;
     background-size: cover;
     box-shadow: inset 0 0 20px 5px rgba(0,0,0,.18);
 }
@@ -293,8 +303,8 @@ ul.tag-cloud li {
 }
 
 .icon-md-alizarin {
-    color: #F72754;
+    color: #fff;
-    background-color: #fff;
+    background-color: #F72754;
 }
 
 
@@ -1179,6 +1189,7 @@ ul#downloadSlider a.active .overlay {
 
 .comment-list .comment-well .action-btns, .postFullviewModal .action-btns {
     margin-top: 0;
+    margin-bottom: 10px;
     height: 35px;
 }
 

assets/js/main.js

@@ -50,17 +50,21 @@ jQuery(function ($) {
         }, 500);
     });
     if (!getCookie('agreedToCookies') || getCookie('agreedToCookies') == null) {
-        $('body').append(
+        $('body').append(`
-            '<div class="alert alert-warning alert-dismissible fixed-bottom" id="cookie-alert" role="alert" style="max-width:960px;margin:auto auto 25px;z-index:1000">' +
+            <div class="alert alert-warning alert-dismissible fixed-bottom mx-auto mb-4" id="cookie-alert" role="alert" style="max-width:960px;z-index:1000">
-            '<button type="button" class="close" data-dismiss="alert" aria-label="Close" style="font-size:25px;"><span aria-hidden="true">&times;</span></button>' +
+                <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="font-size:25px;">
-            '<div class="row" style="padding:0 20px;">' +
+                    <span aria-hidden="true">&times;</span>
-            '<svg class="pull-left" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width:48px;margin-right: 15px;margin-top: 5px;" xml:space="preserve"><g><g><path d="M478.01,128.591l-4.101-7.131l-6.97,4.372c-6.391,4.008-13.625,6.127-20.918,6.127c-9.167,0-17.886-3.232-25.215-9.35 l-4.128-3.446l-4.725,2.567c-6.047,3.284-12.344,4.95-18.716,4.95c-21.829,0-39.588-17.758-39.588-39.588 c0-3.091,0.491-6.352,1.543-10.26l1.544-5.737l-5.076-3.087c-11.977-7.286-19.126-19.884-19.126-33.7 c0-4.252,0.805-8.575,2.464-13.214l2.802-7.848l-7.981-2.398C305.857,3.651,281.021,0,256,0 C187.619,0,123.331,26.628,74.979,74.979C26.628,123.331,0,187.619,0,256s26.628,132.669,74.979,181.021 C123.331,485.372,187.619,512,256,512s132.669-26.628,181.021-74.979C485.372,388.669,512,324.381,512,256 C512,211.32,500.246,167.261,478.01,128.591z M425.824,425.824c-45.361,45.36-105.672,70.341-169.824,70.341 s-124.462-24.981-169.824-70.341C40.816,380.462,15.835,320.152,15.835,256S40.816,131.538,86.176,86.176 C131.538,40.816,191.848,15.835,256,15.835c20.883,0,41.629,2.709,61.782,8.063c-0.724,3.502-1.081,6.952-1.081,10.411 c0,17.46,8.102,33.513,21.936,43.97c-0.556,3.072-0.822,5.953-0.822,8.814c0,30.56,24.863,55.423,55.423,55.423 c7.372,0,14.612-1.537,21.582-4.576c9.303,6.464,19.991,9.855,31.201,9.855c7.532,0,14.994-1.589,21.955-4.64 c18.463,34.627,28.19,73.479,28.19,112.846C496.165,320.152,471.184,380.462,425.824,425.824z" fill="#404040"/></g></g><g><g><path d="M160.99,95.01c-21.829,0-39.588,17.758-39.588,39.588c0,21.829,17.759,39.588,39.588,39.588 c21.829,0,39.588-17.758,39.588-39.588S182.819,95.01,160.99,95.01z M160.99,158.351c-13.098,0-23.753-10.656-23.753-23.753 c0-13.097,10.655-23.753,23.753-23.753c13.098,0,23.753,10.656,23.753,23.753C184.742,147.695,174.087,158.351,160.99,158.351z" fill="#404040"/></g></g><g><g><path d="M409.072,216.412c-21.829,0-39.588,17.758-39.588,39.588s17.758,39.588,39.588,39.588S448.66,277.829,448.66,256 C448.66,234.171,430.901,216.412,409.072,216.412z M409.072,279.753c-13.097,0-23.753-10.656-23.753-23.753 c0-13.097,10.656-23.753,23.753-23.753c13.097,0,23.753,10.656,23.753,23.753C432.825,269.097,422.169,279.753,409.072,279.753z" fill="#404040"/></g></g><g><g><path d="M129.32,290.309c-21.829,0-39.588,17.758-39.588,39.588s17.758,39.588,39.588,39.588s39.588-17.758,39.588-39.588 S151.149,290.309,129.32,290.309z M129.32,353.649c-13.098,0-23.753-10.656-23.753-23.753c0-13.097,10.655-23.753,23.753-23.753 c13.098,0,23.753,10.656,23.753,23.753C153.072,342.994,142.417,353.649,129.32,353.649z" fill="#404040"/></g></g><g><g><path d="M266.557,195.299c-21.829,0-39.588,17.759-39.588,39.588c0,21.829,17.759,39.588,39.588,39.588 c21.829,0,39.588-17.758,39.588-39.588C306.144,213.057,288.386,195.299,266.557,195.299z M266.557,258.639 c-13.098,0-23.753-10.656-23.753-23.753c0-13.097,10.655-23.753,23.753-23.753c13.097,0,23.753,10.656,23.753,23.753 C290.309,247.983,279.653,258.639,266.557,258.639z" fill="#404040"/></g></g><g><g><path d="M308.784,358.928c-21.829,0-39.588,17.758-39.588,39.588s17.758,39.588,39.588,39.588s39.588-17.758,39.588-39.588 S330.613,358.928,308.784,358.928z M308.784,422.268c-13.097,0-23.753-10.656-23.753-23.753c0-13.097,10.656-23.753,23.753-23.753 c13.097,0,23.753,10.656,23.753,23.753C332.536,411.612,321.88,422.268,308.784,422.268z" fill="#404040"/></g></g></svg>' +
+                </button>
-            '<p>Cookies erleichtern uns die Bereitstellung unserer Dienste und dieser Webseite. Mit der Nutzung von unseren Diensten erklären Sie sich damit einverstanden, dass wir Cookies verwenden.</p>' +
+                <div class="row py-6">
-            '</div>' +
+                    <div class="col-1">
-            '<a class="btn btn-sm" href="/about/impressum#datenschutz" target="_blank">Weitere Informationen</a> ' +
+                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width:48px;margin-right: 15px;margin-top: 5px;" xml:space="preserve"><g><g><path d="M478.01,128.591l-4.101-7.131l-6.97,4.372c-6.391,4.008-13.625,6.127-20.918,6.127c-9.167,0-17.886-3.232-25.215-9.35 l-4.128-3.446l-4.725,2.567c-6.047,3.284-12.344,4.95-18.716,4.95c-21.829,0-39.588-17.758-39.588-39.588 c0-3.091,0.491-6.352,1.543-10.26l1.544-5.737l-5.076-3.087c-11.977-7.286-19.126-19.884-19.126-33.7 c0-4.252,0.805-8.575,2.464-13.214l2.802-7.848l-7.981-2.398C305.857,3.651,281.021,0,256,0 C187.619,0,123.331,26.628,74.979,74.979C26.628,123.331,0,187.619,0,256s26.628,132.669,74.979,181.021 C123.331,485.372,187.619,512,256,512s132.669-26.628,181.021-74.979C485.372,388.669,512,324.381,512,256 C512,211.32,500.246,167.261,478.01,128.591z M425.824,425.824c-45.361,45.36-105.672,70.341-169.824,70.341 s-124.462-24.981-169.824-70.341C40.816,380.462,15.835,320.152,15.835,256S40.816,131.538,86.176,86.176 C131.538,40.816,191.848,15.835,256,15.835c20.883,0,41.629,2.709,61.782,8.063c-0.724,3.502-1.081,6.952-1.081,10.411 c0,17.46,8.102,33.513,21.936,43.97c-0.556,3.072-0.822,5.953-0.822,8.814c0,30.56,24.863,55.423,55.423,55.423 c7.372,0,14.612-1.537,21.582-4.576c9.303,6.464,19.991,9.855,31.201,9.855c7.532,0,14.994-1.589,21.955-4.64 c18.463,34.627,28.19,73.479,28.19,112.846C496.165,320.152,471.184,380.462,425.824,425.824z" fill="#404040"/></g></g><g><g><path d="M160.99,95.01c-21.829,0-39.588,17.758-39.588,39.588c0,21.829,17.759,39.588,39.588,39.588 c21.829,0,39.588-17.758,39.588-39.588S182.819,95.01,160.99,95.01z M160.99,158.351c-13.098,0-23.753-10.656-23.753-23.753 c0-13.097,10.655-23.753,23.753-23.753c13.098,0,23.753,10.656,23.753,23.753C184.742,147.695,174.087,158.351,160.99,158.351z" fill="#404040"/></g></g><g><g><path d="M409.072,216.412c-21.829,0-39.588,17.758-39.588,39.588s17.758,39.588,39.588,39.588S448.66,277.829,448.66,256 C448.66,234.171,430.901,216.412,409.072,216.412z M409.072,279.753c-13.097,0-23.753-10.656-23.753-23.753 c0-13.097,10.656-23.753,23.753-23.753c13.097,0,23.753,10.656,23.753,23.753C432.825,269.097,422.169,279.753,409.072,279.753z" fill="#404040"/></g></g><g><g><path d="M129.32,290.309c-21.829,0-39.588,17.758-39.588,39.588s17.758,39.588,39.588,39.588s39.588-17.758,39.588-39.588 S151.149,290.309,129.32,290.309z M129.32,353.649c-13.098,0-23.753-10.656-23.753-23.753c0-13.097,10.655-23.753,23.753-23.753 c13.098,0,23.753,10.656,23.753,23.753C153.072,342.994,142.417,353.649,129.32,353.649z" fill="#404040"/></g></g><g><g><path d="M266.557,195.299c-21.829,0-39.588,17.759-39.588,39.588c0,21.829,17.759,39.588,39.588,39.588 c21.829,0,39.588-17.758,39.588-39.588C306.144,213.057,288.386,195.299,266.557,195.299z M266.557,258.639 c-13.098,0-23.753-10.656-23.753-23.753c0-13.097,10.655-23.753,23.753-23.753c13.097,0,23.753,10.656,23.753,23.753 C290.309,247.983,279.653,258.639,266.557,258.639z" fill="#404040"/></g></g><g><g><path d="M308.784,358.928c-21.829,0-39.588,17.758-39.588,39.588s17.758,39.588,39.588,39.588s39.588-17.758,39.588-39.588 S330.613,358.928,308.784,358.928z M308.784,422.268c-13.097,0-23.753-10.656-23.753-23.753c0-13.097,10.656-23.753,23.753-23.753 c13.097,0,23.753,10.656,23.753,23.753C332.536,411.612,321.88,422.268,308.784,422.268z" fill="#404040"/></g></g></svg>
-            '<a class="btn btn-sm btn-primary" id="cookie-confirm">Alles klar</a>' +
+                    </div>
-            '</div>'
+                    <p class="col">Cookies erleichtern uns die Bereitstellung unserer Dienste und dieser Webseite. Mit der Nutzung von unseren Diensten erklären Sie sich damit einverstanden, dass wir Cookies verwenden.</p>
-        );
+                </div>
+                <a class="btn btn-sm" href="/about/impressum#datenschutz" target="_blank">Weitere Informationen</a> 
+                <a class="btn btn-sm btn-primary" id="cookie-confirm">Alles klar</a>
+            </div>
+        `);
     }
     $('#cookie-alert').on('close.bs.alert', function () {
         setCookie('agreedToCookies', true);
@@ -326,4 +330,5 @@ function loadNotificationsAsync() {
         error: console.log
     });
 }
+
 loadNotificationsAsync();