Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Xiphoseer/htmlcars
A HTML5 & CSS3 implementation of an LCARS GUI system from StarTrek
https://github.com/Xiphoseer/htmlcars
css-flexbox css-grid gui html-css html5 lcars star-trek vue-router vuejs2
Last synced: about 2 months ago
JSON representation
A HTML5 & CSS3 implementation of an LCARS GUI system from StarTrek
- Host: GitHub
- URL: https://github.com/Xiphoseer/htmlcars
- Owner: Xiphoseer
- License: mpl-2.0
- Created: 2018-01-06T11:44:17.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2024-06-18T16:24:26.000Z (7 months ago)
- Last Synced: 2024-08-09T17:29:51.118Z (6 months ago)
- Topics: css-flexbox, css-grid, gui, html-css, html5, lcars, star-trek, vue-router, vuejs2
- Language: SCSS
- Homepage: https://xiphoseer.de/htmlcars/
- Size: 5.16 MB
- Stars: 46
- Watchers: 7
- Forks: 10
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# htmLCARS
This is my take on re-creating the LCARS interface ("Okudagrams") from the Star Trek
television series in HTML / CSS.
## License
The code in this project is licensed under the [MPL-2.0](https://spdx.org/licenses/MPL-2.0.html).
### Fonts
This does not apply to `docs/.vuepress/public/assets/fonts/LCARSGTJ3.ttf` which
is used under a freeware license from .
The exact licensing note is in german, but the basic gist is:
- It's ALLOWED to *download* and *use* the font file
- It's REQUIRED to keep the filename and file content intact
- It's NOT ALLOWED to *sell* it
### General LCARS IP
CBS, the studio that owns the rights to the Star Trek assets seems to
hold the view that using an LCARS interface on a paid app is infringing
on their copyright. So while it might be fine that this project exists,
it's likely that you may not use this project for any commercial product.
## Installation
Add the following line to your `.npmrc`:
```
@xiphoseer:registry=https://npm.pkg.github.com/xiphoseer
```
Then, run
```
npm install @xiphoseer/htmlcars
```
or add the following line to `dependencies` in your `package.json`:
```
"@xiphoseer/htmlcars": "^0.1.0"
```
### Font setup
The (S)CSS assumes that a `font-family` called `LCARSGTJ3` is present
which corresponds to the file mentioned in [License](#license). Assuming you
want to use that font in your project, you need to add something like
the following to your project:
```css
/* http://www.gtjlcars.de/LCARSindex/LCARSFONTS.htm */
@font-face {
font-family: LCARSGTJ3;
src: url(/htmlcars/assets/fonts/LCARSGTJ3.ttf);
}
```
## Development setup
```
yarn install
```
### Compiles and hot-reloads docs app for development
```
yarn run docs:dev
```
### Compiles and minifies docs app for production
```
yarn run docs:build
```
### Compiles and minifies library for production
```
yarn run build
```
### Lints and fixes files
```
yarn run lint
```