diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 40 |
1 files changed, 23 insertions, 17 deletions
@@ -1,41 +1,47 @@ <html> <head> -<title>spectral</title> -<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"> +<title>wav2pix</title> +<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"> <style> * { box-sizing: border-box; } html,body { - background: #bbb; + background: #fff; margin: 0; padding: 0; - overflow: hidden; + width: 100%; height: 100%; +/* overflow: hidden; -webkit-overflow-scrolling: auto; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +*/ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; user-select: none; + background: linear-gradient(35deg, rgba(255,250,250,0.62), rgba(238,243,255,0.92)); } -html { - background: red; -} -#header { - position: fixed; - bottom: 20px; left: 0; +header { + display: flex; width: 100%; color: #000; font-size: 16px; font-weight: 100; text-align: center; - z-index: 20; - pointer-events: none; + padding: 5%; +} +input { + margin-left: 10px; +} +#gallery { + font-size: 0; } -canvas { - position: absolute; - top: 0; left: 0; +#gallery canvas { + width: 128px; + height: 128px; } </style> </head> <body> - <div id="header">spectral synthesis testbed</div> + +<header>generate image files from an mp3: <input type="file" id="upload" /></header> +<div id='gallery'></div> + </body> <script src='bundle.js'></script> </html> |