Upload folder using huggingface_hub

client/src/components/HitokotoBar.tsx

@@ -62,16 +62,16 @@ const HitokotoBar: React.FC = () => {
   return (
     <div className="fixed bottom-0 right-0 z-50 w-[calc(100%-240px)] md:w-[calc(100%-240px)]">
       <div className="ml-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-3">
-        <div className="bg-white border border-ui-bg shadow-md rounded-lg px-4 py-2 flex items-center justify-between">
+        <div className="bg-ui-panel border border-ui-border shadow-md rounded-lg px-4 py-2 flex items-center justify-between">
           <div className="flex items-center min-w-0">
             <span className="mr-2 text-ui-navy">💬</span>
             <div className="min-w-0">
               {loading ? (
-                <div className="text-sm text-ui-navy/70">Loading…</div>
+                <div className="text-sm text-ui-text/70">Loading…</div>
               ) : error ? (
-                <div className="text-sm text-red-600">{error}</div>
+                <div className="text-sm text-red-400">{error}</div>
               ) : (
-                <div className="text-sm text-ui-navy truncate">
+                <div className="text-sm text-ui-text truncate">
                   {quote ? `『${quote.hitokoto}』 — ${quote.from_who || quote.from || 'Hitokoto'}` : ' '}
                 </div>
               )}
@@ -80,14 +80,14 @@ const HitokotoBar: React.FC = () => {
           <div className="flex items-center space-x-2 flex-shrink-0">
             <button
               onClick={fetchQuote}
-              className="text-xs px-2 py-1 rounded bg-ui-bg hover:bg-white border border-ui-bg text-ui-navy"
+              className="text-xs px-2 py-1 rounded bg-ui-panel hover:bg-ui-panel/80 border border-ui-border text-ui-text"
               title="Next quote"
             >
               Next
             </button>
             <button
               onClick={() => { setHidden(true); localStorage.setItem(LOCAL_HIDE_KEY, '1'); }}
-              className="text-xs px-2 py-1 rounded bg-ui-bg hover:bg-white border border-ui-bg text-ui-navy"
+              className="text-xs px-2 py-1 rounded bg-ui-panel hover:bg-ui-panel/80 border border-ui-border text-ui-text"
               title="Hide"
             >
               Hide

client/src/components/Layout.tsx

@@ -163,11 +163,11 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   }
 
   return (
-    <div className="min-h-screen bg-ui-bg text-ui-navy">
+    <div className="min-h-screen bg-ui-bg text-ui-text">
       {/* Top Bar */}
-      <header className="sticky top-0 z-40 bg-white/80 backdrop-blur border-b border-ui-bg">
+      <header className="sticky top-0 z-40 bg-ui-panel/80 backdrop-blur border-b border-ui-border">
         <div className="px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
-          <Link to="/dashboard" className="text-lg font-bold text-ui-navy">TransHub</Link>
+          <Link to="/dashboard" className="text-lg font-bold text-ui-neonCyan">TransHub</Link>
           <div />
         </div>
       </header>
@@ -175,7 +175,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
       {/* Shell: Sidebar + Content */}
       <div className="flex">
         {/* Sidebar */}
-        <aside className="hidden md:flex md:flex-col w-60 min-h-[calc(100vh-56px)] border-r border-ui-bg bg-white">
+        <aside className="hidden md:flex md:flex-col w-60 min-h-[calc(100vh-56px)] border-r border-ui-border bg-ui-panel">
           <nav className="p-3 space-y-1 flex-1">
             {navigation.map((item) => {
               const isActive = location.pathname === item.href;
@@ -184,7 +184,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
                   key={item.name}
                   to={item.href}
                   className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                    isActive ? 'bg-white text-ui-navy shadow-sm' : 'text-ui-navy/80 hover:bg-ui-bg'
+                    isActive ? 'bg-ui-bg text-ui-text neon-border' : 'text-ui-text/80 hover:bg-ui-panel/60'
                   }`}
                 >
                   <item.icon className="h-4 w-4 mr-2" />
@@ -193,14 +193,14 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
               );
             })}
           </nav>
-          <div className="p-3 border-t border-ui-bg">
+          <div className="p-3 border-t border-ui-border">
             {user ? (
-              <button onClick={handleLogout} className="w-full flex items-center justify-start px-3 py-2 rounded-md text-sm font-medium text-ui-navy/80 hover:bg-ui-bg">
+              <button onClick={handleLogout} className="w-full flex items-center justify-start px-3 py-2 rounded-md text-sm font-medium text-ui-text/80 hover:bg-ui-panel/60">
                 <PowerIcon className="h-4 w-4 mr-2" />
                 Log Out
               </button>
             ) : (
-              <Link to="/login" className="w-full flex items-center justify-start px-3 py-2 rounded-md text-sm font-medium text-ui-navy/80 hover:bg-ui-bg">
+              <Link to="/login" className="w-full flex items-center justify-start px-3 py-2 rounded-md text-sm font-medium text-ui-text/80 hover:bg-ui-panel/60">
                 <PowerIcon className="h-4 w-4 mr-2" />
                 Log In
               </Link>
@@ -217,9 +217,9 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
       {/* Transition Loading Indicator */}
       {isTransitioning && (
         <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">
-          <div className="bg-white rounded-lg shadow-lg p-4 flex items-center space-x-3">
-            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-ui-navy"></div>
-            <span className="text-ui-navy font-medium">Loading...</span>
+          <div className="bg-ui-panel rounded-lg shadow-lg p-4 flex items-center space-x-3 border border-ui-border">
+            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-ui-neonCyan"></div>
+            <span className="text-ui-text font-medium">Loading...</span>
           </div>
         </div>
       )}

client/src/index.css

@@ -7,17 +7,17 @@
     font-family: 'Inter', system-ui, sans-serif;
   }
   body {
-    @apply bg-ui-bg text-ui-navy;
+    @apply bg-ui-bg text-ui-text;
   }
 }
 
 @layer components {
   .btn-primary {
-    @apply bg-ui-navy hover:bg-ui-navy/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+    @apply bg-ui-neonPink hover:bg-ui-neonPink/90 text-ui-bg font-semibold py-2 px-4 rounded-lg transition-colors duration-200 shadow-[0_0_12px_rgba(255,45,172,0.7)];
   }
   
   .btn-secondary {
-    @apply bg-white hover:bg-ui-bg text-ui-navy font-medium py-2 px-4 rounded-lg border border-ui-bg transition-colors duration-200;
+    @apply bg-ui-panel hover:bg-ui-panel/80 text-ui-text font-medium py-2 px-4 rounded-lg border border-ui-border transition-colors duration-200;
   }
   
   .btn-danger {
@@ -25,11 +25,11 @@
   }
   
   .input-field {
-    @apply w-full px-3 py-2 border border-ui-bg rounded-lg focus:outline-none focus:ring-2 focus:ring-ui-navy focus:border-transparent;
+    @apply w-full px-3 py-2 border border-ui-border rounded-lg bg-ui-panel text-ui-text placeholder-ui-text/50 focus:outline-none focus:ring-2 focus:ring-ui-neonCyan focus:border-transparent;
   }
   
   .card {
-    @apply bg-white rounded-xl shadow-sm border border-ui-bg p-6;
+    @apply bg-ui-panel rounded-xl shadow-sm border border-ui-border p-6;
   }
   
   .highlight-cultural {
@@ -37,7 +37,11 @@
   }
   
   .text-gradient {
-    @apply bg-gradient-to-r from-ui-navy to-ui-teal bg-clip-text text-transparent;
+    @apply bg-gradient-to-r from-ui-neonPink to-ui-neonCyan bg-clip-text text-transparent;
+  }
+
+  .neon-border {
+    box-shadow: 0 0 0 1px theme('colors.ui.border') inset, 0 0 16px rgba(41,243,255,0.35);
   }
   
   .font-smiley {

client/src/pages/Dashboard.tsx

@@ -113,15 +113,15 @@ const Dashboard: React.FC = () => {
         <div className="mb-8">
           <div className="flex items-center justify-between">
             <div>
-              <h1 className="text-3xl font-bold text-ui-navy">{getGreeting()}</h1>
-              <p className="text-ui-navy/70 mt-2">
+              <h1 className="text-3xl font-bold text-ui-text">{getGreeting()}</h1>
+              <p className="text-ui-text/70 mt-2">
                 Ready to practice your translation skills?
               </p>
             </div>
             <div className="flex items-center space-x-3">
-              <span className="text-sm text-ui-navy/70">{getRoleDisplay()}</span>
+              <span className="text-sm text-ui-text/70">{getRoleDisplay()}</span>
               {user.role === 'admin' && (
-                <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-ui-gold/20 text-ui-navy border border-ui-bg">
+                <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-ui-panel text-ui-text border border-ui-border">
                   Admin
                 </span>
               )}
@@ -131,21 +131,21 @@ const Dashboard: React.FC = () => {
 
         {/* Quick Actions */}
         <div className="mb-8">
-          <h2 className="text-lg font-semibold text-ui-navy mb-4">Quick Actions</h2>
+          <h2 className="text-lg font-semibold text-ui-text mb-4">Quick Actions</h2>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             {actionsToShow.map((action) => (
               <Link
                 key={action.name}
                 to={action.href}
-                className="bg-white rounded-xl shadow-sm border border-ui-bg p-6 hover:shadow-md hover:border-ui-bg transition"
+                className="bg-ui-panel rounded-xl shadow-sm border border-ui-border p-6 hover:shadow-md transition neon-border"
               >
                 <div className="flex items-center">
-                  <div className={`p-3 rounded-lg bg-ui-teal`}>
-                    <action.icon className="h-6 w-6 text-white" />
+                  <div className={`p-3 rounded-lg bg-ui-neonPink animate-pulse-glow`}>
+                    <action.icon className="h-6 w-6 text-ui-bg" />
                   </div>
                   <div className="ml-4">
-                    <h3 className="text-lg font-medium text-ui-navy">{action.name}</h3>
-                    <p className="text-ui-navy/70">{action.description}</p>
+                    <h3 className="text-lg font-medium text-ui-text">{action.name}</h3>
+                    <p className="text-ui-text/70">{action.description}</p>
                   </div>
                 </div>
               </Link>
@@ -176,23 +176,23 @@ const Dashboard: React.FC = () => {
         )}
 
         {/* Overview */}
-        <div className="bg-white rounded-xl shadow-sm border border-ui-bg p-6">
+        <div className="bg-ui-panel rounded-xl shadow-sm border border-ui-border p-6">
           <div className="flex items-center mb-4">
-            <ChartBarIcon className="h-6 w-6 text-ui-navy mr-3" />
-            <h3 className="text-lg font-semibold text-ui-navy">Course Overview</h3>
+            <ChartBarIcon className="h-6 w-6 text-ui-neonCyan mr-3" />
+            <h3 className="text-lg font-semibold text-ui-text">Course Overview</h3>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div className="text-center">
-              <div className="text-2xl font-bold text-ui-navy">6</div>
-              <div className="text-sm text-ui-navy/70">Weeks</div>
+              <div className="text-2xl font-bold text-ui-neonCyan">6</div>
+              <div className="text-sm text-ui-text/70">Weeks</div>
             </div>
             <div className="text-center">
-              <div className="text-2xl font-bold text-ui-navy">2</div>
-              <div className="text-sm text-ui-navy/70">Task Types</div>
+              <div className="text-2xl font-bold text-ui-neonCyan">2</div>
+              <div className="text-sm text-ui-text/70">Task Types</div>
             </div>
             <div className="text-center">
-              <div className="text-2xl font-bold text-ui-navy">Voting</div>
-              <div className="text-sm text-ui-navy/70">Peer Review</div>
+              <div className="text-2xl font-bold text-ui-neonCyan">Voting</div>
+              <div className="text-sm text-ui-text/70">Peer Review</div>
             </div>
           </div>
         </div>

client/tailwind.config.js

@@ -6,12 +6,18 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        // Dashboard palette (sampled from provided image)
+        // Cyberpunk palette
         ui: {
-          bg: '#EDEDED',     // light gray background
-          gold: '#E1AB3D',   // accent badges/buttons
-          teal: '#63C6AF',   // charts/highlights
-          navy: '#242B3E',   // primary text/buttons
+          bg: '#0A0B10',        // near-black background
+          panel: '#121424',     // dark panel
+          neonPink: '#FF2DAC',  // neon primary
+          neonCyan: '#29F3FF',  // neon secondary
+          neonLime: '#C7FF41',  // highlights
+          magenta: '#D700FF',   // accents
+          warning: '#FFB020',   // warnings
+          text: '#E6E8FF',      // primary text
+          textDim: '#A7ACD9',   // secondary text
+          border: '#1F2238',    // borders
         },
       },
       fontFamily: {
@@ -21,6 +27,7 @@ module.exports = {
         'fade-in': 'fadeIn 0.3s ease-in-out',
         'slide-in': 'slideIn 0.3s ease-out',
         'bounce-in': 'bounceIn 0.6s ease-out',
+        'pulse-glow': 'pulseGlow 2s ease-in-out infinite',
       },
       keyframes: {
         fadeIn: {
@@ -37,6 +44,10 @@ module.exports = {
           '70%': { transform: 'scale(0.9)' },
           '100%': { transform: 'scale(1)', opacity: '1' },
         },
+        pulseGlow: {
+          '0%, 100%': { boxShadow: '0 0 0px rgba(255, 45, 172, 0.0)' },
+          '50%': { boxShadow: '0 0 24px rgba(255, 45, 172, 0.6)' },
+        },
       },
     },
   },