110 lines
5.0 KiB
HTML
110 lines
5.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="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>
|
|
</head>
|
|
<body>
|
|
<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="leftcol">
|
|
<div class="tweet"> <!-- You can use this template in the javascript file, css will come later -->
|
|
<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 class="centercol"></div>
|
|
<div class="rightcol"></div>
|
|
</div>
|
|
</div>
|
|
<script src="./js/code.js"></script>
|
|
<script src="./js/connection.js"></script>
|
|
</body>
|
|
<!-- <script>
|
|
// 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('sample', '#graph');
|
|
</script> -->
|
|
</html> |