ui/index.html at master · agree-able/ui · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      pear-ctrl[data-platform="darwin"] {
        margin-top: 12px;
        margin-left: 10px;
      }
      #titlebar {
        -webkit-app-region: drag;
        height: 30px;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        background-color: white;
      }
      #api { display: none;}
      #peerKey {
        width: 100%;
      }
      /* Media query for screens wider than 800px */
      @media only screen and (min-width: 700px) {
        #peerKey {
          width: 643px; /* Set width to 600px when screen is wider than 800px */
        }
      }
      .response { display: none; }
      #role { display: inline-block; }
      #version { vertical-align: top; }
      .je-header { display: none !important;}
      .je-object__title { display: none !important;}
      .je-object__controls { display: none !important;}
      .accordion-header { background: cornsilk; }
      .timestamp-row { height: 20px; }
      .response-th { position: relative; top: 40px; }
      .about-section  { margin-top: 157px !important;  }
      .navbar { margin-top: 30px; }
      .footer { padding-top: 10px; padding-left: 100px; padding-right: 100px; }
      .footer-links { list-style-type: none; }
      #hero-section { display: none; }
      #error-section { display: none; }
      #routes { padding-bottom: 20px; }
    </style>
    <link rel="stylesheet" href="./css/spectre.min.css">
    <link rel="stylesheet" href="./css/spectre-exp.min.css">
    <link rel="stylesheet" href="./css/spectre-icons.min.css">
    <script src="./css/jsoneditor.min.js"></script>
    <script type='module' src='./app.js'></script>
  </head>
  <body>
    <div id="titlebar">
      <pear-ctrl></pear-ctrl>
    </div>
    <header id="navbar" class="navbar">
      <section class="navbar-section">
        <div class="input-group input-inline">
          <input id="peerKey" class="form-input" type="text" placeholder="peer key" value="">
          <button id="connect" class="btn btn-primary input-group-btn" >Connect</button>
        </div>
      </section>
    </header>

    <div id="hero-section" class="empty">
      <p class="empty-title h5">🍐 Ready to Connect 🍐</p>
      <p class="empty-subtitle">Enter the peer's key and then connect</p>
    </div>

    <div id="error-section" class="empty">
      <div class="empty-icon">
        <i class="icon icon-stop icon-4x"></i>
      </div>
      <p class="empty-title h5">The peer can't be reached</p>
      <p class="empty-subtitle">
        Check if there is a typo in the key<br/>
        <br/>
        <span id="error-message"></span>
      </p>
    </div>

    <div id="api">

      <div class="hero hero-sm bg-gray">
        <div class="hero-body">
          <h1 id="role"></h1>
          <span id="version" class="label label-rounded label-default"></span>
          <p id="description"></p>
        </div>
      </div>

      <div id="routes"></div>

      <ul class="menu">
        <li class="divider" data-content="Downloads"></li>
        <li class="menu-item">
          <a id="downloadMJS" href="#">
            <i class="icon icon-download"></i> agreement.mjs <span class="text-secondary">(import for code projects)</span>
          </a>
          <a id="downloadJSON" href="#">
            <i class="icon icon-download"></i> swag.json <span class="text-secondary">(portable jsonschema version)</span>
          </a>
        </li>
    </div>
    <div class="divider text-center about-section" data-content="About"></div>
    <div class="footer">
      <p>
        <span class="text-gray">
        Pear Swag is an easy way to make forms and typed APIs in p2p. This app dynamically generates a ui for those forms and apis.
        </span>
      </p>
      <ul class="footer-links">
        <li>
          <a class="text-secondary" href="https://github.com/agree-able/ui"><i class="icon icon-link"></i> Agreeable UI</a>
        </li>
      </ul>
    </div>
  </body>
</html>