socktop-webterm/TERMINAL_WINDOW_STYLING.md

Terminal Window Styling Guide

Overview

The terminal now has a beautiful window frame wrapper, similar to Ghostty and other modern terminal emulators. This gives your web-based terminal a native application feel.

Features

1. Terminal Window Frame

• Rounded corners (10px border radius)
• Deep shadow for depth and elevation
• Frosted glass effect with backdrop blur
• Semi-transparent background that shows the page background

2. Title Bar

• macOS-style traffic light buttons (close, minimize, maximize)
• Customizable title text
• Subtle border separating it from terminal content
• 40px height for comfortable proportions

3. Window Controls

• Red button - Close (traditionally closes the window)
• Yellow button - Minimize (traditionally minimizes the window)
• Green button - Maximize (traditionally maximizes/fullscreen)
• Hover effect - Buttons brighten on hover
• 12px diameter - Classic macOS size

Customization Options

Change Terminal Title

In templates/term.html, find:

<div class="terminal-title">socktop - Terminal</div>

Change to:

<div class="terminal-title">My Awesome Terminal</div>
<div class="terminal-title">🚀 socktop v1.0</div>
<div class="terminal-title">Terminal</div>

Adjust Window Size

.terminal-window {
    width: 80%;                    /* Default: 80% of viewport */
    max-width: 1200px;             /* Default: 1200px max */
}

Options:

width: 90%;                        /* Larger window */
width: 60%;                        /* Smaller window */
width: 1000px;                     /* Fixed width */
max-width: 1400px;                 /* Bigger max */

Change Border Radius (Roundness)

.terminal-window {
    border-radius: 10px;           /* Default: 10px */
}

Options:

border-radius: 6px;                /* Smaller, subtle */
border-radius: 15px;               /* More rounded */
border-radius: 20px;               /* Very rounded */
border-radius: 0;                  /* Square corners */

Adjust Shadow Depth

.terminal-window {
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 10px 20px rgba(0, 0, 0, 0.3);
}

Light shadow:

box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.3),
    0 5px 10px rgba(0, 0, 0, 0.2);

Heavy shadow:

box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.6),
    0 20px 40px rgba(0, 0, 0, 0.4);

No shadow:

box-shadow: none;

Change Title Bar Color

.terminal-titlebar {
    background: rgba(40, 40, 40, 0.95);  /* Default: dark */
}

Options:

/* Lighter */
background: rgba(60, 60, 60, 0.95);

/* Darker */
background: rgba(20, 20, 20, 0.95);

/* Colored (blue) */
background: rgba(30, 40, 60, 0.95);

/* Transparent */
background: rgba(40, 40, 40, 0.7);

/* Solid */
background: rgb(40, 40, 40);

Change Title Bar Height

.terminal-titlebar {
    height: 40px;                  /* Default */
}

Options:

height: 32px;                      /* Compact */
height: 48px;                      /* Spacious */
height: 36px;                      /* Slightly smaller */

Customize Traffic Light Colors

.terminal-button.close {
    background: #ff5f57;           /* Red */
}

.terminal-button.minimize {
    background: #ffbd2e;           /* Yellow */
}

.terminal-button.maximize {
    background: #28c840;           /* Green */
}

Alternative color schemes:

Windows style:

.terminal-button.close {
    background: #e81123;
}

.terminal-button.minimize {
    background: #0078d4;
}

.terminal-button.maximize {
    background: #0078d4;
}

Monochrome:

.terminal-button.close {
    background: #999;
}

.terminal-button.minimize {
    background: #777;
}

.terminal-button.maximize {
    background: #555;
}

Change Button Size

.terminal-button {
    width: 12px;
    height: 12px;
}

Options:

width: 10px; height: 10px;         /* Smaller */
width: 14px; height: 14px;         /* Larger */
width: 16px; height: 16px;         /* Much larger */

Adjust Button Spacing

.terminal-controls {
    gap: 8px;                      /* Default: 8px between buttons */
}

Options:

gap: 6px;                          /* Tighter */
gap: 10px;                         /* Looser */
gap: 12px;                         /* More space */

Change Window Frame Background

.terminal-window {
    background: rgba(30, 30, 30, 0.95);     /* Default: dark */
}

Options:

/* Darker */
background: rgba(20, 20, 20, 0.95);

/* Lighter */
background: rgba(50, 50, 50, 0.9);

/* Colored */
background: rgba(30, 35, 45, 0.95);

/* More transparent */
background: rgba(30, 30, 30, 0.8);

/* Fully opaque */
background: rgb(30, 30, 30);

Adjust Backdrop Blur

.terminal-window {
    backdrop-filter: blur(20px);   /* Default: 20px */
}

Options:

backdrop-filter: blur(10px);       /* Light blur */
backdrop-filter: blur(30px);       /* Heavy blur */
backdrop-filter: blur(40px);       /* Very heavy blur */
backdrop-filter: none;             /* No blur */

Window Styles Presets

Ghostty Style (Default)

.terminal-window {
    border-radius: 10px;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 10px 20px rgba(0, 0, 0, 0.3);
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(20px);
}

Minimal Style

.terminal-window {
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

Floating Style

.terminal-window {
    border-radius: 15px;
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.6),
        0 20px 40px rgba(0, 0, 0, 0.4);
    background: rgba(25, 25, 25, 0.85);
    backdrop-filter: blur(30px) saturate(180%);
}

Flat Style

.terminal-window {
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: rgba(30, 30, 30, 0.98);
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

Glass Style

.terminal-window {
    border-radius: 12px;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    background: rgba(40, 40, 40, 0.7);
    backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

Making Buttons Functional

Currently, the traffic light buttons are just decorative. To make them functional, add JavaScript:

Close Button

document.querySelector('.terminal-button.close').addEventListener('click', () => {
    if (confirm('Close terminal?')) {
        window.close(); // Or your custom close logic
    }
});

Minimize Button

document.querySelector('.terminal-button.minimize').addEventListener('click', () => {
    document.querySelector('.terminal-window').style.transform = 'scale(0.5)';
    // Or hide: document.querySelector('.terminal-window').style.display = 'none';
});

Maximize Button

let isMaximized = false;
document.querySelector('.terminal-button.maximize').addEventListener('click', () => {
    const window = document.querySelector('.terminal-window');
    if (isMaximized) {
        window.style.width = '80%';
        window.style.maxHeight = '50vh';
    } else {
        window.style.width = '100%';
        window.style.maxHeight = '100vh';
    }
    isMaximized = !isMaximized;
});

Hide Traffic Lights

If you prefer no window controls:

.terminal-controls {
    display: none;
}

.terminal-title {
    text-align: left; /* Since there's no buttons on the left */
}

Center Title Without Controls

.terminal-title {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

Add Icons to Title

<div class="terminal-title">
    <span>⚡</span> socktop - Terminal
</div>

<div class="terminal-title">
    <span style="font-size: 16px;">💻</span> Terminal
</div>

Title Bar Variations

Left-aligned title with icon

<div class="terminal-titlebar">
    <div class="terminal-controls">...</div>
    <div class="terminal-title" style="text-align: left; flex: 1;">
        <span style="margin-right: 8px;">🚀</span>
        socktop v1.0
    </div>
</div>

Title with tabs (like modern terminals)

<div class="terminal-titlebar">
    <div class="terminal-controls">...</div>
    <div style="display: flex; gap: 4px; flex: 1;">
        <div class="terminal-tab active">Terminal 1</div>
        <div class="terminal-tab">Terminal 2</div>
    </div>
</div>

Then add CSS:

.terminal-tab {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px 6px 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    cursor: pointer;
}

.terminal-tab.active {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

Responsive Behavior

The window automatically adjusts on mobile:

@media (max-width: 640px) {
    .terminal-window {
        width: 96%;
    }
}

Customize:

@media (max-width: 768px) {
    .terminal-window {
        width: 100%;
        border-radius: 0; /* Remove rounded corners on mobile */
    }
    
    .terminal-titlebar {
        height: 36px; /* Smaller on mobile */
    }
    
    .terminal-button {
        width: 10px;
        height: 10px;
    }
}

Accessibility

The title bar is set to user-select: none so users can't accidentally select the text when clicking the buttons.

To make buttons keyboard accessible:

<div class="terminal-button close" role="button" tabindex="0" aria-label="Close"></div>

Browser Compatibility

All features work in modern browsers:

• ✅ Chrome/Edge 76+
• ✅ Safari 9+
• ✅ Firefox 103+

backdrop-filter gracefully degrades in older browsers (window will just be more opaque).

Performance Tips

1. Reduce blur if experiencing lag: blur(10px) instead of blur(20px)
2. Simplify shadows on low-end devices
3. Use opacity carefully - too many transparent layers can impact performance

Quick Reference

/* Size */
width: 80%;
max-width: 1200px;
border-radius: 10px;

/* Colors */
background: rgba(30, 30, 30, 0.95);
titlebar: rgba(40, 40, 40, 0.95);

/* Effects */
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(20px);

/* Buttons */
close: #ff5f57 (red)
minimize: #ffbd2e (yellow)
maximize: #28c840 (green)

---

Enjoy your beautiful terminal window frame! 🖼️✨