Skip to content

Commit 79a8e14

Browse files
committed
feat: show desktop-only message on mobile viewports
Adds a fixed overlay on screens < 640px indicating the app is not yet available on mobile, with a link to the GitHub repo. Closes #69.
1 parent 341411d commit 79a8e14

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

apps/app/src/app/page.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,36 @@ export default function HomePage() {
3636

3737
return (
3838
<>
39+
{/* Mobile block */}
40+
<div className="fixed inset-0 z-[100] flex items-center justify-center p-8 sm:hidden" style={{ background: "var(--color-background, #f5f5f7)" }}>
41+
<div className="flex flex-col items-center gap-4 text-center max-w-xs">
42+
<div
43+
className="flex items-center justify-center w-14 h-14 rounded-2xl"
44+
style={{ background: "linear-gradient(135deg, rgba(190,194,255,0.15), rgba(133,224,206,0.12))" }}
45+
>
46+
<span className="text-3xl">🪁</span>
47+
</div>
48+
<h1 className="text-lg font-semibold" style={{ color: "var(--text-primary, #1a1a1a)" }}>
49+
Desktop Only
50+
</h1>
51+
<p className="text-sm leading-relaxed" style={{ color: "var(--text-secondary, #666)" }}>
52+
Open Generative UI is not available on mobile yet. Please visit on a desktop browser for the full experience.
53+
</p>
54+
<a
55+
href="https://github.com/CopilotKit/OpenGenerativeUI"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
className="mt-2 inline-flex items-center px-5 py-2.5 rounded-full text-sm font-semibold text-white no-underline"
59+
style={{
60+
background: "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))",
61+
boxShadow: "0 1px 4px rgba(149,153,204,0.3)",
62+
}}
63+
>
64+
View on GitHub
65+
</a>
66+
</div>
67+
</div>
68+
3969
{/* Animated background */}
4070
<div className="abstract-bg">
4171
<div className="blob-3" />

0 commit comments

Comments
 (0)