[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, "fade-in": { "0%": { opacity: 0 }, "100%": { opacity: 1 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "fade-in": "fade-in 0.5s ease-out forwards", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isMerged="true" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } @layer utilities { .bg-grid-slate-200\/50 { background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px); background-size: 20px 20px; } } .react-draggable { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isMerged="true" isEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Lovy-tech | Smart Glasses OS", description: "Advanced e-OS system for smart glasses with real-time performance tracking", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" isEdit="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" "use client" import { useState, useEffect } from "react" import Image from "next/image" import { ChevronLeft, ChevronRight, Plus, Search, Settings, Menu, Clock, MapPin, Users, Calendar, Pause, Sparkles, X, } from "lucide-react" export default function Home() { const [isLoaded, setIsLoaded] = useState(false) const [showAIPopup, setShowAIPopup] = useState(false) const [typedText, setTypedText] = useState("") const [isPlaying, setIsPlaying] = useState(false) useEffect(() => { setIsLoaded(true) // Show AI popup after 3 seconds const popupTimer = setTimeout(() => { setShowAIPopup(true) }, 3000) return () => clearTimeout(popupTimer) }, []) useEffect(() => { if (showAIPopup) { const text = "LLooks like you don't have that many meetings today. Shall I play some Hans Zimmer essentials to help you get into your Flow State?" let i = 0 const typingInterval = setInterval(() => { if (i < text.length) { setTypedText((prev) => prev + text.charAt(i)) i++ } else { clearInterval(typingInterval) } }, 50) return () => clearInterval(typingInterval) } }, [showAIPopup]) const [currentView, setCurrentView] = useState("week") const [currentMonth, setCurrentMonth] = useState("March 2025") const [currentDate, setCurrentDate] = useState("March 5") const [selectedEvent, setSelectedEvent] = useState(null) const handleEventClick = (event) => { setSelectedEvent(event) } // Updated sample calendar events with all events before 4 PM const events = [ { id: 1, title: "Team Meeting", startTime: "09:00", endTime: "10:00", color: "bg-blue-500", day: 1, description: "Weekly team sync-up", location: "Conference Room A", attendees: ["John Doe", "Jane Smith", "Bob Johnson"], organizer: "Alice Brown", }, { id: 2, title: "Lunch with Sarah", startTime: "12:30", endTime: "13:30", color: "bg-green-500", day: 1, description: "Discuss project timeline", location: "Cafe Nero", attendees: ["Sarah Lee"], organizer: "You", }, { id: 3, title: "Project Review", startTime: "14:00", endTime: "15:30", color: "bg-purple-500", day: 3, description: "Q2 project progress review", location: "Meeting Room 3", attendees: ["Team Alpha", "Stakeholders"], organizer: "Project Manager", }, { id: 4, title: "Client Call", startTime: "10:00", endTime: "11:00", color: "bg-yellow-500", day: 2, description: "Quarterly review with major client", location: "Zoom Meeting", attendees: ["Client Team", "Sales Team"], organizer: "Account Manager", }, { id: 5, title: "Team Brainstorm", startTime: "13:00", endTime: "14:30", color: "bg-indigo-500", day: 4, description: "Ideation session for new product features", location: "Creative Space", attendees: ["Product Team", "Design Team"], organizer: "Product Owner", }, { id: 6, title: "Product Demo", startTime: "11:00", endTime: "12:00", color: "bg-pink-500", day: 5, description: "Showcase new features to stakeholders", location: "Demo Room", attendees: ["Stakeholders", "Dev Team"], organizer: "Tech Lead", }, { id: 7, title: "Marketing Meeting", startTime: "13:00", endTime: "14:00", color: "bg-teal-500", day: 6, description: "Discuss Q3 marketing strategy", location: "Marketing Office", attendees: ["Marketing Team"], organizer: "Marketing Director", }, { id: 8, title: "Code Review", startTime: "15:00", endTime: "16:00", color: "bg-cyan-500", day: 7, description: "Review pull requests for new feature", location: "Dev Area", attendees: ["Dev Team"], organizer: "Senior Developer", }, { id: 9, title: "Morning Standup", startTime: "08:30", endTime: "09:30", // Changed from "09:00" to "09:30" color: "bg-blue-400", day: 2, description: "Daily team standup", location: "Slack Huddle", attendees: ["Development Team"], organizer: "Scrum Master", }, { id: 10, title: "Design Review", startTime: "14:30", endTime: "15:45", color: "bg-purple-400", day: 5, description: "Review new UI designs", location: "Design Lab", attendees: ["UX Team", "Product Manager"], organizer: "Lead Designer", }, { id: 11, title: "Investor Meeting", startTime: "10:30", endTime: "12:00", color: "bg-red-400", day: 7, description: "Quarterly investor update", location: "Board Room", attendees: ["Executive Team", "Investors"], organizer: "CEO", }, { id: 12, title: "Team Training", startTime: "09:30", endTime: "11:30", color: "bg-green-400", day: 4, description: "New tool onboarding session", location: "Training Room", attendees: ["All Departments"], organizer: "HR", }, { id: 13, title: "Budget Review", startTime: "13:30", endTime: "15:00", color: "bg-yellow-400", day: 3, description: "Quarterly budget analysis", location: "Finance Office", attendees: ["Finance Team", "Department Heads"], organizer: "CFO", }, { id: 14, title: "Client Presentation", startTime: "11:00", endTime: "12:30", color: "bg-orange-400", day: 6, description: "Present new project proposal", location: "Client Office", attendees: ["Sales Team", "Client Representatives"], organizer: "Account Executive", }, { id: 15, title: "Product Planning", startTime: "14:00", endTime: "15:30", color: "bg-pink-400", day: 1, description: "Roadmap discussion for Q3", location: "Strategy Room", attendees: ["Product Team", "Engineering Leads"], organizer: "Product Manager", }, ] // Sample calendar days for the week view const weekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"] const weekDates = [3, 4, 5, 6, 7, 8, 9] const timeSlots = Array.from({ length: 9 }, (_, i) => i + 8) // 8 AM to 4 PM // Helper function to calculate event position and height const calculateEventStyle = (startTime, endTime) => { const start = Number.parseInt(startTime.split(":")[0]) + Number.parseInt(startTime.split(":")[1]) / 60 const end = Number.parseInt(endTime.split(":")[0]) + Number.parseInt(endTime.split(":")[1]) / 60 const top = (start - 8) * 80 // 80px per hour const height = (end - start) * 80 return { top: `${top}px`, height: `${height}px` } } // Sample calendar for mini calendar const daysInMonth = 31 const firstDayOffset = 5 // Friday is the first day of the month in this example const miniCalendarDays = Array.from({ length: daysInMonth + firstDayOffset }, (_, i) => i < firstDayOffset ? null : i - firstDayOffset + 1, ) // Sample my calendars const myCalendars = [ { name: "My Calendar", color: "bg-blue-500" }, { name: "Work", color: "bg-green-500" }, { name: "Personal", color: "bg-purple-500" }, { name: "Family", color: "bg-orange-500" }, ] const togglePlay = () => { setIsPlaying(!isPlaying) // Here you would typically also control the actual audio playback } return (

{/* Background Image */} Beautiful mountain landscape

{/* Navigation */}

Calendar

{/* Main Content */}

{/* Sidebar */}

{/* Mini Calendar */}

{currentMonth}

{["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (

{day}

))} {miniCalendarDays.map((day, i) => (

{day}

))}

{/* My Calendars */}

My calendars

{myCalendars.map((cal, i) => (

{cal.name}

))}

{/* New position for the big plus button */}

{/* Calendar View */}

{/* Calendar Controls */}

{currentDate}

{/* Week View */}

{/* Week Header */}

{weekDays.map((day, i) => (

{day}

{weekDates[i]}

))}

{/* Time Grid */}

{/* Time Labels */}

{timeSlots.map((time, i) => (

{time > 12 ? `${time - 12} PM` : `${time} AM`}

))}

{/* Days Columns */} {Array.from({ length: 7 }).map((_, dayIndex) => (

{timeSlots.map((_, timeIndex) => (

))} {/* Events */} {events .filter((event) => event.day === dayIndex + 1) .map((event, i) => { const eventStyle = calculateEventStyle(event.startTime, event.endTime) return (

handleEventClick(event)} >

{event.title}

{`${event.startTime} - ${event.endTime}`}

) })}

))}

{/* AI Popup */} {showAIPopup && (

{typedText}

{isPlaying && (

)}

)} {selectedEvent && (

{selectedEvent.title}

{`${selectedEvent.startTime} - ${selectedEvent.endTime}`}

{selectedEvent.location}

{`${weekDays[selectedEvent.day - 1]}, ${weekDates[selectedEvent.day - 1]} ${currentMonth}`}

Attendees:
{selectedEvent.attendees.join(", ") || "No attendees"}

Organizer: {selectedEvent.organizer}

Description: {selectedEvent.description}

)} {/* Floating Action Button - Removed */}

) }

About

Tags

Share

About

Tags

Share

More from christianelton

More Templates Like This