21 lines
1.8 KiB
HTML
21 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>BabyStats</title>
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
<script src="https://use.typekit.net/ifo2asf.js"></script>
|
|
<script>try{Typekit.load();}catch(e){}</script>
|
|
<script src="/cosmopolite/static/cosmopolite.js" charset="UTF-8"></script>
|
|
<script src="/cosmopolite/static/hogfather.js" charset="UTF-8"></script>
|
|
<script src="/static/babystats.js" charset="UTF-8"></script>
|
|
<link rel="stylesheet" href="/static/babystats.css">
|
|
<link rel="icon" href="/static/icon.png">
|
|
</head>
|
|
<body>
|
|
<div id="container" style="background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E %3Cstyle type='text/css' %3E %3C![CDATA[ @keyframes coloredBounce { 0% { fill: %23430a39; transform: translate(0, -20px); } 20% { fill: %23bc1550; transform: translate(19px, -6px); } 40% { fill: %23e87f02; transform: translate(12px, 16px); } 60% { fill: %23f5c700; transform: translate(-12px, 16px); } 80% { fill: %2388990f; transform: translate(-19px, -6px); } 100% { fill: %23430a39; transform: translate(0, -20px); } } circle { animation: coloredBounce 5s linear infinite; } ]]%3E %3C/style%3E %3Ccircle r='5' cx='50' cy='50'%3E%3C/circle%3E %3Ccircle r='5' cx='50' cy='50' style='animation-delay: -1s'%3E%3C/circle%3E %3Ccircle r='5' cx='50' cy='50' style='animation-delay: -2s'%3E%3C/circle%3E %3Ccircle r='5' cx='50' cy='50' style='animation-delay: -3s'%3E%3C/circle%3E %3Ccircle r='5' cx='50' cy='50' style='animation-delay: -4s'%3E%3C/circle%3E %3C/svg%3E");"></div>
|
|
<script>
|
|
new BabyStats(document.getElementById('container'));
|
|
</script>
|
|
</body>
|
|
</html>
|