diff --git a/app/app.ejs b/app/app.ejs index e77f0507..647d42c7 100644 --- a/app/app.ejs +++ b/app/app.ejs @@ -29,6 +29,7 @@ <%- include('frame') %>
<%- include('welcome') %> + <%- include('ouiheberg') %> <%- include('login') %> <%- include('waiting') %> <%- include('loginOptions') %> diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 963680f1..4b0637ec 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -363,6 +363,89 @@ body, button { align-items: center; } + +#ouihebergButton { + background: none; + font-weight: bold; + letter-spacing: 2px; + border: none; + padding: 15px 5px; + margin: 10px 0px; + cursor: pointer; + position: relative; + right: -20px; + transition: 0.5s ease; + margin-top: 5%; + margin-bottom: -5%; +} +#ouihebergButton:disabled { + color: rgba(255, 255, 255, 0.75); + pointer-events: none; +} +#ouihebergButton:hover, +#ouihebergButton:focus { + text-shadow: 0px 0px 20px #fff; + outline: none; +} +#ouihebergButton:active { + color: #c7c7c7; + text-shadow: 0px 0px 20px #c7c7c7; +} + +#ouihebergButtonContent { + display: flex; + align-items: center; +} + +#ouihebergContent { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 50%; + top: -10%; + position: relative; +} + +#ouihebergDescription { + text-align: justify; + font-size: 13px; + font-weight: 100; + text-shadow: rgba(255, 255, 255, 0.75) 0px 0px 20px +} + +#ouihebergHeader { + font-family: 'Avenir Medium'; + text-align: center; + color: white; + margin-bottom: 25px; + letter-spacing: 1px; + font-size: 20px; + text-shadow: white 0px 0px 0px; +} + +#ouihebergImageSeal { + border-radius: 50%; + border: 2px solid #cad7e1; + background: rgba(1, 2, 1, 0.5); + height: 125px; + width: 125px; + box-shadow: 0px 0px 10px 0px rgb(0, 0, 0); + margin-bottom: 5%; + margin-top: 10%; +} + +#testouiheberg { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + background: rgba(0, 0, 0, 0.50); +} + + /******************************************************************************* * * * Login View (login.ejs) * diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js index 5b5fd832..30c426ae 100644 --- a/app/assets/js/scripts/landing.js +++ b/app/assets/js/scripts/landing.js @@ -122,9 +122,9 @@ document.getElementById('avatarOverlay').onclick = (e) => { }) } -// Bind avatar overlay button. +// Bind ouiheberg overlay button. document.getElementById('ouiheberg').onclick = (e) => { - + switchView(getCurrentView(), VIEWS.testouiheberg) } // Bind selected account diff --git a/app/assets/js/scripts/ouiheberg.js b/app/assets/js/scripts/ouiheberg.js new file mode 100644 index 00000000..7ff7364b --- /dev/null +++ b/app/assets/js/scripts/ouiheberg.js @@ -0,0 +1,6 @@ +/** + * Script for ouiheberg.ejs + */ +document.getElementById('ouihebergButton').addEventListener('click', e => { + switchView(VIEWS.testouiheberg, VIEWS.landing) +}) \ No newline at end of file diff --git a/app/assets/js/scripts/uibinder.js b/app/assets/js/scripts/uibinder.js index 2013a7a3..7d65ee61 100644 --- a/app/assets/js/scripts/uibinder.js +++ b/app/assets/js/scripts/uibinder.js @@ -20,7 +20,8 @@ const VIEWS = { login: '#loginContainer', settings: '#settingsContainer', welcome: '#welcomeContainer', - waiting: '#waitingContainer' + waiting: '#waitingContainer', + testouiheberg: '#testouiheberg', } // The currently shown view container. diff --git a/app/ouiheberg.ejs b/app/ouiheberg.ejs new file mode 100644 index 00000000..df8558ba --- /dev/null +++ b/app/ouiheberg.ejs @@ -0,0 +1,15 @@ +