6 ms·
Show HN: An old terminal HTML template
- crummy 7y agoLove it. One of my early websites was trying to build something like this (in style at least, I didn't have any interactivity).
- reustle 7y agoFantastic! I've been trying to build something similar for https://TokyoTech.com https://TokyoTech.com , but keep fighting with how to display larger content. Once something solidifies, I'll release it on GitHub too. Would love to add support for vim color theme files.
- jeroenjanssens 7y agoAnd vim keybindings please :)
- atum47 7y agofirst letter of the menu opens it?
- fareesh 7y agoreminds me of a low-res foxpro
- Theodores 7y agoIt's really good. Function keys would be nice, the original green screen with function key strip at the bottom of the screen interface is still one that I think is a good one. Another small thing, it could be made to work with the HTML elements that are semantic rather than presentational. So no div elements and magic classes, just sections, headers, footers, asides, nav and those sorts of things. In that way the content could be neatly structured and look good with a normal stylesheet, or, do the terminal mode (s). I have had a go at terminal mode myself and the Holy Grail is to do a compelling CRT impression with the slight curve of the screen. Not worked out how to do that yet. Phosphor glow is fine but I want to do the live lens distortion on HMTL content. As an added Easter Egg to your terminal you could get print mode to do the green stripes on the paper look.
- LeonB 7y agoGreen stripes on the paper idea for printing is great.
- atum47 7y agoI have thought about the keys opening the menus and the green on black crt. I did post this project here to see if people would respond to it, they seem to like it. I think I'll work a little more on it.
- atum47 7y agoI'll take a look at navbar and section. should work fine, the JavaScript sees the element by id and class, change from a div to a navbar or a section shouldn't break it.
- skissane 7y agoNeat. Although it is sort of an anachronistic mishmash of different eras. The mouse interface and colour scheme reminds me of old MS-DOS apps. But the font used is based on 1980s arcade games – https://fonts.google.com/specimen/Press+Start+2P https://fonts.google.com/specimen/Press+Start+2P – and is much more blocky than what one usually encountered on those mouse-enabled MS-DOS apps. And the 300 baud style slowness doesn't really fit with the colourful mouse-enabled UI – mouse interfaces on BBSs or remote hosts were rare, and by the time they started to appear modem connection speeds had improved significantly.
- steventhedev 7y agoIt should be possible to add mouseover events to have the mouse only highlight the current character block which is more authentic as well.
- atum47 7y agoyes, at first I was trying to reproduce a software from msdos era. after a while trying fonts and colors I end up with this style. I was going to use it on my own webpage, but then I just released to see if other people would like ut. I'm glad they did
- skissane 7y agoIt's your project, you can make it look however you like, and if you like how it is now, that's great. If however you wanted to go for a more authentic MS-DOS look, consider using these fonts instead – https://int10h.org/oldschool-pc-fonts/ https://int10h.org/oldschool-pc-fonts/ – they are identical (down to the pixel) with the original BIOS fonts used in IBM PC and compatible hardware.
- sonictruth2 7y agoThere is also https://github.com/kristopolous/BOOTSTRA.386 https://github.com/kristopolous/BOOTSTRA.386
- atum47 7y agoI didn't know about this one. I made mine as a simple jsfiddle sketch two years or so ago. Yesterday I've decided to upload it to see if someone cares for it.
- sonictruth2 7y agoYours looks very nice also. Thanks for sharing :)
- dlphn___xyz 7y agobut why...?
- justbaker 7y agoNostalgia?
- dlphn___xyz 7y agoof what? it seems to miss whatever its aiming at.
- kowdermeister 7y agominor UI enhancement: line-height: 1.5em would make it more believable.
- atum47 7y agoI'll test that
- atum47 7y agoI just added the green on black color scheme. It has some glow on it to mimic the CRT glow.