Skip to content

Commit c1139c4

Browse files
Glazlkclaude
Glazlk
and
claude
committed
feat(landing): add slogan, fix package names, responsive split-screen
- Add SPAWN TOKEN > BUILD TMA > PREVIEW LIVE slogan in footer - Fix MCP-CLIENT → MCP to match npm package name - Add /gettoken bot command row - Mark knowledge base as AI-SEARCHABLE - Footer links now orange - Add JS-driven .narrow class for split-screen / square viewport - Responsive single-column layout when width/height ≤ 1.25 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent ca5110c commit c1139c4

1 file changed

Lines changed: 59 additions & 8 deletions

File tree

‎deploy/landing/index.html‎

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
/* bot commands */
8080
.cmds{display:contents}
8181
.cmd{grid-column:1;display:grid;grid-template-columns:9.375vw 1fr;border-top:1px solid var(--rule);border-right:1px solid var(--rule)}
82-
.cmd-1{grid-row:2}.cmd-2{grid-row:3}.cmd-3{grid-row:4}
82+
.cmd-1{grid-row:2}.cmd-2{grid-row:3}.cmd-3{grid-row:4}.cmd-4{grid-row:5}
8383
.cmd-empty{grid-column:1;border-top:1px solid var(--rule);border-right:1px solid var(--rule)}
8484
.cmd-empty-4{grid-row:5}.cmd-empty-5{grid-row:6;border-bottom:1px solid var(--rule)}
8585
.cmd-n{padding:0 0.833vw;border-right:1px solid var(--rule);font-family:var(--mono);font-size:0.677vw;font-weight:700;color:var(--orange);display:flex;align-items:center;white-space:nowrap;transition:color .15s,text-shadow .15s}
@@ -108,16 +108,52 @@
108108
.mid-val b{color:var(--orange);transition:color .15s,text-shadow .15s}
109109
.mid-cell:hover .mid-val b{color:var(--orange-glow);text-shadow:0 0 0.5vw rgba(255,102,0,.6),0 0 1.5vw rgba(255,102,0,.2)}
110110

111-
.bottom{grid-column:1/-1;grid-row:9;display:flex;align-items:center;border-top:1px solid var(--rule);padding:0 1.875vw;height:4.583vw}
111+
.bottom{grid-column:1/-1;grid-row:9;display:flex;align-items:center;border-top:1px solid var(--rule);padding:0 1.875vw;height:4.583vw;position:relative}
112112
.bottom-brand{display:flex;align-items:center;gap:0.417vw;font-weight:400;font-size:0.625vw;letter-spacing:0.052vw;color:var(--dim);margin-right:auto}
113113
.bottom-brand img{width:1.042vw;height:1.042vw;border-radius:0.26vw}
114114
.bottom-brand .acc{font-weight:700;color:var(--paper)}
115115
.bottom-links{display:flex;gap:1.25vw}
116-
.bottom-links a{font-family:var(--mono);font-size:0.625vw;letter-spacing:0.104vw;color:var(--dim);text-shadow:0 0 0 transparent;transition:color .15s,text-shadow .15s}
116+
.bottom-slogan{font-family:var(--mono);font-size:0.677vw;letter-spacing:0.156vw;color:var(--dim);font-weight:700;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
117+
.bottom-links a{font-family:var(--mono);font-size:0.625vw;letter-spacing:0.104vw;color:var(--orange);text-shadow:0 0 0 transparent;transition:color .15s,text-shadow .15s}
117118
.bottom-links a:hover{color:#FF6600;text-shadow:0 0 0.5vw rgba(255,102,0,.8),0 0 1.5vw rgba(255,102,0,.4),0 0 3vw rgba(255,102,0,.15)}
118119

120+
/* ── RESPONSIVE: split-screen (JS-driven via .narrow class) ── */
121+
html.narrow,html.narrow body{height:auto;overflow:auto}
122+
html.narrow .page{display:flex;flex-direction:column;height:auto;min-height:100vh}
123+
html.narrow .left,html.narrow .right{display:block;border-right:none}
124+
html.narrow .left{border-bottom:1px solid var(--rule)}
125+
html.narrow .left-top,html.narrow .right-top{padding:28px 24px 16px;display:flex;flex-direction:column;grid-column:unset;grid-row:unset;border-right:none}
126+
html.narrow .label{margin-bottom:20px;font-size:15px;letter-spacing:4px}
127+
html.narrow .wm{font-size:clamp(40px,9vw,80px);letter-spacing:-2px;margin-bottom:16px}
128+
html.narrow .left-desc{font-size:14px;margin-bottom:18px;max-width:none}
129+
html.narrow .left-cta{font-size:13px;padding:12px 24px;gap:8px;letter-spacing:2px;margin-bottom:18px}
130+
html.narrow .left-cta svg{width:14px;height:14px}
131+
html.narrow .right-cta{font-size:13px;padding:12px 24px;letter-spacing:1px;margin-bottom:18px}
132+
html.narrow .cmds,html.narrow .pkgs{display:block}
133+
html.narrow .cmd,html.narrow .pkg{grid-column:unset;grid-row:unset;display:grid;border-top:1px solid var(--rule);border-right:none}
134+
html.narrow .cmd{grid-template-columns:160px 1fr}
135+
html.narrow .pkg{grid-template-columns:130px 1fr}
136+
html.narrow .cmd-empty{display:none}
137+
html.narrow .cmd-n{padding:0 16px;height:34px;font-size:13px;border-right:1px solid var(--rule)}
138+
html.narrow .cmd-d{padding:0 16px;height:34px;font-size:13px}
139+
html.narrow .pkg-n{padding:0 16px;height:34px;font-size:12px;letter-spacing:1px;border-right:1px solid var(--rule)}
140+
html.narrow .pkg-d{padding:0 16px;height:34px;font-size:13px}
141+
html.narrow .mid-title{grid-column:unset;grid-row:unset;padding:10px 20px;font-size:12px;letter-spacing:3px;border-top:1px solid var(--rule)}
142+
html.narrow .mid-bar{grid-column:unset;grid-row:unset;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
143+
html.narrow .mid-cell{padding:10px 14px;font-size:11px;letter-spacing:1px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
144+
html.narrow .mid-cell:last-child{border-right:1px solid var(--rule)}
145+
html.narrow .mid-cell:nth-child(3n){border-right:none}
146+
html.narrow .mid-cell:nth-child(n+4){border-bottom:none}
147+
html.narrow .mid-val{font-size:14px;margin-bottom:2px}
148+
html.narrow .bottom{grid-column:unset;grid-row:unset;padding:0 20px;height:44px}
149+
html.narrow .bottom-brand{font-size:12px;gap:8px;letter-spacing:1px}
150+
html.narrow .bottom-brand img{width:18px;height:18px;border-radius:4px}
151+
html.narrow .bottom-slogan{display:none}
152+
html.narrow .bottom-links{gap:20px}
153+
html.narrow .bottom-links a{font-size:12px;letter-spacing:2px}
154+
119155
/* ── RESPONSIVE: tablet ── */
120-
@media(max-width:900px){
156+
@media(max-width:1100px){
121157
:root{--row-h:36px}
122158
html,body{height:auto;overflow:auto}
123159
.page{display:flex;flex-direction:column;height:auto;min-height:100vh}
@@ -159,10 +195,11 @@
159195
.mid-val{font-size:14px;margin-bottom:2px}
160196

161197
/* footer */
162-
.bottom{grid-column:unset;grid-row:unset;padding:0 20px;height:9.78vw}
198+
.bottom{grid-column:unset;grid-row:unset;padding:0 20px;height:44px}
163199
.bottom-brand .powered-text{display:none}
164200
.bottom-brand{font-size:12px;gap:8px;letter-spacing:1px}
165201
.bottom-brand img{width:20px;height:20px;border-radius:5px}
202+
.bottom-slogan{display:none}
166203
.bottom-links{gap:24px}
167204
.bottom-links a{font-size:12px;letter-spacing:2px}
168205
}
@@ -195,6 +232,7 @@
195232

196233
.bottom{padding:0 16px;height:40px}
197234
.bottom-brand{font-size:12px;letter-spacing:3px}
235+
.bottom-slogan{display:none}
198236
.bottom-links{gap:16px}
199237
.bottom-links a{font-size:11px;letter-spacing:1px}
200238
}
@@ -223,7 +261,7 @@
223261
<div class="cmd cmd-1"><div class="cmd-n">/new &lt;title&gt;</div><div class="cmd-d">Register project, get bootstrap token</div></div>
224262
<div class="cmd cmd-2"><div class="cmd-n">/launch &lt;slug&gt;</div><div class="cmd-d">Preview URL, gateway, tunnel status</div></div>
225263
<div class="cmd cmd-3"><div class="cmd-n">/help</div><div class="cmd-d">List commands</div></div>
226-
<div class="cmd-empty cmd-empty-4"></div>
264+
<div class="cmd cmd-4"><div class="cmd-n">/gettoken</div><div class="cmd-d">MCP API key for AI agents</div></div>
227265
<div class="cmd-empty cmd-empty-5"></div>
228266
</div>
229267
</div>
@@ -242,13 +280,13 @@
242280
<div class="pkg pkg-1"><div class="pkg-n">CREATE</div><div class="pkg-d">Bootstrap CLI — clones, configures, links</div></div>
243281
<div class="pkg pkg-2"><div class="pkg-n">TMA-PROJECT</div><div class="pkg-d">Next.js + TON Connect + Telegram UI</div></div>
244282
<div class="pkg pkg-3"><div class="pkg-n">DEV-TUNNEL</div><div class="pkg-d">localhost to Telegram preview</div></div>
245-
<div class="pkg pkg-4"><div class="pkg-n">MCP-CLIENT</div><div class="pkg-d">AI knowledge bridge via MCP</div></div>
283+
<div class="pkg pkg-4"><div class="pkg-n">MCP</div><div class="pkg-d">TMA + TON knowledge base for AI agents</div></div>
246284
<div class="pkg pkg-5"><div class="pkg-n">CLI</div><div class="pkg-d">Agent launcher in project scope</div></div>
247285
</div>
248286
</div>
249287

250288
<!-- KNOWLEDGE BAR -->
251-
<div class="mid-title">KNOWLEDGE BASE</div>
289+
<div class="mid-title">KNOWLEDGE BASE · AI-SEARCHABLE</div>
252290
<div class="mid-bar">
253291
<div class="mid-cell"><div class="mid-val"><b>12</b> TMA</div>WebApp, navigation, theming</div>
254292
<div class="mid-cell"><div class="mid-val"><b>17</b> TON</div>Contracts, jettons, NFTs, DeFi</div>
@@ -261,6 +299,7 @@
261299
<!-- FOOTER BAR -->
262300
<div class="bottom">
263301
<div class="bottom-brand"><span class="powered-text">Powered by </span><img src="spawndock-logo.png" alt="SpawnDock"> <span class="acc">SpawnDock</span></div>
302+
<div class="bottom-slogan">SPAWN TOKEN > BUILD TMA > PREVIEW LIVE</div>
264303
<div class="bottom-links">
265304
<a href="https://github.com/SpawnDock" target="_blank" rel="noopener">GITHUB</a>
266305
<a href="https://t.me/TMASpawnerBot" target="_blank" rel="noopener">BOT</a>
@@ -385,5 +424,17 @@
385424
schedule();
386425
})();
387426
</script>
427+
428+
<script>
429+
// Split-screen / square viewport detector
430+
(function(){
431+
function check(){
432+
document.documentElement.classList.toggle('narrow',
433+
window.innerWidth / window.innerHeight <= 1.25 && window.innerWidth > 480);
434+
}
435+
window.addEventListener('resize', check);
436+
check();
437+
})();
438+
</script>
388439
</body>
389440
</html>

0 commit comments

Comments
 (0)