Blockchain ui

blockchain-ui.markdown

Blockchain ui

simple UI for blockchain project github.com/nabildroid/blockchain

A Pen by FeliciaAnnKelleyTaylorGV on CodePen.

License.

index.html

<h1 id="title">BlockChain</h1>
<div id="app">
  <div id="main">
    <div id="add">
      <h3>add new Block</h3>
      <form>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>Add!</button>
      </form>
    </div>
    <div id="status">
      <div>
        <b>status</b>
        <p>connected</p>
      </div>
      <div>
        <b>peers</b>
        <p>10</p>
      </div>
    </div>
  </div>
  <div id="blockchain">
    <h2>blockchain</h2>
    <div id="items">
      <div class="item">
        <div class="info">
          <p>15</p>
          <p>8877779797</p>
          <p><b>Valide</b></p>
        </div>
        <pre>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi, voluptatibus optio laboru</pre>
        <h4>tetfytdftdyzefyzeyfzyfzf</h4>
      </div>
      <div class="item">
        <div class="info">
          <p>15</p>
          <p>8877779797</p>
          <p><b>Valide</b></p>
        </div>
        <pre>
          Lorem ipsum dolor sit amet
          consectetur adipisicing elit.
          Consectetur laudantium debitis 
          nesciunt mollitia, odio quaerat ut
         </pre>
        <h4>tetfytdftdyzefyzeyfzyfzf</h4>
      </div>
      <div class="item">
        <div class="info">
          <p>15</p>
          <p>8877779797</p>
          <p><b>Valide</b></p>
        </div>
        <pre>
          Lorem ipsum dolor sit amet
          consectetur adipisicing elit.
          Consectetur laudantium debitis 
          nesciunt mollitia, odio quaerat ut
         </pre>
        <h4>tetfytdftdyzefyzeyfzyfzf</h4>
      </div>
      <div class="item">
        <div class="info">
          <p>15</p>
          <p>8877779797</p>
          <p><b>Valide</b></p>
        </div>
        <pre>
          Lorem ipsum dolor sit amet
          consectetur adipisicing elit.
          Consectetur laudantium debitis 
          nesciunt mollitia, odio quaerat ut
         </pre>
        <h4>tetfytdftdyzefyzeyfzyfzf</h4>
      </div>
    </div>
    <button>Push</button>
  </div>
</div>

style.sass

*{
  margin:0;
  padding:0;
  font-family:sans-serif
}

body{
  background-color:#EACDC2;
  text-align:center;
  color:#1A1423;
}
#title{
  line-height:2;
  color:#372549;
}
#app{
  width:80%;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  text-align:left;
  flex-wrap:wrap;
}
#app > *{
  max-height:80vh;
  overflow:hidden;
  min-width:350px;
}
#app #main{
  
  flex:0.5;
  display:flex;
  flex-direction:column;
  justify-content:center
}
#app #blockchain{
  flex:0.4;
  overflow-y:auto;
  position:relative;
}

#app #add form{
  display:flex;
  flex-direction: column;
  background:#774C60;
  border-radius:5px;
  padding:5px;
  margin-top:10px;
  margin-bottom:2em;
}
#app #add form textarea{
  background:#86566c;
  border:none;
  padding:8px;
  font-family:monospace;
  color:#EACDC2;
  font-weight:bold
}
#app #add form button{
  background:#372549;
  border:none;
  color:#fff;
  font-size:18px;
  padding: 5px 0;
}
#app #main #status {
  display:flex;
  justify-content:space-around;
  background:#EAE8CE;
  border-radius:5px;
  border:1px solid #C6C4AF;
  font-family:monospace;
}
#app #main #status div{
  display:flex;
  padding:8px 0;
}
#app #main #status div *{
  font-family:monospace;
  font-size:15px;
}
#app #main #status div b{
  margin-right:5px;
}


#app #blockchain h2{
  margin-bottom:10px;
}
#app #blockchain .item{
  background:#372549;
  margin:5px 0;
  padding:5px;
  border-radius:2px;
  color:#ddd;
}
#app #blockchain .item .info{
  display:flex;
  justify-content:space-between;
  color:#B75D69;
}
#app #blockchain .item pre{
  margin: 5px 8px;
  overflow: hidden;
    word-break: break-word;
    white-space: normal;
}
#app #blockchain .item h4{
  font-family:monospace;
  text-align:center;
}
#app #blockchain > button{
  position:fixed;
  bottom:10vh;
  right:15%;
  padding:5px;
  background:#90CDF4;
  border:none;
  color:#1A1423;
  font-weight:bold;
  font-size:20px;
  border-radius:2px;
  box-shadow:1px 1px 8px 1px #333;
  
  
}