ChemInspector/index.html at main · epam/ChemInspector · 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inspecto</title>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="./styles/bootstrap.min.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="stylesheet" href="./inspecto/styles/style.css" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      rel="stylesheet"
    />
  </head>

  <body style="overflow: hidden">
    <div class="container-fluid">
      <div class="row">
        <!-- First half with iframe -->
        <div class="col-md-6 p-0 half-screen">
          <iframe src="./ketcher/index.html" id="ketcher" style="width: 100%; height: 100%" frameborder="0"></iframe>
        </div>

        <!-- Second half with collapsible content and output section -->
        <div class="col-md-6 p-0 half-screen">
          <div class="container-fluid right-half" style="display: flex; flex-direction: column; flex: 1">
            <!-- h1 title -->
            <div class="header-container">
              <div class="main-header">
                <a href="https://github.com/epam/inspecto/">
                  <img class="inspeto-logo" src="./inspecto/assets/logo.svg" alt="Inspecto logo" />
                </a>
                <h1><a style="color:#212529;" href="https://github.com/epam/inspecto/">Inspecto</a></h1>
                <a href="https://www.epam.com/">
                  <img class="epam-logo" src="./inspecto/assets/epam-logo.svg" alt="EPAM logo" />
                </a>
              </div>
            </div>
            <div class="tabs-container">
              <ul class="nav nav-tabs">
                <li class="nav-item">
                  <a
                    class="nav-link active"
                    id="rules-tab"
                    data-toggle="tab"
                    href="#rules"
                    role="tab"
                    aria-controls="rules"
                    aria-selected="true"
                    >Rules
                    <div id="rules-selected">0</div></a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    id="issues-tab"
                    data-toggle="tab"
                    href="#issues"
                    role="tab"
                    aria-controls="issues"
                    aria-selected="false"
                    >Found Issues
                    <div id="results-found">0</div>
                  </a>
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    id="json-tab"
                    data-toggle="tab"
                    href="#json-result"
                    role="tab"
                    aria-controls="json"
                    aria-selected="false"
                    >Result JSON</a
                  >
                </li>
              </ul>
            </div>

            <div class="tab-content">
              <div class="tab-pane fade show active" id="rules" role="tabpanel" aria-labelledby="rules-tab">
                <div id="rulesContainer"></div>
              </div>
              <div class="tab-pane fade" id="issues" role="tabpanel" aria-labelledby="issues-tab">
                <div class="row list"></div>
              </div>
              <div class="tab-pane fade" id="json-result" role="tabpanel" aria-labelledby="json-tab">
                <div class="row">
                  <div class="col">
                    <button type="button" class="copy-result">Copy JSON</button>
                  </div>
                </div>
                <div class="row">
                  <div class="col" style="display: flex; flex: 1">
                    <!-- Output section -->
                    <pre class="output-section placeholder" style="flex: 1">
                  Inspecto results goes here
                </pre
                    >
                  </div>
                </div>
              </div>
            </div>

            <!-- Output section -->
            <div class="row mt-4">
              <div class="col controls">
                <!-- Apply Rules button -->
                <button class="btn btn-primary disabled apply-rules-button" type="button">
                  Apply Rules
                  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="module" src="./ui/demo.ts"></script>
    <!-- <link rel="stylesheet" href="styles/dat-gui-light-theme.css" /> -->
  </body>
</html>