change bg based on time of day

app/page.module.css

@@ -11,10 +11,6 @@
 .background {
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
-  background-color: #1E90FF; /* Solid color fallback */
-  background-image:
-    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3), transparent 70%),
-    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.3), transparent 70%);
   background-blend-mode: screen;
   background-size: cover;
   background-position: center;

app/page.tsx

@@ -1,15 +1,22 @@
 "use client";
 
 import styles from './page.module.css';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useChat } from 'ai/react';
 import { FunctionCallHandler, Message, nanoid } from 'ai';
 import ReactMarkdown from "react-markdown";
 import { Bot, User } from "lucide-react";
 import { toast } from 'sonner';
 import { FunctionIcon } from './icons';
+import { updateBackground } from './util';
 
 const Page: React.FC = () => {
+  useEffect(() => {
+    updateBackground();
+    const interval = setInterval(updateBackground, 6000);
+
+    return () => clearInterval(interval);
+  }, []);
   const functionCallHandler: FunctionCallHandler = async (
     chatMessages,
     functionCall,
@@ -120,7 +127,7 @@ const Page: React.FC = () => {
 
   return (
     <main className={styles.main}>
-      <div className={styles.background}></div>
+      <div id="bg" className={styles.background}></div>
       <div className={styles.messages}>
         {messages.length > 0 ? (
           messages.map((message, i) => {

app/util.ts

@@ -0,0 +1,55 @@
+export function updateBackground(): void {
+    const hour = new Date().getHours();
+    const background = document.getElementById('bg') as HTMLElement | null;
+
+    if (!background) {
+        console.warn("Background element not found, will retry later.");
+        setTimeout(updateBackground, 500); // Retry after a delay
+        return;
+    }
+
+    let color1, color2, color3; // Colors for the radial gradients and background
+
+    if (hour >= 6 && hour < 8) {
+        // Early morning
+        color1 = 'rgba(173, 216, 230, 0.3)';
+        color2 = 'rgba(135, 206, 250, 0.3)';
+        color3 = '#B0E0E6'; // Powder blue
+    } else if (hour >= 8 && hour < 10) {
+        // Mid-morning
+        color1 = 'rgba(240, 230, 140, 0.3)';
+        color2 = 'rgba(238, 232, 170, 0.3)';
+        color3 = '#F0E68C'; // Khaki
+    } else if (hour >= 10 && hour < 12) {
+        // Late morning
+        color1 = 'rgba(250, 250, 210, 0.3)';
+        color2 = 'rgba(255, 255, 224, 0.3)';
+        color3 = '#FFFACD'; // Lemon chiffon
+    } else if (hour >= 12 && hour < 14) {
+        // Early afternoon
+        color1 = 'rgba(255, 182, 193, 0.3)';
+        color2 = 'rgba(255, 192, 203, 0.3)';
+        color3 = '#FFB6C1'; // Light pink
+    } else if (hour >= 14 && hour < 16) {
+        // Mid-afternoon
+        color1 = 'rgba(255, 160, 122, 0.3)';
+        color2 = 'rgba(255, 127, 80, 0.3)';
+        color3 = '#FFA07A'; // Light salmon
+    } else if (hour >= 16 && hour < 18) {
+        // Late afternoon to early evening
+        color1 = 'rgba(255, 99, 71, 0.3)';
+        color2 = 'rgba(255, 69, 0, 0.3)';
+        color3 = '#FF4500'; // Orange red
+    } else {
+        // Night
+        color1 = 'black';
+        color2 = 'black';
+        color3 = '#000080'; // Navy blue for a slightly softer night effect
+    }
+
+    // Set the background image and color
+    background.style.backgroundImage = 
+        `radial-gradient(circle at 20% 20%, ${color1}, transparent 70%), 
+         radial-gradient(circle at 80% 80%, ${color2}, transparent 70%)`;
+    background.style.backgroundColor = color3;
+}