420 Theme: Animierte herumfliegende Brokkoli-Emojis hinzugefügt - Bildschirmschoner-Style mit Bounce-Animation

web/src/App.tsx

@@ -144,7 +144,18 @@ export default function App() {
 
   return (
     <ErrorBoundary>
-      <div className="container mx-auto">
+      <div className="container mx-auto" data-theme={theme}>
+        {/* Floating Broccoli for 420 Theme */}
+        {theme === '420' && (
+          <>
+            <div className="broccoli">🥦</div>
+            <div className="broccoli">🥦</div>
+            <div className="broccoli">🥦</div>
+            <div className="broccoli">🥦</div>
+            <div className="broccoli">🥦</div>
+            <div className="broccoli">🥦</div>
+          </>
+        )}
         <header className="flex items-center justify-between p-6">
           <div className="flex items-center">
             <div>

web/src/styles.css

@@ -75,6 +75,97 @@ body {
   animation: cannabis-bg 20s ease infinite;
   color: #f0fdf4;
   font-family: 'Poppins', ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* Floating Broccoli Animation */
+[data-theme="420"]::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Broccoli Elements */
+[data-theme="420"] .broccoli {
+  position: fixed;
+  font-size: 2rem;
+  opacity: 0.6;
+  z-index: 1;
+  pointer-events: none;
+  animation: float-broccoli 15s linear infinite;
+}
+
+[data-theme="420"] .broccoli:nth-child(1) {
+  top: 10%;
+  left: 10%;
+  animation-delay: 0s;
+  animation-duration: 18s;
+}
+
+[data-theme="420"] .broccoli:nth-child(2) {
+  top: 20%;
+  right: 15%;
+  animation-delay: 3s;
+  animation-duration: 22s;
+}
+
+[data-theme="420"] .broccoli:nth-child(3) {
+  bottom: 25%;
+  left: 20%;
+  animation-delay: 6s;
+  animation-duration: 20s;
+}
+
+[data-theme="420"] .broccoli:nth-child(4) {
+  bottom: 15%;
+  right: 10%;
+  animation-delay: 9s;
+  animation-duration: 25s;
+}
+
+[data-theme="420"] .broccoli:nth-child(5) {
+  top: 50%;
+  left: 5%;
+  animation-delay: 12s;
+  animation-duration: 16s;
+}
+
+[data-theme="420"] .broccoli:nth-child(6) {
+  top: 30%;
+  right: 5%;
+  animation-delay: 15s;
+  animation-duration: 19s;
+}
+
+/* Broccoli Bounce Animation */
+@keyframes float-broccoli {
+  0% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    transform: translate(100px, -50px) rotate(90deg);
+  }
+  50% {
+    transform: translate(200px, 0px) rotate(180deg);
+  }
+  75% {
+    transform: translate(100px, 50px) rotate(270deg);
+  }
+  100% {
+    transform: translate(0, 0) rotate(360deg);
+  }
+}
+
+/* Ensure content stays above broccoli */
+[data-theme="420"] .container {
+  position: relative;
+  z-index: 10;
 }
 
 @keyframes cannabis-bg {