start implementing frontend design
This commit is contained in:
Michel Fromme
+69
-50
@@ -2,13 +2,17 @@
|
||||
import { storeToRefs } from "pinia";
|
||||
import SacrificeToken from "@/components/SacrificeToken.vue";
|
||||
import BloodChart from "@/components/BloodChart.vue";
|
||||
import TokenClaim from "@/components/TokenClaim.vue";
|
||||
// import Web3 from "web3";
|
||||
|
||||
// import { useWalletStore } from "@/stores/wallet";
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
const tokenStore = useTokenStore();
|
||||
const { token } = storeToRefs(tokenStore);
|
||||
|
||||
import { Navigation } from "swiper";
|
||||
// Import Swiper Vue.js components
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
// let web3 = new Web3(
|
||||
// "https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN"
|
||||
// );
|
||||
@@ -17,28 +21,37 @@ const { token } = storeToRefs(tokenStore);
|
||||
<template>
|
||||
<main>
|
||||
<div>
|
||||
<sacrifice-token :data="token"></sacrifice-token>
|
||||
<section id="bloodline-header">
|
||||
<div class="header-text">
|
||||
Turn your meme.<br />
|
||||
Join the bloodline scheme.
|
||||
</div>
|
||||
</section>
|
||||
<section id="sacrifice" class="container">
|
||||
<sacrifice-token :data="token"></sacrifice-token>
|
||||
</section>
|
||||
|
||||
<swiper :slides-per-view="1" :navigation="true" :space-between="50">
|
||||
<swiper-slide>Slide 1</swiper-slide>
|
||||
<swiper-slide>Slide 2</swiper-slide>
|
||||
<swiper-slide>Slide 3</swiper-slide>
|
||||
<swiper-slide>Slide 4</swiper-slide>
|
||||
<swiper-slide>Slide 5</swiper-slide>
|
||||
</swiper>
|
||||
<div class="container section-header-container">
|
||||
<h2>Bloodline Cycle</h2>
|
||||
Become the most powerful clan each cycle and claim extra rewards.<br />Claim and trade your $BLOOD at
|
||||
each cycle's end.
|
||||
</div>
|
||||
<section id="cycle-section" class="container">
|
||||
<div class="cycle">
|
||||
<h2>Cycle 1</h2>
|
||||
<p>Join the eternal cycle of the vampire sacrifice and claim your rewards at each cycle's end.</p>
|
||||
<div class="claim">
|
||||
<div class="claim-button">
|
||||
<div class="btn btn-immortal">Claim</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="theinput">Sacrafice Reward</label>
|
||||
<input type="text" name="whatever" id="theinput" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="theinput">Clan Reward</label>
|
||||
<input type="text" name="whatever" id="theinput" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="cycle card bloodline-wrapper">
|
||||
<token-claim></token-claim>
|
||||
<div>
|
||||
<h2>Bloodline Clan</h2>
|
||||
<p>Become the most powerful clan in a cycle to receive extra rewards.</p>
|
||||
<p>
|
||||
Win extra rewards for you and your clan. Increase the strength of your bloodline by
|
||||
sacrificing more memes.
|
||||
</p>
|
||||
<table class="bonus-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -55,22 +68,41 @@ const { token } = storeToRefs(tokenStore);
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div>
|
||||
<div class="blood-chart">
|
||||
<blood-chart></blood-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="container section-header-container">
|
||||
<h2>Tutorial</h2>
|
||||
When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
|
||||
<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
|
||||
</div>
|
||||
<section id="tokenomics" class="container">
|
||||
<h2>Tokenomics</h2>
|
||||
<p>100% clan owned. No team %, no pre-mine</p>
|
||||
<img src="@/assets/img/tokenomics.png" alt="tokenomics" />
|
||||
<div class="card">
|
||||
<h2>Tokenomics</h2>
|
||||
<p>100% clan owned. No team %, no pre-mine</p>
|
||||
<img src="@/assets/img/tokenomics.png" alt="tokenomics" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style lang="sass">
|
||||
.blood-chart
|
||||
display: flex
|
||||
justify-content: center
|
||||
.bloodline-wrapper
|
||||
padding: 48px 64px
|
||||
|
||||
.header-text
|
||||
font-size: 64px
|
||||
line-height: 80px
|
||||
font-weight: 600
|
||||
text-align: center
|
||||
margin-bottom: 100px
|
||||
.chart-wrapper-coin
|
||||
display: flex
|
||||
justify-content: space-evenly
|
||||
@@ -81,38 +113,25 @@ const { token } = storeToRefs(tokenStore);
|
||||
background-color: red
|
||||
border-radius: 50px
|
||||
position: relative
|
||||
#cycle-section
|
||||
text-align: center
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
.cycle
|
||||
.claim
|
||||
display: flex
|
||||
flex-direction: column
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
border: 1px solid black
|
||||
padding: 12px 24px
|
||||
width: 300px
|
||||
.claim-button
|
||||
text-align: center
|
||||
label, input
|
||||
display: block
|
||||
input
|
||||
width: 100%
|
||||
.bonus-table
|
||||
border: 1px solid black
|
||||
padding: 8px
|
||||
padding: 0px 16px 0px 16px
|
||||
text-align: left
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
border: 4px solid var(--purple)
|
||||
border-radius: 16px
|
||||
border-spacing: 16px
|
||||
font-size: 24px
|
||||
th
|
||||
padding-right: 16px
|
||||
#tokenomics
|
||||
text-align: center
|
||||
img
|
||||
display: block
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
width: 50%
|
||||
>div
|
||||
text-align: center
|
||||
img
|
||||
display: block
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
.chart-wrapper
|
||||
width: 600px
|
||||
height: 600px
|
||||
|
||||
Reference in New Issue
Block a user