<div class="container-fluid bg-grey">

  <div class="row">

    <div class="col-sm-8">

      <h2>A digital currency</h2>

      <p>

      Use cryptography.<br>

      No "central bank".<br>

      P2P network.<br>

      </p>

    </div>

    <div class="col-sm-4 align-middle">

       <img src="images/bitcoin.jpg" width="100%; height: auto"></img>

    </div>

  </div>

</div>

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-4 align-middle">

       <img src="images/wallet.png" height="300px"></img>

    </div>

    <div class="col-sm-8">

      <h2>WALLET</h2>

      <p>

      Use cryptography.<br>

      No "central bank".<br>

      P2P network.<br>

      </p>

    </div>

  </div>

</div>

<div class="container-fluid bg-grey">

  <div class="row">

    <div class="col-sm-8">

      <h2>Transaction</h2>

      <p>

When Bob is sending 42 <span class="glyphicon glyphicon-bitcoin"></span> to Alice, the bitcoin protocol is creating a transaction.<br> 

A transaction is the balance between his Inputs and his Outputs.

<ul>

  <li>First the network needs to be sure that Bob has got enough <span class="glyphicon glyphicon-bitcoin"></span> in his wallet.<br>So Bob will include a list of transactions that he has received before.<br>This is the inputs of the transactions.<br>For example, previous transaction's amount are 10, 25 and another 10, so total inputs are 45 <span class="glyphicon glyphicon-bitcoin"></span></li>

   <li>As the input's sum is superior to the amount of the transaction, an ouput is added.<br>This output is the change to Bob.<br>In the example, this 3 <span class="glyphicon glyphicon-bitcoin"></span></li>

  <li>Fees are took by the network to process the transaction.<br>Let say it will take 0.5<span class="glyphicon glyphicon-bitcoin"></span>.<br>This is another ouput</li>

  <li>So Alice will get only a part of the transaction's amount.<br>this the last output, 41.5<span class="glyphicon glyphicon-bitcoin"></span></li>

</ul>

So the transaction is a made with :

<ul>

  <li>Inputs : a list of previous transactions that bob has received</li>

  <li>Outputs : a list of amounts to send to Alice, Bob, and fees</li>

  <li>A timestamp</li>

</ul>

Then the wallet will broadcast the transaction on the network.<br>

It will be sent to the area called "mempool".<br>

Nodes of the network will validate the transaction by verfying the Inputs and the Ouputs.<br>

A hash of the transaction is computed.<br>

So the transaction is sealed.

      </p>

    </div>

    <div class="col-sm-4 align-middle">

       <img src="images/bob_to_alice.gif" width="100%; height: auto"></img>

    </div>

  </div>

</div>

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-4">

       <img src="images/tx2block.gif" width="100%; height: auto"></img>

    </div>

    <div class="col-sm-8">

      <h2>Block</h2>

      <p>

Then the bitcoin protocol is grouping validated transactions in blocks.<br>

So a block is an array of transactions.<br>

A block is made with :

<ul>

  <li>An array of transactions.<br>

That's what my script is drawing.<br>

Running the transactions array, it is computing the sum of each outputs of each transaction.<br>

Then, it draws a rectangle for each sum.<br>

  </li>

  <li>A "proof of work".<br>The miner is computing a special hash that depends on the array of transaction and that will answer to a constraint.<br>This hash is very difficult to compute. In fact it is not really computed, the miner must test every value until he find the solution.<br></li>

<li>That why the network will give him a reward.<br>This is a special transaction that has no inputs.</li>

</ul>

      </p>

    </div>

  </div>

</div>

<div class="container-fluid bg-grey">

  <div class="row">

    <div class="col-sm-8">

      <h2>Blockchain</h2>

      <p>

Each block has a hash and a reference to the ihash of the previous block.<br>

So blocks are chained together.<br>

      </p>

    </div>

    <div class="col-sm-4">

       <img src="/images/loading.gif" width="100%; height: auto"></img>

    </div>

  </div>

</div>