cindylouwho/ImmortalClanVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

start implementing frontend design

Browse Source
This commit is contained in:
Michel Fromme
2023-06-18 10:48:50 +02:00
parent 89f47b3692
commit db41b03456
27 changed files with 997 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+61
View File
@@ -9,11 +9,13 @@
"version": "0.0.0",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/vue-fontawesome": "^3.0.3",
"pinia": "^2.0.36",
"pinia-plugin-persistedstate": "^3.1.0",
"sass": "^1.62.1",
"swiper": "^9.4.1",
"vue": "^3.3.2",
"vue-router": "^4.2.0",
"web3": "^1.7.1"
@@ -531,6 +533,18 @@
"node": ">=6"
}
},
"node_modules/@fortawesome/free-brands-svg-icons": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz",
"integrity": "sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
@@ -4355,6 +4369,11 @@
"node": ">=0.10.0"
}
},
"node_modules/ssr-window": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
},
"node_modules/statuses": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -4516,6 +4535,27 @@
"node": ">=8"
}
},
"node_modules/swiper": {
"version": "9.4.1",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-9.4.1.tgz",
"integrity": "sha512-1nT2T8EzUpZ0FagEqaN/YAhRj33F2x/lN6cyB0/xoYJDMf8KwTFT3hMOeoB8Tg4o3+P/CKqskP+WX0Df046fqA==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"dependencies": {
"ssr-window": "^4.0.2"
},
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/tar": {
"version": "4.4.19",
"resolved": "https://registry.npmjs.org/tar/-/tar-4.4.19.tgz",
@@ -5705,6 +5745,14 @@
"@fortawesome/fontawesome-common-types": "6.4.0"
}
},
"@fortawesome/free-brands-svg-icons": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz",
"integrity": "sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==",
"requires": {
"@fortawesome/fontawesome-common-types": "6.4.0"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
@@ -8620,6 +8668,11 @@
"tweetnacl": "~0.14.0"
}
},
"ssr-window": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
},
"statuses": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -8740,6 +8793,14 @@
}
}
},
"swiper": {
"version": "9.4.1",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-9.4.1.tgz",
"integrity": "sha512-1nT2T8EzUpZ0FagEqaN/YAhRj33F2x/lN6cyB0/xoYJDMf8KwTFT3hMOeoB8Tg4o3+P/CKqskP+WX0Df046fqA==",
"requires": {
"ssr-window": "^4.0.2"
}
},
"tar": {
"version": "4.4.19",
"resolved": "https://registry.npmjs.org/tar/-/tar-4.4.19.tgz",
package.json
+2
View File
@@ -10,11 +10,13 @@
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/vue-fontawesome": "^3.0.3",
"pinia": "^2.0.36",
"pinia-plugin-persistedstate": "^3.1.0",
"sass": "^1.62.1",
"swiper": "^9.4.1",
"vue": "^3.3.2",
"vue-router": "^4.2.0",
"web3": "^1.7.1"
src/App.vue
+22 -3
View File
@@ -2,13 +2,34 @@
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import Web3 from "web3";
import Navbar from "./components/Navbar.vue";
import { useWalletStore } from "@/stores/wallet";
const walletStore = useWalletStore();
import { useTokenStore } from "@/stores/tokens";
import { useContractStore } from "@/stores/contracts";
const tokenStore = useTokenStore();
const contractStore = useContractStore();
const { memeBurner } = storeToRefs(tokenStore);
const { list } = storeToRefs(contractStore);
onMounted(async () => {
var test = await walletStore.isConnected();
console.log("test", test);
let web3 = new Web3("https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN");
const contract = new web3.eth.Contract(memeBurner.value.config.abi, memeBurner.value.config.contractAddress);
list.value.memeBurnerPublic = new web3.eth.Contract(
memeBurner.value.config.abi,
memeBurner.value.config.contractAddress
);
console.log("list", list.value);
const currentRound = await contract.methods.currentRound().call();
const rounds = await contract.methods.rounds("0x0e349D42C125acA39ea58024FFC23ED0fE5feE32").call();
console.log("currentRound", currentRound);
console.log("rounds", rounds);
});
</script>
@@ -19,6 +40,4 @@ onMounted(async () => {
</div>
</template>
<style lang="sass">
.main
</style>
<style lang="sass"></style>
src/assets/contracts/LiquidityOwner.json
+8 -8
View File
@@ -1,6 +1,6 @@
{
"contractName": "LiquidityOwner",
"contractAddress": "0xF58FC44A2862335F3577253EC544488006aF676A",
"contractAddress": "0x0ce1d955f2a2658d6ca1CF61Fa300234fD8A262c",
"abi": [
{
"inputs": [
@@ -83,7 +83,7 @@
"inputs": [
{
"internalType": "uint256[]",
"name": "tokenIds",
"name": "liquidityTokenIds",
"type": "uint256[]"
}
],
@@ -198,7 +198,7 @@
"inputs": [
{
"internalType": "uint256[]",
"name": "tokenIds",
"name": "positionsToCancel",
"type": "uint256[]"
},
{
@@ -240,22 +240,22 @@
"inputs": [
{
"internalType": "address",
"name": "operator",
"name": "",
"type": "address"
},
{
"internalType": "address",
"name": "from",
"name": "",
"type": "address"
},
{
"internalType": "uint256",
"name": "tokenId",
"name": "",
"type": "uint256"
},
{
"internalType": "bytes",
"name": "data",
"name": "",
"type": "bytes"
}
],
@@ -267,7 +267,7 @@
"type": "bytes4"
}
],
"stateMutability": "nonpayable",
"stateMutability": "pure",
"type": "function"
},
{
src/assets/contracts/MemeBurner.json
+54 -30
View File
@@ -1,6 +1,6 @@
{
"contractName": "MemeBurner",
"contractAddress": "0x5c7077b0424c0e425B16363AdA59f1D72914C5c5",
"contractAddress": "0x6eEAe97975e156400DD1DDD8eFc4CcB167BaAFC3",
"abi": [
{
"inputs": [
@@ -146,35 +146,6 @@
"name": "MemeSacrificed",
"type": "event"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "goal",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "achieved",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "amountOfAsset",
"type": "uint256"
}
],
"name": "_calculateLinearDecreasingReward",
"outputs": [
{
"internalType": "uint256",
"name": "reward",
"type": "uint256"
}
],
"stateMutability": "pure",
"type": "function"
},
{
"inputs": [
{
@@ -206,6 +177,59 @@
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "memeToSacrifice",
"type": "address"
},
{
"internalType": "uint256",
"name": "amountToSacrifice",
"type": "uint256"
}
],
"name": "getRewardFor",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "roundNumber",
"type": "uint256"
},
{
"internalType": "address",
"name": "meme",
"type": "address"
}
],
"name": "getSacrificedMeme",
"outputs": [
{
"internalType": "bool",
"name": "participation",
"type": "bool"
},
{
"internalType": "uint256",
"name": "amountAchieved",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "liquidityAmountLimit",
src/assets/contracts/MemeToken.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"contractName": "MemeToken",
"contractAddress": "0x0e349D42C125acA39ea58024FFC23ED0fE5feE32",
"contractAddress": "0xeC73Ec89897a36E9Ca36B2190964bBd8C46748AD",
"abi": [
{
"inputs": [
src/assets/contracts/RewardLocker.json
+259 -101
View File
@@ -1,6 +1,6 @@
{
"contractName": "RewardLocker",
"contractAddress": "0x6749F75Ece2755d38f209Da1cBab07A1caD69554",
"contractAddress": "0x3bEc26159dbA0A32210eaDF6A938F1BbE8bfDAA0",
"abi": [
{
"inputs": [
@@ -15,7 +15,7 @@
},
{
"inputs": [],
"name": "MemeBurnerAlreadyInitialized",
"name": "MemeAltarAlreadyInitialized",
"type": "error"
},
{
@@ -23,6 +23,21 @@
"name": "MemeTokenAlreadyInitialized",
"type": "error"
},
{
"inputs": [],
"name": "RoundIsNotCompletedYet",
"type": "error"
},
{
"inputs": [],
"name": "TooEarlyToUnstake",
"type": "error"
},
{
"inputs": [],
"name": "Unsynchronized",
"type": "error"
},
{
"anonymous": false,
"inputs": [
@@ -33,7 +48,7 @@
"type": "address"
},
{
"indexed": false,
"indexed": true,
"internalType": "uint256",
"name": "amount",
"type": "uint256"
@@ -42,6 +57,56 @@
"name": "ClaimedReward",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "staker",
"type": "address"
},
{
"indexed": true,
"internalType": "uint256",
"name": "stakedRound",
"type": "uint256"
},
{
"indexed": true,
"internalType": "uint256",
"name": "stakedAmount",
"type": "uint256"
}
],
"name": "RewardStaked",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "unstaker",
"type": "address"
},
{
"indexed": true,
"internalType": "uint256",
"name": "unstakeRound",
"type": "uint256"
},
{
"indexed": true,
"internalType": "uint256",
"name": "unstakedAmount",
"type": "uint256"
}
],
"name": "RewardUnstaked",
"type": "event"
},
{
"anonymous": false,
"inputs": [
@@ -106,23 +171,29 @@
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "_burnedToken",
"name": "unstaker",
"type": "address"
}
],
"name": "claim",
"outputs": [
},
{
"indexed": true,
"internalType": "uint256",
"name": "claimedAmount",
"name": "unstakeRound",
"type": "uint256"
},
{
"indexed": true,
"internalType": "uint256",
"name": "unstakedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
"name": "UnstakeOrdered",
"type": "event"
},
{
"inputs": [
@@ -133,7 +204,7 @@
},
{
"internalType": "address[]",
"name": "_burnedTokens",
"name": "_sacrificedTokens",
"type": "address[]"
}
],
@@ -148,81 +219,6 @@
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address[]",
"name": "_burnedTokens",
"type": "address[]"
}
],
"name": "claim",
"outputs": [
{
"internalType": "uint256",
"name": "claimedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "_round",
"type": "uint256"
}
],
"name": "claim",
"outputs": [
{
"internalType": "uint256",
"name": "claimedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "_round",
"type": "uint256"
},
{
"internalType": "address[]",
"name": "_burnedTokens",
"type": "address[]"
}
],
"name": "claim",
"outputs": [
{
"internalType": "uint256",
"name": "claimedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "claim",
"outputs": [
{
"internalType": "uint256",
"name": "claimedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
@@ -251,7 +247,7 @@
},
{
"internalType": "address",
"name": "_burnedToken",
"name": "_sacrificedToken",
"type": "address"
}
],
@@ -269,32 +265,32 @@
{
"inputs": [
{
"internalType": "uint256",
"name": "_round",
"type": "uint256"
"internalType": "address",
"name": "beneficiary",
"type": "address"
},
{
"internalType": "address",
"name": "_burnedToken",
"type": "address"
"internalType": "uint256[]",
"name": "roundNumbers",
"type": "uint256[]"
}
],
"name": "claim",
"name": "getTotalRewardsOf",
"outputs": [
{
"internalType": "uint256",
"name": "claimedAmount",
"name": "totalRewardsAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "_memeBurner",
"name": "_memeAltar",
"type": "address"
},
{
@@ -323,7 +319,7 @@
},
{
"inputs": [],
"name": "memeBurner",
"name": "memeAltar",
"outputs": [
{
"internalType": "address",
@@ -347,6 +343,19 @@
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "orderUnstake",
"outputs": [
{
"internalType": "uint256",
"name": "unstakeRound",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
@@ -356,7 +365,7 @@
},
{
"internalType": "address[]",
"name": "burnableTokens",
"name": "sacrificableTokens",
"type": "address[]"
}
],
@@ -380,7 +389,7 @@
},
{
"internalType": "address",
"name": "_burnedToken",
"name": "_sacrificedToken",
"type": "address"
},
{
@@ -468,6 +477,11 @@
"name": "roundCompleted",
"type": "bool"
},
{
"internalType": "uint256",
"name": "totalDefaultRewards",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "totalRewards",
@@ -476,6 +490,150 @@
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "amount",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "deadline",
"type": "uint256"
},
{
"internalType": "uint8",
"name": "v",
"type": "uint8"
},
{
"internalType": "bytes32",
"name": "r",
"type": "bytes32"
},
{
"internalType": "bytes32",
"name": "s",
"type": "bytes32"
}
],
"name": "stakeToBeSecured",
"outputs": [
{
"internalType": "uint256",
"name": "stakedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256[]",
"name": "_rounds",
"type": "uint256[]"
},
{
"internalType": "address[]",
"name": "_sacrificedTokens",
"type": "address[]"
}
],
"name": "stakeToBeSecured",
"outputs": [
{
"internalType": "uint256",
"name": "stakedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "amount",
"type": "uint256"
}
],
"name": "stakeToBeSecured",
"outputs": [
{
"internalType": "uint256",
"name": "stakedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"name": "staked",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "unstakeRound",
"type": "uint256"
}
],
"name": "unstake",
"outputs": [
{
"internalType": "uint256",
"name": "unstakedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
},
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"name": "unstakeOrdered",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
}
]
}
src/assets/fonts/Inter-Regular.ttf
BIN
View File
Binary file not shown.
src/assets/fonts/Vampire.ttf
BIN
View File
Binary file not shown.
src/assets/img/fuel-noozle.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

src/assets/img/tokenomics.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 120 KiB

src/assets/sass/cards.sass → src/assets/sass/base.sass
+19
View File
@@ -1,3 +1,21 @@
.bloodline-devider
font-size: 42px
margin: 24px 0
text-align: center
.bloodline-border
padding: 24px 32px
border: 4px solid #000000
border-radius: 16px
.bloodline-badge
padding: 8px 16px 8px 16px
border-radius: 14px
background-color: #0F0F0F
display: flex
.bloodline-badge-icon
margin-right: 8px
.card
display: block
overflow: hidden
@@ -14,3 +32,4 @@
border-width: 0
border-radius: 4px
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2),0 1px 1px 0rgba(0, 0, 0, .14),0 1px 3px 0 rgba(0, 0, 0, .12)
background-color: $darkgrey
src/assets/sass/bubbles.sass
+106
View File
@@ -0,0 +1,106 @@
.wrapper
height: 100%
width: 100%
position: absolute
overflow: hidden
div
height: 15px
width: 15px
border: 2px solid rgba(139, 0, 0, 0.7)
border-radius: 50px
position: absolute
top: 10%
left: 10%
animation: 4s linear infinite
div .dot
height: 10px
width: 10px
border-radius: 50px
background: rgba(138, 62, 62, 0.5)
position: absolute
top: 20%
right: 20%
.wrapper div
&:nth-child(1)
top: 20%
left: 20%
animation: animate 8s linear infinite
&:nth-child(2)
top: 60%
left: 55%
animation: animate 10s linear infinite
&:nth-child(3)
top: 40%
left: 40%
animation: animate 3s linear infinite
&:nth-child(4)
top: 66%
left: 30%
animation: animate 7s linear infinite
&:nth-child(5)
top: 90%
left: 10%
animation: animate 9s linear infinite
&:nth-child(6)
top: 30%
left: 20%
animation: animate 5s linear infinite
&:nth-child(7)
top: 70%
left: 20%
animation: animate 8s linear infinite
&:nth-child(8)
top: 75%
left: 30%
animation: animate 10s linear infinite
&:nth-child(9)
top: 50%
left: 50%
animation: animate 6s linear infinite
&:nth-child(10)
top: 45%
left: 20%
animation: animate 10s linear infinite
&:nth-child(11)
top: 10%
left: 90%
animation: animate 9s linear infinite
&:nth-child(12)
top: 20%
left: 50%
animation: animate 7s linear infinite
&:nth-child(13)
top: 20%
left: 20%
animation: animate 8s linear infinite
&:nth-child(14)
top: 60%
left: 5%
animation: animate 6s linear infinite
&:nth-child(15)
top: 90%
left: 50%
animation: animate 9s linear infinite
@keyframes animate
0%
transform: scale(0) translateY(0) rotate(70deg)
100%
transform: scale(1.3) translateY(-50px) rotate(360deg)
src/assets/sass/buttons.sass
+4 -2
View File
@@ -1,10 +1,12 @@
.btn
&.btn-immortal
padding: 6px 24px
background-color: $button-background-color
background-color: $red
color: $button-color
font-size: 24px
padding: 16px 24px
gap: 8px
border-radius: 14px
&:hover,&:focus,&:active
background-color: lighten($button-background-color, 10%),
color: darken($button-color, 10%),
src/assets/sass/main.sass
+22 -4
View File
@@ -1,10 +1,22 @@
@import 'variables'
@import 'buttons'
@import 'cards'
@import 'base'
@import 'wave'
@import 'bubbles'
@font-face
font-family: 'Inter'
src: url("@/assets/fonts/Inter-Regular.ttf")
@font-face
font-family: 'Vampire'
src: url("@/assets/fonts/Vampire.ttf")
*
box-sizing: border-box
body
background-color: $secondary
color: $color2
background-color: #2D2D2D
color: $white
font-family: 'Inter', sans-serif
.main
padding-top: 120px
@@ -30,7 +42,13 @@ body
margin-right: auto
margin-left: auto
@media (min-width: 992px)
max-width: 1140px
max-width: 800px
.section-header-container
width: 655px
text-align: center
font-size: 24px
margin-top: 64px
margin-bottom: 64px
h1
font-weight: 700
src/assets/sass/variables.sass
+12 -4
View File
@@ -8,11 +8,16 @@ $tertiary: #A8A8A8
$tertiary-dark: darken($tertiary, 20%)
$tertiary-light: lighten($tertiary, 20%)
$color2: white
$color1: black
$white: #F9F9FA
$black: #0F0F0F
$grey: #808080
$red: #8B0000
$purple: #4B0082
$button-color: $color2
$button-background-color: $color1
$darkgrey: #202020
$button-color: $white
$button-background-color: $black
:root
--primary: #{$primary}
--primary-light: #{$primary-light}
@@ -23,6 +28,9 @@ $button-background-color: $color1
--tertiary: #{$tertiary}
--tertiary-light: #{$tertiary-light}
--tertiary-dark: #{$tertiary-dark}
--grey: #{$grey}
--purple: #{$purple}
--blood-color: #{$red}
// :root
// --font-size-text: 16px
// --font-size-title: 32px
src/assets/sass/wave.sass
+26
View File
@@ -0,0 +1,26 @@
/* Animation
.parallax > use
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite
&:nth-child(1)
animation-delay: -2s
animation-duration: 7s
&:nth-child(2)
animation-delay: -3s
animation-duration: 10s
&:nth-child(3)
animation-delay: -4s
animation-duration: 13s
&:nth-child(4)
animation-delay: -5s
animation-duration: 20s
@keyframes move-forever
0%
transform: translate3d(-90px, 0, 0)
100%
transform: translate3d(85px, 0, 0)
src/components/BloodChart.vue
+74 -45
View File
@@ -1,17 +1,50 @@
<template>
<div class="blood-chart-wrapper">
<div class="blood-chart-element" v-for="(coin, index) in dataPoints" :key="coin.name">
<div class="blood-chart-element" v-for="coin in dataPoints" :key="coin.name">
<div class="blood-chart-element-header">
<div class="blood-chart-coin">
<div :class="[{ drop: true, ['variant' + index]: true }]"></div>
</div>
<div class="blood-chart-coin"></div>
<div class="blood-chart-coin-title">{{ coin.name }}</div>
</div>
<div class="blood-chart-element-body">
<div class="blood-chart-bar-wrapper">
<div class="blood-chart-bar" :style="`height: ${coin.percentage}%`">{{ coin.percentage }}%</div>
<div class="blood-chart-bar" :style="`height: ${coin.percentage}%`">
<svg
class="waves"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none"
shape-rendering="auto"
>
<defs>
<path
id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
/>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(139, 0, 0,0.7)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(139, 0, 0,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(139, 0, 0,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#8B0000" />
</g>
</svg>
<div class="wrapper">
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
</div>
<div class="blood-chart-bar-percentage">{{ coin.percentage }}%</div>
</div>
</div>
</div>
<div class="blood-chart-element-footer">
<div class="blood-chart-amount">130,4b</div>
<div class="blood-chart-coin">$BLOOD</div>
</div>
</div>
</div>
</template>
@@ -20,76 +53,72 @@
const dataPoints = [
{
name: "PEPE",
percentage: 34.4,
percentage: 62.2,
},
{
name: "Shiba",
percentage: 50.4,
percentage: 31.2,
},
{
name: "Doge",
percentage: 42.4,
percentage: 54.5,
},
];
</script>
<style lang="sass">
.blood-chart-wrapper
height: 500px
height: 750px
display: inline-flex
gap: 48px
gap: 96px
.blood-chart-element
height: 100%
width: 50px
width: 80px
display: flex
flex-direction: column
.blood-chart-element-header
flex: 0 0 100px
.blood-chart-coin
height: 50px
width: 50px
border-radius: 50px
height: 80px
width: 80px
border-radius: 80px
background-color: grey
margin-left: auto
margin-right: auto
position: relative
margin-bottom: 16px
.blood-chart-coin-title
text-align: center
margin-bottom: 32px
font-size: 24px
.blood-chart-element-body
background-color: lightgrey
background-color: rgba(233, 233, 233, 0.2)
flex: 1 1 auto
border-radius: 8px 8px 40px 40px
.blood-chart-bar-wrapper
height: 100%
display: flex
flex-direction: column
.blood-chart-bar
margin-top: auto
background-color: red
.drop
width: 1.1em
height: 1.1em
border-radius: 0 100% 100% 100%
background-color: red
position: absolute
animation: drop 3s infinite both
top: 32px
&.variant0
left: 14%
animation-delay: -5.2s
&.variant1
left: 39%
animation-delay: -.4s
&.variant2
left: 55%
animation-delay: -1.5s
@keyframes drop
0%
transform: translateY(0) scaleX(.85) rotate(45deg)
animation-timing-function: ease-out
60%
transform: translateY(120%) scaleX(.85) rotate(45deg)
animation-timing-function: ease-in
80%, 100%
transform: translateY(440px) scaleX(.85) rotate(45deg)
background-color: var(--blood-color)
position: relative
border-radius: 8px 8px 40px 40px
.blood-chart-bar-percentage
font-size: 14px
text-align: center
margin-top: 16px
.waves
position: absolute
top: -8px
width: 100%
height: 10px
.blood-chart-element-footer
margin-top: 32px
text-align: center
.blood-chart-amount
font-size: 24px
margin-bottom: 8px
.blood-chart-coin
font-size: 16px
</style>
src/components/Navbar.vue
+49 -25
View File
@@ -36,9 +36,31 @@ onBeforeUnmount(() => {
<img alt="logo" class="logo" src="@/assets/img/vampir.png" />
</router-link>
</div>
<div class="navbar-center"></div>
<div class="navbar-text">Bloodline</div>
<div class="navbar-center">
<div class="navbar-social-links">
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-discord" />
</div>
<div class="social-bloodline-badge-text">Discord</div>
</div>
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-telegram" />
</div>
<div class="social-bloodline-badge-text">Telegram</div>
</div>
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-twitter" />
</div>
<div class="social-bloodline-badge-text">Twitter</div>
</div>
</div>
</div>
<div class="navbar-end">
<button v-if="!connected" @click="walletStore.connectWallet">connect</button>
<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
<span v-else> {{ address }}</span>
</div>
</div>
@@ -52,39 +74,41 @@ header
position: fixed
z-index: 3
box-sizing: border-box
background-color: grey
background-color: #202020
width: 100%
transform: translate3d(0,0,0)
transition: transform .3s ease,visibility 0s .3s linear
height: 128px
&.navbar--hidden
transform: translate3d(0,-100%,0)
.navbar-inner
display: flex
justify-content: space-between
padding: 0 20px
padding: 16px 24px
box-sizing: border-box
height: 100%
align-items: center
@media (min-width: 992px)
padding: 10px 80px
padding: 16px 24px
.navbar-text
font-family: 'Vampire', sans-serif
font-size: 64px
letter-spacing: 0.138em
.navbar-center
display: flex
align-items: center
.main-menu-links
margin-right: 48px
&:hover, &:active, &:focus
color: lighten(black, 20%)
.main-menu-link
cursor: pointer
margin-left: auto
.navbar-social-links
display: flex
gap: 18px
.social-bloodline-badge
font-size: 16px
padding: 8px 16px 8px 16px
border-radius: 14px
background-color: #0F0F0F
display: flex
.social-bloodline-badge-icon
margin-right: 8px
.navbar-end
display: flex
align-items: center
align-self: center
a
color: black
&:hover,&:focus, &:active
color: lighten(black, 20%)
.navbar-hamburger-open
font-size: 35px
.parry-twitter
font-size: 30px
margin-left: 32px
flex: 0 0 200px
justify-content: flex-end
</style>
src/components/SacrificeToken.vue
+57 -35
View File
@@ -1,5 +1,6 @@
<template>
<div class="sacrifice-wrapper card">
<div class="sacrifice-wrapper card bloodline-wrapper">
{{ activeToken.allowance }}
<div class="sacrifice-headline">Select Token</div>
<div class="sacrifice-select-tokens">
<div class="sacrifice-tokens">
@@ -15,37 +16,53 @@
</div>
</div>
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
<div class="sacrifice-from-wrapper">
<div class="sacrifice-from-wrapper bloodline-border">
<div class="sarcrifice-from-input">
<input type="number" v-model="tokenNumber" /><img src="@/assets/img/vampir.png" alt="vampir" />
<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" /><img
src="@/assets/img/vampir.png"
alt="vampir"
/>
</div>
<div class="value-adder">
<div class="sacrifice-adder-step" @click="addTokens(1000000)">+1m</div>
<div class="sacrifice-adder-step" @click="addTokens(10000000)">+10m</div>
<div class="sacrifice-adder-step" @click="addTokens(100000000)">+100m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000)">+1m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
<div class="sacrifice-adder-balance">Balance: {{ parseFloat(activeToken.balance) }}</div>
<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">Max</div>
</div>
</div>
<div class="sacrifice-divider">
<div class="sacrifice-divider bloodline-devider">
<font-awesome-icon :icon="['fas', 'arrow-down']" />
</div>
<div class="sacrifice-to-wrapper">
<div class="sacrifice-to-wrapper bloodline-border">
<div class="sarcrifice-from-input">
<div class="sacrifice-to-output">
<div class="sacrifice-to-output-coin">{{ activeToken.name }}</div>
<div class="sacrifice-to-output-rewards">2.312.310</div>
<div class="sacrifice-to-output-rewards">{{ output }}</div>
</div>
<img src="@/assets/img/vampir.png" alt="vampir" />
</div>
</div>
<div class="sacrifice-fees-info-wrapper">
<div class="sacrifice-fees-img">
<img src="@/assets/img/fuel-noozle.png" alt="fuel noozle" />
</div>
<div class="sacrifice-fees-body">
<div class="sacrifice-fees-body-header">
<div class="sacrifice-fees-body-header-title">Gas Support</div>
<div class="sacrifice-fees-body-header-amount">42Gwei</div>
</div>
<div class="sacrifice-fees-body-subheader">Increase amount to pay 97% less network fees.</div>
</div>
</div>
<div class="sacrifice-buttons-function-wrapper">
<div v-if="connected">
<div
class="btn btn-immortal"
v-if="activeToken.allowance > 0"
v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
@click="approvalData = tokenStore.sacrificeToken(1)"
>
<font-awesome-icon v-if="loading" icon="spinner" spin />
Sacrifce {{ activeToken.name }}
</div>
<div class="btn btn-immortal" v-else @click="approvalData = tokenStore.approveToken(1)">
@@ -53,16 +70,9 @@
</div>
</div>
<div v-else>
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect Wallet</div>
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
</div>
</div>
<div class="sacrifice-fees-info-wrapper">
<div class="sacrifice-feed-info">
<div class="sacrifice-fees-state">Disabled</div>
<div class="sacrifice-feed-amount">42Gwei</div>
</div>
<div class="sacrifice-feed-info-text">Increase amount to pay 97% less network fees.</div>
</div>
</div>
</div>
</template>
@@ -72,12 +82,13 @@ import { ref, defineProps, watch } from "vue";
import { useWalletStore } from "@/stores/wallet";
import { useTokenStore } from "@/stores/tokens";
import { storeToRefs } from "pinia";
import Helper from "@/utils/helper.js";
const walletStore = useWalletStore();
const { contract, connected } = storeToRefs(walletStore);
const tokenStore = useTokenStore();
const { activeToken } = storeToRefs(tokenStore);
const { activeToken, loading } = storeToRefs(tokenStore);
const props = defineProps({
data: Array,
@@ -86,14 +97,21 @@ const props = defineProps({
watch(
activeToken,
() => {
tokenNumber.value = 0;
tokenNumber.value = null;
},
{ deep: true }
);
const tokenNumber = ref(0);
const output = ref(0);
const approvalData = ref(null);
const processChange = Helper.debounce((e) => test(e));
async function test(e) {
console.log("hier", e);
output.value = await tokenStore.getRewardsFor(parseInt(e.target.value));
}
function addTokens(value) {
tokenNumber.value = tokenNumber.value + value;
}
@@ -102,8 +120,6 @@ function addTokens(value) {
<style lang="sass">
.sacrifice-wrapper
padding: 12px 24px
width: 450px
display: flex
flex-direction: column
margin-left: auto
@@ -121,8 +137,9 @@ function addTokens(value) {
width: 100%
justify-content: space-evenly
.sacrifice-token
width: 50px
height: 50px
width: 132px
height: 132px
border-radius: 16px
padding: 12px
border: 1px solid lightgrey
cursor: pointer
@@ -138,19 +155,26 @@ function addTokens(value) {
display: flex
justify-content: center
margin-top: 24px
.btn
padding: 16px 64px
.sacrifice-fees-info-wrapper
display: flex
border: 2px dashed var(--grey)
border-radius: 16px
padding: 16px 24px
margin-top: 24px
.sacrifice-feed-info
display: flex
.sacrifice-feed-amount
margin-left: auto
.sacrifice-fees-img
flex: 0 0 15%
.sacrifice-fees-body
flex: 1 1 auto
.sacrifice-fees-body-header
font-size: 24px
display: flex
flex-direction: row
justify-content: space-between
.sacrifice-from-to-wrapper
.sacrifice-divider
text-align: center
.sacrifice-from-wrapper,.sacrifice-to-wrapper
border: 1px solid black
padding: 16px 24px
.sarcrifice-from-input
display: flex
margin-bottom: 8px
@@ -171,9 +195,7 @@ function addTokens(value) {
display: flex
gap: 6px
.sacrifice-adder-step
padding: 0 12px
background-color: var(--tertiary)
border: 1px solid var(--tertiary-dark)
font-size: 14px
&:hover,
&:active,
&:focus
src/components/TokenClaim.vue
+57
View File
@@ -0,0 +1,57 @@
<template>
<div class="claim bloodline-border">
<div class="rewards-wrapper">
<div class="rewards-headline">Sacrafice Reward</div>
<div class="rewards-sacrifice-wrapper bloodline-border">
<div class="rewards-body">
<div class="rewards-coin">$BLOOD</div>
<div class="rewards-amount">0</div>
</div>
<img src="@/assets/img/vampir.png" alt="vampir" />
</div>
<div class="rewards-divider bloodline-devider">
<font-awesome-icon icon="fa-solid fa-plus" />
</div>
<div class="rewards-headline">Clan Reward</div>
<div class="rewards-clan-wrapper bloodline-border">
<div class="rewards-body">
<div class="rewards-coin">$BLOOD</div>
<div class="rewards-amount">0</div>
</div>
<img src="@/assets/img/vampir.png" alt="vampir" />
</div>
<div class="claim-button">
<div class="btn btn-immortal">Claim</div>
</div>
</div>
</div>
</template>
<script setup></script>
<style lang="sass">
.claim
display: flex
flex-direction: column
padding: 32px 40px
.claim-button
text-align: center
margin-top: 32px
.rewards-wrapper
width: 100%
.rewards-headline
font-size: 24px
padding: 0 0 4px 8px
.rewards-divider
text-align: center
.rewards-sacrifice-wrapper, .rewards-clan-wrapper
display: flex
.rewards-body
align-self: center
.rewards-coin
font-size: 24px
.rewards-amount
font-size: 40px
img
margin-left: auto
</style>
src/main.js
+4 -2
View File
@@ -14,10 +14,12 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
import { faArrowDown, faSpinner ,faPlus } from "@fortawesome/free-solid-svg-icons";
import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
/* add icons to the library */
library.add(faArrowDown);
library.add(faArrowDown, faDiscord, faTwitter, faTelegram, faSpinner, faPlus);
const app = createApp(App)
src/stores/contracts.js
+12
View File
@@ -0,0 +1,12 @@
import { defineStore } from "pinia";
export const useContractStore = defineStore("contracts", {
state: () => ({
list: {
}
}),
getters: {
},
actions: {
}
});
src/stores/tokens.js
+34 -13
View File
@@ -1,6 +1,7 @@
import { defineStore } from "pinia";
import Web3 from "web3";
import { useWalletStore } from "./wallet";
import { useContractStore } from "./contracts";
import Meme1Json from "@/assets/contracts/Meme1.json";
import Meme2Json from "@/assets/contracts/Meme2.json";
import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
@@ -411,8 +412,9 @@ export const useTokenStore = defineStore("token", {
abi: null,
balance: null,
contract: null,
allowance: null
allowance: null,
},
loading: false,
memeBurner: {
config: MemeBurnerJson,
contract: null
@@ -440,23 +442,42 @@ export const useTokenStore = defineStore("token", {
},
async approveToken(amount) {
const walletStore = useWalletStore();
this.loading = true;
var approve = await this.contract.methods
.approve(this.memeBurner.config.contractAddress, amount)
.send({ from: walletStore.address });
console.log("approve", approve);
console.log("this.contract", this.contract);
.send({ from: walletStore.address });
console.log("approve", approve);
this.loading = false;
return approve;
},
async sacrificeToken(amount) {
console.log("this.activeToken.", this.activeToken.contractAddress);
const walletStore = useWalletStore();
console.log("walletStore.address", walletStore.address);
var reward = await this.memeBurner.contract.methods
.sacrificeMeme(this.activeToken.contractAddress, "400000000000000000")
.call({ from: walletStore.address });
console.log("reward", reward);
},
getTokenContract(token) {
try {
this.loading = true;
console.log("this.activeToken.", this.activeToken.contractAddress);
const walletStore = useWalletStore();
console.log("walletStore.address", walletStore.address);
var reward = await this.memeBurner.contract.methods
.sacrificeMeme(this.activeToken.contractAddress, "400000000000000000")
.send({ from: walletStore.address });
console.log("reward", reward);
} catch (error) {
error.log(error);
} finally {
this.loading = false;
}
},
async getRewardsFor(amount) {
const contractsStore = useContractStore();
var rewards = await contractsStore.list.memeBurnerPublic.methods
.getRewardFor(this.activeToken.contractAddress, amount)
.call();
return rewards
},
getTokenContract(token) {
console.log("token", token);
const contractAddress = token.contractAddress;
console.log("contractAddress", contractAddress);
const activeToken = this.token.find((obj) => obj.contractAddress === contractAddress);
console.log("activeToken", activeToken);
const web3 = new Web3(window.ethereum);
src/stores/wallet.js
+22 -22
View File
@@ -15,17 +15,6 @@ export const useWalletStore = defineStore("wallet", {
increment() {
this.count++;
},
async disconnectWallet() {
// const permissions = await window.ethereum.request({
// method: 'wallet_requestPermissions',
// params: [{
// eth_accounts: {},
// }]
// });
// console.log("permissions", permissions);
this.connected = false;
this.address = null;
},
connectWallet() {
console.log("window.ethereum", window.ethereum);
// if (window.ethereum) {
@@ -33,15 +22,16 @@ export const useWalletStore = defineStore("wallet", {
.request({ method: "eth_requestAccounts" })
.then((data) => {
console.log("data", data);
this.address = data[0];
this.connected = true;
const tokenStore = useTokenStore();
if (tokenStore.activeToken.address) {
//Token selected but not refreshed
this.getTokenBalance(tokenStore.activeToken.address).then(
(data) => (tokenStore.activeToken.balance = data)
);
}
this.isConnected();
// this.address = data[0];
// this.connected = true;
// const tokenStore = useTokenStore();
// if (tokenStore.activeToken.address) {
// //Token selected but not refreshed
// this.getTokenBalance(tokenStore.activeToken.address).then(
// (data) => (tokenStore.activeToken.balance = data)
// );
// }
// console.log("permissions", permissions);
})
.catch((error) => {
@@ -62,23 +52,33 @@ export const useWalletStore = defineStore("wallet", {
},
async isConnected() {
try {
this.loading = true;
const accounts = await window.ethereum.request({ method: "eth_accounts" });
if (accounts.length) {
this.connected = true;
this.address = accounts[0];
console.log(`You're connected to: ${accounts[0]}`);
const web3 = new Web3(window.ethereum);
const tokenStore = useTokenStore();
console.log("tokenStore.activeToken", tokenStore.activeToken);
if (tokenStore.activeToken.contractAddress) {
tokenStore.activeToken.balance = await this.getTokenBalance(
tokenStore.activeToken
);
tokenStore.activeToken.allowance = await tokenStore.allowance();
}
tokenStore.memeBurner.contract = new web3.eth.Contract(
tokenStore.memeBurner.config.abi,
tokenStore.memeBurner.config.contractAddress
);
} else {
this.disconnectWallet();
console.log("Metamask is not connected");
this.connected = false;
}
} catch (error) {
console.log("error", error);
} finally {
this.loading = false;
}
}
src/utils/helper.js
+22
View File
@@ -0,0 +1,22 @@
export default class Helper {
static debounce(func, timeout = 300) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, timeout);
};
}
static createDebounce() {
let timeout = null;
return function (fnc, delayMs) {
clearTimeout(timeout);
timeout = setTimeout(() => {
fnc();
}, delayMs || 500);
};
}
}
src/views/HomeView.vue
+69 -50
View File
@@ -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