kirkleon
/
pokemon-color-search


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Pokemon By Color</title>
        <link rel="stylesheet" href="nearest.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.js"></script>
        <script src="database.js"></script>
        <script src="nearest.js"></script>
        <script lang="javascript">window.onload = () => { onUpdate(); }</script>
    </head>
    <body>
        <noscript>Requires javascript</noscript>    
        <div class="container">
            <div id="left-panel" class="padded panel">
                <div>
                    Minimizing:
                    <span id="x-term">X(P)</span>
                    <span>-</span>
                    <span id="c-value">2</span>
                    <span id="q-vec">q</span>
                    <span>·</span>
                    <span id="y-vec">Y(P)</span>
                </div>
                <form class="panel" onsubmit="onUpdate(event)">
                    <div class="container control">
                        <label for="include-x">Include X:</label>
                        <input type="checkbox" checked oninput="onUpdate()" id="include-x">
                    </div>
                    
                    <div class="container control">
                        <label for="norm-q-y">Normalize q and Y:</label>
                        <input type="checkbox" oninput="onUpdate()" id="norm-q-y">
                    </div>
                    
                    <div class="container control">
                        <label for="close-coeff">Closeness coefficient: <span id="close-coeff-display">2</span></label>
                        <input type="range" min="0" max="10" value="2" step="0.1" oninput="onUpdate()" id="close-coeff">                
                    </div>

                    <div class="container control">
                        <div>Color Space: <span id="color-space">CAM02-UCS</span></div>
                        <button id="space-toggle" type="button" onclick="onToggleSpace()">Swap to RGB</button>
                    </div>
                </form>

                <div class="panel bypkmn">
                    <form class="container control" onsubmit="onUpdate(event)">
                        <label for="pokemon-name">Search By Pokemon</label>
                        <input id="pokemon-name" size="15" oninput="onUpdate()">
                    </form>
                    <ul id="search-list" class="pkmn-list"></ul>
                </div>
            </div>
            <div class="padded panel bycolor">
                <div>
                    Search By Color - click random, or enter six digit hex code (optional #)
                </div>
                <form class="panel" onsubmit="onUpdate(event)">
                    <div class="container bycolor_l1">
                        <button class="padded" type="button" onclick="onRandomColor()">Random color</button>
                        <input class="margined" size="7" maxlength="7" id="color-input" oninput="onUpdate()" value="#ffffff" />
                        <img src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
                    </div>

                    <div class="container bycolor_l2">
                        <label for="num-poke" style="min-width: 200px;">Number to find: <span id="num-poke-display">10</span></label>
                        <input type="range" min="1" max="100" value="10" oninput="onUpdate()" id="num-poke">
                    </div>
                </form>
                <ul id="best-list" class="pkmn-list"></ul>
            </div>
        </div>
    </body>
</html>