whoiwatch/templates/index.html
2019-03-18 23:37:55 +11:00

42 lines
2.3 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://benjamyn.love/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/custom.css">
</head>
<body style="background:#4D4759">
<div class="navbar h-100 d-flex justify-content-center pcol" style="margin-bottom: 10px; ">
<div>
<h3 style="color:white">WhoIWatch</h3>
</div>
</div>
<div class="container">
<div class="wrapper">
{% for x in livestreamdata %}
<div class="card" style="background:#3F3A49" >
<a href ="{{ x["channel"]["url"] }} " ><img class="card-img-top" src="https://static-cdn.jtvnw.net/previews-ttv/live_user_{{ x["channel"]["name"] }}-300x200.jpg" alt="Card image cap"></a>
<div class="card-body">
<h5 class="card-title"><a href="{{ x["channel"]["url"] }}" > {{ x["channel"]["display_name"] }} <img src="{{ x["channel"]["logo"]}}" height="16" width="16" style="vertical-align: unset" ></a></h5>
<p class="card-text" style="color:grey" >{{ x["channel"]["game"] }}</p>
<p class="card-text tbottom"><small class="text-muted">{{ x["viewers"] }} Viewers</small></p>
</div>
</div>
{% endfor %}
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->\
<script src="static/js/custom.js"></script>
<script src="https://benjamyn.love/js/jquery-3.3.1.slim.min.js"></script>
<script src="https://benjamyn.love/js/popper.min.js"></script>
<script src="https://benjamyn.love/js/bootstrap.min.js"></script>
</body>
</html>