mirror of
https://github.com/Mihirkansara/nexus-quant-terminal.git
synced 2026-08-21 06:38:07 +00:00
feat: add terminal-style login page with LinkedIn DM for credentials
Static auth (no DB) — users must DM on LinkedIn to get access. Animated NEXUS login card with scanline effect, shake on wrong creds, LinkedIn button linking to mihir-kansara-043275187 profile. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Kansaram
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
e0bc00265a
commit
09488edeb1
@@ -4,6 +4,7 @@ import Navbar from './components/Navbar'
|
||||
import PortfolioBuilder from './components/PortfolioBuilder'
|
||||
import Dashboard from './pages/Dashboard'
|
||||
import LandingPage from './pages/LandingPage'
|
||||
import LoginPage from './pages/LoginPage'
|
||||
import { usePortfolioStore } from './store/portfolio'
|
||||
|
||||
function useNexusFavicon() {
|
||||
@@ -103,17 +104,24 @@ function useNexusFavicon() {
|
||||
|
||||
export default function App() {
|
||||
const { fromURL } = usePortfolioStore()
|
||||
const [authed, setAuthed] = useState(() => sessionStorage.getItem('qfx-auth') === '1')
|
||||
const [inApp, setInApp] = useState(() => sessionStorage.getItem('qfx-v') === '1')
|
||||
|
||||
useNexusFavicon()
|
||||
|
||||
useEffect(() => { fromURL() }, [])
|
||||
|
||||
function handleLogin() {
|
||||
sessionStorage.setItem('qfx-auth', '1')
|
||||
setAuthed(true)
|
||||
}
|
||||
|
||||
function enterApp() {
|
||||
sessionStorage.setItem('qfx-v', '1')
|
||||
setInApp(true)
|
||||
}
|
||||
|
||||
if (!authed) return <LoginPage onLogin={handleLogin} />
|
||||
if (!inApp) return <LandingPage onEnter={enterApp}/>
|
||||
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,225 @@
|
||||
import { useState } from 'react'
|
||||
import { NexusIcon } from '../components/NexusLogo'
|
||||
|
||||
const USER = 'mihir.kansara'
|
||||
const PASS = 'nexus@2026'
|
||||
|
||||
export default function LoginPage({ onLogin }) {
|
||||
const [u, setU] = useState('')
|
||||
const [p, setP] = useState('')
|
||||
const [err, setErr] = useState('')
|
||||
const [shake, setShake] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
setTimeout(() => {
|
||||
if (u === USER && p === PASS) {
|
||||
onLogin()
|
||||
} else {
|
||||
setErr('Invalid credentials. DM for access.')
|
||||
setShake(true)
|
||||
setTimeout(() => setShake(false), 600)
|
||||
}
|
||||
setLoading(false)
|
||||
}, 800)
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh', background: '#020817',
|
||||
display: 'flex', flexDirection: 'column',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
position: 'relative', overflow: 'hidden',
|
||||
}}>
|
||||
<style>{`
|
||||
@keyframes login-glow {
|
||||
0%,100% { box-shadow: 0 0 0 1px rgba(0,200,240,0.2), 0 0 24px rgba(0,200,240,0.05); }
|
||||
50% { box-shadow: 0 0 0 1px rgba(0,200,240,0.45), 0 0 40px rgba(0,200,240,0.12); }
|
||||
}
|
||||
@keyframes shake {
|
||||
0%,100%{ transform:translateX(0) }
|
||||
20% { transform:translateX(-8px) }
|
||||
40% { transform:translateX(8px) }
|
||||
60% { transform:translateX(-5px) }
|
||||
80% { transform:translateX(5px) }
|
||||
}
|
||||
@keyframes scanline {
|
||||
0% { transform: translateY(-100%) }
|
||||
100% { transform: translateY(100vh) }
|
||||
}
|
||||
.login-input {
|
||||
width: 100%;
|
||||
background: rgba(0,200,240,0.04);
|
||||
border: 1px solid rgba(0,200,240,0.2);
|
||||
border-radius: 4px;
|
||||
color: var(--cyan);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
padding: 10px 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
letter-spacing: 0.05em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.login-input:focus {
|
||||
border-color: rgba(0,200,240,0.6);
|
||||
box-shadow: 0 0 0 2px rgba(0,200,240,0.1);
|
||||
}
|
||||
.login-input::placeholder { color: rgba(0,200,240,0.25); }
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
padding: 11px;
|
||||
background: rgba(0,200,240,0.1);
|
||||
border: 1px solid rgba(0,200,240,0.4);
|
||||
border-radius: 4px;
|
||||
color: var(--cyan);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.login-btn:hover {
|
||||
background: rgba(0,200,240,0.18);
|
||||
border-color: rgba(0,200,240,0.7);
|
||||
box-shadow: 0 0 20px rgba(0,200,240,0.15);
|
||||
}
|
||||
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
`}</style>
|
||||
|
||||
{/* Scanline effect */}
|
||||
<div style={{
|
||||
position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 0,
|
||||
background: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px)',
|
||||
}}/>
|
||||
|
||||
{/* Grid bg */}
|
||||
<div style={{
|
||||
position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 0,
|
||||
backgroundImage: 'linear-gradient(rgba(0,200,240,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,200,240,0.03) 1px, transparent 1px)',
|
||||
backgroundSize: '40px 40px',
|
||||
}}/>
|
||||
|
||||
{/* Glow orb */}
|
||||
<div style={{
|
||||
position: 'fixed', top: '20%', left: '50%', transform: 'translateX(-50%)',
|
||||
width: 600, height: 600, borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(0,200,240,0.06) 0%, transparent 70%)',
|
||||
pointerEvents: 'none', zIndex: 0,
|
||||
}}/>
|
||||
|
||||
{/* Login card */}
|
||||
<div style={{
|
||||
position: 'relative', zIndex: 1,
|
||||
width: 380, padding: '40px 36px',
|
||||
background: 'rgba(2,8,23,0.92)',
|
||||
border: '1px solid rgba(0,200,240,0.18)',
|
||||
borderRadius: 8,
|
||||
animation: 'login-glow 3s ease-in-out infinite',
|
||||
...(shake ? { animation: 'shake 0.5s ease' } : {}),
|
||||
}}>
|
||||
|
||||
{/* Logo */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 32, gap: 12 }}>
|
||||
<NexusIcon size={52} />
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{
|
||||
fontSize: 20, fontWeight: 800, letterSpacing: '0.25em',
|
||||
color: 'var(--cyan)', lineHeight: 1,
|
||||
textShadow: '0 0 20px rgba(0,200,240,0.6)',
|
||||
animation: 'nx-flicker 9s ease-in-out infinite',
|
||||
}}>NEXUS</div>
|
||||
<div style={{ fontSize: 9, letterSpacing: '0.22em', color: 'var(--text-muted)', marginTop: 4 }}>
|
||||
TERMINAL · RESTRICTED ACCESS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div style={{ borderTop: '1px solid rgba(0,200,240,0.1)', marginBottom: 28 }}/>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 9, color: 'var(--text-muted)', letterSpacing: '0.15em', marginBottom: 6 }}>
|
||||
USER ID
|
||||
</div>
|
||||
<input
|
||||
className="login-input"
|
||||
placeholder="enter username"
|
||||
value={u}
|
||||
onChange={e => { setU(e.target.value); setErr('') }}
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 9, color: 'var(--text-muted)', letterSpacing: '0.15em', marginBottom: 6 }}>
|
||||
ACCESS KEY
|
||||
</div>
|
||||
<input
|
||||
className="login-input"
|
||||
type="password"
|
||||
placeholder="enter password"
|
||||
value={p}
|
||||
onChange={e => { setP(e.target.value); setErr('') }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{err && (
|
||||
<div style={{
|
||||
fontSize: 11, color: 'var(--red)', textAlign: 'center',
|
||||
background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)',
|
||||
borderRadius: 4, padding: '8px 12px', letterSpacing: '0.05em',
|
||||
}}>
|
||||
⚠ {err}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button className="login-btn" type="submit" disabled={loading} style={{ marginTop: 4 }}>
|
||||
{loading ? '· · ·' : 'AUTHENTICATE →'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* DM section */}
|
||||
<div style={{
|
||||
marginTop: 28, paddingTop: 20,
|
||||
borderTop: '1px solid rgba(0,200,240,0.08)',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
<div style={{ fontSize: 10, color: 'var(--text-muted)', marginBottom: 8, letterSpacing: '0.05em' }}>
|
||||
Don't have credentials?
|
||||
</div>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/mihir-kansara-043275187/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||
fontSize: 11, color: 'var(--cyan)', textDecoration: 'none',
|
||||
background: 'rgba(0,200,240,0.06)',
|
||||
border: '1px solid rgba(0,200,240,0.2)',
|
||||
borderRadius: 4, padding: '7px 14px',
|
||||
letterSpacing: '0.05em', fontWeight: 600,
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,200,240,0.12)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'rgba(0,200,240,0.06)'}
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="#0A66C2">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
DM me on LinkedIn
|
||||
</a>
|
||||
<div style={{ fontSize: 9, color: 'var(--text-ghost)', marginTop: 10, letterSpacing: '0.04em' }}>
|
||||
© 2026 Mihir Kansara · NEXUS TERMINAL
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user