Claude/terminal style cards 011dt2 hnscf dv u9i fb8ohv y5 - #16
Merged
AzertoxHDW merged 10 commits intoNov 19, 2025
Conversation
Changes to homepage: - Remove theme selector dropdown from layout header - Add new HomeTerminal component below draggable cards - Terminal allows theme switching via commands HomeTerminal features: - Interactive command-line interface - Commands: help, cls, whoami, theme <name>, theme list - Theme switching: Change themes by typing "theme dark", "theme light", etc. - Auto-focus input on click - Blinking cursor animation - Scrollable output with custom scrollbar - Styled to match current theme Layout changes: - Removed Select component and theme dropdown from header - Cleaner header without theme selector clutter - Theme can now be changed via terminal commands This provides a more immersive, developer-friendly interface for theme switching and site interaction.
Terminal Updates: - Redesigned to match terminal window aesthetic of other cards - Added terminal titlebar with control buttons (red, yellow, green) - Title bar is now the drag handle - Removed standalone box styling, integrated into terminal-window Focus & Cursor: - Added isFocused state tracking - Cursor now only blinks when terminal input is focused - Cursor disappears when focus is lost - Added onFocus callback prop for z-index management Draggable Integration: - Terminal is now part of the draggable card system - Positioned below other cards (y: 800px, centered horizontally) - Uses same z-index system as other cards - Clicking terminal brings it to front - Width: 800px for better visibility Styling: - Matching titlebar with gradient and control buttons - Same border and backdrop blur as other terminal windows - Fixed height: 300px for consistent appearance - Proper scrollbar styling matching theme - Terminal title: "~ terminal ~" The terminal now feels like a native part of the interface with full drag support and proper focus management.
Positioning fixes: - Removed transform: translateX(-50%) that was conflicting with draggable - Draggable action now handles positioning entirely via left/top - Properly centered using calculated initial position - Width reduced from 800px to 700px for better proportions - Initial Y position: 750px (slightly higher) Height adjustment: - Reduced terminal content height from 300px to 220px - More compact and appropriate size These changes fix: - Window teleporting when clicked (transform conflict) - Offset/misalignment issues - Cursor positioning problems - Overall better proportions
Cursor positioning fix: - Wrapped input and cursor in .input-wrapper container - Input now sizes to content using size attribute (inputValue.length) - Removed flex-grow from input, moved to wrapper - Cursor now appears immediately after typed text, not at end of line - Added min-width: 1ch to input for when empty The cursor now correctly follows the text as you type instead of being offset far to the right.
- Implement invisible sizer span for accurate cursor tracking in HomeTerminal - Position cursor immediately at text end instead of offset to the right - Increase terminal window z-index to 200 to appear above header/navbar - Update highestZIndex starting value to 200 for proper stacking order
- Change terminal initial Y position from 750 to 850 - Prevents terminal from overlapping with bottom row cards on page load
- Terminal now hidden by default and toggled via button in header - Add "Ouvrir/Fermer Terminal" button with Terminal icon - Close button on terminal window now functional - Terminal appears at centered position (y: 300) when opened - Remove auto-load delay and adjust initial positioning
- Change from text button to icon-only round button - Position as fixed in top-right corner (top-8 right-8) - Add backdrop blur and hover scale effect - Remove button from header area - Z-index set to 150 to stay above other elements
- Remove Windows 2000 theme from help text (keep as hidden easter egg) - Remove system theme from visible options - Remove "theme list" command - Update help text to show only: theme <name> - Change theme (light, dark) - Error message now shows: Available: light, dark - win2000 and system themes still work if typed directly
- Users can now type just "dark" or "light" instead of "theme dark" - Update help text to show direct commands - Keep "theme <name>" syntax working for compatibility - Simplifies user experience with more intuitive commands
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.