diff --git a/.copilot/used-promts/03.md b/.copilot/used-promts/03.md new file mode 100644 index 0000000..79775e2 --- /dev/null +++ b/.copilot/used-promts/03.md @@ -0,0 +1,7 @@ +CHange the handling of static files: +- The entire `static/` directory is now compiled into the binary, not just specific files. +- The server serves static files from an in-memory table instead of reading from disk. +- The static files are linked by their paths under `/static/` in the HTML template. + - This includes the `/static/` part of the path +- The intention is that static assets can reference each other using relative paths. (e.g. CSS referencing images) +- The `www/` directory remains for user uploads, served from disk. diff --git a/README.md b/README.md index 8a5777d..fa5661a 100755 --- a/README.md +++ b/README.md @@ -7,18 +7,19 @@ Luxtools is a minimal-but-complete scaffold for a retro-styled web application b - **Nim**: Nim's ahead-of-time compilation and small standard library make it ideal for producing a single self-contained binary. Its async HTTP primitives provide great performance with minimal boilerplate. - **HTMX**: HTMX keeps the frontend simple by embracing hypermedia. We can ship almost entirely server-rendered HTML snippets, allowing Nim to stay in control without a bulky SPA build step. - **TUI.CSS**: This lightweight CSS framework offers a retro terminal aesthetic with zero JavaScript and a tiny footprint—perfect for a nostalgic interface while remaining easy to customize. -- **Single binary delivery**: HTML templates are embedded at compile time via `staticRead`, so the server ships with everything it needs. Drop the compiled executable onto any host with the correct architecture and you're ready to run. +- **Single binary delivery**: HTML templates and the entire `static/` tree of vendored assets are embedded at compile time via `staticRead`, so the server ships with everything it needs. The compiled binary serves those resources directly from an in-memory table, while a separate `www/` directory remains available for user-provided uploads. ## Project layout ``` luxtools/ ├── bin/ # Output directory for release binaries -├── assets/ # Static files served directly by the HTTP handler +├── static/ # Vendored assets compiled into the binary static table ├── src/ │ └── luxtools.nim # Main server entrypoint ├── templates/ │ └── index.html # HTMX-powered landing page (compiled into the binary) +├── www/ # Runtime asset directory served from disk ├── tests/ │ └── test_rendering.nim# Lightweight regression tests for HTML helpers ├── luxtools.nimble # Nimble manifest with build/test tasks diff --git a/luxtools b/luxtools new file mode 100755 index 0000000..bb13055 Binary files /dev/null and b/luxtools differ diff --git a/src/luxtools b/src/luxtools new file mode 100755 index 0000000..d08d273 Binary files /dev/null and b/src/luxtools differ diff --git a/src/luxtools.nim b/src/luxtools.nim index 68fd62a..35b7f1e 100755 --- a/src/luxtools.nim +++ b/src/luxtools.nim @@ -1,8 +1,66 @@ -import std/[asynchttpserver, asyncdispatch, os, strformat, strutils, times] +import std/[asynchttpserver, asyncdispatch, os, strformat, strutils, tables, times] const indexPage = staticRead("../templates/index.html") +type + StaticFile = tuple[content: string, contentType: string] + +const + defaultContentType = "application/octet-stream" + contentTypeByExt = block: + var table = initTable[string, string]() + table[".js"] = "application/javascript" + table[".css"] = "text/css" + table[".html"] = "text/html; charset=utf-8" + table[".json"] = "application/json" + table[".png"] = "image/png" + table[".jpg"] = "image/jpeg" + table[".jpeg"] = "image/jpeg" + table[".svg"] = "image/svg+xml" + table[".gif"] = "image/gif" + table[".ico"] = "image/x-icon" + table[".ttf"] = "font/ttf" + table[".woff"] = "font/woff" + table[".woff2"] = "font/woff2" + table[".txt"] = "text/plain; charset=utf-8" + table + +proc guessContentType(path: string): string = + let ext = splitFile(path).ext.toLowerAscii() + if contentTypeByExt.hasKey(ext): + contentTypeByExt[ext] + else: + defaultContentType + +const staticRootDir = parentDir(currentSourcePath()) / ".." / "static" + +const staticFileEntries: seq[(string, StaticFile)] = block: + var entries: seq[(string, StaticFile)] = @[] + for path in walkDirRec(staticRootDir): + let fullPath = if isAbsolute(path): path else: staticRootDir / path + if not fileExists(fullPath): + continue + let relPath = relativePath(fullPath, staticRootDir) + if relPath.len == 0 or relPath.startsWith(".."): + continue + let normalizedRel = relPath.replace(DirSep, '/') + let urlPath = "/static/" & normalizedRel + let content = staticRead(fullPath) + let contentType = guessContentType(fullPath) + entries.add((urlPath, (content: content, contentType: contentType))) + entries + +proc findStaticFile(path: string; asset: var StaticFile): bool = + for entry in staticFileEntries: + if entry[0] == path: + asset = entry[1] + return true + false + +proc assetsRoot(): string = + absolutePath(joinPath(getAppDir(), "..", "www")) + var clickCount = 0 proc htmlHeaders(): HttpHeaders = @@ -40,46 +98,45 @@ proc sendHtml(req: Request, code: HttpCode, body: string) {.async, gcsafe.} = proc sendAsset(req: Request, body: string, contentType: string) {.async, gcsafe.} = await req.respond(Http200, body, assetHeaders(contentType)) -proc guessContentType(path: string): string = - let ext = splitFile(path).ext.toLowerAscii() - case ext - of ".js": - result = "application/javascript" - of ".css": - result = "text/css" - of ".html": - result = "text/html; charset=utf-8" - of ".json": - result = "application/json" - of ".png": - result = "image/png" - of ".jpg", ".jpeg": - result = "image/jpeg" - of ".svg": - result = "image/svg+xml" - of ".gif": - result = "image/gif" - of ".ico": - result = "image/x-icon" - else: - result = "application/octet-stream" - -proc trySendAsset(req: Request): Future[bool] {.async, gcsafe.} = +proc trySendStatic(req: Request): Future[bool] {.async, gcsafe.} = if req.reqMethod notin {HttpGet, HttpHead}: return false let path = req.url.path - if path.len <= 1 or path[0] != '/': + var asset: StaticFile + if not findStaticFile(path, asset): + return false + if req.reqMethod == HttpHead: + await req.respond(Http200, "", assetHeaders(asset.contentType)) + else: + await sendAsset(req, asset.content, asset.contentType) + return true + +proc trySendFileAsset(req: Request): Future[bool] {.async, gcsafe.} = + const assetPrefix = "/assets/" + + if req.reqMethod notin {HttpGet, HttpHead}: return false - let relative = path[1..^1] + let path = req.url.path + if not path.startsWith(assetPrefix): + return false + + if path.len == assetPrefix.len: + return false + + let relative = path[assetPrefix.len .. ^1] if relative.len == 0 or relative.contains("..") or relative.contains('\\'): return false - let assetPath = joinPath(absolutePath(joinPath(getAppDir(), "..", "assets")), relative) + let root = assetsRoot() + if not dirExists(root): + return false + + let assetPath = joinPath(root, relative) if not fileExists(assetPath): return false - + let contentType = guessContentType(assetPath) if req.reqMethod == HttpHead: await req.respond(Http200, "", assetHeaders(contentType)) @@ -98,7 +155,9 @@ proc handleRequest(req: Request) {.async, gcsafe.} = of "/time": await sendHtml(req, renderTime()) else: - if await trySendAsset(req): + if await trySendStatic(req): + return + if await trySendFileAsset(req): return await sendHtml(req, Http404, """
diff --git a/assets/lib/htmx.2.0.7.min.js b/static/lib/htmx.2.0.7.min.js similarity index 100% rename from assets/lib/htmx.2.0.7.min.js rename to static/lib/htmx.2.0.7.min.js diff --git a/static/lib/tuicss/fonts/Perfect DOS VGA 437 Win.ttf b/static/lib/tuicss/fonts/Perfect DOS VGA 437 Win.ttf new file mode 100644 index 0000000..d03b1c5 Binary files /dev/null and b/static/lib/tuicss/fonts/Perfect DOS VGA 437 Win.ttf differ diff --git a/static/lib/tuicss/fonts/Perfect DOS VGA 437.ttf b/static/lib/tuicss/fonts/Perfect DOS VGA 437.ttf new file mode 100644 index 0000000..f5cbfc0 Binary files /dev/null and b/static/lib/tuicss/fonts/Perfect DOS VGA 437.ttf differ diff --git a/static/lib/tuicss/fonts/dos437.txt b/static/lib/tuicss/fonts/dos437.txt new file mode 100644 index 0000000..d4860e2 --- /dev/null +++ b/static/lib/tuicss/fonts/dos437.txt @@ -0,0 +1,72 @@ + / +/(_____________ ____ +\ /______)\ | | +:\ | / \:| |:::::::::: : .. . : .. . . :. . + \_____| / | \| |______ +___ / ________ \... . . . +\______________ \ | | /.. . . . . . + \ |__| / +--x--x-----x----\______ |-/_____/-x--x-xx--x-- - -x -- - - -- - - - +. . . . . . . . . . . .\____|. . . . . . +------------------------------------------------------------------------------- +>> perfect dos vga 437 - general information >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> +------------------------------------------------------------------------------- + + "Perfect DOS VGA 437" and "Perfect DOS VGA 437 Win" are truetype fonts + designed to emulate the MS-DOS/Text mode standard font, used on VGA monitors, + with the 437 Codepage (standard US/International). This is a "bitmap" font, + meaning it emulates a bitmap font and can only be used at a given size (8 or + multiples of it like 16, 24, 32, etc). It's optimized for Flash too, so it + won't produce antialias if used at round positions. + + There are two fonts available. "Perfect DOS VGA 437" uses the original DOS + codepage 437. It should be used, for example, if you're opening DOS ASCII + files on notepad or another windows-based editor. Since it's faithful to the + original DOS codes, it won't accent correctly in windows ("é" would produce + something different, not an "e" with an acute). + + There's also "Perfect DOS VGA 437 Win" which is the exactly same font adapted + to a windows codepage. This should use accented characters correctly but won't + work if you're opening a DOS-based text file. + + UPDATE: this is a new version, updated in august/2008. It has fixed leading + metrics for Mac systems. + +------------------------------------------------------------------------------- +>> perfect dos vga 437 - creation process >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> +------------------------------------------------------------------------------- + + This font was created to be used on a Flash-based ANSi viewer I'm working. To + create it, I created a small Quick Basic program to write all characters on + screen, + + CLS + FOR l = 0 TO 255 + charWrite 1 + (l MOD 20), 1 + (l \ 20) * 6 + (l MOD 2), LTRIM$(RTRIM$(STR$(l))) + CHR$(l) + NEXT + SUB charWrite (lin, col, char$) + DEF SEG = &HB800 + FOR i = 1 TO LEN(char$) + POKE ((lin - 1) * 160) + ((col - 2 + i) * 2), ASC(MID$(char$, i, 1)) + IF (i = LEN(char$)) THEN POKE ((lin - 1) * 160) + ((col - 2 + i) * 2) + 1, 113 + NEXT + END SUB + + Then captured the text screen using SCREEN THIEF (a very, very old screen + capture TSR program which converts text screens to images accurately). I then + recreated the font polygon by polygon on Fontlab, while looking at the image + on Photoshop. No conversion took place. + +------------------------------------------------------------------------------- +>> author >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> +------------------------------------------------------------------------------- + + zeh fernando remembers the old days. SMASH DAH FUCKING ENTAH. + + http://www.fatorcaos.com.br + + rorshack ^ maiden brazil + +------------------------------------------------------------------------------- +^zehPULLSdahTRICK^kudosOUTtoWHOkeepsITreal^smashDAHfuckingENTAH!!!^lowres4ever^ +------------------------------------------------------------------------------- diff --git a/static/lib/tuicss/images/bg-blue-black.png b/static/lib/tuicss/images/bg-blue-black.png new file mode 100644 index 0000000..aa55706 Binary files /dev/null and b/static/lib/tuicss/images/bg-blue-black.png differ diff --git a/static/lib/tuicss/images/bg-blue-white.png b/static/lib/tuicss/images/bg-blue-white.png new file mode 100644 index 0000000..45409ed Binary files /dev/null and b/static/lib/tuicss/images/bg-blue-white.png differ diff --git a/static/lib/tuicss/images/bg-cyan-black.png b/static/lib/tuicss/images/bg-cyan-black.png new file mode 100644 index 0000000..12db210 Binary files /dev/null and b/static/lib/tuicss/images/bg-cyan-black.png differ diff --git a/static/lib/tuicss/images/bg-cyan-white.png b/static/lib/tuicss/images/bg-cyan-white.png new file mode 100644 index 0000000..41ce181 Binary files /dev/null and b/static/lib/tuicss/images/bg-cyan-white.png differ diff --git a/static/lib/tuicss/images/bg-green-black.png b/static/lib/tuicss/images/bg-green-black.png new file mode 100644 index 0000000..2f83f3c Binary files /dev/null and b/static/lib/tuicss/images/bg-green-black.png differ diff --git a/static/lib/tuicss/images/bg-green-white.png b/static/lib/tuicss/images/bg-green-white.png new file mode 100644 index 0000000..85cd3f9 Binary files /dev/null and b/static/lib/tuicss/images/bg-green-white.png differ diff --git a/static/lib/tuicss/images/bg-orange-black.png b/static/lib/tuicss/images/bg-orange-black.png new file mode 100644 index 0000000..05e8662 Binary files /dev/null and b/static/lib/tuicss/images/bg-orange-black.png differ diff --git a/static/lib/tuicss/images/bg-orange-white.png b/static/lib/tuicss/images/bg-orange-white.png new file mode 100644 index 0000000..8c82141 Binary files /dev/null and b/static/lib/tuicss/images/bg-orange-white.png differ diff --git a/static/lib/tuicss/images/bg-purple-black.png b/static/lib/tuicss/images/bg-purple-black.png new file mode 100644 index 0000000..240217f Binary files /dev/null and b/static/lib/tuicss/images/bg-purple-black.png differ diff --git a/static/lib/tuicss/images/bg-purple-white.png b/static/lib/tuicss/images/bg-purple-white.png new file mode 100644 index 0000000..5ae0ca2 Binary files /dev/null and b/static/lib/tuicss/images/bg-purple-white.png differ diff --git a/static/lib/tuicss/images/bg-red-black.png b/static/lib/tuicss/images/bg-red-black.png new file mode 100644 index 0000000..dc2c0be Binary files /dev/null and b/static/lib/tuicss/images/bg-red-black.png differ diff --git a/static/lib/tuicss/images/bg-red-white.png b/static/lib/tuicss/images/bg-red-white.png new file mode 100644 index 0000000..4470d9b Binary files /dev/null and b/static/lib/tuicss/images/bg-red-white.png differ diff --git a/static/lib/tuicss/images/bg-yellow-black.png b/static/lib/tuicss/images/bg-yellow-black.png new file mode 100644 index 0000000..ace85f9 Binary files /dev/null and b/static/lib/tuicss/images/bg-yellow-black.png differ diff --git a/static/lib/tuicss/images/bg-yellow-white.png b/static/lib/tuicss/images/bg-yellow-white.png new file mode 100644 index 0000000..457edd3 Binary files /dev/null and b/static/lib/tuicss/images/bg-yellow-white.png differ diff --git a/static/lib/tuicss/images/scroll-blue.png b/static/lib/tuicss/images/scroll-blue.png new file mode 100644 index 0000000..4ac322b Binary files /dev/null and b/static/lib/tuicss/images/scroll-blue.png differ diff --git a/static/lib/tuicss/images/scroll-cyan.png b/static/lib/tuicss/images/scroll-cyan.png new file mode 100644 index 0000000..ca62812 Binary files /dev/null and b/static/lib/tuicss/images/scroll-cyan.png differ diff --git a/static/lib/tuicss/images/scroll-green.png b/static/lib/tuicss/images/scroll-green.png new file mode 100644 index 0000000..d09971f Binary files /dev/null and b/static/lib/tuicss/images/scroll-green.png differ diff --git a/static/lib/tuicss/images/scroll-orange.png b/static/lib/tuicss/images/scroll-orange.png new file mode 100644 index 0000000..ec20219 Binary files /dev/null and b/static/lib/tuicss/images/scroll-orange.png differ diff --git a/static/lib/tuicss/images/scroll-purple.png b/static/lib/tuicss/images/scroll-purple.png new file mode 100644 index 0000000..67a0550 Binary files /dev/null and b/static/lib/tuicss/images/scroll-purple.png differ diff --git a/static/lib/tuicss/images/scroll-red.png b/static/lib/tuicss/images/scroll-red.png new file mode 100644 index 0000000..1dccb6a Binary files /dev/null and b/static/lib/tuicss/images/scroll-red.png differ diff --git a/static/lib/tuicss/images/scroll-white.png b/static/lib/tuicss/images/scroll-white.png new file mode 100644 index 0000000..c972a5e Binary files /dev/null and b/static/lib/tuicss/images/scroll-white.png differ diff --git a/static/lib/tuicss/images/scroll-yellow.png b/static/lib/tuicss/images/scroll-yellow.png new file mode 100644 index 0000000..e1a915c Binary files /dev/null and b/static/lib/tuicss/images/scroll-yellow.png differ diff --git a/static/lib/tuicss/tuicss.css b/static/lib/tuicss/tuicss.css new file mode 100644 index 0000000..bde8521 --- /dev/null +++ b/static/lib/tuicss/tuicss.css @@ -0,0 +1,2704 @@ +@charset "UTF-8"; +/* Styles */ /* Font (Options: 'Lucida Console' or 'DOS') */ +/* Characters */ +/* Theme */ +/* Responsive */ +/* Scrool */ +/* Grid */ +@font-face { + font-family: "DOS"; + src: url("./fonts/Perfect DOS VGA 437 Win.ttf"); +} +/* Global Definitions */ +html { + font-family: "Lucida Console", "monospace"; + font-size: 18px; + box-sizing: border-box; +} + +body { + margin: 0px; +} + +*, *:before, *:after { + font-family: inherit; + font-size: inherit; + box-sizing: inherit; +} + +ul { + margin: 0px; + padding: 0px; + list-style-type: none; +} + +ul li { + list-style-type: none; +} + +ul li a { + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +span { + margin: 0px; +} + +hr { + border: none; + border-bottom: 2px solid rgb(255, 255, 255); +} + +input, select, textarea { + width: 200px; +} + +/* Font (Options: 'Lucida Console' or 'DOS') */ +/* Characters */ +/* Theme */ +/* Responsive */ +/* Scrool */ +/* Grid */ +@media only screen and (max-width : 600px) { + .hide-on-small-only, .hide-on-small-and-down { + display: none !important; + } +} + +@media only screen and (max-width : 992px) { + .hide-on-med-and-down { + display: none !important; + } +} + +@media only screen and (min-width : 601px) { + .hide-on-med-and-up { + display: none !important; + } +} + +@media only screen and (min-width: 600px) and (max-width: 992px) { + .hide-on-med-only { + display: none !important; + } +} + +@media only screen and (min-width : 993px) { + .hide-on-large-only { + display: none !important; + } +} + +@media only screen and (min-width : 1201px) { + .hide-on-extra-large-only { + display: none !important; + } +} + +@media only screen and (min-width : 1201px) { + .show-on-extra-large { + display: block !important; + } +} + +@media only screen and (min-width : 993px) { + .show-on-large { + display: block !important; + } +} + +@media only screen and (min-width: 600px) and (max-width: 992px) { + .show-on-medium { + display: block !important; + } +} + +@media only screen and (max-width : 600px) { + .show-on-small { + display: block !important; + } +} + +@media only screen and (min-width : 601px) { + .show-on-medium-and-up { + display: block !important; + } +} + +@media only screen and (max-width : 992px) { + .show-on-medium-and-down { + display: block !important; + } +} + +/* Font (Options: 'Lucida Console' or 'DOS') */ +/* Characters */ +/* Theme */ +/* Responsive */ +/* Scrool */ +/* Grid */ +/* Theme */ +.primary { + background-color: rgb(0, 0, 168); +} + +.primary-text { + color: rgb(0, 0, 168); +} + +.primary-border { + border-color: rgb(0, 0, 168); +} + +.primary-hover:hover { + background-color: rgb(0, 0, 168); +} + +.primary-text-hover:hover { + color: rgb(0, 0, 168); +} + +.primary-border-hover:hover { + border-color: rgb(0, 0, 168); +} + +.secondary { + background-color: rgb(168, 168, 168); +} + +.secondary-text { + color: rgb(168, 168, 168); +} + +.secondary-border { + border-color: rgb(168, 168, 168); +} + +.secondary-hover:hover { + background-color: rgb(168, 168, 168); +} + +.secondary-text-hover:hover { + color: rgb(168, 168, 168); +} + +.secondary-border-hover:hover { + border-color: rgb(168, 168, 168); +} + +.success { + background-color: rgb(0, 168, 0); +} + +.success-text { + color: rgb(0, 168, 0); +} + +.success-border { + border-color: rgb(0, 168, 0); +} + +.success-hover:hover { + background-color: rgb(0, 168, 0); +} + +.success-text-hover:hover { + color: rgb(0, 168, 0); +} + +.success-border-hover:hover { + border-color: rgb(0, 168, 0); +} + +.danger { + background-color: rgb(168, 0, 0); +} + +.danger-text { + color: rgb(168, 0, 0); +} + +.danger-border { + border-color: rgb(168, 0, 0); +} + +.danger-hover:hover { + background-color: rgb(168, 0, 0); +} + +.danger-text-hover:hover { + color: rgb(168, 0, 0); +} + +.danger-border-hover:hover { + border-color: rgb(168, 0, 0); +} + +.warning { + background-color: rgb(168, 168, 0); +} + +.warning-text { + color: rgb(168, 168, 0); +} + +.warning-border { + border-color: rgb(168, 168, 0); +} + +.warning-hover:hover { + background-color: rgb(168, 168, 0); +} + +.warning-text-hover:hover { + color: rgb(168, 168, 0); +} + +.warning-border-hover:hover { + border-color: rgb(168, 168, 0); +} + +.info { + background-color: rgb(0, 168, 168); +} + +.info-text { + color: rgb(0, 168, 168); +} + +.info-border { + border-color: rgb(0, 168, 168); +} + +.info-hover:hover { + background-color: rgb(0, 168, 168); +} + +.info-text-hover:hover { + color: rgb(0, 168, 168); +} + +.info-border-hover:hover { + border-color: rgb(0, 168, 168); +} + +/* 168 */ +.black-168 { + background-color: rgb(0, 0, 0) !important; +} + +.blue-168 { + background-color: rgb(0, 0, 168) !important; +} + +.green-168 { + background-color: rgb(0, 168, 0) !important; +} + +.cyan-168 { + background-color: rgb(0, 168, 168) !important; +} + +.red-168 { + background-color: rgb(168, 0, 0) !important; +} + +.purple-168 { + background-color: rgb(168, 0, 168) !important; +} + +.yellow-168 { + background-color: rgb(168, 168, 0) !important; +} + +.white-168 { + background-color: rgb(168, 168, 168) !important; +} + +.orange-168 { + background-color: rgb(168, 86, 0) !important; +} + +.black-168-text { + color: rgb(0, 0, 0) !important; +} + +.blue-168-text { + color: rgb(0, 0, 168) !important; +} + +.green-168-text { + color: rgb(0, 168, 0) !important; +} + +.cyan-168-text { + color: rgb(0, 168, 168) !important; +} + +.red-168-text { + color: rgb(168, 0, 0) !important; +} + +.purple-168-text { + color: rgb(168, 0, 168) !important; +} + +.yellow-168-text { + color: rgb(168, 168, 0) !important; +} + +.white-168-text { + color: rgb(168, 168, 168) !important; +} + +.orange-168-text { + color: rgb(168, 86, 0) !important; +} + +.black-168-border { + border-color: rgb(0, 0, 0) !important; +} + +.blue-168-border { + border-color: rgb(0, 0, 168) !important; +} + +.green-168-border { + border-color: rgb(0, 168, 0) !important; +} + +.cyan-168-border { + border-color: rgb(0, 168, 168) !important; +} + +.red-168-border { + border-color: rgb(168, 0, 0) !important; +} + +.purple-168-border { + border-color: rgb(168, 0, 168) !important; +} + +.yellow-168-border { + border-color: rgb(168, 168, 0) !important; +} + +.white-168-border { + border-color: rgb(168, 168, 168) !important; +} + +.orange-168-border { + border-color: rgb(168, 86, 0) !important; +} + +.black-168-hover:hover { + background-color: rgb(0, 0, 0) !important; +} + +.blue-168-hover:hover { + background-color: rgb(0, 0, 168) !important; +} + +.green-168-hover:hover { + background-color: rgb(0, 168, 0) !important; +} + +.cyan-168-hover:hover { + background-color: rgb(0, 168, 168) !important; +} + +.red-168-hover:hover { + background-color: rgb(168, 0, 0) !important; +} + +.purple-168-hover:hover { + background-color: rgb(168, 0, 168) !important; +} + +.yellow-168-hover:hover { + background-color: rgb(168, 168, 0) !important; +} + +.white-168-hover:hover { + background-color: rgb(168, 168, 168) !important; +} + +.orange-168-hover:hover { + background-color: rgb(168, 86, 0) !important; +} + +.black-168-text-hover:hover { + color: rgb(0, 0, 0) !important; +} + +.blue-168-text-hover:hover { + color: rgb(0, 0, 168) !important; +} + +.green-168-text-hover:hover { + color: rgb(0, 168, 0) !important; +} + +.cyan-168-text-hover:hover { + color: rgb(0, 168, 168) !important; +} + +.red-168-text-hover:hover { + color: rgb(168, 0, 0) !important; +} + +.purple-168-text-hover:hover { + color: rgb(168, 0, 168) !important; +} + +.yellow-168-text-hover:hover { + color: rgb(168, 168, 0) !important; +} + +.white-168-text-hover:hover { + color: rgb(168, 168, 168) !important; +} + +.orange-168-text-hover:hover { + color: rgb(168, 86, 0) !important; +} + +.black-168-border-hover:hover { + border-color: rgb(0, 0, 0) !important; +} + +.blue-168-border-hover:hover { + border-color: rgb(0, 0, 168) !important; +} + +.green-168-border-hover:hover { + border-color: rgb(0, 168, 0) !important; +} + +.cyan-168-border-hover:hover { + border-color: rgb(0, 168, 168) !important; +} + +.red-168-border-hover:hover { + border-color: rgb(168, 0, 0) !important; +} + +.purple-168-border-hover:hover { + border-color: rgb(168, 0, 168) !important; +} + +.yellow-168-border-hover:hover { + border-color: rgb(168, 168, 0) !important; +} + +.white-168-border-hover:hover { + border-color: rgb(168, 168, 168) !important; +} + +.orange-168-border-hover:hover { + border-color: rgb(168, 86, 0) !important; +} + +/* 255 */ +.black-255 { + background-color: rgb(0, 0, 0) !important; +} + +.blue-255 { + background-color: rgb(0, 0, 255) !important; +} + +.green-255 { + background-color: rgb(0, 255, 0) !important; +} + +.cyan-255 { + background-color: rgb(0, 255, 255) !important; +} + +.red-255 { + background-color: rgb(255, 0, 0) !important; +} + +.purple-255 { + background-color: rgb(255, 0, 255) !important; +} + +.yellow-255 { + background-color: rgb(255, 255, 0) !important; +} + +.white-255 { + background-color: rgb(255, 255, 255) !important; +} + +.orange-255 { + background-color: rgb(255, 168, 0) !important; +} + +.black-255-text { + color: rgb(0, 0, 0) !important; +} + +.blue-255-text { + color: rgb(0, 0, 255) !important; +} + +.green-255-text { + color: rgb(0, 255, 0) !important; +} + +.cyan-255-text { + color: rgb(0, 255, 255) !important; +} + +.red-255-text { + color: rgb(255, 0, 0) !important; +} + +.purple-255-text { + color: rgb(255, 0, 255) !important; +} + +.yellow-255-text { + color: rgb(255, 255, 0) !important; +} + +.white-255-text { + color: rgb(255, 255, 255) !important; +} + +.orange-255-text { + color: rgb(255, 168, 0) !important; +} + +.black-255-border { + border-color: rgb(0, 0, 0) !important; +} + +.blue-255-border { + border-color: rgb(0, 0, 255) !important; +} + +.green-255-border { + border-color: rgb(0, 255, 0) !important; +} + +.cyan-255-border { + border-color: rgb(0, 255, 255) !important; +} + +.red-255-border { + border-color: rgb(255, 0, 0) !important; +} + +.purple-255-border { + border-color: rgb(255, 0, 255) !important; +} + +.yellow-255-border { + border-color: rgb(255, 255, 0) !important; +} + +.white-255-border { + border-color: rgb(255, 255, 255) !important; +} + +.orange-255-border { + border-color: rgb(255, 168, 0) !important; +} + +.black-255-hover:hover { + background-color: rgb(0, 0, 0) !important; +} + +.blue-255-hover:hover { + background-color: rgb(0, 0, 255) !important; +} + +.green-255-hover:hover { + background-color: rgb(0, 255, 0) !important; +} + +.cyan-255-hover:hover { + background-color: rgb(0, 255, 255) !important; +} + +.red-255-hover:hover { + background-color: rgb(255, 0, 0) !important; +} + +.purple-255-hover:hover { + background-color: rgb(255, 0, 255) !important; +} + +.yellow-255-hover:hover { + background-color: rgb(255, 255, 0) !important; +} + +.white-255-hover:hover { + background-color: rgb(255, 255, 255) !important; +} + +.orange-255-hover:hover { + background-color: rgb(255, 168, 0) !important; +} + +.black-255-text-hover:hover { + color: rgb(0, 0, 0) !important; +} + +.blue-255-text-hover:hover { + color: rgb(0, 0, 255) !important; +} + +.green-255-text-hover:hover { + color: rgb(0, 255, 0) !important; +} + +.cyan-255-text-hover:hover { + color: rgb(0, 255, 255) !important; +} + +.red-255-text-hover:hover { + color: rgb(255, 0, 0) !important; +} + +.purple-255-text-hover:hover { + color: rgb(255, 0, 255) !important; +} + +.yellow-255-text-hover:hover { + color: rgb(255, 255, 0) !important; +} + +.white-255-text-hover:hover { + color: rgb(255, 255, 255) !important; +} + +.orange-255-text-hover:hover { + color: rgb(255, 168, 0) !important; +} + +.black-255-border-hover:hover { + border-color: rgb(0, 0, 0) !important; +} + +.blue-255-border-hover:hover { + border-color: rgb(0, 0, 255) !important; +} + +.green-255-border-hover:hover { + border-color: rgb(0, 255, 0) !important; +} + +.cyan-255-border-hover:hover { + border-color: rgb(0, 255, 255) !important; +} + +.red-255-border-hover:hover { + border-color: rgb(255, 0, 0) !important; +} + +.purple-255-border-hover:hover { + border-color: rgb(255, 0, 255) !important; +} + +.yellow-255-border-hover:hover { + border-color: rgb(255, 255, 0) !important; +} + +.white-255-border-hover:hover { + border-color: rgb(255, 255, 255) !important; +} + +.orange-255-border-hover:hover { + border-color: rgb(255, 168, 0) !important; +} + +/* Misc */ +.black { + background-color: black !important; +} + +.black-text { + color: black !important; +} + +.black-border { + border-color: black !important; +} + +.black-hover:hover { + background-color: black !important; +} + +.black-text-hover:hover { + color: black !important; +} + +.black-border-hover:hover { + border-color: black !important; +} + +.white { + background-color: white !important; +} + +.white-text { + color: white !important; +} + +.white-border { + border-color: white !important; +} + +.white-hover:hover { + background-color: white !important; +} + +.white-text-hover:hover { + color: white !important; +} + +.white-border-hover:hover { + border-color: white !important; +} + +.left { + float: left !important; +} + +.right { + float: right !important; +} + +.center { + text-align: center; +} + +.left-align { + text-align: left; +} + +.right-align { + text-align: right; +} + +.center-align { + text-align: center; +} + +.full-width { + width: 100% !important; +} + +.full-height { + height: 100% !important; +} + +.inline { + display: inline !important; +} + +.inline-block { + display: inline-block !important; +} + +.block { + display: block !important; +} + +.valign-top { + vertical-align: top !important; +} + +.valign-middle { + vertical-align: middle !important; +} + +.valign-bottom { + vertical-align: bottom !important; +} + +.fixed { + position: fixed !important; +} + +.absolute { + position: absolute !important; +} + +.relative { + position: relative !important; +} + +.static { + position: static !important; +} + +.no-shadow { + box-shadow: none !important; +} + +.no-padding { + padding: 0px !important; +} + +.no-border { + border: none !important; +} + +.content { + padding: 12px; +} + +.disable-select { + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +.cursor-pointer { + cursor: pointer !important; +} + +.cursor-default { + cursor: default !important; +} + +.disabled { + cursor: not-allowed !important; +} + +/* Components */ +.tui-button { + display: inline-block; + outline: 0; + padding: 1px 10px; + background-color: rgb(0, 168, 0); + color: black; + border: none; + cursor: pointer; + text-align: center; + box-shadow: 10px 10px black; + border-radius: 0px; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} +.tui-button.disabled { + text-decoration: line-through; +} + +.tui-button:active { + background-color: rgb(0, 168, 168) !important; + color: black !important; + box-shadow: none !important; +} + +.tui-button:focus { + color: rgb(0, 255, 255) !important; +} + +input[type=button] { + width: initial; +} + +/* Font (Options: 'Lucida Console' or 'DOS') */ +/* Characters */ +/* Theme */ +/* Responsive */ +/* Scrool */ +/* Grid */ +.tui-checkbox { + display: block; + position: relative; + cursor: pointer; + color: white; + padding-left: 30px; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} +.tui-checkbox.disabled { + color: rgb(168, 168, 168); +} + +.tui-checkbox input { + position: absolute; + opacity: 0; + cursor: pointer; + top: 0px; + left: 0px; + pointer-events: none; +} + +.tui-checkbox span { + position: absolute; + width: 10px; + height: 10px; + cursor: pointer; + top: 0px; + left: 0px; +} + +.tui-checkbox input:checked ~ span::after { + content: "[√]"; + color: rgb(0, 255, 255); +} + +.tui-checkbox input:not(checked) ~ span::after { + content: "[ ]"; +} + +.tui-divider { + border-bottom: 2px solid rgb(255, 255, 255); + display: block; +} + +.tui-black-divider { + border-bottom: 2px solid rgb(0, 0, 0); + display: block; +} + +.tui-dropdown { + position: relative; + display: inline-block; + cursor: pointer; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +.tui-dropdown-content { + display: none; + position: absolute; + background-color: rgb(168, 168, 168); + min-width: 200px; + padding: 6px; + z-index: 9; +} + +.tui-dropdown-content ul { + border: 2px black solid; +} + +.tui-dropdown-content ul li { + display: block !important; + margin: 6px; +} + +.tui-dropdown-content ul li a:hover { + background-color: rgb(0, 168, 0); +} + +.tui-dropdown:hover > .tui-dropdown-content:first-of-type { + display: block; +} + +.tui-fieldset { + border: 6px white double; + padding: 12px; + background-color: inherit; + margin-bottom: 6px; +} +.tui-fieldset.no-legend { + margin-top: 6px; +} + +.tui-input-fieldset { + border-top: 6px white double; + border-bottom: 6px white double; + border-left: 2px white solid; + border-right: 2px white solid; + padding: 5px; + background-color: inherit; +} + +.tui-input-fieldset legend { + color: white; +} + +.tui-input-fieldset:hover { + border-color: yellow; +} + +.tui-input-fieldset:hover legend { + color: yellow; +} + +.tui-fieldset-button { + position: absolute; + top: 0px; + right: 16px; + color: white; + background-color: inherit; + z-index: 2; + border: none; + cursor: pointer; + outline: 0; + padding: 2px; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} +.tui-fieldset-button.left { + right: initial; + left: 16px !important; +} +.tui-fieldset-button.bottom { + bottom: 0px; + top: initial; +} + +.tui-fieldset-text { + position: absolute; + bottom: 0px; + left: 16px; + color: white; + background-color: inherit; + z-index: 2; + padding: 2px; +} +.tui-fieldset-text.right { + left: initial; + right: 16px; +} +.tui-fieldset-text.top { + top: 0px; + bottom: initial; +} + +.tui-fieldset-button::before { + content: "["; +} + +.tui-fieldset-button::after { + content: "]"; +} + +.tui-fieldset-button:active { + color: rgb(0, 255, 255) !important; +} + +.tui-input { + background-color: rgb(0, 0, 0); + color: white; + outline: 0; + border: none; + border-radius: 0px; +} +.tui-input.disabled { + background-color: rgb(168, 168, 168); + color: black; +} + +.tui-input:focus { + background-color: rgb(255, 255, 0) !important; + color: black !important; +} + +.tui-nav { + width: 100%; + background-color: rgb(168, 168, 168); + padding: 0px 2px; + z-index: 9; + display: block; + position: fixed; +} + +.tui-nav ul li { + display: inline-block; + margin-left: 10px; + padding: 1px 3px; +} + +.tui-nav ul li a { + display: block; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +.tui-nav ul li:hover { + background-color: rgb(0, 168, 0); +} + +.tui-panel { + background-color: rgb(0, 0, 168); + display: inline-block; + color: white; + box-shadow: 10px 10px black; +} + +.tui-panel-content { + padding: 12px; +} + +.tui-panel-header { + padding-top: 2px; + display: block; + background: white; + text-align: center; +} + +.tui-progress-bar { + display: block; + position: relative; + height: 20px; + width: 200px; + background-color: rgb(0, 168, 168); + overflow: hidden; +} + +.tui-progress { + position: absolute; + left: 0px; + background-color: rgb(0, 255, 255); + height: 100%; + display: inline-block; +} + +.tui-progress-bar .tui-indeterminate { + position: absolute; + left: 0px; + background-color: rgb(0, 255, 255); + height: 20px; + width: 20px; + display: inline-block; + animation: indeterminate 1s backwards; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.tui-progress-label { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: 1; +} + +@keyframes indeterminate { + from { + margin-left: -10%; + } + to { + margin-left: 100%; + } +} +/* Font (Options: 'Lucida Console' or 'DOS') */ +/* Characters */ +/* Theme */ +/* Responsive */ +/* Scrool */ +/* Grid */ +.tui-radio { + display: block; + position: relative; + cursor: pointer; + color: white; + padding-left: 30px; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} +.tui-radio.disabled { + color: rgb(168, 168, 168); +} + +.tui-radio input { + position: absolute; + opacity: 0; + cursor: pointer; + top: 0px; + left: 0px; + pointer-events: none; +} + +.tui-radio span { + position: absolute; + width: 10px; + height: 10px; + cursor: pointer; + top: 0px; + left: 0px; +} + +.tui-radio input:checked ~ span:after { + content: "(•)"; + color: rgb(0, 255, 255) !important; +} + +.tui-radio input:not(checked) ~ span:after { + content: "( )"; +} + +/* Font (Options: 'Lucida Console' or 'DOS') */ +/* Characters */ +/* Theme */ +/* Responsive */ +/* Scrool */ +/* Grid */ +/* Default */ +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background-image: url(images/scroll-cyan.png); + background-repeat: repeat; +} + +::-webkit-scrollbar-thumb { + background-color: rgb(0, 168, 168); +} + +::-webkit-scrollbar-thumb:hover { + background-color: rgb(0, 168, 168); +} + +/* Styles */ +.tui-scroll-blue ::-webkit-scrollbar-track { + background-image: url(images/scroll-blue.png); +} +.tui-scroll-blue ::-webkit-scrollbar-thumb { + background-color: rgb(0, 0, 168); +} +.tui-scroll-blue ::-webkit-scrollbar-thumb:hover { + background-color: rgb(0, 0, 168); +} + +.tui-scroll-green ::-webkit-scrollbar-track { + background-image: url(images/scroll-green.png); +} +.tui-scroll-green ::-webkit-scrollbar-thumb { + background-color: rgb(0, 168, 0); +} +.tui-scroll-green ::-webkit-scrollbar-thumb:hover { + background-color: rgb(0, 168, 0); +} + +.tui-scroll-cyan ::-webkit-scrollbar-track { + background-image: url(images/scroll-cyan.png); +} +.tui-scroll-cyan ::-webkit-scrollbar-thumb { + background-color: rgb(0, 168, 168); +} +.tui-scroll-cyan ::-webkit-scrollbar-thumb:hover { + background-color: rgb(0, 168, 168); +} + +.tui-scroll-red ::-webkit-scrollbar-track { + background-image: url(images/scroll-red.png); +} +.tui-scroll-red ::-webkit-scrollbar-thumb { + background-color: rgb(168, 0, 0); +} +.tui-scroll-red ::-webkit-scrollbar-thumb:hover { + background-color: rgb(168, 0, 0); +} + +.tui-scroll-purple ::-webkit-scrollbar-track { + background-image: url(images/scroll-purple.png); +} +.tui-scroll-purple ::-webkit-scrollbar-thumb { + background-color: rgb(168, 0, 168); +} +.tui-scroll-purple ::-webkit-scrollbar-thumb:hover { + background-color: rgb(168, 0, 168); +} + +.tui-scroll-yellow ::-webkit-scrollbar-track { + background-image: url(images/scroll-yellow.png); +} +.tui-scroll-yellow ::-webkit-scrollbar-thumb { + background-color: rgb(168, 168, 0); +} +.tui-scroll-yellow ::-webkit-scrollbar-thumb:hover { + background-color: rgb(168, 168, 0); +} + +.tui-scroll-white ::-webkit-scrollbar-track { + background-image: url(images/scroll-white.png); +} +.tui-scroll-white ::-webkit-scrollbar-thumb { + background-color: rgb(168, 168, 168); +} +.tui-scroll-white ::-webkit-scrollbar-thumb:hover { + background-color: rgb(168, 168, 168); +} + +.tui-sidenav { + position: fixed; + top: 0px; + left: 0px; + background-color: rgb(0, 168, 168); + min-width: 200px; + box-shadow: 10px 10px black !important; + padding: 6px; + z-index: 10; + height: 100%; + z-index: 8; + display: none; +} +.tui-sidenav.right { + left: initial; + right: 0px; +} +.tui-sidenav.active { + display: block !important; +} + +.tui-sidenav ul { + margin-top: 20px; + border: 2px black solid; +} + +.tui-sidenav ul li { + display: block; + margin: 6px; +} + +.tui-sidenav ul li a { + display: block; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +.tui-sidenav ul li:hover { + background-color: rgb(255, 255, 0); +} + +.tui-sidenav-button { + cursor: pointer; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +.tui-statusbar { + width: 100%; + background-color: rgb(168, 168, 168); + padding: 0px 1px; + left: 0px; + bottom: 0px; + z-index: 9; + position: fixed; +} + +.tui-statusbar ul li { + display: inline-block; + margin-left: 10px; + padding: 2px 3px; +} + +.tui-statusbar ul li:active { + background-color: rgb(0, 0, 168); + color: white; +} + +.tui-statusbar ul li a { + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +.tui-statusbar-divider { + border-right: 2px black solid; + display: inline; + margin: 0px 3px; +} + +.tui-table { + border: 2px solid rgb(168, 168, 168); + padding: 5px; + border-collapse: collapse; +} +.tui-table.hovered-blue tbody tr:hover { + background-color: rgb(0, 0, 255) !important; + color: black; +} +.tui-table.hovered-green tbody tr:hover { + background-color: rgb(0, 255, 0) !important; + color: black; +} +.tui-table.hovered-cyan tbody tr:hover { + background-color: rgb(0, 255, 255) !important; + color: black; +} +.tui-table.hovered-red tbody tr:hover { + background-color: rgb(255, 0, 0) !important; + color: white; +} +.tui-table.hovered-purple tbody tr:hover { + background-color: rgb(255, 0, 255) !important; + color: white; +} +.tui-table.hovered-yellow tbody tr:hover { + background-color: rgb(255, 255, 0) !important; + color: black; +} +.tui-table.hovered-white tbody tr:hover { + background-color: rgb(255, 255, 255) !important; + color: black; +} +.tui-table.hovered-orange tbody tr:hover { + background-color: rgb(255, 168, 0) !important; + color: black; +} +.tui-table.hovered tbody tr:hover { + background-color: rgb(0, 255, 255) !important; + color: black; +} +.tui-table.striped-blue tbody tr:nth-child(even) { + background-color: rgb(0, 0, 168); +} +.tui-table.striped-green tbody tr:nth-child(even) { + background-color: rgb(0, 168, 0); +} +.tui-table.striped-cyan tbody tr:nth-child(even) { + background-color: rgb(0, 168, 168); +} +.tui-table.striped-red tbody tr:nth-child(even) { + background-color: rgb(168, 0, 0); +} +.tui-table.striped-purple tbody tr:nth-child(even) { + background-color: rgb(168, 0, 168); +} +.tui-table.striped-yellow tbody tr:nth-child(even) { + background-color: rgb(168, 168, 0); +} +.tui-table.striped-white tbody tr:nth-child(even) { + background-color: rgb(168, 168, 168); + color: black; +} +.tui-table.striped-orange tbody tr:nth-child(even) { + background-color: rgb(168, 86, 0); +} + +.tui-table tbody { + background-color: inherit; + color: white; +} + +.tui-table tbody tr td { + border-right: 2px solid rgb(168, 168, 168); + padding: 0px 2px; +} + +.tui-table thead { + background-color: inherit; + color: rgb(255, 255, 0); + text-align: center; +} + +.tui-table tfoot { + background-color: inherit; + color: rgb(255, 255, 0); + text-align: center; +} + +.tui-table-grid { + border-collapse: collapse; + width: 100%; +} + +.tui-table-grid thead tr td, +.tui-table-grid tbody tr td, +.tui-table-grid thead tr th, +.tui-table-grid tbody tr th { + border: 2px solid black; + padding: 10px; + vertical-align: top; +} + +.tui-tabs { + background-color: rgb(0, 0, 168); + width: 100%; + padding: 0px 10px 0px 10px; +} + +.tui-tabs ul li { + display: inline-block; +} + +.tui-tabs ul li a { + display: block; + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +.tui-tab { + padding: 2px 10px 0px 10px; + color: rgb(168, 168, 168); + cursor: pointer; +} +.tui-tab.active { + background-color: rgb(168, 168, 168); + color: rgb(0, 0, 168); +} +.tui-tab.disabled { + text-decoration: line-through; +} + +.tui-tab-content { + display: none; +} + +.tui-textarea { + background-color: inherit; + border: none; + padding: 0px; + color: rgb(255, 255, 0); + outline: none; +} +.tui-textarea.disabled { + background-color: rgb(168, 168, 168); + color: black; +} + +.tui-window { + background-color: rgb(0, 0, 168); + padding: 1px; + display: inline-block; + position: relative; + box-shadow: 10px 10px black; + color: white; +} + +.tui-screen-640-480 { + width: 640px; + height: 480px; +} + +.tui-screen-800-600 { + width: 800px; + height: 600px; +} + +.tui-screen-1024-768 { + width: 1024px; + height: 768px; +} + +.tui-screen-640-480, +.tui-screen-800-600, +.tui-screen-1024-768 { + position: relative; + overflow: hidden; +} +.tui-screen-640-480.bordered, +.tui-screen-800-600.bordered, +.tui-screen-1024-768.bordered { + border: 2px solid black; +} +.tui-screen-640-480.centered, +.tui-screen-800-600.centered, +.tui-screen-1024-768.centered { + margin: auto; + margin-top: 20px; +} + +.tui-datetime { + padding: 1px 0px 1px 0px; + margin-right: 10px; + float: right; +} + +.tui-shortcut { + float: right; +} + +.tui-shadow, .tui-shadow-1 { + box-shadow: 10px 10px black !important; +} + +.tui-shadow-2 { + box-shadow: 15px 15px black; +} + +.tui-shadow-3 { + box-shadow: 20px 20px black; +} + +.tui-shadow-4 { + box-shadow: 25px 25px black; +} + +.tui-shadow-5 { + box-shadow: 30px 30px black; +} + +.tui-shadow-left, .tui-shadow-left-1 { + box-shadow: -10px 10px black !important; +} + +.tui-shadow-left-2 { + box-shadow: -15px 15px black !important; +} + +.tui-shadow-left-3 { + box-shadow: -20px 20px black !important; +} + +.tui-shadow-left-4 { + box-shadow: -25px 25px black !important; +} + +.tui-shadow-left-5 { + box-shadow: -30px 30px black !important; +} + +.tui-no-shadow { + box-shadow: none !important; +} + +.tui-bg-blue-white { + background-image: url("./images/bg-blue-white.png"); + background-repeat: repeat; +} + +.tui-bg-blue-black { + background-image: url("./images/bg-blue-black.png"); + background-repeat: repeat; +} + +.tui-bg-green-white { + background-image: url("./images/bg-green-white.png"); + background-repeat: repeat; +} + +.tui-bg-green-black { + background-image: url("./images/bg-green-black.png"); + background-repeat: repeat; +} + +.tui-bg-cyan-white { + background-image: url("./images/bg-cyan-white.png"); + background-repeat: repeat; +} + +.tui-bg-cyan-black { + background-image: url("./images/bg-cyan-black.png"); + background-repeat: repeat; +} + +.tui-bg-red-white { + background-image: url("./images/bg-red-white.png"); + background-repeat: repeat; +} + +.tui-bg-red-black { + background-image: url("./images/bg-red-black.png"); + background-repeat: repeat; +} + +.tui-bg-purple-white { + background-image: url("./images/bg-purple-white.png"); + background-repeat: repeat; +} + +.tui-bg-purple-black { + background-image: url("./images/bg-purple-black.png"); + background-repeat: repeat; +} + +.tui-bg-yellow-white { + background-image: url("./images/bg-yellow-white.png"); + background-repeat: repeat; +} + +.tui-bg-yellow-black { + background-image: url("./images/bg-yellow-black.png"); + background-repeat: repeat; +} + +.tui-bg-orange-white { + background-image: url("./images/bg-orange-white.png"); + background-repeat: repeat; +} + +.tui-bg-orange-black { + background-image: url("./images/bg-orange-black.png"); + background-repeat: repeat; +} + +.tui-border-solid { + border-style: solid !important; + border-width: 2px !important; +} + +.tui-border-dashed { + border-style: dashed !important; + border-width: 2px !important; +} + +.tui-border-dotted { + border-style: dotted !important; + border-width: 2px !important; +} + +.tui-border-double { + border-style: double !important; + border-width: 6px !important; +} + +/* Font (Options: 'Lucida Console' or 'DOS') */ +/* Characters */ +/* Theme */ +/* Responsive */ +/* Scrool */ +/* Grid */ +.container { + margin: 0 auto; + max-width: 1280px; + width: 90%; +} + +@media only screen and (min-width : 601px) { + .container { + width: 85%; + } +} +@media only screen and (min-width : 993px) { + .container { + width: 70%; + } +} +.col .row { + margin-left: -0.75rem; + margin-right: -0.75rem; +} + +.section { + padding-top: 1rem; + padding-bottom: 1rem; +} +.section.no-pad { + padding: 0; +} +.section.no-pad-bot { + padding-bottom: 0; +} +.section.no-pad-top { + padding-top: 0; +} + +.row { + margin-left: auto; + margin-right: auto; + margin-bottom: 20px; +} +.row:after { + content: ""; + display: table; + clear: both; +} +.row .col { + float: left; + box-sizing: border-box; + padding: 0 0.75rem; + min-height: 1px; +} +.row .col[class*=push-], .row .col[class*=pull-] { + position: relative; +} +.row .col.s1 { + width: 8.3333333333%; + margin-left: auto; + left: auto; + right: auto; +} +.row .col.s2 { + width: 16.6666666667%; + margin-left: auto; + left: auto; + right: auto; +} +.row .col.s3 { + width: 25%; + margin-left: auto; + left: auto; + right: auto; +} +.row .col.s4 { + width: 33.3333333333%; + margin-left: auto; + left: auto; + right: auto; +} +.row .col.s5 { + width: 41.6666666667%; + margin-left: auto; + left: auto; + right: auto; +} +.row .col.s6 { + width: 50%; + margin-left: auto; + left: auto; + right: auto; +} +.row .col.s7 { + width: 58.3333333333%; + margin-left: auto; + left: auto; + right: auto; +} +.row .col.s8 { + width: 66.6666666667%; + margin-left: auto; + left: auto; + right: auto; +} +.row .col.s9 { + width: 75%; + margin-left: auto; + left: auto; + right: auto; +} +.row .col.s10 { + width: 83.3333333333%; + margin-left: auto; + left: auto; + right: auto; +} +.row .col.s11 { + width: 91.6666666667%; + margin-left: auto; + left: auto; + right: auto; +} +.row .col.s12 { + width: 100%; + margin-left: auto; + left: auto; + right: auto; +} +.row .col.offset-s1 { + margin-left: 8.3333333333%; +} +.row .col.pull-s1 { + right: 8.3333333333%; +} +.row .col.push-s1 { + left: 8.3333333333%; +} +.row .col.offset-s2 { + margin-left: 16.6666666667%; +} +.row .col.pull-s2 { + right: 16.6666666667%; +} +.row .col.push-s2 { + left: 16.6666666667%; +} +.row .col.offset-s3 { + margin-left: 25%; +} +.row .col.pull-s3 { + right: 25%; +} +.row .col.push-s3 { + left: 25%; +} +.row .col.offset-s4 { + margin-left: 33.3333333333%; +} +.row .col.pull-s4 { + right: 33.3333333333%; +} +.row .col.push-s4 { + left: 33.3333333333%; +} +.row .col.offset-s5 { + margin-left: 41.6666666667%; +} +.row .col.pull-s5 { + right: 41.6666666667%; +} +.row .col.push-s5 { + left: 41.6666666667%; +} +.row .col.offset-s6 { + margin-left: 50%; +} +.row .col.pull-s6 { + right: 50%; +} +.row .col.push-s6 { + left: 50%; +} +.row .col.offset-s7 { + margin-left: 58.3333333333%; +} +.row .col.pull-s7 { + right: 58.3333333333%; +} +.row .col.push-s7 { + left: 58.3333333333%; +} +.row .col.offset-s8 { + margin-left: 66.6666666667%; +} +.row .col.pull-s8 { + right: 66.6666666667%; +} +.row .col.push-s8 { + left: 66.6666666667%; +} +.row .col.offset-s9 { + margin-left: 75%; +} +.row .col.pull-s9 { + right: 75%; +} +.row .col.push-s9 { + left: 75%; +} +.row .col.offset-s10 { + margin-left: 83.3333333333%; +} +.row .col.pull-s10 { + right: 83.3333333333%; +} +.row .col.push-s10 { + left: 83.3333333333%; +} +.row .col.offset-s11 { + margin-left: 91.6666666667%; +} +.row .col.pull-s11 { + right: 91.6666666667%; +} +.row .col.push-s11 { + left: 91.6666666667%; +} +.row .col.offset-s12 { + margin-left: 100%; +} +.row .col.pull-s12 { + right: 100%; +} +.row .col.push-s12 { + left: 100%; +} +@media only screen and (min-width : 601px) { + .row .col.m1 { + width: 8.3333333333%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.m2 { + width: 16.6666666667%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.m3 { + width: 25%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.m4 { + width: 33.3333333333%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.m5 { + width: 41.6666666667%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.m6 { + width: 50%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.m7 { + width: 58.3333333333%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.m8 { + width: 66.6666666667%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.m9 { + width: 75%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.m10 { + width: 83.3333333333%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.m11 { + width: 91.6666666667%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.m12 { + width: 100%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.offset-m1 { + margin-left: 8.3333333333%; + } + .row .col.pull-m1 { + right: 8.3333333333%; + } + .row .col.push-m1 { + left: 8.3333333333%; + } + .row .col.offset-m2 { + margin-left: 16.6666666667%; + } + .row .col.pull-m2 { + right: 16.6666666667%; + } + .row .col.push-m2 { + left: 16.6666666667%; + } + .row .col.offset-m3 { + margin-left: 25%; + } + .row .col.pull-m3 { + right: 25%; + } + .row .col.push-m3 { + left: 25%; + } + .row .col.offset-m4 { + margin-left: 33.3333333333%; + } + .row .col.pull-m4 { + right: 33.3333333333%; + } + .row .col.push-m4 { + left: 33.3333333333%; + } + .row .col.offset-m5 { + margin-left: 41.6666666667%; + } + .row .col.pull-m5 { + right: 41.6666666667%; + } + .row .col.push-m5 { + left: 41.6666666667%; + } + .row .col.offset-m6 { + margin-left: 50%; + } + .row .col.pull-m6 { + right: 50%; + } + .row .col.push-m6 { + left: 50%; + } + .row .col.offset-m7 { + margin-left: 58.3333333333%; + } + .row .col.pull-m7 { + right: 58.3333333333%; + } + .row .col.push-m7 { + left: 58.3333333333%; + } + .row .col.offset-m8 { + margin-left: 66.6666666667%; + } + .row .col.pull-m8 { + right: 66.6666666667%; + } + .row .col.push-m8 { + left: 66.6666666667%; + } + .row .col.offset-m9 { + margin-left: 75%; + } + .row .col.pull-m9 { + right: 75%; + } + .row .col.push-m9 { + left: 75%; + } + .row .col.offset-m10 { + margin-left: 83.3333333333%; + } + .row .col.pull-m10 { + right: 83.3333333333%; + } + .row .col.push-m10 { + left: 83.3333333333%; + } + .row .col.offset-m11 { + margin-left: 91.6666666667%; + } + .row .col.pull-m11 { + right: 91.6666666667%; + } + .row .col.push-m11 { + left: 91.6666666667%; + } + .row .col.offset-m12 { + margin-left: 100%; + } + .row .col.pull-m12 { + right: 100%; + } + .row .col.push-m12 { + left: 100%; + } +} +@media only screen and (min-width : 993px) { + .row .col.l1 { + width: 8.3333333333%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.l2 { + width: 16.6666666667%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.l3 { + width: 25%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.l4 { + width: 33.3333333333%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.l5 { + width: 41.6666666667%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.l6 { + width: 50%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.l7 { + width: 58.3333333333%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.l8 { + width: 66.6666666667%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.l9 { + width: 75%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.l10 { + width: 83.3333333333%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.l11 { + width: 91.6666666667%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.l12 { + width: 100%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.offset-l1 { + margin-left: 8.3333333333%; + } + .row .col.pull-l1 { + right: 8.3333333333%; + } + .row .col.push-l1 { + left: 8.3333333333%; + } + .row .col.offset-l2 { + margin-left: 16.6666666667%; + } + .row .col.pull-l2 { + right: 16.6666666667%; + } + .row .col.push-l2 { + left: 16.6666666667%; + } + .row .col.offset-l3 { + margin-left: 25%; + } + .row .col.pull-l3 { + right: 25%; + } + .row .col.push-l3 { + left: 25%; + } + .row .col.offset-l4 { + margin-left: 33.3333333333%; + } + .row .col.pull-l4 { + right: 33.3333333333%; + } + .row .col.push-l4 { + left: 33.3333333333%; + } + .row .col.offset-l5 { + margin-left: 41.6666666667%; + } + .row .col.pull-l5 { + right: 41.6666666667%; + } + .row .col.push-l5 { + left: 41.6666666667%; + } + .row .col.offset-l6 { + margin-left: 50%; + } + .row .col.pull-l6 { + right: 50%; + } + .row .col.push-l6 { + left: 50%; + } + .row .col.offset-l7 { + margin-left: 58.3333333333%; + } + .row .col.pull-l7 { + right: 58.3333333333%; + } + .row .col.push-l7 { + left: 58.3333333333%; + } + .row .col.offset-l8 { + margin-left: 66.6666666667%; + } + .row .col.pull-l8 { + right: 66.6666666667%; + } + .row .col.push-l8 { + left: 66.6666666667%; + } + .row .col.offset-l9 { + margin-left: 75%; + } + .row .col.pull-l9 { + right: 75%; + } + .row .col.push-l9 { + left: 75%; + } + .row .col.offset-l10 { + margin-left: 83.3333333333%; + } + .row .col.pull-l10 { + right: 83.3333333333%; + } + .row .col.push-l10 { + left: 83.3333333333%; + } + .row .col.offset-l11 { + margin-left: 91.6666666667%; + } + .row .col.pull-l11 { + right: 91.6666666667%; + } + .row .col.push-l11 { + left: 91.6666666667%; + } + .row .col.offset-l12 { + margin-left: 100%; + } + .row .col.pull-l12 { + right: 100%; + } + .row .col.push-l12 { + left: 100%; + } +} +@media only screen and (min-width : 1201px) { + .row .col.xl1 { + width: 8.3333333333%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.xl2 { + width: 16.6666666667%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.xl3 { + width: 25%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.xl4 { + width: 33.3333333333%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.xl5 { + width: 41.6666666667%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.xl6 { + width: 50%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.xl7 { + width: 58.3333333333%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.xl8 { + width: 66.6666666667%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.xl9 { + width: 75%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.xl10 { + width: 83.3333333333%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.xl11 { + width: 91.6666666667%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.xl12 { + width: 100%; + margin-left: auto; + left: auto; + right: auto; + } + .row .col.offset-xl1 { + margin-left: 8.3333333333%; + } + .row .col.pull-xl1 { + right: 8.3333333333%; + } + .row .col.push-xl1 { + left: 8.3333333333%; + } + .row .col.offset-xl2 { + margin-left: 16.6666666667%; + } + .row .col.pull-xl2 { + right: 16.6666666667%; + } + .row .col.push-xl2 { + left: 16.6666666667%; + } + .row .col.offset-xl3 { + margin-left: 25%; + } + .row .col.pull-xl3 { + right: 25%; + } + .row .col.push-xl3 { + left: 25%; + } + .row .col.offset-xl4 { + margin-left: 33.3333333333%; + } + .row .col.pull-xl4 { + right: 33.3333333333%; + } + .row .col.push-xl4 { + left: 33.3333333333%; + } + .row .col.offset-xl5 { + margin-left: 41.6666666667%; + } + .row .col.pull-xl5 { + right: 41.6666666667%; + } + .row .col.push-xl5 { + left: 41.6666666667%; + } + .row .col.offset-xl6 { + margin-left: 50%; + } + .row .col.pull-xl6 { + right: 50%; + } + .row .col.push-xl6 { + left: 50%; + } + .row .col.offset-xl7 { + margin-left: 58.3333333333%; + } + .row .col.pull-xl7 { + right: 58.3333333333%; + } + .row .col.push-xl7 { + left: 58.3333333333%; + } + .row .col.offset-xl8 { + margin-left: 66.6666666667%; + } + .row .col.pull-xl8 { + right: 66.6666666667%; + } + .row .col.push-xl8 { + left: 66.6666666667%; + } + .row .col.offset-xl9 { + margin-left: 75%; + } + .row .col.pull-xl9 { + right: 75%; + } + .row .col.push-xl9 { + left: 75%; + } + .row .col.offset-xl10 { + margin-left: 83.3333333333%; + } + .row .col.pull-xl10 { + right: 83.3333333333%; + } + .row .col.push-xl10 { + left: 83.3333333333%; + } + .row .col.offset-xl11 { + margin-left: 91.6666666667%; + } + .row .col.pull-xl11 { + right: 91.6666666667%; + } + .row .col.push-xl11 { + left: 91.6666666667%; + } + .row .col.offset-xl12 { + margin-left: 100%; + } + .row .col.pull-xl12 { + right: 100%; + } + .row .col.push-xl12 { + left: 100%; + } +} + +.tui-modal { + position: absolute; + left: 0px; + right: 0px; + top: 100px; + z-index: 101; + display: none; +} +.tui-modal.active { + display: block !important; +} + +.tui-overlap { + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + z-index: 100; + display: none; +} +.tui-overlap.active { + display: block !important; +} + +/* Chart container */ +.tui-chart-vertical { + position: relative; + background-color: black; +} + +.tui-chart-horizontal { + position: relative; + background-color: black; +} + +/* Chart display */ +.tui-chart-vertical .tui-chart-display { + display: flex; + position: absolute; + top: 0px; + left: 50px; + right: 0px; + bottom: 30px; + align-items: flex-end; + border-bottom: 2px solid white; + border-left: 2px solid white; +} +.tui-chart-vertical .tui-chart-display.no-x-axis { + bottom: 0px; +} +.tui-chart-vertical .tui-chart-display.no-y-axis { + left: 0px; +} + +.tui-chart-horizontal .tui-chart-display { + display: flex; + position: absolute; + flex-direction: column; + top: 0px; + left: 50px; + right: 0px; + bottom: 30px; + align-items: stretch; + border-bottom: 2px solid white; + border-left: 2px solid white; +} +.tui-chart-horizontal .tui-chart-display.no-x-axis { + bottom: 0px; +} +.tui-chart-horizontal .tui-chart-display.no-y-axis { + left: 0px; +} + +/* Chart X axis */ +.tui-chart-x-axis { + display: flex; + position: absolute; + height: 30px; + left: 50px; + right: 0px; + bottom: 0px; + line-height: 30px; +} + +/* Chart Y axis */ +.tui-chart-y-axis { + display: flex; + flex-direction: column; + position: absolute; + top: 0px; + left: 0px; + bottom: 30px; + width: 50px; +} + +/* Chart legends */ +.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend { + flex: 0 1 100%; + text-align: center; +} + +.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend { + flex: 1; + text-align: right; + padding-right: 2px; + display: flex; + align-items: flex-start; + justify-content: flex-end; +} + +.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend { + flex: 0 1 100%; + text-align: right; +} + +.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend { + flex: 1; + text-align: right; + padding-right: 2px; + display: flex; + align-items: center; + justify-content: flex-end; +} + +/* Chart value */ +.tui-chart-vertical .tui-chart-display .tui-chart-value { + flex: 0 1 100%; + text-align: center; + overflow: hidden; +} + +.tui-chart-horizontal .tui-chart-display .tui-chart-value { + flex: 1; + text-align: right; + display: flex; + align-items: center; + align-content: flex-start; + justify-content: flex-end; + overflow: hidden; +} \ No newline at end of file diff --git a/static/lib/tuicss/tuicss.js b/static/lib/tuicss/tuicss.js new file mode 100644 index 0000000..21c3b6d --- /dev/null +++ b/static/lib/tuicss/tuicss.js @@ -0,0 +1,256 @@ +/** + * Replacement for jQuery's $(document).ready() function. + * This is handy in making sure stuff fires after the DOM is ready to be touched. + * Stolen from:https://stackoverflow.com/a/53601942/344028 + * + * @param fn Callback. + */ +function domReady(fn) { + // If we're early to the party + document.addEventListener('DOMContentLoaded', fn); + + // If late; I mean on time. + if (document.readyState === 'interactive' || document.readyState === 'complete') { + fn(); + } +} + +/** + * TuiTabs controller + */ +function tabsController() { + // Get all the tab elements (typically li tags). + const tabs = document.getElementsByClassName('tui-tab'); + + if (!tabs.length) { + // No tabs found, return early and save a couple CPU cycles. + return; + } + + for (const tab of tabs) { + // Add click listeners to them. + tab.addEventListener('click', function (e) { + + // Check if the clicked tab is disabled + if(e.target.classList.contains("disabled")) { + return; + } + + // Remove the 'active' class from any and all tabs. + for (const otherTab of tabs) { + otherTab.classList.remove('active'); + } + + // Get the content element. + const tabContents = document.getElementsByClassName('tui-tab-content'); + + if (tabContents) { + for (const tabContent of tabContents) { + // Hide all tab contents. + tabContent.style.display = 'none'; + } + } else { + throw 'No tab content elements found.' + } + + // Get the id of the tab contents we want to show. + const tabContentId = e.target.getAttribute('data-tab-content'); + + if (tabContentId) { + const tabContent = document.getElementById(tabContentId); + if (tabContent) { + // Show the tab contents. + tabContent.style.display = 'block'; + } else { + throw 'No tab content element with id "' + tabContentId + '" found.'; + } + } + // We are not going to throw an error here, since we could make the tab do something else that a tab + // normally wouldn't do. + + // Set the clicked tab to have the 'active' class so we can use it in the next part. + e.target.classList.add('active'); + + }); + } + + // Grab the first tab with the active class. + const activeTab = document.querySelector('.tui-tab.active'); + if (activeTab) { + // Now click it 'click' it. + activeTab.click(); + } else { + // Nothing found, just click the first tab foud. + tabs[0].click() + } +} + +/** + * Date/time field controller + */ +function datetimeController() { + // Get date/time elements. + const clocks = document.getElementsByClassName('tui-datetime'); + + if (!clocks.length) { + // No date time elements found, return early and save a couple CPU cycles. + return; + } + + // Kick off our clock interval stuff. + datetimeInterval(); + + // Synchronize time and set interval to control the clocks + setTimeout(() => { + setInterval(datetimeInterval, 1000); + }, 1000 - new Date().getMilliseconds()); + + function datetimeInterval() { + for (const clock of clocks) { + if (clock === null) { + continue; + } + + // Get the format we want to display in the element. + let format = clock.getAttribute('data-format'); + + // parse out the date and time into constants. + const today = new Date(); + const month = (today.getMonth() + 1).toString().padStart(2, '0'); + const day = today.getDate().toString().padStart(2, '0'); + const dayOfWeek = (today.getDay() + 1).toString().padStart(2, '0'); + const year = today.getFullYear().toString(); + const hour = today.getHours().toString().padStart(2, '0'); + const hour12 = (parseInt(hour) + 24) % '12' || '12'; + const minute = today.getMinutes().toString().padStart(2, '0'); + const second = today.getSeconds().toString().padStart(2, '0'); + const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM'; + + // Replace based on the format. + format = format.replace('M', month); + format = format.replace('d', day); + format = format.replace('e', dayOfWeek); + format = format.replace('y', year); + format = format.replace('H', hour); + format = format.replace('h', hour12); + format = format.replace('m', minute); + format = format.replace('s', second); + format = format.replace('a', ampm); + + // Show it in the element. + clock.innerHTML = format; + } + } +} + +/** + * Sidenav Controller + * There should only side navigation element at the moment. + */ +function sidenavController() { + // Get the side navigation button (there should be only one, but if not, we are getting the first one). + const sideNavButton = document.querySelector('.tui-sidenav-button'); + + if (!sideNavButton) { + // No side navigation button found, return early and save a couple CPU cycles. + return; + } + + // Add the click event listener to the buttons. + sideNavButton.addEventListener('click', () => { + // Get the side navigation element (there should be only one, but if not, we are getting the first one). + const sideNav = document.querySelector('.tui-sidenav'); + + if (sideNav) { + if (sideNav.classList.contains('active')) { + sideNav.classList.remove('active'); + } else { + sideNav.classList.add('active'); + } + } else { + throw 'No sidenav element found.' + } + }); +} + +/** + * Modal controller + */ +function modalController() { + // Get the overlap (overlay) element (there should be only one, but if not, we are getting the first one). + const tuiOverlap = document.querySelector('.tui-overlap'); + + if (!tuiOverlap) { + // No overlap found element, return early and save a couple CPU cycles. + return; + } + + // Find modal buttons. + const modalButtons = document.getElementsByClassName('tui-modal-button'); + for (const modalButton of modalButtons) { + // Add the click event listener to the buttons. + modalButton.addEventListener('click', (e) => { + // Show the overlap. + tuiOverlap.classList.add('active'); + + // Get the display element for the modal. + const modalId = e.target.getAttribute('data-modal'); + + if (modalId) { + const modal = document.getElementById(modalId); + + if (modal) { + // Show it. + modal.classList.add('active'); + } else { + throw 'No modal element with id of "' + modalId + '" found.'; + } + } else { + throw 'Modal close button data-modal attribute is empty or not set.' + } + }); + } + + // Find the close modal buttons. + const modalCloseButtons = document.getElementsByClassName('tui-modal-close-button'); + + if (modalButtons.length > 0 && !modalCloseButtons.length) { + // A modal without a close button, is a bad modal. + throw 'No modal close buttons found.' + } + + for (const modalCloseButton of modalCloseButtons) { + // Add the click event listener to the buttons. + modalCloseButton.addEventListener('click', (e) => { + // Hide the the overlap. + tuiOverlap.classList.remove('active'); + + // Get the display element id for the modal. + const modalId = e.target.getAttribute('data-modal'); + + if (modalId) { + // Get the modal element. + const modal = document.getElementById(modalId); + + if (modal) { + // Hide it. + modal.classList.remove('active'); + } else { + throw 'No modal element with id of "' + modalId + '" found.'; + } + } else { + throw 'Modal close button data-modal attribute is empty or not set.' + } + }); + } +} + +/** + * Init: This is at the bottom to make sure it is fired correctly. + */ +domReady(function () { + tabsController(); + datetimeController(); + sidenavController(); + modalController(); +}); diff --git a/static/lib/tuicss/tuicss.min.css b/static/lib/tuicss/tuicss.min.css new file mode 100644 index 0000000..a99923f --- /dev/null +++ b/static/lib/tuicss/tuicss.min.css @@ -0,0 +1 @@ +@charset "UTF-8";@font-face{font-family:DOS;src:url("fonts/Perfect DOS VGA 437 Win.ttf")}html{font-family:"Lucida Console",monospace;font-size:18px;box-sizing:border-box}body{margin:0}*,:after,:before{font-family:inherit;font-size:inherit;box-sizing:inherit}ul{margin:0;padding:0;list-style-type:none}ul li{list-style-type:none}ul li a{display:block}a{color:inherit;text-decoration:none}span{margin:0}hr{border:none;border-bottom:2px solid #fff}input,select,textarea{width:200px}@media only screen and (max-width :600px){.hide-on-small-and-down,.hide-on-small-only{display:none!important}}@media only screen and (max-width :992px){.hide-on-med-and-down{display:none!important}}@media only screen and (min-width :601px){.hide-on-med-and-up{display:none!important}}@media only screen and (min-width:600px) and (max-width:992px){.hide-on-med-only{display:none!important}}@media only screen and (min-width :993px){.hide-on-large-only{display:none!important}}@media only screen and (min-width :1201px){.hide-on-extra-large-only{display:none!important}}@media only screen and (min-width :1201px){.show-on-extra-large{display:block!important}}@media only screen and (min-width :993px){.show-on-large{display:block!important}}@media only screen and (min-width:600px) and (max-width:992px){.show-on-medium{display:block!important}}@media only screen and (max-width :600px){.show-on-small{display:block!important}}@media only screen and (min-width :601px){.show-on-medium-and-up{display:block!important}}@media only screen and (max-width :992px){.show-on-medium-and-down{display:block!important}}.primary{background-color:#0000a8}.primary-text{color:#0000a8}.primary-border{border-color:#0000a8}.primary-hover:hover{background-color:#0000a8}.primary-text-hover:hover{color:#0000a8}.primary-border-hover:hover{border-color:#0000a8}.secondary{background-color:#a8a8a8}.secondary-text{color:#a8a8a8}.secondary-border{border-color:#a8a8a8}.secondary-hover:hover{background-color:#a8a8a8}.secondary-text-hover:hover{color:#a8a8a8}.secondary-border-hover:hover{border-color:#a8a8a8}.success{background-color:#00a800}.success-text{color:#00a800}.success-border{border-color:#00a800}.success-hover:hover{background-color:#00a800}.success-text-hover:hover{color:#00a800}.success-border-hover:hover{border-color:#00a800}.danger{background-color:#a80000}.danger-text{color:#a80000}.danger-border{border-color:#a80000}.danger-hover:hover{background-color:#a80000}.danger-text-hover:hover{color:#a80000}.danger-border-hover:hover{border-color:#a80000}.warning{background-color:#a8a800}.warning-text{color:#a8a800}.warning-border{border-color:#a8a800}.warning-hover:hover{background-color:#a8a800}.warning-text-hover:hover{color:#a8a800}.warning-border-hover:hover{border-color:#a8a800}.info{background-color:#00a8a8}.info-text{color:#00a8a8}.info-border{border-color:#00a8a8}.info-hover:hover{background-color:#00a8a8}.info-text-hover:hover{color:#00a8a8}.info-border-hover:hover{border-color:#00a8a8}.black-168{background-color:#000!important}.blue-168{background-color:#0000a8!important}.green-168{background-color:#00a800!important}.cyan-168{background-color:#00a8a8!important}.red-168{background-color:#a80000!important}.purple-168{background-color:#a800a8!important}.yellow-168{background-color:#a8a800!important}.white-168{background-color:#a8a8a8!important}.orange-168{background-color:#a85600!important}.black-168-text{color:#000!important}.blue-168-text{color:#0000a8!important}.green-168-text{color:#00a800!important}.cyan-168-text{color:#00a8a8!important}.red-168-text{color:#a80000!important}.purple-168-text{color:#a800a8!important}.yellow-168-text{color:#a8a800!important}.white-168-text{color:#a8a8a8!important}.orange-168-text{color:#a85600!important}.black-168-border{border-color:#000!important}.blue-168-border{border-color:#0000a8!important}.green-168-border{border-color:#00a800!important}.cyan-168-border{border-color:#00a8a8!important}.red-168-border{border-color:#a80000!important}.purple-168-border{border-color:#a800a8!important}.yellow-168-border{border-color:#a8a800!important}.white-168-border{border-color:#a8a8a8!important}.orange-168-border{border-color:#a85600!important}.black-168-hover:hover{background-color:#000!important}.blue-168-hover:hover{background-color:#0000a8!important}.green-168-hover:hover{background-color:#00a800!important}.cyan-168-hover:hover{background-color:#00a8a8!important}.red-168-hover:hover{background-color:#a80000!important}.purple-168-hover:hover{background-color:#a800a8!important}.yellow-168-hover:hover{background-color:#a8a800!important}.white-168-hover:hover{background-color:#a8a8a8!important}.orange-168-hover:hover{background-color:#a85600!important}.black-168-text-hover:hover{color:#000!important}.blue-168-text-hover:hover{color:#0000a8!important}.green-168-text-hover:hover{color:#00a800!important}.cyan-168-text-hover:hover{color:#00a8a8!important}.red-168-text-hover:hover{color:#a80000!important}.purple-168-text-hover:hover{color:#a800a8!important}.yellow-168-text-hover:hover{color:#a8a800!important}.white-168-text-hover:hover{color:#a8a8a8!important}.orange-168-text-hover:hover{color:#a85600!important}.black-168-border-hover:hover{border-color:#000!important}.blue-168-border-hover:hover{border-color:#0000a8!important}.green-168-border-hover:hover{border-color:#00a800!important}.cyan-168-border-hover:hover{border-color:#00a8a8!important}.red-168-border-hover:hover{border-color:#a80000!important}.purple-168-border-hover:hover{border-color:#a800a8!important}.yellow-168-border-hover:hover{border-color:#a8a800!important}.white-168-border-hover:hover{border-color:#a8a8a8!important}.orange-168-border-hover:hover{border-color:#a85600!important}.black-255{background-color:#000!important}.blue-255{background-color:#00f!important}.green-255{background-color:#0f0!important}.cyan-255{background-color:#0ff!important}.red-255{background-color:red!important}.purple-255{background-color:#f0f!important}.yellow-255{background-color:#ff0!important}.white-255{background-color:#fff!important}.orange-255{background-color:#ffa800!important}.black-255-text{color:#000!important}.blue-255-text{color:#00f!important}.green-255-text{color:#0f0!important}.cyan-255-text{color:#0ff!important}.red-255-text{color:red!important}.purple-255-text{color:#f0f!important}.yellow-255-text{color:#ff0!important}.white-255-text{color:#fff!important}.orange-255-text{color:#ffa800!important}.black-255-border{border-color:#000!important}.blue-255-border{border-color:#00f!important}.green-255-border{border-color:#0f0!important}.cyan-255-border{border-color:#0ff!important}.red-255-border{border-color:red!important}.purple-255-border{border-color:#f0f!important}.yellow-255-border{border-color:#ff0!important}.white-255-border{border-color:#fff!important}.orange-255-border{border-color:#ffa800!important}.black-255-hover:hover{background-color:#000!important}.blue-255-hover:hover{background-color:#00f!important}.green-255-hover:hover{background-color:#0f0!important}.cyan-255-hover:hover{background-color:#0ff!important}.red-255-hover:hover{background-color:red!important}.purple-255-hover:hover{background-color:#f0f!important}.yellow-255-hover:hover{background-color:#ff0!important}.white-255-hover:hover{background-color:#fff!important}.orange-255-hover:hover{background-color:#ffa800!important}.black-255-text-hover:hover{color:#000!important}.blue-255-text-hover:hover{color:#00f!important}.green-255-text-hover:hover{color:#0f0!important}.cyan-255-text-hover:hover{color:#0ff!important}.red-255-text-hover:hover{color:red!important}.purple-255-text-hover:hover{color:#f0f!important}.yellow-255-text-hover:hover{color:#ff0!important}.white-255-text-hover:hover{color:#fff!important}.orange-255-text-hover:hover{color:#ffa800!important}.black-255-border-hover:hover{border-color:#000!important}.blue-255-border-hover:hover{border-color:#00f!important}.green-255-border-hover:hover{border-color:#0f0!important}.cyan-255-border-hover:hover{border-color:#0ff!important}.red-255-border-hover:hover{border-color:red!important}.purple-255-border-hover:hover{border-color:#f0f!important}.yellow-255-border-hover:hover{border-color:#ff0!important}.white-255-border-hover:hover{border-color:#fff!important}.orange-255-border-hover:hover{border-color:#ffa800!important}.black{background-color:#000!important}.black-text{color:#000!important}.black-border{border-color:#000!important}.black-hover:hover{background-color:#000!important}.black-text-hover:hover{color:#000!important}.black-border-hover:hover{border-color:#000!important}.white{background-color:#fff!important}.white-text{color:#fff!important}.white-border{border-color:#fff!important}.white-hover:hover{background-color:#fff!important}.white-text-hover:hover{color:#fff!important}.white-border-hover:hover{border-color:#fff!important}.left{float:left!important}.right{float:right!important}.center{text-align:center}.left-align{text-align:left}.right-align{text-align:right}.center-align{text-align:center}.full-width{width:100%!important}.full-height{height:100%!important}.inline{display:inline!important}.inline-block{display:inline-block!important}.block{display:block!important}.valign-top{vertical-align:top!important}.valign-middle{vertical-align:middle!important}.valign-bottom{vertical-align:bottom!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.static{position:static!important}.no-shadow{box-shadow:none!important}.no-padding{padding:0!important}.no-border{border:none!important}.content{padding:12px}.disable-select{user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.cursor-pointer{cursor:pointer!important}.cursor-default{cursor:default!important}.disabled{cursor:not-allowed!important}.tui-button{display:inline-block;outline:0;padding:1px 10px;background-color:#00a800;color:#000;border:none;cursor:pointer;text-align:center;box-shadow:10px 10px #000;border-radius:0;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-button.disabled{text-decoration:line-through}.tui-button:active{background-color:#00a8a8!important;color:#000!important;box-shadow:none!important}.tui-button:focus{color:#0ff!important}input[type=button]{width:initial}.tui-checkbox{display:block;position:relative;cursor:pointer;color:#fff;padding-left:30px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-checkbox.disabled{color:#a8a8a8}.tui-checkbox input{position:absolute;opacity:0;cursor:pointer;top:0;left:0;pointer-events:none}.tui-checkbox span{position:absolute;width:10px;height:10px;cursor:pointer;top:0;left:0}.tui-checkbox input:checked~span::after{content:"[√]";color:#0ff}.tui-checkbox input:not(checked)~span::after{content:"[ ]"}.tui-divider{border-bottom:2px solid #fff;display:block}.tui-black-divider{border-bottom:2px solid #000;display:block}.tui-dropdown{position:relative;display:inline-block;cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-dropdown-content{display:none;position:absolute;background-color:#a8a8a8;min-width:200px;padding:6px;z-index:9}.tui-dropdown-content ul{border:2px #000 solid}.tui-dropdown-content ul li{display:block!important;margin:6px}.tui-dropdown-content ul li a:hover{background-color:#00a800}.tui-dropdown:hover>.tui-dropdown-content:first-of-type{display:block}.tui-fieldset{border:6px #fff double;padding:12px;background-color:inherit;margin-bottom:6px}.tui-fieldset.no-legend{margin-top:6px}.tui-input-fieldset{border-top:6px #fff double;border-bottom:6px #fff double;border-left:2px #fff solid;border-right:2px #fff solid;padding:5px;background-color:inherit}.tui-input-fieldset legend{color:#fff}.tui-input-fieldset:hover{border-color:#ff0}.tui-input-fieldset:hover legend{color:#ff0}.tui-fieldset-button{position:absolute;top:0;right:16px;color:#fff;background-color:inherit;z-index:2;border:none;cursor:pointer;outline:0;padding:2px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-fieldset-button.left{right:initial;left:16px!important}.tui-fieldset-button.bottom{bottom:0;top:initial}.tui-fieldset-text{position:absolute;bottom:0;left:16px;color:#fff;background-color:inherit;z-index:2;padding:2px}.tui-fieldset-text.right{left:initial;right:16px}.tui-fieldset-text.top{top:0;bottom:initial}.tui-fieldset-button::before{content:"["}.tui-fieldset-button::after{content:"]"}.tui-fieldset-button:active{color:#0ff!important}.tui-input{background-color:#000;color:#fff;outline:0;border:none;border-radius:0}.tui-input.disabled{background-color:#a8a8a8;color:#000}.tui-input:focus{background-color:#ff0!important;color:#000!important}.tui-nav{width:100%;background-color:#a8a8a8;padding:0 2px;z-index:9;display:block;position:fixed}.tui-nav ul li{display:inline-block;margin-left:10px;padding:1px 3px}.tui-nav ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-nav ul li:hover{background-color:#00a800}.tui-panel{background-color:#0000a8;display:inline-block;color:#fff;box-shadow:10px 10px #000}.tui-panel-content{padding:12px}.tui-panel-header{padding-top:2px;display:block;background:#fff;text-align:center}.tui-progress-bar{display:block;position:relative;height:20px;width:200px;background-color:#00a8a8;overflow:hidden}.tui-progress{position:absolute;left:0;background-color:#0ff;height:100%;display:inline-block}.tui-progress-bar .tui-indeterminate{position:absolute;left:0;background-color:#0ff;height:20px;width:20px;display:inline-block;animation:indeterminate 1s backwards;animation-iteration-count:infinite;animation-timing-function:linear}.tui-progress-label{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);z-index:1}@keyframes indeterminate{from{margin-left:-10%}to{margin-left:100%}}.tui-radio{display:block;position:relative;cursor:pointer;color:#fff;padding-left:30px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-radio.disabled{color:#a8a8a8}.tui-radio input{position:absolute;opacity:0;cursor:pointer;top:0;left:0;pointer-events:none}.tui-radio span{position:absolute;width:10px;height:10px;cursor:pointer;top:0;left:0}.tui-radio input:checked~span:after{content:"(•)";color:#0ff!important}.tui-radio input:not(checked)~span:after{content:"( )"}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background-image:url(images/scroll-cyan.png);background-repeat:repeat}::-webkit-scrollbar-thumb{background-color:#00a8a8}::-webkit-scrollbar-thumb:hover{background-color:#00a8a8}.tui-scroll-blue ::-webkit-scrollbar-track{background-image:url(images/scroll-blue.png)}.tui-scroll-blue ::-webkit-scrollbar-thumb{background-color:#0000a8}.tui-scroll-blue ::-webkit-scrollbar-thumb:hover{background-color:#0000a8}.tui-scroll-green ::-webkit-scrollbar-track{background-image:url(images/scroll-green.png)}.tui-scroll-green ::-webkit-scrollbar-thumb{background-color:#00a800}.tui-scroll-green ::-webkit-scrollbar-thumb:hover{background-color:#00a800}.tui-scroll-cyan ::-webkit-scrollbar-track{background-image:url(images/scroll-cyan.png)}.tui-scroll-cyan ::-webkit-scrollbar-thumb{background-color:#00a8a8}.tui-scroll-cyan ::-webkit-scrollbar-thumb:hover{background-color:#00a8a8}.tui-scroll-red ::-webkit-scrollbar-track{background-image:url(images/scroll-red.png)}.tui-scroll-red ::-webkit-scrollbar-thumb{background-color:#a80000}.tui-scroll-red ::-webkit-scrollbar-thumb:hover{background-color:#a80000}.tui-scroll-purple ::-webkit-scrollbar-track{background-image:url(images/scroll-purple.png)}.tui-scroll-purple ::-webkit-scrollbar-thumb{background-color:#a800a8}.tui-scroll-purple ::-webkit-scrollbar-thumb:hover{background-color:#a800a8}.tui-scroll-yellow ::-webkit-scrollbar-track{background-image:url(images/scroll-yellow.png)}.tui-scroll-yellow ::-webkit-scrollbar-thumb{background-color:#a8a800}.tui-scroll-yellow ::-webkit-scrollbar-thumb:hover{background-color:#a8a800}.tui-scroll-white ::-webkit-scrollbar-track{background-image:url(images/scroll-white.png)}.tui-scroll-white ::-webkit-scrollbar-thumb{background-color:#a8a8a8}.tui-scroll-white ::-webkit-scrollbar-thumb:hover{background-color:#a8a8a8}.tui-sidenav{position:fixed;top:0;left:0;background-color:#00a8a8;min-width:200px;box-shadow:10px 10px #000!important;padding:6px;z-index:10;height:100%;z-index:8;display:none}.tui-sidenav.right{left:initial;right:0}.tui-sidenav.active{display:block!important}.tui-sidenav ul{margin-top:20px;border:2px #000 solid}.tui-sidenav ul li{display:block;margin:6px}.tui-sidenav ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-sidenav ul li:hover{background-color:#ff0}.tui-sidenav-button{cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-statusbar{width:100%;background-color:#a8a8a8;padding:0 1px;left:0;bottom:0;z-index:9;position:fixed}.tui-statusbar ul li{display:inline-block;margin-left:10px;padding:2px 3px}.tui-statusbar ul li:active{background-color:#0000a8;color:#fff}.tui-statusbar ul li a{user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-statusbar-divider{border-right:2px #000 solid;display:inline;margin:0 3px}.tui-table{border:2px solid #a8a8a8;padding:5px;border-collapse:collapse}.tui-table.hovered-blue tbody tr:hover{background-color:#00f!important;color:#000}.tui-table.hovered-green tbody tr:hover{background-color:#0f0!important;color:#000}.tui-table.hovered-cyan tbody tr:hover{background-color:#0ff!important;color:#000}.tui-table.hovered-red tbody tr:hover{background-color:red!important;color:#fff}.tui-table.hovered-purple tbody tr:hover{background-color:#f0f!important;color:#fff}.tui-table.hovered-yellow tbody tr:hover{background-color:#ff0!important;color:#000}.tui-table.hovered-white tbody tr:hover{background-color:#fff!important;color:#000}.tui-table.hovered-orange tbody tr:hover{background-color:#ffa800!important;color:#000}.tui-table.hovered tbody tr:hover{background-color:#0ff!important;color:#000}.tui-table.striped-blue tbody tr:nth-child(even){background-color:#0000a8}.tui-table.striped-green tbody tr:nth-child(even){background-color:#00a800}.tui-table.striped-cyan tbody tr:nth-child(even){background-color:#00a8a8}.tui-table.striped-red tbody tr:nth-child(even){background-color:#a80000}.tui-table.striped-purple tbody tr:nth-child(even){background-color:#a800a8}.tui-table.striped-yellow tbody tr:nth-child(even){background-color:#a8a800}.tui-table.striped-white tbody tr:nth-child(even){background-color:#a8a8a8;color:#000}.tui-table.striped-orange tbody tr:nth-child(even){background-color:#a85600}.tui-table tbody{background-color:inherit;color:#fff}.tui-table tbody tr td{border-right:2px solid #a8a8a8;padding:0 2px}.tui-table thead{background-color:inherit;color:#ff0;text-align:center}.tui-table tfoot{background-color:inherit;color:#ff0;text-align:center}.tui-table-grid{border-collapse:collapse;width:100%}.tui-table-grid tbody tr td,.tui-table-grid tbody tr th,.tui-table-grid thead tr td,.tui-table-grid thead tr th{border:2px solid #000;padding:10px;vertical-align:top}.tui-tabs{background-color:#0000a8;width:100%;padding:0 10px 0 10px}.tui-tabs ul li{display:inline-block}.tui-tabs ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-tab{padding:2px 10px 0 10px;color:#a8a8a8;cursor:pointer}.tui-tab.active{background-color:#a8a8a8;color:#0000a8}.tui-tab.disabled{text-decoration:line-through}.tui-tab-content{display:none}.tui-textarea{background-color:inherit;border:none;padding:0;color:#ff0;outline:0}.tui-textarea.disabled{background-color:#a8a8a8;color:#000}.tui-window{background-color:#0000a8;padding:1px;display:inline-block;position:relative;box-shadow:10px 10px #000;color:#fff}.tui-screen-640-480{width:640px;height:480px}.tui-screen-800-600{width:800px;height:600px}.tui-screen-1024-768{width:1024px;height:768px}.tui-screen-1024-768,.tui-screen-640-480,.tui-screen-800-600{position:relative;overflow:hidden}.tui-screen-1024-768.bordered,.tui-screen-640-480.bordered,.tui-screen-800-600.bordered{border:2px solid #000}.tui-screen-1024-768.centered,.tui-screen-640-480.centered,.tui-screen-800-600.centered{margin:auto;margin-top:20px}.tui-datetime{padding:1px 0 1px 0;margin-right:10px;float:right}.tui-shortcut{float:right}.tui-shadow,.tui-shadow-1{box-shadow:10px 10px #000!important}.tui-shadow-2{box-shadow:15px 15px #000}.tui-shadow-3{box-shadow:20px 20px #000}.tui-shadow-4{box-shadow:25px 25px #000}.tui-shadow-5{box-shadow:30px 30px #000}.tui-shadow-left,.tui-shadow-left-1{box-shadow:-10px 10px #000!important}.tui-shadow-left-2{box-shadow:-15px 15px #000!important}.tui-shadow-left-3{box-shadow:-20px 20px #000!important}.tui-shadow-left-4{box-shadow:-25px 25px #000!important}.tui-shadow-left-5{box-shadow:-30px 30px #000!important}.tui-no-shadow{box-shadow:none!important}.tui-bg-blue-white{background-image:url(images/bg-blue-white.png);background-repeat:repeat}.tui-bg-blue-black{background-image:url(images/bg-blue-black.png);background-repeat:repeat}.tui-bg-green-white{background-image:url(images/bg-green-white.png);background-repeat:repeat}.tui-bg-green-black{background-image:url(images/bg-green-black.png);background-repeat:repeat}.tui-bg-cyan-white{background-image:url(images/bg-cyan-white.png);background-repeat:repeat}.tui-bg-cyan-black{background-image:url(images/bg-cyan-black.png);background-repeat:repeat}.tui-bg-red-white{background-image:url(images/bg-red-white.png);background-repeat:repeat}.tui-bg-red-black{background-image:url(images/bg-red-black.png);background-repeat:repeat}.tui-bg-purple-white{background-image:url(images/bg-purple-white.png);background-repeat:repeat}.tui-bg-purple-black{background-image:url(images/bg-purple-black.png);background-repeat:repeat}.tui-bg-yellow-white{background-image:url(images/bg-yellow-white.png);background-repeat:repeat}.tui-bg-yellow-black{background-image:url(images/bg-yellow-black.png);background-repeat:repeat}.tui-bg-orange-white{background-image:url(images/bg-orange-white.png);background-repeat:repeat}.tui-bg-orange-black{background-image:url(images/bg-orange-black.png);background-repeat:repeat}.tui-border-solid{border-style:solid!important;border-width:2px!important}.tui-border-dashed{border-style:dashed!important;border-width:2px!important}.tui-border-dotted{border-style:dotted!important;border-width:2px!important}.tui-border-double{border-style:double!important;border-width:6px!important}.container{margin:0 auto;max-width:1280px;width:90%}@media only screen and (min-width :601px){.container{width:85%}}@media only screen and (min-width :993px){.container{width:70%}}.col .row{margin-left:-.75rem;margin-right:-.75rem}.section{padding-top:1rem;padding-bottom:1rem}.section.no-pad{padding:0}.section.no-pad-bot{padding-bottom:0}.section.no-pad-top{padding-top:0}.row{margin-left:auto;margin-right:auto;margin-bottom:20px}.row:after{content:"";display:table;clear:both}.row .col{float:left;box-sizing:border-box;padding:0 .75rem;min-height:1px}.row .col[class*=pull-],.row .col[class*=push-]{position:relative}.row .col.s1{width:8.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.s2{width:16.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.s3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.s4{width:33.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.s5{width:41.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.s6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.s7{width:58.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.s8{width:66.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.s9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.s10{width:83.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.s11{width:91.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.s12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-s1{margin-left:8.3333333333%}.row .col.pull-s1{right:8.3333333333%}.row .col.push-s1{left:8.3333333333%}.row .col.offset-s2{margin-left:16.6666666667%}.row .col.pull-s2{right:16.6666666667%}.row .col.push-s2{left:16.6666666667%}.row .col.offset-s3{margin-left:25%}.row .col.pull-s3{right:25%}.row .col.push-s3{left:25%}.row .col.offset-s4{margin-left:33.3333333333%}.row .col.pull-s4{right:33.3333333333%}.row .col.push-s4{left:33.3333333333%}.row .col.offset-s5{margin-left:41.6666666667%}.row .col.pull-s5{right:41.6666666667%}.row .col.push-s5{left:41.6666666667%}.row .col.offset-s6{margin-left:50%}.row .col.pull-s6{right:50%}.row .col.push-s6{left:50%}.row .col.offset-s7{margin-left:58.3333333333%}.row .col.pull-s7{right:58.3333333333%}.row .col.push-s7{left:58.3333333333%}.row .col.offset-s8{margin-left:66.6666666667%}.row .col.pull-s8{right:66.6666666667%}.row .col.push-s8{left:66.6666666667%}.row .col.offset-s9{margin-left:75%}.row .col.pull-s9{right:75%}.row .col.push-s9{left:75%}.row .col.offset-s10{margin-left:83.3333333333%}.row .col.pull-s10{right:83.3333333333%}.row .col.push-s10{left:83.3333333333%}.row .col.offset-s11{margin-left:91.6666666667%}.row .col.pull-s11{right:91.6666666667%}.row .col.push-s11{left:91.6666666667%}.row .col.offset-s12{margin-left:100%}.row .col.pull-s12{right:100%}.row .col.push-s12{left:100%}@media only screen and (min-width :601px){.row .col.m1{width:8.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.m2{width:16.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.m3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.m4{width:33.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.m5{width:41.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.m6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.m7{width:58.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.m8{width:66.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.m9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.m10{width:83.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.m11{width:91.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.m12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-m1{margin-left:8.3333333333%}.row .col.pull-m1{right:8.3333333333%}.row .col.push-m1{left:8.3333333333%}.row .col.offset-m2{margin-left:16.6666666667%}.row .col.pull-m2{right:16.6666666667%}.row .col.push-m2{left:16.6666666667%}.row .col.offset-m3{margin-left:25%}.row .col.pull-m3{right:25%}.row .col.push-m3{left:25%}.row .col.offset-m4{margin-left:33.3333333333%}.row .col.pull-m4{right:33.3333333333%}.row .col.push-m4{left:33.3333333333%}.row .col.offset-m5{margin-left:41.6666666667%}.row .col.pull-m5{right:41.6666666667%}.row .col.push-m5{left:41.6666666667%}.row .col.offset-m6{margin-left:50%}.row .col.pull-m6{right:50%}.row .col.push-m6{left:50%}.row .col.offset-m7{margin-left:58.3333333333%}.row .col.pull-m7{right:58.3333333333%}.row .col.push-m7{left:58.3333333333%}.row .col.offset-m8{margin-left:66.6666666667%}.row .col.pull-m8{right:66.6666666667%}.row .col.push-m8{left:66.6666666667%}.row .col.offset-m9{margin-left:75%}.row .col.pull-m9{right:75%}.row .col.push-m9{left:75%}.row .col.offset-m10{margin-left:83.3333333333%}.row .col.pull-m10{right:83.3333333333%}.row .col.push-m10{left:83.3333333333%}.row .col.offset-m11{margin-left:91.6666666667%}.row .col.pull-m11{right:91.6666666667%}.row .col.push-m11{left:91.6666666667%}.row .col.offset-m12{margin-left:100%}.row .col.pull-m12{right:100%}.row .col.push-m12{left:100%}}@media only screen and (min-width :993px){.row .col.l1{width:8.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.l2{width:16.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.l3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.l4{width:33.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.l5{width:41.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.l6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.l7{width:58.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.l8{width:66.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.l9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.l10{width:83.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.l11{width:91.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.l12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-l1{margin-left:8.3333333333%}.row .col.pull-l1{right:8.3333333333%}.row .col.push-l1{left:8.3333333333%}.row .col.offset-l2{margin-left:16.6666666667%}.row .col.pull-l2{right:16.6666666667%}.row .col.push-l2{left:16.6666666667%}.row .col.offset-l3{margin-left:25%}.row .col.pull-l3{right:25%}.row .col.push-l3{left:25%}.row .col.offset-l4{margin-left:33.3333333333%}.row .col.pull-l4{right:33.3333333333%}.row .col.push-l4{left:33.3333333333%}.row .col.offset-l5{margin-left:41.6666666667%}.row .col.pull-l5{right:41.6666666667%}.row .col.push-l5{left:41.6666666667%}.row .col.offset-l6{margin-left:50%}.row .col.pull-l6{right:50%}.row .col.push-l6{left:50%}.row .col.offset-l7{margin-left:58.3333333333%}.row .col.pull-l7{right:58.3333333333%}.row .col.push-l7{left:58.3333333333%}.row .col.offset-l8{margin-left:66.6666666667%}.row .col.pull-l8{right:66.6666666667%}.row .col.push-l8{left:66.6666666667%}.row .col.offset-l9{margin-left:75%}.row .col.pull-l9{right:75%}.row .col.push-l9{left:75%}.row .col.offset-l10{margin-left:83.3333333333%}.row .col.pull-l10{right:83.3333333333%}.row .col.push-l10{left:83.3333333333%}.row .col.offset-l11{margin-left:91.6666666667%}.row .col.pull-l11{right:91.6666666667%}.row .col.push-l11{left:91.6666666667%}.row .col.offset-l12{margin-left:100%}.row .col.pull-l12{right:100%}.row .col.push-l12{left:100%}}@media only screen and (min-width :1201px){.row .col.xl1{width:8.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.xl2{width:16.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.xl3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.xl4{width:33.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.xl5{width:41.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.xl6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.xl7{width:58.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.xl8{width:66.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.xl9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.xl10{width:83.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.xl11{width:91.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.xl12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-xl1{margin-left:8.3333333333%}.row .col.pull-xl1{right:8.3333333333%}.row .col.push-xl1{left:8.3333333333%}.row .col.offset-xl2{margin-left:16.6666666667%}.row .col.pull-xl2{right:16.6666666667%}.row .col.push-xl2{left:16.6666666667%}.row .col.offset-xl3{margin-left:25%}.row .col.pull-xl3{right:25%}.row .col.push-xl3{left:25%}.row .col.offset-xl4{margin-left:33.3333333333%}.row .col.pull-xl4{right:33.3333333333%}.row .col.push-xl4{left:33.3333333333%}.row .col.offset-xl5{margin-left:41.6666666667%}.row .col.pull-xl5{right:41.6666666667%}.row .col.push-xl5{left:41.6666666667%}.row .col.offset-xl6{margin-left:50%}.row .col.pull-xl6{right:50%}.row .col.push-xl6{left:50%}.row .col.offset-xl7{margin-left:58.3333333333%}.row .col.pull-xl7{right:58.3333333333%}.row .col.push-xl7{left:58.3333333333%}.row .col.offset-xl8{margin-left:66.6666666667%}.row .col.pull-xl8{right:66.6666666667%}.row .col.push-xl8{left:66.6666666667%}.row .col.offset-xl9{margin-left:75%}.row .col.pull-xl9{right:75%}.row .col.push-xl9{left:75%}.row .col.offset-xl10{margin-left:83.3333333333%}.row .col.pull-xl10{right:83.3333333333%}.row .col.push-xl10{left:83.3333333333%}.row .col.offset-xl11{margin-left:91.6666666667%}.row .col.pull-xl11{right:91.6666666667%}.row .col.push-xl11{left:91.6666666667%}.row .col.offset-xl12{margin-left:100%}.row .col.pull-xl12{right:100%}.row .col.push-xl12{left:100%}}.tui-modal{position:absolute;left:0;right:0;top:100px;z-index:101;display:none}.tui-modal.active{display:block!important}.tui-overlap{position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;display:none}.tui-overlap.active{display:block!important}.tui-chart-vertical{position:relative;background-color:#000}.tui-chart-horizontal{position:relative;background-color:#000}.tui-chart-vertical .tui-chart-display{display:flex;position:absolute;top:0;left:50px;right:0;bottom:30px;align-items:flex-end;border-bottom:2px solid #fff;border-left:2px solid #fff}.tui-chart-vertical .tui-chart-display.no-x-axis{bottom:0}.tui-chart-vertical .tui-chart-display.no-y-axis{left:0}.tui-chart-horizontal .tui-chart-display{display:flex;position:absolute;flex-direction:column;top:0;left:50px;right:0;bottom:30px;align-items:stretch;border-bottom:2px solid #fff;border-left:2px solid #fff}.tui-chart-horizontal .tui-chart-display.no-x-axis{bottom:0}.tui-chart-horizontal .tui-chart-display.no-y-axis{left:0}.tui-chart-x-axis{display:flex;position:absolute;height:30px;left:50px;right:0;bottom:0;line-height:30px}.tui-chart-y-axis{display:flex;flex-direction:column;position:absolute;top:0;left:0;bottom:30px;width:50px}.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend{flex:0 1 100%;text-align:center}.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend{flex:1;text-align:right;padding-right:2px;display:flex;align-items:flex-start;justify-content:flex-end}.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend{flex:0 1 100%;text-align:right}.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend{flex:1;text-align:right;padding-right:2px;display:flex;align-items:center;justify-content:flex-end}.tui-chart-vertical .tui-chart-display .tui-chart-value{flex:0 1 100%;text-align:center;overflow:hidden}.tui-chart-horizontal .tui-chart-display .tui-chart-value{flex:1;text-align:right;display:flex;align-items:center;align-content:flex-start;justify-content:flex-end;overflow:hidden} \ No newline at end of file diff --git a/static/lib/tuicss/tuicss.min.js b/static/lib/tuicss/tuicss.min.js new file mode 100644 index 0000000..84c6325 --- /dev/null +++ b/static/lib/tuicss/tuicss.min.js @@ -0,0 +1 @@ +function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){if(e.target.classList.contains("disabled"))return;for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){if(null===e)continue;let t=e.getAttribute("data-format");const o=new Date,n=(o.getMonth()+1).toString().padStart(2,"0"),a=o.getDate().toString().padStart(2,"0"),c=(o.getDay()+1).toString().padStart(2,"0"),s=o.getFullYear().toString(),i=o.getHours().toString().padStart(2,"0"),l=(parseInt(i)+24)%"12"||"12",r=o.getMinutes().toString().padStart(2,"0"),d=o.getSeconds().toString().padStart(2,"0"),u=parseInt(i)>=12?"PM":"AM";t=(t=(t=(t=(t=(t=(t=(t=(t=t.replace("M",n)).replace("d",a)).replace("e",c)).replace("y",s)).replace("H",i)).replace("h",l)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=t}}t.length&&(e(),setTimeout(()=>{setInterval(e,1e3)},1e3-(new Date).getMilliseconds()))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()}); \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 63e0809..53d2ed0 100755 --- a/templates/index.html +++ b/templates/index.html @@ -6,9 +6,10 @@ Luxtools · Nim + HTMX demo - + +
diff --git a/tests/test_rendering.nim b/tests/test_rendering.nim index 93bf94a..674ea80 100755 --- a/tests/test_rendering.nim +++ b/tests/test_rendering.nim @@ -10,11 +10,15 @@ suite "rendering helpers": check html.contains("id=\"counter\"") check html.contains("3") - test "index template uses vendored htmx build": - check indexTemplate.contains("/lib/htmx.2.0.7.min.js") - check indexTemplate.contains("") + test "index template uses embedded htmx build": + check indexTemplate.contains("/static/lib/htmx.2.0.7.min.js") + check indexTemplate.contains("") + check indexTemplate.contains("/static/lib/tuicss/tuicss.min.css") + check indexTemplate.contains("href=\"/static/lib/tuicss/tuicss.min.css\"") + check indexTemplate.contains("") check not indexTemplate.contains("unpkg.com/htmx") + check not indexTemplate.contains("unpkg.com/tui-css") - test "vendored htmx asset lives in assets directory": - let assetPath = joinPath(getAppDir(), "..", "assets", "lib", "htmx.2.0.7.min.js") + test "demo asset lives in www directory": + let assetPath = joinPath(getAppDir(), "..", "www", "demo.txt") check fileExists(assetPath) diff --git a/www/demo.txt b/www/demo.txt new file mode 100644 index 0000000..e8a20b7 --- /dev/null +++ b/www/demo.txt @@ -0,0 +1 @@ +This is a demo asset served directly from the filesystem assets handler.