46 lines
5.6 KiB
HTML
46 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="theme-color" content="#050505">
|
|
<meta name="description" content="Phast app — make MCP apps phast.">
|
|
<title>Phast app</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Bangers&family=DM+Mono:wght@400;500&family=Inter:wght@500;700;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{--bg:#050505;--panel:#0d0d0d;--ink:#f5f2e9;--muted:#8a8a84;--orange:#ff5a00;--line:#272727;--pad:clamp(22px,4vw,56px)}
|
|
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}a,button{color:inherit;font:inherit}a{text-decoration:none}.shell{min-height:100svh;padding:var(--pad);display:grid;grid-template-rows:auto 1fr auto;position:relative;isolation:isolate}.shell:before{content:"";position:absolute;inset:0;z-index:-2;background:repeating-linear-gradient(115deg,transparent 0 92px,rgba(255,90,0,.05) 92px 94px,transparent 94px 180px)}.shell:after{content:"";position:absolute;width:58vw;height:12px;background:var(--orange);right:-14vw;top:23%;transform:skewX(-28deg) rotate(-8deg);box-shadow:0 24px 0 rgba(255,90,0,.42),0 48px 0 rgba(255,90,0,.18);z-index:-1}
|
|
.top,.foot{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-family:Bangers,sans-serif;font-size:32px;letter-spacing:.05em;color:var(--orange)}.connector{font:11px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:none;border:0;border-bottom:1px solid #333;padding:0 0 5px;cursor:pointer}.connector:hover{color:var(--orange);border-color:var(--orange)}
|
|
.hero{align-self:center;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.55fr);gap:clamp(34px,7vw,110px);align-items:end;padding:7vh 0}.kicker,.meta,.foot{font:10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.12em}.kicker{color:var(--orange);margin:0 0 16px}.hero h1{font-family:Bangers,sans-serif;font-weight:400;margin:0;transform:skewY(-2deg);text-shadow:6px 6px 0 #1b1b1b}.make-line{display:block;white-space:nowrap;color:var(--orange);font-size:clamp(54px,6.5vw,102px);line-height:.8;letter-spacing:.015em}.phast-line{display:block;color:var(--ink);font-size:clamp(112px,16vw,250px);line-height:.72;letter-spacing:.025em;margin-top:.1em}.copy{border-top:1px solid var(--line);padding-top:18px}.copy p{font-size:clamp(16px,1.4vw,21px);line-height:1.45;margin:0 0 24px;max-width:33ch}.copy strong{color:var(--orange)}.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--orange);color:#080808;padding:18px 20px;border:0;font-weight:900;text-transform:uppercase;letter-spacing:.03em;transform:skewX(-7deg);transition:.15s}.cta>*{transform:skewX(7deg)}.cta:hover{transform:skewX(-7deg) translate(5px,-3px);box-shadow:-8px 8px 0 #fff}.sequence{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}.step{background:var(--panel);padding:15px}.step b{display:block;font-family:Bangers,sans-serif;color:var(--orange);font-size:25px;letter-spacing:.04em}.step span{font:10px "DM Mono",monospace;color:var(--muted);text-transform:uppercase}.foot{color:#666}.foot b{color:var(--orange);font-weight:500}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,10px);opacity:0;background:var(--orange);color:#000;padding:9px 12px;font:10px "DM Mono",monospace;text-transform:uppercase;transition:.15s}.toast.show{opacity:1;transform:translate(-50%,0)}
|
|
@media(max-width:820px){.hero{grid-template-columns:1fr;align-items:start}.make-line{font-size:clamp(46px,11vw,82px)}.phast-line{font-size:clamp(92px,22vw,154px)}.copy{max-width:560px}.sequence{grid-template-columns:1fr 1fr}.shell:after{top:18%;width:90vw}}@media(max-width:480px){.make-line{white-space:normal}.sequence{grid-template-columns:1fr}.connector{font-size:9px}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<header class="top"><a class="brand" href="/">phast.app</a><button class="connector" id="copy">my.phast.app/mcp ↗</button></header>
|
|
<section class="hero">
|
|
<div>
|
|
<p class="kicker">MCP APPS // ZERO TO USEFUL</p>
|
|
<h1><span class="make-line">MAKE SOMETHING</span><span class="phast-line">PHAST</span></h1>
|
|
<div class="sequence">
|
|
<div class="step"><b>01 CONNECT</b><span>add my.phast.app/mcp</span></div>
|
|
<div class="step"><b>02 MAKE</b><span>create your Phast app</span></div>
|
|
<div class="step"><b>03 TUNE</b><span>tools + prefab widgets</span></div>
|
|
<div class="step"><b>04 RUN</b><span>use it from any agent</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="copy">
|
|
<p><strong>Connect your tools once.</strong><br>Bring your tool belt anywhere. ChatGPT, Claude, Codex — same Phast app, same tools, same home.</p>
|
|
<a class="cta" href="https://my.phast.app"><span>BUILD YOUR PHAST APP</span><span>→</span></a>
|
|
<p class="meta" style="margin-top:14px;color:#666">one connector // many personal MCPs</p>
|
|
</div>
|
|
</section>
|
|
<footer class="foot"><span><b>idea → mcp → app</b></span><span>make it // use it // keep moving</span></footer>
|
|
</main>
|
|
<div class="toast" id="toast">MCP COPIED</div>
|
|
<script>
|
|
const c=document.querySelector('#copy'),t=document.querySelector('#toast');c.onclick=async()=>{try{await navigator.clipboard.writeText('https://my.phast.app/mcp');t.textContent='MCP COPIED'}catch{t.textContent='my.phast.app/mcp'}t.classList.add('show');setTimeout(()=>t.classList.remove('show'),1100)};
|
|
</script>
|
|
</body></html> |