diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2018-08-13 15:37:08 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2018-08-13 15:37:08 +0200 |
| commit | c23cc77ef96cb66ff00ebf92322fd268ba9a4d7f (patch) | |
| tree | 70aff23cc68c8a075556868c7b88373757156cde /index.html | |
| parent | 86213c887b101044ae2f3ea393fee927842dbde2 (diff) | |
new ui...
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 103 |
1 files changed, 92 insertions, 11 deletions
@@ -1,6 +1,6 @@ <html> <head> -<title>cells</title> +<title>inequality</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <style> body { @@ -8,14 +8,18 @@ body { font-weight: 300; font-size: 13px; transition: background-color 100ms; - background-image: url(./img/imBreak_1340193016_tumblr_m5vynpMYYg1qiluqao1_500_.png); - background-position: top right; - background-repeat: no-repeat; - background-attachment: fixed; + background-color: #f8fdff; } div { display: inline-block; } +h3 { + font-weight: 300; + margin-top: 20px; +} +#dataset_name { + text-transform: capitalize; +} .desktop body { user-select: none; } @@ -29,23 +33,100 @@ div { top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); - width: 400px; display: flex; flex-direction: column; justify-content: space-between; } +.corner { + position: absolute; + bottom: 0; + margin: 10px; + padding: 10px; + background: white; + display: flex; +} +.corner.left { + left: 0; +} +.corner.right { + right: 0; +} +body { + transition: 0.1s; +} +.loading { + opacity: 0; +} +.row { + display: flex; + flex-direction: row; + align-items: flex-end; +} +.block { + display: flex; + flex-direction: column; + align-items: center; + margin-right: 10px; +} +.block > span { + display: block; + margin-top: 10px; +} +.radio { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 10px; +} +.radio > span { + margin-left: 10px; +} </style> </head> -<body> +<body class='loading'> <div> <div class='tools'> - <div class="top"> - <canvas nx="number" label="tempo" id="tempo"></canvas><br> - <canvas nx="select" id="scale"></canvas> - </div> <div> + <h2>Sonification of wealth inequality</h2> + <select id="scale"></select> + <h3 id="dataset_name"></h3> + <div class='radio'> + <div id="timing"></div> + <span class='val'></span> + </div> + <div class='row'> + <div class='block'> + <div id="tempo"></div> + <span class='val'></span> + <span>Tempo</span> + </div> + <div class='block'> + <div id="duration"></div> + <span class='val'></span> + <span>Duration</span> + </div> + <div class='block'> + <div id="offset"></div> + <span class='val'></span> + <span>Offset</span> + </div> + <div class='block'> + <div id="multiply"></div> + <span class='val'></span> + <span>Multiply</span> + </div> + <div class='block'> + <div id="interval"></div> + <span class='val'></span> + <span>Interval</span> + </div> + </div> </div> </div> +<div class="corner left"> +</div> +<div class="corner right"> +</div> </body> <script> var s = document.createElement('script'); |