- Add Content Security Policy meta tag for XSS protection
- Add width/height to image for CLS prevention
- Add aria-hidden to decorative SVG icons (7 locations)
- Refactor inline onclick to addEventListener for CSP compliance
- Add visibility-aware setInterval for ping updates
- Add keyboard navigation (Arrow keys) for tab panels
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Critical fixes:
- Add defer to app.js for non-blocking loading
- Add skip link and main landmark for accessibility
- Fix ARIA tab state dynamic updates
High priority fixes:
- Add rel="noopener noreferrer" to external links
- Implement non-blocking Google Fonts loading
- Improve color contrast (text-slate-500 → text-slate-400)
- Consolidate price data to single source (PRICING_DATA)
- Add TELEGRAM_BOT_URL constant
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add CSS focus indicators for keyboard navigation
- Add high contrast mode and reduced motion support
- Improve text color contrast (slate-400 → slate-300)
- Add ARIA labels to modal, tabs, pricing table
- Add keyboard navigation to tab component
- Improve image alt text descriptions
- Add sr-only utility class and screen reader descriptions
- Make region selection buttons accessible with role="radio"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Set modal width to 95vw with max-width 800px using inline style
- Adjust chat container padding to px-6 py-4
- Balance card sizing with px-5 py-4 padding
- Reduce icon sizes to text-2xl/text-3xl for better fit
- Use text-base/text-sm for improved text readability
- Fix text overflow issues during wizard steps
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Convert modal to step-by-step chat-style wizard
- Flow: Region → Plan → OS → Payment → Confirm → Deploy
- Add chat message history with bot/user bubbles
- Support yearly payment with 17% discount calculation
- Add back button for returning to previous steps
- Widen modal (max-w-md sm:max-w-lg) for better UX
- Add deploy progress simulation with logs
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Pills with flags for region selection
- Horizontal wrap layout for OS options
- Stacked card design for plan selection with icons
- Gradient launch button with Korean text
- Backdrop blur and refined spacing
- Active states with shadow glow effects
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Extract inline Alpine.js code to separate app.js file
- Unify pricing data in single PRICING_DATA source
- Convert static pricing tables to dynamic Alpine.js templates
- Add footer links for Terms, Privacy Policy, SLA (Telegram bot deep links)
- Add ESC key handler for modal close
- Add aria-label to pricing table for accessibility
- Reduce index.html from 1023 to 862 lines
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add comprehensive Linux server guide with technical details
- Include web server (NGINX/Apache) and database (MySQL/PostgreSQL) benefits
- Add SQL Server on Linux section for .NET users
- Add container isolation benefits (Incus/LXD)
- Add automation and community ecosystem sections
- Link from existing Linux section to new deep dive guide
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Change color scheme to dark mode (navy blue background)
- Update all card, button, and form styles for dark theme
- Remove rotation transforms from all elements for cleaner look
- Adjust text colors for proper contrast on dark background
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add pointer-events: none to chat-widget-container to prevent blocking page links
- Add pointer-events: auto to chat-toggle-btn and open state for clickability
- Resize chat widget to 420x580px
- Update chat header text to "무엇이든 물어보세요"
- Enhance Telegram section with prominent badge and blue styling
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
