SCSS
/* ============== BASE ============== */
html, body {
height: 100%;
}
body {
position: relative;
-webkit-font-smoothing: antialiased;
background-color: #ddd;
}
/* ============== VARIABLES ============== */
/* ============== COMPONENTS ============== */
.client {
height: 700px;
width: 1200px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: url(https://i.ytimg.com/vi/Z5NhSCBGT8o/maxresdefault.jpg) no-repeat center/cover;
font-family: "Open Sans", sans-serif;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
border-top: 2px solid #785a28;
}
#annie {
position: absolute;
top: 50%;
left: 60%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;
}
img.logo {
height: 50px;
}
.animation {
-webkit-box-flex: 10;
-ms-flex: 10;
flex: 10;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.animation__controls {
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 30px;
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.7), transparent);
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
font-size: 12px;
}
.animation__controls img.logo {
padding-right: 20px;
border-right: 1px solid #777;
}
.animation__reset {
padding: 0 20px;
-webkit-transform: rotate(75deg);
transform: rotate(75deg);
}
.animation__toggles {
height: 43px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.animation__toggles > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.animation__toggles label {
margin-left: 5px;
}
.login {
-webkit-box-flex: 2;
-ms-flex: 2;
flex: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 5px 15px;
background-color: #010a13;
border-left: 1px solid #797979;
}
.login__window-controls {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.login__window-controls > .btn {
color: #797979;
}
.login__window-controls > .btn:not(:first-child) {
padding-left: 30px;
}
.login img.logo {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin-top: 20px;
}
.login__forms {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.login__forms h4 {
text-transform: uppercase;
color: #797979;
font-family: "Georgia", sans-serif;
}
.login__forms label {
margin-bottom: 2px;
}
.login__forms .username,
.login__forms .password {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.login__forms .remember {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.login__forms .region {
margin-top: 20px;
}
.login__links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
margin-top: auto;
margin-bottom: 10px;
}
.login__links > a {
text-decoration: none;
color: #13a7bb;
font-size: 12px;
font-weight: 500;
margin-bottom: 6px;
}
.login__links > a:last-child {
margin-top: 5px;
color: #eed28b;
}
.login__links > a:hover {
color: #fefefe;
}
.login > span {
text-align: center;
font-family: "Georgia", sans-serif;
font-weight: 800;
font-size: 12px;
border-top: 1px solid #797979;
color: #797979;
padding: 10px 0 5px 0;
}
.btn {
color: #fff;
cursor: pointer;
}
.btn__notifications {
z-index: 2;
-ms-flex-item-align: start;
align-self: flex-start;
position: relative;
top: 30px;
left: 30px;
padding: 8px 15px;
background-color: teal;
border-radius: 50%;
}
.btn__notifications:after {
content: '';
height: 24px;
width: 26px;
border: 2px solid #fff;
border-radius: 50%;
position: absolute;
top: 3px;
left: 3px;
}
.btn__notifications:hover {
background-color: none;
background-image: -webkit-linear-gradient(bottom, rgba(212, 212, 212, 0.5), teal);
background-image: linear-gradient(to top, rgba(212, 212, 212, 0.5), teal);
}
.btn__reset {
padding: 13px 15px 14px 15px;
background-color: rgba(0, 10, 0, 0.2);
border-radius: 50%;
position: relative;
}
.btn__reset:after {
content: '';
height: 38px;
width: 38px;
position: absolute;
top: 4px;
left: 4px;
border: 2px solid #c4a361;
border-radius: 50%;
}
.btn__reset:hover {
background-color: none;
background-image: -webkit-linear-gradient(right, rgba(212, 212, 212, 0.5), rgba(0, 10, 0, 0.2));
background-image: linear-gradient(to left, rgba(212, 212, 212, 0.5), rgba(0, 10, 0, 0.2));
}
.btn__sign-in {
padding: 7.5px 0;
margin-top: auto;
text-align: center;
font-weight: bold;
font-family: "Georgia", sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #13a7bb;
background-color: #052b30;
border: 2px solid #13a7bb;
}
/* ============== SHAME/CLEANUP ============== */
* {
outline: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
cursor: pointer;
}
input[type="checkbox"] + label:hover {
color: #fefefe;
}
input[type="checkbox"] + label span {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 6px 0 0;
vertical-align: bottom;
border: 1px solid #c4a361;
background: #010a13;
}
input[type="checkbox"]:checked + label span {
background: -webkit-radial-gradient(ellipse, #daa520, #0f0f0f);
background: radial-gradient(ellipse, #daa520, #0f0f0f);
}
input[type="text"],
input[type="password"] {
width: calc(100% - 10px);
height: 30px;
margin: 5px 0;
padding-left: 10px;
font-size: 12px;
border: 1px solid #c4a361;
background-color: #101621;
color: #dcc790;
}
div.select {
border: 1px solid #c4a361;
background-color: #101621;
height: 30px;
margin: 5px 0;
}
select {
background: transparent;
border: none;
height: 30px;
width: 100%;
font-family: "Open Sans", sans-serif;
font-size: 12px;
color: #d2b986;
}
select option {
font-size: 12px;
background-color: #fff;
color: #000;
}
label {
color: #797979;
font-size: 12px;
}
JAVASCRIPT
const disableMusic = document.querySelector('#disable-music');
const disableAnimation = document.querySelector('#disable-animation');
const resetAnimation = document.querySelector('.btn__reset');
let grid = null;
let player;
disableMusic.addEventListener('click', mutePlayer);
disableAnimation.addEventListener('click', disablePlayer);
resetAnimation.addEventListener('click', resetPlayer);
function onYouTubeIframeAPIReady() {
player = new YT.Player('annie', {
height: '700',
width: '1250',
videoId: 'HfJzT-TILjk',
playerVars: {
autoplay: 1,
controls: 0,
disablekb: 1,
fs: 0,
loop: 1,
playlist: "HfJzT-TILjk",
modestbranding: 1,
rel: 0,
showinfo: 0,
iv_load_policy: 3,
enablejsapi: 1,
frameborder: 0
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.playVideo();
grid = location.pathname.match(/fullcpgrid/i);
if (grid !== null) {
player.mute();
}
}
function mutePlayer() {
if (player.isMuted()) {
player.unMute();
} else {
player.mute();
}
}
function disablePlayer() {
if (player.getPlayerState() === 2) { // paused
resetPlayer();
player.playVideo();
} else if (player.getPlayerState() === 1) {
player.seekTo(15);
player.pauseVideo();
}
}
function resetPlayer() {
player.seekTo(0);
}
