update ui (#9)

- feat. update ui (981c920d03c0f4a2eb177778206aa39c0964b09f)
- feat. update default template (a25d574e5d9688831346c10ef1d2fabbdd7ab891)

src/app/globals.css

@@ -66,3 +66,42 @@
 .code-area pre {
   font-family: "Menlo", "Monaco", "Courier New", monospace;
 }
+
+/* Custom rainbow border animation */
+@keyframes rainbow-border-glow {
+  0% {
+    border-color: #8b5cf6;
+    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3);
+  }
+  16.66% {
+    border-color: #ec4899;
+    box-shadow: 0 0 30px rgba(236, 72, 153, 0.5), 0 0 20px rgba(236, 72, 153, 0.3);
+  }
+  33.33% {
+    border-color: #f87171;
+    box-shadow: 0 0 30px rgba(248, 113, 113, 0.5), 0 0 20px rgba(248, 113, 113, 0.3);
+  }
+  50% {
+    border-color: #fb923c;
+    box-shadow: 0 0 30px rgba(251, 146, 60, 0.5), 0 0 20px rgba(251, 146, 60, 0.3);
+  }
+  66.66% {
+    border-color: #fbbf24;
+    box-shadow: 0 0 30px rgba(251, 191, 36, 0.5), 0 0 20px rgba(251, 191, 36, 0.3);
+  }
+  83.33% {
+    border-color: #4ade80;
+    box-shadow: 0 0 30px rgba(74, 222, 128, 0.5), 0 0 20px rgba(74, 222, 128, 0.3);
+  }
+  100% {
+    border-color: #8b5cf6;
+    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3);
+  }
+}
+
+.rainbow-border-animate {
+  animation: rainbow-border-glow 4s ease-in-out infinite;
+  /* Ensure smooth transition when animation stops */
+  border-color: #8b5cf6;
+  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3);
+}

src/components/prompt-input.tsx

@@ -37,6 +37,7 @@ export function PromptInput({
   const [selectedColors, setSelectedColors] = useState<string[]>([]);
   const [improveError, setImproveError] = useState<string | null>(null);
   const [showAuthError, setShowAuthError] = useState(false);
+  const [isAnimationActive, setIsAnimationActive] = useState(true);
 
   // Update prompt when initialPrompt changes
   useEffect(() => {
@@ -188,21 +189,33 @@ export function PromptInput({
           onClick={toggleFullScreen}
         />
       </div>
-      <form onSubmit={handleSubmit} className="flex flex-col gap-4 h-full">
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4 h-full relative z-[1]">
         <div className={`relative ${isFullScreen ? "h-full" : ""}`}>
           <ColorPanel onColorsChange={handleColorsChange} />
-          <Textarea
-            value={prompt}
-            onChange={(e) => {
-              setPrompt(e.target.value);
-              // Clear error when user types
-              if (improveError) setImproveError(null);
-            }}
-            placeholder="Describe what site you want to build. E.g., Build a snake game"
-            className={`min-h-24 pr-20 pt-12 bg-novita-gray/20 border-novita-gray/30 text-white placeholder:text-novita-gray/70 resize-none ${isFullScreen ? "h-full" : ""}`}
-            disabled={isLoading || isImprovingPrompt}
-          />
-          <div className="absolute bottom-3 right-3 flex gap-2">
+          
+          {/* Textarea with animated glowing border */}
+          <div className={`relative ${isFullScreen ? "h-full" : ""}`}>
+            <Textarea
+              value={prompt}
+              onChange={(e) => {
+                setPrompt(e.target.value);
+                // Clear error when user types
+                if (improveError) setImproveError(null);
+              }}
+              onBlur={() => setIsAnimationActive(true)}
+              onFocus={() => setIsAnimationActive(false)}
+              placeholder="Describe what site you want to build. E.g., Build a snake game"
+              className={`min-h-24 pr-20 pt-12 bg-novita-gray/20 text-white placeholder:text-white/40 resize-none relative z-[1] rounded-lg transition-colors duration-300 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-novita-green ${
+                isFullScreen ? "h-full" : ""
+              } ${
+                isAnimationActive 
+                  ? "border-2 rainbow-border-animate" 
+                  : "border-2 border-novita-gray/30"
+              }`}
+              disabled={isLoading || isImprovingPrompt}
+            />
+          </div>
+          <div className="absolute bottom-3 right-3 flex gap-2 z-10">
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>

src/lib/constants.dev.ts

@@ -104,6 +104,57 @@ export const DEFAULT_HTML = `<!DOCTYPE html>
         .text-huge {
             font-size: clamp(6rem, 20vw, 15rem);
         }
+        
+        /* Arrow animation styles */
+        .arrow-container {
+            position: fixed;
+            bottom: 0px;
+            left: 0px;
+            z-index: 50;
+            pointer-events: none;
+        }
+        
+        .arrow {
+            font-size: 6rem;
+            color: #fff;
+            animation: moveLeftRight 3s ease-in-out infinite;
+            text-shadow: 
+                0 0 20px rgba(255, 255, 255, 0.8),
+                0 0 40px rgba(255, 255, 255, 0.6),
+                0 0 60px rgba(255, 255, 255, 0.4),
+                4px 4px 8px rgba(0, 0, 0, 0.5);
+            filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7));
+            opacity: 0.9;
+            font-weight: bold;
+            transition: all 0.3s ease;
+        }
+        
+        .arrow:hover {
+            opacity: 1;
+            transform: scale(1.1);
+            text-shadow: 
+                0 0 30px rgba(255, 255, 255, 1),
+                0 0 50px rgba(255, 255, 255, 0.8),
+                0 0 80px rgba(255, 255, 255, 0.6),
+                4px 4px 12px rgba(0, 0, 0, 0.7);
+        }
+        
+        @keyframes moveLeftRight {
+            0%, 100% {
+                transform: translateX(0);
+                opacity: 0.9;
+            }
+            25% {
+                opacity: 1;
+            }
+            50% {
+                transform: translateX(60px);
+                opacity: 0.95;
+            }
+            75% {
+                opacity: 1;
+            }
+        }
     </style>
 </head>
 <body class="pixel-grid scanlines">
@@ -144,6 +195,11 @@ export const DEFAULT_HTML = `<!DOCTYPE html>
         </div>
     </div>
     
+    <!-- Animated arrow in bottom left corner -->
+    <div class="arrow-container">
+        <div class="arrow">←</div>
+    </div>
+    
     <script>
     document.addEventListener('DOMContentLoaded', function() {
         // Brutalist press-down interactivity

src/lib/constants.prod.ts

@@ -104,6 +104,57 @@ export const DEFAULT_HTML = `<!DOCTYPE html>
         .text-huge {
             font-size: clamp(6rem, 20vw, 15rem);
         }
+        
+        /* Arrow animation styles */
+        .arrow-container {
+            position: fixed;
+            bottom: 0px;
+            left: 0px;
+            z-index: 50;
+            pointer-events: none;
+        }
+        
+        .arrow {
+            font-size: 6rem;
+            color: #fff;
+            animation: moveLeftRight 3s ease-in-out infinite;
+            text-shadow: 
+                0 0 20px rgba(255, 255, 255, 0.8),
+                0 0 40px rgba(255, 255, 255, 0.6),
+                0 0 60px rgba(255, 255, 255, 0.4),
+                4px 4px 8px rgba(0, 0, 0, 0.5);
+            filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7));
+            opacity: 0.9;
+            font-weight: bold;
+            transition: all 0.3s ease;
+        }
+        
+        .arrow:hover {
+            opacity: 1;
+            transform: scale(1.1);
+            text-shadow: 
+                0 0 30px rgba(255, 255, 255, 1),
+                0 0 50px rgba(255, 255, 255, 0.8),
+                0 0 80px rgba(255, 255, 255, 0.6),
+                4px 4px 12px rgba(0, 0, 0, 0.7);
+        }
+        
+        @keyframes moveLeftRight {
+            0%, 100% {
+                transform: translateX(0);
+                opacity: 0.9;
+            }
+            25% {
+                opacity: 1;
+            }
+            50% {
+                transform: translateX(60px);
+                opacity: 0.95;
+            }
+            75% {
+                opacity: 1;
+            }
+        }
     </style>
 </head>
 <body class="pixel-grid scanlines">
@@ -144,6 +195,11 @@ export const DEFAULT_HTML = `<!DOCTYPE html>
         </div>
     </div>
     
+    <!-- Animated arrow in bottom left corner -->
+    <div class="arrow-container">
+        <div class="arrow">←</div>
+    </div>
+    
     <script>
     document.addEventListener('DOMContentLoaded', function() {
         // Brutalist press-down interactivity

tailwind.config.ts

@@ -74,10 +74,68 @@ const config = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        "rainbow-border": {
+          "0%": {
+            borderColor: "#8b5cf6", // purple-400
+            boxShadow: "0 0 20px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.3)",
+          },
+          "16.66%": {
+            borderColor: "#ec4899", // pink-400
+            boxShadow: "0 0 20px rgba(236, 72, 153, 0.5), 0 0 40px rgba(236, 72, 153, 0.3)",
+          },
+          "33.33%": {
+            borderColor: "#f87171", // red-400
+            boxShadow: "0 0 20px rgba(248, 113, 113, 0.5), 0 0 40px rgba(248, 113, 113, 0.3)",
+          },
+          "50%": {
+            borderColor: "#fb923c", // orange-400
+            boxShadow: "0 0 20px rgba(251, 146, 60, 0.5), 0 0 40px rgba(251, 146, 60, 0.3)",
+          },
+          "66.66%": {
+            borderColor: "#fbbf24", // yellow-400
+            boxShadow: "0 0 20px rgba(251, 191, 36, 0.5), 0 0 40px rgba(251, 191, 36, 0.3)",
+          },
+          "83.33%": {
+            borderColor: "#4ade80", // green-400
+            boxShadow: "0 0 20px rgba(74, 222, 128, 0.5), 0 0 40px rgba(74, 222, 128, 0.3)",
+          },
+          "100%": {
+            borderColor: "#8b5cf6", // purple-400
+            boxShadow: "0 0 20px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.3)",
+          },
+        },
+        "color-shift": {
+          "0%, 100%": {
+            "background-position": "0% 50%",
+          },
+          "50%": {
+            "background-position": "100% 50%",
+          },
+        },
+        "border-glow": {
+          "0%": {
+            opacity: "0.1",
+            transform: "scale(1)",
+          },
+          "50%": {
+            opacity: "0.3",
+            transform: "scale(1.02)",
+          },
+          "100%": {
+            opacity: "0.1",
+            transform: "scale(1)",
+          },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "rainbow-border": "rainbow-border 4s ease-in-out infinite",
+        "color-shift": "color-shift 3s ease-in-out infinite",
+        "border-glow": "border-glow 4s ease-in-out infinite",
+      },
+      boxShadow: {
+        "rainbow-glow": "0 0 20px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.3), 0 0 60px rgba(139, 92, 246, 0.1)",
       },
     },
   },