Demo entry 6358528

asd

   

Submitted by anonymous on Apr 26, 2017 at 01:39
Language: HTML+Twig. Code size: 29.9 kB.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="<%= icon_data %>" type="image/png"/>
    <!-- Template Title -->
    <title> <%= title %> </title>

    <!-- MapBox GL stylesheet -->
    <link href='//api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet'/>
    <!-- Bootstrap 3.2.0 stylesheet -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/mdb.min.css">
    <!-- Font Awesome Icon stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Owl Carousel stylesheet -->
    <link href="css/owl.carousel.css" rel="stylesheet">

    <!-- Pretty Photo stylesheet -->
    <link href="css/prettyPhoto.css" rel="stylesheet">

    <link href="/css/index.css" rel="stylesheet">

    <link href="css/color/white.css" rel="stylesheet">


    <!-- Custom Responsive stylesheet -->
    <link href="css/responsive.css" rel="stylesheet">


    <!-- Custom stylesheet -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

    <!-- ====== Header Section ====== -->
    <header id="top">
        <div class="bg-color">
            <div class="top section-padding">
                <div class="container">
                    <div class="row">

                        <div class="col-sm-7 col-md-7">
                            <div class="content">
                                <h1><strong>TrueService</strong></h1>
                                <h2>Get real data from real users of internet performance of mobile data carriers</h2>
                                <p>Scroll down to see more!</p>
                                <div class="button" id="download-app1">
                                    <a href="#download" class="btn btn-default btn-lg custom-btn"><i
                                                class="fa fa-cloud-download"></i>Download App</a>
                                </div> <!-- end .button -->
                            </div> <!-- end .content -->
                        </div> <!-- end .top > .container> .row> .col-md-7 -->

                        <div class="col-sm-5 col-md-5">
                            <div class="photo-slide">
                                <div id="carousel" class="carousel slide" data-ride="carousel">
                                    <div id="carousel" class="carousel slide" data-ride="carousel">
                                        <ol class="carousel-indicators">
                                            <li data-target="#carousel" data-slide-to="0"></li>
                                            <li data-target="#carousel" data-slide-to="1" class="active"></li>
                                            <!--<li data-target="#carousel" data-slide-to="2" class=""></li>-->
                                        </ol>
                                        <div class="carousel-inner">
                                            <!--<div class="item">-->
                                            <!--<img src="/images/snips/snip1.png" alt="">-->
                                            <!--</div>-->
                                            <div class="item active left">
                                                <img src="/images/snips/snip2.png" alt="">
                                            </div>
                                            <div class="item next left">
                                                <img src="/images/snips/snip1.png" alt="">
                                            </div>
                                        </div> <!-- end .carousel-inner -->
                                    </div> <!-- end #carousel -->
                                </div> <!-- end .photo-slide -->
                            </div> <!-- end .top > .container> .row> .col-md-5 -->

                        </div> <!-- end .top> .container> .row -->
                    </div> <!-- end .top> .container -->
                </div> <!-- end .top -->
            </div> <!-- end .bg-color -->
        </div>
    </header>
    <!-- ====== End Header Section ====== -->


    <!-- ====== Menu Section ====== -->
    <% include snips/navbar.ejs %>
    <!-- ====== End Menu Section ====== -->


    <!-- ====== Features Section ====== -->
    <section id="about">
        <div class="features section-padding">
            <div class="container">

                <div class="header">
                    <h1>Project TrueService</h1>
                    <p>
                        Face it: In this modern world, Smartphones, Internet, and Sleeping make up a lot of our day to
                        day activities. At home, we have Wi-Fi access to browse away, but what about when on the move,
                        driving somewhere, or at stranger's house? Here, we are dependent on the Data Speed of the
                        Wireless service carriers for the Browsing Pleasure.
                    </p>
                    <p>
                        Welcome to TrueService: a FREE app that gives information on companies that provide you Internet
                        in these situations. TruService gathers the data speed performance information from smartphone
                        users and presents it in a geographic map so you don't get stuck choosing the wrong mobile
                        carrier ever again!
                    </p>
                    <div class="underline">
                        <i class="fa fa-briefcase"></i>
                    </div>
                </div> <!-- end .container> .header -->

                <div class="row">
                    <div class="col-sm-4">
                        <div class="featured-item-img">
                            <img src="/images/snips/snip1.png" alt="">
                        </div>
                    </div>
                    <div class="col-sm-8 feature-list">
                        <div class="row">
                            <div class="col-sm-12 col-md-12">
                                <div class="row">
                                    <div class="col-sm-6 col-md-6">
                                        <div class="featured-item">
                                            <div class="icon">
                                                <div class="icon-style"><i class="fa fa-send"></i></div>
                                            </div> <!-- end icon -->
                                            <div class="meta-text">
                                                <h3>Non-profit</h3>
                                                <p>We don't recieve funding from ads or other monetisation services.</p>
                                            </div> <!-- end .meta-text -->
                                        </div> <!-- end .featured-item -->
                                    </div> <!-- end .feature-list> .row > .col-md-6 (2nd item) -->
                                    <div class="col-sm-6 col-md-6">
                                        <div class="featured-item">
                                            <div class="icon">
                                                <div class="icon-style"><i class="fa fa-gears"></i></div>
                                            </div> <!-- end icon -->
                                            <div class="meta-text">
                                                <h3>User reliant</h3>
                                                <p>We just build the platform, you are the one that makes it work.</p>
                                            </div> <!-- end .meta-text -->
                                        </div> <!-- end .featured-item -->
                                    </div> <!-- end .feature-list> .row > .col-md-6 (3rd item) -->
                                </div>
                            </div>
                            <div class="col-md-12 col-xs-12">
                                <div class="row">
                                    <div class="col-sm-6 col-md-6">
                                        <div class="featured-item">
                                            <div class="icon">
                                                <div class="icon-style"><i class="fa fa-search"></i></div>
                                            </div> <!-- end icon -->
                                            <div class="meta-text">
                                                <h3>What you give is what you get</h3>
                                                <p>Your help is essential for us to continue going. Just simply download
                                                   our app
                                                   and click the start service button</p>
                                            </div> <!-- end .meta-text -->
                                        </div> <!-- end .featured-item -->
                                    </div> <!-- end .feature-list> .row > .col-md-6 (4th item) -->
                                    <div class="col-sm-6 col-md-6">
                                        <div class="featured-item">
                                            <div class="icon">
                                                <div class="icon-style"><i class="fa fa-file"></i></div>
                                            </div> <!-- end icon -->
                                            <div class="meta-text">
                                                <h3>Honest Data</h3>
                                                <p>Our data is not manipulated in any way to favour a company or
                                                   organisation.</p>
                                            </div> <!-- end .meta-text -->
                                        </div> <!-- end .featured-item -->
                                    </div> <!-- end .feature-list> .row > .col-md-6 (5th item) --></div>
                            </div>


                            <div class="col-md-12 col-xs-12">
                                <div class="row">
                                    <div class="col-sm-6 col-md-6">
                                        <div class="featured-item">
                                            <div class="icon">
                                                <div class="icon-style"><i class="fa fa-desktop"></i></div>
                                            </div> <!-- end icon -->
                                            <div class="meta-text">
                                                <h3>Free</h3>
                                                <p>TrueService does not use advertisements, sell your information, or
                                                   monetise
                                                   this app in any way.</p>
                                            </div> <!-- end .meta-text -->
                                        </div> <!-- end .featured-item -->
                                    </div> <!-- end .feature-list> .row > .col-md-6 (1st item) -->
                                    <div class="col-sm-6 col-md-6">
                                        <div class="featured-item">
                                            <div class="icon">
                                                <div class="icon-style"><i class="fa fa-mobile-phone"></i></div>
                                            </div> <!-- end icon -->
                                            <div class="meta-text">
                                                <h3>Unlimited scope</h3>
                                                <p>With the help of Google's infrastructure and Google Cloud service, we
                                                   can
                                                   deploy to users all over the globe! (Presently, TruService is built
                                                   for
                                                   Android Users only though based on demand, it will be developed for
                                                   other
                                                   platforms as well)</p>
                                            </div> <!-- end .meta-text -->
                                        </div> <!-- end .featured-item -->
                                    </div> <!-- end .feature-list> .row > .col-md-6 (6th item) -->
                                </div>
                            </div>
                        </div> <!-- end .feature-list> .row -->

                    </div> <!-- end .feature-list -->
                </div> <!-- end .container> .row -->

            </div> <!-- end .container -->
        </div> <!-- end .features -->
    </section>
    <!-- ====== End Features Section ====== -->


    <!-- ====== Screenshots Section ====== -->
    <section id="map">
        <div class="screenshots section-padding dark-bg">
            <div class="container">

                <div class="header">
                    <h1>Data Map</h1>
                    <p>Real Time Data speeds are collected from smartphone users who have already downloaded the
                       TruService App. The data is collected separately for different wireless service providers</p>
                    <p>Below is our data map showing real time statistics on mobile carriers. Click a carrier to get
                       started. Zooming out may make the visualisation more helpful for you.</p>
                    <div class="underline"><i class="fa fa-image"></i></div>
                    <ul class="nav nav-tabs tabs-3 red" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#panel1" role="tab">AT&amp;T</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#panel2" role="tab">Verizon Wireless</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#panel3" role="tab">T-Mobile</a>
                        </li>
                    </ul>
                    <!-- Tab panels -->
                    <div class="tab-content card">
                        <!--Panel 1-->
                        <div class="tab-pane fade" id="panel1" role="tabpanel">
                            <iframe class="map-iframe" src="/map?carrier=AT%26T" frameborder="0"
                                    id="map-iframe-att"></iframe>
                        </div>
                        <!--/.Panel 1-->
                        <!--Panel 2-->
                        <div class="tab-pane fade" id="panel2" role="tabpanel">
                            <iframe class="map-iframe" src="/map?carrier=Verizon%20Wireless" frameborder="0"
                                    id="map-iframe-verizonwireless"></iframe>
                        </div>
                        <!--/.Panel 2-->
                        <!--Panel 3-->
                        <div class="tab-pane fade" id="panel3" role="tabpanel">
                            <iframe class="map-iframe" src="/map?carrier=T-Mobile" frameborder="0"
                                    id="map-iframe-tmobile"></iframe>
                        </div>
                        <!--/.Panel 3-->
                    </div>

                </div>

            </div> <!-- .container -->
        </div> <!-- end .screenshots -->
    </section>
    <!-- ====== End Screenshots Section ====== -->


    <!-- ====== Description Section ====== -->
    <section id="howitworks">
        <div class="description">
            <div class="description-one section-padding">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5 col-md-6">
                            <div class="app-image">
                                <img src="/images/display/smartphone.svg" alt="">
                            </div>
                        </div>
                        <div class="col-sm-7 col-md-6">
                            <div class="content">
                                <h1>How It Works: App</h1>
                                <h4>Let's see how the TrueService app tests Internet speeds.</h4>
                                <p>The TrueService app uses a built in Android functionality to check the difference in
                                   data downloaded on mobile networks in a span of 3 seconds. For example, if you
                                   download a file that's 25 megabytes, and downloaded 10 megabytes of it in 3
                                   seconds, the app catches and records the 10 megabytes. It then proceeds to divide the
                                   10 megabytes by 3 seconds and calculate your speed as 3.3 megabytes per second. </p>
                            </div>
                        </div>
                    </div> <!-- .container> .row -->
                </div> <!-- .container -->
            </div> <!-- end .description-one -->

            <div class="description-two section-padding dark-bg">
                <div class="container">
                    <div class="row">

                        <div class="col-sm-7 col-md-6">
                            <div class="content">
                                <h1>How it works: Web</h1>
                                <p>How is the data processed once it's collected?</p>
                                <ul class="list-item">
                                    <li><i class="fa fa-cloud-download"></i>Current data is retrieved from database as
                                                                            per carrier
                                    </li>
                                    <li>
                                        <i class="fa fa-map-marker"></i>&nbsp;&nbsp;Data is centralised to user's
                                                                        location.
                                    </li>
                                    <li>
                                        <i class="fa fa-street-view"></i>&nbsp;Data is plotted on map and displayed.
                                    </li>
                                </ul>
                            </div> <!-- end .content -->
                        </div> <!-- .container> .row> .col-md-6 -->

                        <div class="col-sm-5 col-md-6">
                            <div class="app-image">
                                <img class="img-responsive" src="images/display/website.svg" alt="">
                            </div> <!-- end .app-image -->
                        </div> <!-- .container> .row> .col-md-6 -->

                    </div> <!-- .container> .row -->
                </div> <!-- .container -->
            </div> <!-- end .description-two -->

        </div> <!-- end .description -->
    </section>
    <!-- ====== End Description Section ====== -->


    <!-- ====== Testimonial Section ====== -->
    <section id="testimonial">
        <div class="bg-color bg-testimonial">
            <div class="testimonial section-padding">
                <div class="container">
                    <div class="testimonial-slide">
                        <div id="carousel-testimonial" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-testimonial" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-testimonial" data-slide-to="1" class=""></li>
                                <li data-target="#carousel-testimonial" data-slide-to="2" class=""></li>
                            </ol>
                            <div class="carousel-inner">

                                <div class="item next left">
                                    <div class="image">
                                        <img src="images/people/yadu.jpg" alt="">
                                    </div> <!-- end .image -->
                                    <div class="content">
                                        <p>TrueService is my favourite project from all the ones I have taken up
                                           personally and through my education. It's both simplistic in creation and
                                           operation, yet so immensely helpful to an enormous audience.</p>
                                        <h4>Yadunandan Pillai</h4>
                                        <h5>Developer and CEO</h5>
                                    </div> <!-- end .content -->
                                </div> <!-- end .item (1) -->

                                <div class="item">
                                    <div class="image">
                                        <img src="http://lorempixel.com/g/96/96/" alt="">
                                    </div> <!-- end .image -->
                                    <div class="content">
                                        <p>This review is a placeholder that will soon be replaced by a quote from a
                                           real user.</p>
                                        <h4>Unconfirmed individual</h4>
                                        <h5>Unconfirmed role</h5>
                                    </div> <!-- end .content -->
                                </div> <!-- end .item (2) -->

                                <div class="item active left">
                                    <div class="image">
                                        <img src="images/people/farag.png" alt="">
                                    </div> <!-- end .image -->
                                    <div class="content">
                                        <p>Gainz you can keep.</p>
                                        <h4>Mark Farag</h4>
                                        <h5>Egyptian God</h5>
                                    </div> <!-- end .content -->
                                </div> <!-- end .item (3) -->

                            </div> <!-- end .carousel-inner -->
                        </div> <!-- end #carousel-testimonial -->
                    </div> <!-- end .testimonial-slide -->
                </div> <!-- end .container -->
            </div> <!-- end .testimonial -->
        </div> <!-- end .bg-testimonial -->
    </section>
    <!-- ====== End Testimonial Section ====== -->


    <!-- ====== Team Section ====== -->
    <section id="team">
        <div class="team section-padding">
            <div class="container">

                <div class="header">
                    <h1>Contributors</h1>
                    <div class="underline"><i class="fa fa-users"></i></div>
                </div> <!-- end .container> .header -->

                <h2>Thanks to Bahman Rashidi for mentoring this project's technical aspect and Lynne Norris for guiding
                    it's progress from an academic and management perspective </h2>       <!-- end .app-dev -->
            </div> <!-- end .container> .row -->

        </div> <!-- end .container -->
        </div> <!-- end .team -->
    </section>
    <!-- ====== Team Section ====== -->


    <!-- ====== Download Section ====== -->
    <section id="download">
        <div class="bg-color">
            <div class="download section-padding">
                <div class="container">

                    <div class="header">
                        <h1>Download <strong>TrueService</strong> from the Play Store</h1>
                        <p>Currently, TrueService is available for the Android Operating System in any country. Please
                           ensure you are running Android Kit Kat or later.</p>
                        <div class="underline"><i class="fa fa-cloud-download"></i></div>
                    </div> <!-- end .container > .header -->

                    <div class="row download-area">


                        <div class="col-xs-12">
                            <a href="https://play.google.com/store/apps/details?id=info.truservice.trueservice&hl=en"
                               class="btn btn-default custom-btn download-btn">
                                <img src="images/playstore.png" alt="">
                                <div class="app-download">
                                    <span>GET IT ON</span><strong>Google Play</strong>
                                </div>
                            </a>
                        </div> <!-- end .download-area> .col-lg-3 (2) -->


                    </div> <!-- end .container > .row/.download-area -->

                </div> <!-- end .container -->
            </div> <!-- end .download -->
        </div> <!-- end .bg-color -->
    </section>
    <!-- ====== End Download Section ====== -->


    <!-- ====== Contact Section ====== -->
    <footer id="contact">
        <div class="footer section-padding">
            <div class="container">
                <h1>Contact Us</h1>
                <a class="btn btn-indigo waves-effect waves-light" data-toggle="modal" data-target="#modal-contact">Click
                                                                                                                    to
                                                                                                                    Contact
                                                                                                                    Us</a>
            </div> <!-- end .container -->
        </div> <!-- end .footer -->
    </footer>
    <!-- ====== End Contact Section ====== -->


    <!-- ====== Copyright Section ====== -->
    <section class="copyright dark-bg">
        <div class="container">
            <p>&copy; 2017 <a href="#">TrueService</a>, All Rights Reserved</p>
        </div> <!-- end .container -->
    </section>
    <!-- ====== End Copyright Section ====== -->


    <!-- jQuery -->
    <script src="https://mdbootstrap.com/live/_MDB/templates/Landing-Page/js/jquery-3.1.1.min.js"></script>
    <script src="js/jquery.js"></script>

    <!-- Modernizr js -->
    <script src="js/modernizr-latest.js"></script>
    <script src="https://mdbootstrap.com/live/_MDB/templates/Landing-Page/js/tether.min.js"></script>
    <!-- Bootstrap 3.2.0 js -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/mdb.min.js"></script>

    <!-- Owl Carousel plugin -->
    <script src="js/owl.carousel.min.js"></script>

    <!-- ScrollTo js -->
    <script src="js/jquery.scrollto.min.js"></script>

    <!-- LocalScroll js -->
    <script src="js/jquery.localScroll.min.js"></script>

    <!-- jQuery Parallax plugin -->
    <script src="js/jquery.parallax-1.1.3.js"></script>

    <!-- Skrollr js plugin -->
    <script src="js/skrollr.min.js"></script>

    <!-- jQuery One Page Nav Plugin -->
    <script src="js/jquery.nav.js"></script>

    <!-- jQuery Pretty Photo Plugin -->
    <script src="js/jquery.prettyPhoto.js"></script>


    <!-- Custom JS -->
    <script src="js/main.js"></script>
    <script>
        function changeLogo() {
            $("#main_logo").height($("#navbar-brand").height());
        }
        ;
        $("#main_logo").height($("#navbar-brand").height());
    </script>

    <script>
        $(window).resize(
            function () {
                changeLogo();
            }
        );
    </script>
    <script>
        jQuery(document).ready(function ($) {
            "use strict";

            jQuery("a[data-rel^='prettyPhoto']").prettyPhoto({social_tools: false});
        });
    </script>
    <% include snips/contact.ejs %>

    <script>
        (
            function (i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function () {
                        (
                            i[r].q = i[r].q || []).push(arguments)
                    }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-97593664-1', 'auto');
        ga('send', 'pageview');

    </script>
</body>

<!-- Mirrored from demo.futureitpark.com/html/blue-app/ by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 27 Mar 2017 21:38:54 GMT -->
</html>

This snippet took 0.02 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).