Skip to content

Instantly share code, notes, and snippets.

@devuri

devuri/index.html

Created May 4, 2019 04:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save devuri/50ee9dee3b44c1972c3d10c53d9d4436 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save devuri/50ee9dee3b44c1972c3d10c53d9d4436 to your computer and use it in GitHub Desktop.
Download ZIP
Web Tv app
Raw
index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body ng-app="myApp" ng-controller="myCtrl">
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper grey darken-4">
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#">Login</a></li>
<li><a href="#" data-activates="slide-out">Menu</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
</div>
<ul id="slide-out" class="side-nav">
<li>
<div class="user-view">
<div class="background">
<img src="http://img.freepik.com/free-vector/modern-comic-background-with-clouds_1035-8007.jpg?size=338&ext=jpg">
</div>
<a href="#!user"><img class="circle" src="https://i.pinimg.com/474x/6b/fd/cf/6bfdcf03400deb4bd5bd2c7d73941ff6--hair-images-most-beautiful-images.jpg"></a>
<span class="name">UserName</span>
<span class="email">User</span>
</div>
</li>
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search">
<i class="material-icons">search</i>
</label>
<i class="material-icons">close</i>
</div>
</form>
</li>
<li><a href="#!" ng-click="$scope.menuitem='app'" ><i class="material-icons dp48">inbox</i>App</a></li>
<li><a href="#!" ng-click="">Streaming <i class="material-icons dp48">live_tv</i></a></li>
<li><a href="#!" ng-click="">Music <i class="material-icons dp48">music_note</i></a></li>
<li><a href="#!" ng-click="">Social <i class="material-icons dp48">account_circle</i></a></li>
<li><a href="#!" ng-click="">Game <i class="material-icons dp48">videogame_asset</i></a></li>
<li><a href="#!" ng-click="">Playlist<i class="material-icons dp48">format_list_bulleted</i></a></li>
<li>
<div class="divider"></div>
</li>
<li><a class="modal-trigger" href="#modalsettings">Settings<i class="material-icons dp48">settings</i></a> </li>
<li>
<div class="divider"></div>
</li>
<li><a href="#!" class="modal-trigger" href="#modalsetting">Logout<i class="material-icons dp48">exit_to_app</i></a> </li>
</ul>
</header>
<!-- Modal Structure -->
<div id="modalsettings" class="modal">
<div class="modal-content">
<h4>Settings <i class="material-icons dp48">settings</i></h4>
<p>Theme</p>
<p>Wallpaper</p>
<p>Language</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Ok</a>
</div>
</div>
<main>
<div class="row">
<div class="carousel">
<a class="carousel-item" ng-repeat="x in streaming" href="{{x.link}}"><img class="z-depth-4" src="{{x.tileImage}}"></a>
</div>
</div>
</main>
<footer class="page-footer grey darken-4">
<div class="footer-copyright">
<div class="container center">
{{year}} Mady by <span class="straycat">Straycat</span>
</div>
</div>
</footer>
</body>
Raw
script.js
// load carousel form matreiallized.js
$(document).ready(function(){
$('.carousel').carousel();
$('.button-collapse').sideNav();
$('.modal').modal();
});
// angular js app
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.year = "2017";
$scope.user = [];
$scope.streaming = [
{tileTitle:'Youtube', tileImage:'http://www.hashtagcommunications.ca/wp-content/uploads/2017/02/youtube_main-250x250.jpg',link:'https://www.youtube.com/'},
{tileTitle:'Netflix', tileImage:'https://lh3.ggpht.com/myH_2mHzOUqr0UVHUvsAMANT2a-XFvxxiuob8g49KjdVHU87lU8xujwg1BgTTKId-w=w300',link:'https://www.netflix.com/'},
{tileTitle:'Hulu', tileImage:'http://www.duluthnewstribune.com/sites/default/files/styles/square_300/public/fieldimages/1/0503/hulu-2-ppcorn.jpg?itok=ePWmdXu-',link:'https://www.hulu.com/'},
{tileTitle:'twitch', tileImage:'https://lh3.googleusercontent.com/Ti7DQ5NH92V-_uuOiTbMOMwAjVXzl2rubjygxQp3KGutzuRHnjYvpCtfWJybeDYh4g=w300',link:'https://www.twitch.tv/'}
];
$scope.music = [
{tileTitle:'Soundcloud', tileImage:'http://podcasternews.com/wp-content/uploads/2014/05/SoundCloudLogo.jpg',link:'https://soundcloud.com'},
{tileTitle:'Spotify', tileImage:'https://i.vimeocdn.com/portrait/9423229_300x300',link:'https://www.spotify.com/'},
{tileTitle:'GooglePlay', tileImage:'https://lh6.ggpht.com/jdPOkX5ecSj2pSneq_OdcLCDY_y78nIIx_iXfAmdG8VoiUrt-4qmz--1AIQYYiPlcTE=w300',link:'https://play.google.com/music/listen'},
{tileTitle:'Jango', tileImage:'https://lh3.googleusercontent.com/2vNxUCas8fi0N7yfQBJGmcZvb1eX1eksCiSEIJLnNmzsNT3zjvrWm3LKvEfhwIznA7al=w300',link:'www.jango.com/'},
{tileTitle:'Last Fm', tileImage:'http://images.contentful.com/v6wpmtr1bucb/7pUIKAHrxeU8Ky4M66uugg/abd080dd7f2b23359b9c94a1514a68f2/lastfm.jpg?w=300',link:'https://www.last.fm/'}
];
$scope.app = [];
$scope.social = [];
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
Raw
style.css
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.straycat{
font-family: pacifico,cursive;
}
.straycat:hover{
color:#ff435d;
text-decoration: none;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment