20-02-2026
This commit is contained in:
parent
c62234e1ca
commit
98084de7d0
80 changed files with 9804 additions and 1771 deletions
33
frontend/src/components/AddEventButton.vue
Normal file
33
frontend/src/components/AddEventButton.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<button class="add-event-btn glass--button" @click="$emit('click')">
|
||||
<q-icon name="add" size="22px" :color="isDark ? 'white' : 'grey-8'" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
|
||||
defineEmits(['click'])
|
||||
|
||||
const $q = useQuasar()
|
||||
const isDark = computed(() => $q.dark.isActive)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.add-event-btn {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 30;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
511
frontend/src/components/EventPanel.vue
Normal file
511
frontend/src/components/EventPanel.vue
Normal file
|
|
@ -0,0 +1,511 @@
|
|||
<template>
|
||||
<Transition name="slide-up">
|
||||
<div v-if="eventsStore.panelOpen" class="event-panel glass--panel">
|
||||
<!-- Drag Handle — tap to close -->
|
||||
<div class="event-panel__handle" @click="eventsStore.closePanel()">
|
||||
<div class="event-panel__handle-bar"></div>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable content -->
|
||||
<div class="event-panel__scroll">
|
||||
<!-- Key Image -->
|
||||
<div class="event-panel__image-section">
|
||||
<div v-if="eventsStore.ghostImage" class="event-panel__image-wrap">
|
||||
<img :src="eventsStore.ghostImage" class="event-panel__image" alt="" />
|
||||
<span class="event-panel__image-badge">Key Image</span>
|
||||
</div>
|
||||
<div v-else class="event-panel__image-placeholder" @click="onAddImage">
|
||||
<q-icon name="add_photo_alternate" size="32px" color="grey-5" />
|
||||
<span>Key Image hinzufügen</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title — large, editable inline -->
|
||||
<q-input
|
||||
v-model="eventsStore.ghostTitle"
|
||||
placeholder="Was ist passiert?"
|
||||
borderless
|
||||
class="event-panel__title"
|
||||
input-class="event-panel__title-input"
|
||||
:dark="isDark"
|
||||
/>
|
||||
|
||||
<!-- Date row — tap to open QDate picker -->
|
||||
<div class="event-panel__date-row">
|
||||
<q-icon name="event" size="18px" class="event-panel__date-icon" />
|
||||
<span class="event-panel__date-label">{{ formattedDate }}</span>
|
||||
<q-popup-proxy transition-show="scale" transition-hide="scale">
|
||||
<q-date
|
||||
v-model="ghostDateSlash"
|
||||
mask="YYYY/MM/DD"
|
||||
:dark="isDark"
|
||||
:locale="dateLocale"
|
||||
minimal
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</div>
|
||||
|
||||
<!-- Emotional Level — card style with gradient track -->
|
||||
<div class="event-panel__card" :class="{ 'event-panel__card--dark': isDark }">
|
||||
<div class="event-panel__card-header">
|
||||
<span class="event-panel__card-label">Emotional Level</span>
|
||||
<span class="event-panel__emotion-value" :style="{ color: emotionColor }">
|
||||
{{ emotionLabel }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Gradient slider -->
|
||||
<div class="event-panel__slider-wrap">
|
||||
<q-slider
|
||||
v-model="eventsStore.ghostEmotion"
|
||||
:min="-1"
|
||||
:max="1"
|
||||
:step="0.05"
|
||||
track-size="8px"
|
||||
thumb-size="22px"
|
||||
class="event-panel__slider"
|
||||
:style="{
|
||||
'--gradient-bg': sliderGradientCSS,
|
||||
'--thumb-color': emotionColor
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="event-panel__slider-hints">
|
||||
<span>Sehr negativ</span>
|
||||
<span>Neutral</span>
|
||||
<span>Sehr positiv</span>
|
||||
</div>
|
||||
|
||||
<!-- Gradient Preset Selector -->
|
||||
<div class="event-panel__presets">
|
||||
<span class="event-panel__presets-label">Farbverlauf</span>
|
||||
<div class="event-panel__presets-grid">
|
||||
<div
|
||||
v-for="(preset, index) in gradientPresets"
|
||||
:key="index"
|
||||
class="event-panel__preset"
|
||||
:class="{ 'event-panel__preset--active': eventsStore.ghostGradientPreset === index }"
|
||||
:style="{ background: presetGradientCSS(preset.colors) }"
|
||||
:title="preset.name"
|
||||
@click="selectPreset(index)"
|
||||
></div>
|
||||
<!-- "None" option to clear preset -->
|
||||
<div
|
||||
class="event-panel__preset event-panel__preset--none"
|
||||
:class="{ 'event-panel__preset--active': eventsStore.ghostGradientPreset === null }"
|
||||
title="Standard"
|
||||
@click="selectPreset(null)"
|
||||
>
|
||||
<q-icon name="auto_awesome" size="12px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Beschreibung — card style -->
|
||||
<div class="event-panel__card" :class="{ 'event-panel__card--dark': isDark }">
|
||||
<span class="event-panel__card-label">Beschreibung</span>
|
||||
<q-input
|
||||
v-model="eventsStore.ghostNote"
|
||||
type="textarea"
|
||||
placeholder="Ein neutraler, aber wichtiger Tag"
|
||||
borderless
|
||||
autogrow
|
||||
class="event-panel__note"
|
||||
:dark="isDark"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Weitere Medien -->
|
||||
<div class="event-panel__card" :class="{ 'event-panel__card--dark': isDark }">
|
||||
<span class="event-panel__card-label">Weitere Medien</span>
|
||||
<div class="event-panel__media-grid">
|
||||
<div class="event-panel__media-add" @click="onAddMedia">
|
||||
<q-icon name="add_photo_alternate" size="24px" color="grey-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete (edit mode only) -->
|
||||
<div v-if="eventsStore.editingEventId" class="event-panel__delete">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
no-caps
|
||||
label="Event löschen"
|
||||
icon="delete_outline"
|
||||
color="negative"
|
||||
size="sm"
|
||||
@click="eventsStore.deleteEvent(eventsStore.editingEventId)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useEventsStore, emotionToColor, GRADIENT_PRESETS } from 'stores/events'
|
||||
|
||||
const $q = useQuasar()
|
||||
const eventsStore = useEventsStore()
|
||||
const isDark = computed(() => $q.dark.isActive)
|
||||
const gradientPresets = GRADIENT_PRESETS
|
||||
|
||||
// Current glow color based on emotion + gradient
|
||||
const emotionColor = computed(() => {
|
||||
if (eventsStore.ghostCustomColor) return eventsStore.ghostCustomColor
|
||||
return emotionToColor(eventsStore.ghostEmotion, eventsStore.ghostGradientPreset)
|
||||
})
|
||||
|
||||
// Date: store uses YYYY-MM-DD, QDate uses YYYY/MM/DD
|
||||
const ghostDateSlash = computed({
|
||||
get: () => eventsStore.ghostDate.replace(/-/g, '/'),
|
||||
set: (val) => { eventsStore.ghostDate = val.replace(/\//g, '-') }
|
||||
})
|
||||
|
||||
const formattedDate = computed(() => {
|
||||
const d = new Date(eventsStore.ghostDate)
|
||||
if (isNaN(d.getTime())) return eventsStore.ghostDate
|
||||
return d.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' })
|
||||
})
|
||||
|
||||
const dateLocale = {
|
||||
days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
|
||||
daysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
|
||||
months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
|
||||
monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
|
||||
}
|
||||
|
||||
const emotionLabel = computed(() => {
|
||||
const e = eventsStore.ghostEmotion
|
||||
if (e > 0.5) return 'Sehr positiv'
|
||||
if (e > 0.15) return 'Positiv'
|
||||
if (e > -0.15) return 'Neutral'
|
||||
if (e > -0.5) return 'Negativ'
|
||||
return 'Sehr negativ'
|
||||
})
|
||||
|
||||
// CSS gradient for the slider track
|
||||
const sliderGradientCSS = computed(() => {
|
||||
const idx = eventsStore.ghostGradientPreset
|
||||
if (idx !== null && GRADIENT_PRESETS[idx]) {
|
||||
const [neg, mid, pos] = GRADIENT_PRESETS[idx].colors
|
||||
return `linear-gradient(90deg, ${neg} 0%, ${mid} 50%, ${pos} 100%)`
|
||||
}
|
||||
// Default gradient matching the default emotionToColor
|
||||
return 'linear-gradient(90deg, #E91E63 0%, #9C27B0 20%, #2196F3 35%, #FFD700 50%, #FF6B35 65%, #FFD700 80%, #4CAF50 100%)'
|
||||
})
|
||||
|
||||
// CSS gradient for a preset swatch
|
||||
function presetGradientCSS(colors) {
|
||||
return `linear-gradient(90deg, ${colors[0]}, ${colors[1]}, ${colors[2]})`
|
||||
}
|
||||
|
||||
function selectPreset(index) {
|
||||
eventsStore.ghostGradientPreset = index
|
||||
// Clear custom color when selecting a gradient
|
||||
eventsStore.ghostCustomColor = null
|
||||
}
|
||||
|
||||
function onAddImage() {
|
||||
// TODO: File picker for key image
|
||||
}
|
||||
|
||||
function onAddMedia() {
|
||||
// TODO: File picker for additional media
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.event-panel {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
height: 75dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
.event-panel__handle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px 0 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.event-panel__handle-bar {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
|
||||
.event-panel__scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px 32px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Key Image */
|
||||
.event-panel__image-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.event-panel__image-wrap {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.event-panel__image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.event-panel__image-badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.event-panel__image-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
height: 120px;
|
||||
border-radius: 16px;
|
||||
border: 2px dashed rgba(128, 128, 128, 0.2);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.event-panel__image-placeholder:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
.event-panel__title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.event-panel__title :deep(.event-panel__title-input) {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Date row */
|
||||
.event-panel__date-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.event-panel__date-row:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.event-panel__date-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.event-panel__date-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Card sections */
|
||||
.event-panel__card {
|
||||
background: rgba(128, 128, 128, 0.06);
|
||||
border: 1px solid rgba(128, 128, 128, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.event-panel__card--dark {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.event-panel__card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.event-panel__card-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.event-panel__emotion-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Slider with gradient track via Quasar deep styling */
|
||||
.event-panel__slider-wrap {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* The actual visible track bar — apply gradient here */
|
||||
.event-panel__slider :deep(.q-slider__track) {
|
||||
background: var(--gradient-bg) !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Hide the default grey inner bar */
|
||||
.event-panel__slider :deep(.q-slider__inner) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Hide the blue selection bar */
|
||||
.event-panel__slider :deep(.q-slider__selection) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Thumb — SVG-based, use color for fill/stroke */
|
||||
.event-panel__slider :deep(.q-slider__thumb) {
|
||||
color: var(--thumb-color, #fff);
|
||||
}
|
||||
|
||||
.event-panel__slider :deep(.q-slider__thumb-shape) {
|
||||
filter: drop-shadow(0 0 6px var(--thumb-color, #fff));
|
||||
}
|
||||
|
||||
.event-panel__slider :deep(.q-slider__focus-ring) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.event-panel__slider-hints {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
opacity: 0.4;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Gradient Preset Selector */
|
||||
.event-panel__presets {
|
||||
margin-top: 16px;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.1);
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.event-panel__presets-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
opacity: 0.5;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.event-panel__presets-grid {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.event-panel__preset {
|
||||
width: 45px;
|
||||
height: 25px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
border: 2px solid #eee;
|
||||
transition: border-color 0.2s, transform 0.15s;
|
||||
}
|
||||
|
||||
.event-panel__preset:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.event-panel__preset--active {
|
||||
border-color: currentColor;
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
|
||||
.event-panel__preset--none {
|
||||
background: rgba(128, 128, 128, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Note */
|
||||
.event-panel__note {
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Media grid */
|
||||
.event-panel__media-grid {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.event-panel__media-add {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 10px;
|
||||
border: 2px dashed rgba(128, 128, 128, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.event-panel__media-add:hover {
|
||||
border-color: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
|
||||
/* Delete */
|
||||
.event-panel__delete {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 8px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Slide-up transition */
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.slide-up-enter-from,
|
||||
.slide-up-leave-to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
</style>
|
||||
658
frontend/src/components/FloatingLines.vue
Normal file
658
frontend/src/components/FloatingLines.vue
Normal file
|
|
@ -0,0 +1,658 @@
|
|||
<template>
|
||||
<div
|
||||
ref="containerRef"
|
||||
class="floating-lines-container"
|
||||
:style="containerStyle"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onBeforeUnmount, ref, computed, watch } from 'vue'
|
||||
import {
|
||||
Scene,
|
||||
OrthographicCamera,
|
||||
WebGLRenderer,
|
||||
PlaneGeometry,
|
||||
Mesh,
|
||||
ShaderMaterial,
|
||||
Vector3,
|
||||
Vector2,
|
||||
Clock
|
||||
} from 'three'
|
||||
|
||||
const props = defineProps({
|
||||
enabledWaves: { type: Array, default: () => ['middle'] },
|
||||
lineCount: { type: [Array, Number], default: () => [10] },
|
||||
numPoints: { type: Number, default: 0 },
|
||||
pointXValues: { type: Array, default: () => [] },
|
||||
pointYValues: { type: Array, default: () => [] },
|
||||
pointColors: { type: Array, default: () => [] },
|
||||
lineSpread: { type: Number, default: 0.05 },
|
||||
fanSpread: { type: Number, default: 0.05 },
|
||||
lineSharpness: { type: Number, default: 8.0 },
|
||||
waveFrequency: { type: Number, default: 7.0 },
|
||||
bezierCurvature: { type: Number, default: 0.2 },
|
||||
circleRadiusPx: { type: Number, default: 75 },
|
||||
circleGlowSize: { type: Number, default: 18 },
|
||||
circleGlowStrength: { type: Number, default: 1.5 },
|
||||
animationSpeed: { type: Number, default: 1 },
|
||||
linesGradient: { type: Array, default: () => ['#e947f5', '#2f4ba2', '#0a0a12'] },
|
||||
bgColorCenter: { type: String, default: '#0a0514' },
|
||||
bgColorEdge: { type: String, default: '#000000' },
|
||||
backgroundImage: { type: String, default: '' },
|
||||
mixBlendMode: { type: String, default: 'screen' },
|
||||
interactive: { type: Boolean, default: false },
|
||||
parallax: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
const containerStyle = computed(() => {
|
||||
const style = {}
|
||||
if (props.backgroundImage) {
|
||||
style.backgroundImage = `url('${props.backgroundImage}')`
|
||||
style.backgroundSize = 'cover'
|
||||
style.backgroundPosition = 'center'
|
||||
style.backgroundRepeat = 'no-repeat'
|
||||
}
|
||||
return style
|
||||
})
|
||||
|
||||
// --- Shader Definitions ---
|
||||
const vertexShader = `
|
||||
precision highp float;
|
||||
|
||||
void main() {
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`
|
||||
|
||||
const fragmentShader = `
|
||||
precision highp float;
|
||||
|
||||
uniform float iTime;
|
||||
uniform vec3 iResolution;
|
||||
uniform float animationSpeed;
|
||||
|
||||
uniform bool enableTop;
|
||||
uniform bool enableMiddle;
|
||||
uniform bool enableBottom;
|
||||
|
||||
uniform int topLineCount;
|
||||
uniform int middleLineCount;
|
||||
uniform int bottomLineCount;
|
||||
|
||||
uniform float topLineDistance;
|
||||
uniform float bottomLineDistance;
|
||||
|
||||
uniform vec3 topWavePosition;
|
||||
uniform vec3 bottomWavePosition;
|
||||
|
||||
uniform int numPoints;
|
||||
uniform float pointX[8];
|
||||
uniform float pointY[8];
|
||||
uniform float lineSpread;
|
||||
uniform float fanSpread;
|
||||
uniform float lineSharpness;
|
||||
uniform float waveFrequency;
|
||||
uniform float bezierCurvature;
|
||||
uniform float circleRadiusPx;
|
||||
uniform float circleGlowSize;
|
||||
uniform float circleGlowStrength;
|
||||
uniform vec3 pointColor[8];
|
||||
|
||||
uniform vec2 iMouse;
|
||||
uniform bool interactive;
|
||||
uniform float bendRadius;
|
||||
uniform float bendStrength;
|
||||
uniform float bendInfluence;
|
||||
|
||||
uniform bool parallax;
|
||||
uniform float parallaxStrength;
|
||||
uniform vec2 parallaxOffset;
|
||||
|
||||
uniform vec3 lineGradient[8];
|
||||
uniform int lineGradientCount;
|
||||
uniform vec3 bgColorCenter;
|
||||
uniform vec3 bgColorEdge;
|
||||
|
||||
const vec3 BLACK = vec3(0.0);
|
||||
const vec3 PINK = vec3(233.0, 71.0, 245.0) / 255.0;
|
||||
const vec3 BLUE = vec3(47.0, 75.0, 162.0) / 255.0;
|
||||
|
||||
mat2 rotate(float r) {
|
||||
return mat2(cos(r), sin(r), -sin(r), cos(r));
|
||||
}
|
||||
|
||||
vec3 background_color(vec2 uv) {
|
||||
vec3 col = vec3(0.0);
|
||||
float y = sin(uv.x - 0.2) * 0.3 - 0.1;
|
||||
float m = uv.y - y;
|
||||
col += mix(BLUE, BLACK, smoothstep(0.0, 1.0, abs(m)));
|
||||
col += mix(PINK, BLACK, smoothstep(0.0, 1.0, abs(m - 0.8)));
|
||||
return col * 0.5;
|
||||
}
|
||||
|
||||
vec3 getLineColor(float t, vec3 baseColor) {
|
||||
if (lineGradientCount <= 0) {
|
||||
return baseColor;
|
||||
}
|
||||
|
||||
vec3 gradientColor;
|
||||
|
||||
if (lineGradientCount == 1) {
|
||||
gradientColor = lineGradient[0];
|
||||
} else {
|
||||
float clampedT = clamp(t, 0.0, 0.9999);
|
||||
float scaled = clampedT * float(lineGradientCount - 1);
|
||||
int idx = int(floor(scaled));
|
||||
float f = fract(scaled);
|
||||
int idx2 = min(idx + 1, lineGradientCount - 1);
|
||||
|
||||
vec3 c1 = lineGradient[idx];
|
||||
vec3 c2 = lineGradient[idx2];
|
||||
|
||||
gradientColor = mix(c1, c2, f);
|
||||
}
|
||||
|
||||
return gradientColor * 0.5;
|
||||
}
|
||||
|
||||
vec3 drawCircle(vec2 uv, vec2 center, float r, vec3 color) {
|
||||
float d = length(uv - center);
|
||||
|
||||
float glowW = circleGlowSize / iResolution.y * 2.0;
|
||||
float glow = exp(-pow(max(d - r, 0.0) / glowW, 2.0)) * circleGlowStrength;
|
||||
float fog = 0.008 / max(d * d * 3.0 + 0.016, 0.001);
|
||||
|
||||
float aa = 1.5 / iResolution.y;
|
||||
float core = 1.0 - smoothstep(r - aa, r + aa, d);
|
||||
|
||||
vec3 result = color * (glow + fog) * (1.0 - core);
|
||||
result += vec3(core);
|
||||
return result;
|
||||
}
|
||||
|
||||
float bezierClosestT(vec2 q, vec2 p0, vec2 pc, vec2 p1) {
|
||||
float bestT = 0.0;
|
||||
float bestD = 1e9;
|
||||
for (int k = 0; k <= 8; ++k) {
|
||||
float t = float(k) / 8.0;
|
||||
float mt = 1.0 - t;
|
||||
vec2 b = mt*mt*p0 + 2.0*mt*t*pc + t*t*p1;
|
||||
float d = dot(q - b, q - b);
|
||||
if (d < bestD) { bestD = d; bestT = t; }
|
||||
}
|
||||
|
||||
vec2 A = pc - p0;
|
||||
vec2 B = p0 - 2.0*pc + p1;
|
||||
vec2 D = p0 - q;
|
||||
float a = 2.0*dot(B,B);
|
||||
float bco = 6.0*dot(A,B);
|
||||
float c = 4.0*dot(A,A) + 2.0*dot(D,B);
|
||||
float dco = 2.0*dot(D,A);
|
||||
|
||||
float t = clamp(bestT, 0.001, 0.999);
|
||||
for (int k = 0; k < 4; ++k) {
|
||||
float f = a*t*t*t + bco*t*t + c*t + dco;
|
||||
float fp = 3.0*a*t*t + 2.0*bco*t + c;
|
||||
if (abs(fp) > 1e-8) t -= f / fp;
|
||||
t = clamp(t, -0.08, 1.08);
|
||||
}
|
||||
return t;
|
||||
}
|
||||
|
||||
float waveFocal(vec2 uv, float fi, float totalLines, vec2 sp, vec2 ep) {
|
||||
vec2 seg = ep - sp;
|
||||
float segLen = length(seg);
|
||||
if (segLen < 0.001) return 0.0;
|
||||
vec2 segDir = seg / segLen;
|
||||
vec2 segPerp = vec2(-segDir.y, segDir.x);
|
||||
vec2 pc = (sp + ep) * 0.5 + segPerp * segLen * bezierCurvature;
|
||||
|
||||
float t = bezierClosestT(uv, sp, pc, ep);
|
||||
float mt = 1.0 - t;
|
||||
|
||||
vec2 curvePos = mt*mt*sp + 2.0*mt*t*pc + t*t*ep;
|
||||
vec2 tang = normalize(2.0*mt*(pc - sp) + 2.0*t*(ep - pc));
|
||||
vec2 norm = vec2(-tang.y, tang.x);
|
||||
|
||||
float s = dot(uv - curvePos, norm);
|
||||
|
||||
float time = iTime * animationSpeed;
|
||||
float normalizedI = totalLines > 1.0 ? fi / (totalLines - 1.0) : 0.5;
|
||||
|
||||
float envelope = sin(t * 3.14159265359);
|
||||
float linePos = (normalizedI - 0.5) * fanSpread * envelope;
|
||||
float amp = lineSpread * 0.3 * envelope;
|
||||
float waveDisp = sin(t * waveFrequency + fi * 1.3 + time * 0.4) * amp
|
||||
* sin(fi * 0.9 + time * 0.18);
|
||||
|
||||
float dist = s - linePos - waveDisp;
|
||||
float fade = smoothstep(-0.06, 0.04, t) * smoothstep(1.06, 0.96, t);
|
||||
|
||||
return fade * (0.013 / max(abs(dist) * lineSharpness + 0.004, 1e-4) + 0.003);
|
||||
}
|
||||
|
||||
float wave(vec2 uv, float offset, vec2 screenUv, vec2 mouseUv, bool shouldBend) {
|
||||
float time = iTime * animationSpeed;
|
||||
|
||||
float x_offset = offset;
|
||||
float x_movement = time * 0.1;
|
||||
float amp = sin(offset + time * 0.2) * 0.3;
|
||||
float y = sin(uv.x + x_offset + x_movement) * amp;
|
||||
|
||||
if (shouldBend) {
|
||||
vec2 d = screenUv - mouseUv;
|
||||
float influence = exp(-dot(d, d) * bendRadius);
|
||||
float bendOffset = (mouseUv.y - screenUv.y) * influence * bendStrength * bendInfluence;
|
||||
y += bendOffset;
|
||||
}
|
||||
|
||||
float m = uv.y - y;
|
||||
return 0.0175 / max(abs(m) + 0.01, 1e-3) + 0.01;
|
||||
}
|
||||
|
||||
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
||||
vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
|
||||
baseUv.y *= -1.0;
|
||||
|
||||
if (parallax) {
|
||||
baseUv += parallaxOffset;
|
||||
}
|
||||
|
||||
vec3 col = vec3(0.0);
|
||||
|
||||
vec3 b = lineGradientCount > 0 ? bgColorCenter : background_color(baseUv);
|
||||
|
||||
vec2 mouseUv = vec2(0.0);
|
||||
if (interactive) {
|
||||
mouseUv = (2.0 * iMouse - iResolution.xy) / iResolution.y;
|
||||
mouseUv.y *= -1.0;
|
||||
}
|
||||
|
||||
if (enableBottom) {
|
||||
for (int i = 0; i < bottomLineCount; ++i) {
|
||||
float fi = float(i);
|
||||
float t = fi / max(float(bottomLineCount - 1), 1.0);
|
||||
vec3 lineCol = getLineColor(t, b);
|
||||
|
||||
float angle = bottomWavePosition.z * log(length(baseUv) + 1.0);
|
||||
vec2 ruv = baseUv * rotate(angle);
|
||||
col += lineCol * wave(
|
||||
ruv + vec2(bottomLineDistance * fi + bottomWavePosition.x, bottomWavePosition.y),
|
||||
1.5 + 0.2 * fi,
|
||||
baseUv,
|
||||
mouseUv,
|
||||
interactive
|
||||
) * 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
if (enableMiddle) {
|
||||
const int MAX_PTS = 8;
|
||||
const int MAX_SEGS = 7;
|
||||
float r = circleRadiusPx / iResolution.y * 2.0;
|
||||
|
||||
// Segments: connect consecutive points using pointX[] and pointY[]
|
||||
for (int s = 0; s < MAX_SEGS; ++s) {
|
||||
if (s >= numPoints - 1) break;
|
||||
|
||||
vec2 sp = vec2(pointX[s], pointY[s]);
|
||||
vec2 ep = vec2(pointX[s + 1], pointY[s + 1]);
|
||||
|
||||
vec2 pd = ep - sp;
|
||||
float pl = length(pd);
|
||||
vec2 pa = pl > 0.001 ? pd / pl : vec2(1.0, 0.0);
|
||||
float t_seg = clamp(dot(baseUv - sp, pa) / pl, 0.0, 1.0);
|
||||
vec3 lineCol = mix(pointColor[s], pointColor[s + 1], t_seg);
|
||||
|
||||
vec2 segD = ep - sp;
|
||||
float segL = length(segD);
|
||||
vec2 segDir = segL > 0.001 ? segD / segL : vec2(1.0, 0.0);
|
||||
vec2 sPerp = vec2(-segDir.y, segDir.x);
|
||||
vec2 pc = (sp + ep) * 0.5 + sPerp * segL * bezierCurvature;
|
||||
|
||||
float bt = bezierClosestT(baseUv, sp, pc, ep);
|
||||
float bmt = 1.0 - bt;
|
||||
vec2 bPos = bmt*bmt*sp + 2.0*bmt*bt*pc + bt*bt*ep;
|
||||
float bDist = length(baseUv - bPos);
|
||||
float fogFade = smoothstep(-0.06, 0.05, bt) * smoothstep(1.06, 0.95, bt);
|
||||
float fogEnv = sin(bt * 3.14159265359);
|
||||
float segFog = fogFade * fogEnv * 0.0018 / max(bDist * bDist * 4.0 + 0.012, 0.001);
|
||||
col += lineCol * segFog;
|
||||
|
||||
for (int i = 0; i < middleLineCount; ++i) {
|
||||
col += lineCol * waveFocal(baseUv, float(i), float(middleLineCount), sp, ep);
|
||||
}
|
||||
}
|
||||
|
||||
// Circles at each point
|
||||
for (int p = 0; p < MAX_PTS; ++p) {
|
||||
if (p >= numPoints) break;
|
||||
vec3 circCol = pointColor[p];
|
||||
col += drawCircle(baseUv, vec2(pointX[p], pointY[p]), r, circCol);
|
||||
}
|
||||
}
|
||||
|
||||
if (enableTop) {
|
||||
for (int i = 0; i < topLineCount; ++i) {
|
||||
float fi = float(i);
|
||||
float t = fi / max(float(topLineCount - 1), 1.0);
|
||||
vec3 lineCol = getLineColor(t, b);
|
||||
|
||||
float angle = topWavePosition.z * log(length(baseUv) + 1.0);
|
||||
vec2 ruv = baseUv * rotate(angle);
|
||||
ruv.x *= -1.0;
|
||||
col += lineCol * wave(
|
||||
ruv + vec2(topLineDistance * fi + topWavePosition.x, topWavePosition.y),
|
||||
1.0 + 0.2 * fi,
|
||||
baseUv,
|
||||
mouseUv,
|
||||
interactive
|
||||
) * 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
float dist = length(baseUv) / 1.8;
|
||||
vec3 bg = mix(bgColorCenter, bgColorEdge, clamp(dist, 0.0, 1.0));
|
||||
fragColor = vec4(clamp(bg + col, 0.0, 1.0), 1.0);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec4 color = vec4(0.0);
|
||||
mainImage(color, gl_FragCoord.xy);
|
||||
gl_FragColor = color;
|
||||
}
|
||||
`
|
||||
|
||||
// --- Helpers ---
|
||||
const MAX_GRADIENT_STOPS = 8
|
||||
|
||||
function hexToVec3(hex) {
|
||||
let value = hex.trim()
|
||||
if (value.startsWith('#')) value = value.slice(1)
|
||||
let r = 255, g = 255, b = 255
|
||||
if (value.length === 3) {
|
||||
r = parseInt(value[0] + value[0], 16)
|
||||
g = parseInt(value[1] + value[1], 16)
|
||||
b = parseInt(value[2] + value[2], 16)
|
||||
} else if (value.length === 6) {
|
||||
r = parseInt(value.slice(0, 2), 16)
|
||||
g = parseInt(value.slice(2, 4), 16)
|
||||
b = parseInt(value.slice(4, 6), 16)
|
||||
}
|
||||
return new Vector3(r / 255, g / 255, b / 255)
|
||||
}
|
||||
|
||||
// --- Component Logic ---
|
||||
const containerRef = ref(null)
|
||||
|
||||
let scene = null
|
||||
let camera = null
|
||||
let renderer = null
|
||||
let material = null
|
||||
let geometry = null
|
||||
let mesh = null
|
||||
let clock = null
|
||||
let rafId = null
|
||||
let resizeObserver = null
|
||||
let uniforms = null
|
||||
|
||||
// Mouse tracking
|
||||
let targetMouse = null
|
||||
let currentMouse = null
|
||||
let targetInfluence = 0
|
||||
let currentInfluence = 0
|
||||
let targetParallax = null
|
||||
let currentParallax = null
|
||||
const mouseDamping = 0.05
|
||||
|
||||
function getLineCount(waveType) {
|
||||
if (typeof props.lineCount === 'number') return props.lineCount
|
||||
if (!props.enabledWaves.includes(waveType)) return 0
|
||||
const index = props.enabledWaves.indexOf(waveType)
|
||||
return props.lineCount[index] ?? 6
|
||||
}
|
||||
|
||||
function applyGradient() {
|
||||
if (!uniforms) return
|
||||
const lines = props.linesGradient.filter(s => s && s.trim().length > 0)
|
||||
const stops = lines.slice(0, MAX_GRADIENT_STOPS)
|
||||
uniforms.lineGradientCount.value = stops.length
|
||||
stops.forEach((hex, i) => {
|
||||
const c = hexToVec3(hex)
|
||||
uniforms.lineGradient.value[i].set(c.x, c.y, c.z)
|
||||
})
|
||||
}
|
||||
|
||||
function applyPointColors() {
|
||||
if (!uniforms) return
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const hex = props.pointColors[i]
|
||||
if (hex) {
|
||||
const c = hexToVec3(hex)
|
||||
uniforms.pointColor.value[i].set(c.x, c.y, c.z)
|
||||
} else {
|
||||
uniforms.pointColor.value[i].set(1, 1, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyBgColors() {
|
||||
if (!uniforms) return
|
||||
const center = hexToVec3(props.bgColorCenter)
|
||||
uniforms.bgColorCenter.value.set(center.x, center.y, center.z)
|
||||
const edge = hexToVec3(props.bgColorEdge)
|
||||
uniforms.bgColorEdge.value.set(edge.x, edge.y, edge.z)
|
||||
}
|
||||
|
||||
// Watch all props for live updates
|
||||
watch(() => props.animationSpeed, (v) => { if (uniforms) uniforms.animationSpeed.value = v })
|
||||
watch(() => props.lineCount, () => {
|
||||
if (!uniforms) return
|
||||
uniforms.middleLineCount.value = props.enabledWaves.includes('middle') ? getLineCount('middle') : 0
|
||||
})
|
||||
watch(() => props.lineSpread, (v) => { if (uniforms) uniforms.lineSpread.value = v })
|
||||
watch(() => props.fanSpread, (v) => { if (uniforms) uniforms.fanSpread.value = v })
|
||||
watch(() => props.lineSharpness, (v) => { if (uniforms) uniforms.lineSharpness.value = v })
|
||||
watch(() => props.waveFrequency, (v) => { if (uniforms) uniforms.waveFrequency.value = v })
|
||||
watch(() => props.bezierCurvature, (v) => { if (uniforms) uniforms.bezierCurvature.value = v })
|
||||
watch(() => props.circleRadiusPx, (v) => { if (uniforms) uniforms.circleRadiusPx.value = v })
|
||||
watch(() => props.circleGlowSize, (v) => { if (uniforms) uniforms.circleGlowSize.value = v })
|
||||
watch(() => props.circleGlowStrength, (v) => { if (uniforms) uniforms.circleGlowStrength.value = v })
|
||||
watch(() => props.numPoints, (v) => { if (uniforms) uniforms.numPoints.value = v })
|
||||
watch(() => props.pointXValues, (values) => {
|
||||
if (!uniforms) return
|
||||
for (let i = 0; i < 8; i++) {
|
||||
uniforms.pointX.value[i] = values[i] ?? 0
|
||||
}
|
||||
}, { deep: true })
|
||||
watch(() => props.pointYValues, (values) => {
|
||||
if (!uniforms) return
|
||||
for (let i = 0; i < 8; i++) {
|
||||
uniforms.pointY.value[i] = values[i] ?? 0
|
||||
}
|
||||
}, { deep: true })
|
||||
watch(() => props.pointColors, applyPointColors, { deep: true })
|
||||
watch(() => props.linesGradient, applyGradient, { deep: true })
|
||||
watch(() => props.bgColorCenter, applyBgColors)
|
||||
watch(() => props.bgColorEdge, applyBgColors)
|
||||
|
||||
onMounted(() => {
|
||||
if (!containerRef.value) return
|
||||
|
||||
targetMouse = new Vector2(-1000, -1000)
|
||||
currentMouse = new Vector2(-1000, -1000)
|
||||
targetParallax = new Vector2(0, 0)
|
||||
currentParallax = new Vector2(0, 0)
|
||||
|
||||
scene = new Scene()
|
||||
camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
|
||||
camera.position.z = 1
|
||||
|
||||
renderer = new WebGLRenderer({ antialias: true, alpha: false })
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2))
|
||||
renderer.domElement.style.width = '100%'
|
||||
renderer.domElement.style.height = '100%'
|
||||
renderer.domElement.style.display = 'block'
|
||||
renderer.domElement.style.mixBlendMode = props.mixBlendMode
|
||||
containerRef.value.appendChild(renderer.domElement)
|
||||
|
||||
const middleLineCount = props.enabledWaves.includes('middle') ? getLineCount('middle') : 0
|
||||
|
||||
// Initial point positions (UV space, no flip)
|
||||
const initX = [...props.pointXValues].slice(0, 8).concat(Array(8).fill(0)).slice(0, 8)
|
||||
const initY = [...props.pointYValues].slice(0, 8).concat(Array(8).fill(0)).slice(0, 8)
|
||||
|
||||
uniforms = {
|
||||
iTime: { value: 0 },
|
||||
iResolution: { value: new Vector3(1, 1, 1) },
|
||||
animationSpeed: { value: props.animationSpeed },
|
||||
|
||||
enableTop: { value: props.enabledWaves.includes('top') },
|
||||
enableMiddle: { value: props.enabledWaves.includes('middle') },
|
||||
enableBottom: { value: props.enabledWaves.includes('bottom') },
|
||||
|
||||
topLineCount: { value: 0 },
|
||||
middleLineCount: { value: middleLineCount },
|
||||
bottomLineCount: { value: 0 },
|
||||
|
||||
topLineDistance: { value: 0.01 },
|
||||
bottomLineDistance: { value: 0.01 },
|
||||
|
||||
topWavePosition: { value: new Vector3(10.0, 0.5, -0.4) },
|
||||
bottomWavePosition: { value: new Vector3(2.0, -0.7, -1) },
|
||||
|
||||
numPoints: { value: props.numPoints },
|
||||
pointX: { value: initX },
|
||||
pointY: { value: initY },
|
||||
lineSpread: { value: props.lineSpread },
|
||||
fanSpread: { value: props.fanSpread },
|
||||
lineSharpness: { value: props.lineSharpness },
|
||||
waveFrequency: { value: props.waveFrequency },
|
||||
bezierCurvature: { value: props.bezierCurvature },
|
||||
circleRadiusPx: { value: props.circleRadiusPx },
|
||||
circleGlowSize: { value: props.circleGlowSize },
|
||||
circleGlowStrength: { value: props.circleGlowStrength },
|
||||
pointColor: {
|
||||
value: Array.from({ length: 8 }, () => new Vector3(1, 1, 1))
|
||||
},
|
||||
|
||||
iMouse: { value: new Vector2(-1000, -1000) },
|
||||
interactive: { value: props.interactive },
|
||||
bendRadius: { value: 5.0 },
|
||||
bendStrength: { value: -0.5 },
|
||||
bendInfluence: { value: 0 },
|
||||
|
||||
parallax: { value: props.parallax },
|
||||
parallaxStrength: { value: 0.2 },
|
||||
parallaxOffset: { value: new Vector2(0, 0) },
|
||||
|
||||
lineGradient: {
|
||||
value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1))
|
||||
},
|
||||
lineGradientCount: { value: 0 },
|
||||
bgColorCenter: { value: new Vector3(0, 0, 0) },
|
||||
bgColorEdge: { value: new Vector3(0, 0, 0) }
|
||||
}
|
||||
|
||||
// Apply initial values
|
||||
applyGradient()
|
||||
applyBgColors()
|
||||
applyPointColors()
|
||||
|
||||
material = new ShaderMaterial({
|
||||
uniforms,
|
||||
vertexShader,
|
||||
fragmentShader
|
||||
})
|
||||
|
||||
geometry = new PlaneGeometry(2, 2)
|
||||
mesh = new Mesh(geometry, material)
|
||||
scene.add(mesh)
|
||||
|
||||
clock = new Clock()
|
||||
|
||||
// Resize
|
||||
const setSize = () => {
|
||||
if (!containerRef.value || !renderer) return
|
||||
const width = containerRef.value.clientWidth || 1
|
||||
const height = containerRef.value.clientHeight || 1
|
||||
renderer.setSize(width, height, false)
|
||||
const canvasWidth = renderer.domElement.width
|
||||
const canvasHeight = renderer.domElement.height
|
||||
uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1)
|
||||
}
|
||||
setSize()
|
||||
|
||||
resizeObserver = new ResizeObserver(setSize)
|
||||
resizeObserver.observe(containerRef.value)
|
||||
|
||||
// Pointer events
|
||||
const handlePointerMove = (event) => {
|
||||
const rect = renderer.domElement.getBoundingClientRect()
|
||||
const x = event.clientX - rect.left
|
||||
const y = event.clientY - rect.top
|
||||
const dpr = renderer.getPixelRatio()
|
||||
|
||||
targetMouse.set(x * dpr, (rect.height - y) * dpr)
|
||||
targetInfluence = 1.0
|
||||
|
||||
if (props.parallax) {
|
||||
const centerX = rect.width / 2
|
||||
const centerY = rect.height / 2
|
||||
const offsetX = (x - centerX) / rect.width
|
||||
const offsetY = -(y - centerY) / rect.height
|
||||
targetParallax.set(offsetX * 0.2, offsetY * 0.2)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePointerLeave = () => {
|
||||
targetInfluence = 0.0
|
||||
}
|
||||
|
||||
renderer.domElement.addEventListener('pointermove', handlePointerMove)
|
||||
renderer.domElement.addEventListener('pointerleave', handlePointerLeave)
|
||||
|
||||
// Render loop
|
||||
const renderLoop = () => {
|
||||
uniforms.iTime.value = clock.getElapsedTime()
|
||||
|
||||
if (props.interactive) {
|
||||
currentMouse.lerp(targetMouse, mouseDamping)
|
||||
uniforms.iMouse.value.copy(currentMouse)
|
||||
currentInfluence += (targetInfluence - currentInfluence) * mouseDamping
|
||||
uniforms.bendInfluence.value = currentInfluence
|
||||
}
|
||||
|
||||
if (props.parallax) {
|
||||
currentParallax.lerp(targetParallax, mouseDamping)
|
||||
uniforms.parallaxOffset.value.copy(currentParallax)
|
||||
}
|
||||
|
||||
renderer.render(scene, camera)
|
||||
rafId = requestAnimationFrame(renderLoop)
|
||||
}
|
||||
renderLoop()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (rafId) cancelAnimationFrame(rafId)
|
||||
if (resizeObserver) resizeObserver.disconnect()
|
||||
if (geometry) geometry.dispose()
|
||||
if (material) material.dispose()
|
||||
if (renderer) {
|
||||
renderer.dispose()
|
||||
if (renderer.domElement && renderer.domElement.parentNode) {
|
||||
renderer.domElement.parentNode.removeChild(renderer.domElement)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-lines-container {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
110
frontend/src/components/GlowDot.vue
Normal file
110
frontend/src/components/GlowDot.vue
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<div
|
||||
class="glow-dot"
|
||||
:class="{
|
||||
'glow-dot--ghost': isGhost,
|
||||
'glow-dot--selected': selected,
|
||||
'glow-dot--dimmed': isDimmed
|
||||
}"
|
||||
:style="dotStyle"
|
||||
@click.stop="onSelect"
|
||||
>
|
||||
<!-- White inner circle — shader provides the glow -->
|
||||
<div class="glow-dot__inner">
|
||||
<img
|
||||
v-if="event.image"
|
||||
:src="event.image"
|
||||
class="glow-dot__image"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useEventsStore } from 'stores/events'
|
||||
import { useSettingsStore } from 'stores/settings'
|
||||
|
||||
const props = defineProps({
|
||||
event: { type: Object, required: true },
|
||||
x: { type: Number, default: 0 },
|
||||
isGhost: { type: Boolean, default: false },
|
||||
selected: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['select'])
|
||||
const eventsStore = useEventsStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
// Match shader circle: CSS diameter = 2 * circleRadiusPx / dpr
|
||||
const dpr = Math.min(window.devicePixelRatio || 1, 2)
|
||||
|
||||
const dotSize = computed(() => {
|
||||
return 2 * settingsStore.floatingLines.circleRadius / dpr
|
||||
})
|
||||
|
||||
// Y position: emotion +1 → top (15%), 0 → middle (50%), -1 → bottom (85%)
|
||||
const yPercent = computed(() => {
|
||||
return 50 - props.event.emotion * 35
|
||||
})
|
||||
|
||||
const dotStyle = computed(() => ({
|
||||
left: `${props.x}px`,
|
||||
top: `${yPercent.value}%`,
|
||||
width: `${dotSize.value}px`,
|
||||
height: `${dotSize.value}px`
|
||||
}))
|
||||
|
||||
const isDimmed = computed(() => {
|
||||
return eventsStore.selectedEventId !== null && !props.selected && !props.isGhost
|
||||
})
|
||||
|
||||
function onSelect() {
|
||||
if (!props.isGhost) {
|
||||
emit('select')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.glow-dot {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
transition: opacity 0.3s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
/* Clean inner circle — shader provides the glow around it */
|
||||
.glow-dot__inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glow-dot__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* States */
|
||||
.glow-dot--ghost {
|
||||
opacity: 0.7;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.glow-dot--selected {
|
||||
transform: translate(-50%, -50%) scale(1.15);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.glow-dot--dimmed {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
385
frontend/src/components/LifeWaveSettings.vue
Normal file
385
frontend/src/components/LifeWaveSettings.vue
Normal file
|
|
@ -0,0 +1,385 @@
|
|||
<template>
|
||||
<Transition name="slide-up">
|
||||
<div v-if="open" class="lw-settings glass--panel">
|
||||
<!-- Handle — tap to close -->
|
||||
<div class="lw-settings__handle" @click="$emit('close')">
|
||||
<div class="lw-settings__handle-bar"></div>
|
||||
</div>
|
||||
|
||||
<div class="lw-settings__scroll">
|
||||
<div class="lw-settings__title">Einstellungen</div>
|
||||
|
||||
<!-- Linien -->
|
||||
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
|
||||
<span class="lw-settings__card-label">Linien</span>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Speed</span>
|
||||
<span class="lw-settings__value">{{ fl.speed.toFixed(2) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.speed"
|
||||
@update:model-value="v => update({ speed: v })"
|
||||
:min="0.1" :max="3" :step="0.05"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Anzahl</span>
|
||||
<span class="lw-settings__value">{{ fl.lineCount }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.lineCount"
|
||||
@update:model-value="v => update({ lineCount: v })"
|
||||
:min="1" :max="40" :step="1"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Wellen-Amp</span>
|
||||
<span class="lw-settings__value">{{ fl.spread.toFixed(2) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.spread"
|
||||
@update:model-value="v => update({ spread: v })"
|
||||
:min="0.01" :max="1" :step="0.01"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Fächerbreite</span>
|
||||
<span class="lw-settings__value">{{ fl.fanSpread.toFixed(3) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.fanSpread"
|
||||
@update:model-value="v => update({ fanSpread: v })"
|
||||
:min="0.01" :max="0.5" :step="0.005"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Feinheit</span>
|
||||
<span class="lw-settings__value">{{ fl.lineSharpness.toFixed(1) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.lineSharpness"
|
||||
@update:model-value="v => update({ lineSharpness: v })"
|
||||
:min="0.3" :max="10" :step="0.1"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Welligkeit</span>
|
||||
<span class="lw-settings__value">{{ fl.waveFrequency.toFixed(1) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.waveFrequency"
|
||||
@update:model-value="v => update({ waveFrequency: v })"
|
||||
:min="1" :max="30" :step="0.5"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Kurve</span>
|
||||
<span class="lw-settings__value">{{ fl.bezierCurvature.toFixed(2) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.bezierCurvature"
|
||||
@update:model-value="v => update({ bezierCurvature: v })"
|
||||
:min="-1" :max="1" :step="0.05"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Kreis</span>
|
||||
<span class="lw-settings__value">{{ fl.circleRadius }}px</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.circleRadius"
|
||||
@update:model-value="v => update({ circleRadius: v })"
|
||||
:min="10" :max="200" :step="5"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Glow Größe</span>
|
||||
<span class="lw-settings__value">{{ fl.glowSize }}px</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.glowSize"
|
||||
@update:model-value="v => update({ glowSize: v })"
|
||||
:min="5" :max="100" :step="1"
|
||||
/>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>Glow Stärke</span>
|
||||
<span class="lw-settings__value">{{ fl.glowStrength.toFixed(1) }}</span>
|
||||
</div>
|
||||
<q-slider
|
||||
:model-value="fl.glowStrength"
|
||||
@update:model-value="v => update({ glowStrength: v })"
|
||||
:min="0.5" :max="12" :step="0.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Hintergrundbild -->
|
||||
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
|
||||
<span class="lw-settings__card-label">Hintergrundbild</span>
|
||||
|
||||
<div class="lw-settings__img-grid">
|
||||
<button
|
||||
class="lw-settings__img-btn"
|
||||
:class="{ 'lw-settings__img-btn--active': fl.backgroundImage === '' }"
|
||||
@click="update({ backgroundImage: '' })"
|
||||
>
|
||||
Keins
|
||||
</button>
|
||||
<button
|
||||
v-for="n in 10"
|
||||
:key="'bg' + n"
|
||||
class="lw-settings__img-btn"
|
||||
:class="{ 'lw-settings__img-btn--active': fl.backgroundImage === `/images/bg-image-${n}.jpg` }"
|
||||
@click="update({ backgroundImage: `/images/bg-image-${n}.jpg` })"
|
||||
>
|
||||
{{ n }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hintergrundfarbe -->
|
||||
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
|
||||
<span class="lw-settings__card-label">Hintergrundfarbe</span>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>BG Mitte</span>
|
||||
<input
|
||||
type="color"
|
||||
:value="fl.bgCenter"
|
||||
@input="e => update({ bgCenter: e.target.value })"
|
||||
class="lw-settings__color-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>BG Rand</span>
|
||||
<input
|
||||
type="color"
|
||||
:value="fl.bgEdge"
|
||||
@input="e => update({ bgEdge: e.target.value })"
|
||||
class="lw-settings__color-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Farbstopps -->
|
||||
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
|
||||
<span class="lw-settings__card-label">Farbverlauf (je Zeile ein Hex)</span>
|
||||
|
||||
<textarea
|
||||
:value="fl.gradientStops"
|
||||
@input="e => update({ gradientStops: e.target.value })"
|
||||
class="lw-settings__gradient-input"
|
||||
rows="4"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Extras -->
|
||||
<div class="lw-settings__card" :class="{ 'lw-settings__card--dark': isDark }">
|
||||
<span class="lw-settings__card-label">Extras</span>
|
||||
|
||||
<div class="lw-settings__row">
|
||||
<span>{{ isDark ? 'Hell-Modus' : 'Dunkel-Modus' }}</span>
|
||||
<q-toggle
|
||||
:model-value="isDark"
|
||||
@update:model-value="toggleDark"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reset -->
|
||||
<div class="lw-settings__reset">
|
||||
<q-btn
|
||||
flat dense no-caps
|
||||
label="Zurücksetzen"
|
||||
icon="restart_alt"
|
||||
size="sm"
|
||||
@click="settingsStore.resetFloatingLines()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useSettingsStore } from 'stores/settings'
|
||||
|
||||
defineProps({ open: { type: Boolean, default: false } })
|
||||
defineEmits(['close'])
|
||||
|
||||
const $q = useQuasar()
|
||||
const settingsStore = useSettingsStore()
|
||||
const isDark = computed(() => $q.dark.isActive)
|
||||
const fl = computed(() => settingsStore.floatingLines)
|
||||
|
||||
function update(changes) {
|
||||
settingsStore.updateFloatingLines(changes)
|
||||
}
|
||||
|
||||
function toggleDark() {
|
||||
$q.dark.toggle()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lw-settings {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
height: 75dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
.lw-settings__handle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px 0 4px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lw-settings__handle-bar {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
|
||||
.lw-settings__scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px 32px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.lw-settings__title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.lw-settings__card {
|
||||
background: rgba(128, 128, 128, 0.06);
|
||||
border: 1px solid rgba(128, 128, 128, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.lw-settings__card--dark {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.lw-settings__card-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
opacity: 0.7;
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.lw-settings__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.lw-settings__row:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.lw-settings__value {
|
||||
font-weight: 600;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.lw-settings__img-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.lw-settings__img-btn {
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
border: 1px solid rgba(128, 128, 128, 0.2);
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.lw-settings__img-btn:hover {
|
||||
opacity: 1;
|
||||
border-color: #a855f7;
|
||||
}
|
||||
|
||||
.lw-settings__img-btn--active {
|
||||
border-color: #a855f7;
|
||||
color: #a855f7;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lw-settings__color-input {
|
||||
width: 36px;
|
||||
height: 22px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.lw-settings__gradient-input {
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid rgba(128, 128, 128, 0.2);
|
||||
color: inherit;
|
||||
font-family: ui-monospace, 'Cascadia Code', monospace;
|
||||
font-size: 12px;
|
||||
padding: 8px 10px;
|
||||
resize: none;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.body--dark .lw-settings__gradient-input {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.lw-settings__reset {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 8px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Slide-up transition */
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.slide-up-enter-from,
|
||||
.slide-up-leave-to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
</style>
|
||||
384
frontend/src/components/TimelineView.vue
Normal file
384
frontend/src/components/TimelineView.vue
Normal file
|
|
@ -0,0 +1,384 @@
|
|||
<template>
|
||||
<div
|
||||
class="timeline"
|
||||
ref="timelineRef"
|
||||
@scroll="onScroll"
|
||||
@wheel.prevent="onWheel"
|
||||
@touchstart.passive="onTouchStart"
|
||||
@touchmove.passive="onTouchMove"
|
||||
@touchend.passive="onTouchEnd"
|
||||
>
|
||||
<div class="timeline__track" :style="{ width: trackWidth + 'px' }">
|
||||
<!-- GlowDots (real events + ghost) -->
|
||||
<GlowDot
|
||||
v-for="(event, index) in displayEvents"
|
||||
:key="event.id"
|
||||
:event="event"
|
||||
:x="getEventX(index)"
|
||||
:is-ghost="event.id === '__ghost__'"
|
||||
:selected="eventsStore.selectedEventId === event.id"
|
||||
@select="$emit('dotSelect', event.id)"
|
||||
/>
|
||||
|
||||
<!-- Month labels — one per event, clickable -->
|
||||
<div class="timeline__labels">
|
||||
<div
|
||||
v-for="(label, index) in eventLabels"
|
||||
:key="label.key"
|
||||
class="timeline__month"
|
||||
:style="{ left: getEventX(index) + 'px' }"
|
||||
:class="{ 'timeline__month--active': label.key === activeLabel }"
|
||||
@click="scrollToIndex(index)"
|
||||
>
|
||||
{{ label.month }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Year labels — shown at year transitions, clickable -->
|
||||
<div class="timeline__years">
|
||||
<div
|
||||
v-for="year in yearMarkers"
|
||||
:key="year.key"
|
||||
class="timeline__year"
|
||||
:style="{ left: year.x + 'px' }"
|
||||
@click="scrollToX(year.x)"
|
||||
>
|
||||
{{ year.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { useEventsStore } from 'stores/events'
|
||||
import GlowDot from 'components/GlowDot.vue'
|
||||
|
||||
const emit = defineEmits(['dotSelect', 'viewUpdate'])
|
||||
const eventsStore = useEventsStore()
|
||||
const timelineRef = ref(null)
|
||||
const scrollLeft = ref(0)
|
||||
const viewportWidth = ref(400)
|
||||
const containerHeight = ref(400)
|
||||
|
||||
// Zoom: 1.0 = default, range 0.4–3.0
|
||||
const zoomLevel = ref(1)
|
||||
const MIN_ZOOM = 0.4
|
||||
const MAX_ZOOM = 3.0
|
||||
const ZOOM_STEP = 0.08
|
||||
|
||||
// Spacing: ~4 events visible at a time, scaled by zoom
|
||||
const BASE_SPACING = computed(() => viewportWidth.value / 2.5)
|
||||
const EVENT_SPACING = computed(() => BASE_SPACING.value * zoomLevel.value)
|
||||
const PADDING = computed(() => viewportWidth.value / 2)
|
||||
|
||||
// Display events: sorted events + ghost when creating
|
||||
const showGhost = computed(() => eventsStore.panelOpen && !eventsStore.editingEventId)
|
||||
const displayEvents = computed(() => {
|
||||
const sorted = [...eventsStore.sortedEvents]
|
||||
if (!showGhost.value) return sorted
|
||||
const ghost = eventsStore.ghostEvent
|
||||
const ghostDate = new Date(ghost.date)
|
||||
const insertIdx = sorted.findIndex((e) => new Date(e.date) > ghostDate)
|
||||
if (insertIdx === -1) {
|
||||
sorted.push(ghost)
|
||||
} else {
|
||||
sorted.splice(insertIdx, 0, ghost)
|
||||
}
|
||||
return sorted
|
||||
})
|
||||
|
||||
// Track width
|
||||
const trackWidth = computed(() => {
|
||||
const count = displayEvents.value.length
|
||||
if (count === 0) return viewportWidth.value
|
||||
return PADDING.value * 2 + (count - 1) * EVENT_SPACING.value
|
||||
})
|
||||
|
||||
// X position for event at given index
|
||||
function getEventX(index) {
|
||||
return PADDING.value + index * EVENT_SPACING.value
|
||||
}
|
||||
|
||||
// Month names
|
||||
const MONTHS = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
|
||||
|
||||
// One label per event showing its month
|
||||
const eventLabels = computed(() => {
|
||||
return displayEvents.value.map((event, index) => {
|
||||
const d = new Date(event.date)
|
||||
return {
|
||||
key: `${event.id}-${index}`,
|
||||
month: MONTHS[d.getMonth()],
|
||||
year: d.getFullYear(),
|
||||
fullMonth: `${d.getFullYear()}-${d.getMonth()}`
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// Year markers — shown between events where the year changes
|
||||
const yearMarkers = computed(() => {
|
||||
const markers = []
|
||||
const sorted = displayEvents.value
|
||||
if (sorted.length === 0) return markers
|
||||
|
||||
// First event's year
|
||||
const firstDate = new Date(sorted[0].date)
|
||||
markers.push({
|
||||
key: `year-0`,
|
||||
year: firstDate.getFullYear(),
|
||||
x: getEventX(0)
|
||||
})
|
||||
|
||||
for (let i = 1; i < sorted.length; i++) {
|
||||
const prevYear = new Date(sorted[i - 1].date).getFullYear()
|
||||
const currYear = new Date(sorted[i].date).getFullYear()
|
||||
if (currYear !== prevYear) {
|
||||
// Position between the two events
|
||||
const x = (getEventX(i - 1) + getEventX(i)) / 2
|
||||
markers.push({
|
||||
key: `year-${i}`,
|
||||
year: currYear,
|
||||
x
|
||||
})
|
||||
}
|
||||
}
|
||||
return markers
|
||||
})
|
||||
|
||||
// Active label — closest event to center of viewport
|
||||
const activeLabel = computed(() => {
|
||||
const sorted = displayEvents.value
|
||||
if (sorted.length === 0) return null
|
||||
const centerX = scrollLeft.value + viewportWidth.value / 2
|
||||
let closestIndex = 0
|
||||
let closestDist = Infinity
|
||||
for (let i = 0; i < sorted.length; i++) {
|
||||
const dist = Math.abs(getEventX(i) - centerX)
|
||||
if (dist < closestDist) {
|
||||
closestDist = dist
|
||||
closestIndex = i
|
||||
}
|
||||
}
|
||||
return eventLabels.value[closestIndex]?.key ?? null
|
||||
})
|
||||
|
||||
function onScroll() {
|
||||
if (timelineRef.value) {
|
||||
scrollLeft.value = timelineRef.value.scrollLeft
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToIndex(index) {
|
||||
if (!timelineRef.value) return
|
||||
const x = getEventX(index)
|
||||
timelineRef.value.scrollTo({
|
||||
left: x - viewportWidth.value / 2,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
function scrollToX(x) {
|
||||
if (!timelineRef.value) return
|
||||
timelineRef.value.scrollTo({
|
||||
left: x - viewportWidth.value / 2,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
function updateViewportWidth() {
|
||||
if (timelineRef.value) {
|
||||
viewportWidth.value = timelineRef.value.clientWidth || 400
|
||||
containerHeight.value = timelineRef.value.clientHeight || 400
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom while keeping the viewport center stable
|
||||
function applyZoom(newZoom, centerClientX) {
|
||||
const el = timelineRef.value
|
||||
if (!el) return
|
||||
|
||||
// Default center to viewport middle
|
||||
const rect = el.getBoundingClientRect()
|
||||
const cx = centerClientX !== undefined ? centerClientX - rect.left : viewportWidth.value / 2
|
||||
|
||||
// World-space X under the center point before zoom
|
||||
const worldXBefore = el.scrollLeft + cx
|
||||
|
||||
// Ratio of old spacing to new
|
||||
const oldZoom = zoomLevel.value
|
||||
const ratio = newZoom / oldZoom
|
||||
|
||||
zoomLevel.value = newZoom
|
||||
|
||||
// After Vue updates, restore scroll so the same world point stays under center
|
||||
nextTick(() => {
|
||||
el.scrollLeft = worldXBefore * ratio - cx
|
||||
scrollLeft.value = el.scrollLeft
|
||||
})
|
||||
}
|
||||
|
||||
// Desktop: Ctrl+wheel or pinch on trackpad (both fire wheel with ctrlKey)
|
||||
function onWheel(e) {
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
// Pinch / Ctrl+scroll → zoom
|
||||
const delta = -e.deltaY * ZOOM_STEP * 0.1
|
||||
const newZoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoomLevel.value + delta))
|
||||
if (newZoom !== zoomLevel.value) {
|
||||
applyZoom(newZoom, e.clientX)
|
||||
}
|
||||
} else {
|
||||
// Normal scroll — let the browser handle horizontal scroll
|
||||
const el = timelineRef.value
|
||||
if (el) {
|
||||
el.scrollLeft += e.deltaX || e.deltaY
|
||||
scrollLeft.value = el.scrollLeft
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Touch: pinch-to-zoom
|
||||
let touchStartDist = 0
|
||||
let touchStartZoom = 1
|
||||
|
||||
function getTouchDist(touches) {
|
||||
const dx = touches[0].clientX - touches[1].clientX
|
||||
const dy = touches[0].clientY - touches[1].clientY
|
||||
return Math.sqrt(dx * dx + dy * dy)
|
||||
}
|
||||
|
||||
function onTouchStart(e) {
|
||||
if (e.touches.length === 2) {
|
||||
touchStartDist = getTouchDist(e.touches)
|
||||
touchStartZoom = zoomLevel.value
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchMove(e) {
|
||||
if (e.touches.length === 2) {
|
||||
const dist = getTouchDist(e.touches)
|
||||
const scale = dist / touchStartDist
|
||||
const newZoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, touchStartZoom * scale))
|
||||
const cx = (e.touches[0].clientX + e.touches[1].clientX) / 2
|
||||
applyZoom(newZoom, cx)
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchEnd() {
|
||||
touchStartDist = 0
|
||||
}
|
||||
|
||||
// Scroll to center on the last event on mount
|
||||
let resizeObserver = null
|
||||
// Emit timeline state so the layout can position shader points
|
||||
function emitViewState() {
|
||||
emit('viewUpdate', {
|
||||
scrollLeft: scrollLeft.value,
|
||||
viewportWidth: viewportWidth.value,
|
||||
containerHeight: containerHeight.value,
|
||||
events: displayEvents.value.map((e, i) => ({
|
||||
emotion: e.emotion,
|
||||
x: getEventX(i),
|
||||
color: eventsStore.getGlowColor(e)
|
||||
}))
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
[scrollLeft, viewportWidth, containerHeight, displayEvents, zoomLevel],
|
||||
emitViewState,
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
if (!timelineRef.value) return
|
||||
updateViewportWidth()
|
||||
|
||||
const events = displayEvents.value
|
||||
if (events.length === 0) return
|
||||
const lastX = getEventX(events.length - 1)
|
||||
timelineRef.value.scrollLeft = lastX - viewportWidth.value / 2
|
||||
scrollLeft.value = timelineRef.value.scrollLeft
|
||||
|
||||
// Update viewport width on resize
|
||||
resizeObserver = new ResizeObserver(updateViewportWidth)
|
||||
resizeObserver.observe(timelineRef.value)
|
||||
|
||||
// Emit initial state
|
||||
emitViewState()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
resizeObserver?.disconnect()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.timeline {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 70px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.timeline::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline__track {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Month labels */
|
||||
.timeline__labels {
|
||||
position: absolute;
|
||||
bottom: 28px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.timeline__month {
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
opacity: 0.35;
|
||||
transition: opacity 0.3s ease, font-size 0.3s ease, font-weight 0.3s ease;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.timeline__month--active {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Year labels */
|
||||
.timeline__years {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.timeline__year {
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
opacity: 0.4;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
32
frontend/src/components/UserMenuButton.vue
Normal file
32
frontend/src/components/UserMenuButton.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<button class="user-menu-btn glass--button" @click="$emit('openMenu')">
|
||||
<q-icon name="person_outline" size="22px" :color="isDark ? 'white' : 'grey-8'" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
|
||||
defineEmits(['openMenu'])
|
||||
|
||||
const $q = useQuasar()
|
||||
const isDark = computed(() => $q.dark.isActive)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-menu-btn {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
z-index: 30;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,211 +1,54 @@
|
|||
// Variables
|
||||
$primary-color: #4f46e5;
|
||||
$gradient-colors: (45deg, #8634f9, #ffab1a, #ff2fa2);
|
||||
$button-radius: 4px;
|
||||
$button-padding: 6px 12px;
|
||||
$tooltip-radius: 4px;
|
||||
$image-size: 80px;
|
||||
// Glass button style
|
||||
.glass--button {
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
border: 1px solid rgba(128, 128, 128, 0.15);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
transition: background 0.2s ease;
|
||||
|
||||
// Mixins
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Global Styles
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: $button-padding;
|
||||
background-color: $primary-color;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: $button-radius;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Wave Visualization Styles
|
||||
.visualization-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100vh - 86px);
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2);
|
||||
background-size: 200% 200%;
|
||||
animation: gradientAnimation 20s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientAnimation {
|
||||
0% { background-position: 0% 0%; }
|
||||
25% { background-position: 100% 0%; }
|
||||
50% { background-position: 100% 100%; }
|
||||
75% { background-position: 0% 100%; }
|
||||
100% { background-position: 0% 0%; }
|
||||
}
|
||||
|
||||
.median {
|
||||
position: absolute;
|
||||
top: 51.2%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
min-height:400px;
|
||||
z-index: 2;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.smooth-scroll {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.dot-tooltip {
|
||||
pointer-events: none;
|
||||
opacity: 1;
|
||||
|
||||
.tooltip-background {
|
||||
fill: rgba(0, 0, 0, 0.0);
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
@include flex-center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.image_container {
|
||||
margin-top: 8px;
|
||||
box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25);
|
||||
transition: box-shadow 0.25s ease-in-out;
|
||||
width: $image-size;
|
||||
height: $image-size;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.tooltip-title {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 2px;
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
hyphens: auto;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.tooltip-description {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
transition: r 0.2s ease, fill 0.2s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
fill: rgba(255, 255, 255, 0.9);
|
||||
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: $tooltip-radius;
|
||||
}
|
||||
|
||||
// Remove Quasar card shadows globally
|
||||
.q-card {
|
||||
box-shadow: none !important;
|
||||
|
||||
&--bordered {
|
||||
box-shadow: none !important;
|
||||
&:hover {
|
||||
background: rgba(128, 128, 128, 0.18);
|
||||
}
|
||||
|
||||
&--flat {
|
||||
box-shadow: none !important;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
// .q-drawer{
|
||||
// background: transparent !important;
|
||||
// Glass panel style — strong blur for slide-up panels
|
||||
.glass--panel {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
color: #1a1a1a;
|
||||
|
||||
// .q-item{
|
||||
// color: white;
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
.bg-white,
|
||||
.q-layout__section--marginal{
|
||||
background: transparent !important;
|
||||
.body--dark & {
|
||||
background: rgba(30, 30, 30, 0.7);
|
||||
border-top-color: rgba(255, 255, 255, 0.08);
|
||||
color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
footer{
|
||||
.text-primary,
|
||||
.text-grey{
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
// GlowDot animations — soft opacity pulse on the glow aura
|
||||
@keyframes glowPulse {
|
||||
0%, 100% {
|
||||
opacity: 0.85;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.06);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ghostPulse {
|
||||
0%, 100% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.9;
|
||||
transform: scale(1.12);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
// to match your app's branding.
|
||||
// Tip: Use the "Theme Builder" on Quasar's documentation website.
|
||||
|
||||
$primary : #1976D2;
|
||||
$secondary : #26A69A;
|
||||
$accent : #9C27B0;
|
||||
$primary : #d946ef;
|
||||
$secondary : #a855f7;
|
||||
$accent : #ec4899;
|
||||
|
||||
$dark : #1D1D1D;
|
||||
$dark-page : #121212;
|
||||
|
|
|
|||
293
frontend/src/layouts/LifeWaveLayout.vue
Normal file
293
frontend/src/layouts/LifeWaveLayout.vue
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
<template>
|
||||
<div ref="layoutRef" class="lifewave-layout" :class="{ 'lifewave-layout--dark': isDark }">
|
||||
<!-- FloatingLines Fullscreen Background (always visible) -->
|
||||
<FloatingLines
|
||||
class="lifewave-layout__background"
|
||||
:enabled-waves="['middle']"
|
||||
:line-count="[fl.lineCount]"
|
||||
:animation-speed="fl.speed"
|
||||
:num-points="shaderNumPoints"
|
||||
:point-x-values="shaderPointX"
|
||||
:point-y-values="shaderPointY"
|
||||
:point-colors="shaderPointColors"
|
||||
:line-spread="fl.spread"
|
||||
:fan-spread="fl.fanSpread"
|
||||
:line-sharpness="fl.lineSharpness"
|
||||
:wave-frequency="fl.waveFrequency"
|
||||
:bezier-curvature="fl.bezierCurvature"
|
||||
:circle-radius-px="fl.circleRadius"
|
||||
:circle-glow-size="fl.glowSize"
|
||||
:circle-glow-strength="fl.glowStrength"
|
||||
:lines-gradient="parsedGradient"
|
||||
:bg-color-center="fl.bgCenter"
|
||||
:bg-color-edge="fl.bgEdge"
|
||||
:background-image="fl.backgroundImage"
|
||||
:mix-blend-mode="'screen'"
|
||||
/>
|
||||
|
||||
<!-- Scrollable Timeline -->
|
||||
<TimelineView
|
||||
class="lifewave-layout__timeline"
|
||||
@dot-select="onDotSelect"
|
||||
@view-update="onViewUpdate"
|
||||
/>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="lifewave-header">
|
||||
<span class="lifewave-header__logo" @click="toggleDarkMode">ThatsMe</span>
|
||||
<button class="lifewave-header__user glass--button" @click="settingsOpen = !settingsOpen">
|
||||
<q-icon name="tune" size="22px" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<main class="lifewave-content">
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
<!-- Add Event Button (Bottom-Center) — hidden when panel is open -->
|
||||
<AddEventButton v-if="!eventsStore.panelOpen" @click="onAddEvent" />
|
||||
|
||||
<!-- Backdrop blur when panel is open -->
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="eventsStore.panelOpen"
|
||||
class="lifewave-backdrop"
|
||||
@click="eventsStore.closePanel()"
|
||||
/>
|
||||
</Transition>
|
||||
|
||||
<!-- Event Panel (Slide-Up) -->
|
||||
<EventPanel />
|
||||
|
||||
<!-- Wave Settings Backdrop -->
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="settingsOpen && !eventsStore.panelOpen"
|
||||
class="lifewave-backdrop"
|
||||
@click="settingsOpen = false"
|
||||
/>
|
||||
</Transition>
|
||||
|
||||
<!-- Wave Settings Panel (Slide-Up) -->
|
||||
<LifeWaveSettings
|
||||
:open="settingsOpen && !eventsStore.panelOpen"
|
||||
@close="settingsOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
import AddEventButton from 'components/AddEventButton.vue'
|
||||
import EventPanel from 'components/EventPanel.vue'
|
||||
import FloatingLines from 'components/FloatingLines.vue'
|
||||
import LifeWaveSettings from 'components/LifeWaveSettings.vue'
|
||||
import TimelineView from 'components/TimelineView.vue'
|
||||
import { useEventsStore } from 'stores/events'
|
||||
import { useSettingsStore } from 'stores/settings'
|
||||
|
||||
const $q = useQuasar()
|
||||
const eventsStore = useEventsStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
const isDark = computed(() => $q.dark.isActive)
|
||||
const settingsOpen = ref(false)
|
||||
const fl = computed(() => settingsStore.floatingLines)
|
||||
|
||||
// Layout dimensions (for screen→UV conversion)
|
||||
const layoutRef = ref(null)
|
||||
const layoutWidth = ref(window.innerWidth)
|
||||
const layoutHeight = ref(window.innerHeight)
|
||||
let layoutResizeObserver = null
|
||||
|
||||
onMounted(() => {
|
||||
if (layoutRef.value) {
|
||||
layoutWidth.value = layoutRef.value.clientWidth
|
||||
layoutHeight.value = layoutRef.value.clientHeight
|
||||
layoutResizeObserver = new ResizeObserver(() => {
|
||||
layoutWidth.value = layoutRef.value.clientWidth
|
||||
layoutHeight.value = layoutRef.value.clientHeight
|
||||
})
|
||||
layoutResizeObserver.observe(layoutRef.value)
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
layoutResizeObserver?.disconnect()
|
||||
})
|
||||
|
||||
// Timeline state (received from TimelineView via emit)
|
||||
const timelineState = ref(null)
|
||||
|
||||
function onViewUpdate(state) {
|
||||
timelineState.value = state
|
||||
}
|
||||
|
||||
// Convert screen pixel coordinates → shader UV space
|
||||
// Shader: baseUv = (2*fragCoord - iResolution) / iResolution.y; baseUv.y *= -1;
|
||||
// For CSS pixel (sx, sy) from top-left:
|
||||
// uvX = (2*sx - cssWidth) / cssHeight
|
||||
// uvY = (2*sy - cssHeight) / cssHeight
|
||||
function screenToUV(sx, sy) {
|
||||
const w = layoutWidth.value
|
||||
const h = layoutHeight.value
|
||||
return {
|
||||
x: (2 * sx - w) / h,
|
||||
y: (2 * sy - h) / h
|
||||
}
|
||||
}
|
||||
|
||||
// Compute shader point positions from event positions
|
||||
const TIMELINE_TOP = 60 // CSS: .timeline { top: 60px }
|
||||
|
||||
const shaderNumPoints = computed(() => {
|
||||
if (!timelineState.value) return 0
|
||||
return Math.min(timelineState.value.events.length, 8)
|
||||
})
|
||||
|
||||
const shaderPointX = computed(() => {
|
||||
const xs = Array(8).fill(0)
|
||||
if (!timelineState.value) return xs
|
||||
const { scrollLeft, events } = timelineState.value
|
||||
const count = Math.min(events.length, 8)
|
||||
for (let i = 0; i < count; i++) {
|
||||
const screenX = events[i].x - scrollLeft
|
||||
xs[i] = screenToUV(screenX, 0).x
|
||||
}
|
||||
return xs
|
||||
})
|
||||
|
||||
const shaderPointY = computed(() => {
|
||||
const ys = Array(8).fill(0)
|
||||
if (!timelineState.value) return ys
|
||||
const { containerHeight: tlHeight, events } = timelineState.value
|
||||
const count = Math.min(events.length, 8)
|
||||
for (let i = 0; i < count; i++) {
|
||||
// GlowDot: top = (50 - emotion*35)% of timeline container
|
||||
const yPercent = 50 - events[i].emotion * 35
|
||||
const screenY = TIMELINE_TOP + (yPercent / 100) * tlHeight
|
||||
ys[i] = screenToUV(0, screenY).y
|
||||
}
|
||||
return ys
|
||||
})
|
||||
|
||||
const shaderPointColors = computed(() => {
|
||||
if (!timelineState.value) return []
|
||||
const { events } = timelineState.value
|
||||
const count = Math.min(events.length, 8)
|
||||
const colors = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
colors.push(events[i].color || '#ffffff')
|
||||
}
|
||||
return colors
|
||||
})
|
||||
|
||||
// Parse gradient stops from textarea string
|
||||
const parsedGradient = computed(() => {
|
||||
return fl.value.gradientStops
|
||||
.split('\n')
|
||||
.map(s => s.trim())
|
||||
.filter(s => s.length > 0 && s.startsWith('#'))
|
||||
})
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
$q.dark.toggle()
|
||||
}
|
||||
|
||||
const onAddEvent = () => {
|
||||
eventsStore.openPanel()
|
||||
}
|
||||
|
||||
const onDotSelect = (id) => {
|
||||
eventsStore.selectEvent(id)
|
||||
eventsStore.openPanel(id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lifewave-layout {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
color: #F5F5F5;
|
||||
transition: background 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.lifewave-layout--dark {
|
||||
background: #000;
|
||||
color: #F5F5F5;
|
||||
}
|
||||
|
||||
/* FloatingLines Background */
|
||||
.lifewave-layout__background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Timeline — positioning comes from TimelineView's own .timeline class */
|
||||
.lifewave-layout__timeline {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.lifewave-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.lifewave-header__logo {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.3px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.lifewave-header__user {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.lifewave-content {
|
||||
padding-top: 72px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Backdrop blur overlay */
|
||||
.lifewave-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 15;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
8
frontend/src/pages/LifeWavePage.vue
Normal file
8
frontend/src/pages/LifeWavePage.vue
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<!-- LifeWave page is intentionally empty — all visuals are rendered by LifeWaveLayout -->
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
//
|
||||
</script>
|
||||
|
|
@ -1,60 +1,10 @@
|
|||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('layouts/MainLayout.vue'),
|
||||
component: () => import('layouts/LifeWaveLayout.vue'),
|
||||
children: [
|
||||
{ path: '', component: () => import('pages/IndexPage.vue') },
|
||||
{
|
||||
path: 'login',
|
||||
name: 'login',
|
||||
component: () => import('pages/LoginPage.vue'),
|
||||
},
|
||||
{
|
||||
path: 'sign-up',
|
||||
name: 'sign-up',
|
||||
component: () => import('pages/SignUpPage.vue'),
|
||||
},
|
||||
{
|
||||
path: 'password-reset',
|
||||
name: 'password-reset',
|
||||
component: () => import('pages/PasswordResetPage.vue'),
|
||||
},
|
||||
{
|
||||
path: 'wave',
|
||||
name: 'wave',
|
||||
component: () => import('pages/WavePage.vue')
|
||||
},
|
||||
{
|
||||
path: 'edit',
|
||||
name: 'edit',
|
||||
component: () => import('pages/EditPage.vue'),
|
||||
meta: { hideFooter: true }
|
||||
},
|
||||
{
|
||||
path: 'person-selector',
|
||||
name: 'person-selector',
|
||||
component: () => import('pages/PersonSelector.vue'),
|
||||
meta: { hideFooter: true }
|
||||
},
|
||||
{
|
||||
path: 'category-selector',
|
||||
name: 'category-selector',
|
||||
component: () => import('pages/CategorySelector.vue'),
|
||||
meta: { hideFooter: true }
|
||||
},
|
||||
{
|
||||
path: 'tag-selector',
|
||||
name: 'tag-selector',
|
||||
component: () => import('pages/TagSelector.vue'),
|
||||
meta: { hideFooter: true }
|
||||
},
|
||||
{
|
||||
path: 'entry/:id',
|
||||
name: 'entry-detail',
|
||||
component: () => import('pages/EntryDetailPage.vue'),
|
||||
meta: { hideFooter: true }
|
||||
},
|
||||
],
|
||||
{ path: '', component: () => import('pages/LifeWavePage.vue') }
|
||||
]
|
||||
},
|
||||
|
||||
// Always leave this as last one
|
||||
|
|
|
|||
298
frontend/src/stores/events.js
Normal file
298
frontend/src/stores/events.js
Normal file
|
|
@ -0,0 +1,298 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
// Color interpolation
|
||||
function lerpColor(a, b, t) {
|
||||
const ar = parseInt(a.slice(1, 3), 16)
|
||||
const ag = parseInt(a.slice(3, 5), 16)
|
||||
const ab = parseInt(a.slice(5, 7), 16)
|
||||
const br = parseInt(b.slice(1, 3), 16)
|
||||
const bg = parseInt(b.slice(3, 5), 16)
|
||||
const bb = parseInt(b.slice(5, 7), 16)
|
||||
const r = Math.round(ar + (br - ar) * t)
|
||||
const g = Math.round(ag + (bg - ag) * t)
|
||||
const blue = Math.round(ab + (bb - ab) * t)
|
||||
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
// Gradient presets: [negative, neutral, positive]
|
||||
const GRADIENT_PRESETS = [
|
||||
{ name: 'Standard', colors: ['#E91E63', '#FFD700', '#4CAF50'] },
|
||||
{ name: 'Sunset', colors: ['#FD1D1D', '#FCB045', '#833AB4'] },
|
||||
{ name: 'Earth', colors: ['#ED8153', '#ED8153', '#217B9E'] },
|
||||
{ name: 'Ocean', colors: ['#00D4FF', '#164173', '#440559'] },
|
||||
{ name: 'Spring', colors: ['#FDBB2D', '#96BE74', '#22C1C3'] },
|
||||
{ name: 'Neon', colors: ['#FC466B', '#9A52B6', '#3F5EFB'] },
|
||||
{ name: 'Pastel', colors: ['#EEAECA', '#C2B4D9', '#94BBE9'] },
|
||||
{ name: 'Aurora', colors: ['#FF6B6B', '#C084FC', '#67E8F9'] },
|
||||
{ name: 'Forest', colors: ['#DC2626', '#A3A830', '#059669'] },
|
||||
{ name: 'Berry', colors: ['#F472B6', '#FB923C', '#A78BFA'] }
|
||||
]
|
||||
|
||||
// Glow color logic: emotion value → color, with optional gradient preset
|
||||
function emotionToColor(emotion, gradientIdx = null) {
|
||||
const preset = gradientIdx !== null ? GRADIENT_PRESETS[gradientIdx] : null
|
||||
if (preset) {
|
||||
// 3-stop gradient: negative → neutral → positive
|
||||
const [neg, mid, pos] = preset.colors
|
||||
if (emotion >= 0) {
|
||||
return lerpColor(mid, pos, emotion)
|
||||
} else {
|
||||
return lerpColor(mid, neg, Math.abs(emotion))
|
||||
}
|
||||
}
|
||||
// Default: 6-stop interpolation
|
||||
if (emotion >= 0) {
|
||||
if (emotion < 0.5) {
|
||||
return lerpColor('#FF6B35', '#FFD700', emotion / 0.5)
|
||||
}
|
||||
return lerpColor('#FFD700', '#4CAF50', (emotion - 0.5) / 0.5)
|
||||
} else {
|
||||
const abs = Math.abs(emotion)
|
||||
if (abs < 0.5) {
|
||||
return lerpColor('#2196F3', '#9C27B0', abs / 0.5)
|
||||
}
|
||||
return lerpColor('#9C27B0', '#E91E63', (abs - 0.5) / 0.5)
|
||||
}
|
||||
}
|
||||
|
||||
// Demo data — 8 events, 4 with images, 4 without
|
||||
const demoEvents = [
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
title: 'Erster Schultag',
|
||||
date: '1995-09-01',
|
||||
emotion: 0.6,
|
||||
customColor: null,
|
||||
gradientPreset: null,
|
||||
image: null,
|
||||
note: '',
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now()
|
||||
},
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
title: 'Abiball',
|
||||
date: '2004-06-25',
|
||||
emotion: 0.85,
|
||||
customColor: null,
|
||||
gradientPreset: 1,
|
||||
image: 'demo/photo-1530103862676-de8c9debad1d.jpeg',
|
||||
note: 'Was für eine Party!',
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now()
|
||||
},
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
title: 'Trennung',
|
||||
date: '2010-03-15',
|
||||
emotion: -0.7,
|
||||
customColor: null,
|
||||
gradientPreset: null,
|
||||
image: null,
|
||||
note: '',
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now()
|
||||
},
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
title: 'Bergwanderung',
|
||||
date: '2014-08-12',
|
||||
emotion: 0.75,
|
||||
customColor: null,
|
||||
gradientPreset: 4,
|
||||
image: 'demo/photo-1534067783941-51c9c23ecefd.jpeg',
|
||||
note: 'Unvergesslicher Ausblick',
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now()
|
||||
},
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
title: 'Jobverlust',
|
||||
date: '2016-11-03',
|
||||
emotion: -0.6,
|
||||
customColor: null,
|
||||
gradientPreset: null,
|
||||
image: null,
|
||||
note: '',
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now()
|
||||
},
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
title: 'Hochzeit',
|
||||
date: '2018-07-20',
|
||||
emotion: 0.95,
|
||||
customColor: null,
|
||||
gradientPreset: 5,
|
||||
image: 'demo/photo-1506905925346-21bda4d32df4.jpeg',
|
||||
note: 'Der schönste Tag',
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now()
|
||||
},
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
title: 'Umzug',
|
||||
date: '2021-04-01',
|
||||
emotion: -0.3,
|
||||
customColor: null,
|
||||
gradientPreset: null,
|
||||
image: null,
|
||||
note: '',
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now()
|
||||
},
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
title: 'Neuer Job',
|
||||
date: '2023-01-10',
|
||||
emotion: 0.5,
|
||||
customColor: null,
|
||||
gradientPreset: null,
|
||||
image: 'demo/photo-1530103862676-de8c9debad1d.jpeg',
|
||||
note: 'Neues Kapitel',
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now()
|
||||
}
|
||||
]
|
||||
|
||||
export { emotionToColor, GRADIENT_PRESETS }
|
||||
|
||||
export const useEventsStore = defineStore('events', () => {
|
||||
const events = ref([...demoEvents])
|
||||
const selectedEventId = ref(null)
|
||||
const panelOpen = ref(false)
|
||||
const editingEventId = ref(null)
|
||||
|
||||
// Ghost event for live preview while creating/editing
|
||||
const ghostEmotion = ref(0)
|
||||
const ghostCustomColor = ref(null)
|
||||
const ghostGradientPreset = ref(null)
|
||||
const ghostTitle = ref('')
|
||||
const ghostDate = ref(new Date().toISOString().slice(0, 10))
|
||||
const ghostNote = ref('')
|
||||
const ghostImage = ref(null)
|
||||
|
||||
const ghostEvent = computed(() => ({
|
||||
id: '__ghost__',
|
||||
title: ghostTitle.value || 'New Event',
|
||||
date: ghostDate.value,
|
||||
emotion: ghostEmotion.value,
|
||||
customColor: ghostCustomColor.value,
|
||||
gradientPreset: ghostGradientPreset.value,
|
||||
image: ghostImage.value,
|
||||
note: ghostNote.value
|
||||
}))
|
||||
|
||||
const sortedEvents = computed(() => {
|
||||
return [...events.value].sort((a, b) => new Date(a.date) - new Date(b.date))
|
||||
})
|
||||
|
||||
function selectEvent(id) {
|
||||
selectedEventId.value = id
|
||||
}
|
||||
|
||||
function openPanel(eventId = null) {
|
||||
if (eventId) {
|
||||
// Edit mode
|
||||
editingEventId.value = eventId
|
||||
const event = events.value.find((e) => e.id === eventId)
|
||||
if (event) {
|
||||
ghostTitle.value = event.title
|
||||
ghostDate.value = event.date
|
||||
ghostEmotion.value = event.emotion
|
||||
ghostCustomColor.value = event.customColor
|
||||
ghostGradientPreset.value = event.gradientPreset ?? null
|
||||
ghostImage.value = event.image || null
|
||||
ghostNote.value = event.note
|
||||
}
|
||||
} else {
|
||||
// Create mode
|
||||
editingEventId.value = null
|
||||
ghostTitle.value = ''
|
||||
ghostDate.value = new Date().toISOString().slice(0, 10)
|
||||
ghostEmotion.value = 0
|
||||
ghostCustomColor.value = null
|
||||
ghostGradientPreset.value = null
|
||||
ghostImage.value = null
|
||||
ghostNote.value = ''
|
||||
}
|
||||
panelOpen.value = true
|
||||
}
|
||||
|
||||
// Auto-save: persist ghost → event in edit mode on every change
|
||||
function persistToEvent() {
|
||||
if (!editingEventId.value) return
|
||||
const idx = events.value.findIndex((e) => e.id === editingEventId.value)
|
||||
if (idx === -1) return
|
||||
events.value[idx] = {
|
||||
...events.value[idx],
|
||||
title: ghostTitle.value,
|
||||
date: ghostDate.value,
|
||||
emotion: ghostEmotion.value,
|
||||
customColor: ghostCustomColor.value,
|
||||
gradientPreset: ghostGradientPreset.value,
|
||||
image: ghostImage.value,
|
||||
note: ghostNote.value,
|
||||
updatedAt: Date.now()
|
||||
}
|
||||
}
|
||||
|
||||
// Watch all ghost fields — auto-save in edit mode
|
||||
watch(
|
||||
[ghostTitle, ghostDate, ghostEmotion, ghostCustomColor, ghostGradientPreset, ghostImage, ghostNote],
|
||||
() => { persistToEvent() }
|
||||
)
|
||||
|
||||
function closePanel() {
|
||||
// Create mode: auto-create event if there's content
|
||||
if (!editingEventId.value && ghostTitle.value.trim()) {
|
||||
events.value.push({
|
||||
id: crypto.randomUUID(),
|
||||
title: ghostTitle.value,
|
||||
date: ghostDate.value,
|
||||
emotion: ghostEmotion.value,
|
||||
customColor: ghostCustomColor.value,
|
||||
gradientPreset: ghostGradientPreset.value,
|
||||
image: ghostImage.value,
|
||||
note: ghostNote.value,
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now()
|
||||
})
|
||||
}
|
||||
panelOpen.value = false
|
||||
editingEventId.value = null
|
||||
selectedEventId.value = null
|
||||
}
|
||||
|
||||
function deleteEvent(id) {
|
||||
events.value = events.value.filter((e) => e.id !== id)
|
||||
closePanel()
|
||||
}
|
||||
|
||||
function getGlowColor(event) {
|
||||
if (event.customColor) return event.customColor
|
||||
return emotionToColor(event.emotion, event.gradientPreset ?? null)
|
||||
}
|
||||
|
||||
return {
|
||||
events,
|
||||
selectedEventId,
|
||||
panelOpen,
|
||||
editingEventId,
|
||||
ghostEmotion,
|
||||
ghostCustomColor,
|
||||
ghostGradientPreset,
|
||||
ghostTitle,
|
||||
ghostDate,
|
||||
ghostNote,
|
||||
ghostImage,
|
||||
ghostEvent,
|
||||
sortedEvents,
|
||||
selectEvent,
|
||||
openPanel,
|
||||
closePanel,
|
||||
deleteEvent,
|
||||
getGlowColor
|
||||
}
|
||||
})
|
||||
BIN
frontend/src/stores/images/photo-1506905925346-21bda4d32df4.jpeg
Normal file
BIN
frontend/src/stores/images/photo-1506905925346-21bda4d32df4.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
frontend/src/stores/images/photo-1530103862676-de8c9debad1d.jpeg
Normal file
BIN
frontend/src/stores/images/photo-1530103862676-de8c9debad1d.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
frontend/src/stores/images/photo-1534067783941-51c9c23ecefd.jpeg
Normal file
BIN
frontend/src/stores/images/photo-1534067783941-51c9c23ecefd.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
73
frontend/src/stores/settings.js
Normal file
73
frontend/src/stores/settings.js
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const STORAGE_KEY = 'thatsme-settings'
|
||||
|
||||
const FLOATING_LINES_DEFAULTS = {
|
||||
// Linien
|
||||
speed: 1.0,
|
||||
lineCount: 10,
|
||||
spread: 0.05,
|
||||
fanSpread: 0.05,
|
||||
lineSharpness: 8.0,
|
||||
waveFrequency: 7.0,
|
||||
bezierCurvature: 0.2,
|
||||
circleRadius: 75,
|
||||
glowSize: 18,
|
||||
glowStrength: 1.5,
|
||||
// Hintergrund
|
||||
bgCenter: '#0a0514',
|
||||
bgEdge: '#000000',
|
||||
gradientStops: '#e947f5\n#2f4ba2\n#0a0a12',
|
||||
backgroundImage: ''
|
||||
}
|
||||
|
||||
function loadFromStorage() {
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY)
|
||||
return stored ? JSON.parse(stored) : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export { FLOATING_LINES_DEFAULTS }
|
||||
|
||||
export const useSettingsStore = defineStore('settings', () => {
|
||||
const stored = loadFromStorage()
|
||||
|
||||
const theme = ref(stored?.theme ?? 'light')
|
||||
const floatingLines = ref(stored?.floatingLines ?? { ...FLOATING_LINES_DEFAULTS })
|
||||
|
||||
function persist() {
|
||||
localStorage.setItem(
|
||||
STORAGE_KEY,
|
||||
JSON.stringify({
|
||||
theme: theme.value,
|
||||
floatingLines: floatingLines.value
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
watch([theme, floatingLines], persist, { deep: true })
|
||||
|
||||
function toggleTheme() {
|
||||
theme.value = theme.value === 'light' ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
function updateFloatingLines(updates) {
|
||||
floatingLines.value = { ...floatingLines.value, ...updates }
|
||||
}
|
||||
|
||||
function resetFloatingLines() {
|
||||
floatingLines.value = { ...FLOATING_LINES_DEFAULTS }
|
||||
}
|
||||
|
||||
return {
|
||||
theme,
|
||||
floatingLines,
|
||||
toggleTheme,
|
||||
updateFloatingLines,
|
||||
resetFloatingLines
|
||||
}
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue