Added vue frontend project, fixed swagger path

2026-04-05 21:51:03 +03:00
parent 9d845c8899
commit 4902889401
35 changed files with 3810 additions and 475 deletions
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Calendar, Clock, MapPin } from 'lucide-vue-next';
+
+const todayEvents = [
+  {
+    time: '6:30 PM',
+    title: 'Family Dinner',
+    location: 'Home',
+    colorFrom: '#a855f7',
+    colorTo: '#9333ea',
+  },
+  {
+    time: '8:00 PM',
+    title: 'Movie Night',
+    location: 'Living Room',
+    colorFrom: '#3b82f6',
+    colorTo: '#2563eb',
+  },
+];
+</script>
+
+<template>
+  <div class="rounded-[18px] border border-white/[0.06] bg-[#16161F] p-5 shadow-[0_4px_20px_rgba(0,0,0,0.4)]">
+    <div class="mb-4 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <div class="flex h-9 w-9 items-center justify-center rounded-[12px] bg-purple-500/10">
+          <Calendar class="h-[18px] w-[18px] text-purple-400" :stroke-width="2" />
+        </div>
+        <div>
+          <h3 class="text-[15px] font-semibold text-white">Today</h3>
+          <p class="text-[12px] text-zinc-500">Wednesday, April 2</p>
+        </div>
+      </div>
+      <span class="text-[12px] font-medium text-zinc-600">{{ todayEvents.length }} events</span>
+    </div>
+
+    <div class="space-y-2.5">
+      <div
+        v-for="event in todayEvents"
+        :key="event.title"
+        class="group flex cursor-pointer items-center gap-3 rounded-[14px] border border-white/[0.04] bg-white/[0.02] p-3.5 transition-all hover:border-white/[0.08] hover:bg-white/[0.05]"
+      >
+        <div class="flex min-w-[52px] flex-col items-center justify-center rounded-[10px] border border-white/[0.06] bg-white/[0.04] py-2 px-2.5">
+          <Clock class="mb-1 h-3.5 w-3.5 text-zinc-500" :stroke-width="2" />
+          <span class="text-[13px] font-semibold leading-none text-white">{{ event.time }}</span>
+        </div>
+        <div class="min-w-0 flex-1">
+          <h4 class="mb-0.5 text-[14px] font-semibold text-white">{{ event.title }}</h4>
+          <div class="flex items-center gap-1 text-zinc-500">
+            <MapPin class="h-3 w-3" :stroke-width="2" />
+            <span class="text-[12px]">{{ event.location }}</span>
+          </div>
+        </div>
+        <div
+          class="h-12 w-1.5 rounded-full opacity-60 transition-opacity group-hover:opacity-100"
+          :style="{ background: `linear-gradient(to bottom, ${event.colorFrom}, ${event.colorTo})` }"
+        />
+      </div>
+    </div>
+  </div>
+</template>