twitchtvapp-nicer00ster
Version:
twitchtv show active users
190 lines (172 loc) • 9.05 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="twitchtv">
<meta name="author" content="nicer00ster">
<link rel="icon" href="https://static.twitchcdn.net/assets/favicon-75270f9df2b07174c23ce844a03d84af.ico">
<title>Twitch.tv</title>
<link href="https://fonts.googleapis.com/css?family=Faster+One|Monofett" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="node_modules/jquery-confirm/css/jquery-confirm.css">
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="bower_components/animate.css/animate.css">
</head>
<body>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Since launching in 2011, Twitch has evolved its reputation as the world’s leading social video service and community for video game culture to now encompass an array of emerging content surfaced by its users. As a result, 15 million visitors gather daily to interact about video games, music, the creative arts, their lives, and more with over 2 million unique creators who broadcast each month.</p>
</div>
<div class="col-sm-4 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="https://www.twitch.tv/" class="text-white">Twitch.tv</a></li>
<li><a href="https://twitter.com/Twitch?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" class="text-white">Follow Twitch.tv on Twitter</a></li>
<li><a href="https://www.facebook.com/Twitch/" class="text-white">Like Twitch.tv on Facebook</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand"><img src="img/twitch-icon-22.png" alt="logo" id="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Twitch.tv</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navigation Dashbar -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Your Streams
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"></a>
<a class="dropdown-item" href="#"></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Main Search -->
<section class="jumbotron text-center">
<div class="container">
<img src="img/jTSqOU8.png" alt="twitchlogo" id="twitchHeading">
<p class="lead text-muted">Follow your favorite twitch streamers. Know when they're online, and know what they're streaming.</p>
<form id="submit_search">
<div class="input-group">
<input type="hidden" name="search_param" value="all">
<input type="text" class="form-control" id="user_input" placeholder="Search streamer...">
<span class="input-group-btn">
<button class="btn btn-outline-secondary" type="button" id="user_search"><span class="fa fa-search" id="btnbtn"></span></button>
</span>
</div>
</form>
</div>
</section>
<!-- Successfully added streamer alert -->
<!--
<div class="container">
<div class="alert alert-success alert-dismissable fade show" role="alert" hidden="true">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<h4 class="alert-heading">GGWP!</h4>
<p>Aww yeah, you successfully added a Twitch.tv streamer to your dashbar! You'll now be able to see when this streamer is live at anytime. You'll also get quick access to see his or her Twitch.tv stats at your convenience. </p>
<hr>
<p class="mb-0">Always know that your dashbar is very customizable and you can have as many streamers as you like at your convenience.</p>
</div>
</div>
-->
<!-- Streamer Dashbar -->
<div class="album text-muted" hidden>
<div class="container">
<!-- Favorite streamers go here -->
<div class="row streamer_info text-center" id="cards"></div>
</div>
</div>
</div>
</main>
<!-- Displays search results in modal window -->
<div class="modal fade" id="clean" tabindex="-1" role="dialog" aria-labelledby="clean" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Search Results...</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Div to append clones to -->
<div class="list-group">
<!-- Cloned per results of search -->
<a href="#" id="main_streamer-0" class="list-group-item list-group-item-action flex-column align-items-start">
<h5 class="text-center"></h5>
<hr>
<div class="d-flex w-100 justify-content-center">
</div>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Twitch.tv Modal -->
<div class="modal fade" id="twitchModal" tabindex="-1" role="dialog" aria-labelledby="twitchModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center" id="twitchModalTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="viewTwitch">
<!-- Add a placeholder for the Twitch embed -->
<div id="twitch-embed"></div>
<!-- Load the Twitch embed script -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>Data provided by -- © <a href="https://www.twitch.tv/">Twitch.tv</a></p>
<p>Alex Busch</p>
</div>
</footer>
<!-- JS at bottom so loads quicker -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="node_modules/jquery-confirm/js/jquery-confirm.js"></script>
<script type="text/javascript" src="bower_components/holderjs/holder.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>