diff --git a/docs/frontend/header.md b/docs/frontend/header.md new file mode 100644 index 0000000..0c32f3a --- /dev/null +++ b/docs/frontend/header.md @@ -0,0 +1,9 @@ +# Header + +``` bash +cd /opt/instant-workstation/frontend/header +``` + +## Installation + +## Updates \ No newline at end of file diff --git a/docs/frontend/index.md b/docs/frontend/index.md new file mode 100644 index 0000000..65558f9 --- /dev/null +++ b/docs/frontend/index.md @@ -0,0 +1,5 @@ +# Frontend + +| Frontend | Language | Toolchain | Route | Last Updated | +| --- | --- | --- | --- | --- | +| [Header](header.md) | JavaScript | None | / | 2026-09-05 | \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 4cfda15..1c6805a 100644 --- a/docs/index.md +++ b/docs/index.md @@ -5,8 +5,12 @@ ```mermaid architecture-beta group backend(server)[Backend] + group frontend(internet)[Frontend] service workstations(server)[Workstations] in backend + service header(internet)[Header] in frontend + + header:R --> L:workstations ``` ## Installation diff --git a/frontend/header/assets/favicon.ico b/frontend/header/assets/favicon.ico new file mode 100644 index 0000000..4069bec Binary files /dev/null and b/frontend/header/assets/favicon.ico differ diff --git a/frontend/shell/logo.svg b/frontend/header/assets/logo.svg similarity index 100% rename from frontend/shell/logo.svg rename to frontend/header/assets/logo.svg diff --git a/frontend/shell/css/brand.css b/frontend/header/css/brand.css similarity index 100% rename from frontend/shell/css/brand.css rename to frontend/header/css/brand.css diff --git a/frontend/shell/css/desktop.css b/frontend/header/css/desktop.css similarity index 100% rename from frontend/shell/css/desktop.css rename to frontend/header/css/desktop.css diff --git a/frontend/shell/css/header.css b/frontend/header/css/header.css similarity index 100% rename from frontend/shell/css/header.css rename to frontend/header/css/header.css diff --git a/frontend/shell/css/hover.css b/frontend/header/css/hover.css similarity index 100% rename from frontend/shell/css/hover.css rename to frontend/header/css/hover.css diff --git a/frontend/shell/css/nav.css b/frontend/header/css/nav.css similarity index 76% rename from frontend/shell/css/nav.css rename to frontend/header/css/nav.css index ccb7163..777fed0 100644 --- a/frontend/shell/css/nav.css +++ b/frontend/header/css/nav.css @@ -32,7 +32,8 @@ } .news-ticker-content { - animation: news-ticker-animation 10s linear forwards; + animation: news-ticker-animation 10s linear infinite; + animation-play-state: paused; display: inline-block; padding-left: 100%; } @@ -42,6 +43,11 @@ transform: translateX(0); } + /* Finish the animation early to create a delay between announcements */ + 90% { + transform: translateX(-100%); + } + to { transform: translateX(-100%); } diff --git a/frontend/shell/app-shell.html b/frontend/header/header.html similarity index 82% rename from frontend/shell/app-shell.html rename to frontend/header/header.html index b33963a..e3c3cee 100644 --- a/frontend/shell/app-shell.html +++ b/frontend/header/header.html @@ -1,6 +1,8 @@ + + @@ -11,13 +13,15 @@ + + Instant Workstation
- + Instant Workstation @@ -28,7 +32,7 @@ Technical Documentation - Ubuntu 26.04 x86 64 LE is now available + Account diff --git a/frontend/header/news-ticker.js b/frontend/header/news-ticker.js new file mode 100644 index 0000000..f8e3a9f --- /dev/null +++ b/frontend/header/news-ticker.js @@ -0,0 +1,46 @@ +const response = await fetch('https://api.instantworkstation.com/workstations'); +const workstations = await response.json(); + +const now = new Date(); +const recent = new Date(now); + +recent.setUTCDate(now.getUTCDate() - 30); +recent.setUTCHours(0, 0, 0, 0); + +const recentWorkstations = workstations.filter(isRecent); +const news = recentWorkstations.flatMap(generateNews); +const ticker = document.getElementById('news-ticker-content'); + +let index = 0; +if (news.length > 0) { + ticker.textContent = news[index]; + ticker.addEventListener('animationiteration', showNextAnnouncement); + ticker.style.animationPlayState = 'running'; +} + +function generateNews(workstation) { + return workstation.architectures.map(architecture => { + const workstationDetails = `${workstation.os} ${workstation.version}`; + const architectureDetails = `${architecture.cpu} ${architecture.bitness} ${architecture.endianness}`; + + return `${workstationDetails} ${architectureDetails} is now available`; + }); +} + +function isRecent(workstation) { + const added = new Date(workstation.added); + + return added >= recent; +} + +function showNextAnnouncement() { + index++; + + if (index < news.length) { + ticker.textContent = news[index]; + } else { + ticker.removeEventListener('animationiteration', showNextAnnouncement); + ticker.style.animationPlayState = 'paused'; + ticker.textContent = ''; + } +} \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 5d2d63d..8c6f228 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -14,6 +14,9 @@ nav: - Backend: - backend/index.md - Workstations: backend/workstations.md + - Frontend: + - frontend/index.md + - Header: frontend/header.md - Overview: index.md plugins: - git-revision-date-localized: