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,91 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+  icon: string
+  color: string
+  selected?: boolean
+  disabled?: boolean
+  variant?: 'gold' | 'purple' | 'blue' | 'orange'
+}>()
+
+defineEmits<{ select: [] }>()
+</script>
+
+<template>
+  <button
+    class="answer-option"
+    :class="[
+      variant ? `answer-option--${variant}` : '',
+      { 'answer-option--selected': selected, 'answer-option--disabled': disabled },
+    ]"
+    :disabled="disabled"
+    @click="$emit('select')"
+  >
+    <span class="answer-option__icon" aria-hidden="true">{{ icon }}</span>
+    <span class="answer-option__label">{{ label }}</span>
+  </button>
+</template>
+
+<style scoped>
+.answer-option {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+  padding: 16px 18px;
+  border-radius: var(--radius-lg);
+  font-size: 1.0625rem;
+  font-weight: 800;
+  color: var(--text-main);
+  min-height: 68px;
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
+  border: 2px solid rgba(255, 255, 255, 0.08);
+  background: var(--card-bg);
+}
+
+.answer-option:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.answer-option--gold {
+  background: linear-gradient(135deg, rgba(40, 60, 20, 0.9), rgba(20, 35, 12, 0.95));
+  border-color: rgba(34, 181, 75, 0.35);
+}
+
+.answer-option--purple {
+  background: linear-gradient(135deg, rgba(50, 25, 80, 0.9), rgba(25, 12, 50, 0.95));
+  border-color: rgba(118, 55, 201, 0.4);
+}
+
+.answer-option--blue {
+  background: linear-gradient(135deg, rgba(15, 45, 75, 0.9), rgba(8, 25, 50, 0.95));
+  border-color: rgba(22, 130, 203, 0.4);
+}
+
+.answer-option--orange {
+  background: linear-gradient(135deg, rgba(70, 40, 10, 0.9), rgba(40, 22, 6, 0.95));
+  border-color: rgba(241, 140, 22, 0.4);
+}
+
+.answer-option--selected {
+  border-color: var(--gold) !important;
+  box-shadow: 0 0 20px rgba(244, 174, 33, 0.25), inset 0 0 20px rgba(244, 174, 33, 0.05);
+}
+
+.answer-option--disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.answer-option__icon {
+  font-size: 1.875rem;
+  width: 44px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.answer-option__label {
+  flex: 1;
+  text-align: right;
+}
+</style>