old/application/views/home.php

<?php
    defined('BASEPATH') OR exit('No direct script access allowed');

    use Coduo\PHPHumanizer\DateTimeHumanizer;

?>
<section class="p-0">
    <div id="main-slider" class="carousel slide" data-ride="carousel" type="background">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#main-slider" data-slide-to="0" class="active"></li>
            <li data-target="#main-slider" data-slide-to="1" class=""></li>
            <li data-target="#main-slider" data-slide-to="2" class=""></li>
            <li data-target="#main-slider" data-slide-to="3" class=""></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active"
                 style="background-image: url(<?= base_url('f/449633b8fead67e16389c9f248e699db') ?>)">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="carousel-content centered">
                                    <h2 class="boxed animation animated-item-1 d-none d-md-block">
                                        <?= lang('home_slider_portfolio_title'); ?>
                                    </h2>
                                    <p class="boxed animation animated-item-1 d-block d-md-none">
                                        <?= lang('home_slider_portfolio_title'); ?>
                                    </p>
                                    <p class="boxed animation animated-item-2 d-none d-md-block">
                                        <?= lang('home_slider_portfolio_des'); ?>
                                    </p>
                                    <br>
                                    <a class="boxed btn btn-md animation animated-item-4"
                                       href="<?= base_url('projects') ?>">
                                        <?= lang('home_slider_portfolio_btn') ?>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item" style="background-image: url('/f/91200698b76de87f559d104781e1eacf')">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="carousel-content centered">
                                    <h2 class="boxed animation animated-item-1 d-none d-md-block">
                                        <?= lang('home_slider_blog_title'); ?>
                                    </h2>
                                    <p class="boxed animation animated-item-1 d-block d-md-none">
                                        <?= lang('home_slider_blog_title'); ?>
                                    </p>

                                    <p class="boxed animation animated-item-2 d-none d-md-block">
                                        <?= lang('home_slider_blog_des'); ?>
                                    </p>
                                    <br>
                                    <a class="boxed btn btn-md animation animated-item-4"
                                       href="<?= base_url('blog') ?>"><?= lang('home_slider_blog_btn') ?></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item" style="background-image: url(<?= base_url('/f/c90c521b144d97f76530ae2a46a3727d') ?>)">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="carousel-content centered">
                                    <h2 class="boxed animation animated-item-1 d-none d-md-block">
                                        <?= lang('home_slider_about_title'); ?>
                                    </h2>
                                    <p class="boxed animation animated-item-1 d-block d-md-none">
                                        <?= lang('home_slider_about_title'); ?>
                                    </p>

                                    <p class="boxed animation animated-item-2 d-none d-md-block">
                                        <?= lang('home_slider_about_des'); ?>
                                    </p>
                                    <br>
                                    <a class="boxed btn btn-md animation animated-item-4"
                                       href="<?= base_url('projects') ?>"><?= lang('home_slider_about_btn') ?></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item" style="background-image: url(<?= base_url('/f/59a870203c3eae5aa1d9c831f64b32fd') ?>)">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="carousel-content centered">
                                    <h2 class="boxed animation animated-item-1 d-none d-md-block">
                                        <?= lang('home_slider_video_title'); ?>
                                    </h2>
                                    <p class="boxed animation animated-item-1 d-block d-md-none">
                                        <?= lang('home_slider_video_title'); ?>
                                    </p>

                                    <p class="boxed animation animated-item-2 d-none d-md-block">
                                        <?= lang('home_slider_video_des'); ?>
                                    </p>
                                    <a class="boxed btn btn-md animation animated-item-3"
                                       href="<?= $video['url'] ?>" target="_blank">
                                        <?= lang('home_slider_video_btn') ?>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-6 hidden-xs animation animated-item-4">
                                <div class="centered">
                                    <a href="<?= $video['url'] ?>" target="_blank">
                                        <img src="<?= $video['imageSource'] ?>" class="img-fluid">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Controls -->
        <a class="carousel-control-prev" href="#main-slider" role="button" data-slide="prev">
                <span aria-hidden="true" class="fa fa-angle-left"
                      style="position: absolute;top: 45%;left: 50%;z-index: 5;display: inline-block;font-size: 50px;"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#main-slider" role="button" data-slide="next">
                <span aria-hidden="true" class="fa fa-angle-right"
                      style="position: absolute;top: 45%;left: 50%;z-index: 5;display: inline-block;font-size: 50px;"></span>
            <span class="sr-only">Next</span>
        </a>
</section>
<!--/#main-slider-->

<section class="container">
    <div class="row my-2">
        <div class="col">
            <h1 class="text-center">Wer bin ich eigentlich?</h1>
            <p class="lead">Mein Name ist Marcel und seit einigen Jahren programmiere ich leidenschaftlich. In dieser Zeit habe ich alle möglichen Sprachen und Frameworks mir selbst beigebracht und die unterschiedlichsten Projekte auf die Beine gestellt -
                            unter anderem auch diese Website. Weitere Hobbies von mir sind Design, Schreiben, Animation, Fotografie und Videoschnitt. All das zusammen verpacke ich in meinen YouTube-Videos, die ich mittlerweile seit 2013 produziere. Dazu habe
                            ich verschiedene Kanäle erstellt, die ich im Nachfolgenden erläutern werde. Falls ihr noch mehr über mich erfahren wollt, könnt ihr dies sehr einfach auf der Über mich-Seite.</p>
            <a href="<?= base_url('about') ?>" class="btn btn-primary">Über mich</a>
        </div>
    </div>

    <div class="row my-2">
        <div class="col-md-4">
            <div class="list-group" id="yt-channels-tabs" role="tablist">
                <a href="#yt-channel-kingofdog" class="list-group-item list-group-item-action active" data-toggle="list" role="tab" aria-controls="yt-channel-kingofdog" id="yt-channel-kingofdog-tab">KingOfDog</a>
                <a href="#yt-channel-zeybefx" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-zebyefx" id="yt-channel-zeybefx-tab">ZebyeFX</a>
                <a href="#yt-channel-zeybeofficial" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-zeybeofficial" id="yt-channel-zeybeofficial-tab">ZebyeOfficial</a>
                <a href="#yt-channel-kingofdogint" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-kingofdogint" id="yt-channel-kingofdogint-tab">KingOfDog International</a>
                <a href="#yt-channel-kingofdogtv" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-kingofdogtv" id="yt-channel-kingofdogtv-tab">KingOfDogTV</a>
                <a href="#yt-channel-minepoint" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-minepoint" id="yt-channel-minepoint-tab">MinePoint</a>
            </div>
        </div>

        <div class="col-md-8">
            <div class="tab-content" id="nav-yt-channel-content">
                <div class="tab-pane fade show active" id="yt-channel-kingofdog" role="tabpanel" aria-labelledby="yt-channel-kingofdog-tab">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-body">
                                    <div class="yt-channel-title">
                                        <img src="<?= base_url('/f/59768b61257e439b593ff2fb112d5079?w=160') ?>" alt="KingOfDog Logo">
                                        <h3>KingOfDog</h3>
                                    </div>

                                    <p class="yt-channel-desc">
                                        <?= lang('home_kingofdog_des') ?>
                                    </p>

                                    <a href="https://youtube.com/KingOfDog" target="_blank" class="btn btn-primary">Kanal besuchen</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="yt-channel-zeybefx" role="tabpanel" aria-labelledby="yt-channel-zeybefx-tab">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-body">
                                    <div class="yt-channel-title">
                                        <img src="<?= base_url('/f/3c930821892961aba30c7f91df1e5d4e?w=160') ?>" alt="ZeybeFX Logo">
                                        <h3>ZeybeFX</h3>
                                    </div>

                                    <p class="yt-channel-desc">
                                        <?= lang('home_zeybefx_des') ?>
                                    </p>

                                    <a href="https://www.youtube.com/channel/UCossYe6KMMhf9HJ9Uaqtu-g" target="_blank" class="btn btn-primary">Kanal besuchen</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="yt-channel-zeybeofficial" role="tabpanel" aria-labelledby="yt-channel-zeybeofficial-tab">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-body">
                                    <div class="yt-channel-title">
                                        <img src="<?= base_url('/f/54c5963da3587342cb34336fd15c87aa?w=160') ?>" alt="ZeybeOfficial Logo">
                                        <h3>ZeybeOfficial</h3>
                                    </div>

                                    <p class="yt-channel-desc">
                                        <?= lang('home_zeybeofficial_des') ?>
                                    </p>

                                    <a href="https://www.youtube.com/channel/UCJ1_Tj4SVkU5h9a8Q0VrB4A" target="_blank" class="btn btn-primary">Kanal besuchen</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="yt-channel-kingofdogint" role="tabpanel" aria-labelledby="yt-channel-kingofdogint-tab">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-body">
                                    <div class="yt-channel-title">
                                        <img src="<?= base_url('/f/7b3fd0b5fb3ef9565f396a266db14a64?w=160') ?>" alt="KingOfDog International Logo">
                                        <h3>KingOfDog International</h3>
                                    </div>

                                    <p class="yt-channel-desc">
                                        <?= lang('home_kingofdogint_des') ?>
                                    </p>

                                    <a href="https://www.youtube.com/channel/UCthOkS9cpKgnBSj7AdR1rDg" target="_blank" class="btn btn-primary">Kanal besuchen</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="yt-channel-kingofdogtv" role="tabpanel" aria-labelledby="yt-channel-kingofdogtv-tab">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-body">
                                    <div class="yt-channel-title">
                                        <img src="<?= base_url('/f/d904d757da59e2d514d9b12604b9c8b6?w=160') ?>" alt="KingOfDogTV Logo">
                                        <h3>KingOfDogTV</h3>
                                    </div>

                                    <p class="yt-channel-desc">
                                        <?= lang('home_kingofdogtv_des') ?>
                                    </p>

                                    <a href="https://www.youtube.com/channel/UCNiPkMSdFR3ERemtlVTdtIQ" target="_blank" class="btn btn-primary">Kanal besuchen</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="yt-channel-minepoint" role="tabpanel" aria-labelledby="yt-channel-minepoint-tab">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-body">
                                    <div class="yt-channel-title">
                                        <img src="<?= base_url('/f/1771967ab185e4d62ff5963977032fd8?w=160') ?>" alt="MinePoint Logo">
                                        <h3>MinePoint</h3>
                                    </div>

                                    <p class="yt-channel-desc">
                                        <?= lang('home_minepoint_des') ?>
                                    </p>

                                    <a href="https://www.youtube.com/channel/UC2KTZbfkUo-Afc_JZpTZ0sQ" target="_blank" class="btn btn-primary">Kanal besuchen</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-parallax section-green">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 text-center">
                <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>
    </div>
</section>

<section class="container">
    <div class="grid grid-kod-network">
        <div class="item-active">
            <h2><?= lang('home_active_users') ?></h2>
            <?php foreach ($currentlyActiveUsers as $activeUser):
                $loginTime = strtotime($activeUser['lastLogin']); ?>
                <div class="user-item">
                    <img src="<?= $activeUser['profilePicture'] ?>?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="item-newest">
            <h2><?= lang('home_newest_users') ?></h2>
            <?php
                foreach ($newestUsers as $newestUser):
                    $registeredDate = strtotime($newestUser['dateCreated']); ?>
                    <div class="user-item">
                        <img src="<?= $newestUser['profilePicture'] ?>?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="item-posts">
            <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>
</section>

<section class="section-parallax section-orange">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 text-center">
                <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>
    <div class="social-media-list row">
        <div class="social-media-item col twitter">
            <h4>Twitter</h4>
            <a href="https://twitter.com/KingOfDogTV" target="_blank">
                <i class="fab fa-twitter icon-md icon-center"></i>
            </a>
            <h4>@KingOfDogTV</h4>
        </div>
        <div class="social-media-item col youtube">
            <h4>YouTube</h4>
            <a href="https://youtube.com/KingOfDog" target="_blank">
                <i class="fab fa-youtube icon-md icon-center"></i>
            </a>
            <h4>KingOfDog</h4>
        </div>
        <div class="social-media-item col google-plus">
            <h4>Google+</h4>
            <a href="https://google.com/+KingOfDog" target="_blank">
                <i class="fab fa-google-plus-g icon-md icon-center"></i>
            </a>
            <h4>+KingOfDog</h4>
        </div>
        <div class="social-media-item col _500px">
            <h4>500px</h4>
            <a href="https://500px.com/KingOfDog" target="_blank">
                <i class="fab fa-500px icon-md icon-center"></i>
            </a>
            <h4>KingOfDog</h4>
        </div>
        <div class="social-media-item col patreon">
            <h4>Patreon</h4>
            <a href="https://patreon.com/KingOfDog" target="_blank">
                <i class="fab fa-patreon icon-md icon-center"></i>
            </a>
            <h4>KingOfDog</h4>
        </div>
        <div class="social-media-item col steam">
            <h4>Steam</h4>
            <a href="https://steamcommunity.com/id/KingOfDog" target="_blank">
                <i class="fab fa-steam icon-md icon-center"></i>
            </a>
            <h4>KingOfDog</h4>
        </div>
        <div class="social-media-item col github">
            <h4>Github</h4>
            <a href="https://github.com/KingOfDog" target="_blank">
                <i class="fab fa-github icon-md icon-center"></i>
            </a>
            <h4>KingOfDog</h4>
        </div>
        <div class="social-media-item col twitch">
            <h4>Twitch</h4>
            <a href="https://twitch.tv/kingofdog" target="_blank">
                <i class="fab fa-twitch icon-md icon-center"></i>
            </a>
            <h4>KingOfDog</h4>
        </div>
        <div class="social-media-item col spotify">
            <h4>Spotify</h4>
            <a href="https://spotify.com/user/DMMZocker" target="_blank">
                <i class="fab fa-spotify icon-md icon-center"></i>
            </a>
            <h4>DMMZocker</h4>
        </div>
    </div>
</section>

<section class="container">
    <div class="row">
        <h1 class="col-xs-12"><?= lang('home_posts') ?></h1>
    </div>
    <div class="row" id="social-post-container" data-error-msg="Es konnten keine weiteren Posts geladen werden!">
        <div class="col-12">
            <div class="row">
                <ul class="sort-list-filter">
                    <li>
                        <a class="btn btn-default btn-sm active" href="#"
                           data-filter="*"><?= lang('home_social_all'); ?></a>
                    </li>
                    <li>
                        <a class="btn btn-default btn-sm" href="#" data-filter=".twitter">Twitter</a>
                    </li>
                    <li>
                        <a class="btn btn-default btn-sm" href="#" data-filter=".youtube">Youtube</a>
                    </li>
                    <li data-toggle="tooltip" title="Coming soon">
                        <a class="btn btn-default btn-sm disabled" href="#" data-filter=".instagram">Twitch</a>
                    </li>
                    <li data-toggle="tooltip" title="Coming soon">
                        <a class="btn btn-default btn-sm disabled" href="#" data-filter=".instagram">Instagram</a>
                    </li>
                    <li data-toggle="tooltip" title="Coming soon">
                        <a class="btn btn-default btn-sm disabled" href="#" data-filter=".instagram">500px</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col">
            <div class="row">
                <ul class="sort-list-items w-100 m-0" id="social-posts">
                </ul>
            </div>
        </div>
    </div>
    <button id="load-more-button" class="btn btn-default col-xs-6 col-xs-offset-3" onclick="loadPosts(false)"
            data-loading="<div class='loadingSpinner'></div> Lädt..."
            data-load="<i class='fa fa-ellipsis-h'></i> Mehr Posts laden">
        <i class="fa fa-ellipsis-h"></i>
        Mehr Posts laden
    </button>
</section>

<section class="section-parallax section-red">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 text-center">
                <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">
    <div class="container">
        <div class="row">
            <div class="col-sm-1">
                <i class="fa fa-exclamation icon-md-alizarin" style="margin-top:30px"></i>
            </div>
            <div class="col-sm-11">
                <h2><?= lang('home_ads_title') ?></h2>
                <p><?= lang('home_ads_description') ?></p>
            </div>
        </div>
    </div>
</section>
<!--/#testimonial-->