marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Homepage ticker: speed scales with text length (~70 px/s), pauses on hover/touch; CSS fallback 120 s

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-12 16:40:23 -05:00
parent 99f6c1f8c6
commit 5b4fe133eb
3 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/home.js
+8
View File
@@ -69,6 +69,14 @@
const inner = IAP.$('tickerInner'); const inner = IAP.$('tickerInner');
inner.innerHTML = events.map(ev => '<span>' + IAP.describeEvent(ev, c) + '</span>').join(''); inner.innerHTML = events.map(ev => '<span>' + IAP.describeEvent(ev, c) + '</span>').join('');
IAP.$('ticker').hidden = false; IAP.$('ticker').hidden = false;
// readable pace (Marty, 2026-09-12): about 70 px per second no matter how much text is loaded,
// instead of a fixed 42 s for the whole strip; pause while a finger or pointer rests on it
const wrap = IAP.$('ticker');
const secs = Math.max(30, Math.round((inner.scrollWidth + wrap.clientWidth) / 70));
inner.style.animationDuration = secs + 's';
const pause = on => { inner.style.animationPlayState = on ? 'paused' : 'running'; };
wrap.addEventListener('mouseenter', () => pause(true)); wrap.addEventListener('mouseleave', () => pause(false));
wrap.addEventListener('touchstart', () => pause(true), { passive: true }); wrap.addEventListener('touchend', () => pause(false), { passive: true });
} catch (e) {} } catch (e) {}
} }
// level cycler: chips + generation highlighting + auto-advance // level cycler: chips + generation highlighting + auto-advance
public/assets/site.css
+1 -1
View File
@@ -176,7 +176,7 @@ h3{font-size:16.5px;margin:0 0 8px;font-weight:700}
background:rgba(67,232,195,.04);white-space:nowrap;padding:10px 0; background:rgba(67,232,195,.04);white-space:nowrap;padding:10px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker .inner{display:inline-block;font-family:var(--mono);font-size:12.5px;padding-left:100%;animation:tick 42s linear infinite} .ticker .inner{display:inline-block;font-family:var(--mono);font-size:12.5px;padding-left:100%;animation:tick 120s linear infinite}
.ticker .inner span{margin-right:48px;color:var(--muted)} .ticker .inner span{margin-right:48px;color:var(--muted)}
.ticker .inner span b{color:var(--mint);font-weight:600} .ticker .inner span b{color:var(--mint);font-weight:600}
@keyframes tick{to{transform:translateX(-100%)}} @keyframes tick{to{transform:translateX(-100%)}}
public/index.html
+2 -2
View File
@@ -20,7 +20,7 @@
<meta name="theme-color" content="#043b2f"> <meta name="theme-color" content="#043b2f">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="icon" type="image/png" href="/logo-icon.png"> <link rel="icon" type="image/png" href="/logo-icon.png">
<link rel="stylesheet" href="/assets/site.css?v=20260910h"> <link rel="stylesheet" href="/assets/site.css?v=20260912a">
</head> </head>
<body> <body>
@@ -463,7 +463,7 @@
<script src="/assets/common.js?v=20260912c"></script> <script src="/assets/common.js?v=20260912c"></script>
<script src="/assets/wallet.js?v=20260909c"></script> <script src="/assets/wallet.js?v=20260909c"></script>
<script src="/assets/home.js?v=20260906m"></script> <script src="/assets/home.js?v=20260912a"></script>
<script src="/assets/chat.js?v=20260906m"></script> <script src="/assets/chat.js?v=20260906m"></script>
</body> </body>
</html> </html>