Mercurial > hg > batmud > maputils
view www/search.html @ 1807:d419124e284a
More work on the front-end.
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Mon, 30 Oct 2017 00:04:00 +0200 |
parents | 3d7da273ce3f |
children | d7deea635463 |
line wrap: on
line source
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Map search</title> <script type="text/javascript" src="search.js"></script> <style type="text/css"> #error { font-size: 2em; text-align: center; color: red; background: black; padding: 1em; } h1 { font-size: 1.3em; margin: 0.2em; } h2 { font-size: 0.75em; margin: 0.2em; } #searchBox, #resultsBox { background: #eee; display: inline-block; vertical-align: top; width: 35%; border-radius:0.3em; padding: 0.5em; } #resultsBox { width: 60%; height: 100%; margin: auto; } #logBox { display: inline-block; vertical-align: top; padding: 0.5em; margin-top: 0.5em; } #controls { text-align: right; } #controls button { padding-left: 1em; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; margin: 0.5em; } #mapList { margin: 0.5em; display: block; } #mapList .map + label { display: inline; padding: 0.25em; margin: 0.15em; border-radius: 0.2em; color: black; background: #ccc; text-align: right; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #mapList .map { display: none; } #mapList .map:checked + label { color: white; background: green; text-decoration: underline; } </style> </head> <body onload="mapInitSearch()"> <h1>Pupunen Map search (DEMO/ALPHA)</h1> <div>NOTICE: Testing only. Not on-line/available all the time. The map pattern parser is not very tolerant currently, best is to have strictly "square" patterns. </div> <noscript> <div id="error"> This page requires JavaScript to be enabled to work. </div> </noscript> <div id="searchBox"> <h2>Search pattern</h2> <textarea id="pattern" cols="30" rows="15"> </textarea> <div id="controls"> <div id="mapList">LOADING MAP LIST...</div> <button id="btnMaps" type="button">C^</button> <button class="large" id="btnReset" type="button">Reset search</button> <button class="large" id="btnSearch" type="button">Search</button> </div> </div> <div id="resultsBox"> <h2>Search results</h2> <div id="results"></div> </div> <div id="logBox"> <h2>Log</h2> <div id="log"></div> </div> </body> </html>