feat: Revamp modes, texts, timer, and UI

client/src/components/Footer.tsx

@@ -1,12 +1,12 @@
 export default function Footer() {
   return (
-    <footer className="py-6 px-4 text-center text-secondary text-sm">
+    <footer className="py-6 px-4 text-center text-secondary text-sm border-t border-border/20">
       <div className="flex justify-center space-x-6 mb-2">
-        <a href="#" className="hover:text-accent transition-colors">About</a>
-        <a href="#" className="hover:text-accent transition-colors">Support</a>
-        <a href="#" className="hover:text-accent transition-colors">GitHub</a>
+        <a href="#" className="hover:text-accent transition-colors custom-focus-ring rounded-sm px-1">About</a>
+        <a href="#" className="hover:text-accent transition-colors custom-focus-ring rounded-sm px-1">Support</a>
+        <a href="https://github.com/moah0911/TypeNinja" target="_blank" rel="noopener noreferrer" className="hover:text-accent transition-colors custom-focus-ring rounded-sm px-1">GitHub</a>
       </div>
-      <p>© {new Date().getFullYear()} TypeMaster</p>
+      <p>© {new Date().getFullYear()} FlexType</p> {/* Changed TypeMaster to FlexType to match Header */}
     </footer>
   );
 }

client/src/components/Header.tsx

@@ -20,7 +20,10 @@ export default function Header() {
       <div className="flex items-center relative z-10">
         <div 
           onClick={navigateToHome}
-          className="flex items-center gap-3 hover:opacity-90 transition-all duration-300 cursor-pointer group"
+          className="flex items-center gap-3 hover:opacity-90 transition-all duration-300 cursor-pointer group custom-focus-ring rounded-lg p-1"
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigateToHome(e as any); }}
         >
           <div className="relative">
             <div className="absolute -inset-1 bg-gradient-to-r from-sky-500/30 to-indigo-500/30 rounded-full blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

client/src/components/typing/ModeSelector.tsx

@@ -20,6 +20,7 @@ export default function ModeSelector({
   // Define programming languages for developer mode
   const languages = [
     { id: 'developer', name: 'JavaScript', color: '#F7DF1E' },
+    { id: 'typescript', name: 'TypeScript', color: '#3178C6' },
     { id: 'python', name: 'Python', color: '#3776AB' },
     { id: 'java', name: 'Java', color: '#B07219' },
     { id: 'csharp', name: 'C#', color: '#178600' },
@@ -29,7 +30,7 @@ export default function ModeSelector({
   // Show languages dropdown when developer mode is selected
   useEffect(() => {
     if (selectedMode.startsWith('developer') || 
-        ['python', 'java', 'csharp', 'go'].includes(selectedMode)) {
+        ['typescript', 'python', 'java', 'csharp', 'go'].includes(selectedMode)) {
       setShowLanguages(true);
 
       // Find the matching language when mode changes
@@ -55,8 +56,10 @@ export default function ModeSelector({
       {/* Mode Selector */}
       <div className="flex justify-center space-x-8 mb-5">
         <div 
-          className={`relative cursor-pointer mode-indicator group`}
+          className={`relative cursor-pointer mode-indicator group custom-focus-ring rounded-lg`}
           onClick={() => onModeChange('normal')}
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onModeChange('normal'); }}
         >
           <div className={`flex flex-col items-center px-6 py-2 rounded-lg transition-all duration-300
             ${selectedMode === 'normal' 
@@ -75,8 +78,10 @@ export default function ModeSelector({
         </div>
 
         <div 
-          className={`relative cursor-pointer mode-indicator group`}
+          className={`relative cursor-pointer mode-indicator group custom-focus-ring rounded-lg`}
           onClick={() => onModeChange('flirty')}
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onModeChange('flirty'); }}
         >
           <div className={`flex flex-col items-center px-6 py-2 rounded-lg transition-all duration-300
             ${selectedMode === 'flirty' 
@@ -95,19 +100,23 @@ export default function ModeSelector({
         </div>
 
         <div 
-          className={`relative cursor-pointer mode-indicator group`}
+          className={`relative cursor-pointer mode-indicator group custom-focus-ring rounded-lg`}
           onClick={() => onModeChange(selectedLanguage || 'developer')}
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onModeChange(selectedLanguage || 'developer'); }}
         >
           <div className={`flex flex-col items-center px-6 py-2 rounded-lg transition-all duration-300
-            ${selectedMode === 'developer' || 
+            ${selectedMode === 'developer' ||
+              selectedMode === 'typescript' ||
               selectedMode === 'python' || 
               selectedMode === 'java' || 
               selectedMode === 'csharp' || 
               selectedMode === 'go'
               ? 'bg-gradient-to-r from-cyan-500/20 to-teal-500/20 shadow-lg border border-teal-500/20' 
               : 'hover:bg-black/10 border border-transparent'}`}>
             <span className={`font-medium text-base
-              ${selectedMode === 'developer' || 
+              ${selectedMode === 'developer' ||
+                selectedMode === 'typescript' ||
                 selectedMode === 'python' || 
                 selectedMode === 'java' || 
                 selectedMode === 'csharp' || 
@@ -116,7 +125,8 @@ export default function ModeSelector({
                 : 'text-secondary group-hover:text-teal-400 transition-colors'}`}>
               Developer
             </span>
-            {(selectedMode === 'developer' || 
+            {(selectedMode === 'developer' ||
+              selectedMode === 'typescript' ||
               selectedMode === 'python' || 
               selectedMode === 'java' || 
               selectedMode === 'csharp' || 
@@ -133,7 +143,7 @@ export default function ModeSelector({
           {languages.map(language => (
             <button
               key={language.id}
-              className={`py-2 px-4 rounded-lg transition-all duration-200
+              className={`py-2 px-4 rounded-lg transition-all duration-200 custom-focus-ring
                 ${selectedLanguage === language.id 
                   ? 'shadow-md' 
                   : 'hover:bg-black/10 bg-black/5'} 
@@ -157,7 +167,7 @@ export default function ModeSelector({
           {durations.map(duration => (
             <button
               key={duration}
-              className={`py-1.5 px-4 rounded-md text-sm font-medium transition-all duration-200
+              className={`py-1.5 px-4 rounded-md text-sm font-medium transition-all duration-200 custom-focus-ring
                 ${selectedDuration === duration 
                   ? 'bg-gradient-to-r from-sky-500/30 to-indigo-500/30 text-white shadow-sm' 
                   : 'text-secondary hover:text-sky-200'}`}

client/src/components/typing/TextDisplay.tsx

@@ -10,6 +10,7 @@ interface TextDisplayProps {
   loading: boolean;
   onClick: () => void;
   onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+  mode: string;
 }
 
 export default function TextDisplay({
@@ -20,10 +21,11 @@ export default function TextDisplay({
   isActive,
   loading,
   onClick,
-  onKeyDown
+  onKeyDown,
+  mode
 }: TextDisplayProps) {
   const typingAreaRef = useRef<HTMLDivElement>(null);
-
+  const isFlirtyMode = mode === 'flirty';
   // Focus the typing area when it changes
   useEffect(() => {
     if (typingAreaRef.current) {
@@ -90,13 +92,15 @@ export default function TextDisplay({
   return (
     <div 
       ref={typingAreaRef}
-      className="relative font-mono text-lg leading-relaxed text-secondary overflow-hidden bg-gradient-to-b from-background/90 to-background p-6 rounded-xl mb-4 select-none outline-none border border-accent/15 shadow-xl transition-all duration-300 hover:border-accent/30 backdrop-blur-sm"
+      className={`relative font-mono text-lg leading-relaxed text-secondary overflow-hidden bg-gradient-to-b from-background/90 to-background p-6 rounded-xl mb-4 select-none outline-none border shadow-xl transition-all duration-300 backdrop-blur-sm
+      ${isFlirtyMode ? 'border-pink-500/40 hover:border-pink-500/60' : 'border-accent/15 hover:border-accent/30'}`}
       tabIndex={0}
       onClick={onClick}
       onKeyDown={onKeyDown}
-      style={{boxShadow: "0 10px 30px -15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 120, 255, 0.05)"}}
+      style={{boxShadow: `0 10px 30px -15px rgba(0, 0, 0, 0.5), 0 0 20px ${isFlirtyMode ? 'rgba(236, 72, 153, 0.1)' : 'rgba(0, 120, 255, 0.05)'}`}}
     >
-      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-sky-500/30 to-indigo-500/30 rounded-t-xl"></div>
+      <div className={`absolute top-0 left-0 w-full h-1 rounded-t-xl
+        ${isFlirtyMode ? 'bg-gradient-to-r from-pink-500/40 to-red-500/40' : 'bg-gradient-to-r from-sky-500/30 to-indigo-500/30'}`}></div>
       <div className="typing-animation whitespace-pre-wrap tracking-wide">
         {renderChars()}
       </div>

client/src/components/typing/TypingTest.tsx

@@ -60,13 +60,15 @@ const TypingTest = forwardRef<TypingTestRef, TypingTestProps>(({ onTestComplete,
 
     // Show developer mode preview for any programming language selection
     // if not already in a programming language mode
-    const isDeveloperMode = (mode === "developer" || 
+    const isDeveloperMode = (mode === "developer" ||
+                             mode === "typescript" ||
                              mode === "python" || 
                              mode === "java" || 
                              mode === "csharp" || 
                              mode === "go");
 
-    const wasAlreadyInDeveloperMode = (typingState.mode === "developer" || 
+    const wasAlreadyInDeveloperMode = (typingState.mode === "developer" ||
+                                       typingState.mode === "typescript" ||
                                        typingState.mode === "python" || 
                                        typingState.mode === "java" || 
                                        typingState.mode === "csharp" || 
@@ -106,6 +108,7 @@ const TypingTest = forwardRef<TypingTestRef, TypingTestProps>(({ onTestComplete,
           loading={loadingText}
           onClick={handleTypingAreaClick}
           onKeyDown={handleKeyDown}
+          mode={typingState.mode}
         />
       </div>
     </>

client/src/index.css

@@ -130,4 +130,8 @@
   .animate-blink {
     animation: blink 1s step-end infinite;
   }
+
+  .custom-focus-ring {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary;
+  }
 }