start implementing frontend design

2023-06-18 10:48:50 +02:00
parent 89f47b3692
commit db41b03456
27 changed files with 997 additions and 346 deletions
@@ -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>