<?php include('header.php');?>
<link rel="stylesheet" href="assets/css/detailstyle.css">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<section class="nfts-sec-details">
	<div class="container">
		<div class="row">
			<div class="col-sm-5">
            <div class="row">

            <div class="videowidth" style="width:500px;height:400px">
	<video muted="" loop="" preload="">
		<source src="assets\vedio\1.mp4" type="video/mp4">
		<source src="12.webm" type="video/webm">
	</video>
</div>
<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();
		});
	});
	// Without id and class div
	/*$(document).ready(function(){
		$("video").hover(function(){
			$(this)[0].play();
		},
		function(){
		$(this)[0].pause();
		});
	});*/
	</script>
            </div>
            <br>
                    <div class="row">
                 <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="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
        Details
      </button>
    </h2>
    <div id="collapseFive" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
      <p><i class="fas fa-circle"></i>  Owned by International_Megadig...</p> 

      Moe Tokens are cute, unique, and rare. There will only be 10000 released, so after all of them are taken, you will have to collect them from resellers.

Each unique Moe Token is a 1 of 1 original      </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="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
      <i class="fab fa-battle-net"></i>  About mok token
      </button>
    </h2>
    <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
      <div class="col-sm" style="padding:10px;margin-right:10px">

      <img class="rounded float-left" style="padding:10px;" src="http://placehold.it/80x100" alt="">
     </div>
     <div class="col-sm">

      <p align="left">
      MoeTokens are cute, unique, and rare. There will only be 10000 released, so after all of them are taken, you will have to collect them from resellers.Each unique Moe Token is a 1 of 1 original
</p>
</div>

      </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="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
      <i class="fab fa-battle-net"></i>Chain information
      </button>
    </h2>
    <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
      <table class="table">
  
  <tbody>

    <tr>
      <th scope="col">Contract Address</th>
      <th scope="col">x2146254423...</th>
      
    </tr>

    <tr>
      <th scope="row">Token Id</th>
      <td>4755721411</td>
     
    </tr>
    <tr>
      <th scope="row">Blockchain</th>
      <td>etherum</td>
     
    </tr>
    
  </tbody>
</table>
      </div>
    </div>
  </div>
</div>
                    </div>
	
	    </div>
      <div class="col-sm-7">
        <div class="name">
          <h1>MoeTokens - #123/150
</h1>
<p class="text-muted"><a href="#">By Amit Singh</a></p>
<p ><i class="fas fa-circle"></i>  Owned by International_Megadig...</p> 
        </div>
        <div class="jumbotron text-left">

  <p class="font-weight-light"  style="color:silver;font-size: 20px;padding:0px ">Current Price</p>
  <h2><i class="fab fa-ethereum fa-1x"></i>  1 ETC <span style="color:silver;font-size: 25px">(2000$)</span> </h2> 
  <button type="button" class="btn btn-primary buy">Buy Now</button>
        </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>













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

