Initial commit: Vue 3 Gold Land frontend

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-01 10:52:38 +02:00
commit 15b2ecd1d2
144 changed files with 11511 additions and 0 deletions
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    value: number
+    max: number
+    color?: string
+    height?: number
+    animated?: boolean
+    variant?: 'gold' | 'purple'
+  }>(),
+  {
+    color: 'var(--gold)',
+    height: 10,
+    animated: true,
+    variant: 'gold',
+  },
+)
+</script>
+
+<template>
+  <div class="progress-bar" :class="`progress-bar--${variant}`" :style="{ height: `${height}px` }">
+    <div
+      class="progress-bar__fill"
+      :class="{ 'progress-bar__fill--animated': animated }"
+      :style="{ width: `${Math.min(100, (value / max) * 100)}%`, background: color }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.progress-bar {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 999px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.progress-bar__fill {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--gold), var(--gold-light));
+  box-shadow: 0 0 10px rgba(244, 174, 33, 0.45);
+  position: relative;
+}
+
+.progress-bar__fill::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
+  border-radius: inherit;
+}
+
+.progress-bar--purple .progress-bar__fill {
+  background: linear-gradient(90deg, var(--purple), var(--purple-light));
+  box-shadow: 0 0 10px rgba(118, 55, 201, 0.4);
+}
+
+.progress-bar__fill--animated {
+  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>