kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Pokemon By Color</title>
        <script src="https://www.unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
        <script src="https://unpkg.com/colorspaces@0.1.5/colorspaces.js"></script>
        <script src="database.js"></script>
        <script src="nearest.js"></script>
        <script lang="javascript">window.onload = () => { onUpdate(); }</script>
        <style>
            body {
                width: 100vw;
            }

            .container {
                width: 100%;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                align-items: flex-start;
            }

            .panel {
                width: 100%;
                flex: 1;
                display: flex;
                flex-flow: column nowrap;
                justify-content: flex-start;
                align-items: flex-start;
            }

            .padded {
                padding-left: 16px;
                padding-right: 16px;
            }

            .margined {
                margin-left: 8px;
                margin-right: 8px;
            }

            #left-panel {
                min-width: 400px;
                max-width: 500px;
            }

            .bycolor {
                flex: 2;
                border-left: 4px solid #222;
            }

            .bycolor_l1 {
                justify-content: flex-start;
                align-items: flex-end;
            }

            .bycolor_l2 {
                padding-top: 16px;
                justify-content: flex-start;
            }

            .control {
                height: 32px;
                align-items: flex-end;
            }
        </style>
    </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()" action="#">
                    <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">CIELUV</span></div>
                        <button id="space-toggle" onclick="onToggleSpace()">Swap to RGB</button>
                    </div>
                </form>
            </div>
            <div class="padded panel bycolor">
                <div>
                    Search By Color - click random, or enter six digit hex code (optional #) and press enter
                </div>
                <form class="panel" onsubmit="onUpdate()" action="#">
                    <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" onchange="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"></ul>
            </div>
        </div>
    </body>
</html>