+ {gameState === "idle" && (
+
+
+ {/* Display Area */}
+ {gameState === "memorize" && displaySequence.length > 0 && (
+
+
+ )}
+ {gameState === "memorize" && (
+ + Memorize the color sequence and repeat it! +
+ +
+
+ )}
+ {gameState === "input" && (
+ + Memorize this sequence! +
+{timeLeft}s
++ Select the colors in order ({userInput.length}/{sequence.length}) +
+ )} + {gameState === "correct" && ( ++ ✓ Perfect! Next level... +
+ )} + {gameState === "wrong" && ( ++ ✗ Incorrect! Try again... +
+ )} +
+
+ )}
+
+ {/* User Input Display */}
+ {gameState === "input" && userInput.length > 0 && (
+
+ {displaySequence.map((colorIndex, idx) => (
+
+ ))}
+
+
+
+ )}
+
+ {/* Color Selection */}
+ {gameState !== "idle" && (
+ Your sequence:
+
+ {userInput.map((colorIndex, idx) => (
+
+ ))}
+
+
+ {availableColors.map((color, index) => (
+
+ )}
+
+ {/* Header */}
+
+ );
+}
diff --git a/src/app/components/GameLayout.tsx b/src/app/components/GameLayout.tsx
new file mode 100644
index 0000000..e8fe496
--- /dev/null
+++ b/src/app/components/GameLayout.tsx
@@ -0,0 +1,53 @@
+import { ReactNode } from "react";
+import { RotateCcw } from "lucide-react";
+
+interface GameLayoutProps {
+ title: string;
+ score: number;
+ level: number;
+ children: ReactNode;
+ onReset: () => void;
+}
+
+export function GameLayout({
+ title,
+ score,
+ level,
+ children,
+ onReset,
+}: GameLayoutProps) {
+ return (
+
+
+
+ {/* Stats Cards */}
+ System Overview
+Real-time monitoring of all servers and services
+
+
+
+ {/* Server List */}
+
+
+
+
+
+
+
+ {onlineCount}
+ Online
+Servers running
+
+
+
+
+
+
+
+ {offlineCount}
+ Offline
+Servers down
+
+
+
+
+
+
+
+ {warningCount}
+ Warning
+Need attention
+
+
+
+
+
+
+ {avgResponseTime}ms
+ Avg Response
+Time
+
+
+
+
+
+
+
+
+
+
+ View All
+
+ Server Status
+
+ {servers.map((server) => (
+
+
+
+
+
+ ))}
+
+
+
+
+ {getStatusIcon(server.status)}
+
+
+
+ {server.name}
+{server.url}
+
+
+
+
+ + {server.responseTime > 0 ? `${server.responseTime}ms` : "N/A"} +
+Response Time
+
+
+ {server.uptime}%
+Uptime
+
+
+ {server.checkType}
+
+
+
+
+
+
+ {server.lastCheck}
+
+ {/* Header */}
+
+ );
+}
diff --git a/src/app/components/Home.tsx b/src/app/components/Home.tsx
new file mode 100644
index 0000000..2046f28
--- /dev/null
+++ b/src/app/components/Home.tsx
@@ -0,0 +1,105 @@
+import { Link } from "react-router";
+import { Brain, Grid3x3, Palette, Shapes, Sparkles } from "lucide-react";
+
+export function Home() {
+ const games = [
+ {
+ id: "memory-cards",
+ title: "Memory Cards",
+ description: "Find matching pairs to test your memory",
+ icon: Grid3x3,
+ color: "bg-blue-500",
+ path: "/memory-cards",
+ },
+ {
+ id: "pattern-sequence",
+ title: "Pattern Sequence",
+ description: "Remember and repeat the pattern",
+ icon: Sparkles,
+ color: "bg-purple-500",
+ path: "/pattern-sequence",
+ },
+ {
+ id: "color-memory",
+ title: "Color Memory",
+ description: "Memorize the color sequence",
+ icon: Palette,
+ color: "bg-pink-500",
+ path: "/color-memory",
+ },
+ {
+ id: "shape-match",
+ title: "Shape Match",
+ description: "Find the matching shape pattern",
+ icon: Shapes,
+ color: "bg-green-500",
+ path: "/shape-match",
+ },
+ ];
+
+ return (
+
+
+
+ {/* Game Content */}
+
+
+ {title}
+ +
+
+
+ Level:
+
+ {level}
+
+
+
+ Score:
+
+ {score}
+
+
+ {children}
+
+ {/* Header */}
+
+ );
+}
diff --git a/src/app/components/Layout.tsx b/src/app/components/Layout.tsx
new file mode 100644
index 0000000..d4c7858
--- /dev/null
+++ b/src/app/components/Layout.tsx
@@ -0,0 +1,13 @@
+import { Outlet } from "react-router";
+import { Navigation } from "./Navigation";
+
+export function Layout() {
+ return (
+
+
+
+ {/* Game Grid */}
+
+
+ Brain Trainer
++ Sharpen your mind with fun pattern recognition and memory games +
+
+ {games.map((game) => {
+ const Icon = game.icon;
+ return (
+
+
+
+ {/* Stats Section */}
+
+
+
+
+
+
+ + {game.title} +
+{game.description}
+
+ Play Now →
+
+
+ );
+ })}
+
+
+
+
+
+
+
+ 4
+ Games
+
+
+
+ ∞
+ Levels
+
+
+ 100%
+ Fun
+
+
+
+
+ );
+}
diff --git a/src/app/components/MemoryCards.tsx b/src/app/components/MemoryCards.tsx
new file mode 100644
index 0000000..ddf3c77
--- /dev/null
+++ b/src/app/components/MemoryCards.tsx
@@ -0,0 +1,149 @@
+import { useState, useEffect } from "react";
+import { GameLayout } from "./GameLayout";
+
+interface Card {
+ id: number;
+ symbol: string;
+ isFlipped: boolean;
+ isMatched: boolean;
+}
+
+const symbols = ["🎨", "🎭", "🎪", "🎯", "🎲", "🎸", "🎹", "🎺"];
+
+export function MemoryCards() {
+ const [cards, setCards] = useState
+
+
+
+
+ + Find all matching pairs! Moves: {moves} +
+
+ {cards.map((card) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/app/components/PatternSequence.tsx b/src/app/components/PatternSequence.tsx
new file mode 100644
index 0000000..2dae46c
--- /dev/null
+++ b/src/app/components/PatternSequence.tsx
@@ -0,0 +1,152 @@
+import { useState, useEffect } from "react";
+import { GameLayout } from "./GameLayout";
+
+const colors = [
+ { id: 0, color: "bg-red-500", active: "bg-red-300" },
+ { id: 1, color: "bg-blue-500", active: "bg-blue-300" },
+ { id: 2, color: "bg-green-500", active: "bg-green-300" },
+ { id: 3, color: "bg-yellow-500", active: "bg-yellow-300" },
+];
+
+type GameState = "idle" | "showing" | "input" | "correct" | "wrong";
+
+export function PatternSequence() {
+ const [sequence, setSequence] = useState
+
+
+
+ 404
+Page Not Found
++ The page you're looking for doesn't exist or has been moved. +
+ +
+ {gameState === "idle" && (
+
+
+
+
+ )}
+ {gameState === "showing" && (
+ + Watch the pattern and repeat it! +
+ ++ Watch the pattern... +
+ )} + {gameState === "input" && ( ++ Your turn! Repeat the pattern ({userInput.length}/{sequence.length}) +
+ )} + {gameState === "correct" && ( ++ ✓ Correct! Next round... +
+ )} + {gameState === "wrong" && ( ++ ✗ Wrong! Starting over... +
+ )} +
+ {colors.map((btn) => (
+
+
+ {gameState !== "idle" && (
+
+
+ )}
+ Pattern length: {sequence.length}
+
+ {/* Back Button */}
+
+
+ );
+}
diff --git a/src/app/components/ServerList.tsx b/src/app/components/ServerList.tsx
new file mode 100644
index 0000000..5684854
--- /dev/null
+++ b/src/app/components/ServerList.tsx
@@ -0,0 +1,268 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import {
+ Plus,
+ Search,
+ Filter,
+ CheckCircle,
+ XCircle,
+ AlertTriangle,
+ Globe,
+ Database,
+ Mail,
+ Lock,
+} from "lucide-react";
+
+interface Server {
+ id: string;
+ name: string;
+ url: string;
+ status: "online" | "offline" | "warning";
+ checkType: "HTTPS" | "TCP" | "SMTP" | "SSH" | "ICMP";
+ responseTime: number;
+ uptime: number;
+ location: string;
+}
+
+export function ServerList() {
+ const [searchQuery, setSearchQuery] = useState("");
+ const [filterStatus, setFilterStatus] = useState
+
+
+
+
+
+ {/* Stats Grid */}
+
+
+
+
+
+
+ {server.name}
+{server.url}
+
+
+ {server.status.toUpperCase()}
+
+
+ {server.checkType}
+
+
+
+
+
+
+
+
+
+
+
+
+ Response Time
+{server.responseTime}ms
+
+
+
+
+ Uptime
+{server.uptime}%
+
+
+
+
+ Location
+{server.location}
+
+
+
+
+ Check Interval
+{server.checkInterval}
+
+ {/* Server Information */}
+
+
+
+
+
+
+ {/* Quick Actions */}
+
+
+
+
+
+ {/* Recent Checks */}
+
+ IP Address
+ {server.ip}
+
+
+ Last Check
+ {server.lastCheck}
+
+
+ Next Check
+ {server.nextCheck}
+
+
+ Created
+ {server.createdAt}
+
+
+
+
+
+
+
+
+ {recentChecks.map((check, index) => (
+
+
+
+ ))}
+
+ {check.status === "online" ? (
+
+
+
+ {check.status}
+
+ {check.responseTime}ms
+
+
+
+
+
+
+ Quick Actions
+
+
+
+
+
+
+
+
+ Need Help?
++ Learn more about server monitoring and check types +
+ +
+ {/* Header */}
+
+ );
+}
diff --git a/src/app/components/ShapeMatch.tsx b/src/app/components/ShapeMatch.tsx
new file mode 100644
index 0000000..3c73abc
--- /dev/null
+++ b/src/app/components/ShapeMatch.tsx
@@ -0,0 +1,189 @@
+import { useState, useEffect } from "react";
+import { GameLayout } from "./GameLayout";
+import { Circle, Square, Triangle, Star, Diamond, Heart } from "lucide-react";
+
+const shapes = [
+ { id: "circle", Icon: Circle, color: "text-red-500" },
+ { id: "square", Icon: Square, color: "text-blue-500" },
+ { id: "triangle", Icon: Triangle, color: "text-green-500" },
+ { id: "star", Icon: Star, color: "text-yellow-500" },
+ { id: "diamond", Icon: Diamond, color: "text-purple-500" },
+ { id: "heart", Icon: Heart, color: "text-pink-500" },
+];
+
+interface ShapePattern {
+ shapeId: string;
+ colorId: string;
+}
+
+export function ShapeMatch() {
+ const [pattern, setPattern] = useState
+
+
+ {/* Check Types Info */}
+
+
+
+ {/* Search and Filter */}
+
+
+
+ Server Management
+Manage and monitor all your servers
+
+
+
+
+
+
+
+
+
+ {/* Server Grid */}
+ Available Check Types
+
+ {[
+ { type: "HTTPS", icon: Globe, color: "text-blue-600", bg: "bg-blue-100" },
+ { type: "TCP", icon: Database, color: "text-purple-600", bg: "bg-purple-100" },
+ { type: "SMTP", icon: Mail, color: "text-green-600", bg: "bg-green-100" },
+ { type: "SSH", icon: Lock, color: "text-orange-600", bg: "bg-orange-100" },
+ {
+ type: "ICMP",
+ icon: CheckCircle,
+ color: "text-pink-600",
+ bg: "bg-pink-100",
+ },
+ ].map((check) => (
+
+
+
+ ))}
+
+
+ {check.type}
+
+ {filteredServers.map((server) => (
+
+
+
+ {filteredServers.length === 0 && (
+
+
+
+
+ {getStatusIcon(server.status)}
+
+
+ {getCheckTypeIcon(server.checkType)}
+
+ {server.checkType}
+
+
+ {server.name}
+{server.url}
+ +
+
+
+
+
+ Response Time
++ {server.responseTime > 0 ? `${server.responseTime}ms` : "N/A"} +
+
+
+ Uptime
+{server.uptime}%
+
+
+
+ ))}
+
+ Location
+ {server.location}
+
+
+
+ )}
+ No servers found matching your criteria
+
+
+
+ {/* Pattern Display */}
+ + Find the next shape in the pattern! +
+ {feedback === "correct" && ( ++ ✓ Correct! Next level... +
+ )} + {feedback === "wrong" && ( ++ ✗ Wrong! Try again... +
+ )} +
+
+
+ {/* Options */}
+ Pattern:
+
+ {pattern.slice(0, -1).map((p, idx) => (
+
+
+ {renderShape(p)}
+
+ ))}
+ →
+
+ ?
+
+
+ {options.map((option, idx) => (
+
+ ))}
+
+
+ {/* Header */}
+
+ );
+}
diff --git a/src/app/components/figma/ImageWithFallback.tsx b/src/app/components/figma/ImageWithFallback.tsx
new file mode 100644
index 0000000..0e26139
--- /dev/null
+++ b/src/app/components/figma/ImageWithFallback.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+ 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes
+
+
+ User Profile
+Manage your account settings and preferences
+
+ {/* Profile Card */}
+
+
+
+
+ {/* Main Content */}
+
+
+
+ {/* Stats */}
+
+
+
+
+ {formData.name.charAt(0)}
+
+ {isEditing ? (
+ setFormData({ ...formData, name: e.target.value })}
+ className="text-2xl font-bold text-gray-900 mb-1 text-center w-full border border-gray-200 rounded-lg px-3 py-2"
+ />
+ ) : (
+ {formData.name}
+ )} +{formData.role}
+
+
+
+
+
+
+
+
+
+
+ Your Statistics
+
+ {stats.map((stat) => {
+ const Icon = stat.icon;
+ return (
+
+
+
+ );
+ })}
+
+
+ {stat.value}
+
+
+ {stat.label}
+
+ {/* Security Settings */}
+
+
+
+
+ {/* Notification Preferences */}
+
+
+
+
+
+ Security Settings
+
+
+
+
+
+ Change Password
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Two-Factor Authentication
+Add an extra layer of security
+
+
+
+ {/* Recent Activity */}
+
+
+
+
+
+ Notification Preferences
+
+ {[
+ {
+ label: "Email Notifications",
+ description: "Receive alerts via email",
+ checked: true,
+ },
+ {
+ label: "Server Down Alerts",
+ description: "Immediate notification when servers go offline",
+ checked: true,
+ },
+ {
+ label: "Weekly Reports",
+ description: "Summary of server performance",
+ checked: false,
+ },
+ {
+ label: "Marketing Updates",
+ description: "Product news and updates",
+ checked: false,
+ },
+ ].map((pref, index) => (
+
+
+
+ ))}
+
+
+
+
+
+ {pref.label}
+{pref.description}
+
+
+
+
+
+
+
+ Recent Activity
+
+ {recentActivity.map((activity, index) => (
+
+
+
+ ))}
+
+
+ {activity.action}
+
+ {activity.time}
+
+
+ ) : (
+
+ 
+
+ {children}
+
+ {children}
+
+
+
+
+ );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselPrevious({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps
+
+ {children}
+
+
+