Adjust glass styles and theme
This commit is contained in:
Ruslan Bakiev
83
app/app.vue
83
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 = [
|
||||
|
||||
Reference in New Issue
Block a user