<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - ChartJS | Ping Animation Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,500,600,700&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!--
// https://builtbymax.de
// Maximilian Kobus | KØBY
-->
<a href="https://builtbymax.de" target="_blank" title="Link to builtbymax website" class="trademark">
<svg width="58px" height="58px" viewBox="0 0 58 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="koby-logo" fill="#E48873" fill-rule="nonzero"><path d="M57.7,41.5 L47.6,3.8 C46.9,1.1 44.1,-0.5 41.5,0.3 L3.8,10.4 C1.1,11.1 -0.5,13.9 0.3,16.5 L10.4,54.2 C11.1,56.9 13.9,58.5 16.5,57.7 L54.2,47.6 C56.8,46.9 58.4,44.2 57.7,41.5 Z M41.4,37.2 C40,38.6 38.2,39.6 36.4,40.2 C34.5,40.8 32.5,39.8 31.9,37.9 C31.9,37.8 31.9,37.8 31.9,37.7 C31.4,35.7 32.1,33.8 34.1,33.1 L34.8,32.8 C35.4,32.6 35.8,32.3 36.3,31.8 C38.1,30 38.1,27.2 36.3,25.5 C34.5,23.8 31.7,23.7 30,25.5 L25.3,30.1 L29.2,34 C30.7,35.5 30.7,37.8 29.2,39.3 C27.7,40.8 25.4,40.8 23.9,39.3 L22,37.4 C21.7,39.1 20.2,40.4 18.3,40.4 C16.2,40.4 14.6,38.7 14.6,36.7 L14.6,20.5 C14.6,18.4 16.3,16.8 18.3,16.8 C20.3,16.8 22,18.5 22,20.5 L22,22.9 L24.7,20.3 C29.4,15.6 36.9,15.6 41.6,20.3 C46.3,25 46.1,32.5 41.4,37.2 L41.4,37.2 Z" id="Shape"></path></g></svg>
</a>
<section class="section-container">
<div class="ping-container">
<div class="head-block">
<span class="title">Ping</span>
<span data-num class="num">18</span>
<span class="unit">ms</span>
</div>
<div id="chart">
<canvas id="pingChart" height="50"></canvas>
</div>
<div class="bottom-row">
<div class="toggle">Informationen</div>
<div class="detail">
<p>Just a little fake Ping with random numbers :P</p>
</div>
</div>
</div>
</section>
<div class="infobox-container">
<a href="#" aria-label="Toggle infobox" class="infobox-toggle"><svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m35.488 31.107-10.377-3.892c-.348-.169-.767-.024-.935.324-.094.194-.094.42.001.614l3.931 10.335c.071.29.326.498.625.509h.034c.137-.008.468-.082.591-.586l1.142-4.688c.022-.09.092-.161.182-.184l4.733-1.182c.5-.126.575-.458.583-.594.007-.312-.206-.586-.51-.656zm-15.361-2.564c-.385-.397-1.018-.406-1.415-.021s-.406 1.018-.021 1.415l1.949 2.006c.381.4 1.014.415 1.414.034s.415-1.014.034-1.414c-.004-.004-.008-.009-.013-.013zm.384-11.443c.542.114 1.073-.233 1.187-.775s-.233-1.072-.775-1.186c-1.079-.224-2.197-.179-3.255.132-.532.148-.843.7-.695 1.232s.7.843 1.232.695c.01-.003.019-.006.029-.009.74-.216 1.522-.247 2.277-.089zm-5.491 3.954c.052-.55.208-1.085.458-1.577.095-.188.202-.37.322-.543.28-.476.121-1.089-.355-1.369-.427-.252-.975-.152-1.286.235-.632.909-1.021 1.964-1.129 3.066-.033.551.386 1.025.938 1.059.525.031.985-.349 1.052-.871zm1.308 3.578c-.213-.209-.403-.438-.569-.686-.329-.444-.955-.536-1.399-.207-.414.307-.527.879-.26 1.32.237.354.509.683.811.982l1.185 1.221c.385.396 1.018.405 1.414.021.396-.385.405-1.018.021-1.415zm8.672-4.632c.249 0 .49-.092.674-.26l1.108-1.011c.408-.372.437-1.005.065-1.413s-1.005-.437-1.413-.065l-.266.243c-.095.087-.242.087-.337 0l-.266-.243c-.402-.379-1.035-.36-1.414.042s-.36 1.035.042 1.414c.008.008.016.015.025.022l1.108 1.011c.184.168.425.26.674.26zm4.483-2.9c.755-.158 1.538-.127 2.279.089.53.155 1.086-.149 1.242-.679.155-.53-.149-1.086-.68-1.242-1.058-.309-2.176-.353-3.255-.127-.541.114-.887.646-.773 1.186s.646.887 1.187.773zm7.487 3.755c-.077-.795-.302-1.569-.662-2.282-.138-.272-.295-.535-.47-.786-.343-.433-.972-.506-1.405-.163-.396.313-.496.873-.233 1.304.122.175.231.358.327.548.25.491.405 1.024.457 1.572.053.55.542.952 1.092.899s.952-.542.899-1.092zm-1.333 2.81c-.459-.308-1.08-.185-1.388.273v.001c-.173.256-.371.493-.591.709l-1.18 1.215c-.385.397-.375 1.03.021 1.415.397.385 1.03.375 1.415-.022l1.164-1.2c.31-.304.588-.64.831-1 .309-.458.189-1.079-.268-1.389-.002 0-.003-.001-.004-.002z" fill="#fff" transform="translate(-13 -15)"/></svg></a>
<div class="infobox-detail-container">
<h4>Materials</h4>
<ul>
<li><a href="https://www.chartjs.org/" target="_blank" aria-label="Link to: ChartJS">Chart JS</a></li>
</ul>
</div>
<div class="social-media-links">
<a href="https://www.koby.dev" target="_blank" aria-label="visit website: www.koby.dev"><svg height="18" viewBox="0 0 20 18" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m5.4425 11.0714286c0 .345.28.625.625.625h.59c.115 0 .20833333.0933333.20833333.2083333 0 .02-.0025.0391667-.00833333.0583333l-.16666667.5758334c-.09583333.3316666.09583334.6783333.4275.7741666.05666667.0158334.115.0241695.17333334.0241695.27833333 0 .52333333-.1841695.60083333-.4516695l.3-1.0383333c.02583333-.0891667.1075-.1508333.2-.1508333h1.16666667c.11583333 0 .20916666.0941666.20916666.2091666 0 .0191667-.0025.0383334-.00833333.0575l-.16666667.5758334c-.09583333.3316666.095.6783333.42666667.7741666.0566667.0158334.115.0241695.1733333.0241695.2783334.0008305.5241667-.1841695.6008334-.4516695l.3008333-1.0383333c.025-.0891667.1066667-.1508333.2-.1508333h1.4133333c.345 0 .625-.28.625-.625s-.28-.625-.625-.625h-.93c-.0658333 0-.1275-.0308334-.1666666-.0833334-.0391667-.0525-.0516667-.12-.0333334-.1825l.3616667-1.24999996c.0258333-.08916667.1075-.15083334.2-.15083334h1.4016667c.345 0 .625-.28.625-.625s-.28-.625-.625-.625h-.9166667c-.1158333 0-.2091667-.09416666-.2083333-.21 0-.01916666.0025-.0375.0075-.05583333l.0541666-.18583333c.0958334-.33166667-.0958333-.67833334-.4275-.77416667-.3316666-.09583333-.6783333.09583333-.7741666.4275l-.1875.64833333c-.0258334.08916667-.1075.15-.2.15h-1.1666667c-.06583333 0-.1275-.03083333-.16666667-.08333333-.03916666-.0525-.05166666-.12-.03333333-.1825l.05333333-.18583333c.10083334-.33-.08583333-.67916667-.41583333-.78-.33-.10083334-.67916667.08583333-.78.41583333-.00166667.00583333-.00333333.01166667-.005.0175l-.1875.64833333c-.02583333.08916667-.1075.15-.2.15h-1.08333333c-.345 0-.625.28-.625.625s.28.625.625.625h.59583333c.06583333 0 .1275.03083334.16666667.08333334.03916666.0525.05166666.12.03416666.18333333l-.36166666 1.25000003c-.02583334.0891666-.1075.15-.2.15h-1.07166667c-.345 0-.625.28-.625.625zm3.59333333-2.14083336c.02583334-.08916667.1075-.15083334.20083334-.15083334h1.16666663c.115 0 .2083334.09333334.2083334.20833334 0 .02-.0025.03916666-.0083334.05833333l-.3616666 1.25000003c-.0258334.0891666-.1075.15-.2.15h-1.1666667c-.115 0-.20833333-.0933334-.20833333-.2083334 0-.0191666.0025-.0383333.00833333-.0575zm10.96416667-6.40083334c0-1.38083333-1.1191667-2.5-2.5-2.5h-15c-1.38083333 0-2.5 1.11916667-2.5 2.5v12.0833333c0 1.3808334 1.11916667 2.5 2.5 2.5h15c1.3808333 0 2.5-1.1191666 2.5-2.5zm-11.955-.83333333c.215-.38916667.70416667-.53083333 1.09333333-.31666667.13333334.07333334.24333334.18333334.31666667.31666667.08.12416667.12416667.26833333.12833333.41666667-.00416666.14833333-.04833333.2925-.12833333.41666666-.215.38916667-.70416667.53083334-1.09333333.31666667-.13333334-.07333333-.24333334-.18333333-.31666667-.31666667-.08-.12416666-.12416667-.26833333-.12833333-.41666666.00416666-.14833334.04833333-.2925.12833333-.41666667zm-2.91666667 0c.215-.38916667.70416667-.53083333 1.09333334-.31666667.13333333.07333334.24333333.18333334.31666666.31666667.08.12416667.12416667.26833333.12833334.41666667-.00416667.14833333-.04833334.2925-.12833334.41666666-.215.38916667-.70416666.53083334-1.09333333.31666667-.13333333-.07333333-.24333333-.18333333-.31666667-.31666667-.08-.12416666-.12416666-.26833333-.12833333-.41666666.00416667-.14833334.04833333-.2925.12833333-.41666667zm-2.96833333.07666667c.13333333-.29833334.42916667-.49166667.75666667-.49333334.2925.00333334.56083333.1625.705.41666667.08.12416667.12416666.26833333.12833333.41666667-.00416667.14833333-.04833333.2925-.12833333.41666666-.215.38916667-.70416667.53083334-1.09333334.31666667-.13333333-.07333333-.24333333-.18333333-.31666666-.31666667-.08-.12416666-.12416667-.26833333-.12833334-.41666666.00083334-.1175.02666667-.23333334.07666667-.34zm16.1733333 12.83999996c0 .46-.3733333.8333334-.8333333.8333334h-15c-.46 0-.83333333-.3733334-.83333333-.8333334v-10.2083333c0-.115.09333333-.20833333.20833333-.20833333h16.25c.115 0 .2083333.09333333.2083333.20833333z" fill="#fff"/></svg></a>
<a href="https://twitter.com/builtbymax" target="_blank" aria-label="visit twitter: @builtbymax"><svg height="16" viewBox="0 0 20 16" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m19.4333333 3.36666667c.1766667-.1475.2008334-.41.0541667-.58666667-.0566667-.06833333-.1341667-.11666667-.2208333-.13833333l-.6583334-.16666667c-.2233333-.05583333-.3591666-.2825-.3033333-.505.0066667-.0275.0166667-.05333333.0283333-.07833333l.3666667-.74166667c.1-.2075.0125-.45666667-.1941667-.55666667-.09-.04333333-.1925-.0525-.2891666-.02666666l-1.6666667.46666666c-.1258333.03666667-.2616667.01166667-.3666667-.06666666-.7208333-.54083334-1.5983333-.83333334-2.5-.83333334-2.3008333 0-4.16666663 1.86583334-4.16666663 4.16666667v.3c.00083333.10583333-.07833334.19583333-.18333334.20833333-2.34166666.275-4.58333333-.91666666-7-3.7-.10666666-.11833333-.27083333-.16666666-.425-.125-.13833333.06333334-.23083333.1975-.24166666.35-.33416667 1.37083334-.19916667 2.81416667.38333333 4.1.05166667.1025.01083333.22833334-.09166667.28-.03916666.01916667-.0825.02666667-.125.02l-.93333333-.18333333c-.2275-.03666667-.44083333.11833333-.4775.345-.0075.04916667-.00666667.09833333.0025.14666667.14583333 1.29583333.8725 2.45416666 1.975 3.15.10333333.05.14666667.175.09666667.27833333-.02083334.0425-.05416667.07666667-.09666667.09666667l-.44166667.175c-.21333333.08583333-.3175.32833333-.23166666.54166663.00416666.0116667.00916666.0225.015.0333334.49583333 1.085 1.4925 1.8575 2.66666666 2.0666666.10833334.0391667.16416667.1591667.125.2666667-.02083333.0583333-.06666666.1033333-.125.125-1.13333333.4683333-2.34916666.7041667-3.575.6916667-.23-.0458334-.45416666.1033333-.5.3333333-.04583333.23.10333334.4541667.33333334.5 2.12333333 1.0066667 4.43416666 1.555 6.78333333 1.6083333 2.06583333.0316667 4.0958333-.5483333 5.8333333-1.6666666 2.9033334-1.9383334 4.6425-5.20083337 4.6333334-8.6916667v-.725c.0008333-.1225.0558333-.23833333.15-.31666667z" fill="#fff"/></svg></a>
<a href="https://www.instagram.com/koby.dev/" target="_blank" aria-label="visit instagram: @koby.dev"><svg height="19" viewBox="0 0 19 19" width="19" xmlns="http://www.w3.org/2000/svg"><path d="m13.8541667 0h-8.70833337c-2.8405.00475-5.14108333 2.30533333-5.14583333 5.14583333v8.70833337c.00475 2.8405 2.30533333 5.1410833 5.14583333 5.1458333h8.70833337c2.8405-.00475 5.1410833-2.3053333 5.1458333-5.1458333v-8.70833337c-.00475-2.8405-2.3053333-5.14108333-5.1458333-5.14583333zm-4.3541667 13.8541667c-2.40508333 0-4.35416667-1.9490834-4.35416667-4.3541667 0-2.40508333 1.94908334-4.35416667 4.35416667-4.35416667 2.4050833 0 4.3541667 1.94908334 4.3541667 4.35416667 0 2.4050833-1.9490834 4.3541667-4.3541667 4.3541667zm5.1458333-8.70833337c-.6555 0-1.1875-.532-1.1875-1.1875s.532-1.1875 1.1875-1.1875 1.1875.532 1.1875 1.1875-.532 1.1875-1.1875 1.1875z" fill="#fff"/></svg></a>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js'></script><script src="./script.js"></script>
</body>
</html>
section.section-container {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #EADBC9;
}
.trademark {
position: absolute;
z-index: 99;
left: 50px;
top: 50px;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.trademark:hover {
-webkit-transform: translate(0, -3px);
-moz-transform: translate(0, -3px);
-o-transform: translate(0, -3px);
-ms-transform: translate(0, -3px);
transform: translate(0, -3px);
}
.ping-container {
position: relative;
width: 200px;
height: 300px;
background-color: #E30074;
border-radius: 6px;
padding: 30px;
-webkit-box-shadow: 0 15px 15px -13px rgba(227, 0, 116, 0.6);
-moz-box-shadow: 0 15px 15px -13px rgba(227, 0, 116, 0.6);
box-shadow: 0 15px 15px -13px rgba(227, 0, 116, 0.6);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.ping-container .head-block {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
align-items: flex-end;
justify-content: flex-start;
}
.ping-container .head-block > span {
user-select: none;
font-weight: 700;
color: #FFF;
letter-spacing: -0.2px;
}
.ping-container .head-block .title {
width: 100%;
font-size: 16px;
line-height: 18px;
margin-bottom: 20px;
}
.ping-container .head-block .num {
font-size: 65px;
line-height: 50px;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.ping-container .head-block .num.set {
-moz-animation-name: ping;
-webkit-animation-name: ping;
animation-name: ping;
-moz-animation-duration: 0.3s;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-moz-animation-direction: normal;
-webkit-animation-direction: normal;
animation-direction: normal;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-moz-animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
}
@-webkit-keyframes "ping" {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes "ping" {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-o-keyframes "ping" {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes "ping" {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.ping-container .head-block .unit {
margin-left: 8px;
font-size: 20px;
line-height: 22px;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.ping-container #chart {
width: 100%;
margin-top: 40px;
border-bottom: 2px solid #E8338F;
padding-bottom: 5px;
}
.ping-container #chart > canvas {
width: 100%;
height: 50px;
}
.ping-container .bottom-row {
width: 100%;
margin-top: auto;
}
.ping-container .bottom-row .toggle {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
color: #FFF;
font-size: 12px;
line-height: 14px;
font-weight: 600;
cursor: pointer;
user-select: none;
}
.ping-container .bottom-row .toggle::before {
content: 'i';
display: block;
font-size: 12px;
line-height: 12px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-right: 10px;
color: #E30074;
background-color: #FFF;
border-radius: 30px;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.ping-container .bottom-row .toggle:hover::before {
-webkit-transform: translate(3px, 0);
-moz-transform: translate(3px, 0);
-o-transform: translate(3px, 0);
-ms-transform: translate(3px, 0);
transform: translate(3px, 0);
}
.ping-container .bottom-row .detail {
position: absolute;
left: calc(100% - 20px);
bottom: 30px;
width: 140px;
background-color: #FFF;
border-radius: 4px;
padding: 14px;
-webkit-box-shadow: 0 10px 10px -7px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 10px 10px -7px rgba(0, 0, 0, 0.2);
box-shadow: 0 10px 10px -7px rgba(0, 0, 0, 0.2);
opacity: 0;
z-index: -1;
pointer-events: none;
-webkit-transform: translate(30px, 0);
-moz-transform: translate(30px, 0);
-o-transform: translate(30px, 0);
-ms-transform: translate(30px, 0);
transform: translate(30px, 0);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.ping-container .bottom-row .detail.active {
opacity: 1;
z-index: 2;
pointer-events: auto;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.ping-container .bottom-row .detail p {
user-select: none;
font-size: 14px;
line-height: 16px;
color: rgba(0, 0, 0, 0.75);
font-weight: 400;
}
.infobox-container {
display: none;
}
@media screen and (min-width: 1024px) {
.infobox-container {
display: block;
position: absolute;
right: 50px;
bottom: 50px;
z-index: 99;
}
.infobox-container .infobox-toggle {
width: 50px;
height: 50px;
border-radius: 100px;
background: #E48873;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.infobox-container .social-media-links {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
position: absolute;
right: 80px;
bottom: 15px;
}
.infobox-container .social-media-links a {
margin: 0 15px;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.infobox-container .social-media-links a:hover {
-webkit-transform: translate(0, -2px);
-moz-transform: translate(0, -2px);
-o-transform: translate(0, -2px);
-ms-transform: translate(0, -2px);
transform: translate(0, -2px);
}
.infobox-container .social-media-links a:hover svg path {
fill: #E48873;
}
.infobox-container .infobox-detail-container {
display: none;
flex-direction: column;
position: absolute;
bottom: 80px;
min-width: 240px;
right: 0;
background: #FFF;
border-radius: 12px;
padding: 20px;
}
.infobox-container .infobox-detail-container.active {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.infobox-container .infobox-detail-container h4 {
font-family: 'Source Sans Pro', sans-serif;
margin-bottom: 15px;
font-size: 22px;
line-height: 24px;
font-weight: 600;
color: #000;
}
.infobox-container .infobox-detail-container p {
margin-bottom: 15px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: #000;
}
.infobox-container .infobox-detail-container ul {
list-style: none;
padding: 0;
}
.infobox-container .infobox-detail-container ul li {
display: block;
list-style: none;
padding: 0;
margin-bottom: 6px;
}
.infobox-container .infobox-detail-container ul li:last-child {
margin: 0;
}
.infobox-container .infobox-detail-container ul li a {
display: block;
width: 100%;
padding: 5px 8px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 20px;
background-color: #F4F4F4;
border-radius: 4px;
color: #000;
text-decoration: none;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.infobox-container .infobox-detail-container ul li a:hover {
background-color: #E48873;
color: #FFF;
}
}
* {
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
background-color: #EADBC9;
font-family: 'Source Sans Pro', sans-serif;
}
body {
position: relative;
width: 100%;
height: 100%;
}
.main-content {
max-width: 1024px;
margin: 0 auto;
width: 100%;
padding: 0 15px;
}
// https://builtbymax.de
// Maximilian Kobus | KØBY
(function () {
document.addEventListener('DOMContentLoaded', function () {
'use strict';
Ping.init();
conf.InfoBox();
});
})();
const Ping = {
init: () => {
Ping.showBottomDetailContainer();
Ping.showChart();
},
showChart: () => {
let ctx = document.getElementById('pingChart').getContext('2d');
const pingChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Ping'],
datasets: [{
label: 'Ping Numbers',
data: [Math.round(Math.random() * 150)],
borderColor: '#FFF',
backgroundColor: 'transparent',
borderWidth: 2 }] },
options: {
elements: {
point: {
radius: 0 } },
legend: {
display: false },
tooltips: {
callbacks: {
label: function (tooltipItem) {
return tooltipItem.yLabel;
} } },
scales: {
xAxes: [{
display: false }],
yAxes: [{
display: false,
ticks: {
beginAtZero: true } }] } } });
Ping.chartUpdate(pingChart);
},
chartUpdate: chart => {
let num = conf.qS('[data-num]');
setInterval(() => {
let rNum = Math.round(Math.random() * 150),
label = 'Ping';
num.innerText = rNum;
num.classList.add('set');
setTimeout(() => {
num.classList.remove('set');
}, 450);
chart.data.labels.push(label);
chart.data.datasets.forEach(dataset => {
dataset.data.push(rNum);
});
chart.update();
}, 1000);
},
showBottomDetailContainer: () => {
let toggle = conf.qS('.ping-container .bottom-row .toggle');
toggle.onclick = () => {
toggle.nextElementSibling.classList.toggle('active');
};
} };
// Config Functions
// - - - - - - - - - - - - - - - - - - - - - - - - - -
const conf = {
qS: selector => {
return document.querySelector(selector);
},
qSA: selector => {
return document.querySelectorAll(selector);
},
CqS: (container, selector) => {
return container.querySelector(selector);
},
InfoBox: () => {
let toggle = conf.qS('.infobox-container .infobox-toggle'),
detail = conf.qS('.infobox-container .infobox-detail-container');
if (toggle) {
toggle.onclick = e => {
e.preventDefault();
detail.classList.toggle('active');
};
}
} };