maQdRo

index.html

<div class=" navbar-fixed">
  <nav>
    <div class="orange nav-wrapper">
      <span class="brand-logo">InfiniteBoard</span>
    </div>
  </nav>
</div>
<main class="m5">

  </main>
<div class="fixed-action-btn">
  <a class="btn-floating btn-large red waves-effect">
    <i class="large material-icons">add</i>
  </a>
</div>

maqdro.markdown

maQdRo

A Pen by easrng on CodePen.

License.

script.js

window.maxid=0;
window.board=function board(name,url){
  window.maxid++
  var id="element"+window.maxid;
  var code='<div id="'+id+'" class="file waves-effect card-panel yellow ">\n<div class="card-image">\n<img src="https://i.ibb.co/YckZYf1/09220635-CC46-4195-A7-EE-D96-D62-D18-A38.png">\n</div>\n<div class="card-action card-title">'+name+'\n</div>\n</div>';
  document.querySelector("main").innerHTML+=code;
  document.querySelector("#"+id).onclick=function (){window.open(this.url)}.bind({url:url})
  }
window.onload=function () {
  console.log("hello")
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, options);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

style.css

main{
  padding:10px;
}
.file{
  margin:10px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet" />