rus-long #13

Merged
David merged 8 commits from rus-long into main 2026-03-17 13:37:23 +01:00
Member

feat(frontend): restyle index.html to match a8n-tools light theme

Summary

Complete visual overhaul of static/index.html to match the a8n-tools
(pugtsurani.net) design system while preserving all existing functionality.

Visual Changes

Theme

  • Migrated from dark theme to light theme
  • Background: hsl(240 20% 98%), Foreground: hsl(240 24% 10%)
  • Font: ui-sans-serif, system-ui, sans-serif

Nav

  • White bar with bottom border
  • Muted link text, orange "Sign Up" pill button
  • 🦀 RUS logo with "RUS" in bold orange (#f97316)

Hero

  • Dark pill badge (">_ Part of a8n-tools suite") with "a8n-tools"
    linking to https://pugtsurani.net/ (opens in new tab)
  • Large headline with animated gradient on "Instantly."
    (orange → indigo → cyan, 6s loop)
  • Orange fill primary button + outlined secondary button

Feature Cards

  • 3×2 grid layout with white cards, border: hsl(240 15% 90%)
  • Font Awesome icons in colored rounded square boxes:
    • Lightning Fast: fa-bolt, #f97316 orange
    • Click Analytics: fa-chart-line, #8b5cf6 purple
    • Secure by Design: fa-shield-halved, #06b6d4 cyan
    • Custom Names: fa-pen-to-square, #ec4899 pink
    • QR Codes: fa-qrcode, #6366f1 indigo
    • Self-Hostable: fa-server, #10b981 green
  • Hover effect: gradient overlay per card color
    (50% → 20% → transparent, 0.15s cubic-bezier transition)

Other Sections

  • About section: clean white center-aligned text block
  • CTA band: full-width gradient (#4f46e5 → #f97316 → #06b6d4)
    with ghost button
  • Footer: 4-column layout (brand, Product, Account, Legal)

Functionality Preserved

  • All existing JS untouched
  • Auth state detection and SaaS mode switching
  • Setup redirect, version display, a8n link injection
  • Registration-disabled hiding (ctaSectionBtn, footerSignupLink)
feat(frontend): restyle index.html to match a8n-tools light theme ## Summary Complete visual overhaul of static/index.html to match the a8n-tools (pugtsurani.net) design system while preserving all existing functionality. ## Visual Changes ### Theme - Migrated from dark theme to light theme - Background: hsl(240 20% 98%), Foreground: hsl(240 24% 10%) - Font: ui-sans-serif, system-ui, sans-serif ### Nav - White bar with bottom border - Muted link text, orange "Sign Up" pill button - 🦀 RUS logo with "RUS" in bold orange (#f97316) ### Hero - Dark pill badge (">_ Part of a8n-tools suite") with "a8n-tools" linking to https://pugtsurani.net/ (opens in new tab) - Large headline with animated gradient on "Instantly." (orange → indigo → cyan, 6s loop) - Orange fill primary button + outlined secondary button ### Feature Cards - 3×2 grid layout with white cards, border: hsl(240 15% 90%) - Font Awesome icons in colored rounded square boxes: - Lightning Fast: fa-bolt, #f97316 orange - Click Analytics: fa-chart-line, #8b5cf6 purple - Secure by Design: fa-shield-halved, #06b6d4 cyan - Custom Names: fa-pen-to-square, #ec4899 pink - QR Codes: fa-qrcode, #6366f1 indigo - Self-Hostable: fa-server, #10b981 green - Hover effect: gradient overlay per card color (50% → 20% → transparent, 0.15s cubic-bezier transition) ### Other Sections - About section: clean white center-aligned text block - CTA band: full-width gradient (#4f46e5 → #f97316 → #06b6d4) with ghost button - Footer: 4-column layout (brand, Product, Account, Legal) ## Functionality Preserved - All existing JS untouched - Auth state detection and SaaS mode switching - Setup redirect, version display, a8n link injection - Registration-disabled hiding (ctaSectionBtn, footerSignupLink)
Layout (matching ref1):
- Light theme throughout (hsl(240 20% 98%) background, dark foreground)
- Nav: white bar with border, muted link text, orange Sign Up pill button
- Hero: dark pill badge (>_ Part of a8n-tools suite), large headline with
  animated gradient on Instantly. (orange to indigo to cyan, 6s loop),
  muted subtitle, orange fill + outlined buttons
- Features: light gray section, eyebrow label, 3-column card grid with
  colored icon boxes (orange/indigo/teal tinted backgrounds per card)
- About section: clean white center-aligned text block
- CTA band: full-width gradient (#4f46e5 to #f97316 to #06b6d4) with ghost button
- Footer: 4-column layout (brand, Product, Account, Legal)

Functionality preserved:
- All existing JS untouched: auth state detection, SaaS mode switching,
  setup redirect, version display, a8n link injection,
  registration-disabled hiding (now covers ctaSectionBtn and footerSignupLink)
updated FA icon
- .feature-card-overlay — position: absolute; inset: -1px; border-radius: 0.75rem;
  opacity: 0; pointer-events: none; transition: opacity 0.15s cubic-bezier(.4,0,.2,1)
  - .feature-card:hover .feature-card-overlay — opacity: 1
  - Each card has its overlay div as the first child with a linear-gradient(to bottom,
  rgba(COLOR, 0.5), rgba(COLOR, 0.2), transparent) matching its icon color
Owner
This is for YouTrack RUS-1. https://niceguyit.myjetbrains.com/youtrack/issue/RUS-1/Mimic-the-a8n-tools-style-on-RUS
David merged commit 6a6bc52670 into main 2026-03-17 13:37:23 +01:00
David deleted branch rus-long 2026-03-17 13:37:23 +01:00
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
a8n-tools/rus!13
No description provided.