Spaces:

viktor-hu
/

novita-anysite

Running

App Files Files Community

viktor-hu commited on Jun 12

Commit

fbceaa8

verified ·

1 Parent(s): 11ef531

update ui (#10)

Browse files

- feat. update ui (23fa6bce2622fa432d3e62fd47b0908243b5fc36)

Files changed (5) hide show

src/app/globals.css +3 -37
src/components/prompt-input.tsx +2 -2
src/lib/constants.dev.ts +1 -56
src/lib/constants.prod.ts +1 -56
tailwind.config.ts +1 -62

src/app/globals.css CHANGED Viewed

@@ -67,41 +67,7 @@
   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);
 }

   font-family: "Menlo", "Monaco", "Courier New", monospace;
 }
+.unfocus-border {
+  border-color: #23d57c;
+  box-shadow: 0 0 20px rgba(35, 213, 124, 0.5);
 }

src/components/prompt-input.tsx CHANGED Viewed

@@ -205,11 +205,11 @@ export function PromptInput({
               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}

               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-gray ${
                 isFullScreen ? "h-full" : ""
               } ${
                 isAnimationActive
+                  ? "border-2 unfocus-border"
                   : "border-2 border-novita-gray/30"
               }`}
               disabled={isLoading || isImprovingPrompt}

src/lib/constants.dev.ts CHANGED Viewed

@@ -104,57 +104,7 @@ 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">
@@ -195,11 +145,6 @@ 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

         .text-huge {
             font-size: clamp(6rem, 20vw, 15rem);
         }
     </style>
 </head>
 <body class="pixel-grid scanlines">
         </div>
     </div>
     <script>
     document.addEventListener('DOMContentLoaded', function() {
         // Brutalist press-down interactivity

src/lib/constants.prod.ts CHANGED Viewed

@@ -104,57 +104,7 @@ 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">
@@ -195,11 +145,6 @@ 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

         .text-huge {
             font-size: clamp(6rem, 20vw, 15rem);
         }
     </style>
 </head>
 <body class="pixel-grid scanlines">
         </div>
     </div>
     <script>
     document.addEventListener('DOMContentLoaded', function() {
         // Brutalist press-down interactivity

tailwind.config.ts CHANGED Viewed

@@ -74,68 +74,7 @@ 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)",
       },
     },
   },

           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
       },
     },
   },