|
|
@@ -9,16 +9,14 @@
|
|
|
<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="form.js" defer></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"
|
|
|
- onchange="onMetricChange(event.target.form.elements)"
|
|
|
- >
|
|
|
+ <fieldset class="metric-select-fieldset">
|
|
|
<legend>Metric</legend>
|
|
|
<div>
|
|
|
<label>
|
|
|
@@ -65,93 +63,34 @@
|
|
|
</template>
|
|
|
|
|
|
<template id="pkmn-data-template">
|
|
|
- α = <span class="pkmn-data-value pkmn-data-value--alpha"></span>
|
|
|
- <br />
|
|
|
- σ = <span class="pkmn-data-value pkmn-data-value--sigma"></span>
|
|
|
- <br />
|
|
|
- Θ = <span class="pkmn-data-value pkmn-data-value--bigTheta"></span>
|
|
|
- <br />
|
|
|
+ <div>α = <span bind-to="alpha"></span></div>
|
|
|
+ <div>σ = <span bind-to="sigma"></span></div>
|
|
|
+ <div>Θ = <span bind-to="bigTheta"></span></div>
|
|
|
<hr />
|
|
|
- θ = <span class="pkmn-data-value pkmn-data-value--theta"></span>°
|
|
|
- <br />
|
|
|
- ϕ = <span class="pkmn-data-value pkmn-data-value--phi"></span>°
|
|
|
- <br />
|
|
|
- δ = <span class="pkmn-data-value pkmn-data-value--delta"></span>
|
|
|
- <br />
|
|
|
- M = <span class="pkmn-data-value pkmn-data-value--manhattan"></span>
|
|
|
- <br />
|
|
|
- Ч = <span class="pkmn-data-value pkmn-data-value--ch"></span>
|
|
|
- <br />
|
|
|
- ℓ = <span class="pkmn-data-value pkmn-data-value--lightnessDiff"></span>
|
|
|
- <br />
|
|
|
+ <div>θ = <span bind-to="theta"></span>°</div>
|
|
|
+ <div>ϕ = <span bind-to="phi"></span>°</div>
|
|
|
+ <div>δ = <span bind-to="delta"></span></div>
|
|
|
+ <div>M = <span bind-to="manhattan"></span></div>
|
|
|
+ <div>Ч = <span bind-to="ch"></span></div>
|
|
|
+ <div>ℓ = <span bind-to="lightnessDiff"></span></div>
|
|
|
<hr />
|
|
|
- β = <span class="pkmn-data-value pkmn-data-value--importance"></span>
|
|
|
- <br />
|
|
|
- I = <span class="pkmn-data-value pkmn-data-value--inertia"></span>
|
|
|
- <br />
|
|
|
- V = <span class="pkmn-data-value pkmn-data-value--variance"></span>
|
|
|
- <br />
|
|
|
- Φ = <span class="pkmn-data-value pkmn-data-value--muNuAngle"></span>°
|
|
|
- <br />
|
|
|
- N = <span class="pkmn-data-value pkmn-data-value--size"></span>
|
|
|
- <br />
|
|
|
- L = <span class="pkmn-data-value pkmn-data-value--lightness"></span>
|
|
|
- <br />
|
|
|
- C = <span class="pkmn-data-value pkmn-data-value--chroma"></span>
|
|
|
+ <div>β = <span bind-to="importance"></span></div>
|
|
|
+ <div>I = <span bind-to="inertia"></span></div>
|
|
|
+ <div>V = <span bind-to="variance"></span></div>
|
|
|
+ <div>Φ = <span bind-to="muNuAngle"></span>°</div>
|
|
|
+ <div>N = <span bind-to="size"></span></div>
|
|
|
+ <div>L = <span bind-to="lightness"></span></div>
|
|
|
+ <div>C = <span bind-to="chroma"></span></div>
|
|
|
</template>
|
|
|
|
|
|
<template id="pkmn-template">
|
|
|
- <div class="pkmn">
|
|
|
- <img />
|
|
|
- <div class="pkmn-name"></div>
|
|
|
- <div
|
|
|
- role="button"
|
|
|
- class="pkmn-total"
|
|
|
- onmouseenter="event.target.querySelector('dialog').show()"
|
|
|
- onmouseleave="event.target.querySelector('dialog').close()"
|
|
|
- >
|
|
|
- <dialog class="pkmn-data"></dialog>
|
|
|
- </div>
|
|
|
- <div class="pkmn-score"></div>
|
|
|
- <div
|
|
|
- role="button"
|
|
|
- class="pkmn-cls pkmn-cls1"
|
|
|
- onmouseenter="event.target.querySelector('dialog').show()"
|
|
|
- onmouseleave="event.target.querySelector('dialog').close()"
|
|
|
- >
|
|
|
- <span></span><span></span>
|
|
|
- <dialog class="pkmn-data" hidden></dialog>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- role="button"
|
|
|
- class="pkmn-cls pkmn-cls2"
|
|
|
- onmouseenter="event.target.querySelector('dialog').show()"
|
|
|
- onmouseleave="event.target.querySelector('dialog').close()"
|
|
|
- >
|
|
|
- <span></span><span></span>
|
|
|
- <dialog class="pkmn-data" hidden></dialog>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- role="button"
|
|
|
- class="pkmn-cls pkmn-cls3"
|
|
|
- onmouseenter="event.target.querySelector('dialog').show()"
|
|
|
- onmouseleave="event.target.querySelector('dialog').close()"
|
|
|
- >
|
|
|
- <span></span><span></span>
|
|
|
- <dialog class="pkmn-data" hidden></dialog>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- role="button"
|
|
|
- class="pkmn-cls pkmn-cls4"
|
|
|
- onmouseenter="event.target.querySelector('dialog').show()"
|
|
|
- onmouseleave="event.target.querySelector('dialog').close()"
|
|
|
- >
|
|
|
- <span></span><span></span>
|
|
|
- <dialog class="pkmn-data" hidden></dialog>
|
|
|
- </div>
|
|
|
+ <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);"
|
|
|
@@ -252,33 +191,24 @@
|
|
|
</div>
|
|
|
<span class="fn-bracket">]</span>
|
|
|
</div>
|
|
|
- </form>
|
|
|
+ </form> -->
|
|
|
|
|
|
- <form action="javascript:void(0);" id="sortMetric">
|
|
|
- <!-- Template mount point -->
|
|
|
- </form>
|
|
|
+ <!-- <form id="sortMetric"></form>
|
|
|
+ <form id="clusterMetric"></form> -->
|
|
|
|
|
|
- <form action="javascript:void(0);" id="clusterMetric">
|
|
|
- <!-- Template mount point -->
|
|
|
- </form>
|
|
|
-
|
|
|
- <form action="javascript:void(0);" id="colorSelect" autocomplete="off">
|
|
|
- <label for="color-input-text">Target Color</label>
|
|
|
- <button type="button" onclick="onColorChange(randomColor())">Random Color</button>
|
|
|
- <input
|
|
|
- id="color-input-text"
|
|
|
- name="colorText"
|
|
|
- type="text"
|
|
|
- maxlength="7"
|
|
|
- oninput="onColorChange(event.target.value)"
|
|
|
- />
|
|
|
- <input
|
|
|
- name="colorPicker"
|
|
|
- type="color"
|
|
|
- onchange="onColorChange(event.target.value)"
|
|
|
- />
|
|
|
+ <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>
|
|
|
@@ -335,7 +265,8 @@
|
|
|
id="name-search"
|
|
|
oninput="searchByName(event.target.value)"
|
|
|
/>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+-->
|
|
|
</body>
|
|
|
</html>
|
