Skip to content

Commit 01f1963

Browse files
neuralflux-aineuralflux-ai
committed
Update nav
1 parent d62ab61 commit 01f1963

File tree

6 files changed

+212
-22
lines changed

6 files changed

+212
-22
lines changed

‎public/neuralflux-logo.png

20.9 KB
Loading

‎public/neuralflux-logo.svg

+24-19
Loading

‎src/components/Layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const Layout: React.FC<LayoutProps> = ({ children, title = 'NeuralFlux AI Video
3939
Marketplace
4040
</Link>
4141
<Link href="/dao" className="hover:text-blue-400 transition-colors">
42-
DAO Governance
42+
DAO
4343
</Link>
4444
</nav>
4545
</div>

‎src/components/Navbar.tsx

+145
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import React, { useState, useEffect } from 'react';
2+
import Link from 'next/link';
3+
import { useRouter } from 'next/router';
4+
import WalletDropdown from './WalletDropdown';
5+
6+
const Navbar = () => {
7+
const router = useRouter();
8+
const [isMenuOpen, setIsMenuOpen] = useState(false);
9+
const [mounted, setMounted] = useState(false);
10+
11+
// Prevent hydration mismatch
12+
useEffect(() => {
13+
setMounted(true);
14+
}, []);
15+
16+
const isActive = (path: string) => router.pathname === path;
17+
18+
const navItems = [
19+
{ name: 'Home', path: '/' },
20+
{ name: 'Create', path: '/create' },
21+
{ name: 'Mint', path: '/mint' },
22+
{ name: 'Marketplace', path: '/marketplace' },
23+
{ name: 'DAO', path: '/dao' },
24+
];
25+
26+
const toggleMenu = () => {
27+
setIsMenuOpen(!isMenuOpen);
28+
// Prevent body scroll when menu is open
29+
document.body.style.overflow = !isMenuOpen ? 'hidden' : '';
30+
};
31+
32+
return (
33+
<nav className="bg-gradient-to-r from-purple-600 to-indigo-700 shadow-md relative z-50">
34+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
35+
<div className="flex justify-between h-16">
36+
{/* Logo and desktop navigation */}
37+
<div className="flex items-center justify-between w-full">
38+
<div className="flex-shrink-0 flex items-center">
39+
<Link href="/" className="text-3xl font-extrabold text-white">
40+
<span className="bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 to-pink-300">TL2V</span>
41+
</Link>
42+
</div>
43+
44+
{/* Desktop navigation */}
45+
<div className="hidden md:flex md:items-center md:space-x-8">
46+
{navItems.map((item) => (
47+
<Link
48+
key={item.path}
49+
href={item.path}
50+
className={`inline-flex items-center px-3 py-2 rounded-md text-sm font-bold transition-colors duration-200 ease-in-out ${
51+
isActive(item.path)
52+
? 'bg-white/20 text-white'
53+
: 'text-white/80 hover:bg-white/10 hover:text-white'
54+
}`}
55+
>
56+
{item.name}
57+
</Link>
58+
))}
59+
</div>
60+
61+
{/* Wallet dropdown - desktop */}
62+
<div className="hidden md:flex md:items-center">
63+
<WalletDropdown />
64+
</div>
65+
66+
{/* Mobile menu button */}
67+
<div className="flex items-center md:hidden">
68+
<button
69+
onClick={toggleMenu}
70+
className="inline-flex items-center justify-center p-2 rounded-md text-white hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
71+
aria-expanded={isMenuOpen}
72+
>
73+
<span className="sr-only">Open main menu</span>
74+
{!isMenuOpen ? (
75+
<svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
76+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
77+
</svg>
78+
) : (
79+
<svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
80+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
81+
</svg>
82+
)}
83+
</button>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
89+
{mounted && (
90+
<>
91+
{/* Mobile menu overlay */}
92+
<div
93+
className={`md:hidden fixed inset-0 z-40 bg-black bg-opacity-50 transition-opacity duration-300 ease-in-out ${
94+
isMenuOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
95+
}`}
96+
onClick={toggleMenu}
97+
/>
98+
99+
{/* Mobile menu panel */}
100+
<div
101+
className={`md:hidden fixed inset-y-0 right-0 z-50 w-64 bg-gradient-to-b from-purple-700 to-indigo-800 shadow-xl transform transition-all duration-300 ease-in-out ${
102+
isMenuOpen ? 'translate-x-0' : 'translate-x-full'
103+
}`}
104+
>
105+
{/* Close button */}
106+
<div className="absolute top-0 right-0 pt-4 pr-4">
107+
<button
108+
onClick={toggleMenu}
109+
className="inline-flex items-center justify-center p-2 rounded-md text-white hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
110+
>
111+
<span className="sr-only">Close menu</span>
112+
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
113+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
114+
</svg>
115+
</button>
116+
</div>
117+
118+
{/* Mobile menu content */}
119+
<div className="pt-14 pb-3 px-2 space-y-1 overflow-y-auto max-h-screen">
120+
{navItems.map((item) => (
121+
<Link
122+
key={item.path}
123+
href={item.path}
124+
className={`block px-3 py-3 rounded-md text-base font-medium ${
125+
isActive(item.path)
126+
? 'bg-white/20 text-white'
127+
: 'text-white/80 hover:bg-white/10 hover:text-white'
128+
}`}
129+
onClick={toggleMenu}
130+
>
131+
{item.name}
132+
</Link>
133+
))}
134+
<div className="mt-4 px-3 py-2">
135+
<WalletDropdown minimal={true} />
136+
</div>
137+
</div>
138+
</div>
139+
</>
140+
)}
141+
</nav>
142+
);
143+
};
144+
145+
export default Navbar;

‎src/pages/create.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -195,8 +195,9 @@ export default function CreatePage() {
195195
value={prompt}
196196
onChange={(e) => setPrompt(e.target.value)}
197197
placeholder="Describe the video you want to generate..."
198-
className="w-full p-3 border rounded-lg"
198+
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm resize-none font-medium text-base leading-relaxed"
199199
rows={4}
200+
style={{ WebkitAppearance: 'none' }}
200201
></textarea>
201202
<p className="text-xs text-gray-500 mt-1">
202203
Please be specific about the subject, setting and action in the video
@@ -243,7 +244,8 @@ export default function CreatePage() {
243244
<select
244245
value={style}
245246
onChange={(e) => setStyle(e.target.value)}
246-
className="w-full p-2 border rounded-lg"
247+
className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm font-medium text-base"
248+
style={{ WebkitAppearance: 'none', appearance: 'menulist', height: '42px' }}
247249
>
248250
<option value="realistic">Realistic</option>
249251
<option value="anime">Anime</option>

‎src/styles/globals.css

+38
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,42 @@ body {
5959
background-color: #8e8e8e;
6060
color: #c7c7c7;
6161
cursor: not-allowed;
62+
}
63+
64+
/* 跨浏览器表单元素兼容性修复 */
65+
/* 修复在 macOS 上的输入框问题 */
66+
textarea,
67+
input[type="text"],
68+
input[type="number"],
69+
select {
70+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
71+
-webkit-font-smoothing: antialiased;
72+
-moz-osx-font-smoothing: grayscale;
73+
text-rendering: optimizeLegibility;
74+
}
75+
76+
/* 确保在 macOS 上字体可见 */
77+
@supports (-webkit-touch-callout: none) {
78+
textarea,
79+
input[type="text"],
80+
input[type="number"],
81+
select {
82+
color: #111827 !important; /* 确保文本颜色在 Mac 上足够深 */
83+
}
84+
85+
.dark textarea,
86+
.dark input[type="text"],
87+
.dark input[type="number"],
88+
.dark select {
89+
color: #f3f4f6 !important; /* 确保深色模式下的文本颜色在 Mac 上足够亮 */
90+
}
91+
}
92+
93+
/* 加强焦点状态样式 */
94+
textarea:focus,
95+
input:focus,
96+
select:focus {
97+
outline: none;
98+
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
99+
border-color: #8b5cf6 !important;
62100
}

0 commit comments

Comments
 (0)