feat: integrate 5 charity modules + scrollable desktop + dock autohide

2026-06-03 14:00:29 +08:00
commit f1f717cbcb
50 changed files with 10166 additions and 0 deletions
@@ -0,0 +1,182 @@
+import { useState } from 'react'
+import { useApp } from '../store'
+
+function Logo({ size }: { size: number }) {
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size * 0.225,
+        background: 'linear-gradient(145deg, #10B981, #059669)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: size * 0.45,
+        fontWeight: 800,
+        color: 'white',
+        flexShrink: 0,
+        boxShadow: '0 8px 32px rgba(16,185,129,0.4)',
+      }}
+    >
+      F
+    </div>
+  )
+}
+
+export default function Login() {
+  const { navigate } = useApp()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [emailFocused, setEmailFocused] = useState(false)
+  const [passwordFocused, setPasswordFocused] = useState(false)
+
+  const inputStyle = (focused: boolean): React.CSSProperties => ({
+    width: '100%',
+    padding: '12px 16px',
+    background: focused ? 'rgba(16,185,129,0.08)' : 'rgba(255,255,255,0.06)',
+    border: `1px solid ${focused ? 'var(--brand)' : 'var(--glass-border)'}`,
+    borderRadius: 8,
+    color: 'var(--text)',
+    fontSize: 14,
+    outline: 'none',
+    transition: 'border-color 0.15s, background 0.15s',
+  })
+
+  const labelStyle: React.CSSProperties = {
+    display: 'block',
+    fontSize: 11,
+    fontWeight: 600,
+    color: 'var(--text-muted)',
+    letterSpacing: 1,
+    marginBottom: 6,
+  }
+
+  const handleSignIn = (e: React.FormEvent) => {
+    e.preventDefault()
+    navigate('desktop')
+  }
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+      }}
+    >
+      <form
+        onSubmit={handleSignIn}
+        style={{
+          width: '100%',
+          maxWidth: 400,
+          background: 'rgba(12,26,46,0.92)',
+          backdropFilter: 'blur(24px)',
+          WebkitBackdropFilter: 'blur(24px)',
+          border: '1px solid var(--glass-border)',
+          borderRadius: 24,
+          padding: 40,
+          boxShadow: 'var(--shadow-modal)',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 0,
+        }}
+      >
+        {/* Arabic */}
+        <div
+          style={{
+            color: 'var(--green)',
+            fontSize: 14,
+            letterSpacing: 1.5,
+            opacity: 0.7,
+            marginBottom: 20,
+            fontFamily: 'serif',
+          }}
+        >
+          بِسْمِ اللَّهِ
+        </div>
+
+        {/* Logo */}
+        <Logo size={72} />
+
+        {/* Title */}
+        <h1
+          style={{
+            fontSize: 26,
+            fontWeight: 700,
+            color: 'var(--text)',
+            margin: '16px 0 4px',
+          }}
+        >
+          Falah OS
+        </h1>
+
+        {/* Subtitle */}
+        <p
+          style={{
+            fontSize: 13,
+            color: 'var(--text-muted)',
+            margin: '0 0 32px',
+          }}
+        >
+          Sovereign Digital Economy
+        </p>
+
+        {/* Email field */}
+        <div style={{ width: '100%', marginBottom: 16 }}>
+          <label style={labelStyle}>EMAIL</label>
+          <input
+            type="email"
+            placeholder="operator@falah.os"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            onFocus={() => setEmailFocused(true)}
+            onBlur={() => setEmailFocused(false)}
+            style={inputStyle(emailFocused)}
+            autoComplete="email"
+          />
+        </div>
+
+        {/* Password field */}
+        <div style={{ width: '100%', marginBottom: 28 }}>
+          <label style={labelStyle}>PASSWORD</label>
+          <input
+            type="password"
+            placeholder="••••••••"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            onFocus={() => setPasswordFocused(true)}
+            onBlur={() => setPasswordFocused(false)}
+            style={inputStyle(passwordFocused)}
+            autoComplete="current-password"
+          />
+        </div>
+
+        {/* Sign In button */}
+        <button
+          type="submit"
+          className="btn-primary"
+          style={{ width: '100%', marginBottom: 24 }}
+        >
+          Sign In
+        </button>
+
+        {/* Footer */}
+        <p
+          style={{
+            fontSize: 11,
+            color: 'var(--text-dim)',
+            textAlign: 'center',
+            margin: 0,
+          }}
+        >
+          Falah OS CE v1.3 · Community Edition
+        </p>
+      </form>
+    </div>
+  )
+}