ocap-kernel/packages/brow-2-brow/src/index.html at aa5e10b622e78a027f0b8937783a316583a18495 · MetaMask/ocap-kernel · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Browser-to-browser comm test</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="module" defer src="./index.js"></script>
  </head>
  <body class="bg-gray-100 text-gray-900 font-sans leading-relaxed">
    <main class="container mx-auto p-6 bg-white shadow-md rounded-lg mt-10">
      <h1 class="font-bold text-2xl text-blue-600 mb-4">
        Browser-to-browser comm test (TS)
      </h1>

      <section class="my-4">
        <h2 class="font-bold text-xl text-blue-600 mb-2">Node</h2>
        <ul class="list-disc list-inside ml-4">
          <li>
            Peer ID:
            <span class="font-bold" id="output-node-peer-id">Unknown</span>
          </li>
          <li>Status: <span id="output-node-status">Initialising</span></li>
          <li>
            Connections: <span id="output-peer-count">0</span>
            <ul class="list-disc list-inside ml-6" id="output-peer-types"></ul>
          </li>
          <li>
            My addresses: <span id="output-address-count">0</span>
            <ul class="list-disc list-inside ml-6" id="output-addresses"></ul>
          </li>
        </ul>
      </section>

      <section class="my-6">
        <h2 class="font-bold text-xl text-blue-600 mb-2">Peers</h2>
        <p class="flex flex-row items-center gap-2">
          <label
            class="block text-gray-700 text-sm font-bold"
            for="input-multiaddr"
            >Multiaddr</label
          >
          <input
            class="shadow appearance-none border rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            id="input-multiaddr"
            type="text"
            placeholder="/ip4/..."
          />
          <button
            class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            id="button-connect"
            type="button"
          >
            Connect
          </button>
        </p>
        <ul class="list-disc list-inside ml-4" id="output-peer-details"></ul>
      </section>

      <section class="my-6">
        <h2 class="font-bold text-xl text-blue-600 mb-2">Message</h2>
        <p class="flex flex-row items-center gap-2">
          <label
            class="block text-gray-700 text-sm font-bold"
            for="input-target"
            >Target</label
          >
          <input
            class="shadow appearance-none border rounded w-20 py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            id="input-target"
            type="text"
            placeholder="target id"
          />
          <label
            class="block text-gray-700 text-sm font-bold"
            for="input-message"
            >Message</label
          >
          <input
            class="shadow appearance-none border rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            id="input-message"
            type="text"
            placeholder="your message here..."
          />
          <button
            class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            id="button-send"
            type="button"
          >
            Send
          </button>
        </p>
      </section>

      <h2 class="font-bold text-xl text-blue-600 mb-2">Output</h2>
      <pre
        class="bg-gray-100 p-4 rounded shadow-inner"
        id="output-messages"
      ></pre>

      <hr class="my-6 border-gray-300" />
    </main>
  </body>
</html>