<div class="main-container">
  <div class="left-sidebar">
    <div class="inner">
      <div class="user-profile">
        <div class="user-background"></div>
        <div class="user-image">
          <img src="https://gravatar.com/avatar/de84db04b0c7b43efdc840391ffe56ff">
        </div>
        <div class="user-info">
          <p class="user-name">Daniela Desira</p>
          <p class="user-title">Front End Developer</p>
          <p class="user-location">
            <i class="icon ion-md-locate"></i> Malta
          </p>
        </div>
      </div>
      <div class="main-menu"></div>
      <div class="social-links">
        <a href="#"><i class="icon ion-logo-facebook"></i></a>
        <a href="#"><i class="icon ion-logo-twitter"></i></a>
        <a href="#"><i class="icon ion-logo-instagram"></i></a>
      </div>
    </div>
    <div class="toggle-button"><i class="icon ion-md-arrow-dropleft"></i></div>
  </div>
  <div class="main-content">
    
    <div class="modal music-player">
      <div class="heading"> 
        <h3>Daily UI #009</h3> 
        <h2>Music Player</h2>
      </div>
      <div class="audio-player-large">
        <div class="audio-image">
          <div class="artist-name">Imagine Dragons</div>
          <div class="song-title">Thunder</div>
        </div>
        <div class="audio-slider">
          <div class="slider"></div>
        </div>
        <div class="audio-buttons">
          <div class="previous-btn"><i class="icon ion-md-skip-backward"></i></div>
          <div class="pause-btn"><i class="icon ion-md-pause"></i></div>
          <div class="next-btn"><i class="icon ion-md-skip-forward"></i></div>
        </div>
      </div>
      <div class="audio-player-small">
        <div class="audio-background"></div>
        <div class="audio-image"></div>
        <div class="audio-info">
          <div class="audio-text">Now Playing</div>
          <div class="song-title">Thunder - Imagine Dragons</div>
        </div>
        <div class="audio-buttons">
          <div class="pause-btn"><i class="icon ion-md-pause"></i></div>
          <div class="next-btn"><i class="icon ion-md-skip-forward"></i></div>
        </div>
      </div>
    </div>
    <div class="modal timer-display">
      <div class="heading"> 
        <h3>Daily UI #014</h3> 
        <h2>Countdown Timer</h2>
      </div>
      <div class="countdown-timer-large">
        <div class="animatedBackground"></div>
        <div class="info">
          <div class="header">
            <h2>Stay Tuned</h2>
          </div>
          <div class="countdown">
            <div>
              <p>169</p>
              <p>days</p>
            </div>
            <div>
              <p>10</p>
              <p>hours</p>
            </div>
            <div>
              <p>31</p>
              <p>minutes</p>
            </div>
            <div>
              <p>01</p>
              <p>seconds</p>
            </div>
          </div>
        </div>
      </div>
      <div class="countdown-timer-small">
        <div class="backgroundImage"></div>
        <div class="countdown">
            <div>
              <p>169</p>
              <p>days</p>
            </div>
            <div>
              <p>10</p>
              <p>hours</p>
            </div>
            <div>
              <p>31</p>
              <p>minutes</p>
            </div>
            <div>
              <p>01</p>
              <p>seconds</p>
            </div>
          </div>
        <div class="animated-clock-face"></div>
      </div>
    </div>
    
    <div class="direct-messaging minimize">
      <div class="header-container">
        <div>
          <img src="https://gravatar.com/avatar/de84db04b0c7b43efdc840391ffe56ff">
        </div>
        <div class="header-user">
          <span>Dani</span>
          <span class="online"></span>
        </div>
        <div class="close-chat-btn"><i class="icon ion-ios-arrow-down"></i></div>
        
      </div>
      <div class="message-container">
        <div class="msg received">
          <p><span class="time">10:50pm</span></p>
          <p class="text">Hi!</p>
        </div>
        <div class="msg received">
          <p class="text">How are you today?</p>
        </div>
        <div class="msg sent">
          <p class="time">10:51pm</p>
          <p class="text">Hi Daniela, doing good thanks, yourself?</p>
        </div>
      </div>
      <div class="send-container">
        <input class="type-message" placeholder="Your message ..."></input>
        <div class="send-btn"><i class="icon ion-md-send"></i></div>
      </div>
    </div>
    
  </div>
  <div class="right-sidebar">
    <div class="btn open-music-btn"><i class="icon ion-md-musical-notes"></i></div>
    <div class="btn open-timer-btn"><i class="icon ion-md-timer"></i></div>
    <div class="btn open-chat-btn"><i class="icon ion-md-chatbubbles"></i></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Maven+Pro|Oswald');
$border-color: #1a233d;
$animation-duration: 0.5s;

* {
  box-sizing: border-box;
}

body {
  background: #0a1022;
  padding: 0;
  margin: 0;
  color: #fff;#
  overflow: hidden;
  font-family: "Maven Pro";
}

.main-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
  
  .left-sidebar {
    flex-grow: 2;
    max-width: 320px;
    border-right: 1px solid $border-color;
    position: relative;
    transition: all $animation-duration;
    box-shadow: 2px 0px 5px #03050a;
    //background: #0e121f;
    
    .inner {
      display: flex;
      flex-direction: column;
      height: 100%;
      
      .user-profile {
        flex-grow: 2;
        max-height: 345px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all $animation-duration;
        border: $border-color;
        position: relative;
        overflow: hidden;
        
        .user-background {
          position: absolute;
          background: url('https://gravatar.com/avatar/de84db04b0c7b43efdc840391ffe56ff');
          background-size: cover;
          width: 100%;
          height: 100%;
          filter: blur(25px);
          z-index: -1;
          
          &::after {
            display: block;
            position: relative;
            background-image: linear-gradient(to bottom, rgba(23, 32, 61, 0.3) 0, #0a1022 95%);
            height: 100%;
            width: 100%;
            content: '';
          }
        }
        
        .user-image {
          margin: 50px 0 25px 0;
          border-color: $border-color;
          transition: all $animation-duration;
          img {
            width: 90px;
            border-radius: 50%;
            border: 6px solid rgba(255, 255, 255, 0.1);
            transition: all $animation-duration;
          }
        }
        
        .user-info {
          text-align: center;
          
          .user-name {
            font-family: 'Oswald';
            font-weight: 400;
            text-transform: uppercase;
          }
          
          .user-location {
            color: #D1D3DA;
            i::before {
              transform: rotate(180deg);
              color: #556798;
            }
          }
        }
      }
      
      .main-menu {
        flex-grow: 5;
      }
      
      .social-links {
        flex-grow: 1;
        max-height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        
        a {
          padding: 0 10px;
          color: #fff;
          font-size: 1.3rem;
        }
      }
    }
    
    &.minimize {
       max-width: 100px;
      
      .inner {
        .user-profile {
          border-bottom: 1px solid #1a233d;
          max-height: 130px;
          
          .user-image {
            margin: 25px 0;
            img {
              width: 75px;
            }
          }
        .user-info {
          height: 0px;
          transition-delay: 0s;
          animation: animate-sidebar-text $animation-duration;
        }
       }
        
        .social-links {
          max-height: 200px;
          flex-direction: column;
          a {
            padding: 10px 0;
          }
        }
      }
      
      .toggle-button i::before {
        transform: rotate(180deg);
      }
    }
  }
  
  .main-content {
    flex-grow: 10;
    display: flex;
    justify-content: center;
    
    > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;

      /*> div {
        margin-bottom: 20px;
      }*/
    }
    
    .modal {
      border: 1px solid $border-color;
      padding: 0 20px;
      width: 50%;
      border-radius: 25px;
      display: none;
      
      &.show {
        display: inherit;
      }
      
      .heading {
        h2 {
          font-size: 1.3rem;
          padding: 10px 0;
          letter-spacing: 0.1rem;
          font-weight: 400;
        }
        h3 {
          letter-spacing: -0.03rem;
          font-family: 'Oswald';
          font-weight: 400;
          text-transform: uppercase;
        }
      }
    }
  }
    
  .right-sidebar {
    flex-grow: 1;
    max-width: 100px;
    border-left: 1px solid $border-color;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
    .btn {
      border-top: 1px solid $border-color;
      height: 50px;
      line-height: 50px;
      width: 100%;
      text-align: center;
      cursor: pointer;
      
      &:hover {
        background: $border-color;
      }
    }
  }
}

.toggle-button {
  position: absolute;
  top: 50%;
  left: 100%;
  border: 1px solid #1a233d;
  width: 25px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border-radius: 0 50% 50% 0;
  cursor: pointer;
  transform: translate(0, -50%);
  box-shadow: 2px 0px 5px #03050a;
  background: #0a1022;
  z-index: 1;
  
   &:hover {
    background: $border-color;
   }
  
  i::before {
    transition: all $animation-duration / 2;
  }
}

@keyframes animate-sidebar-text {
  0% {}
  100% { opacity: 0; margin-top: -5px;}
}


.main-content {
  padding: 50px;
  position: relative;
}

/* MUSIC PLAYER */
.audio-player-large {
  background: #101734;
  width: 250px;
  height: 305px;
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  margin-bottom: 20px;
  
  .audio-image {
    width: 100%;
    height: 250px;
    background: url('https://www.atelevisao.com/wp-content/uploads/2018/02/Imagine-Dragons-642x556.jpg') center center;
    background-size: cover;
    padding: 20px;
    text-transform: uppercase;
    
    .artist-name {
      letter-spacing: -0.03rem;
    }
   
    .song-title {
      font-size: 1.3rem;
      padding: 10px 0;
      border-bottom: 1px solid #fff;
      border-radius: 2px;
      letter-spacing: 0.1rem;
    }
  }
  
  .audio-slider {
    width: 100%;
    height: 5px;
    background: #101734;
    .slider {
      background: #2f8fff;
      width: 25%;
      height: 100%;
    }
  }
  
  .audio-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-top: 1px solid $border-color;
    
    > div {
      flex-grow: 1;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      
      &:hover {
        background: $border-color;
        box-shadow: inset 0px 0px 5px #03050a;
      }
      
      &:nth-child(2) {
        border-left: 1px solid $border-color;
        border-right: 1px solid $border-color;
      }
    }
  }
}

.audio-player-small {
  //background: #101734;
  width: 500px;
  border-radius: 10px;
  overflow: hidden;
  height: 100px;
  display: flex;
  align-items: center;
  padding: 10px;
  position: relative;
  text-align: left;
  margin-bottom: 20px;
  
  .audio-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url('https://www.atelevisao.com/wp-content/uploads/2018/02/Imagine-Dragons-642x556.jpg') center center;
    z-index: -1;
    
    &::after {
     display: block;
     position: relative;
     background-image: linear-gradient(to right, rgba(23, 32, 61, 0.3) 0, #101734 60%);
     height: 100%;
     width: 100%;
     content: '';
  }
  } 
  .audio-image {
    width: 75px;
    height: 75px;
    margin: 0 10px;
    background: url('https://www.atelevisao.com/wp-content/uploads/2018/02/Imagine-Dragons-642x556.jpg') center center;
    background-size: cover;
    border-radius: 50%;
    
    &::before {
      content: '';
      border: 2px solid #0d162d;
      border-top: 2px solid #2f8fff;
      border-radius: 50%;
      width: 75px;
      height: 75px;
      display: block;
      position: relative;
      transform: rotate(40deg);
    }
  }
  
  .audio-info { 
    margin: 0 10px;
    flex-grow: 2;
    
    .audio-text {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: -0.03rem;
    }
    
    .song-title {
      font-size: 1.3rem;
      padding: 5px 0;
      letter-spacing: 0.1rem;
    }
    
    .audio-slider {
      width: 100%;
      height: 5px;
      background: #0d162d;
      margin-top: 10px;
      .slider {
        background: #2f8fff;
        width: 25%;
        height: 100%;
      }
    } 
  }
  
  .audio-buttons {
    display: flex;
    align-items: center;
    height: 100%;
    
    > div {
      margin: 0 10px;
    }
  }
}

/* DIRECT MESSAGING */
.direct-messaging {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 250px;
  height: 350px;
  background: black;
  margin: 0!important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  background: linear-gradient(to bottom, #080d1d 0%, #1a233d 100%);
  box-shadow: 2px 0px 5px #03050a;
  /*border: 1px solid $border-color;*/
  transition: all $animation-duration;
  
  &.minimize {
    bottom: -350px;
  }
  
  .header-container {
    display: flex;
    flex-grow: 1;
    background: #080d1d;
    max-height: 50px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    
    > div {
      flex-grow: 1;
      padding: 0 5px;
    }
    
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-left: 5px;
    }
    
    .header-user {
      display: flex;
      align-items: center;
      justify-content: center;
      
      .online {
        padding: 5px;
        border-radius: 50%;
        background: green;
        margin-left: 10px;
        height: 5px;
      }
    }
    
    .close-chat-btn {
      line-height: 50px;
      text-align: center;
      cursor: pointer;

      &:hover {
        background: #1a233d;
      }
    }
    
  }
  
  .message-container {
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    padding: 5px 10px;
    overflow-y: scroll;
    max-height: 250px;
    
    &::-webkit-scrollbar {
      width: 0px;  /* remove scrollbar space */
      background: transparent;  /* optional: just make scrollbar invisible */
  }
    
    .msg {
      font-size: 0.8rem;
      max-width: 90%;
      display: flex;
      flex-direction: column;
      p {
        margin: 0.5rem 0;
      }

      .text {
        border-radius: 10px;
        padding: 5px 10px;
        margin-bottom: 5px;
        line-height: 1.2rem;
      }
      .time {
        font-size: 0.6rem;
        color: #868686;
      }

      &.received {
        align-self: flex-start;
        .text {
          background: #c2448a;
        }
      }
      
      &.sent {
        text-align: right;
        align-self: flex-end;
        .text {
          background: #413c5e;
        }
      }
    }
  }
  
  .send-container {
    display: flex;
    flex-grow: 1;
    background: #080d1d;
    border-top: 1px solid #1a233d;
    padding: 0 5px;
    max-height: 50px;
    width: 100%;
    
    input {
      background: transparent;
      border: none;
      padding: 0 5px;
      flex-grow: 3;
      color: #fff;
      
      &:focus {
        outline: none;
      }
    }
    
    .send-btn {
      align-self: center;
      flex-grow: 1;
      text-align: center;
      padding: 0 5px;
      /*border: 1px solid #1a233d;*/
      background: #0c1225;
      height: 2rem;
      line-height: 2rem;
      border-radius: 50%;
      cursor: pointer;
      
      &:hover {
        background: #1a233d;
      }
      
      i::before {
        transform: rotate(-45deg);
      }
      
    }
  }
}

/* COUNTDOWN TIMER */
.countdown-timer-large {
  //background: linear-gradient(237deg, #626dff, #815efa, #b745ef, #ea9db0, #f58364);
  background: url('https://images.wallpapersden.com/image/wxl-desert-nights-moon-5k-minimalism_57965.jpg');
  background-size: cover;
  background-position: 50% 100%;
  width: 400px;
  height: 305px;
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  margin-bottom: 20px;
  position: relative;
  padding: 30px;
  
  display: flex;
  flex-direction: column;
  
  .info {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(72, 64, 111, 0.7), rgba(182, 92, 118, 0.5));
    //background-size: 1000% 1000%;
    //animation: animatedBackground 1s ease infinite;
    border-radius: 10px;
    box-shadow: 0px 0px 5px rgba(72, 64, 111, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    
    .header {
      padding-top: 10px;
      h2 {
        font-weight: 100;
        text-align: center;
        color: #cd6c6f;
        font-size: 2.5rem;
      }
    }
    .countdown {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      width: 100%;
      
      > div {
        flex-grow: 1;
        text-align: center;
        
        p {
          margin: 0;
          color: $border-color;
          font-family: 'Oswald';
          
          &:first-child {
            font-size: 2rem;
            line-height: 2rem;
            color: #fff;
          }
        }
      }
    }
  }
}

.countdown-timer-small {
  width: 500px;
  border-radius: 10px;
  overflow: hidden;
  height: 100px;
  display: flex;
  align-items: center;
  padding: 10px;
  position: relative;
  text-align: left;
  margin-bottom: 20px;
  
  .backgroundImage {
     background: url('https://images.wallpapersden.com/image/wxl-desert-nights-moon-5k-minimalism_57965.jpg');
    background-size: cover;
    background-position: 100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    &::after {
      content: '';
      background: linear-gradient(45deg, rgba(182, 92, 118, 0.2), rgba(72, 64, 111, 1) 80%);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
    }
  }
  
  .countdown {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      width: 100%;
      
      > div {
        flex-grow: 1;
        border-left: 2px solid rgba(255, 255, 255, 0.1);;
        padding-left: 10px;
        
        p {
          margin: 0;
          color: $border-color;
          font-family: 'Oswald';
          text-transform: capitalize;
          
          &:first-child {
            font-size: 2rem;
            color: #fff;
            line-height: 2rem;
            //font-family:'Maven Pro';
          }
        }
      }
    }
  
  .animated-clock-face {
    background: url('https://pre00.deviantart.net/efbc/th/pre/i/2015/168/e/8/clock_face_9_by_stephenjohnsmith-d8xmnem.png');
    width: 200px;
    height: 200px;
    position: absolute;
    top: -50%;
    right: -28%;
    background-size: cover;
    transform-origin: 50% 50%;
    animation: animatedClock 30s infinite;
    transition-timing-function: linear;
   }
}

/*@keyframes animatedBackground {
  0%{background-position:0% 50%}
  50%{background-position:100% 51%}
  100%{background-position:0% 50%}
}*/

@keyframes animatedClock {
  0%{transform: rotate(0deg)}
  100%{transform: rotate(360deg)}
}

$('.toggle-button').on('click', function() {
  $('.left-sidebar').toggleClass('minimize'); 
});

$('.user-profile').on('click', function() {
  $('.left-sidebar').toggleClass('minimize'); 
});

$('.close-chat-btn').on('click', function() {
  $('.direct-messaging ').addClass('minimize'); 
});

$('.open-chat-btn').on('click', function() {
  $('.direct-messaging ').toggleClass('minimize'); 
});

$('.open-music-btn').on('click', function() {
  $('.music-player').toggleClass('show'); 
});

$('.open-timer-btn').on('click', function() {
  $('.timer-display').toggleClass('show'); 
});