-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (143 loc) · 6.01 KB
/
index.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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simbol</title>
<meta name="theme-color" content="#F9D656"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="/dist/assets/images/logo-16.png"/>
<link rel="manifest" href="/manifest.json">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('serviceworker.js', { scope: '/' }).then((registration) => {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, (err) => {
console.log('ServiceWorker registration failed: ', err);
});
}
</script>
<link rel="stylesheet" href="dist/style.css">
<script src="dist/polyfills.js" defer></script>
<script type="module" src="dist/index.js" defer></script>
<script class="protocol-bundle-script" src="dist/ipfs_orbitdb.js" defer></script>
</head>
<body class="">
<div class="page-error grid-container hide">
<div class="cols-fullwidth page-error__wrapper">
<p class="page-error__text">No VR devices connected</p>
<button class="page-error__close">×</button>
</div>
</div>
<header class="grid-container">
<div class="cols-fullwidth header">
<div class="header-left">
<div class="back hide">
<span class="back-icon icon icon--angle"></span>
<p class="back-text">Back</p>
</div>
<div class="toggle-wrapper hide">
<p class="toggle-text">2D</p>
<input type="checkbox" name="toggle1" class="toggle toggle-vr" id="toggle1">
<label class="toggle__label" for="toggle1"></label>
<p class="toggle-text">VR</p>
</div>
</div>
<a href="/"><div class="header__logo">
<h1 class="heading__1" aria-hidden="true">Simbol</h1>
<span class="logo logo--main hide"></span>
<span class="logo logo--vertical hide"></span>
</div></a>
<div class="if-signed-in header-right">
<button class="settings-button">
<span class="icon icon--gear settings-icon"></span>
<span aria-hidden="true">Settings</span>
</button>
</div>
</div>
</header>
<main class="grid-container">
<section class="if-signed-out cols-fullwidth sign-in">
<div class="sign-in__buttons">
<button class="button button--primary register" disabled>Register</button>
<button class="button button--secondary login" disabled>Log In</button>
</div>
<div class="identity-picker hide">
<label class="input-label">Pick your Identity:</label>
<ul class="identity-picker__list"></ul>
</div>
<div class="pick-avatar hide">
<label class="input-label">Choose your avatar:</label>
<div class="canvas-wrapper pick-avatar__canvas-wrapper"><canvas class="canvas pick-avatar__canvas"></canvas></div>
<button class="button button--primary pick-avatar__button">Select</button>
</div>
<div class="pick-name hide">
<div class="input-wrapper">
<label class="input-label" for="pick-name__input">Enter your name:</label>
<input class="input pick-name__input" id="pick-name__input" placeholder="e.g. Batman">
</div>
<button class="button button--primary pick-name__button">Select</button>
</div>
<p class="status">Loading...</p>
</section>
<section class="if-signed-in cols-fullwidth profile">
<div class=profile__name-wrapper>
<h2 class="heading__2">Hi <span class="profile__name"></span></h2>
<input class="input profile__name-input hide" placeholder="e.g. Batman">
<i class="icon icon--edit profile__name-edit"></i>
</div>
<div class="canvas-wrapper profile__avatar-wrapper"><canvas class="canvas profile__avatar"></canvas></div>
<div class="profile__avatar-edit">
<p class="avatar-edit__text">Edit</p>
<input class="input avatar-edit__input hide">
<i class="icon icon--edit avatar-edit__icon"></i>
</div>
</section>
<div class="cols-fullwidth add-to-hs hide"><button class="add-to-hs__button">Install Simbol</button></div>
</main>
<aside class="settings hide">
<div class="settings__wrapper">
<header class="settings__header">
<button class="settings__close">×</button>
<span class="logo logo--main settings__logo"></span>
</header>
<section class="settings__section">
<p class="settings__section-title">Identity</p>
<ul class="settings__section-list">
<li class="settings__section-item logout"><button class="settings-button">Log Out</button></li>
</ul>
</section>
<section>
<p class="settings__section-title">Settings</p>
<ul class="settings__section-list">
<li class="settings__section-item delete-identity"><button class="settings-button red">Delete Identity</button></li>
</ul>
</section>
</div>
</aside>
<div class="scene canvas-wrapper hide">
<canvas class="canvas"></canvas>
</div>
<template class="password-modal">
<section class="pick-password">
<p class="pick-password__explainer">It's your first time using Simbol on this device. Simbol needs a password to encrypt your data on the device.</p>
<div class="pick-password__form">
<div class="input-wrapper">
<label class="picker-label" for="pick-password__input">Password:</label>
<input class="input pick-password__input" id="pick-password__input" type="text">
</div>
<div class="input-wrapper input-wrapper--horizontal">
<label class="" for="pick-password__show">Show Password</label>
<input class="pick-password__show" id="pick-password__show" type="checkbox" checked data-for="pick-password__input">
</div>
</div>
<div class="input-wrapper input-wrapper--horizontal">
<label class="picker-label" for="pick-password__save">Save password for 30 days</label>
<input class="pick-password__save" id="pick-password__save" type="checkbox">
</div>
<p class="pick-password__notice">If you save your password, anyone with physical access to your device or via malware will be able to access your identity.</p>
<button class="button button--primary pick-password__button">Select</button>
</section>
</template>
</body>
</html>