Claude/terminal style cards 011dt2 hnscf dv u9i fb8ohv y5 - #18
Merged
AzertoxHDW merged 10 commits intoNov 20, 2025
Conversation
Complete rewrite of the error page with two distinct designs: Windows 2000 BSOD (for win2000 theme): - Clean, focused Blue Screen of Death design - Classic Windows 2000 blue (#0000AA) background - Lucida Console monospace font - Simplified error information: - Error name (PAGE_NOT_FOUND or KERNEL_MODE_EXCEPTION) - Stop code (0x00000404 for 404 errors) - Requested path - Error message (if available) - Memory dump simulation - White ghost button for home navigation - Less cluttered than original (removed verbose Windows troubleshooting text) Terminal-Style 404 (for light/dark/system themes): - Full terminal window UI matching homepage aesthetic - macOS-style window controls (red, yellow, green dots) - Large ASCII art "404" logo with box drawing characters - Subtle glitch effect (random horizontal offset) - Terminal command simulation showing curl request - Comprehensive error information: - Error code and description - Helpful suggestions for users - Request ID and timestamp - Terminal prompt with blinking cursor - Smooth fade-in animation - Matches the terminal card design language Key Improvements: - Removed all unused theme references (XP, Win98, Vista) - Integrated with current theme system ($currentTheme store) - Consistent English language throughout - More professional and polished design - Better responsive layout - Accessible with proper ARIA roles - Creative glitch effect for terminal variant Technical Details: - Uses currentTheme store for theme detection - onMount lifecycle for glitch animation setup - Proper cleanup of intervals - Responsive spacing and sizing - Tailwind CSS with custom animations
…round ASCII Art Improvements: - Redesigned 404 ASCII art with retro terminal aesthetic - Added decorative border using block characters (▄ and ▀) - Integrated log-style status messages ([FATAL], [INFO], [WARN]) - Added warning symbols (⚠) for visual emphasis - Included nested box drawing for status panel - More detailed and professional appearance - Adjusted font size to 10px with tighter line height (1.2) - Added overflow-x-auto for responsive display Background Enhancement: - Added StarField component import - Conditionally render StarField for non-win2000 themes - StarField only shows on light/dark/system themes - Windows 2000 BSOD keeps pure blue background (no stars) - Creates consistent visual experience with homepage Visual Structure: - Large 404 in box drawing characters - Error message with warning symbols - Status panel with FATAL/INFO/WARN tags - Professional terminal/system log aesthetic - Better spacing and visual hierarchy Result: - More engaging and professional error page - Consistent with homepage design language - StarField background adds depth and continuity - Windows 2000 theme remains authentic
ASCII Art Changes: - Removed all decorative borders (▄, ▀, █ block characters) - Simplified to clean 404 number and error message only - Kept box-drawing characters for the 404 digits - Removed nested status panel with [FATAL]/[INFO]/[WARN] tags - Clean, minimalist design focused on the error code Layout Changes: - Moved ASCII art outside the terminal window - Positioned above terminal in centered container - Increased font size (text-base/text-lg) for standalone display - Added space-y-6 between ASCII art and terminal window - Reduced terminal min-height from 500px to 400px Glitch Effect: - Maintained glitch effect on ASCII art - Applied to standalone pre element - Random horizontal translation on interval Result: - Cleaner, more focused error page design - ASCII art has more visual prominence outside terminal - Better hierarchy and separation of elements - Glitch effect adds visual interest to standalone art
Inspired by Android 10 easter egg, turn the error page into a fun game: Draggable 404 Digits: - Split ASCII art into individual draggable digits (4-0-4) - Each digit is independently moveable with cursor-move pointer - Glitch effect applied to all digits for visual flair - Large, prominent display (text-2xl/3xl) - Positioned across the top of the page Draggable Terminal Window: - Full terminal window now draggable by header - Drag handle on terminal header with "Drag me around!" hint - Cursor changes to move icon on header - Terminal maintains full functionality while moveable - Shadow and borders for depth Draggable Error Text: - "⚠ ERROR: PAGE NOT FOUND ⚠" message is draggable - Red destructive styling for visibility - Positioned between digits and terminal Draggable Home Button: - Return to Home button can be moved anywhere - Enhanced shadow (shadow-2xl) for prominence - Positioned at bottom center by default Interactive Features: - All elements use the existing draggable action - select-none prevents text selection during drag - cursor-move indicates draggability - Overflow hidden prevents scrollbars - Helpful hint in bottom-right: "💡 Hint: Everything is draggable! Have fun!" Technical Implementation: - Import draggable action and browser check - Separate ASCII art for digit4 and digit0 - Bind elements for drag positioning - Responsive initial positions using window dimensions - Terminal header has .terminal-header-drag class for handleSelector - Absolute positioning for free movement User Experience: - Fun, interactive Easter egg for error pages - Encourages exploration and play - Reduces frustration of hitting 404 - Memorable experience that stands out - Android 10 nostalgia for tech users Result: - 404 page is now a playful, interactive experience - Users can rearrange all elements freely - Creates positive association with error state - Unique and memorable design
- Lower error text from y:250 to y:300 for better spacing - Lower terminal window from y:350 to y:450 to prevent overlap - Add cursor-move to home button container for draggability - Home button now draggable while maintaining click functionality
- Move error text from y:300 to y:380 for better spacing - Ensures clear visual separation between draggable elements
- Add ASCII art for all digits 0-9 instead of just 4 and 0 - Dynamically generate draggable digits based on error code - Add comprehensive error code mappings for BSOD and terminal views - Map error codes to proper names (400-504 range) - Add context-aware error descriptions and help messages - Categorize errors as client (4xx) or server (5xx) errors - Update BSOD error names for different error codes - Make error page work seamlessly for 400, 401, 403, 404, 500, 502, 503, etc.
- Create /test-error page with buttons to test all common error codes - Add dynamic /test-error/[code] route that throws errors with specific status - Support testing error codes from 400-599 range - Group errors by client (4xx) and server (5xx) categories - Add custom error messages for each tested error code - Include tips for testing draggable features and Windows 2000 BSOD theme - Useful for development and QA of the interactive error page
- Add 418 to error names: IM_A_TEAPOT - Add 418 to error descriptions with humorous teapot message - Add 418 to error labels: I'M A TEAPOT - Add 418 to test-error page with button for easy testing - Update custom error test example from 418 to 451 - Fix "Error: error" display issue for 418 status code
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.