vectorless-js/index.html at main · ancs21/vectorless-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Vectorless WASM — PageIndex in the browser</title>
    <style>
      :root { color-scheme: light dark; }
      body { font: 14px/1.5 system-ui, sans-serif; max-width: 1100px; margin: 1.5rem auto; padding: 0 1rem; }
      h1 { font-size: 1.25rem; margin: 0 0 .25rem; }
      .sub { color: #777; margin: 0 0 1rem; }
      input[type="text"] { width: 100%; padding: .4rem; box-sizing: border-box; font: inherit; }
      .row { margin: .6rem 0; }
      button { padding: .45rem .9rem; font: inherit; }
      #status { color: #666; min-height: 1.4em; }
      .warn { color: #b45309; font-weight: 600; }

      .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
      @media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }
      .pane { border: 1px solid #8883; border-radius: 6px; padding: .5rem .7rem; }
      .pane h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #888; margin: .1rem 0 .5rem; }

      /* tree */
      ul.tree { list-style: none; margin: 0; padding-left: 0; max-height: 55vh; overflow: auto; }
      ul.tree ul { list-style: none; margin: 0; padding-left: 1.1rem; border-left: 1px dotted #8884; }
      .node { cursor: pointer; padding: 1px 4px; border-radius: 4px; white-space: nowrap; }
      .node:hover { background: #8882; }
      .node.sel { background: #3b82f633; }
      .nid { color: #2563eb; font-family: ui-monospace, monospace; font-size: .82em; }
      .ln  { color: #999; font-family: ui-monospace, monospace; font-size: .82em; }

      pre { background: #8881; padding: .6rem; overflow: auto; border-radius: 4px; max-height: 55vh; white-space: pre-wrap; word-break: break-word; }
      details > summary { cursor: pointer; color: #888; font-size: .85em; }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>