diff --git a/artifacts/teaboy-os/index.html b/artifacts/teaboy-os/index.html index db7d31d8..30c8997e 100644 --- a/artifacts/teaboy-os/index.html +++ b/artifacts/teaboy-os/index.html @@ -7,7 +7,7 @@ - +
diff --git a/artifacts/teaboy-os/public/opengraph.jpg b/artifacts/teaboy-os/public/opengraph.jpg index 894cfe23..294918dc 100644 Binary files a/artifacts/teaboy-os/public/opengraph.jpg and b/artifacts/teaboy-os/public/opengraph.jpg differ diff --git a/artifacts/teaboy-os/src/index.css b/artifacts/teaboy-os/src/index.css index bfafa6d0..21830740 100644 --- a/artifacts/teaboy-os/src/index.css +++ b/artifacts/teaboy-os/src/index.css @@ -60,39 +60,40 @@ --radius-xl: calc(var(--radius) + 4px); } -:root, .dark { - --background: 225 45% 8%; - --foreground: 220 20% 95%; - --card: 225 30% 15%; - --card-foreground: 220 20% 95%; - --popover: 225 30% 15%; - --popover-foreground: 220 20% 95%; - --primary: 230 80% 65%; - --primary-foreground: 225 45% 8%; - --secondary: 195 70% 55%; - --secondary-foreground: 225 45% 8%; - --muted: 225 25% 20%; - --muted-foreground: 220 20% 80%; - --accent: 280 70% 65%; - --accent-foreground: 225 45% 8%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - --border: 225 25% 20%; - --input: 225 25% 20%; - --ring: 230 80% 65%; - - --sidebar: 225 30% 15%; - --sidebar-foreground: 220 20% 95%; - --sidebar-border: 225 25% 20%; - --sidebar-primary: 230 80% 65%; - --sidebar-primary-foreground: 225 45% 8%; - --sidebar-accent: 225 25% 20%; - --sidebar-accent-foreground: 220 20% 95%; - --sidebar-ring: 230 80% 65%; +:root { + /* Light, calm, premium SaaS palette */ + --background: 210 40% 98%; /* #F8FAFC */ + --foreground: 222 47% 11%; /* slate-900 */ + --card: 0 0% 100%; /* #FFFFFF */ + --card-foreground: 222 47% 11%; + --popover: 0 0% 100%; + --popover-foreground: 222 47% 11%; + --primary: 217 91% 60%; /* #3B82F6 */ + --primary-foreground: 0 0% 100%; + --secondary: 173 80% 40%; /* teal-500 */ + --secondary-foreground: 0 0% 100%; + --muted: 210 40% 96%; + --muted-foreground: 215 16% 47%; /* slate-500 */ + --accent: 262 83% 66%; /* violet-500 */ + --accent-foreground: 0 0% 100%; + --destructive: 0 84% 60%; + --destructive-foreground: 0 0% 100%; + --border: 214 32% 91%; /* #E2E8F0 */ + --input: 214 32% 91%; + --ring: 217 91% 60%; - --app-font-sans: "Inter", sans-serif; + --sidebar: 0 0% 100%; + --sidebar-foreground: 222 47% 11%; + --sidebar-border: 214 32% 91%; + --sidebar-primary: 217 91% 60%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 210 40% 96%; + --sidebar-accent-foreground: 222 47% 11%; + --sidebar-ring: 217 91% 60%; + + --app-font-sans: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; --app-font-serif: Georgia, serif; - --app-font-mono: Menlo, monospace; + --app-font-mono: "IBM Plex Mono", Menlo, monospace; --radius: 1rem; } @@ -101,22 +102,109 @@ @apply border-border; } body { - @apply font-sans antialiased bg-background text-foreground; + @apply font-sans antialiased text-foreground; + background-color: #F8FAFC; } } +/* Soft glassmorphism — light, very subtle blur */ .glass-panel { - @apply bg-white/10 dark:bg-black/20 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-lg; + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(12px) saturate(140%); + -webkit-backdrop-filter: blur(12px) saturate(140%); + border: 1px solid #E2E8F0; + box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05); } +/* Light gradient background with floating blobs (Apple / SaaS style) */ .os-bg { - background: linear-gradient(135deg, hsl(230, 45%, 15%), hsl(195, 45%, 12%), hsl(280, 45%, 15%)); - background-size: 400% 400%; - animation: gradientBG 15s ease infinite; + position: relative; + background-color: #F8FAFC; + overflow-x: hidden; } -@keyframes gradientBG { - 0% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } +.os-bg::before, +.os-bg::after { + content: ""; + position: fixed; + pointer-events: none; + z-index: 0; + border-radius: 9999px; + filter: blur(80px); + opacity: 0.55; +} + +.os-bg::before { + width: 520px; + height: 520px; + top: -160px; + left: -120px; + background: radial-gradient(circle at 30% 30%, #C7D2FE 0%, #A5B4FC 40%, transparent 70%); + animation: blobFloat 18s ease-in-out infinite alternate; +} + +.os-bg::after { + width: 560px; + height: 560px; + bottom: -200px; + right: -160px; + background: radial-gradient(circle at 60% 60%, #A7F3D0 0%, #99F6E4 35%, transparent 70%); + animation: blobFloat 22s ease-in-out infinite alternate-reverse; +} + +.os-bg > * { + position: relative; + z-index: 1; +} + +@keyframes blobFloat { + 0% { transform: translate(0, 0) scale(1); } + 50% { transform: translate(30px, -20px) scale(1.05); } + 100% { transform: translate(-20px, 25px) scale(0.98); } +} + +/* Gradient icon tile helpers */ +.icon-tile { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 1rem; + box-shadow: 0 6px 18px rgba(59, 130, 246, 0.18); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} +.icon-tile:hover { + transform: translateY(-2px); + box-shadow: 0 10px 24px rgba(59, 130, 246, 0.22); +} +.icon-tile-blue { background: linear-gradient(135deg, #60A5FA, #3B82F6); } +.icon-tile-purple { background: linear-gradient(135deg, #C084FC, #8B5CF6); } +.icon-tile-green { background: linear-gradient(135deg, #34D399, #10B981); } +.icon-tile-orange { background: linear-gradient(135deg, #FDBA74, #F59E0B); } +.icon-tile-pink { background: linear-gradient(135deg, #F9A8D4, #EC4899); } +.icon-tile-teal { background: linear-gradient(135deg, #5EEAD4, #14B8A6); } + +/* Top bar variant — flat very-light glass, no heavy border */ +.topbar-glass { + background: rgba(255, 255, 255, 0.75); + backdrop-filter: blur(16px) saturate(160%); + -webkit-backdrop-filter: blur(16px) saturate(160%); + border-bottom: 1px solid rgba(226, 232, 240, 0.7); +} + +/* Floating dock — macOS-like but lighter */ +.dock-glass { + background: rgba(255, 255, 255, 0.65); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border: 1px solid rgba(226, 232, 240, 0.9); + box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08); +} + +/* Card hover lift */ +.card-hover { + transition: transform 0.2s ease, box-shadow 0.2s ease; +} +.card-hover:hover { + transform: translateY(-2px); + box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08); } diff --git a/artifacts/teaboy-os/src/pages/admin.tsx b/artifacts/teaboy-os/src/pages/admin.tsx index 2d3d2e0b..b1be35f2 100644 --- a/artifacts/teaboy-os/src/pages/admin.tsx +++ b/artifacts/teaboy-os/src/pages/admin.tsx @@ -159,10 +159,10 @@ export default function AdminPage() { return (
{/* Header */} -
+
@@ -174,7 +174,7 @@ export default function AdminPage() { {/* Edit App Modal */} {editingApp && ( -
+

{editingApp.id ? t("admin.editApp") : t("admin.addApp")} @@ -194,7 +194,7 @@ export default function AdminPage() { setEditingApp({ ...editingApp, form: { ...editingApp.form, [field]: e.target.value } })} - className="bg-white/10 border-white/20" + className="bg-white/70 border-slate-200" />

))} @@ -208,7 +208,7 @@ export default function AdminPage() { {/* Edit Service Modal */} {editingService && ( -
+

{editingService.id ? t("admin.editService") : t("admin.addService")} @@ -227,7 +227,7 @@ export default function AdminPage() { setEditingService({ ...editingService, form: { ...editingService.form, [field]: e.target.value } })} - className="bg-white/10 border-white/20" + className="bg-white/70 border-slate-200" />

))} @@ -248,7 +248,7 @@ export default function AdminPage() { {/* Create User Modal */} {newUserForm && ( -
+

{t("admin.addUser")}

@@ -256,7 +256,7 @@ export default function AdminPage() { setNewUserForm({ ...newUserForm, username: e.target.value })} - className="bg-white/10 border-white/20" + className="bg-white/70 border-slate-200" />
@@ -265,7 +265,7 @@ export default function AdminPage() { type="email" value={newUserForm.email} onChange={(e) => setNewUserForm({ ...newUserForm, email: e.target.value })} - className="bg-white/10 border-white/20" + className="bg-white/70 border-slate-200" />
@@ -274,7 +274,7 @@ export default function AdminPage() { type="password" value={newUserForm.password} onChange={(e) => setNewUserForm({ ...newUserForm, password: e.target.value })} - className="bg-white/10 border-white/20" + className="bg-white/70 border-slate-200" />
@@ -338,7 +338,7 @@ export default function AdminPage() { sortOrder: app.sortOrder ?? 0, }, })} - className="p-1.5 hover:bg-white/10 rounded-lg text-muted-foreground hover:text-foreground" + className="p-1.5 hover:bg-slate-100 rounded-lg text-muted-foreground hover:text-foreground" > @@ -398,7 +398,7 @@ export default function AdminPage() { isAvailable: service.isAvailable ?? true, }, })} - className="p-1.5 hover:bg-white/10 rounded-lg text-muted-foreground hover:text-foreground" + className="p-1.5 hover:bg-slate-100 rounded-lg text-muted-foreground hover:text-foreground" > diff --git a/artifacts/teaboy-os/src/pages/chat.tsx b/artifacts/teaboy-os/src/pages/chat.tsx index 727490f7..78de046b 100644 --- a/artifacts/teaboy-os/src/pages/chat.tsx +++ b/artifacts/teaboy-os/src/pages/chat.tsx @@ -162,10 +162,10 @@ export default function ChatPage() { return (
{/* Header */} -
+
@@ -178,7 +178,7 @@ export default function ChatPage() { {!selectedConvId && ( @@ -187,14 +187,14 @@ export default function ChatPage() { {/* New Conversation Dialog */} {showNewConv && ( -
+

{t("chat.createConversation")}

{t("chat.searchUsers")}

{users?.filter((u) => u.id !== user?.id).map((u) => ( -