hydra/tree_viewer.html at main · randomidiot13/hydra · 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            a, button.link {
              color: #08e
            }
            a:hover, button.link:hover {
              color: #32cd32
            }
            a:visited {
              color: #af69ef
            }
            a:after {
              content: url(https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg);
              margin: 0 0 0 3px;
            }
            button.link {
              background: none!important;
              border: none!important;
              padding: 0!important;
              font-family: sans-serif;
              font-size: medium;
              text-decoration: underline;
              cursor: pointer
            }
            table.field {
              margin-left: auto;
              margin-right: auto;
              table-layout: fixed
            }
            table.field td {
              min-width: 14px;
              padding-bottom: 15px
            }
            div.grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
              grid-gap: 1rem 0
            }
        </style>
        <script type="text/javascript" src="main.js"></script>
        <script type="text/javascript" src="tree_data.js"></script>
    </head>
    <body style="font-family:sans-serif" onload="disp_options(init_hash, data)">
        <h1 style="text-align:center">Hydra Decision Tree Viewer</h1>
        <div style="text-align:center;margin-bottom:20px">
            <button class="link" onclick="disp_options(init_hash, data)">Reset</button>
        </div>
        <br>
        <div id="results" style="text-align:center;margin:auto;max-width:1400px"></div>
        <p style="text-align:center;margin-top:50px">Click on the piece that is revealed (not the preview below it).</p>
    </body>
</html>