Redesign Surf-TG frontend to OTT-style dark UI

[SasukeXDev]

Motivation

• Provide a modern, premium OTT-style UI (Netflix-like) for the Surf-TG web frontend while preserving all existing backend routing, Telegram integrations, and server-side placeholders.
• Improve discoverability and visual hierarchy with a cinematic hero, horizontal rails, and richer cards without changing any data flows or APIs.
• Make the interface fully responsive and more usable on mobile and tablet while keeping all forms, URLs, and JS hooks intact.

Description

• Restyled the main Jinja/HTML templates under bot/server/template/ (home.html, index.html, playlist.html, video.html, dl.html, login.html, list.html) and replaced visual scaffolding with an inlined OTT-focused CSS theme (dark palettes, gradients, glass panels, shadows, and accent colors).
• Added a cinematic hero banner, sticky top navigation bar with logo/links, horizontal scroll rails, modern poster/card components, hover/play overlays, and polished metadata panels for player and download pages; all existing placeholders like <!-- Title -->, <!-- Chat_id -->, <!-- Parent_id -->, <!-- Poster -->, etc. were preserved.
• Introduced skeleton shimmer tiles, lazy-friendly scroll strips, responsive grid rules, and compact admin modal wiring to improve perceived performance and mobile UX while leaving backend form actions and modal endpoints unchanged.
• Improved the player and download layouts (two-column cinematic player + info panel), reorganized download/external-player buttons into action clusters, and kept the original URL generation and Telegram deep-link logic untouched.

Testing

• Verified template tokens and placeholders remain present using a small Python check (python - <<'PY' ...) which confirmed required markers like <!-- Theme -->, <!-- Title -->, <!-- Chat_id -->, <!-- Parent_id -->, <!-- Poster -->, <!-- Filename --> are still in the modified templates. (passed)
• Confirmed the playlist template no longer contains the old sendFileModal reference with a targeted content search (rg/Python check) to avoid stale modal cross-references after refactor. (passed)
• Ensured all updated template files are non-empty and contain the new CSS/layout by checking file sizes in bot/server/template/. (passed)
• Ran small runtime sanity scripts used during the change (placeholder verification and pagination JS presence checks) to ensure no accidental removal of routing hooks or client-side helpers; these automated checks completed successfully. (passed)

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hub360	Ready	Preview, Comment	Mar 18, 2026 7:09pm