| 1 | <!doctype html>
|
| 2 | <html>
|
| 3 | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
|
| 4 | <script src="https://www.gstatic.com/firebasejs/4.5.1/firebase.js"></script>
|
| 5 | <script src="https://js.stripe.com/v3/"></script>
|
| 6 | <script src="https://cdn.rawgit.com/mrdoob/three.js/fd5145944f051586a1cf9bb18d7221ba4f92f796/build/three.min.js"></script>
|
| 7 | <script>
|
| 8 | window.module = {exports: {}};
|
| 9 | </script>
|
| 10 | <script src="https://cdn.rawgit.com/modulesio/skin-js/d5351a33a4bd045d06f68c78c85d8b8ac7c3d0cb/index.js"></script>
|
| 11 | <script>
|
| 12 | window.skinJs = window.module.exports;
|
| 13 | window.skin = skinJs(THREE);
|
| 14 | window.module = null;
|
| 15 | </script>
|
| 16 | <style>
|
| 17 | body {
|
| 18 | margin: 0;
|
| 19 | min-width: 100vw;
|
| 20 | min-height: 100vh;
|
| 21 | font-family: 'Open Sans', sans-serif;
|
| 22 | font-size: 12px;
|
| 23 | font-weight: 600;
|
| 24 | }
|
| 25 | .login, .create-account {
|
| 26 | display: flex;
|
| 27 | min-width: inherit;
|
| 28 | min-height: inherit;
|
| 29 | align-items: center;
|
| 30 | background-color: #EEE;
|
| 31 | flex-direction: column;
|
| 32 | }
|
| 33 | .login-wrap, .create-account-wrap {
|
| 34 | display: flex;
|
| 35 | margin-top: 100px;
|
| 36 | padding: 30px;
|
| 37 | background-color: #FFF;
|
| 38 | flex-direction: column;
|
| 39 | box-sizing: border-box;
|
| 40 | }
|
| 41 | .login-wrap, .login-wrap-2, .create-account-wrap {
|
| 42 | display: flex;
|
| 43 | width: 400px;
|
| 44 | }
|
| 45 | .login-wrap .img-wrap {
|
| 46 | display: flex;
|
| 47 | margin-bottom: 10px;
|
| 48 | justify-content: center;
|
| 49 | align-items: center;
|
| 50 | }
|
| 51 | .form input {
|
| 52 | margin: 10px 0;
|
| 53 | padding: 10px;
|
| 54 | font-family: inherit;
|
| 55 | }
|
| 56 | .form input[type=email], .form input[type=password] {
|
| 57 | border: 0;
|
| 58 | border-bottom: 3px solid #CCC;
|
| 59 | background-color: #EEE;
|
| 60 | }
|
| 61 | .form input[type=email]:focus, .form input[type=password]:focus {
|
| 62 | background-color: #FFF;
|
| 63 | border-bottom-color: #2196F3;
|
| 64 | }
|
| 65 | .form input[type=submit], .form input[type=button] {
|
| 66 | padding: 10px 30px;
|
| 67 | border: 0;
|
| 68 | color: #FFF;
|
| 69 | }
|
| 70 | .form input[type=submit] {
|
| 71 | background: #2196F3;
|
| 72 | }
|
| 73 | .form input[type=submit]:hover, .form input[type=submit]:focus, .form input[type=submit]:disabled {
|
| 74 | background: #1976D2;
|
| 75 | cursor: pointer;
|
| 76 | }
|
| 77 | .form input[type=button] {
|
| 78 | margin: auto;
|
| 79 | margin-top: 20px;
|
| 80 | background: #DDD;
|
| 81 | border-bottom: 2px solid rgba(0, 0, 0, 0.2);
|
| 82 | border-radius: 5px;
|
| 83 | color: #E91E63;
|
| 84 | font-weight: 600;
|
| 85 | }
|
| 86 | .form input[type=button]:hover, .form input[type=button]:focus {
|
| 87 | background: #E91E63;
|
| 88 | color: #FFF;
|
| 89 | cursor: pointer;
|
| 90 | }
|
| 91 | .form.create-account input[type=submit] {
|
| 92 | margin: auto;
|
| 93 | margin-top: 20px;
|
| 94 | background: #E91E63;
|
| 95 | }
|
| 96 | .form.create-account input[type=submit]:hover, .form.create-account input[type=submit]:focus, .form.create-account input[type=submit]:disabled {
|
| 97 | background: #C2185B;
|
| 98 | cursor: pointer;
|
| 99 | }
|
| 100 | .form h1 {
|
| 101 | margin: 0;
|
| 102 | margin-top: -80px;
|
| 103 | margin-bottom: 40px;
|
| 104 | margin-left: -30px;
|
| 105 | font-size: 26px;
|
| 106 | font-weight: 500;
|
| 107 | }
|
| 108 | .form .buttons {
|
| 109 | display: flex;
|
| 110 | }
|
| 111 | .form input[type=radio] {
|
| 112 | display: none;
|
| 113 | }
|
| 114 | .form input[type=radio] + .button {
|
| 115 | display: flex;
|
| 116 | padding: 10px 30px;
|
| 117 | background: transparent;
|
| 118 | border: 2px solid #3F51B5;
|
| 119 | border-radius: 5px;
|
| 120 | color: #3F51B5;
|
| 121 | justify-content: center;
|
| 122 | align-items: center;
|
| 123 | flex-grow: 1;
|
| 124 | cursor: pointer;
|
| 125 | }
|
| 126 | .form input[type=radio]:checked + .button {
|
| 127 | background: #3F51B5;
|
| 128 | color: #FFF;
|
| 129 | }
|
| 130 | .form input[type=radio] + .button.first {
|
| 131 | border-top-right-radius: 0;
|
| 132 | border-bottom-right-radius: 0;
|
| 133 | }
|
| 134 | .form input[type=radio] + .button:last-child {
|
| 135 | border-top-left-radius: 0;
|
| 136 | border-bottom-left-radius: 0;
|
| 137 | }
|
| 138 | .form .spacer {
|
| 139 | width: 100%;
|
| 140 | height: 30px;
|
| 141 | }
|
| 142 | .form hr {
|
| 143 | width: 100%;
|
| 144 | margin: 15px 0;
|
| 145 | margin-bottom: 30px;
|
| 146 | border: 0;
|
| 147 | border-bottom: 2px solid #DDD;
|
| 148 | }
|
| 149 | .form .total {
|
| 150 | display: flex;
|
| 151 | margin-top: 10px;
|
| 152 | font-size: 16px;
|
| 153 | }
|
| 154 | .form .total .label {
|
| 155 | display: flex;
|
| 156 | font-size: 16px;
|
| 157 | }
|
| 158 | .form .total .value {
|
| 159 | margin-left: auto;
|
| 160 | }
|
| 161 | .form .error-message {
|
| 162 | margin: -30px;
|
| 163 | margin-top: 0;
|
| 164 | padding: 15px 30px;
|
| 165 | background-color: #F44336;
|
| 166 | color: #FFF;
|
| 167 | font-weight: 400;
|
| 168 | }
|
| 169 | .form .error-message:empty {
|
| 170 | display: none;
|
| 171 | }
|
| 172 | body:not(.loaded) .login, body.logged-in .login, body.creating-account .login {
|
| 173 | display: none;
|
| 174 | }
|
| 175 | body.logging-in .login-button {
|
| 176 | display: none;
|
| 177 | }
|
| 178 | body:not(.logging-in) .logging-in-button {
|
| 179 | display: none;
|
| 180 | }
|
| 181 | body:not(.creating-account) .create-account {
|
| 182 | display: none;
|
| 183 | }
|
| 184 | body.paying .pay-button {
|
| 185 | display: none;
|
| 186 | }
|
| 187 | body:not(.paying) .paying-button {
|
| 188 | display: none;
|
| 189 | }
|
| 190 | body:not(.logged-in) .ui {
|
| 191 | display: none;
|
| 192 | }
|
| 193 | asset {
|
| 194 | background-color: #EEE;
|
| 195 | }
|
| 196 | asset.file {
|
| 197 | background-color: #B3E5FC;
|
| 198 | }
|
| 199 | asset.authorized {
|
| 200 | background-color: #C8E6C9;
|
| 201 | }
|
| 202 | asset.certificate {
|
| 203 | background-color: #FFECB3;
|
| 204 | }
|
| 205 | asset.selected {
|
| 206 | background-color: #000;
|
| 207 | color: #FFF;
|
| 208 | }
|
| 209 | asset.selected.file {
|
| 210 | background-color: #2196F3;
|
| 211 | }
|
| 212 | asset.selected.authorized {
|
| 213 | background-color: #4CAF50;
|
| 214 | }
|
| 215 | asset.selected.certificate {
|
| 216 | background-color: #FFC107;
|
| 217 | }
|
| 218 | asset .header-link {
|
| 219 | display: none;
|
| 220 | }
|
| 221 | asset:hover .header-link {
|
| 222 | display: flex;
|
| 223 | color: inherit;
|
| 224 | text-decoration: none;
|
| 225 | }
|
| 226 | asset .header-link.blue:hover {
|
| 227 | color: #2196F3;
|
| 228 | }
|
| 229 | .button {
|
| 230 | background-color: #EEE;
|
| 231 | }
|
| 232 | .button:hover {
|
| 233 | background-color: #000;
|
| 234 | color: #FFF;
|
| 235 | }
|
| 236 | .button.blue {
|
| 237 | background-color: #2196F3;
|
| 238 | color: #FFF;
|
| 239 | }
|
| 240 | .button.blue:hover {
|
| 241 | background-color: #1976D2;
|
| 242 | }
|
| 243 | </style>
|
| 244 | <body>
|
| 245 | <form class="login form" id=login-form>
|
| 246 | <div class=login-wrap>
|
| 247 | <div class=img-wrap>
|
| 248 | <img src="https://cdn.rawgit.com/modulesio/vrid/15be81de414c181d56a192aa4f73a3243a6acde1/public/img/logo.svg" width=80 height=80>
|
| 249 | </div>
|
| 250 | <input type=email placeholder="your@email.com" id=email autofocus required>
|
| 251 | <input type=password placeholder="p@ssw0r4" id=password pattern=".{6,}" title="6 characters minimum" required>
|
| 252 | <div>
|
| 253 | <input class=login-button type=submit value="Log in">
|
| 254 | <input class=logging-in-button type=submit value="Logging in..." disabled>
|
| 255 | </div>
|
| 256 | <div class=error-message id=error-message></div>
|
| 257 | </div>
|
| 258 | <div class=login-wrap-2>
|
| 259 | <input type=button value="Create account" id=create-account-button>
|
| 260 | </div>
|
| 261 | </form>
|
| 262 | <form class="create-account form" id=create-account-form>
|
| 263 | <div class=create-account-wrap>
|
| 264 | <h1>Create a Zeo VR Avatar</h1>
|
| 265 | <input type=email placeholder="your@email.com" id=create-account-email autofocus required>
|
| 266 | <input type=password placeholder="p@ssw0r4" id=create-account-password pattern=".{6,}" title="6 characters minimum" required>
|
| 267 | <div class=spacer></div>
|
| 268 | <div class=buttons>
|
| 269 | <input type="radio" id="subscription-type-1" name="subscription-type" value="basic" checked>
|
| 270 | <label class="button first" for="subscription-type-1">Basic $5/mo</label>
|
| 271 | <input type="radio" id="subscription-type-2" name="subscription-type" value="gold">
|
| 272 | <label class="button last" for="subscription-type-2">Gold $15/mo</label>
|
| 273 | </div>
|
| 274 | <div class=total>
|
| 275 | <div class=label>Total:</div>
|
| 276 | <div class=value id=create-account-total-value>$5/mo</div>
|
| 277 | </div>
|
| 278 | <hr/>
|
| 279 | <div id=card-element></div>
|
| 280 | <div id=card-errors role=alert></div>
|
| 281 | <input class=pay-button type=submit value="Pay now">
|
| 282 | <input class=paying-button type=submit value="Paying..." disabled>
|
| 283 | </div>
|
| 284 | </form>
|
| 285 | <div style="min-width: inherit; min-height: inherit; flex-direction: column;" class=ui id=ui>
|
| 286 | <div style="display: flex; height: calc((100px + 36px) * 4); width: inherit; margin-bottom: 5px;">
|
| 287 | <div style="display: flex; flex-grow: 1; flex-direction: column; align-items: flex-start;">
|
| 288 | <div style="display: flex; margin-bottom: auto; align-items: flex-start; flex-wrap: wrap;" id=assets></div>
|
| 289 | </div>
|
| 290 | <div style="display: flex; width: 250px; flex-direction: column;">
|
| 291 | <div>
|
| 292 | <canvas width=100 height=100 id=infobox-canvas></canvas>
|
| 293 | </div>
|
| 294 | <h1 style="margin: 0; line-height: 1.4;" id=infobox-asset></h1>
|
| 295 | <p style="margin: 10px 0;" id=infobox-description></p>
|
| 296 | </div>
|
| 297 | <div style="display: flex; flex-direction: column;" id=equipments></div>
|
| 298 | </div>
|
| 299 | <div style="display: flex; margin-bottom: 5px; flex-direction: column; align-items: flex-start;">
|
| 300 | <div style="display: flex; width: 100%; margin-bottom: 5px;">
|
| 301 | <div style="display: flex; background-color: #673AB7; padding: 10px; color: #FFF; justify-content: center; align-items: center;">Username</div>
|
| 302 | <input type=text style="background-color: #EEE; margin-right: auto; padding: 10px; border: 0; font-family: monospace; font-size: 14px; font-weight: 400; outline: none;" placeholder="Enter username" value="my-avatar" id=username-input>
|
| 303 | <div style="display: flex;">
|
| 304 | <a class=button style="display: flex; margin-right: 5px; padding: 10px 20px; border: 0; font-family: monospace; font-size: 16px; font-weight: 400; justify-content: center; align-items: center; cursor: pointer; user-select: none;" id=new-button>New</a>
|
| 305 | <a class=button style="position: relative; display: flex; margin-right: 5px; padding: 10px 20px; border: 0; font-family: monospace; font-size: 16px; font-weight: 400; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; user-select: none;" id=load-button>
|
| 306 | <input type=file style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0; height: 100%;" id=load-input>
|
| 307 | Load
|
| 308 | </a>
|
| 309 | <a class=button style="display: flex; margin-right: 5px; padding: 10px 20px; border: 0; font-family: monospace; font-size: 16px; font-weight: 400; justify-content: center; align-items: center; cursor: pointer; user-select: none;" id=save-button>Save</a>
|
| 310 | <a class=button style="display: flex; margin-right: 5px; padding: 10px 20px; border: 0; font-family: monospace; font-size: 16px; font-weight: 400; justify-content: center; align-items: center; cursor: pointer; user-select: none;" id=download-keys-button>Download Keys</a>
|
| 311 | <a class=button style="display: flex; margin-right: 5px; padding: 10px 20px; border: 0; font-family: monospace; font-size: 16px; font-weight: 400; justify-content: center; align-items: center; cursor: pointer; user-select: none;" id=logout-button>Logout</a>
|
| 312 | </div>
|
| 313 | </div>
|
| 314 | <canvas width=200 height=200 id=skin-canvas style="user-select: none;"></canvas>
|
| 315 | </div>
|
| 316 | </div>
|
| 317 | <script src="lib/sprite.js"></script>
|
| 318 | <script src="lib/index.js"></script>
|
| 319 | </body>
|
| 320 | </html>
|