initial commit

2023-06-10 12:14:46 +02:00
commit 879e30d250
37 changed files with 13394 additions and 0 deletions
@@ -0,0 +1,95 @@
+<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-header">
+				<div class="blood-chart-coin">
+					<div :class="[{ drop: true, ['variant' + index]: true }]"></div>
+				</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>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const dataPoints = [
+	{
+		name: "PEPE",
+		percentage: 34.4,
+	},
+	{
+		name: "Shiba",
+		percentage: 50.4,
+	},
+	{
+		name: "Doge",
+		percentage: 42.4,
+	},
+];
+</script>
+
+<style lang="sass">
+.blood-chart-wrapper
+    height: 500px
+    display: inline-flex
+    gap: 48px
+    .blood-chart-element
+        height: 100%
+        width: 50px
+        display: flex
+        flex-direction: column
+        .blood-chart-element-header
+            flex: 0 0 100px
+            .blood-chart-coin
+                height: 50px
+                width: 50px
+                border-radius: 50px
+                background-color: grey
+                margin-left: auto
+                margin-right: auto
+                position: relative
+        .blood-chart-element-body
+            background-color: lightgrey
+            flex: 1 1 auto
+            .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)
+</style>