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>