561 lines
23 KiB
HTML
Executable File
561 lines
23 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
<link rel="icon" type="image/x-icon" href="./img/favicon.ico" />
|
||
<meta name="renderer" content="webkit" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
|
||
/>
|
||
<title>NFT | CEBG: CRYPTO ELITE‘S BATTLEGROUNDS</title>
|
||
<meta
|
||
name="description"
|
||
content="CEBG is the 1st Anime + Beauties + Mechas blockchain game that supports FREE TO PLAY and PLAY TO EARN. It\'s an online multiplayer battle royale game where up to 40 players parachute onto an island and scavenge for weapons and equipment to kill others. The last player or team standing wins the round."
|
||
/>
|
||
<meta
|
||
name="keywords"
|
||
content="CEBG, CRYPTO ELITE‘S BATTLEGROUNDS, CEBG BATTLEGROUNDS, CE BATTLEGROUNDS, CRYPTO ELITE‘S, cebg Mobile, cebg official, free battle royale, cebg game, cec, ceg, cebg coin, cebg gold, cebg crypto, cebg p2e, play to earn, free to play, blockchain game"
|
||
/>
|
||
</head>
|
||
<body>
|
||
<section class="main">
|
||
<section class="header nft-header">
|
||
<img src="img/nft/hero/nftti@2x.png" width="100%" />
|
||
<div class="header-top">
|
||
<a href="/" class="header-top-logo">
|
||
<img src="./img/home/logo@2x.png" />
|
||
</a>
|
||
<nav class="nav">
|
||
<a href="./index.html">Home</a>
|
||
<a href="./gameplay.html">GamePlay</a>
|
||
<a href="./nft.html" class="cur">NFT</a>
|
||
<a href="./tokenomic.html">Tokenomic</a>
|
||
<a href="./team.html">Team</a>
|
||
<a href="./roadmap.html">Roadmap</a>
|
||
</nav>
|
||
<a href="https://mall.cebg.games/index.html" class="market fr">
|
||
<img src="img/home/marketplace@2x.png" />
|
||
</a>
|
||
<a href="javascript:void(0);" class="login fr" id="header_loginbtn">
|
||
<img src="img/home/login@2x.png" />
|
||
</a>
|
||
<a
|
||
href="javascript:void(0);"
|
||
class="login fr logout"
|
||
id="header_logoutbtn"
|
||
>
|
||
Logout
|
||
</a>
|
||
</div>
|
||
</section>
|
||
<section class="nft-con">
|
||
<div class="nft-hero">
|
||
<div class="nft-hero-t">
|
||
<img src="img/nft/hero/nftt@2x.png" width="100%" />
|
||
<a href="javascript:;" class="desc-btn">
|
||
<img src="img/nft/hero/nftb@2x.png" />
|
||
</a>
|
||
<section class="desc-wrap">
|
||
<div class="desc-in-model">
|
||
<div class="desc-inner">
|
||
<span class="desc-close">
|
||
<img src="img/nft/hero/close2-b@2x.png" />
|
||
</span>
|
||
<h3 class="na-he">Usage</h3>
|
||
<p class="na-he">
|
||
Token rewards can only be obtained by playing the game with
|
||
hero NFT.
|
||
</p>
|
||
<h3 class="na-he">Types</h3>
|
||
<p class="na-he">
|
||
There are 10 heroes in total, and different roles correspond
|
||
to different original skills and attributes.
|
||
</p>
|
||
<h3 class="na-he">Rarity</h3>
|
||
<p class="na-he">
|
||
Each hero has 15 levels of rarity, you can increase rarity
|
||
by combining heroes of the same type. Raise the rarity to
|
||
obtain additional attributes and skills.
|
||
</p>
|
||
<h3 class="na-he">Levels</h3>
|
||
<p class="na-he">
|
||
Each hero can be upgraded up to level 20. Heroes of the same
|
||
type at different levels have the same attribute types, and
|
||
the higher the level, the greater the value.
|
||
</p>
|
||
<h3 class="na-he">Destroy</h3>
|
||
<p class="na-he">
|
||
When merging heroes to increase their rarity, the lower
|
||
level heroes among them will be destroyed
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="nft-hero-c hero-item-c">
|
||
<a
|
||
href="javascript:;"
|
||
data-bigimg="img/nft/hero/hero1-d@2x.png"
|
||
data-imgdetail="img/nft/hero/hero1data@2x.png"
|
||
>
|
||
<img src="img/nft/hero/hero1@2x.png" />
|
||
</a>
|
||
<a
|
||
href="javascript:;"
|
||
data-bigimg="img/nft/hero/hero2-d@2x.png"
|
||
data-imgdetail="img/nft/hero/hero2data@2x.png"
|
||
>
|
||
<img src="img/nft/hero/hero2@2x.png" />
|
||
</a>
|
||
<a
|
||
href="javascript:;"
|
||
data-bigimg="img/nft/hero/hero3-d@2x.png"
|
||
data-imgdetail="img/nft/hero/hero3data@2x.png"
|
||
>
|
||
<img src="img/nft/hero/hero3@2x.png" />
|
||
</a>
|
||
<a
|
||
href="javascript:;"
|
||
data-bigimg="img/nft/hero/hero4-d@2x.png"
|
||
data-imgdetail="img/nft/hero/hero4data@2x.png"
|
||
>
|
||
<img src="img/nft/hero/hero4@2x.png" />
|
||
</a>
|
||
<a
|
||
href="javascript:;"
|
||
data-bigimg="img/nft/hero/hero5-d@2x.png"
|
||
data-imgdetail="img/nft/hero/hero5data@2x.png"
|
||
>
|
||
<img src="img/nft/hero/hero5@2x.png" />
|
||
</a>
|
||
<a
|
||
href="javascript:;"
|
||
data-bigimg="img/nft/hero/hero6-d@2x.png"
|
||
data-imgdetail="img/nft/hero/hero6data@2x.png"
|
||
>
|
||
<img src="img/nft/hero/hero6@2x.png" />
|
||
</a>
|
||
<a
|
||
href="javascript:;"
|
||
data-bigimg="img/nft/hero/hero7-d@2x.png"
|
||
data-imgdetail="img/nft/hero/hero7data@2x.png"
|
||
>
|
||
<img src="img/nft/hero/hero7@2x.png" />
|
||
</a>
|
||
<a
|
||
href="javascript:;"
|
||
data-bigimg="img/nft/hero/hero8-d@2x.png"
|
||
data-imgdetail="img/nft/hero/hero8data@2x.png"
|
||
>
|
||
<img src="img/nft/hero/hero8@2x.png" />
|
||
</a>
|
||
<a
|
||
href="javascript:;"
|
||
data-bigimg="img/nft/hero/hero9-d@2x.png"
|
||
data-imgdetail="img/nft/hero/hero9data@2x.png"
|
||
>
|
||
<img src="img/nft/hero/hero9@2x.png" />
|
||
</a>
|
||
<a
|
||
href="javascript:;"
|
||
data-bigimg="img/nft/hero/hero10-d@2x.png"
|
||
data-imgdetail="img/nft/hero/hero10data@2x.png"
|
||
>
|
||
<img src="img/nft/hero/hero10@2x.png" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="nft-hero">
|
||
<div class="nft-hero-t">
|
||
<img src="img/nft/weapon/weapon@2x.png" width="100%" />
|
||
<a href="javascript:;" class="desc-btn">
|
||
<img src="img/nft/hero/nftb@2x.png" />
|
||
</a>
|
||
<section class="desc-wrap">
|
||
<div class="desc-in-model">
|
||
<div class="desc-inner">
|
||
<span class="desc-close">
|
||
<img src="img/nft/hero/close2-b@2x.png" />
|
||
</span>
|
||
<h3 class="na-he">Usage</h3>
|
||
<p class="na-he">
|
||
Free to play, no need to buy Increase the hero's power and
|
||
attack effect during battle, and increase the winning rate.
|
||
</p>
|
||
<h3 class="na-he">Types</h3>
|
||
<p class="na-he">
|
||
There are 7 categories of weapons, and different categories
|
||
correspond to different original skills and attributes.
|
||
</p>
|
||
<h3 class="na-he">Rarity</h3>
|
||
<p class="na-he">
|
||
Each weapon has 15 levels of rarity, which can be increased
|
||
by combining weapons of the same type. Raise the rarity to
|
||
obtain additional attribute skills.
|
||
</p>
|
||
<h3 class="na-he">Levels</h3>
|
||
<p class="na-he">
|
||
Each weapon can be upgraded up to level 20. Weapons of the
|
||
same type at different levels have the same attribute types,
|
||
and the higher the level, the greater the value.
|
||
</p>
|
||
<h3 class="na-he">Destroy</h3>
|
||
<p class="na-he">
|
||
When merging weapons to increase their rarity, the lower
|
||
level weapons will be destroyed
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="nft-hero-c weapon-item-c">
|
||
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-00@2x.png">
|
||
<img src="img/nft/weapon/wp1@2x.png" />
|
||
</a>
|
||
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-01@2x.png">
|
||
<img src="img/nft/weapon/wp2@2x.png" />
|
||
</a>
|
||
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-02@2x.png">
|
||
<img src="img/nft/weapon/wp3@2x.png" />
|
||
</a>
|
||
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-03@2x.png">
|
||
<img src="img/nft/weapon/wp4@2x.png" />
|
||
</a>
|
||
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-04@2x.png">
|
||
<img src="img/nft/weapon/wp5@2x.png" />
|
||
</a>
|
||
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-05@2x.png">
|
||
<img src="img/nft/weapon/wp6@2x.png" />
|
||
</a>
|
||
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-06@2x.png">
|
||
<img src="img/nft/weapon/wp7@2x.png" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="nft-hero">
|
||
<div class="nft-hero-t">
|
||
<img src="img/nft/chip/chip@2x.png" width="100%" />
|
||
<a href="javascript:;" class="desc-btn">
|
||
<img src="img/nft/hero/nftb@2x.png" />
|
||
</a>
|
||
<section class="desc-wrap">
|
||
<div class="desc-in-model">
|
||
<div class="desc-inner chip-inner">
|
||
<span class="desc-close">
|
||
<img src="img/nft/hero/close2-b@2x.png" />
|
||
</span>
|
||
<h3 class="na-he">Usage</h3>
|
||
<p class="na-he">
|
||
When heroes and weapons need to be
|
||
<br />
|
||
upgraded, they can be upgraded with chips.
|
||
<br />
|
||
Upgrade heroes or weapons with chips to add
|
||
<br />
|
||
additional attributes.
|
||
<br />
|
||
Rarity, levels and types
|
||
<br />
|
||
Chips are not differentiated by level and type, only by
|
||
rarity, with 4 rarities.
|
||
</p>
|
||
<h3 class="na-he">Destroy</h3>
|
||
<p class="na-he">
|
||
It will be destroyed after use, and each chip can only be
|
||
used once.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="nft-hero-c">
|
||
<div class="chip-con">
|
||
<img src="img/nft/chip/chip1@2x.png" />
|
||
<p class="na-he chip-t">To be continued...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 人物介绍层 -->
|
||
<section class="hero-d-layer hero-view">
|
||
<div class="hero-d-layer-inner">
|
||
<div class="hero-d-layer-con">
|
||
<span class="hero-d-close">
|
||
<img src="img/nft/hero/close-b@2x.png" />
|
||
</span>
|
||
<span class="hero-d-p">
|
||
<img src="img/nft/hero/hero1-d@2x.png" />
|
||
</span>
|
||
<div class="hero-d-jx"></div>
|
||
<div class="hero-d-data">
|
||
<img src="img/nft/hero/hero1data@2x.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 武器介绍层 -->
|
||
<section class="hero-d-layer weapon-view">
|
||
<div class="hero-d-layer-inner">
|
||
<div class="hero-d-layer-con">
|
||
<span class="hero-d-close">
|
||
<img src="img/nft/hero/close-b@2x.png" />
|
||
</span>
|
||
<div class="weapon-silder">
|
||
<div class="swiper-container swiper-container-0">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<div class="weapon-silder-item">
|
||
<div class="swiper-container swiper-nested-1">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/11@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/22 1@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/33@2x.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="prev">
|
||
<img src="img/nft/weapon/prev@2x.png" />
|
||
</span>
|
||
<span class="next">
|
||
<img src="img/nft/weapon/next@2x.png" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="weapon-silder-item">
|
||
<div class="swiper-container swiper-nested-1">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/bq1@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/bq2@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/bq3@2x.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="prev">
|
||
<img src="img/nft/weapon/prev@2x.png" />
|
||
</span>
|
||
<span class="next">
|
||
<img src="img/nft/weapon/next@2x.png" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="weapon-silder-item">
|
||
<div class="swiper-container swiper-nested-1">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/wpi_03@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/wpi_03_01@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/wpi_03_02@2x.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="prev">
|
||
<img src="img/nft/weapon/prev@2x.png" />
|
||
</span>
|
||
<span class="next">
|
||
<img src="img/nft/weapon/next@2x.png" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="weapon-silder-item">
|
||
<div class="swiper-container swiper-nested-1">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/hyq1@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/hyq2@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/hyq3@2x.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="prev">
|
||
<img src="img/nft/weapon/prev@2x.png" />
|
||
</span>
|
||
<span class="next">
|
||
<img src="img/nft/weapon/next@2x.png" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="weapon-silder-item">
|
||
<div class="swiper-container swiper-nested-1">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/jg1@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/jg2@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/jg3@2x.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="prev">
|
||
<img src="img/nft/weapon/prev@2x.png" />
|
||
</span>
|
||
<span class="next">
|
||
<img src="img/nft/weapon/next@2x.png" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="weapon-silder-item">
|
||
<div class="swiper-container swiper-nested-1">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/jjq1@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/jjq2@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/jjq3@2x.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="prev">
|
||
<img src="img/nft/weapon/prev@2x.png" />
|
||
</span>
|
||
<span class="next">
|
||
<img src="img/nft/weapon/next@2x.png" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="weapon-silder-item">
|
||
<div class="swiper-container swiper-nested-1">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/sdq1@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/sdq2@2x.png" />
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="img/nft/weapon/sdq3@2x.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="prev">
|
||
<img src="img/nft/weapon/prev@2x.png" />
|
||
</span>
|
||
<span class="next">
|
||
<img src="img/nft/weapon/next@2x.png" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pagination"></div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-d-jx"></div>
|
||
<div class="hero-d-data">
|
||
<img src="img/nft/hero/hero1data@2x.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<%- include('../comp/footer.html') %>
|
||
</section>
|
||
<%- include('../comp/walletModal.html') %> <%- include('../comp/jslib.html')
|
||
%>
|
||
<script
|
||
src="https://cdn.jsdelivr.net/npm/swiper@3.4.2/dist/js/swiper.min.js"
|
||
integrity="sha256-ShAhm+50eq3u2njxZteHrfMlg/Nh+I1EtHL289p5gIM="
|
||
crossorigin="anonymous"
|
||
></script>
|
||
<script type="text/javascript">
|
||
var mySwiper = ''
|
||
var mySwiper2 = ''
|
||
$(function () {
|
||
$('.desc-btn').click(function () {
|
||
$(this).next('.desc-wrap').slideDown(250)
|
||
})
|
||
$('.desc-close').click(function () {
|
||
$(this).parents('.desc-wrap').slideUp(250)
|
||
})
|
||
|
||
$('.hero-item-c a').click(function () {
|
||
var bigImg = $(this).data('bigimg')
|
||
var imgDetail = $(this).data('imgdetail')
|
||
$('.hero-view').find('.hero-d-data img').attr('src', '')
|
||
$('.hero-view').find('.hero-d-p img').attr('src', '')
|
||
$('.hero-view').find('.hero-d-data img').attr('src', imgDetail)
|
||
$('.hero-view').find('.hero-d-p img').attr('src', bigImg)
|
||
$('.hero-view').slideDown(250)
|
||
})
|
||
|
||
$('.hero-d-close').click(function () {
|
||
$(this).parents('.hero-d-layer').slideUp(250)
|
||
})
|
||
|
||
$('.weapon-item-c a').click(function () {
|
||
var _index = $(this).index()
|
||
var bigImg = $(this).data('bigimg')
|
||
var imgDetail = $(this).data('imgdetail')
|
||
$('.weapon-view').find('.hero-d-data img').attr('src', '')
|
||
$('.weapon-view').find('.hero-d-p img').attr('src', '')
|
||
$('.weapon-view').find('.hero-d-data img').attr('src', imgDetail)
|
||
$('.weapon-view').find('.hero-d-p img').attr('src', bigImg)
|
||
$('.weapon-view').slideDown(250)
|
||
|
||
mySwiper2 = $('.weapon-silder .swiper-container-0').swiper({
|
||
// loop: true,
|
||
direction: 'vertical',
|
||
slidesPerView: 3,
|
||
centeredSlides: true,
|
||
onSlideChangeEnd: function (swiper) {
|
||
console.log(swiper)
|
||
if (mySwiper) {
|
||
mySwiper.destroy(false)
|
||
}
|
||
silde(swiper.activeIndex)
|
||
},
|
||
})
|
||
if (_index == 0) {
|
||
silde(_index)
|
||
}
|
||
setTimeout(() => {
|
||
mySwiper2.slideTo(_index, 500)
|
||
}, 0)
|
||
})
|
||
})
|
||
function silde(_index) {
|
||
var items = $('.weapon-item-c a')
|
||
var img = $(items[_index]).data('imgdetail')
|
||
mySwiper = $(
|
||
'.weapon-silder .swiper-slide-active .swiper-nested-1',
|
||
).swiper({
|
||
prevButton: '.weapon-silder .swiper-slide-active .prev',
|
||
nextButton: '.weapon-silder .swiper-slide-active .next',
|
||
})
|
||
$('.weapon-view .hero-d-data img').attr('src', img)
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|