CSS and JavaScript (retro) terminal emulator demo

So I got bored the other day… this is the result. All graphics including effects are done using CSS (no images). Terminal emulator is written in plain JavaScript.

It works best in chrome, but should run in any browser.

Inspiration comes from the PipBoy in fallout and old-school UNIX terminals.

If you’re getting terrible performance, try switching to Chrome.

Soure: https://github.com/andersevenrud/retro-css-shell-demo

About this entry

You’re currently reading “CSS and JavaScript (retro) terminal emulator demo,” an entry on Anders Evenrud's Blog

Published:: April 18, 2014 / 21:04

Category:: Development, Experiments

Tags:: CSS, JavaScript

9 Comments

Jump to comment form | comment rss [?] | trackback uri [?]

CSS and JavaScript (retro) terminal emulator demo | Ragnarok Connection 7.16.14 / 5am

[…] Related Article: Anders Evenrud’s Blog […]

Reply
Edgar 12.18.14 / 10pm

this is so cool.. i want source code ^_^

Reply
1. anderse 12.18.14 / 10pm
  
  You can get the source-code here 🙂 https://github.com/andersevenrud/retro-css-shell-demo
  
  Reply
  1. Edgar 12.18.14 / 11pm
    
    so can i use it freely? without worrying about copyright stuff 🙂 its just exactly what i needed. even much better then i imagined this thing, when started looking 🙂
  2. anderse 12.19.14 / 1am
    
    I think I have included the wrong LICENSE file.. it should be a CC license. So you can do whatever you want with it without any restrictions! 😀
Edgar 12.19.14 / 7am

thank you very much kind sir ^_^ you really made me happy 🙂

Reply
Tim 11.15.16 / 10pm

Wow! This is great.

A friend asked my advice on how to make something like this but unfortunately I really didn’t know. I will be happy to show him your work. It is really very good. A bit slow on my old computer but perhaps that is intentional.
He is looking for something to aid his roleplaying group with in-game info ‘leaked’ or obtained by searching an old crt terminal. May he use it, and if so, is it possible to adapt this to full screen without the monitor frame?

[Sorry if I double-post. My first comment didn’t go through]

Reply
1. anderse 11.15.16 / 10pm
  
  It’s a bit slow depending on browser and the CPU in your computer. It is possible to adjust the effects a bit to get greater performance.
  
  You can absolutely do it fullscreen without the frame. Everything is in separate layers, so should be easy to modify.
  
  Reply
  1. Tim 11.16.16 / 8am
    
    I’m using Chrome but I guess my notebook isn’t that much of a brute. 😉
    Ok, wonderful. Then I’ll let my friend know. I guess I’ll have to help him with the code so perhaps I can get back to you if we have any a problem.
    If I remember correctly then we need to give the other players/gamers a URL as a clue. When they arrive at that page they will be prompted to enter a code to proceed or ‘log in’ so to say. They then arrive to your terminal page where they will need to find other clues and information that they will use at a later stage in the game. Thus I’ll might want to add a few more commands, files and directories to make it a nice search and challenge. 🙂 Maybe we can do a custom subdir wordpress installation like; terminal.his-rpg-site.com?

Anders Evenrud's Blog

CSS and JavaScript (retro) terminal emulator demo

About this entry

9 Comments

Leave a comment Cancel reply

My Pages:

My links:

Help out a fellow nerd

Follow Blog via Email

My recent Posts:

Top Posts & Pages

Archives

Categories

Anders Evenrud's Blog

CSS and JavaScript (retro) terminal emulator demo

Sharing is caring:

Related

About this entry

9 Comments

Leave a comment Cancel reply

My Pages:

My links:

Help out a fellow nerd

Follow Blog via Email

My recent Posts:

Top Posts & Pages

Archives

Categories