Torah Live

by ethanpil

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://cdn.lukej.me/jquery.storage-api/1.7.2/jquery.storageapi.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.2/js/swiper.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.5.0/pure-min.css">
<header>
    <i class="fa fa-bars open-menu"></i>

    <img class="logo" src="http://torahlive.com/wp-content/themes/torahlive/images/logo.png" />
    
</header>

<nav class="slide-menu">
    <ul>    
        <li class="close-menu"><a href="#"><i class="fa fa-times-circle"></i> Close</a></li>
        <li><a href="#slide-1"><i class="fa fa-video-camera"></i> Courses</a></li>
        <li><a href="#slide-2"><i class="fa fa-line-chart"></i> Statistics</a></li>
        <li><a href="#slide-3"><i class="fa fa-cog"></i> Settings</a></li>
    </ul>
</nav>

<div id="app-pages" class="swiper-container">
  <div class="swiper-wrapper">
      
      <div id="slide-0" class="swiper-slide">

            <form id="login-form" class="pure-form pure-form-stacked">
                <fieldset>
                    <legend>Login to Torah Live</legend>
            
                    <label for="email">Username</label>
                    <input id="email" type="email" placeholder="Email" class="pure-input-1">
            
                    <label for="password">Password</label>
                    <input id="password" type="password" placeholder="Password" class="pure-input-1">
          
                    <label for="remember" class="pure-checkbox">
                        <input id="remember" type="checkbox"> Remember me
                    </label>
            
                    <button type="submit" class="pure-button pure-button-primary" class="pure-input-1" id="sign-in">Sign...

SCSS

body { 
    margin: 0;
    font-family: Sans-Serif;
    overflow-x:hidden;
    overflow-y:scroll;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #E4F3FA;
    text-align: center;
    width: 100%;
    z-index: 99998;
    border-bottom: 1px solid #eee;
    height: 3em;
    padding-bottom: .25em;
    
    .logo { 
        height: 3em;
        width: auto;
        margin: 0 auto;
        display: block;
    }
    
    i {
        position: absolute;
        left: .5em;
        top: .5em;
        padding: 0.25em .5em;
    }
}
/* Slide Menu */
nav.slide-menu {
    top: 0;
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: 99999;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-transition-duration: .25s;
    transition-duration: .25s;
    background: #EDF5F9;
    
    &.open {
         -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);       
    }
    ul { margin: 0; padding: 0; }
    li {
        display: block;
        text-align: left;
        border-bottom: solid 1px #C1C5C6;
        padding: 10px 0 10px 10px;
    }
    li:first-child {
        border-top: none
    }
    li:last-child {
        border-bottom: none
    }
    li a {    
        font-size: 18px;
        text-decoration: none;
        color: rgb(79, 97, 107);           
            i {
                width: 1em;
                text-align: center;
                margin-right: .25em;
            }
    }
    .close-menu {
        background-color: #ADADAD;
        cursor: pointer;
        a {
            color: white;
            font-size: 16px;
        }
    }
}

/* Scrollbar */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar * {
      background:transparent;
}
::-webkit-scrollbar-track {
    margin-top: 3.25em
}
::-webkit-scrollbar-thumb {
    border-radius: 3px;
}
body:hover::-webkit-scrollbar-thumb {
    background: rgba(242, 242, 242,...

JavaScript

$(function(){  

    storage=$.localStorage;
    
    if ( storage.isEmpty('courses') ) {
        $.getJSON( "http://torahlive.com/app-api", function( data ) {
          storage.set('courses',data); 
              var items = [];
            $.each( courses, function(i, result) {
                items.push( "<li class='course' id='" + result.id + "'><img src='" + result.image + "'/>" + result.title + "</li>" );
            });
            
            $( "<ul/>", {
                "id": "courses",
                "class": "listview",
                html: items.join( "" )
            }).appendTo( "#slide-1" );
       
        });
            
    } else {
    
    courses = storage.get('courses'); 
 
    var items = [];
    $.each( courses, function(i, result) {
        items.push( "<li class='course' id='" + result.id + "'><img src='" + result.image + "'/>" + result.title + "</li>" );
      });
     
      $( "<ul/>", {
        "id": "courses",
        "class": "listview",
        html: items.join( "" )
      }).appendTo( "#slide-1" );
    }    
  //Initialize the main swiper  
    
   var mySwiper = new Swiper ('#app-pages', {
      // Optional parameters
      direction: 'horizontal',
      loop: false,
      hashNav:true,
      allowSwipeToPrev: false,
      allowSwipeToNext: false,
    
    }); 
    
    // Scrollbar Effect    
    $(window).scroll(function() {
        $('body').addClass('scrolling');
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            $('body').removeClass('scrolling');
        }, 250));
    });    
    
  //Process the main button clicks to swipe to page.
   $('.open-menu, .slide-menu a').click(function(){
       $('.slide-menu').toggleClass("open");
    });
   
    $('.close-menu a').click(function(){
       $('.slide-menu').removeClass("open");
    });   
    
    
})