-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
65 lines (64 loc) · 3.09 KB
/
example.html
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
<html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<div id="app" v-bind:class="{ active: true }">
<div v-if="error">
<dif v-if="error.code === 'BLOCKED'">
<h2>You need to allow the camera for this page to work.</h2>
<button @click="activateCamera">Ask again</button>
</dif>
<div v-else>
<h2>You need to use a browser with Camera support to use this page!</h2>
</div>
</div>
<div v-else>
<h2>1. Hold the business card in front of the camera!</h2>
</div>
<video id="preview" width="500" height="300" v-bind:class="{ flipped: flipped, active: !(!activeCamera || error) }" ref="videoNode"></video>
<div v-if="activeCamera && !error">
<input type="checkbox" id="checkbox" v-model="flipped">
<label for="checkbox" title="Flip camera">⤾</label>
<div v-if="cameras.length > 1">
<select v-model="activeCameraId">
<option v-for="camera in cameras" v-bind:value="camera.deviceId">{{ camera.label }}</option>
</select>
</div>
</div>
<div v-if="scanned > 0">
<h2 v-if="missing > 0">2. Good! Now we only need {{ missing }} more!</h2>
<h2 v-else-if="scanned < codeSet.shares">2. Great! you collected {{ scanned }} cards.</h2>
<h2 v-else>2. Awesome! you collected <strong>all</strong> cards.</h2>
<ol class="scanned">
<li v-for="(code, name) in codes">
<a v-bind:href="'/team/' + name" target="_blank">{{ name }}</a>
</li>
</ol>
<div v-if="secret">
<h2>3. Oh! You restored a secret!</h2>
<p>
By scanning {{ scanned }} of {{ codeSet.shares }} cards, this link to a secret
DAT was restored: <a v-if="beaker" v-bind:href="'dat://' + secret " target="_blank">dat://{{ secret }}</a><pre v-if="!beaker">dat://{{ secret }}</pre>.
</p>
<p v-if="!beaker && !mobile">
If you have <a href="https://beakerbrowser.com/">Beaker Browser</a> installed, you can simply <a v-bind:href="'dat://' + secret " target="_blank">click here</a>
and the secret page will be downloaded through the distributed web.<br/>
<br/>
Alternative, you can also use a <a href="https://dat.bovid.space/" target="_blank">DAT gateway</a> to look at the page with any web browser by <a v-bind:href="'https://dat.bovid.space/' + secret" target="_blank">clicking here</a>.
</p>
<p v-if="mobile">
Sadly, there is no <b>mobile</b> browser at the moment capable
to download the DAT through the distributed net.<br/>
<br/>
Don't despair, you can use a <a href="https://dat.bovid.space/">DAT gateway</a> to look at the secret page: <a v-bind:href="'https://dat.bovid.space/' + secret" target="_blank">click here</a>.
</p>
</div>
</div>
</div>
<script type="text/javascript" src="dist/consento-cards.min.js"></script>
<script type="text/javascript">
app = consento.cards('#app')
</script>
</body>
</html>