Dashboard

In this example below you will see how to do a Dashboard with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Drew Vosburg, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Drew Vosburg ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dashboard</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/css/swiper.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="table">
  <div class="table-cell">
    <div class="screen">
<div class="list-view">
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->

      <div class="swiper-slide">
        <div class="card">
          <div class="metadata">
            <div class="participants">Together</div>
            <div class="time">4 min</div>
          </div>
          <h2 class="card-title">Exercise title</h2>
          <p class="summary">Lorem ipsum</p>
          <a href="" class="button">Start</a>
        </div>

      </div>

      <div class="swiper-slide">
        <div class="card">
          <div class="metadata">
            <div class="participants">Together</div>
            <div class="time">4 min</div>
          </div>
          <h2 class="card-title">Exercise title</h2>
          <p class="summary">Lorem ipsum</p>
          <a href="" class="button">Start</a>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="card">
          <div class="metadata">
            <div class="participants">Together</div>
            <div class="time">4 min</div>
          </div>
          <h2 class="card-title">Exercise title</h2>
          <p class="summary">Lorem ipsum</p>
          <a href="" class="button">Start</a>
        </div>
      </div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
  </div>
  

      <div class="category-list">
        <h3>Communication</h3>
        <div class="list-card">
          <h4>Title</h4>
          <div class="metadata"><span class="participants">Individual</span> - <span class="time">5 min</span></div>
          <div class="summary">This is my custom summary</div>
          <div class="url"></div>
        </div>
        <div class="list-card">
          <h4>Title</h4>
          <div class="metadata"><span class="participants">Individual</span> - <span class="time">5 min</span></div>
        </div>
        <div class="list-card">
          <h4>Title</h4>
          <div class="metadata"><span class="participants">Individual</span> - <span class="time">5 min</span></div>
        </div>
      </div>
      <div class="category-list">
        <h3>Communication</h3>
        <div class="list-card">
          <h4>Title</h4>
          <div class="metadata"><span class="participants">Individual</span> - <span class="time">5 min</span></div>
        </div>
        <div class="list-card">
          <h4>Title</h4>
          <div class="metadata"><span class="participants">Individual</span> - <span class="time">5 min</span></div>
        </div>
        <div class="list-card">
          <h4>Title</h4>
          <div class="metadata"><span class="participants">Individual</span> - <span class="time">5 min</span></div>
        </div>
      </div>
      </div>
    <div id="modal">
      <div class="table">
        <div class="table-cell">
            <div class="card">
              <div class="metadata">
                <div class="participants">Together</div>
                <div class="time">4 min</div>
              </div>
              <h2 class="card-title">Exercise title</h2>
              <p class="summary">Lorem ipsum</p>
     <a href="" class="button">Start</a>
            </div>
      </div>
    </div>
  </div>
</div>
    
  </div>
      </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.jquery.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/drewvosburg/dashboard-oqxewo */
*, *:before, *:after {
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body, html {
  min-height: 100vh;
  background: #28334A;
}

.table {
  display: table;
  width: 100%;
  position: absolute;
  height: 100%;
}

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: auto;
  background: #1377FF;
  overflow: hidden;
}

.list-view {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
}

.button {
  width: 200px;
  background: #1DDEB6;
  color: #fff;
  margin: 0 auto;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  border: none;
  outline: none;
  line-height: 44px;
  text-transform: uppercase;
  position: absolute;
  display: block;
  text-align: center;
  text-decoration: none;
  bottom: 0;
  margin-bottom: 3rem;
  left: 50%;
  margin-left: -100px;
}

.swiper-container {
  width: calc(100% - 2rem);
  margin: 1rem;
  position: relative;
  overflow: visible;
}
.swiper-container img {
  width: 375px;
  display: block;
}
.swiper-container .swiper-pagination-bullet {
  background: #fff;
  border: 1px solid #fff;
  margin: 0 12px;
}
.swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #fff;
}
.swiper-container .swiper-slide {
  padding: 0.5rem;
}

#modal {
  position: absolute;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  top: 0;
  display: none;
}
#modal.visible {
  display: block;
}
#modal .table-cell {
  padding: 1rem;
}

.card {
  position: relative;
  width: 100%;
  color: #000;
  height: 400px;
  background: #fff;
  padding: 1rem;
  line-height: 1.5;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.card .metadata .time {
  float: right;
}
.card .metadata .participants {
  float: left;
}
.card .metadata:after {
  clear: both;
  content: '';
  display: block;
}

.category-list {
  padding: 1rem;
}
.category-list .list-card {
  padding: 1rem;
  background: #fff;
  padding-left: 5rem;
  margin-bottom: 1rem;
}
.category-list .list-card h4 {
  margin: 0;
  margin-bottom: 0.5rem;
}
.category-list .summary {
  display: none;
}

@media only screen and (min-width: 48rem) {
  .screen {
    width: 375px;
    height: 667px;
  }
}


/*Downloaded from https://www.codeseek.co/drewvosburg/dashboard-oqxewo */
// ----- On render -----
$(function(){
  var mySwiper = new Swiper ('.swiper-container');
  
  
  var showModal = function(title, participants, time, summary, url) {
    if (title) {
      $('#modal .card-title').text(title);
    } else {
      $('#modal .card-title').text('--');
    }
    if (participants) {
    $('#modal .participants').text(participants);
    } else {
      $('#modal .participants').text('--');
    }
    if (time) {
    $('#modal .time').text(time);
    } else {
      $('#modal .time').text('--');
    }
    if (summary) {
    $('#modal .summary').text(summary);
    } else {
      $('#modal .summary').text('--');
    }
    if (url) {
      $('#modal a').attr("href", url);
    } else {
      $('#modal a').attr("href", '');
    }
  }
  
  $('.list-card').click(function(){
    var title = $(this).find('h4').text();
    var participants = $(this).find('.participants').text();
    var time = $(this).find('.time').text();
    var summary = $(this).find('.summary').text();
    var url = $(this).find('.url').text();
    
    showModal(title, participants, time, summary, url);
    
    $('#modal').addClass('visible')
  })
  $('#modal .card').click(function(e){
    e.preventDefault();
  })
  $('#modal').click(function(){
    $('#modal').removeClass('visible');
  })
});

Comments