From d52c0aef92800671f1f91ac8a2e137e549261392 Mon Sep 17 00:00:00 2001
From: Muyue <muyue.zerotwo.another611@passmail.com>
Date: Fri, 17 Oct 2025 17:36:47 +0200
Subject: [PATCH] Add animated gradient background with floating particles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement dynamic background that fills entire viewport:
- Animated gradient that smoothly shifts colors every 15s
- Floating radial gradients (particles) that animate independently
- Multiple animation layers with different timings (20s, 25s)
- Content properly layered above background (z-index handling)
- Smooth, continuous animations that don't loop jarringly

Changes:
- App.vue: Full-screen animated background with pseudo-elements
- CollaborativeInput.vue: Same animated effect
- CollaborativeSession.vue: Full viewport background
- All components now use 100% available space
- Subtle visual interest without distracting from content

Result: Modern, premium feel with movement depth

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/App.vue                          | 116 +++++++++++++++++-
 .../src/components/CollaborativeInput.vue     |  52 +++++++-
 .../src/components/CollaborativeSession.vue   |  67 +++++++++-
 3 files changed, 226 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 360025d..e46da8f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -54,20 +54,132 @@ function startNewCollaboration() {
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  background-color: #f5f7fa;
   color: #2c3e50;
 }
 
 #app {
   min-height: 100vh;
 }
+
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes float1 {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+    opacity: 0.03;
+  }
+  25% {
+    transform: translate(100px, -100px) rotate(90deg);
+    opacity: 0.05;
+  }
+  50% {
+    transform: translate(-50px, 150px) rotate(180deg);
+    opacity: 0.03;
+  }
+  75% {
+    transform: translate(-100px, -50px) rotate(270deg);
+    opacity: 0.04;
+  }
+}
+
+@keyframes float2 {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+    opacity: 0.04;
+  }
+  25% {
+    transform: translate(-120px, 80px) rotate(-90deg);
+    opacity: 0.06;
+  }
+  50% {
+    transform: translate(80px, -120px) rotate(-180deg);
+    opacity: 0.04;
+  }
+  75% {
+    transform: translate(120px, 100px) rotate(-270deg);
+    opacity: 0.05;
+  }
+}
+
+@keyframes float3 {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+    opacity: 0.03;
+  }
+  25% {
+    transform: translate(-80px, -80px) rotate(45deg);
+    opacity: 0.05;
+  }
+  50% {
+    transform: translate(100px, 100px) rotate(135deg);
+    opacity: 0.03;
+  }
+  75% {
+    transform: translate(-100px, 80px) rotate(225deg);
+    opacity: 0.04;
+  }
+}
 </style>
 
 <style scoped>
 .app {
   min-height: 100vh;
   padding: 2rem;
-  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+  background: linear-gradient(
+    -45deg,
+    #0f0c29 0%,
+    #302b63 25%,
+    #24243e 50%,
+    #302b63 75%,
+    #0f0c29 100%
+  );
+  background-size: 400% 400%;
+  animation: gradient-shift 15s ease infinite;
+  position: relative;
+  overflow: hidden;
+}
+
+.app::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
+              radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%);
+  animation: float1 20s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.app::after {
+  content: '';
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, rgba(102, 126, 234, 0.12) 0%, transparent 70%);
+  animation: float2 25s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+  border-radius: 50%;
+}
+
+.app > * {
+  position: relative;
+  z-index: 1;
 }
 
 .new-session-btn {
diff --git a/frontend/src/components/CollaborativeInput.vue b/frontend/src/components/CollaborativeInput.vue
index 9616e91..ce3fe9b 100644
--- a/frontend/src/components/CollaborativeInput.vue
+++ b/frontend/src/components/CollaborativeInput.vue
@@ -192,7 +192,16 @@ const removeFile = () => {
 .collaborative-input {
   min-height: 100vh;
   padding: 2rem;
-  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+  background: linear-gradient(
+    -45deg,
+    #0f0c29 0%,
+    #302b63 25%,
+    #24243e 50%,
+    #302b63 75%,
+    #0f0c29 100%
+  );
+  background-size: 400% 400%;
+  animation: gradient-shift 15s ease infinite;
   position: relative;
   overflow: hidden;
 }
@@ -200,20 +209,53 @@ const removeFile = () => {
 .collaborative-input::before {
   content: '';
   position: fixed;
-  top: -50%;
-  right: -50%;
+  top: 0;
+  left: 0;
   width: 200%;
   height: 200%;
-  background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
+  background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
+              radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%);
+  animation: float1 20s ease-in-out infinite;
   pointer-events: none;
   z-index: 0;
 }
 
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes float1 {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+    opacity: 0.03;
+  }
+  25% {
+    transform: translate(100px, -100px) rotate(90deg);
+    opacity: 0.05;
+  }
+  50% {
+    transform: translate(-50px, 150px) rotate(180deg);
+    opacity: 0.03;
+  }
+  75% {
+    transform: translate(-100px, -50px) rotate(270deg);
+    opacity: 0.04;
+  }
+}
+
 .container {
   max-width: 900px;
   margin: 0 auto;
   position: relative;
-  z-index: 1;
+  z-index: 2;
 }
 
 .header {
diff --git a/frontend/src/components/CollaborativeSession.vue b/frontend/src/components/CollaborativeSession.vue
index 40f0210..bf53cc8 100644
--- a/frontend/src/components/CollaborativeSession.vue
+++ b/frontend/src/components/CollaborativeSession.vue
@@ -229,10 +229,73 @@ function formatAgentName(agent) {
 </script>
 
 <style scoped>
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes float1 {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+    opacity: 0.03;
+  }
+  25% {
+    transform: translate(100px, -100px) rotate(90deg);
+    opacity: 0.05;
+  }
+  50% {
+    transform: translate(-50px, 150px) rotate(180deg);
+    opacity: 0.03;
+  }
+  75% {
+    transform: translate(-100px, -50px) rotate(270deg);
+    opacity: 0.04;
+  }
+}
+
 .collaborative-session {
-  max-width: 1400px;
-  margin: 0 auto;
+  max-width: 100%;
+  margin: 0;
   padding: 2rem;
+  min-height: 100vh;
+  background: linear-gradient(
+    -45deg,
+    #0f0c29 0%,
+    #302b63 25%,
+    #24243e 50%,
+    #302b63 75%,
+    #0f0c29 100%
+  );
+  background-size: 400% 400%;
+  animation: gradient-shift 15s ease infinite;
+  position: relative;
+  overflow: hidden;
+}
+
+.collaborative-session::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
+              radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%);
+  animation: float1 20s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.collaborative-session > * {
+  position: relative;
+  z-index: 1;
 }
 
 .session-header {