|
|
@@ -3,109 +3,13 @@
|
|
|
<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>
|
|
|
- <style>
|
|
|
- body {
|
|
|
- width: 100vw;
|
|
|
- padding-top: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-
|
|
|
- .pokemon {
|
|
|
- display: flex;
|
|
|
- flex-flow: row nowrap;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-end;
|
|
|
- width: 400px;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
-
|
|
|
- .color-tile {
|
|
|
- width: 50px;
|
|
|
- height: 32px;
|
|
|
- font-size: 10px;
|
|
|
- text-align: center;
|
|
|
- display: inline-flex;
|
|
|
- align-items: center;
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .pokemon_text {
|
|
|
- flex: 1;
|
|
|
- padding-left: 4px;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .pkmn-list {
|
|
|
- list-style-type: none;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- margin-top: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .bypkmn {
|
|
|
- border-top: 4px solid #222;
|
|
|
- border-right: 4px solid #222;
|
|
|
- margin-top: 32px;
|
|
|
- padding-top: 8px;
|
|
|
- padding-right: 8px;
|
|
|
- }
|
|
|
- </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<noscript>Requires javascript</noscript>
|
