<?php include('header.php');?>


<section class="nfts-sec-details">
  <div class="container">
    <div class="row">
         <div class="col-sm-5">
            <div class="">
               <div class="videowidth">
                  <video muted="" loop="" preload="" width="100%">
                     <source src="assets\vedio\1.mp4" type="video/mp4">
                     <source src="12.webm" type="video/webm">
                  </video>
               </div>
            </div>
            <br>
         </div>
         <div class="col-sm-7">
            <div class="row">
              <div class="col-md-6">
                <div class="name first-box-here">
                   <h2>MoeTokens - #123/150</h2>
                   <p class="text-muted"><a href="#">By Amit Singh</a></p>
                   <p ><a href=""> <img src="assets/images/other/home-image3.png">  Owned by DrBurry </a></p>
                </div>
              </div>
              <div class="col-md-6">
                 <div class="jumbotron new-box text-left">
                   <p class="font-weight-light" >Current Price</p>
                   <h2><i class="fab fa-ethereum fa-1x"></i>  1 ETC <span><i>(USD 2,000.00)</i></span> </h2>
                   <button type="button" class="btn btn-primary buy">Buy Now</button>
                </div>
              </div>
            </div>
            
           
            <div class="accordion" id="accordionExample">
               <div class="accordion-item">
                  <h2 class="accordion-header" id="headingOne">
                     <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                     <i class="fas fa-chart-line"></i> Price history
                     </button>
                  </h2>
                  <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                     <div class="accordion-body">
                        <select class="form-select" aria-label="Default select example">
                           <option selected>All Time</option>
                           <option value="1">One</option>
                           <option value="2">Two</option>
                           <option value="3">Three</option>
                        </select>
                        <br>
                        <script>
                           window.onload = function () {
                           
                           var chart = new CanvasJS.Chart("chartContainer", {
                             animationEnabled: true,
                             exportEnabled: true,
                             theme: "light2", // "light1", "light2", "dark1", "dark2"
                             title:{
                               text: "Prices in different months "
                             },
                               axisY: {
                                 includeZero: true
                               },
                             data: [{
                               type: "column", //change type to bar, line, area, pie, etc
                               //indexLabel: "{y}", //Shows y value on all Data Points
                               indexLabelFontColor: "#5A5757",
                                   indexLabelFontSize: 16,
                               indexLabelPlacement: "outside",
                               dataPoints: [
                                 { x: 10, y: 71 },
                                 { x: 20, y: 55 },
                                 { x: 30, y: 50 },
                                 { x: 40, y: 65 },
                                 { x: 50, y: 92, indexLabel: "\u2605 Highest" },
                                 { x: 60, y: 68 },
                                 { x: 70, y: 38 },
                                 { x: 80, y: 71 },
                                 { x: 90, y: 54 },
                                 { x: 100, y: 60 },
                                 { x: 110, y: 36 },
                                 { x: 120, y: 49 },
                                 { x: 130, y: 21, indexLabel: "\u2691 Lowest" }
                               ]
                             }]
                           });
                           chart.render();
                           
                           }
                        </script>
                        <div id="chartContainer" style="height: 300px; width: 100%;"></div>
                        <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
                     </div>
                  </div>
               </div>
               <br>
               <div class="accordion-item">
                  <h2 class="accordion-header" id="headingTwo">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                     <i class="fas fa-tag"></i>  Listing
                     </button>
                  </h2>
                  <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                     <div class="accordion-body">
                        <table class=" table">
                           <thead>
                              <tr>
                                 <th scope="col">from</th>
                                 <th scope="col">Price</th>
                                 <th scope="col">Expiration</th>
                                 <th scope="col"></th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <td>Owned by International_Megadig...</td>
                                 <td>  <i class="fab fa-ethereum fa-1x"></i>  1 ETC <span style="color:silver;font-size: 10px">(12321$)</span> </td>
                                 <td></td>
                                 <td><button type="button" class="btn btn-outline-primary btn-sm buy2">buy  <i class="fas fa-chevron-right"></i></button></td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
               </div>
               <br>
               <div class="accordion-item">
                  <h2 class="accordion-header" id="headingThree">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                     <i class="fas fa-list-ul"></i>  Offers
                     </button>
                  </h2>
                  <div id="collapseThree" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                     <div class="accordion-body" align="center">
                        <i class="fab fa-cc-visa fa-4x"></i><br>       No offers
                        <hr>
                        <button type="button" class="btn btn-outline-primary buy">Make Offer</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <br>
      <div class="row">
         <br>
         <div class="accordion" id="accordionExample">
            <div class="accordion-item">
               <h2 class="accordion-header" id="headingOne">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  Trading History
                  </button>
               </h2>
               <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                     <select class="form-select" aria-label="Default select example">
                        <option selected>All Time</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                     </select>
                     <br>
                     <table class=" table">
                        <thead>
                           <tr>
                              <th scope="col">Type</th>
                              <th scope="col">Item</th>
                              <th scope="col">Unit Price</th>
                              <th scope="col">Quantitiy</th>
                              <th scope="col">Price</th>
                              <th scope="col">To</th>
                              <th scope="col">Date</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>Owned by International_Megadig...</td>
                              <td>Token</td>
                              <td>  <i class="fab fa-ethereum "></i>  1 ETC <span style="color:silver;font-size: 10px">(12321$)</span> </td>
                              <td>5</td>
                              <td><button type="button" class="btn btn-outline-primary btn-sm buy2">buy  <i class="fas fa-chevron-right"></i></button></td>
                              <td>16/03/2021</td>
                              <td>31/03/2021</td>
                           </tr>
                           <tr>
                              <td>Created on</td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td>a week ago</td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
  </div>
</section>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
               <script type="text/javascript">
                  //with class div
                  $(document).ready(function(){
                    $(".videowidth").hover(function(){
                      $(this).children("video")[0].play();
                    },
                    function(){
                    $(this).children("video")[0].pause();
                    });
                  });
               </script>


<?php include('footer.php');?>

