Commit Graph

3 Commits

Author SHA1 Message Date
riyadhafraa ff58444796 Add animated background visuals and improve layout on the login page
Replace static login image with animated SVG art, introduce gradient orbs and particles, and refine element positioning for a cleaner interface.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d05c5e2f-4508-444c-8333-9962b72fd989
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/YSMil5R
Replit-Helium-Checkpoint-Created: true
2026-04-20 12:33:56 +00:00
riyadhafraa e594b4be18 feat(ui): redesign TeaBoy OS to light premium SaaS theme
Theme overhaul (artifacts/teaboy-os/src/index.css):
- New light palette: background #F8FAFC, white cards, slate-200 borders
- Typography: IBM Plex Sans Arabic loaded via Google Fonts (Arabic-first, RTL)
- Soft glassmorphism: rgba(255,255,255,0.7) + 12px blur (vs heavy dark blur)
- Box shadows: 0 8px 30px rgba(15,23,42,0.05) (very soft, premium)
- .os-bg: light bg with two animated gradient blobs (soft purple top-left,
  soft teal bottom-right) — Apple/SaaS style backdrop
- New helper classes: .topbar-glass (clean light header),
  .dock-glass (floating macOS-like dock, lighter blur), .card-hover (lift)
- Gradient icon tiles: .icon-tile-{blue,purple,green,orange,pink,teal}
  using soft from→to gradients per spec

Pages:
- home.tsx: AppIcon now uses gradient icon tiles mapped from app.color;
  status bar uses .topbar-glass; bottom dock uses .dock-glass
- All pages: bulk-replaced dark-glass utilities so they read on light bg:
  hover:bg-white/10 → hover:bg-slate-100,
  bg-white/10 → bg-white/70,
  border-white/10 → border-slate-200/70,
  border-white/20 → border-slate-200,
  bg-black/50 (modal backdrops) → bg-slate-900/30
2026-04-20 10:25:54 +00:00
riyadhafraa 001e9023b2 feat: build TeaBoy OS — bilingual Arabic/English internal OS platform
Completed full-stack TeaBoy OS build:

Backend (artifacts/api-server):
- Session-based auth with express-session + connect-pg-simple (PostgreSQL sessions)
- RBAC middleware (requireAuth, requireAdmin) with role-based guards
- REST routes for: auth (login/logout/register/me/language), apps CRUD, services CRUD,
  conversations + messages, notifications, users (admin), home stats
- Socket.IO mounted on same HTTP server at /api/socket.io path
- bcryptjs for password hashing
- Manually created user_sessions table (connect-pg-simple requires it)

Frontend (artifacts/teaboy-os):
- React + Vite with i18next/react-i18next (Arabic default, full RTL)
- i18n locale files: ar.json + en.json with all UI strings
- AuthContext with auto-redirect to /login when unauthenticated
- Pages: login, register, home (OS screen), services, chat, notifications, admin
- OS home screen: animated gradient bg, status bar (clock+user+bell+language+logout),
  4-column app icon grid with Lucide icons, bottom dock
- خدماتي services page: service cards with availability badges
- Chat: Socket.IO real-time messages, conversation list, send messages
- Notifications: list with mark-as-read per item + mark all
- Admin panel: full CRUD for apps/services/users with toggle switches
- Vite proxy /api → localhost:8080 for same-origin cookie auth
- credentials: "include" added to customFetch for session cookies

Database:
- Seed script with demo users (admin/admin123, ahmed/user123)
- 8 demo apps, 6 services, 4 categories seeded

All e2e tests pass: login, home screen, services, language toggle, admin, logout
2026-04-20 09:20:50 +00:00