Skip to content

Label homepage demo tabs and improve form demo timing #3303

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
esokullu merged 2 commits into from
Nov 2, 2026
+988 −529
Merged

Label homepage demo tabs and improve form demo timing #3303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38b5148
Label the homepage demo tabs and let the form demo finish before its …
esokullu Nov 2, 2026
9ee1af1
Merge pull request #567 from esokullu/hero-demo-label
esokullu Nov 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 42 additions & 23 deletions web/ar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1574,6 +1574,16 @@
margin-bottom: 4px;
}
.sp-msg .step .check { color: var(--success); }
/* Fill a form: the reply grows with the form. Each step appears once its
fields are done, and "Filled 9 fields" only after the last field
(field 11 types at 3.0s and is checked at 3.45s). */
.browser-mockup.scene-form.is-active .sp-msg.assistant { animation-delay: 0.9s; }
.browser-mockup.scene-form.is-active .sp-msg.assistant .step,
.browser-mockup.scene-form.is-active .sp-msg.assistant .sp-result { animation: fadeUp 0.35s ease both; }
.browser-mockup.scene-form.is-active .sp-msg.assistant .step:nth-child(1) { animation-delay: 0.9s; }
.browser-mockup.scene-form.is-active .sp-msg.assistant .step:nth-child(2) { animation-delay: 1.9s; }
.browser-mockup.scene-form.is-active .sp-msg.assistant .step:nth-child(3) { animation-delay: 2.9s; }
.browser-mockup.scene-form.is-active .sp-msg.assistant .sp-result { animation-delay: 3.6s; }
.sp-input {
padding: 10px;
border-top: 1px solid var(--border);
Expand Down Expand Up @@ -2188,7 +2198,9 @@
/* Reduced motion — keep messages visible and disable cross-fade. */
@media (prefers-reduced-motion: reduce) {
.sp-msg { opacity: 1; }
.browser-mockup.is-active .sp-msg { animation: none; }
.browser-mockup.is-active .sp-msg,
.browser-mockup.scene-form.is-active .sp-msg.assistant .step,
.browser-mockup.scene-form.is-active .sp-msg.assistant .sp-result { animation: none; }
.mockup-stack > .browser-mockup { transition: none; transform: none; }
.tf-value, .browser-mockup.is-active .tf-value { animation: none; max-width: none; opacity: 1; }
.tf-check, .browser-mockup.is-active .tf-check { animation: none; opacity: 1; }
Expand Down Expand Up @@ -4037,11 +4049,15 @@
/* Carousel tabs: name each scene, like webbrain.cloud's CLI / Python
/ REST tabs. The rotation script keeps driving .is-active. */
.path-browser .hero-visual { display: flex; flex-direction: column; padding-top: 14px; }
/* "See it:" frames the tabs as demos to watch, not page navigation. */
.scene-nav-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 22px; min-width: 0; }
.scene-nav-row .scene-nav { margin-top: 0; min-width: 0; }
.scene-nav-label { flex: 0 0 auto; color: var(--text-dim); opacity: 0.8; font-size: 13px; font-weight: 500; white-space: nowrap; }
.path-browser .scene-nav-row { order: -1; justify-content: flex-start; margin: 0 0 14px; }
.path-browser .scene-nav {
order: -1;
justify-content: flex-start;
gap: 4px;
margin: 0 0 14px;
margin: 0;
overflow-x: auto;
scrollbar-width: none;
}
Expand Down Expand Up @@ -4345,7 +4361,7 @@ <h3>مستقبل الذكاء الاصطناعي المحلي</h3>
</div>

<!-- Scene 2: Tax form fill (Act mode) — fields type themselves in -->
<div class="browser-mockup" data-scene="1" aria-hidden="true" inert>
<div class="browser-mockup scene-form" data-scene="1" aria-hidden="true" inert>
<div class="browser-bar">
<div class="browser-dots"><span></span><span></span><span></span></div>
<div class="browser-url">https://tax.example.gov/filing/quarterly-return</div>
Expand All @@ -4356,40 +4372,40 @@ <h3>الإقرار الضريبي ربع السنوي — نموذج QT-4</h3>
<div class="tf-meta">دائرة الإيرادات · جميع الحقول مطلوبة</div>
<div class="tf-grid">
<div class="tf-field wide">
<div class="tf-label"><span><b>1a</b> الاسم القانوني للنشاط</span> <span class="tf-tags"><span class="tf-mem" style="--d:0.7s;">من الذاكرة</span><span class="tf-check" style="--d:0.7s;">&#10003;</span></span></div>
<div class="tf-input"><span class="tf-value" style="--d:0.7s;">Lumen Coffee LLC</span></div>
<div class="tf-label"><span><b>1a</b> الاسم القانوني للنشاط</span> <span class="tf-tags"><span class="tf-mem" style="--d:0.6s;">من الذاكرة</span><span class="tf-check" style="--d:0.6s;">&#10003;</span></span></div>
<div class="tf-input"><span class="tf-value" style="--d:0.6s;">Lumen Coffee LLC</span></div>
</div>
<div class="tf-field">
<div class="tf-label"><span><b>1b</b> EIN / المعرف الضريبي</span> <span class="tf-tags"><span class="tf-mem" style="--d:1.1s;">من الذاكرة</span><span class="tf-check" style="--d:1.1s;">&#10003;</span></span></div>
<div class="tf-input"><span class="tf-value" style="--d:1.1s;">84-2917465</span></div>
<div class="tf-label"><span><b>1b</b> EIN / المعرف الضريبي</span> <span class="tf-tags"><span class="tf-mem" style="--d:0.9s;">من الذاكرة</span><span class="tf-check" style="--d:0.9s;">&#10003;</span></span></div>
<div class="tf-input"><span class="tf-value" style="--d:0.9s;">84-2917465</span></div>
</div>
<div class="tf-field">
<div class="tf-label"><span><b>2</b> فترة الإقرار</span> <span class="tf-check" style="--d:1.6s;">&#10003;</span></div>
<div class="tf-input"><span class="tf-value" style="--d:1.6s;">Q2 2026</span></div>
<div class="tf-label"><span><b>2</b> فترة الإقرار</span> <span class="tf-check" style="--d:1.2s;">&#10003;</span></div>
<div class="tf-input"><span class="tf-value" style="--d:1.2s;">Q2 2026</span></div>
</div>
<div class="tf-field">
<div class="tf-label"><span><b>5a</b> الإيرادات الإجمالية</span> <span class="tf-check" style="--d:2.0s;">&#10003;</span></div>
<div class="tf-input"><span class="tf-value" style="--d:2.0s;">$148,220.00</span></div>
<div class="tf-label"><span><b>5a</b> الإيرادات الإجمالية</span> <span class="tf-check" style="--d:1.5s;">&#10003;</span></div>
<div class="tf-input"><span class="tf-value" style="--d:1.5s;">$148,220.00</span></div>
</div>
<div class="tf-field">
<div class="tf-label"><span><b>5b</b> المصاريف القابلة للخصم</span> <span class="tf-check" style="--d:2.4s;">&#10003;</span></div>
<div class="tf-input"><span class="tf-value" style="--d:2.4s;">$61,884.00</span></div>
<div class="tf-label"><span><b>5b</b> المصاريف القابلة للخصم</span> <span class="tf-check" style="--d:1.8s;">&#10003;</span></div>
<div class="tf-input"><span class="tf-value" style="--d:1.8s;">$61,884.00</span></div>
</div>
<div class="tf-field">
<div class="tf-label"><span><b>7</b> إجمالي أجور الرواتب</span> <span class="tf-tags"><span class="tf-mem" style="--d:2.8s;">من الذاكرة</span><span class="tf-check" style="--d:2.8s;">&#10003;</span></span></div>
<div class="tf-input"><span class="tf-value" style="--d:2.8s;">$38,400.00</span></div>
<div class="tf-label"><span><b>7</b> إجمالي أجور الرواتب</span> <span class="tf-tags"><span class="tf-mem" style="--d:2.1s;">من الذاكرة</span><span class="tf-check" style="--d:2.1s;">&#10003;</span></span></div>
<div class="tf-input"><span class="tf-value" style="--d:2.1s;">$38,400.00</span></div>
</div>
<div class="tf-field">
<div class="tf-label"><span><b>9a</b> المدفوعات التقديرية المسددة</span> <span class="tf-check" style="--d:3.2s;">&#10003;</span></div>
<div class="tf-input"><span class="tf-value" style="--d:3.2s;">$9,500.00</span></div>
<div class="tf-label"><span><b>9a</b> المدفوعات التقديرية المسددة</span> <span class="tf-check" style="--d:2.4s;">&#10003;</span></div>
<div class="tf-input"><span class="tf-value" style="--d:2.4s;">$9,500.00</span></div>
</div>
<div class="tf-field">
<div class="tf-label"><span><b>9b</b> رصيد الفترات السابقة</span> <span class="tf-check" style="--d:3.6s;">&#10003;</span></div>
<div class="tf-input"><span class="tf-value" style="--d:3.6s;">$1,250.00</span></div>
<div class="tf-label"><span><b>9b</b> رصيد الفترات السابقة</span> <span class="tf-check" style="--d:2.7s;">&#10003;</span></div>
<div class="tf-input"><span class="tf-value" style="--d:2.7s;">$1,250.00</span></div>
</div>
<div class="tf-field">
<div class="tf-label"><span><b>11</b> صافي الضريبة المستحقة</span> <span class="tf-check" style="--d:4.0s;">&#10003;</span></div>
<div class="tf-input"><span class="tf-value" style="--d:4.0s;">$12,067.40</span></div>
<div class="tf-label"><span><b>11</b> صافي الضريبة المستحقة</span> <span class="tf-check" style="--d:3.0s;">&#10003;</span></div>
<div class="tf-input"><span class="tf-value" style="--d:3.0s;">$12,067.40</span></div>
</div>
</div>
<span class="tf-submit">إرسال الإقرار</span>
Expand All @@ -4406,7 +4422,7 @@ <h3>الإقرار الضريبي ربع السنوي — نموذج QT-4</h3>
<div class="step"><span class="check">&#10003;</span> استرجع الاسم وEIN والرواتب <strong>من الذاكرة</strong></div>
<div class="step"><span class="check">&#10003;</span> تم العثور على 9 حقول مطلوبة</div>
<div class="step"><span class="check">&#10003;</span> حساب الإجماليات من الأرقام</div>
<div style="margin-top:6px;">تم ملء <strong>9 حقول</strong>. توقف قبل الإرسال — راجع وأرسل عندما تكون جاهزًا.</div>
<div class="sp-result" style="margin-top:6px;">تم ملء <strong>9 حقول</strong>. توقف قبل الإرسال — راجع وأرسل عندما تكون جاهزًا.</div>
</div>
</div>
<div class="sp-input">
Expand Down Expand Up @@ -4571,13 +4587,16 @@ <h3>كتالوج المنتجات</h3>
</button>
</div>

<div class="scene-nav-row">
<span class="scene-nav-label" aria-hidden="true">شاهد:</span>
<div class="scene-nav" role="tablist" aria-label="تبديل سيناريو العرض التوضيحي">
<button class="scene-dot is-active" type="button" data-scene="0" role="tab" aria-selected="true" title="عرض توضيحي لسؤال المتابعة">تلخيص</button>
<button class="scene-dot" type="button" data-scene="1" role="tab" aria-selected="false" title="عرض توضيحي لملء النماذج">تعبئة نموذج</button>
<button class="scene-dot" type="button" data-scene="2" role="tab" aria-selected="false" title="عرض توضيحي لتباعد CSS">تطوير الويب</button>
<button class="scene-dot" type="button" data-scene="3" role="tab" aria-selected="false" title="عرض توضيحي لتنزيل الفيديو">حفظ فيديو</button>
<button class="scene-dot" type="button" data-scene="4" role="tab" aria-selected="false" title="عرض توضيحي لاستخراج المنتجات">أتمتة</button>
</div>
</div>
</div>

</section>
Expand Down
Loading
Loading