yuyongdong/mint-tow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mint完成

Browse Source
This commit is contained in:
yuyongdong 2024-06-29 19:48:40 +08:00
parent 928c69540d
commit bd8916f2a7
4 changed files with 106 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -13,6 +13,11 @@
property="og:image" property="og:image"
content="https://mint.counterfire.games/mint.png" content="https://mint.counterfire.games/mint.png"
/> />
<meta
property="twitter:image"
content="https://gacha.counterfire.games/images/counter.png"
/>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

BIN
src/assets/home/prompt_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

2
src/components/starTimer.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
{{hour}}h:{{min}}m:{{sec}}s {{day}}D:{{hour}}H:{{min}}M:{{sec}}S
</div> </div>
</template> </template>

183
src/view/mintIndex.vue
View File

@ -46,25 +46,25 @@
</div> </div>
<div class="home-content-left-time-btm"> <div class="home-content-left-time-btm">
<p>Guaranteed Mint</p> <p>Guaranteed Mint</p>
<div v-if="activityState == 0" class="mint-time"> <div v-if="(activityState == 2 || activityState == 1) && totalLimit+500 < getMintConfig.maxSupply" class="mint-time">
<p>OPENING</p>
</div>
<div v-else-if="activityState == 3 || totalLimit+500 >= getMintConfig.maxSupply" class="mint-time">
<span class="mint-ent">The minting session has ended.</span>
</div>
<div v-else class="mint-time">
<span>{{ days1 }}D</span> <span>{{ days1 }}D</span>
<span>{{ hours1 }}H</span> <span>{{ hours1 }}H</span>
<span>{{ minutes1 }}M</span> <span>{{ minutes1 }}M</span>
<span>{{ senconds1 }}S</span> <span>{{ senconds1 }}S</span>
</div> </div>
<div v-if="activityState == 2 || activityState == 1" class="mint-time">
<p>OPENING</p>
</div>
<div v-if="activityState == 3" class="mint-time">
<span class="mint-ent">The minting session has ended.</span>
</div>
</div> </div>
<div class="home-content-left-time-btm home-content-left-time-btm-tow"> <div class="home-content-left-time-btm home-content-left-time-btm-tow">
<p>FCFS Mint</p> <p>FCFS Mint</p>
<div v-if="activityState == 3" class="mint-time"> <div v-if="activityState == 3 || totalLimit+500 >= getMintConfig.maxSupply" class="mint-time">
<span class="mint-ent">The minting session has ended.</span> <span class="mint-ent">The minting session has ended.</span>
</div> </div>
<div v-else-if="activityState == 2" class="mint-time"> <div v-else-if="activityState == 2 || totalLimit+500 >= getMintConfig.maxSupply" class="mint-time">
<p>OPENING</p> <p>OPENING</p>
</div> </div>
<div v-else class="mint-time"> <div v-else class="mint-time">
@ -91,7 +91,7 @@
<div class="base-title-img"> <div class="base-title-img">
<img src="./../assets/home/icon_Immutable.png" alt=""> <img src="./../assets/home/icon_Immutable.png" alt="">
</div> </div>
<div class="base-title-text">Base on Immutable zkEvm</div> <div class="base-title-text">Minting on Immutable zkEVM</div>
</div> </div>
<div class="base-content"> <div class="base-content">
<p>-Pepare ETH on Immutable zkEVM for minting.</p> <p>-Pepare ETH on Immutable zkEVM for minting.</p>
@ -100,7 +100,7 @@
<!-- <p>-Pepare ETH on Immutable zkEVM for minting.</p> --> <!-- <p>-Pepare ETH on Immutable zkEVM for minting.</p> -->
</div> </div>
<div class="base-btn"> <div class="base-btn">
<a href="https://docs.google.com/document/d/1zixgbf60Fq4-wL_1xEpgaVzShWVa0XDjkCa65LzJzew/edit" target="_blank">Learn More</a> <a href="https://docs.google.com/document/d/1Hev5vThUYKpo717DHgJf0SKrvFj_DdA084JFaMNz7C0/edit" target="_blank">Learn More</a>
</div> </div>
</div> </div>
<!-- <div class="explore-download"> <!-- <div class="explore-download">
@ -118,6 +118,7 @@
</div> --> </div> -->
</div> </div>
<div class="mint-content-right"> <div class="mint-content-right">
<div class="home-content-right-top"> <div class="home-content-right-top">
<div class="wallet" @click="walletDialogVisible = true"> <div class="wallet" @click="walletDialogVisible = true">
<span v-if="getAddress == null || getAddress == ''">Connect Wallet</span> <span v-if="getAddress == null || getAddress == ''">Connect Wallet</span>
@ -145,10 +146,58 @@
</div> </div>
<div v-show="navIndex == 0" class="home-content-right-join"> <div v-show="navIndex == 0" class="home-content-right-join">
<div class="extension-text">
<marquee scrollamount="10" width="100%">
Prepare your mint funds on Immutable zkEVM NOW to secure your spot in the GTD WL!
</marquee>
</div>
<div class="home-content-right-join-top"> <div class="home-content-right-join-top">
<img src="./../assets/home/Gen2_raw.gif" alt /> <img src="./../assets/home/Gen2_raw.gif" alt />
</div> </div>
<div v-if="activityState == 0" class="home-content-right-join-btm"> <div v-if="activityState == 3 || totalLimit+500 >= getMintConfig.maxSupply" class="home-content-right-join-btm">
<div class="join-list">
<div class="join-list-top">
<div class="claim-period">
<div></div>
</div>
<div class="claim-tips">
<h1>Details</h1>
<div @click="tipsDialogVisible = true">
<img src="./../assets/home/Icon_!.png" alt />
</div>
</div>
</div>
<div class="join-list-btm">
<div class="claim-total">
<h1></h1>
<div></div>
</div>
<div class="claim-price">
<h1></h1>
<div>
<!-- <img src="./../assets/home/ETHicon.png" alt /> -->
</div>
</div>
</div>
<div class="join-btm">
<div class="join-btm-left">
<p class="purchase">Please go to the marketplace to view and purchase.</p>
</div>
<div class="join-btm-right">
<div
class="noWhite"
>
<span>Mint</span>
&nbsp;
<div>
<img class="hover-show" src="./../assets/home/Arrow2.png" alt />
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="activityState == 0" class="home-content-right-join-btm">
<div class="join-list"> <div class="join-list">
<div class="join-list-top"> <div class="join-list-top">
<div class="claim-period"> <div class="claim-period">
@ -206,7 +255,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="activityState == 1 || activityState == 2" class="home-content-right-join-btm"> <div v-else-if="(activityState == 1 || activityState == 2) && totalLimit+500 < getMintConfig.maxSupply" class="home-content-right-join-btm">
<div class="join-list"> <div class="join-list">
<div class="join-list-top"> <div class="join-list-top">
<div class="claim-period"> <div class="claim-period">
@ -291,55 +340,17 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="activityState == 3" class="home-content-right-join-btm">
<div class="join-list">
<div class="join-list-top">
<div class="claim-period">
<div></div>
</div>
<div class="claim-tips">
<h1>Details</h1>
<div @click="tipsDialogVisible = true">
<img src="./../assets/home/Icon_!.png" alt />
</div>
</div>
</div>
<div class="join-list-btm">
<div class="claim-total">
<h1></h1>
<div></div>
</div>
<div class="claim-price">
<h1></h1>
<div>
<!-- <img src="./../assets/home/ETHicon.png" alt /> -->
</div>
</div>
</div>
<div class="join-btm">
<div class="join-btm-left">
<p class="purchase">Please go to the marketplace to view and purchase.</p>
</div>
<div class="join-btm-right">
<div
class="noWhite"
>
<span>Mint</span>
&nbsp;
<div>
<img class="hover-show" src="./../assets/home/Arrow2.png" alt />
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div v-show="navIndex == 1" class="home-content-right-join"> <div v-show="navIndex == 1" class="home-content-right-join">
<div class="extension-text">
<marquee scrollamount="10" width="100%">
Prepare your mint funds on Immutable zkEVM NOW to secure your spot in the GTD WL!
</marquee>
</div>
<div class="home-content-right-join-top"> <div class="home-content-right-join-top">
<img src="./../assets/home/Gen2_raw.gif" alt /> <img src="./../assets/home/Gen2_raw.gif" alt />
</div> </div>
<div v-if="activityState == 3" class="home-content-right-join-btm"> <div v-if="activityState == 3 || totalLimit+500 >= getMintConfig.maxSupply" class="home-content-right-join-btm">
<div class="join-list"> <div class="join-list">
<div class="join-list-top"> <div class="join-list-top">
<div class="claim-period"> <div class="claim-period">
@ -382,7 +393,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="activityState == 0 || activityState == 1" class="home-content-right-join-btm FCFS-no"> <div v-else-if="activityState == 0 || activityState == 1" class="home-content-right-join-btm FCFS-no">
<div class="tow-title"> <div class="tow-title">
<p>FCFS Mint will be available on a</p> <p>FCFS Mint will be available on a</p>
<p>first-come-first-served basis</p> <p>first-come-first-served basis</p>
@ -395,7 +406,7 @@
<span>{{ senconds2 }}S</span> <span>{{ senconds2 }}S</span>
</div> </div>
</div> </div>
<div v-if="activityState == 2" class="home-content-right-join-btm"> <div v-else-if="activityState == 2 && totalLimit+500 < getMintConfig.maxSupply" class="home-content-right-join-btm">
<div class="join-list"> <div class="join-list">
<div class="join-list-top"> <div class="join-list-top">
<div class="claim-period"> <div class="claim-period">
@ -533,9 +544,6 @@
<img :src="item.imgUrl" alt /> <img :src="item.imgUrl" alt />
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
<div class="wallet-item-right" v-if="index == 2">
Recommended
</div>
</div> </div>
</li> </li>
</div> </div>
@ -599,6 +607,7 @@
</div> </div>
<div class="time"> <div class="time">
<StarTimer @stopTime="stopTimeChange" :openNft="openNft" :getAddress="getAddress" /> <StarTimer @stopTime="stopTimeChange" :openNft="openNft" :getAddress="getAddress" />
<!-- <div>Tuesday, 02 July 2024 10:00:00 GMT</div> -->
</div> </div>
</div> </div>
</div> </div>
@ -875,14 +884,14 @@ let hours2 = ref(0);
let minutes2 = ref(0); let minutes2 = ref(0);
let senconds2 = ref(0); let senconds2 = ref(0);
let timer = null; let timer = null;
const openNft = ref(1719828000000) const openNft = ref(1719914400000)
// 倒计时 // 倒计时
const starTimer = () => { const starTimer = () => {
let now = new Date().getTime(); let now = new Date().getTime();
let str = 1719568800000; // 开始（前24） let str = 1719655200000; // 开始（前24）
let bar = 1719568800000; // 一期开始（一期倒计时4小时） let bar = 1719655200000; // 一期开始（一期倒计时4小时）
let towBar = 1719583200000; // 二期开始 （一期倒计时4小时） let towBar = 1719669600000; // 二期开始 （一期倒计时4小时）
let end = 1719604800000; // 结束 （） let end = 1719691200000; // 结束 （）
let strTime = (str - now) / 1000; // 开始前毫秒数 - 现在毫秒数 let strTime = (str - now) / 1000; // 开始前毫秒数 - 现在毫秒数
let begTime = (bar - now) / 1000; // 一期开始毫秒数 - 现在毫秒数 let begTime = (bar - now) / 1000; // 一期开始毫秒数 - 现在毫秒数
let towBarTime = (towBar - now) / 1000; // 二期开始毫秒数 - 现在毫秒数 let towBarTime = (towBar - now) / 1000; // 二期开始毫秒数 - 现在毫秒数
@ -1015,7 +1024,7 @@ const getIsWhite = async () => {
} else if (num1 > 0) { } else if (num1 > 0) {
statusTxt.value = 'Congrats! Guaranteed Whitelisted' statusTxt.value = 'Congrats! Guaranteed Whitelisted'
} else if (num2 > 0) { } else if (num2 > 0) {
statusTxt.value = 'Congrats!FCFS Whitelisted!' statusTxt.value = 'Congrats! FCFS Whitelisted'
} else { } else {
statusTxt.value = 'Not on the whitelist' statusTxt.value = 'Not on the whitelist'
} }
@ -1161,10 +1170,10 @@ const stopTimeChange = (e) => {
// 发送推文 // 发送推文
const toTwitter = () => { const toTwitter = () => {
const url = 'https://twitter.com/intent/tweet?text='; const url = 'https://twitter.com/intent/tweet?text=';
const hashtags = encodeURIComponent("I have just minted my Genesis Box for @playCounterFire! Eagerly starting the play2earn season, excited for my hero's debut in this thrilling quest!"); const hashtags = encodeURIComponent("I've just minted my @playCounterFire Genesis Heroes! Catch me in the upcoming P2E Season 1!");
// const imageUrl = encodeURIComponent(`https://opensea.io/assets/ethereum/0xec23679653337d4c6390d0eeba682246a6067777/`); const imageUrl = encodeURIComponent(`https://sphere.market/immutable/collection/0x3A85cA6615953c683826FBe54fA5e2a770ee8bA2`);
// const params = `${hashtags}&url=${imageUrl}`; const params = `${hashtags}&url=${imageUrl}`;
const params = `${hashtags}`; // const params = `${hashtags}`;
window.open(`${url}${params}`, '_blank'); window.open(`${url}${params}`, '_blank');
} }
@ -1352,6 +1361,8 @@ onMounted(() => {
} }
} }
.mint-ent { .mint-ent {
width: 100%;
text-align: center;
font-size: 24px !important; font-size: 24px !important;
} }
} }
@ -2122,6 +2133,21 @@ onMounted(() => {
} }
} }
} }
.extension-text {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
width: 540.5px;
height: 49px;
line-height: 49px;
font-family: 'Poppins-SemiBold';
font-weight: bold;
font-size: 20px;
color: #B680FF;
background: url('./../assets/home/prompt_bg.png') no-repeat;
background-size: 100% 100%;
}
} }
.join-pending { .join-pending {
// margin-bottom: 50px; // margin-bottom: 50px;
@ -2382,7 +2408,7 @@ onMounted(() => {
.time { .time {
font-family: 'Poppins'; font-family: 'Poppins';
font-weight: bold; font-weight: bold;
font-size: 30px; font-size: 22px;
color: #FFFFFF; color: #FFFFFF;
} }
} }
@ -2585,17 +2611,6 @@ onMounted(() => {
} }
} }
} }
li:nth-child(3) {
// border: 2px solid;
// border-image: linear-gradient(to right, #FFAFFA, #D1FFFA, #6DD5F9, #C9BAFF, #94E2FF) 1;
border-radius: 8px;
// overflow: hidden;
border: 2px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #FFAFFA, #D1FFFA, #6DD5F9, #C9BAFF, #94E2FF)
}
li:nth-child(4) { li:nth-child(4) {
background: #d5befa; background: #d5befa;
.disconnect { .disconnect {