Redesign to Cyber Terminal: Modernising the Welcome Screen

If you have a technology hub that serves our community with IT support and advice. For months, we had been using a welcome screen that was frankly embarrassing - an old, dated message display that looked like it belonged in the early 2000s. The interface was static, uninspiring, and honestly quite dented from years of use. Every time someone approached our help desk, I cringed a little seeing that outdated welcome message staring back at them.

I knew we needed something better. Something that would immediately communicate that we were a modern, tech-savvy operation. Something that would catch people's attention and make them excited about getting help rather than dreading another boring tech support interaction.

Visuals

It always good to have a visual of the solution, so first we will see the "closed" message informing people that the service is not open yet:

Then after 8am until 4pm this is the message presented to people on the welcome screen:

Welcome Screen : Modernisation with a "terminal theme"

I decided to completely transform our welcome screen into something that would make visitors stop and take notice. The concept was simple but powerful: create a hacker-style terminal interface that would be both functional and visually striking.

The new system needed to:

Display dynamic, time-based messages
Look modern and engaging
Work perfectly on vertical screens (our setup uses portrait orientation)
Update automatically without manual intervention
Create that authentic terminal feeling that makes technology feel exciting

The Foundation: Terminal Interface

I started with the visual foundation - a dark terminal background with that classic green-on-black color scheme. The interface includes a scanning line effect that moves down the screen like an old CRT monitor refresh, giving it that authentic retro-tech feeling:

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, #00ff00, transparent);
    animation: scan 2s linear infinite;
}

@keyframes scan {
    0% { top: 0%; opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

This creates that continuous scanning line that moves down the screen, giving it the feel of an old CRT terminal display.

Dynamic Time-Based Messaging

The core functionality revolves around showing different messages based on our operating hours. I implemented a script that checks the current time and displays the appropriate message:

function updateTerminalContent() {
    const dynamicOutput = document.getElementById('dynamicOutput');
    const currentTime = new Date().getHours();
    
    if (currentTime >= 8 && currentTime < 16) {
        // We're open! Show the help message
        dynamicOutput.innerHTML = `
            <div class="urgent-flash">[!!! ATTENTION REQUIRED !!!]</div>
            <br>
            <div class="command">👋 NEED TECHNOLOGY HELP OR ADVICE?</div>
            <br>
            <div class="action-flash">>>> PLEASE TAP IPAD BUTTON <<<</div>
            <br>
            <div class="success">An agent will be with you shortly...</div>
        `;
    } else {
        // We're closed
        dynamicOutput.innerHTML = `
            <div class="urgent-flash">🔒 TECHBAR IS CURRENTLY CLOSED</div>
            <br>
            <div class="output">We will re-open at 8am</div>
        `;
    }
}

Visual Effects

The key to making this interface truly attention-grabbing was adding strategic visual effects. I implemented different types of flashing animations for different message priorities:

.urgent-flash {
    color: #ff0000;
    font-weight: bold;
    animation: urgentBlink 0.5s infinite;
}

.action-flash {
    color: #ffff00;
    font-weight: bold;
    animation: actionBlink 0.8s infinite;
}

@keyframes urgentBlink {
    0%, 50% { 
        opacity: 1; 
        text-shadow: 0 0 20px #ff0000;
    }
    51%, 100% { 
        opacity: 0.3; 
        text-shadow: 0 0 5px #ff0000;
    }
}

The red flashing immediately grabs attention, while the yellow pulsing on the call-to-action creates a clear hierarchy of information.

Responsive Design for Vertical Screens

Since our setup uses a vertical screen orientation, I had to ensure the interface would scale properly:

@media (orientation: portrait) {
    .terminal-window {
        width: 95%;
        min-height: 70vh;
        padding: 40px 20px;
        font-size: 1.4rem;
    }
    
    .logo img {
        width: 150px;
    }
}

This ensures that whether someone approaches our terminal on a landscape monitor or our portrait-oriented display, they get the optimal viewing experience.

Automatic Updates (No F5)

One crucial feature was ensuring the system updates automatically without requiring manual refreshes. I implemented a timer system that checks the status every minute:

// Update content every minute
setInterval(updateTerminalContent, 60000);

This means that at exactly 8 AM, the screen automatically switches from "CLOSED" to showing our help message, and at 4 PM it switches back to closed status.

Redesign to Cyber Terminal: Modernising the Welcome Screen

نموذج الاتصال