CodePen Embed - Reactive Dashboard

<div align="center">
  <p1>Any-UI</p1></p>
<p2>An interface for making custom dashboard UIs using many web apps</p2><hr></p>
<p3>Mouseover icons to unlock, continue mouseover to see handle, drag item to move,<br> drag handle to resize, double-click to stamp/unstamp (lock/unlock) apps</p3></p>
</div>
<div class="menubar"></div><br>
<div class="packery">
  <div class="item"> 
    <div class="grabber"></div>
    <div class="icon"> <img src="https://user-images.githubusercontent.com/5462382/34194692-9a517de4-e51f-11e7-8af9-46f9ea4cf555.png" style="max-width:70%; max-height:70%; align:center; margin-top: 15%"></img>
    </div>
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
    <!-- TradingView Widget BEGIN -->
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js">
    </script>
    <script type="text/javascript">
      new TradingView.widget({
        "autosize": true,
        "symbol": "COINBASE:BTCUSD",
        "interval": "D",
        "timezone": "Etc/UTC",
        "theme": "Dark",
        "style": "1",
        "locale": "uk",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": false,
        "withdateranges": true,
        "hide_side_toolbar": false,
        "allow_symbol_change": true,
        "watchlist": [
          "COINBASE:BTCUSD",
          "KRAKEN:ETHUSD",
          "BITFINEX:EOSUSD",
          "KRAKEN:LTCUSD"
        ],
        "details": true,
        "hotlist": true,
        "calendar": true,
        "news": [
          "stocktwits",
          "headlines"
        ],
        "studies": [
          "MAExp@tv-basicstudies",
          "Volume@tv-basicstudies"
        ],
        "show_popup_button": true,
        "popup_width": "1000",
        "popup_height": "650",
        "no_referral_id": true,
        "container_id": "tradingview_e04ad"
      });
    </script>
  </div>
  <div class="item">
    <div class="icon"><img src="https://cointelegraph.com/assets/img/logo.png" style="max-width:70%; max-height:70%; align:center; margin-top: 15%"></img>
    </div>

    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
    <iframe src="https://coin360.io/widget/map.html" title="Coin360.io: Cryptocurrency Market State" width="100%" height="100%" scrolling="no">}</iframe>
  </div>
  <div class="item">
    <div class="icon"><img src="https://www.freeiconspng.com/uploads/notepad-icon-31.png" style="max-width:70%; max-height:70%; align:center; margin-top: 15%"></img></div>
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
      
  </div>
  <div class="item">
    <div class="icon"><img src="https://image.flaticon.com/icons/svg/104/104068.svg" style="max-width:70%; max-height:70%; align:center; margin-top: 15%"></img></div>
    <iframe id="google_she" style="border: 0" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>
  <div class="item">
    <div class="icon"><img src="https://image.flaticon.com/icons/svg/104/104079.svg" style="max-width:70%; max-height:70%; align:center; margin-top: 20px"></img>
    </div>
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip">
</div>
    <iframe id="google_cal"  style="border: 0" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
  </div>
  <div class="item">
    <div class="icon"><img src="https://png.icons8.com/ios/1600/spotify.png" style="max-width:70%; max-height:70%; align:center; margin-top: 20px"></img></div>
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>
  <div class="item">
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>
  <div class="item">
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>
  <div class="item">
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>
  <div class="item">
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>
  <div class="item">
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>
  <div class="item">
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>
  <div class="item">
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>
  <div class="item">
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>
  <div class="item">
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>
  <div class="item">
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
    <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
    <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>
</div>

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
:root{
  --box-size: 200px;
  --theme: none;
  --theme-color-0: #001;
  --theme-color-1: #012;
  --theme-color-2: #023;
  --theme-color-3: #034;
  --theme-color-4: #045;
  --theme-color-5: #056;
}
body {
  font-family: monospace;
  background: #101010;
  color: #ffffff;
}

.inner {
  position: absolute;
  height: 100%;
  padding: 20px 10px 10px 20px;
  overflow: auto;
}
.menubar {
  background: #133;
  width: 100%;
  height: 50px;
  border-radius: 10px
}
.menu-item{
  
}
.packery {
  background: hsla(0, 0%, 100%, 0.04);
  max-width: 100%;
  max-height: 100%;
}

/* clearfix */
.packery:after {
  content: " ";
  display: block;
  clear: both;
}

.item {
  width: var(--box-size);
  height: var(--box-size);
  background: var(--theme-color-3);
  border-radius: 10px;
  -moz-box-shadow: inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow: inset 0 0 10px #000000;
  text-align: center;
  padding: 10px 10px 10px 10px;
}
.stampitem {
  width: var(--box-size);
  height: var(--box-size);
  background: #515161;
  border-radius: 0px;
  -moz-box-shadow: inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow: inset 0 0 10px #000000;
  text-align: center;
  padding: 5px 5px 5px 5px;
}
.ui-resizable-handle {
  visibility: hidden;
}

.item:hover .ui-resizable-handle {
  visibility: visible;
}

.item:nth-child(3n) {
  background: var(--theme-color-2);
}
.item:nth-child(4n) {
  background: var(--theme-color-0);
}
.item:nth-child(2n) {
  background: var(--theme-color-4);
}
.item:nth-child(5n) {
  background: var(--theme-color-3);
}

.item.ui-draggable-dragging,
.item.is-positioning-post-drag {
  border-color: white;
  z-index: 200;
}
/*resizable grips*/
#nwgrip,
#negrip,
#swgrip,
#segrip,
#ngrip,
#egrip,
#sgrip,
#wgrip {
  width: 15px;
  height: 15px;
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 0px solid #777777;
  z-index: 500;
}
#nwgrip {
  left: 0px;
  top: 0px;
}
#negrip {
  top: 0px;
  right: 0px;
}
#swgrip {
  bottom: 0px;
  left: 0px;
}
#segrip {
  bottom: 0px;
  right: 0px;
}
#ngrip {
  top: 0px;
  left: 15%;
  width: 70%;
}
#sgrip {
  bottom: 0px;
  left: 15%;
  width: 70%;
}
#wgrip {
  left: 0px;
  top: 15%;
  height: 70%;
}
#egrip {
  right: 0px;
  top: 15%;
  height: 70%;
}


.icon {
  position: absolute;
  height: var(--box-size);
  width: var(--box-size);
  background: hsla(0, 100%, 100%, 0.5);
  border-radius: 10px;
  margin: -10px;
  padding: 0;
  z-index: 400;
  transition: 0s 3600s;
}
.item:hover .icon {
  visibility: hidden;
  opacity: 0; 
  transition: visibility 0s 0.5s, opacity 0.5s linear;
}
.item:hover {
  background-color: var(--theme-color-5);
  z-index: 499;
}

p1 { font-size: 9vh; align: "center" }
p2 { font-size: 7vh; }
p3 { font-size: 5vh; }
p4 { font-size: 3vh; }

// ----------TOUCHPUNCH START----------//
!(function(a) {
  function f(a, b) {
    if (!(a.originalEvent.touches.length > 1)) {
      a.preventDefault();
      var c = a.originalEvent.changedTouches[0],
        d = document.createEvent("MouseEvents");
      d.initMouseEvent(
        b,
        !0,
        !0,
        window,
        1,
        c.screenX,
        c.screenY,
        c.clientX,
        c.clientY,
        !1,
        !1,
        !1,
        !1,
        0,
        null
      ),
        a.target.dispatchEvent(d);
    }
  }
  if (((a.support.touch = "ontouchend" in document), a.support.touch)) {
    var e,
      b = a.ui.mouse.prototype,
      c = b._mouseInit,
      d = b._mouseDestroy;
    (b._touchStart = function(a) {
      var b = this;
      !e &&
        b._mouseCapture(a.originalEvent.changedTouches[0]) &&
        ((e = !0),
        (b._touchMoved = !1),
        f(a, "mouseover"),
        f(a, "mousemove"),
        f(a, "mousedown"));
    }),
      (b._touchMove = function(a) {
        e && ((this._touchMoved = !0), f(a, "mousemove"));
      }),
      (b._touchEnd = function(a) {
        e &&
          (f(a, "mouseup"),
          f(a, "mouseout"),
          this._touchMoved || f(a, "click"),
          (e = !1));
      }),
      (b._mouseInit = function() {
        var b = this;
        b.element.bind({
          touchstart: a.proxy(b, "_touchStart"),
          touchmove: a.proxy(b, "_touchMove"),
          touchend: a.proxy(b, "_touchEnd")
        }),
          c.call(b);
      }),
      (b._mouseDestroy = function() {
        var b = this;
        b.element.unbind({
          touchstart: a.proxy(b, "_touchStart"),
          touchmove: a.proxy(b, "_touchMove"),
          touchend: a.proxy(b, "_touchEnd")
        }),
          d.call(b);
      });
  }
})(jQuery);
// ----------TOUCHPUNCH END------------//

var $itemElems;
var $container;
var dragTimeout;

var grid_width = 200;
var grid_height = 200;

//Packery setup
$(function() {
  $container = $(".packery");
  $container.packery({
    rowHeight: grid_height,
    columnHeight: grid_width,
    gutter: 2
  });
  // get item elements, jQuery-ify them
  $itemElems = $($container.packery("getItemElements"));
  // make item elements draggable
  $itemElems
    .draggable({
      grid: [200, 200],
      start: function(event, ui) {
        if (!$(event.target).hasClass("item")) return false;
      },
      cancel: ".stampitem",
      stop: function(event, ui) {
        if (dragTimeout) {
          clearTimeout(dragTimeout);
        }
        dragTimeout = setTimeout(function() {
          $container.packery();
        }, 500);
      }
    })
    .resizable({
      grid: [220, 220],
      handles: { 
        nw: "#nwgrip",
        ne: "#negrip",
        sw: "#swgrip",
        se: "#segrip",
        n: "#ngrip",
        e: "#egrip",
        s: "#sgrip",
        w: "#wgrip"
      },
      start: function(event, ui) {
        if ($(event.target).hasClass("item")) {
          $(event.target).css("z-index", 1000);
        }
      },
      resize: function(event, ui) {
        $container.packery(
          "fit",
          event.target,
          ui.position.left,
          ui.position.top
        );
      },
      cancel: ".stampitem",
      stop: function(event, ui) {
        $(event.target).css("z-index", "auto");
        $container.packery();
      },
      maxWidth: 1800, 
      refreshPositions: true
    });
  // bind Draggable events to Packery
  $container.packery("bindUIDraggableEvents", $itemElems);

  $itemElems.on("dblclick", function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.hasClass("item")) {
      $($target)
        .addClass("stampitem")
        .removeClass("item ui-draggable ui-resizable");
      $container.packery("stamp", event.target);
    } else {
      $($target)
        .addClass("item ui-draggable ui-resizable")
        .removeClass("stampitem");
      $container.packery("unstamp", event.target);
    }
  });

  $itemElems.not(".item").on("dragstart", function(event) {
    return false;
  });

  $(".ui-resizable-handle").on("dblclick", function(event) {
return false;
  });
});

//---------Iframe source load on mouseover
//implemented to increase page load time
$('#google_cal').one('mouseover', function(event){
  $(this).attr("src", "https://stats.buybitcoinworldwide.com/stock-to-flow/ ");
    console.log($(this).closest("#google_cal").id)
    $(this).unbind(event);
 });

 $('#google_she').one('mouseover', function(event){
   $(this).attr("src", "https://docs.google.com/spreadsheets/d/e/2PACX-1vSGufNvmKuTIxuSo6eWUO4gQC8Jirk5h-552NAddpe8e4zQ4hGHGFqB5176K0pizq2PKUNMra7J1b2c/pubhtml?widget=true&amp;headers=false" );
   $(this).unbind(event);
 });

This Pen is owned by Boe Jaker on CodePen. It is a fork of this Pen.

See more by @boejaker on CodePen

External CSS

//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

External CSS

External JavaScript