ProtParamJS/index.html at master · kyu999/ProtParamJS · 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
<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>ProtParamJS</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.1.2/math.min.js"></script>
    </head>
    <body>
      <div class="container">
        <nav class="level"></nav>
        <nav class="level">
          <div class="level-item has-text-centered">
            <div>
              <p class="heading">protein property analysis</p>
              <p class="title">ProtParamJS</p>
            </div>
          </div>
        </nav>

        <div id="protein_analysis">
          <div class="columns">
            <div class="column">
              <textarea v-model="fasta" id="droppable" dropzone="move" class="textarea" placeholder="Enter protein sequences as fasta format, or drag & drop the fasta file here."></textarea>
            </div>
          </div>

          <div class="tile is-ancestor">
            <div class="tile">
              <div class="tile is-parent">
                <article class="tile is-child">
                  <canvas id="property" height="200%"></canvas>
                </article>
              </div>

              <div class="tile is-parent is-7">
                <article class="tile is-child">
                  <canvas id="aa_dist" height="145%"></canvas>
                </article>
              </div>
            </div>
          </div>

          <div class="tile is-ancestor">
            <div class="tile">
              <div class="tile">
                <div class="tile is-parent">
                  <article class="tile is-child">
                    <canvas id="kd_hydrophobicity" height="50%"></canvas>
                  </article>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <script src="utils.js"></script>
      <script src="protparam.js"></script>
      <script src="viz.js"></script>
      <script src="index.js"></script>
    </body>
</html>