163 lines
8.0 KiB
HTML
163 lines
8.0 KiB
HTML
<!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.0">
|
|
<title>Twitter sports dashboard</title>
|
|
<link rel="stylesheet" href="./style/style.css">
|
|
<link rel="stylesheet" href="./style/responsive.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,400&display=swap" rel="stylesheet">
|
|
<!-- <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet"> -->
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
|
<link rel="icon" type="image/x-icon" href="./media/logo.png">
|
|
</head>
|
|
<body>
|
|
<!-- <div id="tweet" style="height: 200px;"></div> -->
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="logo">
|
|
<img src="./media/logo.png" alt="">
|
|
<span class="header-title">Cluccer</span>
|
|
</div>
|
|
<div class="sports">
|
|
<div class="sport baseball">
|
|
<span class="material-symbols-outlined">sports_baseball</span>
|
|
<span class="sport-name">Baseball</span>
|
|
</div>
|
|
<div class="sport basketball">
|
|
<span class="material-symbols-outlined">sports_basketball</span>
|
|
<span class="sport-name">Basketball</span>
|
|
</div>
|
|
<div class="sport volleyball">
|
|
<span class="material-symbols-outlined">sports_volleyball</span>
|
|
<span class="sport-name">Volleyball</span>
|
|
</div>
|
|
<div class="sport tennis">
|
|
<span class="material-symbols-outlined">sports_tennis</span>
|
|
<span class="sport-name">Tennis</span>
|
|
</div>
|
|
<div class="sport cricket">
|
|
<span class="material-symbols-outlined">sports_cricket</span>
|
|
<span class="sport-name">Cricket</span>
|
|
</div>
|
|
<div class="sport soccer">
|
|
<span class="material-symbols-outlined">sports_soccer</span>
|
|
<span class="sport-name">Soccer</span>
|
|
</div>
|
|
<div class="sport football">
|
|
<span class="material-symbols-outlined">sports_football</span>
|
|
<span class="sport-name">Football</span>
|
|
</div>
|
|
<div class="sport rugby">
|
|
<span class="material-symbols-outlined">sports_rugby</span>
|
|
<span class="sport-name">Rugby</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="maintable">
|
|
<div class="leftcol column">
|
|
<span class="colheader">Latest Cluccs</span>
|
|
<div class="tweetcontainer latest" id="latest">
|
|
<div class="tweet">
|
|
<img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture">
|
|
<div class="tweet-content">
|
|
<div class="tweet-name">
|
|
<span class="tweet-nickname">Tim Wijma</span>
|
|
<span class="tweet-username">@timwijma</span>
|
|
</div>
|
|
<span class="tweet-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus velit maiores non deserunt adipisci dicta quam nobis ad. Iste, unde?</span>
|
|
<div class="tweet-interactions">
|
|
<div class="tweet-interaction tweet-likes">
|
|
<span class="material-symbols-outlined">favorite</span>
|
|
<span>20</span>
|
|
</div>
|
|
<div class="tweet-interaction tweet-retweets">
|
|
<span class="material-symbols-outlined">repeat</span>
|
|
<span>20</span>
|
|
</div>
|
|
<div class="tweet-interaction tweet-replies">
|
|
<span class="material-symbols-outlined">chat_bubble</span>
|
|
<span>20</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="centercol column">
|
|
<span class="colheader">Filtered Cluccs</span>
|
|
<div class="filtered" id="filtered">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="rightcol column">
|
|
<div class="searchcontainer column">
|
|
<input class="searchbar" onchange="updateSearched(this.value)" type="text" placeholder="Search Cluccs">
|
|
<input class="blockedwords" onchange="updateBlocked(this.value)" type="text" placeholder="Blocked words (separated by comma)">
|
|
<div class="sort-by">
|
|
<span class="sort-by-title">Sort By</span>
|
|
<div class="sort-dropdown">
|
|
<ul class="sort-dropdown-list">
|
|
<li class="current-sort">Time</li>
|
|
<li onclick="updateSort('time')">Time</li>
|
|
<li onclick="updateSort('likes')">Likes</li>
|
|
<li onclick="updateSort('retweets')">Retweets</li>
|
|
<li onclick="updateSort('replies')">Replies</li>
|
|
</ul>
|
|
<span class="material-symbols-outlined sort-btn">arrow_drop_down</span>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined order-btn">arrow_downward</span>
|
|
</div>
|
|
<div class="popchart column">
|
|
|
|
<span class="colheader chartheader">Sports Popularity Pie Chart</span>
|
|
<div id="pie" style="height:300px; background-color: white;"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/lib/jquery-2.1.1.min.js"></script>
|
|
<script src="/lib/jquery.flot.min.js"></script>
|
|
<script src="/lib/jquery.flot.categories.min.js"></script>
|
|
<script src="/lib/core.js"></script>
|
|
<script src="/lib/charts.js"></script>
|
|
<script src="/lib/log.js"></script>
|
|
<script src="./lib/tweets.js"></script>
|
|
<script src="./js/code.js"></script>
|
|
<script src="./js/events.js"></script>
|
|
<script src="./lib/jquery.flot.pie.js"></script>
|
|
<script>
|
|
block("#latest").tweets({
|
|
memory: 20
|
|
});
|
|
block('#pie').piechart();
|
|
events.connect('pie', '#pie');
|
|
events.connect("tweet", "#latest");
|
|
|
|
// // create a rolling chart block
|
|
// block('#graph').rolling_chart({
|
|
// memory: 150,
|
|
// chart: {
|
|
// yaxis: {
|
|
// min: -100,
|
|
// max: 100
|
|
// },
|
|
// xaxis: {
|
|
// show: false
|
|
// }
|
|
// }
|
|
// });
|
|
|
|
// // connect sample event to graph
|
|
// events.connect('tweet', '#graph');
|
|
</script>
|
|
</body>
|
|
</html> |