Commit 959f567e authored by Mark Ghiorso's avatar Mark Ghiorso

Preliminary layout of splash screen

parent e1c74e3f
......@@ -122,14 +122,28 @@ namespace Private {
export
function createSplash(): HTMLElement {
const splash = document.createElement('div');
const container = document.createElement('div');
const logo = document.createElement('div');
splash.id = 'enki-splash';
const container = document.createElement('div');
container.id = 'container';
logo.id = 'main-logo';
const header = document.createElement('header');
header.innerHTML = '<h1>ENKI Portal Server</h1>';
container.appendChild(header);
const logo = document.createElement('nav');
//logo.id = 'main-logo';
container.appendChild(logo);
const mainText = document.createElement('article');
mainText.innerHTML =
'<h1>Welcome to the ENKI server</h1>' +
'<p>View the video at ...</p>';
container.appendChild(mainText);
const footer = document.createElement('footer');
footer.innerHTML = 'Copyright &copy; ENKI-portal.org';
container.appendChild(footer);
splash.appendChild(container);
return splash;
......@@ -192,16 +206,17 @@ namespace Private {
}, SPLASH_RECOVER_TIMEOUT);
if (splashButton == 0) {
let buttonCont = document.createElement('div');
buttonCont.setAttribute('style', 'position: relative;');
let button = document.createElement("button");
button.id = 'enki-button';
//button.setAttribute('style', 'height: 60px; width: 200px;');
button.textContent = 'Please Click me!';
button.textContent = 'Close this screen';
button.onclick = function() {
console.log('Button clicked.')
splasher.dispose();
};
button.className = 'jp-ENKI-button';
splash.appendChild(button);
buttonCont.appendChild(button);
splash.appendChild(buttonCont);
splashButton = 1;
}
......
......@@ -36,21 +36,56 @@
}
#container {
position: relative;
width: 100%;
height: 50%;
border: 1px solid gray;
}
#main-logo {
background-image: url('enki_big.png');
background-repeat: no-repeat;
background-size: 300px;
position: absolute;
background-position: center;
width: 100%;
height: 100%;
z-index: 1;
animation: .3s fade-in linear forwards;
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
background-image: url('enki_big.png');
background-repeat: no-repeat;
float: left;
width: 247px;
height: 320px;
margin: 50px;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 300px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
#enki-button {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
.jp-ENKI-button {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment