andersevenrud / retro-css-shell-demo

AnderShell 3000 - Retro looking terminal in CSS

AnderShell 3000

A retro-looking shell using CSS and JavaScript.

Somewhat inspired by PipBoy and old-school UNIX terminals.

Demo

See it in action here (old version)

Please note that this demo is currently outdated and will be updated asap

Running

Just serve dist/ and you're good to go.

Development

Run npm install.

• npm run serve - Development server
• npm run build - Build
• npm run watch - Watch for changes (not needed with dev server)
• npm run eslint - Run eslint pass
• npm run stylelint - Run stylelint pass

retro-css-shell-demo's Issues

I made a few improvements for our Computer Museum Society website

Hi, great project! :) We will be using it to allow users to search through our Computer Museum inventory.
If you check out my fork, I made a few improvements (some text is in Slovenian, sorry):

https://github.com/markostamcar/muzej.si/tree/master/zbirka-crt
https://zbirka.muzej.si/

• amber CRT instead of green
• pressing enter should show the prompt again and not just move to a new line
• removed the Monofonto font as its license doesn't allow for free web embedding
• fixed support for mobile devices - soft keyboards do not send key events (only for enter button)
• on some mobile devices the first typed word is capitalized, so made commands case insensitive
• implemented support for AJAX commands so we can query our museum inventory API
• added recall of last command using cursor up
• removed fuzzy CRT animations as they consume lots of CPU and are distracting
• added deep linking support
• fix for iOS mobile browsers: soft keyboard did not show on some iOS versions

It would be nice if you would give this example some love

It would be nice if you could refactor to use the following pattern via js

Object.assign(el.style, { color: "red" });

This will allow us to more easy load that as ESModule as also allow us later to do custom styling more easy the keyframe stuff can get simply a

 createElement('style').innerText = `csss.......`

it would be nice when you also adapt that pattern in your osjs project it leads us as sayed to better reuse so we can work more easy together

alternativ i would need to improve my stack and build chains more to run in the browser as also my resolve implementations and so on and so on

Wish you all the best love your projects.

Wonky in Firefox

Have you given this a go in Firefox?

I am on macOS (High Sierra v 10.13.1). The shell works great in Safari, Chrome, Brave, Opera, IE, and Edge.

In Firefox (57.0 (64-bit)):

• it loads VERY slowly
• if I mouse-click on the screen the cursor is lost, until the window losses and regains focus
• backspaces are not handled properly

I had some co-workers test it as well. Perhaps it is actually a bug in Firefox.

Scrolling through the output

First off, great project! Can we somehow add scroll functionality to the output?

Website is dead

The website is not responding.

Minor spelling mistake in sound function error message

main.js:60: Change the "his" to "this". (7ed5e1b on Apr 23, 2014)