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('portfolio') ?>">
                                        <?= 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['post_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['post_url'] ?>" target="_blank">
                                        <img src="<?= $video['post_img_source'] ?>" 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">
    <h1><?= lang('home_channels_title') ?></h1>
    <div class="row">
        <div class="row justify-content-center">
            <div class="col-xs-12 col-md-6">
                <div class="row justify-content-center">
                    <div class="col-xs-4 mx-4 m-sm-0">
                        <a href="https://www.youtube.de/KingOfDog" target="_blank">
                            <img src="/f/59768b61257e439b593ff2fb112d5079?w=200" class="img-fluid rounded">
                        </a>
                    </div>
                    <div class="col mr-4 m-sm-0">
                        <a href="https://www.youtube.de/KingOfDog" target="_blank">
                            <h2>KingOfDog</h2>
                        </a>
                        <p class="text-justify"><?= lang('home_kingofdog_des') ?></p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                <div class="row justify-content-center">
                    <div class="col-xs-4 mx-4 m-sm-0">
                        <a href="https://www.youtube.com/channel/UCossYe6KMMhf9HJ9Uaqtu-g" target="_blank">
                            <img src="/f/fbee51f02df362fc8cca5a2a177e1852?w=200" class="img-fluid rounded">
                        </a>
                    </div>
                    <div class="col mr-4 m-sm-0">
                        <a href="https://www.youtube.com/channel/UCossYe6KMMhf9HJ9Uaqtu-g" target="_blank">
                            <h2>ZeybeFX</h2>
                        </a>
                        <p class="text-justify"><?= lang('home_zeybefx_des') ?></p>
                    </div>
                </div>
            </div>
            <div class="w-100"></div>
            <div class="col-xs-12 col-md-6">
                <div class="row justify-content-center">
                    <div class="col-xs-4 mx-4 m-sm-0">
                        <a href="https://www.youtube.com/channel/UCJ1_Tj4SVkU5h9a8Q0VrB4A" target="_blank">
                            <img src="/f/b1771da2202f7fc83325520be61d961a?w=200" class="img-fluid rounded">
                        </a>
                    </div>
                    <div class="col mr-4 m-sm-0">
                        <a href="https://www.youtube.com/channel/UCJ1_Tj4SVkU5h9a8Q0VrB4A" target="_blank">
                            <h2>ZeybeOfficial</h2>
                        </a>
                        <p class="text-justify"><?= lang('home_zeybeofficial_des') ?></p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                <div class="row justify-content-center">
                    <div class="col-xs-4 mx-4 m-sm-0">
                        <a href="https://www.youtube.com/channel/UCthOkS9cpKgnBSj7AdR1rDg" target="_blank">
                            <img src="/f/972a648bc945712b44dd2b020150d3d5?w=200" class="img-fluid rounded">
                        </a>
                    </div>
                    <div class="col mr-4 m-sm-0">
                        <a href="https://www.youtube.com/channel/UCthOkS9cpKgnBSj7AdR1rDg" target="_blank">
                            <h2>KingOfDog International</h2>
                        </a>
                        <p class="text-justify"><?= lang('home_kingofdogint_des') ?></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-parallax section-green">
    <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="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>
</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>
    <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="<i class='fa fa-cog fa-spin'></i> 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">
                <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-->