Add splash screen

This commit is contained in:
Ryan Huffman 2016-01-11 14:06:53 -08:00
parent 3377217273
commit 6d42ce63fc
3 changed files with 214 additions and 0 deletions

127
console/src/splash.css Normal file
View file

@ -0,0 +1,127 @@
@font-face {
font-family: 'Proxima Nova';
src: url('vendor/ProximaNova/ProximaNova-Regular.otf');
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
color: #414141;
}
* {
font-family: "Proxima Nova", "Open Sans", Arial, Helvetica, sans-serif;
font-size: 1.022em;
line-height: 130%;
}
a:link, a:visited, a:hover, a:active {
color: #2D88A4;
}
a:hover {
color: #00B4EF;
}
h1, h2 {
color: black;
margin: 0;
padding: 0;
}
h1 {
font-size: 2.0em;
}
h2 {
font-size: 1.0em;
font-weight: bold;
}
p {
}
.header-title {
padding-top: 80px;
}
.content {
margin: 0 110px;
}
.column {
display: inline-block;
float: left;
}
.column.left {
padding-top: 20px;
width: 415px;
padding-right: 120px;
}
.column.center {
padding-top: 20px;
width: 540px;
}
.column.right {
float: right;
padding-top: 40px;
padding-left: 60px;
position: absolute;
right: -30px;
}
.column.right img {
}
.top {
height: 156px;
border-bottom: 2px solid #F5F6F6;
}
.middle {
width: 1364px; /* 1584 - (110 * 2) */
position: absolute;
top: 156px;
bottom: 98px;
}
.bottom{
width: 100%;
position: absolute;
height: 98px;
background-color: #F5F6F6;
bottom: 0;
/* padding-top: 34px; */
}
.footer {
padding-top: 34px;
}
.header-title {
}
.header-right {
/* float: right; */
position: absolute;
top: 70px;
right: 114px;
}
input[type="checkbox"] {
display: inline-block;
/* display:none; */
/* width:19px; */
/* height:19px; */
}
/* input[type=checkbox] label:before { */
/* border-radius: 3px; */
/* } */
/* input[type=checkbox]:checked { */
/* content: "\2713"; */
/* text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); */
/* font-size: 15px; */
/* color: #f3f3f3; */
/* text-align: center; */
/* line-height: 15px; */
/* } */

76
console/src/splash.html Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<title>High Fidelity</title>
<script src="splash.js"></script>
<link rel="stylesheet" type="text/css" href="splash.css"></link>
</head>
<body onload="ready()">
<div class="top content">
<div class="header-title">
<h1>Install complete</h1>
</div>
<div class="header-right">
<img src="images/console-hf-logo.png" width=300px />
</div>
</div>
<div class="middle content">
<div class="column left">
<p>
<h2>What now?</h2>
Console is your personal domain server in High Fidelity.
It allows your local machine to manage 4000 cubic kilometers of space,
ready for you to build, explore, and share however you like. To start
you off, we've put a few things in your space to play around with and
to learn the ropes.
</p>
<p>
To learn more about uploading your own models and scripts, and how to add
items from the Market, <a target="_blank" href="https://docs.highfidelity.com/docs/the-basics">check out 'The Basics'</a>.
</p>
</div>
<div class="column center">
<p>
<h2>How do I use it?</h2>
Console is your personal domain server in High Fidelity.
It allows your local machine to manage your server by clicking on the
High Fidelity icon in your ... In the menu that opens, you can:
</p>
<p>
<ul>
<li>go to your 'Home,' automatically launching High Fidelity</li>
<li>administer basic function like starting and stopping your server</li>
<li>access your server's settings and logs</li>
</ul>
</p>
<p>
For more information on managing your server, <a target="_blank" href="https://docs.highfidelity.com/">visit our documentation</a>
</p>
</div>
<div class="column right">
<script>
var osType = require('os').type();
menuBarImageURL = '';
if (osType = 'Windows_NT') {
menuBarImageURL = "images/menubar-osx.png";
} else {
menuBarImageURL = "images/menubar-osx.png";
}
document.write('<img src="' + menuBarImageURL + '" width=320px/>');
</script>
</div>
</div>
<div class="bottom">
<div class="content footer">
<label>
<input type="checkbox" id="suppress-splash" >
Don't show this screen next time
</label>
</input>
</div>
</div>
</body>
</html>

11
console/src/splash.js Normal file
View file

@ -0,0 +1,11 @@
var remote = require('electron').remote;
ready = function() {
window.$ = require('./vendor/jquery/jquery-2.1.4.min.js');
var userConfig = remote.getGlobal('userConfig');
$('#suppress-splash').change(function() {
console.log("updating");
userConfig.set('doNotShowSplash', $(this).is(':checked'));
});
}