From a3c040c0c7a6617eb972e1f46720012226265dc1 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Sat, 14 Feb 2026 16:29:28 +0700
Subject: [PATCH] Adjust glass styles and theme

---
 app/app.vue             | 83 +++++++++++++++++++++++++++-----------
 app/assets/css/main.css | 89 ++++++++++++++++++++++-------------------
 package-lock.json       |  7 ++++
 package.json            |  1 +
 4 files changed, 115 insertions(+), 65 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index feba5bd..3246fc2 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,9 +1,11 @@
 <template>
-  <div data-theme="acid" class="min-h-screen bg-mesh text-base-content">
+  <div data-theme="winter" class="min-h-screen text-base-content">
     <NuxtRouteAnnouncer />
-    <aside
-      class="glass-card fixed left-4 top-4 z-20 flex h-[calc(100vh-2rem)] w-[360px] flex-col rounded-3xl p-5"
-    >
+    <canvas id="canvas-basic" class="gradient-canvas" aria-hidden="true"></canvas>
+    <div class="relative z-10">
+      <aside
+        class="glass-panel fixed left-4 top-4 z-20 flex h-[calc(100vh-2rem)] w-[360px] flex-col rounded-3xl p-5"
+      >
           <div class="card glass-pane mb-3 rounded-2xl">
             <div class="card-body py-4">
               <div class="flex items-center gap-3">
@@ -66,7 +68,7 @@
     <main
       class="min-h-screen w-full px-4 py-6 md:px-8 lg:pl-[400px]"
     >
-      <section class="glass-card flex min-h-[calc(100vh-3rem)] flex-col gap-6 rounded-3xl p-6">
+      <section class="glass-panel flex min-h-[calc(100vh-3rem)] flex-col gap-6 rounded-3xl p-6">
           <div class="flex flex-wrap items-center justify-between gap-4">
             <div>
               <h1 class="section-title">{{ steps[currentStep].title }}</h1>
@@ -86,8 +88,8 @@
               </button>
             </div>
           </div>
-          <div v-if="currentStep === 0" class="grid gap-4 lg:grid-cols-[3fr_1fr]">
-            <div class="space-y-6 text-[18px] leading-relaxed text-slate-900">
+          <div v-if="currentStep === 0" class="grid gap-4 grid-cols-[minmax(0,2.6fr)_minmax(0,1fr)]">
+            <div class="min-w-0 space-y-6 text-[18px] leading-relaxed text-slate-900">
                 <input class="input input-bordered input-lg w-full text-base text-slate-900" value="Head of Growth" />
                 <div>
                   <p class="text-lg font-semibold text-slate-900">Общее описание</p>
@@ -163,7 +165,7 @@
                     </div>
             </div>
 
-            <div class="space-y-4">
+            <div class="min-w-0 space-y-4 max-w-[360px]">
               <div class="glass-card relative cursor-pointer rounded-2xl p-5">
                 <button class="btn btn-ghost btn-circle btn-sm absolute right-4 top-4">▶</button>
                 <div class="voice-wave">
@@ -178,7 +180,7 @@
                   <span class="voice-bar"></span>
                   <span class="voice-bar"></span>
                 </div>
-                <p class="mt-4 text-sm text-slate-300">
+                <p class="mt-4 text-sm text-slate-900">
                   Пройдите голосовое интервью — мы заполним всё за вас.
                 </p>
               </div>
@@ -341,8 +343,13 @@
                   <div class="flex items-center justify-between gap-4">
                     <div class="flex items-center gap-3">
                       <div class="avatar">
-                        <div class="w-10 rounded-full bg-slate-800">
-                          <span class="flex h-full items-center justify-center text-xs">ИС</span>
+                        <div class="w-10 rounded-full">
+                          <img
+                            alt="Ирина"
+                            src="https://i.pravatar.cc/120?img=5"
+                            class="h-full w-full rounded-full object-cover"
+                            loading="lazy"
+                          />
                         </div>
                       </div>
                       <div>
@@ -351,15 +358,15 @@
                     </div>
                   </div>
                   <div class="mt-3 flex flex-wrap items-center gap-3">
-                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                    <label class="flex items-center gap-2 text-xs text-slate-900">
                       <input type="radio" name="meet-1" class="radio radio-sm" />
                       Сегодня 16:00
                     </label>
-                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                    <label class="flex items-center gap-2 text-xs text-slate-900">
                       <input type="radio" name="meet-1" class="radio radio-sm" />
                       Завтра 11:30
                     </label>
-                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                    <label class="flex items-center gap-2 text-xs text-slate-900">
                       <input type="radio" name="meet-1" class="radio radio-sm" />
                       Ср 15:00
                     </label>
@@ -369,8 +376,13 @@
                   <div class="flex items-center justify-between gap-4">
                     <div class="flex items-center gap-3">
                       <div class="avatar">
-                        <div class="w-10 rounded-full bg-slate-800">
-                          <span class="flex h-full items-center justify-center text-xs">КД</span>
+                        <div class="w-10 rounded-full">
+                          <img
+                            alt="Кира"
+                            src="https://i.pravatar.cc/120?img=47"
+                            class="h-full w-full rounded-full object-cover"
+                            loading="lazy"
+                          />
                         </div>
                       </div>
                       <div>
@@ -379,15 +391,15 @@
                     </div>
                   </div>
                   <div class="mt-3 flex flex-wrap items-center gap-3">
-                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                    <label class="flex items-center gap-2 text-xs text-slate-900">
                       <input type="radio" name="meet-2" class="radio radio-sm" />
                       Сегодня 18:00
                     </label>
-                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                    <label class="flex items-center gap-2 text-xs text-slate-900">
                       <input type="radio" name="meet-2" class="radio radio-sm" />
                       Чт 12:00
                     </label>
-                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                    <label class="flex items-center gap-2 text-xs text-slate-900">
                       <input type="radio" name="meet-2" class="radio radio-sm" />
                       Пт 10:30
                     </label>
@@ -397,8 +409,13 @@
                   <div class="flex items-center justify-between gap-4">
                     <div class="flex items-center gap-3">
                       <div class="avatar">
-                        <div class="w-10 rounded-full bg-slate-800">
-                          <span class="flex h-full items-center justify-center text-xs">АМ</span>
+                        <div class="w-10 rounded-full">
+                          <img
+                            alt="Алексей"
+                            src="https://i.pravatar.cc/120?img=51"
+                            class="h-full w-full rounded-full object-cover"
+                            loading="lazy"
+                          />
                         </div>
                       </div>
                       <div>
@@ -407,15 +424,15 @@
                     </div>
                   </div>
                   <div class="mt-3 flex flex-wrap items-center gap-3">
-                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                    <label class="flex items-center gap-2 text-xs text-slate-900">
                       <input type="radio" name="meet-3" class="radio radio-sm" />
                       Ср 14:30
                     </label>
-                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                    <label class="flex items-center gap-2 text-xs text-slate-900">
                       <input type="radio" name="meet-3" class="radio radio-sm" />
                       Чт 16:00
                     </label>
-                    <label class="flex items-center gap-2 text-xs text-slate-300">
+                    <label class="flex items-center gap-2 text-xs text-slate-900">
                       <input type="radio" name="meet-3" class="radio radio-sm" />
                       Пт 09:30
                     </label>
@@ -433,11 +450,13 @@
         </div>
       </section>
     </main>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, nextTick, ref, watch } from 'vue'
+import Granim from 'granim'
 
 const steps = [
   {
@@ -635,6 +654,7 @@ const candidateCharts = new Map<number, any>()
 let vacancyChart: any = null
 let teamChart: any = null
 let echarts: any = null
+let granimInstance: any = null
 
 const setCandidateChartRef = (id: number) => (el: HTMLDivElement | null) => {
   if (el) {
@@ -743,6 +763,20 @@ const handleResize = () => {
 
 onMounted(async () => {
   syncStepFromRoute()
+  granimInstance = new Granim({
+    element: '#canvas-basic',
+    direction: 'radial',
+    isPausedWhenNotInView: true,
+    states: {
+      'default-state': {
+        gradients: [
+          ['#ff9966', '#ff5e62'],
+          ['#00F260', '#0575E6'],
+          ['#e1eec3', '#f05053']
+        ]
+      }
+    }
+  })
   await ensureEcharts()
   renderVacancyChart()
   renderTeamChart()
@@ -786,6 +820,7 @@ onBeforeUnmount(() => {
   teamChart?.dispose()
   candidateCharts.forEach((chart) => chart.dispose())
   candidateCharts.clear()
+  if (granimInstance?.pause) granimInstance.pause()
 })
 
 const chatByStep = [
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index f9b2fe0..2a03f6a 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1,37 +1,37 @@
 @import "tailwindcss";
 @plugin "daisyui";
 @plugin "daisyui/theme" {
-  name: "acid";
+  name: "winter";
   default: true;
   prefersdark: false;
   color-scheme: "light";
-  --color-base-100: oklch(98% 0 0);
-  --color-base-200: oklch(95% 0 0);
-  --color-base-300: oklch(91% 0 0);
-  --color-base-content: oklch(0% 0 0);
-  --color-primary: oklch(71.9% 0.357 330.759);
-  --color-primary-content: oklch(14.38% 0.071 330.759);
-  --color-secondary: oklch(73.37% 0.224 48.25);
-  --color-secondary-content: oklch(14.674% 0.044 48.25);
-  --color-accent: oklch(92.78% 0.264 122.962);
-  --color-accent-content: oklch(18.556% 0.052 122.962);
-  --color-neutral: oklch(21.31% 0.128 278.68);
-  --color-neutral-content: oklch(84.262% 0.025 278.68);
-  --color-info: oklch(60.72% 0.227 252.05);
-  --color-info-content: oklch(12.144% 0.045 252.05);
-  --color-success: oklch(85.72% 0.266 158.53);
-  --color-success-content: oklch(17.144% 0.053 158.53);
-  --color-warning: oklch(91.01% 0.212 100.5);
-  --color-warning-content: oklch(18.202% 0.042 100.5);
-  --color-error: oklch(64.84% 0.293 29.349);
-  --color-error-content: oklch(12.968% 0.058 29.349);
+  --color-base-100: oklch(100% 0 0);
+  --color-base-200: oklch(97.466% 0.011 259.822);
+  --color-base-300: oklch(93.268% 0.016 262.751);
+  --color-base-content: oklch(41.886% 0.053 255.824);
+  --color-primary: oklch(56.86% 0.255 257.57);
+  --color-primary-content: oklch(91.372% 0.051 257.57);
+  --color-secondary: oklch(42.551% 0.161 282.339);
+  --color-secondary-content: oklch(88.51% 0.032 282.339);
+  --color-accent: oklch(59.939% 0.191 335.171);
+  --color-accent-content: oklch(11.988% 0.038 335.171);
+  --color-neutral: oklch(19.616% 0.063 257.651);
+  --color-neutral-content: oklch(83.923% 0.012 257.651);
+  --color-info: oklch(88.127% 0.085 214.515);
+  --color-info-content: oklch(17.625% 0.017 214.515);
+  --color-success: oklch(80.494% 0.077 197.823);
+  --color-success-content: oklch(16.098% 0.015 197.823);
+  --color-warning: oklch(89.172% 0.045 71.47);
+  --color-warning-content: oklch(17.834% 0.009 71.47);
+  --color-error: oklch(73.092% 0.11 20.076);
+  --color-error-content: oklch(14.618% 0.022 20.076);
   --radius-selector: 2rem;
   --radius-field: 2rem;
   --radius-box: 2rem;
   --size-selector: 0.3125rem;
   --size-field: 0.3125rem;
   --border: 0.5px;
-  --depth: 1;
+  --depth: 0;
   --noise: 0;
 }
 
@@ -43,25 +43,28 @@ body,
 
 body {
   font-family: "IBM Plex Sans", sans-serif;
-  background: #f9f6ef;
+  background: #f7f3ea;
+}
+
+.glass-panel {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 }
 
 .glass-card {
-  background: rgba(255, 255, 255, 0.55);
-  border: 1px solid rgba(255, 255, 255, 0.8);
-  box-shadow:
-    0 24px 40px rgba(27, 32, 58, 0.12),
-    inset 0 1px 0 rgba(255, 255, 255, 0.75);
-  backdrop-filter: blur(24px) saturate(140%);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 .glass-pane {
-  background: rgba(255, 255, 255, 0.42);
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  box-shadow:
-    0 16px 28px rgba(27, 32, 58, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.6);
-  backdrop-filter: blur(16px) saturate(130%);
+  background: rgba(255, 255, 255, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
 }
 
 .section-title {
@@ -112,12 +115,6 @@ body {
   50% { transform: scaleY(1.2); opacity: 1; }
 }
 
-.bg-mesh {
-  background-image:
-    radial-gradient(1200px 600px at 10% -10%, rgba(67, 56, 118, 0.2), transparent 60%),
-    radial-gradient(900px 500px at 90% 10%, rgba(230, 184, 92, 0.18), transparent 60%),
-    linear-gradient(180deg, #f9f6ef 0%, #f2efe7 55%, #ebe8df 100%);
-}
 
 .reorder-move {
   transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
@@ -138,3 +135,13 @@ body {
   opacity: 0;
   transform: translateY(-10px) scale(0.98);
 }
+
+.gradient-canvas {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+  filter: saturate(1.1);
+}
diff --git a/package-lock.json b/package-lock.json
index 0a9d3fd..706b143 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "dependencies": {
         "@formkit/auto-animate": "^0.9.0",
         "echarts": "^6.0.0",
+        "granim": "^2.0.0",
         "nuxt": "^4.3.1",
         "vue": "^3.5.28",
         "vue-router": "^4.6.4"
@@ -6081,6 +6082,12 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/granim": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/granim/-/granim-2.0.0.tgz",
+      "integrity": "sha512-aqa79K49ndjoUBtpYzlO8sKcuVQED+5axvX0SveqTLDR+Fa2G42AGntuQ36ysCFOWGVkWCLfHowFwk+D/9rGDg==",
+      "license": "MIT"
+    },
     "node_modules/gzip-size": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",
diff --git a/package.json b/package.json
index b700c63..263b5bf 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@formkit/auto-animate": "^0.9.0",
     "echarts": "^6.0.0",
+    "granim": "^2.0.0",
     "nuxt": "^4.3.1",
     "vue": "^3.5.28",
     "vue-router": "^4.6.4"