diff --git a/src/assets/stylesheets/fonts.scss b/src/assets/stylesheets/fonts.scss
index 1ec1b6c12a0854b202b74f2a2f3d60ce9a3d517b..434f827c03b57318a338605a487d0903caeac51c 100644
--- a/src/assets/stylesheets/fonts.scss
+++ b/src/assets/stylesheets/fonts.scss
@@ -3,7 +3,7 @@
font-family: 'Zilla Slab';
font-style: normal;
font-weight: 400;
- src: local('Zilla Slab'), local('ZillaSlab-Regular'), url('../fonts/zilla-slab_latin-ext.woff2') format('woff2');
+ src: url('../fonts/zilla-slab_latin-ext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@@ -12,6 +12,6 @@
font-family: 'Zilla Slab';
font-style: normal;
font-weight: 400;
- src: local('Zilla Slab'), local('ZillaSlab-Regular'), url('../fonts/zilla-slab_latin.woff2') format('woff2');
+ src: url('../fonts/zilla-slab_latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 036a769acdf2762ea4ef42fb19cae64e8ff66919..a610a09aa26591c63e79aa6c08ec09c1fc767ef4 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -1,3 +1,6 @@
+@import 'fonts';
+@import 'shared';
+
* {
box-sizing: border-box;
}
@@ -6,21 +9,111 @@ body {
margin: 0;
padding: 0;
background-color: black;
+ color: white;
}
-.main-content {
- position: fixed;
- top: 0;
+.home-root {
+ @extend %default-font;
+
width: 100%;
+ height: 100%;
margin: 0;
padding: 0;
}
+.home {
+ position: absolute;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ padding: 1.5em;
+ text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
+}
+
+.main-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ z-index: 2;
+}
+
.background-video {
position: fixed;
top: 0;
left: 0;
- opacity: 0.3;
+ opacity: 0.5;
min-width: 100%;
min-height: 100%;
+ z-index: 1;
+}
+
+.header-content {
+// background-color: red;
+ min-height: 75px;
+ display: flex;
+}
+
+.header-content__title {
+ flex: 10;
+ display: flex;
+}
+
+.header-content__title__name {
+ font-size: 2.0em;
+}
+
+.header-content__title__preview {
+ color: $grey-text;
+ margin-left: 10px;
}
+
+.header-content__experiment {
+ text-align: right;
+ flex: 1 1 350px;
+ color: $grey-text;
+ font-size: 1.2em;
+ font-weight: lighter;
+}
+
+.header-content__experiment__info {
+ display: flex;
+ flex-direction: column;
+}
+
+.header-content__experiment__info__header a {
+ color: $light-text;
+}
+
+.header-content__experiment__info__link {
+ color: $grey-text;
+ font-size: 0.8em;
+ padding-top: 4px;
+}
+
+.hero-content {
+// background-color: blue;
+ flex: 10;
+}
+
+.hero-content__container {
+ display: flex;
+ flex-direction: column;
+}
+
+.hero-content__container__title {
+ font-size: 3em;
+ font-weight: 900;
+}
+
+.hero-content__container__subtitle {
+ font-size: 1.5em;
+ font-weight: lighter;
+ color: $light-text;
+ margin-top: 4px;
+}
+
+.footer-content {
+// background-color: green;
+}
+
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index e3a8fe318eb93e0c8824fe4dbb142a675a7759c0..75c4eb6aabdaa47b1ba3bd6d82434126f5ed5de8 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -31,8 +31,15 @@
"autoexit.title_units": " seconds",
"autoexit.subtitle": "You have started another session.",
"autoexit.cancel": "CANCEL",
- "home.create_header": "Name your Hub",
+ "home.create_header": "Choose a room name",
"home.create_name.validation_warning": "Invalid name, limited to 4 to 64 characters and limited symbols.",
- "home.create_button": "Create"
+ "home.webvr_disclaimer_pre": "A ",
+ "home.webvr_disclaimer_post": " experiment by ",
+ "home.webvr_disclaimer_mr_team": "Mozilla Mixed Reality",
+ "home.view_source": "View Source",
+ "home.join_on_slack": "Join us on Slack",
+ "home.report_issue": "Report an Issue",
+ "home.hero_title": "A new way to get together online.",
+ "home.hero_subtitle": "Laugh, play, get stuff done, or just hang out."
}
}
diff --git a/src/hub.html b/src/hub.html
index ad23c9c83950d0afd78e25bf27f9cdf38bdc10c0..bf3ca9302dbc1e1dc950645934ba3bd7f32cdade 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -5,6 +5,7 @@
<meta charset="utf-8">
<title>moz://a duck</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M62+)" data-expires="<%= ORIGIN_TRIAL_EXPIRES %>" content="<%= ORIGIN_TRIAL_TOKEN %>">
<% if(NODE_ENV === "production") { %>
<script src="https://cdn.rawgit.com/brianpeiris/aframe/845825ae694449524c185c44a314d361eead4680/dist/aframe-master.min.js"></script>
diff --git a/src/index.html b/src/index.html
index 8ed070741f346ef88d3b46473076c0a4c01c748b..dcf67c9bf96bf4320f0fed464b01594e6c65b5ae 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<title>moz://a duck</title>
</head>
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index 997a5d0514dc1477a964f03f4fcfe339194c11f9..aed06417132f786d990c40125e24eb344047c666 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -53,13 +53,83 @@ class HomeRoot extends Component {
render() {
return (
<IntlProvider locale={lang} messages={messages}>
- <div>
+ <div className="home">
+ <div className="main-content">
+ <div className="header-content">
+ <div className="header-content__title">
+ <div className="header-content__title__name">
+ <span style={{ "font-weight": "900" }}>moz://a</span> duck
+ </div>
+ <div className="header-content__title__preview">preview</div>
+ </div>
+ <div className="header-content__experiment">
+ <div className="header-content__experiment__container">
+ <div className="header-content__experiment__icon" />
+ <div className="header-content__experiment__info">
+ <div className="header-content__experiment__info__header">
+ <span>
+ <FormattedMessage id="home.webvr_disclaimer_pre" />
+ </span>
+ <span style={{ "font-weight": "bold" }}>WebVR</span>
+ <span>
+ <FormattedMessage id="home.webvr_disclaimer_post" />
+ </span>
+ <span>
+ <a rel="noopener noreferrer" target="_blank" href="https://blog.mozvr.com">
+ <FormattedMessage id="home.webvr_disclaimer_mr_team" />
+ </a>
+ </span>
+ </div>
+
+ <a
+ className="header-content__experiment__info__link"
+ rel="noopener noreferrer"
+ target="_blank"
+ href="https://github.com/mozilla/mr-social-client"
+ >
+ <FormattedMessage id="home.view_source" />
+ </a>
+
+ <a
+ className="header-content__experiment__info__link"
+ rel="noopener noreferrer"
+ target="_blank"
+ href="#"
+ onClick={this.showSlackInfo}
+ >
+ <FormattedMessage id="home.join_on_slack" />
+ </a>
+
+ <a
+ className="header-content__experiment__info__link"
+ rel="noopener noreferrer"
+ target="_blank"
+ onClick={this.showReportInfo}
+ href="#"
+ >
+ <FormattedMessage id="home.report_issue" />
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="hero-content">
+ <div className="hero-content__container">
+ <div className="hero-content__container__title">
+ <FormattedMessage id="home.hero_title" />
+ </div>
+ <div className="hero-content__container__subtitle">
+ <FormattedMessage id="home.hero_subtitle" />
+ </div>
+ </div>
+ </div>
+ <div className="footer-content">
+ {this.state.environments.length > 0 && <HubCreatePanel environments={this.state.environments} />}
+ </div>
+ </div>
<video playsInline autoPlay muted loop className="background-video" id="background-video">
<source src={homeVideo} type="video/webm" />
</video>
- <div className="main-content">
- {this.state.environments.length > 0 && <HubCreatePanel environments={this.state.environments} />}
- </div>
</div>
</IntlProvider>
);
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index 636dcedc46ebf523e524f60544967e49ff2db043..d755cd716e06b5fea19f0ac5985d2b99595a0e94 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -78,7 +78,7 @@ class HubCreatePanel extends Component {
>
Rotate
</button>
- <input type="submit" value={formatMessage({ id: "home.create_button" })} />
+ <input type="submit" value={"hi"} />
</div>
</div>
</form>