diff --git a/domain-server/resources/web/css/style.css b/domain-server/resources/web/css/style.css
index 547b903b15..f040ad26e7 100644
--- a/domain-server/resources/web/css/style.css
+++ b/domain-server/resources/web/css/style.css
@@ -1,3 +1,17 @@
+/* cairo-regular - latin */
+@font-face {
+ font-family: 'Cairo';
+ font-style: normal;
+ font-weight: 400;
+ src: url('/fonts/cairo-v2-latin-regular.eot'); /* IE9 Compat Modes */
+ src: local('Cairo'), local('Cairo-Regular'),
+ url('/fonts/cairo-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('/fonts/cairo-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+ url('/fonts/cairo-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
+ url('/fonts/cairo-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('/fonts/cairo-v2-latin-regular.svg#Cairo') format('svg'); /* Legacy iOS */
+}
+
body {
position: relative;
padding-bottom: 30px;
@@ -311,7 +325,7 @@ table .headers + .headers td {
font-size: 14px;
text-decoration-line: underline;
font-weight: normal;
- color: #2F80ED;
+ color: #00B3F8;
}
#manage-cloud-domains-link {
diff --git a/domain-server/resources/web/fonts/cairo-v2-latin-regular.eot b/domain-server/resources/web/fonts/cairo-v2-latin-regular.eot
new file mode 100644
index 0000000000..6a22e7926d
Binary files /dev/null and b/domain-server/resources/web/fonts/cairo-v2-latin-regular.eot differ
diff --git a/domain-server/resources/web/fonts/cairo-v2-latin-regular.svg b/domain-server/resources/web/fonts/cairo-v2-latin-regular.svg
new file mode 100644
index 0000000000..64e5a31732
--- /dev/null
+++ b/domain-server/resources/web/fonts/cairo-v2-latin-regular.svg
@@ -0,0 +1 @@
+<!DOCTYPE html><html lang=en><meta charset=utf-8><meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width"><title>Error 500 (Server Error)!!1</title><style>*{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{color:#222;text-align:unset;margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px;}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}pre{white-space:pre-wrap;}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}</style><div id="af-error-container"><a href=//www.google.com><span id=logo aria-label=Google></span></a><p><b>500.</b> <ins>That’s an error.</ins><p>There was an error. Please try again later. <ins>That’s all we know.</ins></div>
\ No newline at end of file
diff --git a/domain-server/resources/web/fonts/cairo-v2-latin-regular.ttf b/domain-server/resources/web/fonts/cairo-v2-latin-regular.ttf
new file mode 100644
index 0000000000..216effc099
Binary files /dev/null and b/domain-server/resources/web/fonts/cairo-v2-latin-regular.ttf differ
diff --git a/domain-server/resources/web/fonts/cairo-v2-latin-regular.woff b/domain-server/resources/web/fonts/cairo-v2-latin-regular.woff
new file mode 100644
index 0000000000..73f2ef82fa
Binary files /dev/null and b/domain-server/resources/web/fonts/cairo-v2-latin-regular.woff differ
diff --git a/domain-server/resources/web/fonts/cairo-v2-latin-regular.woff2 b/domain-server/resources/web/fonts/cairo-v2-latin-regular.woff2
new file mode 100644
index 0000000000..1d36dc0112
Binary files /dev/null and b/domain-server/resources/web/fonts/cairo-v2-latin-regular.woff2 differ
diff --git a/domain-server/resources/web/images/checkmark.svg b/domain-server/resources/web/images/checkmark.svg
deleted file mode 100644
index f4403921ee..0000000000
--- a/domain-server/resources/web/images/checkmark.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="676" height="676" viewBox="0 0 676 676" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>CongratulationImage</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="matrix(4 0 0 4 -21208 -17980)">
-<g id="CongratulationImage">
-<g id="Ellipse">
-<use xlink:href="#path0_fill" transform="translate(5302 4495)" fill="#FFFFFF"/>
-<mask id="mask0_outline_ins">
-<use xlink:href="#path0_fill" fill="white" transform="translate(5302 4495)"/>
-</mask>
-<g mask="url(#mask0_outline_ins)">
-<use xlink:href="#path1_stroke_2x" transform="translate(5302 4495)" fill="#219653"/>
-</g>
-</g>
-<g id="Vector 2">
-<use xlink:href="#path2_stroke" transform="translate(5355 4559)" fill="#219653"/>
-</g>
-</g>
-</g>
-<defs>
-<path id="path0_fill" d="M 169 84.5C 169 131.168 131.168 169 84.5 169C 37.8319 169 0 131.168 0 84.5C 0 37.8319 37.8319 0 84.5 0C 131.168 0 169 37.8319 169 84.5Z"/>
-<path id="path1_stroke_2x" d="M 154 84.5C 154 122.884 122.884 154 84.5 154L 84.5 184C 139.452 184 184 139.452 184 84.5L 154 84.5ZM 84.5 154C 46.1162 154 15 122.884 15 84.5L -15 84.5C -15 139.452 29.5477 184 84.5 184L 84.5 154ZM 15 84.5C 15 46.1162 46.1162 15 84.5 15L 84.5 -15C 29.5477 -15 -15 29.5477 -15 84.5L 15 84.5ZM 84.5 15C 122.884 15 154 46.1162 154 84.5L 184 84.5C 184 29.5477 139.452 -15 84.5 -15L 84.5 15Z"/>
-<path id="path2_stroke" d="M 5.18747 19.8031C 2.19593 16.9382 -2.5517 17.0408 -5.41666 20.0323C -8.28162 23.0238 -8.17901 27.7715 -5.18747 30.6364L 5.18747 19.8031ZM 20.6541 45L 15.4667 50.4167C 18.3816 53.2083 22.9831 53.1924 25.8787 50.3809L 20.6541 45ZM 72.2246 5.38085C 75.1964 2.49539 75.2663 -2.25283 72.3809 -5.2246C 69.4954 -8.19636 64.7472 -8.26632 61.7754 -5.38085L 72.2246 5.38085ZM -5.18747 30.6364L 15.4667 50.4167L 25.8416 39.5833L 5.18747 19.8031L -5.18747 30.6364ZM 25.8787 50.3809L 72.2246 5.38085L 61.7754 -5.38085L 15.4295 39.6191L 25.8787 50.3809Z"/>
-</defs>
-</svg>
diff --git a/domain-server/resources/web/images/copy-icon.svg b/domain-server/resources/web/images/copy-icon.svg
new file mode 100644
index 0000000000..ce1d841072
--- /dev/null
+++ b/domain-server/resources/web/images/copy-icon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 576 576" style="enable-background:new 0 0 576 576;" xml:space="preserve">
+<path d="M329.7,410.7H127.8c-42.1,0-76.4-34.3-76.4-76.4V132.4c0-42.1,34.3-76.4,76.4-76.4h201.9c42.1,0,76.4,34.3,76.4,76.4v201.9
+ C406.1,376.4,371.8,410.7,329.7,410.7z M127.8,98.9c-18.5,0-33.5,15-33.5,33.5v201.9c0,18.5,15,33.5,33.5,33.5h201.9
+ c18.5,0,33.5-15,33.5-33.5V132.4c0-18.5-15-33.5-33.5-33.5H127.8z"/>
+<path d="M449.4,519H407c-11.9,0-21.5-9.6-21.5-21.5s9.6-21.5,21.5-21.5h42.4c11.9,0,21.5,9.6,21.5,21.5S461.3,519,449.4,519z
+ M305.1,519H263c-11.9,0-21.5-9.6-21.5-21.5s9.6-21.5,21.5-21.5h42.2c11.9,0,21.5,9.6,21.5,21.5S317,519,305.1,519z M192.4,464.1
+ c-11.9,0-21.5-9.6-21.5-21.4v-42.2c0-11.9,9.6-21.5,21.5-21.5c11.9,0,21.5,9.6,21.5,21.5v42.1C213.8,454.5,204.2,464.1,192.4,464.1z
+ M504.1,448.2c-11.9,0-21.5-9.6-21.5-21.5v-42.2c0-11.9,9.6-21.5,21.5-21.5c11.9,0,21.5,9.6,21.5,21.5v42.2
+ C525.6,438.6,516,448.2,504.1,448.2z M192.4,320.1c-11.9,0-21.5-9.6-21.5-21.5v-42.2c0-11.9,9.6-21.5,21.5-21.5
+ c11.9,0,21.5,9.6,21.5,21.5v42.2C213.8,310.5,204.2,320.1,192.4,320.1z M504.1,304.1c-11.9,0-21.5-9.6-21.5-21.5v-42
+ c0-11.9,9.6-21.6,21.5-21.6c11.9,0,21.5,9.5,21.5,21.4v42.2C525.6,294.5,516,304.1,504.1,304.1z M433.4,207.2h-42.2
+ c-11.9,0-21.5-9.6-21.5-21.5s9.6-21.5,21.5-21.5h42.2c11.9,0,21.5,9.6,21.5,21.5S445.3,207.2,433.4,207.2z M289.3,207.2h-42.1
+ c-11.9,0-21.5-9.6-21.5-21.5s9.6-21.5,21.4-21.5h42.2c11.9,0,21.5,9.6,21.5,21.5S301.2,207.2,289.3,207.2z"/>
+</svg>
diff --git a/domain-server/resources/web/images/wizard-congratulation-header.jpg b/domain-server/resources/web/images/wizard-congratulation-header.jpg
new file mode 100644
index 0000000000..80a3823033
Binary files /dev/null and b/domain-server/resources/web/images/wizard-congratulation-header.jpg differ
diff --git a/domain-server/resources/web/wizard/css/style.css b/domain-server/resources/web/wizard/css/style.css
index dfb576ebba..2303bfba00 100644
--- a/domain-server/resources/web/wizard/css/style.css
+++ b/domain-server/resources/web/wizard/css/style.css
@@ -83,21 +83,80 @@ label {
margin-bottom: 33px;
}
-#checkmark-image {
- margin-top: 66px;
- margin-bottom: 59px;
- width: 169px;
- height: 169px;
+.btn.btn-square {
+ border-radius: 0;
}
-#congratulation-text {
- margin-bottom: 59px;
+.header {
+ position: absolute;
+ top: -20px;
+ left: 50%;
+ margin-left: -720px; /* Half of the width */
+ min-width: 1440px;
+ z-index: -1;
}
-#visit-domain-checkbox {
- margin-bottom: 23px;
+.title {
+ font-family: 'Cairo';
+ color: white;
+ margin-top: 260px;
}
-#visit-domain-checkbox label {
- margin: 0 0;
+#main-description {
+ margin-top: 32px;
+ margin-bottom: 35px;
+}
+
+#share-box {
+ background-color: rgb(240, 240, 240);
+ padding: 20px 20px;
+ margin-top: 15px;
+ margin-bottom: 70px;
+ white-space: nowrap;
+}
+
+#share-box > span {
+ vertical-align: middle;
+ display: table-cell;
+ height: 100%;
+}
+
+#share-box button {
+ border-color: rgb(225, 225, 225);
+ font-size: 18px;
+}
+
+#share-box img {
+ padding-right: 10px;
+}
+
+#share-text {
+ font-size: 22px;
+ padding-right: 15px;
+}
+
+#share-field {
+ background-color: rgb(255, 255, 255);
+ padding: 0 10px;
+ width: 100%;
+}
+
+#share-link {
+ font-size: 28px;
+}
+
+#congrats-list > div > div {
+ margin-bottom: 30px;
+}
+
+#congrats-list ul {
+ padding-left: 16px;
+}
+
+#congrats-list {
+ margin-bottom: 60px;
+}
+
+#open-settings {
+ border-color: black;
}
diff --git a/domain-server/resources/web/wizard/index.shtml b/domain-server/resources/web/wizard/index.shtml
index 9d4d8b7381..b526a5719b 100644
--- a/domain-server/resources/web/wizard/index.shtml
+++ b/domain-server/resources/web/wizard/index.shtml
@@ -191,29 +191,70 @@
</dl>
</div>
-<div class="wizard-step cloud-only col-xs-12 col-sm-12 col-md-9 col-lg-7 col-centered" style="display: none;">
+<div id="congratulation-step" class="wizard-step cloud-only col-xs-12 col-centered" style="display: none;">
<div class="row">
- <div class="col-xs-12" align="center">
- <img id="checkmark-image" src="../images/checkmark.svg">
+ <div class="col-xs-10 col-xs-offset-1">
+ <img class="header" src="/images/wizard-congratulation-header.jpg" alt="Header" width="1440" height="339">
+ <h1 class="title">Congratulations!</h1>
</div>
</div>
- <div id="congratulation-text" class="row">
- <div class="col-xs-12">
- <p class="step-info">Congratulations! You have successfully setup and configured your cloud hosted domain.</p>
+ <div class="row">
+ <div class="col-xs-10 col-xs-offset-1">
+ <p id="main-description" class="step-info">You have successfully setup and configured your cloud hosted domain.</p>
</div>
</div>
- <dl class="row">
- <div class="col-xs-12">
- <div class="pull-right">
- <div id="visit-domain-checkbox">
- <label><input id="go-to-domain" class="form-check-input" type="checkbox"> Visit domain in VR now</label>
- </div>
- <button id="explore-settings" type="button" class="btn btn-md btn-primary">Explore all domain server settings</button>
+ <div class="row">
+ <div class="col-xs-10 col-xs-offset-1">
+ <div class="step-info">
+ <b>Invite people in!</b>
+ </div>
+ <div id="share-box">
+ <span id="share-text" class="step-info">Share your domain:</span>
+ <span id="share-field">
+ <a id="share-link" class="blue-link" target="_blank"></a>
+ </span>
+ <span>
+ <button type="button" class="btn btn-md btn-default btn-square" onclick="copyToClipboard('#share-link')">
+ <img src="/images/copy-icon.svg" alt="cpy icon" height="30" width="30">copy
+ </button>
+ </span>
</div>
</div>
- </dl>
+ </div>
+
+ <div id="congrats-list" class="row">
+ <div class="col-xs-4 col-xs-offset-1">
+ <div class="step-info">
+ <b>Go to your Domain:</b>
+ </div>
+ <ul>
+ <li class="step-info">Browse environments in the Marketplace to select the perfect content set for your VR world.</li>
+ <li class="step-info">Invite people to your domain right now.</li>
+ <li class="step-info">Meet new people and explore other domains.</li>
+ </ul>
+ </div>
+ <div class="col-xs-3 col-xs-offset-1">
+ <div class="step-info">
+ <b>Continue to Domain settings:</b>
+ </div>
+ <ul>
+ <li class="step-info">Set additional permissions for who can visit and make changes.</li>
+ <li class="step-info">Adjust audio settings.</li>
+ <li class="step-info">Back up your domain's content.</li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-xs-4 col-xs-offset-1">
+ <button id="visit-domain" type="button" class="btn btn-md btn-primary btn-square">Visit Your VR World</button>
+ </div>
+ <div class="col-xs-3 col-xs-offset-1">
+ <button id="open-settings" type="button" class="btn btn-md btn-default btn-square next-button">Open Domain Settings</button>
+ </div>
+ </div>
</div>
<!--#include virtual="footer.html"-->
diff --git a/domain-server/resources/web/wizard/js/wizard.js b/domain-server/resources/web/wizard/js/wizard.js
index 57e85973f4..c0d17ca02c 100644
--- a/domain-server/resources/web/wizard/js/wizard.js
+++ b/domain-server/resources/web/wizard/js/wizard.js
@@ -11,7 +11,7 @@ $(document).ready(function(){
$('#connect-account-btn').attr('href', URLs.METAVERSE_URL + "/user/tokens/new?for_domain_server=true");
$('[data-toggle="tooltip"]').tooltip();
-
+
$('.perms-link').on('click', function() {
var modal_body = '<div>';
modal_body += '<b>None</b> - No one will have permissions. Only you and the users your have given administrator privileges to will have permissions.</br></br>';
@@ -70,8 +70,8 @@ $(document).ready(function(){
});
});
- $('body').on('click', '#explore-settings', function() {
- exploreSettings();
+ $('body').on('click', '#visit-domain', function() {
+ $('#share-link')[0].click();
});
$('input[type=radio][name=connect-radio]').change(function() {
@@ -120,6 +120,14 @@ $(document).ready(function(){
});
});
+function copyToClipboard(element) {
+ var $temp = $("<input>");
+ $("body").append($temp);
+ $temp.val($(element).text()).select();
+ document.execCommand("copy");
+ $temp.remove();
+}
+
function setupWizardSteps() {
currentStepNumber = Settings.data.values.wizard.steps_completed;
var steps = null;
@@ -155,7 +163,9 @@ function setupWizardSteps() {
function updatePlaceNameLink(address) {
if (address) {
- $('#place-name-link').html('Your domain is reachable at: <a target="_blank" href="' + URLs.PLACE_URL + '/' + address + '">' + address + '</a>');
+ var url = URLs.PLACE_URL + '/' + address;
+ $('#place-name-link').html('Your domain is reachable at: <a target="_blank" href="' + url + '">' + address + '</a>');
+ $('#share-field a').attr('href', url).text(url);
}
}
@@ -507,14 +517,3 @@ function saveUsernamePassword() {
location.reload();
});
}
-
-function exploreSettings() {
- if ($('#go-to-domain').is(":checked")) {
- var link = $('#place-name-link a:first');
- if (link.length > 0) {
- window.open(link.attr("href"));
- }
- }
-
- goToNextStep();
-}