XF 2.0 Complete guide about adding Custom pages in Xenforo 2

[Codeless]

Hello please can someone provide me a complete guide about adding custom page in xenforo 2.
i have some html codes which i want to display on forum via custom page
please write in details i am man with 20% coding knowledge
thank you

 

[Codeless]

i actully wan to include this code into my xenforo page

there is 2 files code

Index.php code (front end script which i want to display in xenforo )

<?php
require_once('includes/config.php'); // no need to include this into xenforo page
require_once('includes/class/main.class.php'); // no need to include this into xenforo page
require_once('includes/templates/header.php'); // no need to include this into xenforo page

$main = New Main();
?>

<div class="container">
<div class="index-title">
<i class="fa fa-cube" aria-hidden="true"></i>
<h1><?php echo  $site_config['website_name']; ?></h1>
<p>A fast, free bitcoin transaction accelerator</p>
</div>
  <div class="message alert alert-warning" style="display:none;"></div>
  <div class="form-group">
  <input type="text" name="txid" placeholder="Transaction ID..." id="txid" class="form-control input-lg">
</div>
<button class="btn btn-success btn-lg" onclick="sendTx($(this))">Accelerate Now</button>
<div class="what">
<h4>Speed up unconfirmed transactions</h4>
<p>Have low-fee transactions that have been unconfirmed for hours? We can speed up confirmation by rebroadcasting the transaction to the bitcoin network</p>
</div>
  </div>
<script>
    function sendTx(btn){
        var txid = $('#txid').val();
        if(txid.length != 64)
          $( "div.message" ).html('<p>The transaction ID is invalid!</p>').show();
        else {
            btn.attr('disabled','disabled'); btn.html('Loading...');
            $.get('send.php?tx=' + txid, function (data) {
                    response(data);
            });
        }
    }
    function response(data){
      var msg = JSON.parse(data);
        console.log(msg.success);
        if(msg.success == true) {
          var message = 'The transaction has been re-broadcast to the bitcoin network';
        } else {
          var message = 'Transaction has already been confirmed';
        }
        $( "div.message" ).html("<p>" + message + "</p>").show();
    }

</script>

2nd file send.php which pick data from index.php & submit using send.php

<?php
function getHex($txid) {
  return file_get_contents('https://blockchain.info/tx/' . $txid . '?format=hex');
}
function sendBroadcast($txid) {
$curl = curl_init();
curl_setopt_array($curl, array(
    CURLOPT_RETURNTRANSFER => 0,
    CURLOPT_URL => 'https://api.smartbit.com.au/v1/blockchain/pushtx',
    CURLOPT_USERAGENT => 'TXBroadcast',
    CURLOPT_POST => 1,
    CURLOPT_POSTFIELDS => json_encode(array(
        'hex' => getHex($txid)
    ))
));
$resp = curl_exec($curl);
curl_close($curl);
}
sendBroadcast($_GET['tx']);
?>

also there is some ccs available in header page but i don't want to include header . but i need css for buttons etc

footer is useless