examples/lantern-demo/web/index.html

1<!doctype html>

2<html lang="en"><head><meta charset="utf-8">

3<meta name="viewport" content="width=device-width, initial-scale=1">

4<title>Lantern Demo</title>

5<style>

6 body{background:#0f1216;color:#e6e6e6;font:16px/1.5 system-ui,sans-serif;margin:0;padding:40px}

7 h1{color:#e0a44b;font-weight:600}

8 .row{margin:12px 0;padding:12px 16px;background:#171b21;border-radius:8px}

9 .k{color:#8aa}

10 code{color:#e0a44b}

11</style></head>

12<body>

13 <h1>Lantern Demo</h1>

14 <div class="row"><span class="k">bridge:</span> <span id="avail">checking…</span></div>

15 <div class="row"><span class="k">demo.echo result:</span> <span id="echo">—</span></div>

16 <div class="row"><span class="k">demo.hello event:</span> <span id="event">—</span></div>

17 <div class="row" id="fallback" style="display:none">

18 Running in a plain browser: <code>lantern.available === false</code>.

19 The same build lights up when hosted by Lantern.

20 </div>

21 <script>

22 function el(id){return document.getElementById(id);}

23 function start(){

24 var has = !!(window.lantern && window.lantern.available);

25 el('avail').textContent = 'lantern.available = ' + has;

26 if(!has){ el('fallback').style.display='block'; document.title='NOBRIDGE'; return; }

27 window.lantern.on('demo.hello', function(p){ el('event').textContent = p.msg; });

28 var nonce = Math.floor(Math.random()*1e9);

29 window.lantern.invoke('demo.echo', {nonce:nonce}).then(function(r){

30 el('echo').textContent = 'nonce=' + r.nonce;

31 document.title = 'BRIDGE-OK:' + r.nonce;

32 return window.lantern.invoke('demo.subscribe');

33 }).catch(function(e){ el('echo').textContent='error: '+e.message; document.title='ERR'; });

34 }

35 if(window.lantern) start(); else setTimeout(start, 50);

36 </script>

37</body></html>