66 lines
2.0 KiB
HTML
66 lines
2.0 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Getting Started</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
.line{
|
|
fill: none;
|
|
stroke: steelblue;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.area{
|
|
fill: lightsteelblue;
|
|
-webkit-transition: opacity 2s;
|
|
-moz-transition: opacity 2s;
|
|
-ms-transition: opacity 2s;
|
|
-o-transition: opacity 2s;
|
|
transition: opacity 2s;
|
|
opacity: 1;
|
|
}
|
|
|
|
.hidden{
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="impress-not-supported">
|
|
|
|
<div class="fallback-message">
|
|
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
|
|
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
|
|
</div>
|
|
|
|
<div id="impress" data-transition-duration="2000">
|
|
<div id="intro" class="step" data-scale="2" data-x="-500" data-y="-500">
|
|
<h1>Crypto</h1>
|
|
<h1>Currencies</h1>
|
|
</div>
|
|
<div class="step" id="growth" data-scale="5" data-x="-500" data-y="0">
|
|
<h2>Volume of trades over the years</h2>
|
|
<svg id="intro"></svg>
|
|
</div>
|
|
<div id="test" class="step" data-x="6000" data-y="0" data-z="1500" data-scale="5" data-rotate-y="-45">
|
|
<h2>Market composition of the 10 biggest coins</h2>
|
|
<svg id="composition"></svg>
|
|
</div>
|
|
<div id="overview" class="step" data-x="3000" data-y="2000" data-scale="9" style="pointer-events: none;"></div>
|
|
</div>
|
|
|
|
<div id="impress-toolbar"></div>
|
|
|
|
<div class="impress-progressbar"><div></div></div>
|
|
<div class="impress-progress"></div>
|
|
|
|
<div id="impress-help"></div>
|
|
|
|
|
|
<script src="d3.js"></script>
|
|
<script src="impress.js"></script>
|
|
<script src="index.js"></script>
|
|
<script>
|
|
impress().init();
|
|
</script>
|
|
</body>
|
|
</html> |