profit/lakehouse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile responsive: proof page works on phones

Browse Source 
Added @media(max-width:768px) breakpoints:
- 2-col grids → single column on mobile
- 3-col grids → single column
- 4-col model cards → 2-col
- Stats grid → 2-col
- Tables: horizontal scroll, smaller text
- Reduced padding and font sizes
- Hero title scales down

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
root 2026-04-17 12:44:57 -05:00
parent bd8c30c7bd
commit 5aaa3c5c08
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
mcp-server/index.ts
View File

@ -535,6 +535,21 @@ tr:hover{background:#111827}
.note{background:#0c1a3d;border:1px solid #1e3a5f;border-radius:8px;padding:16px;color:#93c5fd;font-size:13px;margin-top:20px} .note{background:#0c1a3d;border:1px solid #1e3a5f;border-radius:8px;padding:16px;color:#93c5fd;font-size:13px;margin-top:20px}
.note strong{color:#60a5fa} .note strong{color:#60a5fa}
.footer{text-align:center;color:#475569;font-size:12px;padding:30px;border-top:1px solid #1e293b;margin-top:40px} .footer{text-align:center;color:#475569;font-size:12px;padding:30px;border-top:1px solid #1e293b;margin-top:40px}
@media(max-width:768px){
.hero{padding:30px 16px}
.hero h1{font-size:22px}
.container{padding:16px 12px}
.stats{grid-template-columns:repeat(2,1fr);gap:10px}
.stat{padding:14px}
.stat .num{font-size:24px}
section{padding:16px !important;margin-bottom:20px !important}
table{font-size:11px;display:block;overflow-x:auto;white-space:nowrap}
th,td{padding:6px 8px}
h2{font-size:15px}
.g2{grid-template-columns:1fr !important}
.g3{grid-template-columns:1fr !important}
.g4{grid-template-columns:repeat(2,1fr) !important}
}
</style></head><body> </style></head><body>
<div class="hero" style="padding:50px 40px 40px"> <div class="hero" style="padding:50px 40px 40px">
<h1 style="font-size:28px">Your Morning Just Got Easier</h1> <h1 style="font-size:28px">Your Morning Just Got Easier</h1>
@ -547,7 +562,7 @@ tr:hover{background:#111827}
<div class="container"> <div class="container">
<section style="background:linear-gradient(135deg,#0c1220,#0f1a2e);border:1px solid #1e3a5f;border-radius:16px;padding:35px;margin-bottom:40px"> <section style="background:linear-gradient(135deg,#0c1220,#0f1a2e);border:1px solid #1e3a5f;border-radius:16px;padding:35px;margin-bottom:40px">
<h2 style="border:none;color:#e2e8f0;font-size:20px;margin-bottom:20px">We know what your day looks like</h2> <h2 style="border:none;color:#e2e8f0;font-size:20px;margin-bottom:20px">We know what your day looks like</h2>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px"> <div class="g2" style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
<div> <div>
<div style="color:#f87171;font-size:13px;font-weight:600;margin-bottom:12px">RIGHT NOW — without this</div> <div style="color:#f87171;font-size:13px;font-weight:600;margin-bottom:12px">RIGHT NOW — without this</div>
<div style="color:#94a3b8;font-size:13px;line-height:1.8"> <div style="color:#94a3b8;font-size:13px;line-height:1.8">
@ -583,7 +598,7 @@ tr:hover{background:#111827}
<section style="margin-bottom:40px"> <section style="margin-bottom:40px">
<h2 style="border:none;color:#e2e8f0;font-size:18px;margin-bottom:16px">Here's what it actually did — just now, when you loaded this page:</h2> <h2 style="border:none;color:#e2e8f0;font-size:18px;margin-bottom:16px">Here's what it actually did — just now, when you loaded this page:</h2>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px"> <div class="g3" style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px">
<div class="stat" style="text-align:left;padding:20px"> <div class="stat" style="text-align:left;padding:20px">
<div style="color:#34d399;font-size:28px;font-weight:800">${hybrid.sql_matches?.toLocaleString()}</div> <div style="color:#34d399;font-size:28px;font-weight:800">${hybrid.sql_matches?.toLocaleString()}</div>
<div style="color:#94a3b8;font-size:12px;margin-top:4px">Forklift operators in IL with 80%+ reliability</div> <div style="color:#94a3b8;font-size:12px;margin-top:4px">Forklift operators in IL with 80%+ reliability</div>
@ -610,7 +625,7 @@ tr:hover{background:#111827}
<section style="background:#0c1220;border:1px solid #1e3a5f;border-radius:12px;padding:24px;margin-bottom:40px"> <section style="background:#0c1220;border:1px solid #1e3a5f;border-radius:12px;padding:24px;margin-bottom:40px">
<div style="color:#e2e8f0;font-size:15px;font-weight:600;margin-bottom:12px">What's different from your CRM:</div> <div style="color:#e2e8f0;font-size:15px;font-weight:600;margin-bottom:12px">What's different from your CRM:</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px"> <div class="g3" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px">
<div> <div>
<div style="color:#818cf8;font-size:13px;font-weight:600;margin-bottom:6px">It understands what you mean</div> <div style="color:#818cf8;font-size:13px;font-weight:600;margin-bottom:6px">It understands what you mean</div>
<div style="color:#64748b;font-size:12px">Search "warehouse help" and it finds Forklift Operators, Loaders, Shipping Clerks — because it understands those ARE warehouse jobs. Your CRM would find nothing.</div> <div style="color:#64748b;font-size:12px">Search "warehouse help" and it finds Forklift Operators, Loaders, Shipping Clerks — because it understands those ARE warehouse jobs. Your CRM would find nothing.</div>
@ -651,7 +666,7 @@ tr:hover{background:#111827}
The AI reads every worker profile, understands the content, and converts it into a 768-dimension mathematical representation. The AI reads every worker profile, understands the content, and converts it into a 768-dimension mathematical representation.
When you search, it finds workers whose <em>meaning</em> matches — even if the words are completely different. When you search, it finds workers whose <em>meaning</em> matches — even if the words are completely different.
</p> </p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px"> <div class="g2" style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px">
<div style="background:#0d0d1a;border-radius:8px;padding:16px"> <div style="background:#0d0d1a;border-radius:8px;padding:16px">
<div style="color:#f87171;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">CRM Keyword Search</div> <div style="color:#f87171;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">CRM Keyword Search</div>
<div style="color:#e2e8f0;font-size:14px">"warehouse work" → <span style="color:#f87171">0 results</span></div> <div style="color:#e2e8f0;font-size:14px">"warehouse work" → <span style="color:#f87171">0 results</span></div>
@ -700,7 +715,7 @@ tr:hover{background:#111827}
<h2><span>04</span> Local AI — your data, your models, your GPU</h2> <h2><span>04</span> Local AI — your data, your models, your GPU</h2>
<p style="color:#94a3b8;font-size:13px">${g.name || "NVIDIA RTX A4000"} — ${g.used_mib || 0} / ${g.total_mib || 16376} MiB</p> <p style="color:#94a3b8;font-size:13px">${g.name || "NVIDIA RTX A4000"} — ${g.used_mib || 0} / ${g.total_mib || 16376} MiB</p>
<div class="gpu-bar"><div class="gpu-fill" style="width:${((g.used_mib||0)/(g.total_mib||16376)*100)}%"></div></div> <div class="gpu-bar"><div class="gpu-fill" style="width:${((g.used_mib||0)/(g.total_mib||16376)*100)}%"></div></div>
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px"> <div class="g4" style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px">
<div style="background:#111827;border-radius:8px;padding:12px;text-align:center"> <div style="background:#111827;border-radius:8px;padding:12px;text-align:center">
<div style="color:#a78bfa;font-weight:700">qwen3</div> <div style="color:#a78bfa;font-weight:700">qwen3</div>
<div style="color:#64748b;font-size:11px">8.2B · Reasoning</div> <div style="color:#64748b;font-size:11px">8.2B · Reasoning</div>