vigil/index.html at main · thorbh2/vigil · 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Vigil - If the web says so, the chain does it</title>
<meta name="description" content="Web-to-chain automation on GenLayer. Arm a watch over any public URL with a plain-English condition; when a validator set agrees the condition is true, the watch fires its on-chain action automatically. IFTTT for intelligent contracts." />
<link rel="stylesheet" href="./styles.css?v=6">
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css">
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>

<nav class="nav">
  <div class="nav-inner">
    <a class="brand" href="#top"><span class="logo-mark"><i class="ph-fill ph-radar"></i></span> Vigil</a>
    <div class="nav-mid">
      <a href="#how">How it works</a>
      <a href="#watches">Watches</a>
      <a href="#why">Why Vigil</a>
    </div>
    <div class="nav-end">
      <span id="walletslot"><button class="btn ghost sm" id="connectBtn">Connect</button></span>
      <button class="btn primary sm" id="navPostBtn">New watch</button>
    </div>
  </div>
</nav>

<header class="hero" id="top">
  <canvas id="radarCanvas"></canvas>
  <div class="hero-inner">
    <span class="eyebrow"><span class="dot"></span> Web-to-chain automation · GenLayer</span>
    <h1>If the web says so,<br>the chain does it.</h1>
    <p class="lede">Arm a watch over any public page with a condition in plain English and an on-chain action to fire when it comes true. Anyone can poke a watch; the contract reads the page and a validator set agrees whether the condition holds. The first time it does, the action fires - automatically, trustlessly. IFTTT, settled by consensus.</p>
    <div class="palette">
      <div class="pal-bar"><i class="ph-bold ph-magnifying-glass"></i><span class="pal-input">When <em id="palCond">a page shows an outage</em>, pay <em>5 GEN</em> to a user…</span><span class="pal-key">Enter</span></div>
      <div class="pal-rows">
        <div class="pal-row"><i class="ph-bold ph-globe-simple"></i> Watch a URL for a condition<span class="pr-tag">trigger</span></div>
        <div class="pal-row"><i class="ph-bold ph-lightning"></i> Fire a GEN payout on-chain<span class="pr-tag">action</span></div>
        <div class="pal-row"><i class="ph-bold ph-users-three"></i> Settled by validator consensus<span class="pr-tag">trustless</span></div>
      </div>
    </div>
    <div class="hero-cta">
      <button class="btn primary lg" id="heroPostBtn">Arm a watch</button>
      <a class="btn line lg" href="#how">How it works</a>
    </div>
  </div>
</header>

<main class="page">

  <section class="strip">
    <div class="strip-cell"><b id="stArmed">0</b><span>Armed watches</span></div>
    <div class="strip-cell"><b id="stLocked">0</b><span>GEN escrowed</span></div>
    <div class="strip-cell"><b id="stFired">0</b><span>Fired</span></div>
    <div class="strip-cell"><button class="btn line sm" id="refreshBtn"><i class="ph-bold ph-arrows-clockwise"></i> Sync</button></div>
  </section>

  <section class="how" id="how">
    <div class="sec-head"><span class="eyebrow">How it works</span><h2>Trigger, action, consensus.</h2></div>
    <div class="grid-3">
      <div class="cell"><span class="cn">01</span><h3>Arm</h3><p>Escrow GEN, point the watch at a public URL, and write the condition that should fire it. Name who gets paid.</p></div>
      <div class="cell"><span class="cn">02</span><h3>Poke</h3><p>Anyone can check the watch. The contract fetches the page and validators agree whether the condition is true right now.</p></div>
      <div class="cell"><span class="cn">03</span><h3>Fire</h3><p>The first time the condition holds, the watch fires its action and the escrow is released. Until then it stays armed.</p></div>
    </div>
  </section>

  <section class="watches" id="watches">
    <div class="sec-row"><h2>Live watches</h2><span class="mono count" id="wCount">-</span></div>
    <div class="watch-list" id="watchList"><div class="w-empty">Reading the chain…</div></div>
  </section>

  <section class="why" id="why">
    <div class="sec-head"><span class="eyebrow">Why Vigil</span><h2>The chain, listening to the world.</h2></div>
    <div class="grid-3">
      <div class="cell"><i class="ph-bold ph-globe-hemisphere-west"></i><h3>Any public page</h3><p>If a human can read the truth on a web page, a Vigil watch can act on it - status pages, prices, results, registries.</p></div>
      <div class="cell"><i class="ph-bold ph-lock-key"></i><h3>Action pre-funded</h3><p>The payout is escrowed when the watch is armed. When it fires, the funds are already there - no scramble, no default.</p></div>
      <div class="cell"><i class="ph-bold ph-eye"></i><h3>Every check on record</h3><p>Each poke records what the validators read. The watch's history is auditable, and it only ever fires once.</p></div>
    </div>
  </section>

  <section class="cta">
    <div class="cta-card">
      <h2>Wire the open web to your contract.</h2>
      <p>Arm a watch, escrow the action, and let consensus pull the trigger. One transaction on GenLayer studionet.</p>
      <button class="btn primary lg" id="ctaPostBtn">Arm a watch</button>
    </div>
  </section>

</main>

<footer class="footer">
  <div class="footer-inner">
    <a class="brand" href="#top"><span class="logo-mark"><i class="ph-fill ph-radar"></i></span> Vigil</a>
    <div class="foot-links">
      <a href="#how">How it works</a><a href="#watches">Watches</a><a href="#why">Why Vigil</a>
      <a href="https://docs.genlayer.com/" target="_blank" rel="noopener">GenLayer docs ↗</a>
      <a id="contractLink" href="https://explorer-studio.genlayer.com/contracts/0x4Af79F8c3D52Cf884DF28B0Ec6Bc9f4336185F2B" target="_blank" rel="noopener">Contract 0x4Af7...5F2B -></a>
    </div>
    <span class="foot-net"><span class="net-dot"></span>studionet · live</span>
  </div>
  <div class="foot-base">Vigil · web-to-chain automation on GenLayer studionet</div>
</footer>

<div class="scrim" id="scrim"></div>
<aside class="drawer" id="drawer">
  <div class="drawer-h"><h3 id="drawerTitle">New watch</h3><button class="icon-btn" id="closeDrawer" aria-label="Close"><i class="ph-bold ph-x"></i></button></div>
  <div class="drawer-b" id="drawerBody"></div>
</aside>
<div id="log"></div>
<script type="module" src="./app.js?v=1"></script>
</body>
</html>