Spaces:

vaibhav07112004
/

vibestory-frontend

Sleeping

App Files Files Community

vaibhav07112004 commited on Jun 11

Commit

27cc733

verified ·

1 Parent(s): be8ee1b

Upload 3 files

Browse files

Files changed (3) hide show

app/globals.css +132 -0
app/layout.tsx +27 -0
app/page.tsx +253 -0

app/globals.css ADDED Viewed

	@@ -0,0 +1,132 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 329 100% 61%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 329 100% 61%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 329 100% 61%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 329 100% 61%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+.text-gradient {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+/* Custom Scrollbar Styles */
+.scrollbar-thin {
+  scrollbar-width: thin;
+}
+.scrollbar-thumb-gray-600::-webkit-scrollbar-thumb {
+  background-color: #4b5563;
+  border-radius: 0.375rem;
+}
+.scrollbar-thumb-gray-500::-webkit-scrollbar-thumb {
+  background-color: #6b7280;
+  border-radius: 0.375rem;
+}
+.scrollbar-track-gray-800::-webkit-scrollbar-track {
+  background-color: #1f2937;
+  border-radius: 0.375rem;
+}
+.scrollbar-track-gray-700::-webkit-scrollbar-track {
+  background-color: #374151;
+  border-radius: 0.375rem;
+}
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background-color: #4b5563;
+  border-radius: 0.375rem;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background-color: #6b7280;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background-color: #1f2937;
+  border-radius: 0.375rem;
+}
+/* Smooth scrolling */
+.scrollbar-thin {
+  scroll-behavior: smooth;
+}
+/* Hide scrollbar for specific elements but keep functionality */
+.scrollbar-hide-but-functional {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  overflow: auto;
+}
+.scrollbar-hide-but-functional::-webkit-scrollbar {
+  display: none;
+}

app/layout.tsx ADDED Viewed

	@@ -0,0 +1,27 @@

+import type React from "react"
+import type { Metadata } from "next"
+import { Inter } from "next/font/google"
+import "./globals.css"
+import AuthGuard from "@/components/auth-guard"
+const inter = Inter({ subsets: ["latin"] })
+export const metadata: Metadata = {
+  title: "MoodVibe - AI-Powered Emotion Detection",
+  description: "Discover your emotions through AI-powered image analysis and get personalized music recommendations",
+    generator: 'v0.dev'
+}
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <AuthGuard>{children}</AuthGuard>
+      </body>
+    </html>
+  )
+}

app/page.tsx ADDED Viewed

	@@ -0,0 +1,253 @@

+"use client"
+import { useState, useEffect } from "react"
+import StoryInterface from "@/components/story-interface"
+import UserAccountDropdown from "@/components/user-account-dropdown"
+import { Button } from "@/components/ui/button"
+import { LogIn } from "lucide-react"
+import Link from "next/link"
+interface User {
+  id: string
+  name: string
+  email: string
+  createdAt: string
+  emailNotifications: boolean
+  weeklyRecap: boolean
+  dailyMoodCheck: boolean
+  reminderTime: string
+  profilePicture?: string
+}
+export default function Home() {
+  const [currentUser, setCurrentUser] = useState<User | null>(null)
+  const [showAccountDropdown, setShowAccountDropdown] = useState(false)
+  useEffect(() => {
+    // Check for user data in URL params (from OAuth callback)
+    const urlParams = new URLSearchParams(window.location.search)
+    const userDataParam = urlParams.get("userData")
+    if (userDataParam) {
+      try {
+        const userData = JSON.parse(decodeURIComponent(userDataParam))
+        localStorage.setItem("user", JSON.stringify(userData))
+        setCurrentUser(userData)
+        // Clean up URL
+        window.history.replaceState({}, document.title, window.location.pathname)
+      } catch (error) {
+        console.error("Error parsing user data from URL:", error)
+      }
+    } else {
+      // Check localStorage for existing user
+      try {
+        const savedUser = localStorage.getItem("user")
+        if (savedUser && savedUser !== "undefined") {
+          const userData = JSON.parse(savedUser)
+          setCurrentUser(userData)
+        }
+      } catch (error) {
+        console.error("Error loading user from localStorage:", error)
+      }
+    }
+  }, [])
+  const getInitials = (name: string) => {
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2)
+  }
+  const getAvatarColor = (email: string) => {
+    const colors = [
+      "bg-red-500",
+      "bg-blue-500",
+      "bg-green-500",
+      "bg-purple-500",
+      "bg-pink-500",
+      "bg-indigo-500",
+      "bg-yellow-500",
+      "bg-teal-500",
+    ]
+    const hash = email.split("").reduce((a, b) => {
+      a = (a << 5) - a + b.charCodeAt(0)
+      return a & a
+    }, 0)
+    return colors[Math.abs(hash) % colors.length]
+  }
+  const renderUserAvatar = () => {
+    if (!currentUser) return null
+    if (currentUser.profilePicture) {
+      return (
+        <img
+          src={currentUser.profilePicture || "/placeholder.svg"}
+          alt={currentUser.name}
+          className="w-8 h-8 rounded-full object-cover"
+        />
+      )
+    }
+    return (
+      <div
+        className={`w-8 h-8 rounded-full ${getAvatarColor(currentUser.email)} flex items-center justify-center text-white text-sm font-bold`}
+      >
+        {getInitials(currentUser.name)}
+      </div>
+    )
+  }
+  const handleUserUpdate = (updatedUser: User) => {
+    setCurrentUser(updatedUser)
+  }
+  return (
+    <main className="min-h-screen bg-gradient-to-br from-purple-900 via-black to-pink-900 text-white">
+      {/* Animated background elements */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-20 left-10 w-72 h-72 bg-pink-500/20 rounded-full blur-3xl animate-pulse"></div>
+        <div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl animate-pulse delay-500"></div>
+      </div>
+      {/* Grid pattern overlay */}
+      <div
+        className="fixed inset-0 opacity-30 pointer-events-none"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%23ffffff' fillOpacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+        }}
+      ></div>
+      {/* Main content container */}
+      <div className="relative z-10 min-h-screen flex flex-col">
+        {/* Header with User Account or Sign In/Up buttons */}
+        <div className="absolute top-4 right-4 z-30">
+          {currentUser ? (
+            // User Account Button
+            <button
+              onClick={() => setShowAccountDropdown(true)}
+              className="flex items-center gap-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-4 py-2 hover:bg-white/20 transition-all duration-200"
+            >
+              {renderUserAvatar()}
+              <span className="text-white text-sm font-medium hidden sm:block">{currentUser.name.split(" ")[0]}</span>
+            </button>
+          ) : (
+            // Sign In/Up Buttons
+            <div className="flex gap-3">
+              <Link href="/auth/login">
+                <Button
+                  variant="outline"
+                  className="bg-white/10 backdrop-blur-sm border-white/20 text-white hover:bg-white/20 transition-all duration-200"
+                >
+                  <LogIn className="h-4 w-4 mr-2" />
+                  Sign In
+                </Button>
+              </Link>
+              <Link href="/auth/signup">
+                <Button className="bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white border-0 transition-all duration-200">
+                  Sign Up
+                </Button>
+              </Link>
+            </div>
+          )}
+        </div>
+        {/* User Account Dropdown */}
+        <UserAccountDropdown
+          isOpen={showAccountDropdown}
+          onClose={() => setShowAccountDropdown(false)}
+          currentUser={currentUser}
+          onUserUpdate={handleUserUpdate}
+        />
+        {/* Hero section */}
+        <div className="flex-1 flex flex-col items-center justify-center p-4 pb-8">
+          <div className="text-center mb-8 max-w-4xl mx-auto">
+            <div className="mb-6">
+              <div className="inline-flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-full px-6 py-3 mb-6">
+                <span className="text-2xl">🎭</span>
+                <span className="text-sm font-medium text-gray-300">AI-Powered Emotion Detection</span>
+              </div>
+            </div>
+            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-pink-400 via-purple-400 to-blue-400 bg-clip-text text-transparent leading-tight">
+              Mood & Vibe
+              <br />
+              <span className="text-3xl md:text-5xl lg:text-6xl">Detection</span>
+            </h1>
+            <p className="text-lg md:text-xl text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
+              Discover your emotions through AI-powered image analysis and get
+              <span className="text-pink-400 font-semibold"> personalized music recommendations </span>
+              that perfectly match your mood
+            </p>
+          </div>
+          {/* App interface - Main Interactive Component */}
+          <div className="relative w-full max-w-lg mx-auto">
+            {/* Glow effect around the app */}
+            <div className="absolute -inset-4 bg-gradient-to-r from-pink-500/30 via-purple-500/30 to-blue-500/30 rounded-3xl blur-2xl"></div>
+            {/* App container with proper z-index */}
+            <div className="relative z-20">
+              <StoryInterface />
+            </div>
+          </div>
+          {/* Features preview - Moved below the app */}
+          <div className="grid md:grid-cols-3 gap-4 mt-8 max-w-3xl mx-auto">
+            <div className="bg-white/5 backdrop-blur-sm rounded-xl p-4 border border-white/10">
+              <div className="text-2xl mb-2">🧠</div>
+              <h3 className="text-sm font-semibold mb-1">AI Detection</h3>
+              <p className="text-xs text-gray-400">Advanced emotion analysis</p>
+            </div>
+            <div className="bg-white/5 backdrop-blur-sm rounded-xl p-4 border border-white/10">
+              <div className="text-2xl mb-2">🎵</div>
+              <h3 className="text-sm font-semibold mb-1">Smart Music</h3>
+              <p className="text-xs text-gray-400">Personalized recommendations</p>
+            </div>
+            <div className="bg-white/5 backdrop-blur-sm rounded-xl p-4 border border-white/10">
+              <div className="text-2xl mb-2">⭐</div>
+              <h3 className="text-sm font-semibold mb-1">Story Highlights</h3>
+              <p className="text-xs text-gray-400">Save favorite moments</p>
+            </div>
+          </div>
+          {/* Bottom info */}
+          <div className="text-center mt-8 max-w-2xl mx-auto">
+            <p className="text-gray-400 mb-4 text-sm">Join millions discovering their emotions through AI</p>
+            <div className="flex flex-wrap items-center justify-center gap-4 text-xs">
+              <div className="flex items-center gap-2">
+                <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
+                <span className="text-gray-400">Real-time Processing</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
+                <span className="text-gray-400">Privacy Protected</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></span>
+                <span className="text-gray-400">Free to Use</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Floating elements */}
+      <div className="fixed top-20 right-20 text-3xl animate-bounce delay-1000 opacity-20 pointer-events-none">😊</div>
+      <div className="fixed bottom-32 left-20 text-2xl animate-bounce delay-2000 opacity-20 pointer-events-none">
+        🎵
+      </div>
+      <div className="fixed top-1/3 right-10 text-xl animate-bounce delay-3000 opacity-20 pointer-events-none">✨</div>
+      <div className="fixed bottom-20 right-1/3 text-2xl animate-bounce delay-4000 opacity-20 pointer-events-none">
+        🎭
+      </div>
+    </main>
+  )
+}