mirror of
https://github.com/seigler/cryptohistory.org
synced 2025-07-27 09:46:10 +00:00
prettied up the demo page
This commit is contained in:
parent
27cd5fa4e8
commit
7f00d09e1e
1 changed files with 35 additions and 10 deletions
|
@ -6,25 +6,41 @@
|
||||||
<title>Embeddable Cryptocurrency Charts : Cryptohistory</title>
|
<title>Embeddable Cryptocurrency Charts : Cryptohistory</title>
|
||||||
<style>
|
<style>
|
||||||
*, *:after, *:before { box-sizing: inherit; }
|
*, *:after, *:before { box-sizing: inherit; }
|
||||||
|
html {
|
||||||
|
background-image: linear-gradient(105deg, #403, #107);
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
background-color: #ffe;
|
|
||||||
line-height: 1.25rem;
|
line-height: 1.25rem;
|
||||||
margin: 0;
|
margin: 0 auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
color: white;
|
||||||
|
max-width: 60em;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: rgba(0,0,0,0.25);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
body:before {
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
header {
|
header {
|
||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
}
|
}
|
||||||
main {
|
main {
|
||||||
margin: 0 auto 0 0;
|
padding: 0 2rem 8rem;
|
||||||
padding: 0 2rem 4rem;
|
|
||||||
max-width: 70em;
|
|
||||||
}
|
}
|
||||||
section {
|
section {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
}
|
}
|
||||||
|
section + section {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
figure {
|
figure {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
@ -36,7 +52,10 @@
|
||||||
border: 1px dashed rgba(0,0,0,0.2);
|
border: 1px dashed rgba(0,0,0,0.2);
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
line-height: 1.25rem;
|
line-height: 1.25rem;
|
||||||
background-color: white;
|
background-color: black;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -52,10 +71,10 @@
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section>
|
||||||
<h2>Poloniex Dash/BTC Price</h2>
|
<h2>SVG and PNG charts with your favorite cryptocurrencies</h2>
|
||||||
<figure>
|
<figure>
|
||||||
<img src="/charts/dark/dash-btc/7d/svg" alt="Poloniex Dash/BTC price">
|
<img src="/charts/light/dash-btc/7d/svg" alt="Poloniex Dash/BTC price">
|
||||||
<figcaption>7 Day Dash price in BTC <code>http://cryptohistory.org/charts/dark/dash-btc/7d/svg</code></figcaption>
|
<figcaption>7 Day Dash price in BTC <code>http://cryptohistory.org/charts/light/dash-btc/7d/svg</code></figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
|
@ -64,9 +83,15 @@
|
||||||
<code>http://cryptohistory.org/charts/{theme}/{currency}-btc/{timespan}/{format}</code>.</p>
|
<code>http://cryptohistory.org/charts/{theme}/{currency}-btc/{timespan}/{format}</code>.</p>
|
||||||
<p>Theme: <code>dark</code> or <code>light</code>. (More planned)</p>
|
<p>Theme: <code>dark</code> or <code>light</code>. (More planned)</p>
|
||||||
<p>Currency: anything active on Poloniex. Prices are all in bitcoin.</p>
|
<p>Currency: anything active on Poloniex. Prices are all in bitcoin.</p>
|
||||||
<p>Timespan: <code>30d</code>, <code>7d</code>, or <code>24h</code>. (More planned)</p>
|
<p>Timespan: <code>7d</code> or <code>24h</code>. (More planned)</p>
|
||||||
<p>Format: <code>svg</code> (best) or <code>png</code>.</p>
|
<p>Format: <code>svg</code> (best) or <code>png</code>.</p>
|
||||||
</section>
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Examples:</h2>
|
||||||
|
<p>Ethereum 24h, dark SVG: <code><a href="/charts/dark/eth-btc/24h/svg" target="_blank">http://cryptohistory.org/charts/dark/eth-btc/24h/svg</a></code></p>
|
||||||
|
<p>Litecoin 7d, light colored PNG: <code><a href="/charts/dark/ltc-btc/7d/png" target="_blank">http://cryptohistory.org/charts/dark/ltc-btc/7d/png</a></code></p>
|
||||||
|
<p>Factom 7d, dark SVG: <code><a href="/charts/dark/fct-btc/24h/svg" target="_blank">http://cryptohistory.org/charts/dark/fct-btc/24h/svg</a></code></p>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
Made by <a href="https://joshua.seigler.net/">Joshua Seigler</a> using <a href="https://github.com/seigler/neat-charts">seigler/neat-charts</a>, <a href="http://altorouter.com/">AltoRouter</a>, and <a href="http://www.phpfastcache.com/">phpfastcache</a> with data from the <a href="https://poloniex.com/support/api/">Poloniex public API</a>.
|
Made by <a href="https://joshua.seigler.net/">Joshua Seigler</a> using <a href="https://github.com/seigler/neat-charts">seigler/neat-charts</a>, <a href="http://altorouter.com/">AltoRouter</a>, and <a href="http://www.phpfastcache.com/">phpfastcache</a> with data from the <a href="https://poloniex.com/support/api/">Poloniex public API</a>.
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue