Getting started

Cryptorio is modern, elegant Cryptocurrency Trading platform. Cryptorio is a fully featured platform that offers everything about a trading platform. It’s excellent UX will provide the best trading experience for traders. Cryptorio comes up with two best colour skins for more flexibility of interest. Cryptorio included almost every features that are necessary for traders. If you tend to open up a trading platform then The Cryptorio Trading Dashboard is all in one solution you need.

Introduction

Take A glimps of this project

Template name: Cryptorio – CryptocurrencyTrading Dashboard
Description: Cryptorio is modern, elegant Cryptocurrency Trading platform template
Created: 02 February 2019
Last Update: 0 days ago
Layout: Responsive

File Structure

Cryptorio comes with two versions - Dark and light. After downloding you can see those in main files.And also in each of them you will find below file structure

  1. amc
    • animated.js
    • charts.js
    • core.js
    • dark.js
  2. bootstrap
    • css
    • js
  3. css
    • icons.css
    • style.css
    • ui.css
  4. fonts
    • cryptofonts
    • pe-icon
  5. images
  6. js
    • amc.js - amchart used for depthchart
    • charts.js and Chart.min.js - to make beautiful charts
    • main.js - main js file
    • jquery.js
  7. exchange.html
  8. marketcap.html
  9. market-overview.html
  10. trading.html
  11. withdrawl.html

HTML Structure

Its like a normal HTML5 structure

Header Structures

Menu : It is placed on right side of the header:


  
    <ul class="crypt-heading-menu fright">
      <li><a href="exchange.html">Exchange</a></li>
      <li class="crypt-box-menu menu-green"><a href="">login</a></li>
    </ul>

Dropdown Currency:

  
    <div class="crypt-mega-dropdown-menu">
      <a href="" class="crypt-mega-dropdown-toggle">BTC/ETH <i class="pe-7s-angle-down-circle"></i></a>
      <div class="crypt-mega-dropdown-menu-block">
        <div class="crypt-market-status">
        <div>
          <!-- Nav tabs -->
            <ul class="nav nav-tabs">
              <li role="presentation"><a href="#usd"  class="active" data-toggle="tab">usd</a></li>
              <li role="presentation"><a href="#btc" data-toggle="tab">usd</a></li>
              <li role="presentation"><a href="#eth" data-toggle="tab">eth</a></li>
            </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="usd">
              <table class="table table-striped">
              <thead>
                <tr>
                  <th scope="col">Coin</th>
                  <th scope="col">Price</th>
                  <th scope="col">Volume</th>
                  <th scope="col">Change</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">BTC</th>
                  <td class="crypt-down">0.000056</td>
                  <td>5.3424984</td>
                  <td class="crypt-down"><b>-5.4%</b></td>
                </tr>
                <tr>
                  <th scope="row">LTC</th>
                  <td>0.0000564</td>
                  <td>6.6768876</td>
                  <td>-6.7%</td>
                </tr>
                <tr>
                  <th scope="row">ETH</th>
                  <td>0.0000234</td>
                  <td>4.3456600</td>
                  <td class="crypt-down">-5.6%</td>
                </tr>
                <tr>
                  <th scope="row">XMR</th>
                  <td>0.0000567</td>
                  <td>4.3456600</td>
                  <td>-5.6%</td>
                </tr>
              </tbody>
            </table>
            </div>
          </div>
        </div>
      </div>
      </div>
  </div>

Currency Profile - Located at middle

  
    <div class="crypt-gross-market-cap">
      <div class="row">
        <div class="d-inline pl-3 pr-4">
          <p>Last Price BTC</p>
          <p>0.0234230 $0.04</p>
        </div>
        <div class="d-inline pr-4">
          <p>Change BTC</p>
          <p class="crypt-down">-0.0234230 -3.35%</p>
        </div>
        <div class="d-inline pr-4">
          <p>High BTC</p>
          <p class="crypt-up">0.435453</p>
        </div>
        <div class="d-inline pr-4">
          <p>Low BTC</p>
          <p class="crypt-down">0.09945</p>
        </div>
        <div class="d-inline">
          <p>Volume 24Hr</p>
          <p class="crypt-down">12.33445</p>
        </div>
      </div>
    </div>

Charts Structures

Mainly 3 kinds fo charts are included in this template

  1. Candle Stick Charts

    This charts are taken from Tradingview.the id it is used for is crypt-candle-chart

    
  <div class="tradingview-widget-container mt-4 mb-3">
      <div id="crypt-candle-chart"></div>
  </div>
  2. Depth Charts

    It is created with amCharts.js

  3. Line Charts

    It is created with Charts.js

    
  <div
    class ="crypt-individual-marketcap"
    data-charts ="[65,59,81,81,56,55,40,80,90]" 
    data-bg = "fdddb7"
    data-border = "f8a036">
    <canvas />
  </div>
    • data-charts : Points in %
    • data-bg : Background Fill gradient color
    • data-border : Border color

Resources

There are mainly resources used is charts

  • Charts.js
  • Amcharts
  • TradingView

Changelog

Updated on 7th Feb 2019
Version: 1.0