From 3be51d27cacc3fde242badbedffd2ff83ee84bae Mon Sep 17 00:00:00 2001 From: luki39 Date: Tue, 1 Mar 2022 18:31:07 +0100 Subject: [PATCH] Revert "t" This reverts commit 71c56212e732e0d16b692d6e52cc2fe261cb588c. --- app/assets/css/launcher.css | 403 +++++++++++++++++++++++++++++++ app/assets/js/scripts/landing.js | 67 +++++ 2 files changed, 470 insertions(+) diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 762d1a65..963680f1 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -235,6 +235,43 @@ body, button { position: relative; } +/* +.cloudDiv { + position: absolute; + height: 100%; + width: 100%; + display: flex; + flex-direction: column; +} + +.cloudTop { + height: 50%; + width: 100%; + background-image: url('../images/cloudTrans.png'); + animation: clouds1 80s linear infinite; + background-size: cover; +} + +.cloudBottom { + height: 50%; + width: 100%; + background-image: url('../images/cloudTrans2.png'); + animation: clouds2 70s linear infinite; + background-size: cover; +} + +@keyframes clouds1 { + to { + background-position: 200%; + } +} +@keyframes clouds2 { + to { + background-position: 230%; + } +} +*/ + #welcomeImageSeal { border-radius: 50%; border: 2px solid #cad7e1; @@ -710,6 +747,30 @@ body, button { } } + + +/*.spinningCircle { + margin-left: 20px; + height: 16px; + width: 16px; + border-radius: 50%; + border: 2px solid rgba(255,255,255,0); + border-top-color: #ffffff; + border-right-color: #ffffff; + border-left-color: rgba(255, 255, 255, 0.50); + border-bottom-color: rgba(255, 255, 255, 0.50); + animation: single2 4s infinite linear; +} + +@keyframes single2 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(720deg); + } +}*/ + /* Disclaimer container. */ #loginDisclaimer { display: flex; @@ -799,6 +860,19 @@ body, button { transform: rotate(45deg); } +/* +#login_filter { + height: calc(100% - 22px); + width: 100%; + z-index: 9000; + position: absolute; + filter: blur(8px) contrast(0.9) brightness(1.0); + background: url('./../images/backgrounds/0.jpg') no-repeat center center fixed; + transform: scale(1.2); + background-size: cover; +} +*/ + /******************************************************************************* * * * Waiting View (waiting.ejs) * @@ -2450,6 +2524,325 @@ input:checked + .toggleSwitchSlider:before { display: inline-flex; } +/******************************************************************************* + * * + * Landing View (News Styles) * + * * + ******************************************************************************/ + +/* Main container. */ +#newsContainer { + position: absolute; + top: 100%; + height: 100%; + width: 100%; + transition: top 2s ease; + display: flex; + align-items: flex-end; + justify-content: center; +} + +/* News content container. */ +#newsContent { + height: 82vh; + width: 100%; + display: flex; + -webkit-user-select: initial; + position: relative; +} + +/* Drop shadow displayed when content is scrolled out of view. */ +#newsContent:before { + content: ''; + background: linear-gradient(rgba(0, 0, 0, 0.25), transparent); + width: 100%; + height: 5px; + position: absolute; + opacity: 0; + transition: opacity 0.25s ease; +} +#newsContent[scrolled]:before { + opacity: 1; +} + +/* News article status container (left). */ +#newsStatusContainer { + width: calc(30% - 60px); + height: calc(100% - 30px); + padding: 15px 15px 15px 45px; + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; +} + +/* News status content. */ +#newsStatusContent { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +/* News title wrapper. */ +#newsTitleContainer { + display: flex; + max-width: 90%; +} + +/* News article title styles. */ +#newsArticleTitle { + font-size: 18px; + font-weight: bold; + font-family: 'Avenir Medium'; + color: white; + text-decoration: none; + transition: 0.25s ease; + outline: none; + text-align: right; +} +#newsArticleTitle:hover, +#newsArticleTitle:focus { + text-shadow: 0px 0px 20px white; +} +#newsArticleTitle:active { + color: #c7c7c7; + text-shadow: 0px 0px 20px #c7c7c7; +} + +/* News meta container. */ +#newsMetaContainer { + display: flex; + flex-direction: column; +} + +/* Date and author wrappers. */ +#newsArticleDateWrapper, +#newsArticleAuthorWrapper { + display: flex; + justify-content: flex-end; +} + +/* Date and author shared styles. */ +#newsArticleDate, +#newsArticleAuthor { + display: inline-block; + font-size: 10px; + padding: 0px 5px; + font-weight: bold; + border-radius: 2px; +} + +/* Date styles. */ +#newsArticleDate { + background: white; + color: black; + margin-top: 5px; +} + +/* Author styles. */ +#newsArticleAuthor { + background: #a02d2a; +} + +/* News article comments styles. */ +#newsArticleComments { + margin-top: 5px; + display: inline-block; + font-size: 10px; + color: #ffffff; + text-decoration: none; + transition: 0.25s ease; + outline: none; + text-align: right; +} +#newsArticleComments:focus, +#newsArticleComments:hover { + color: #e0e0e0; +} +#newsArticleComments:active { + color: #c7c7c7; +} + +/* Article content container (right). */ +#newsArticleContainer { + width: calc(100% - 25px); + height: 100%; + margin: 0px 0px 0px 25px; +} + +/* Article content styles. */ +#newsArticleContentScrollable { + font-size: 12px; + overflow-y: scroll; + height: 100%; + padding: 0px 15px 0px 15px; +} +#newsArticleContentScrollable img, +#newsArticleContentScrollable iframe { + max-width: 95%; + display: block; + margin: 0 auto; +} +#newsArticleContentScrollable a { + color: rgba(202, 202, 202, 0.75); + transition: 0.25s ease; + outline: none; +} +#newsArticleContentScrollable a:hover, +#newsArticleContentScrollable a:focus { + color: rgba(255, 255, 255, 0.75); +} +#newsArticleContentScrollable a:active { + color: rgba(165, 165, 165, 0.75); +} +#newsArticleContentScrollable::-webkit-scrollbar { + width: 2px; +} +#newsArticleContentScrollable::-webkit-scrollbar-track { + display: none; +} +#newsArticleContentScrollable::-webkit-scrollbar-thumb { + border-radius: 10px; + box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50); +} +.bbCodeSpoilerButton { + background: none; + border: none; + outline: none; + cursor: pointer; + font-size: 16px; + transition: 0.25s ease; + width: 100%; + border-bottom: 1px solid white; + padding-bottom: 15px; +} +.bbCodeSpoilerButton:hover, +.bbCodeSpoilerButton:focus { + text-shadow: 0px 0px 20px #ffffff, 0px 0px 20px #ffffff, 0px 0px 20px #ffffff; +} +.bbCodeSpoilerButton:active { + color: #c7c7c7; + text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7; +} +.bbCodeSpoilerText { + display: none; + padding: 15px 0px; + border-bottom: 1px solid white; +} + + +#newsArticleContentWrapper { + width: 80%; +} + +.newsArticleSpacerTop { + height: 15px; +} + +/* Div to add spacing at the end of a news article. */ +.newsArticleSpacerBot { + height: 30px; +} + +/* News navigation container. */ +#newsNavigationContainer { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 10px; + -webkit-user-select: none; + position: absolute; + bottom: 15px; + right: 0px; +} + +/* Navigation status span. */ +#newsNavigationStatus { + font-size: 12px; + margin: 0px 15px; +} + +/* Left and right navigation button styles. */ +#newsNavigateLeft, +#newsNavigateRight { + background: none; + border: none; + outline: none; + height: 20px; + cursor: pointer; +} +#newsNavigateLeft:hover #newsNavigationLeftSVG, +#newsNavigateLeft:focus #newsNavigationLeftSVG, +#newsNavigateRight:hover #newsNavigationRightSVG, +#newsNavigateRight:focus #newsNavigationRightSVG { + -webkit-filter: drop-shadow(0px 0px 2px #fff); +} +#newsNavigateLeft:active #newsNavigationLeftSVG .arrowLine, +#newsNavigateRight:active #newsNavigationRightSVG .arrowLine { + stroke: #c7c7c7; +} +#newsNavigateLeft:active #newsNavigationLeftSVG, +#newsNavigateRight:active #newsNavigationRightSVG { + -webkit-filter: drop-shadow(0px 0px 2px #c7c7c7); +} +#newsNavigateLeft:disabled #newsNavigationLeftSVG .arrowLine, +#newsNavigateRight:disabled #newsNavigationRightSVG .arrowLine { + stroke: rgba(255, 255, 255, 0.75); +} +#newsNavigationLeftSVG { + transform: rotate(-90deg); + width: 15px; +} +#newsNavigationRightSVG { + transform: rotate(90deg); + width: 15px; +} + +/* News error (message) container. */ +#newsErrorContainer { + height: 100%; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; +} +#newsErrorFailed { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; +} + +/* News error content (message). */ +.newsErrorContent { + font-size: 20px; +} +#newsErrorLoading { + display: flex; + width: 168.92px; +} +#nELoadSpan { + white-space: pre; +} +/* News error retry button styles. */ +#newsErrorRetry { + font-size: 12px; + font-weight: bold; + cursor: pointer; + background: none; + border: none; + outline: none; + transition: 0.25s ease; +} +#newsErrorRetry:focus, +#newsErrorRetry:hover { + text-shadow: 0px 0px 20px white; +} +#newsErrorRetry:active { + color: #c7c7c7; + text-shadow: 0px 0px 20px #c7c7c7; +} + /******************************************************************************* * * * Landing View (Top Styles) * @@ -2460,6 +2853,16 @@ input:checked + .toggleSwitchSlider:before { * Landing View (Top Styles) | Left Content * * */ +/* Logo image. */ +#image_seal { + height: 70px; + width: auto; + position: relative; + border: 2px solid white; + box-sizing: border-box; + border-radius: 50%; +} + /* Logo container styles. */ #image_seal_container { position: relative; diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js index b784beba..5b5fd832 100644 --- a/app/assets/js/scripts/landing.js +++ b/app/assets/js/scripts/landing.js @@ -681,6 +681,73 @@ function dlAsync(login = true){ }) } +/** + * News Loading Functions + */ + +// DOM Cache +const newsContent = document.getElementById('newsContent') +const newsArticleTitle = document.getElementById('newsArticleTitle') +const newsArticleDate = document.getElementById('newsArticleDate') +const newsArticleAuthor = document.getElementById('newsArticleAuthor') +const newsArticleComments = document.getElementById('newsArticleComments') +const newsNavigationStatus = document.getElementById('newsNavigationStatus') +const newsArticleContentScrollable = document.getElementById('newsArticleContentScrollable') +const nELoadSpan = document.getElementById('nELoadSpan') + +// News slide caches. +let newsActive = false +let newsGlideCount = 0 + +/** + * Show the news UI via a slide animation. + * + * @param {boolean} up True to slide up, otherwise false. + */ +function slide_(up){ + const lCUpper = document.querySelector('#landingContainer > #upper') + const lCLLeft = document.querySelector('#landingContainer > #lower > #left') + const lCLCenter = document.querySelector('#landingContainer > #lower > #center') + const lCLRight = document.querySelector('#landingContainer > #lower > #right') + const newsBtn = document.querySelector('#landingContainer > #lower > #center #content') + const landingContainer = document.getElementById('landingContainer') + const newsContainer = document.querySelector('#landingContainer > #newsContainer') + + newsGlideCount++ + + if(up){ + lCUpper.style.top = '-200vh' + lCLLeft.style.top = '-200vh' + lCLCenter.style.top = '-200vh' + lCLRight.style.top = '-200vh' + newsBtn.style.top = '130vh' + newsContainer.style.top = '0px' + //date.toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric'}) + //landingContainer.style.background = 'rgba(29, 29, 29, 0.55)' + landingContainer.style.background = 'rgba(0, 0, 0, 0.50)' + setTimeout(() => { + if(newsGlideCount === 1){ + lCLCenter.style.transition = 'none' + newsBtn.style.transition = 'none' + } + newsGlideCount-- + }, 2000) + } else { + setTimeout(() => { + newsGlideCount-- + }, 2000) + landingContainer.style.background = null + lCLCenter.style.transition = null + newsBtn.style.transition = null + newsContainer.style.top = '100%' + lCUpper.style.top = '0px' + lCLLeft.style.top = '0px' + lCLCenter.style.top = '0px' + lCLRight.style.top = '0px' + newsBtn.style.top = '10px' + } +} + /** * Add keyboard controls to the news UI. Left and right arrows toggle * between articles. If you are on the landing page, the up arrow will