initial commit

2023-06-10 12:14:46 +02:00
commit 879e30d250
37 changed files with 13394 additions and 0 deletions
@@ -0,0 +1,133 @@
+<script setup>
+import { storeToRefs } from "pinia";
+import SacrificeToken from "@/components/SacrificeToken.vue";
+import BloodChart from "@/components/BloodChart.vue";
+// import Web3 from "web3";
+
+// import { useWalletStore } from "@/stores/wallet";
+import { useTokenStore } from "@/stores/tokens";
+const tokenStore = useTokenStore();
+const { token } = storeToRefs(tokenStore);
+
+// let web3 = new Web3(
+// 	"https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN"
+// );
+</script>
+
+<template>
+	<main>
+		<div>
+			<sacrifice-token :data="token"></sacrifice-token>
+
+			<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>
+						<h2>Bloodline Clan</h2>
+						<p>Become the most powerful clan in a cycle to receive extra rewards.</p>
+						<table class="bonus-table">
+							<tbody>
+								<tr>
+									<th scope="row">1st</th>
+									<td>100% Bonus</td>
+								</tr>
+								<tr>
+									<th scope="row">2nd</th>
+									<td>50% Bonus</td>
+								</tr>
+								<tr>
+									<th scope="row">3rd</th>
+									<td>No Bonus</td>
+								</tr>
+							</tbody>
+						</table>
+						<div>
+							<blood-chart></blood-chart>
+						</div>
+					</div>
+				</div>
+			</section>
+			<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" />
+			</section>
+		</div>
+	</main>
+</template>
+
+<style lang="sass">
+.chart-wrapper-coin
+    display: flex
+    justify-content: space-evenly
+    width: 600px
+    .chart-coin
+        height: 50px
+        width: 50px
+        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
+    text-align: left
+    margin-left: auto
+    margin-right: auto
+#tokenomics
+    text-align: center
+    img
+        display: block
+        margin-left: auto
+        margin-right: auto
+        width: 50%
+.chart-wrapper
+    width: 600px
+    height: 600px
+    border: 1px solid blue
+    display: flex
+    justify-content: space-evenly
+    .chart-element
+        height: 100%
+        background-color: #ddd
+        display: flex
+        position: relative
+        .chart
+            width: 75px
+            color: white
+            margin-top: auto
+            text-align: center
+            padding-top: 10px
+</style>