bored.html

<title>...</title>
<header>
<h1>
<!-- Default Slider -->
<input class="mdl-slider mdl-js-slider" type="range"
  min="0" max="100" value="0" tabindex="0">
</h1>
</header>

<!-- MDL Progress Bar with Indeterminate Progress -->
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>

<!-- Simple list -->
<style>
.demo-list-item {
  width: 300px;
}
</style>

<ul class="demo-list-item mdl-list">
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <div class="mdl-spinner mdl-js-spinner is-active"></div>
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <div class="mdl-spinner mdl-js-spinner is-active"></div>
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <div class="mdl-spinner mdl-js-spinner is-active"></div>
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <div class="mdl-spinner mdl-js-spinner is-active"></div>
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <div class="mdl-spinner mdl-js-spinner is-active"></div>
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <div class="mdl-spinner mdl-js-spinner is-active"></div>
    </span>
  </li>
</ul>

<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
  <i class="material-icons">add</i>
</button>

<button>Ajtech3.github.io</button>

<h1>
<button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised" type="button">Random Number!</button>
<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
  <div class="mdl-snackbar__text"></div>
  <button class="mdl-snackbar__action" type="button"></button>
</div>
<script>
(function() {
  'use strict';
  window['counter'] = 0;
  var snackbarContainer = document.querySelector('#demo-toast-example');
  var showToastButton = document.querySelector('#demo-show-toast');
  showToastButton.addEventListener('click', function() {
    'use strict';
    var data = {message: 'Your Complimentary Number: # ' + ++counter};
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
  });
}());
</script>
</h1>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.blue_grey-light_blue.min.css" />
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>