This commit is contained in:
MarkLo
parent
34dc5b0f87
commit
40f7d0bb92
|
|
@ -184,6 +184,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Heartbeat animation for buttons */
|
||||
@keyframes heartbeat {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
20% {
|
||||
transform: scale(1);
|
||||
}
|
||||
30% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation utility classes */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
|
|
@ -205,6 +224,11 @@
|
|||
animation: scaleUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* Heartbeat animation for call-to-action buttons */
|
||||
.animate-heartbeat {
|
||||
animation: heartbeat 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Stagger delays for sequential animations */
|
||||
.animate-delay-100 {
|
||||
animation-delay: 0.1s;
|
||||
|
|
@ -257,21 +281,21 @@
|
|||
GRADIENT UTILITIES
|
||||
======================================== */
|
||||
|
||||
/* Gradient Backgrounds - Purple/Pink theme */
|
||||
/* Gradient Backgrounds - Blue/Pink in light, Blue/Purple in dark */
|
||||
.gradient-bg-primary {
|
||||
background: linear-gradient(135deg, #9333EA 0%, #EC4899 100%);
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #EC4899 100%);
|
||||
}
|
||||
|
||||
.dark .gradient-bg-primary {
|
||||
background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%);
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
|
||||
}
|
||||
|
||||
.gradient-bg-secondary {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
background: linear-gradient(135deg, #60A5FA 0%, #F472B6 100%);
|
||||
}
|
||||
|
||||
.dark .gradient-bg-secondary {
|
||||
background: linear-gradient(135deg, #c471ed 0%, #c94b4b 100%);
|
||||
background: linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);
|
||||
}
|
||||
|
||||
.gradient-bg-accent {
|
||||
|
|
@ -410,16 +434,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Gradient Text - Purple/Pink theme */
|
||||
/* Gradient Text - Blue/Pink in light, Blue/Purple in dark */
|
||||
.gradient-text-primary {
|
||||
background: linear-gradient(135deg, #9333EA 0%, #EC4899 100%);
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #EC4899 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.dark .gradient-text-primary {
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.gradient-text-secondary {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
background: linear-gradient(135deg, #60A5FA 0%, #F472B6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.dark .gradient-text-secondary {
|
||||
background: linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default function HomePage() {
|
|||
<Link href="/analysis">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-lg hover:shadow-xl transition-shadow"
|
||||
className="bg-gradient-to-r from-blue-500 to-pink-500 dark:from-blue-600 dark:to-purple-600 hover:from-blue-600 hover:to-pink-600 dark:hover:from-blue-700 dark:hover:to-purple-700 shadow-lg hover:shadow-xl transition-all animate-heartbeat"
|
||||
>
|
||||
開始分析
|
||||
</Button>
|
||||
|
|
@ -335,7 +335,7 @@ export default function HomePage() {
|
|||
<Link href="/analysis">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-2xl transition-all"
|
||||
className="bg-gradient-to-r from-blue-500 to-pink-500 dark:from-blue-600 dark:to-purple-600 hover:from-blue-600 hover:to-pink-600 dark:hover:from-blue-700 dark:hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-2xl transition-all animate-heartbeat"
|
||||
>
|
||||
開始分析 →
|
||||
</Button>
|
||||
|
|
@ -491,7 +491,7 @@ function WorkflowStep({
|
|||
}) {
|
||||
return (
|
||||
<div className="flex gap-4 items-start">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white flex items-center justify-center font-bold">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-pink-500 dark:from-blue-600 dark:to-purple-600 text-white flex items-center justify-center font-bold">
|
||||
{number}
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -151,47 +151,36 @@ export function AnalysisForm({ onSubmit, loading = false }: AnalysisFormProps) {
|
|||
<FormField
|
||||
control={form.control}
|
||||
name="analysts"
|
||||
render={() => (
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{ANALYSTS.map((analyst) => (
|
||||
<FormField
|
||||
<FormItem
|
||||
key={analyst.value}
|
||||
control={form.control}
|
||||
name="analysts"
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<FormItem
|
||||
key={analyst.value}
|
||||
className="flex flex-row items-start space-x-3 space-y-0"
|
||||
>
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value?.includes(
|
||||
analyst.value
|
||||
)}
|
||||
onCheckedChange={(checked) => {
|
||||
return checked
|
||||
? field.onChange([
|
||||
...(field.value ?? []),
|
||||
analyst.value,
|
||||
])
|
||||
: field.onChange(
|
||||
field.value?.filter(
|
||||
(value: string) =>
|
||||
value !== analyst.value
|
||||
)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal cursor-pointer">
|
||||
{analyst.label}
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
className="flex flex-row items-start space-x-3 space-y-0"
|
||||
>
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value?.includes(analyst.value)}
|
||||
onCheckedChange={(checked) => {
|
||||
return checked
|
||||
? field.onChange([
|
||||
...(field.value ?? []),
|
||||
analyst.value,
|
||||
])
|
||||
: field.onChange(
|
||||
field.value?.filter(
|
||||
(value: string) =>
|
||||
value !== analyst.value
|
||||
)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal cursor-pointer">
|
||||
{analyst.label}
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
))}
|
||||
</div>
|
||||
<FormMessage />
|
||||
|
|
@ -798,7 +787,7 @@ export function AnalysisForm({ onSubmit, loading = false }: AnalysisFormProps) {
|
|||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-lg hover:shadow-xl transition-all"
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-pink-500 dark:from-blue-600 dark:to-purple-600 hover:from-blue-600 hover:to-pink-600 dark:hover:from-blue-700 dark:hover:to-purple-700 shadow-lg hover:shadow-xl transition-all animate-heartbeat"
|
||||
disabled={loading}
|
||||
size="lg"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeToggle } from "@/components/theme/ThemeToggle";
|
|||
|
||||
export function Header() {
|
||||
return (
|
||||
<header className="border-b bg-gradient-to-r from-blue-600 to-purple-600 text-white">
|
||||
<header className="border-b bg-gradient-to-r from-blue-500 to-pink-500 dark:from-blue-600 dark:to-purple-600 text-white">
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
|
|
|
|||
Loading…
Reference in New Issue