kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Pokemon By Color</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/d3-color@3.0.1/dist/d3-color.min.js"></script>
    <script src="https://unpkg.com/d3-cam02@0.1.5/build/d3-cam02.min.js"></script>
    <script src="https://unpkg.com/fuse.js@6.5.3/dist/fuse.min.js"></script>
    <script src="database-v3.js"></script>
    <script src="math.js"></script>
    <script src="framework.js"></script>
    <script src="script.js" defer></script>
  </head>
  <body>
    <noscript>Requires javascript</noscript>

    <template id="metric-select-template">
      <fieldset class="metric-select-fieldset">
        <legend>Metric</legend>
        <div>
          <label>
            <input type="radio" name="metricKind" value="whole" />
            Set Comparison
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="metricKind" value="mean" />
            Mean Comparison
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="metricKind" value="statistic" />
            Set Statistics
          </label>
        </div>
        <select name="whole" disabled>
          <option value="alpha">Geometric Difference (α)</option>
          <option value="sigma">RMS Deviation (σ)</option>
          <option value="bigTheta">Cosine Difference (Θ)</option>
        </select>
        <select name="mean" disabled>
          <option value="theta">Angular Difference (θ)</option>
          <option value="phi">Hue Azimuth (ϕ)</option>
          <option value="delta">Euclidean (δ)</option>
          <option value="manhattan">Manhattan (M)</option>
          <option value="ch">Chebyshev (Ч)</option>
          <option value="lightnessDiff">Lightness (ℓ)</option>
        </select>
        <select name="statistic" disabled>
          <option value="importance">Visual Importance (β)</option>
          <option value="inertia">Inertia (I)</option>
          <option value="variance">Variance (V)</option>
          <option value="muNuAngle">Mu-Nu Angle (Φ)</option>
          <option value="size">Size (N)</option>
          <option value="lightness">Mean Lightness (L)</option>
          <option value="chroma">Mean Chroma (C)</option>
        </select>
        <output name="sortMetric" hidden aria-hidden="true"></output>
      </fieldset>
    </template>

    <template id="pkmn-data-template">
      <div>α&nbsp;=&nbsp;<span bind-to="alpha"></span></div>
      <div>σ&nbsp;=&nbsp;<span bind-to="sigma"></span></div>
      <div>Θ&nbsp;=&nbsp;<span bind-to="bigTheta"></span></div>
      <hr />
      <div>θ&nbsp;=&nbsp;<span bind-to="theta"></span>°</div>
      <div>ϕ&nbsp;=&nbsp;<span bind-to="phi"></span>°</div>
      <div>δ&nbsp;=&nbsp;<span bind-to="delta"></span></div>
      <div>M&nbsp;=&nbsp;<span bind-to="manhattan"></span></div>
      <div>Ч&nbsp;=&nbsp;<span bind-to="ch"></span></div>
      <div>ℓ&nbsp;=&nbsp;<span bind-to="lightnessDiff"></span></div>
      <hr />
      <div>β&nbsp;=&nbsp;<span bind-to="importance"></span></div>
      <div>I&nbsp;=&nbsp;<span bind-to="inertia"></span></div>
      <div>V&nbsp;=&nbsp;<span bind-to="variance"></span></div>
      <div>Φ&nbsp;=&nbsp;<span bind-to="muNuAngle"></span>°</div>
      <div>N&nbsp;=&nbsp;<span bind-to="size"></span></div>
      <div>L&nbsp;=&nbsp;<span bind-to="lightness"></span></div>
      <div>C&nbsp;=&nbsp;<span bind-to="chroma"></span></div>
    </template>

    <template id="pkmn-template">
      <div>
        <img bind-to="image" />
        <div bind-to="name"></div>
        <!-- TODO the actual data -->
      </div>
    </template>
    <!-- 
    <div class="main-container">
      <form
        action="javascript:void(0);"
        id="sortFunction"
        autocomplete="off"
        onchange="updateSort()"
      >
        <div class="fn-group fn-group-outer">
          <label class="fn-minmax">
            <input type="checkbox" name="sortOrder" role="button" hidden />
            <div class="fn-minmax-toggle">
              <span>min</span>
              <span>max</span>
            </div>
          </label>
          <span class="fn-bracket">[</span>
          <div
            class="fn-group"
            onchange="event.target.parentNode.classList.toggle('fn-part--disabled')"
          >
            <label class="fn-part">
              <input type="checkbox" name="useWholeImage" checked />
              <output name="metricSymbolP">α</output>(P)
            </label>
            ⋅
            <label class="fn-part">
              <input type="checkbox" name="totalSize" checked />
              |P|
            </label>
            ⋅
            <label class="fn-part fn-part--disabled">
              <input type="checkbox" name="invTotalSize" />
              |P|<sup>-1</sup>
            </label>
            ⋅
            <label class="fn-part">
              <input type="checkbox" name="useBestCluster" checked />
              <output name="metricSymbolB">α</output>(B)
            </label>
            ⋅
            <label class="fn-part fn-part--disabled">
              <input type="checkbox" name="clusterSize" />
              |B|
            </label>
            ⋅
            <label class="fn-part">
              <input type="checkbox" name="invClusterSize" checked />
              |B|<sup>-1</sup>
            </label>
          </div>
          <span class="fn-bracket">]</span>
        </div>
      </form>

      <form
        action="javascript:void(0);"
        id="clusterFunction"
        autocomplete="off"
        onchange="updateSort()"
      >
        <div class="fn-group">
          <span class="center">where B =&nbsp;</span>
          <label class="fn-minmax fn-minmax--wide">
            <input type="checkbox" name="sortOrder" role="button" checked hidden />
            <div class="fn-minmax-toggle">
              <span>argmin</span>
              <span>argmax</span>
            </div>
          </label>
          <span class="fn-bracket">[</span>
          <div
            class="fn-group"
            onchange="event.target.parentNode.classList.toggle('fn-part--disabled')"
          >
            <span class="fn-part fn-part--fixed">
              <output name="metricSymbol">β</output>(K)
            </span>
            ⋅
            <label class="fn-part fn-part--disabled">
              <input type="checkbox" name="clusterSize" />
              |K|
            </label>
            ⋅
            <label class="fn-part fn-part--disabled">
              <input type="checkbox" name="invClusterSize" />
              |K|<sup>-1</sup>
            </label>
            ⋅
            <label class="fn-part fn-part--disabled">
              <input type="checkbox" name="totalSize" />
              |P|
            </label>
            ⋅
            <label class="fn-part fn-part--disabled">
              <input type="checkbox" name="invTotalSize" />
              |P|<sup>-1</sup>
            </label>
          </div>
          <span class="fn-bracket">]</span>
        </div>
      </form> -->

    <!-- <form id="sortMetric"></form>
    <form id="clusterMetric"></form> -->

    <div class="sidebar | flow">
      <form id="colorSelect" class="flex col small-gap" autocomplete="off">
        <label class="emphasis" for="color-input-text">Target Color</label>
        <div class="color-inputs | flex small-gap">
          <input name="colorText" type="text" pattern="#?[0-9a-fA-F]*" maxlength="7" />
          <input name="colorPicker" type="color" />
        </div>
        <button type="button" bind-to="randomButton">Random Color</button>
      </form>
    </div>

    <main>test</main>
    <!-- 
      <form action="javascript:void(0);" id="sortControl" autocomplete="off">
        <div>
          <label>
            <div>Results:&nbsp;<output name="resultsToDisplayOutput">6</output></div>
            <input
              name="resultsToDisplay"
              type="range"
              min="1"
              max="100"
              value="6"
              oninput="
              event.target.form.elements.resultsToDisplayOutput.value = event.target.value
            "
              onchange="showResults()"
            />
          </label>
        </div>
        <div>
          <label>
            <input
              type="radio"
              onchange="updateSort()"
              name="colorSpace"
              value="jab"
              checked
            />
            CIECAM
          </label>
        </div>
        <div>
          <label>
            <input type="radio" onchange="updateSort()" name="colorSpace" value="rgb" />
            sRGB
          </label>
        </div>
      </form>

      <div id="color-results-label">By Color</div>
      <div id="name-results-label">By Name</div>

      <div id="color-results"></div>
      <div id="name-results"></div>
      <div id="prev-colors-container">
        <div>Previous Colors</div>
        <div id="prev-colors"></div>
      </div>

      <div id="name-search-container">
        <div>Name Search</div>
        <button type="button" onclick="randomPokemon()">Random Pokemon</button>
        <input
          type="text"
          autocomplete="off"
          id="name-search"
          oninput="searchByName(event.target.value)"
        />
      </div> 
    </div>
-->
  </body>
</html>