diff --git a/README.md b/README.md index 1cb36db..969f7cf 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ server. ### Features -- Responsive service tabs with a compact status overview and one focused detail card +- Responsive service tabs with a compact status overview and one focused detail card; the entire card links to services with a web interface - Live dashboard showing every service's status and latency as measured by this browser - Collapsed browser-local history of the last 24 measurements with mini timelines and averages - Health checks for all configured services @@ -57,6 +57,7 @@ server. - Dark / Light / OLED themes - Always-visible client context in the header with OS, browser, and device detection - Keyboard-accessible tabs and visible focus states +- Responsive GitHub project cards for the four profile-pinned repositories and the LiMusic fork; each whole card is a link ### Project Structure @@ -135,6 +136,12 @@ User preferences are stored in `localStorage`: - `adiker.lang` - `adiker.statusHistory.v1` +The projects section is a static list in `index.html`, with EN/PL descriptions +in `js/app.js`. It links to the four repositories pinned on the +[Adiker GitHub profile](https://github.com/Adiker) and the +[LiMusic fork](https://github.com/Adiker/limusic). Update the list manually when +the profile pins change; the page makes no GitHub API requests. + ### Accessibility - Skip link to main content @@ -211,7 +218,7 @@ albo dowolnym serwerze statycznym. ### Funkcje -- Responsywne zakładki usług z kompaktowym podsumowaniem i jednym aktywnym panelem szczegółów +- Responsywne zakładki usług z kompaktowym podsumowaniem i jednym aktywnym panelem szczegółów; cała karta prowadzi do usług z interfejsem WWW - Dashboard pokazujący status i opóźnienie każdej usługi, mierzone z tej przeglądarki - Zwijana lokalna historia ostatnich 24 pomiarów z mini-timeline i średnim opóźnieniem - Health checki dla wszystkich skonfigurowanych usług @@ -222,6 +229,7 @@ albo dowolnym serwerze statycznym. - Motywy Dark / Light / OLED - Zawsze widoczne w nagłówku informacje o kliencie: OS, przeglądarka i typ urządzenia - Zakładki dostępne z klawiatury i czytelne stany focus +- Responsywne karty GitHub z czterema przypiętymi repozytoriami i forkiem LiMusic; cała karta jest linkiem ### Struktura projektu @@ -299,6 +307,12 @@ Preferencje użytkownika zapisywane są w `localStorage`: - `adiker.lang` - `adiker.statusHistory.v1` +Sekcja projektów jest statyczną listą w `index.html`, a opisy EN/PL znajdują +się w `js/app.js`. Prowadzi do czterech repozytoriów przypiętych na +[profilu Adiker w GitHubie](https://github.com/Adiker) oraz do +[forka LiMusic](https://github.com/Adiker/limusic). Po zmianie przypiętych +repozytoriów należy ręcznie zaktualizować listę; strona nie odpytuje API GitHuba. + ### Dostępność - Link skip do głównej treści diff --git a/css/styles.css b/css/styles.css index 9f54ac6..9542abd 100644 --- a/css/styles.css +++ b/css/styles.css @@ -774,10 +774,6 @@ main { font-weight: 700; } -.service-actions { - flex: 0 0 auto; -} - a { color: var(--acc); text-decoration: none; @@ -788,40 +784,202 @@ a:hover { text-decoration: underline; } -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 9px; - min-height: 46px; - padding: 11px 17px; - border: 1px solid color-mix(in srgb, var(--service-accent) 50%, transparent); - border-radius: 14px; - color: #fff; - background: linear-gradient(135deg, color-mix(in srgb, var(--service-accent) 82%, #0a2237), var(--service-accent)); - box-shadow: 0 12px 28px color-mix(in srgb, var(--service-accent) 18%, transparent); +.card.active-card { + border-color: color-mix(in srgb, var(--service-accent) 32%, var(--line)); +} + +.service-section-link { + transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; +} + +.service-section-link .j-wrap { + padding-right: 24px; +} + +.service-card-link { + position: absolute; + z-index: 1; + inset: 0; + border-radius: inherit; +} + +.service-card-link::after { + content: "↗"; + position: absolute; + top: 24px; + right: 26px; + color: var(--service-accent); + font-size: 1.15rem; font-weight: 800; + line-height: 1; + opacity: .8; + transition: opacity .18s ease, transform .18s ease; +} + +.service-section-link:hover, +.service-section-link:focus-within { + border-color: color-mix(in srgb, var(--service-accent) 52%, var(--line)); + box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, .025); +} + +.service-section-link:hover { + transform: translateY(-2px); +} + +.service-card-link:hover::after, +.service-card-link:focus-visible::after { + opacity: 1; + transform: translate(2px, -2px); +} + +.service-card-link:focus-visible { + outline: 2px solid var(--service-accent); + outline-offset: -3px; +} + +.projects-section { + margin-top: 24px; +} + +.projects-heading { + display: flex; + align-items: end; + justify-content: space-between; + gap: 20px; + margin-bottom: 20px; +} + +.projects-heading h2 { + margin: 2px 0 2px; + font-size: clamp(1.35rem, 2.5vw, 1.8rem); + letter-spacing: -.025em; +} + +.projects-heading .tag { + margin: 0; +} + +.projects-eyebrow, +.project-kind { + color: var(--acc); + font-size: .68rem; + font-weight: 800; + letter-spacing: .12em; +} + +.projects-eyebrow { + margin: 0; +} + +.projects-profile { + flex: 0 0 auto; + padding: 8px 0; + font-size: .85rem; + font-weight: 750; +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; +} + +.project-card { + display: flex; + align-items: flex-start; + gap: 16px; + min-width: 0; + padding: 19px; + border: 1px solid var(--line); + border-radius: 16px; + color: var(--fg); + background: linear-gradient(145deg, var(--surface-strong), var(--surface)); text-decoration: none; - transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; + transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } -.btn svg path { - stroke: currentColor; +.project-card::after { + content: "↗"; + flex: 0 0 auto; + margin-left: auto; + color: var(--acc); + font-size: 1rem; + font-weight: 800; + line-height: 1; + opacity: .75; + transition: opacity .18s ease, transform .18s ease; } -.btn:hover { - filter: brightness(1.08); +.project-card:hover { + border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); + box-shadow: 0 12px 28px rgba(0, 0, 0, .12); text-decoration: none; transform: translateY(-2px); } -.btn:focus-visible { - outline: 0; - box-shadow: var(--ring), 0 12px 28px color-mix(in srgb, var(--service-accent) 18%, transparent); +.project-card:focus-visible { + outline: 2px solid var(--acc); + outline-offset: 3px; +} + +.project-card:hover::after, +.project-card:focus-visible::after { + opacity: 1; + transform: translate(2px, -2px); } -.card.active-card { - border-color: color-mix(in srgb, var(--service-accent) 32%, var(--line)); +.project-featured { + grid-column: 1 / -1; + padding: 24px; + background: + radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 42%), + linear-gradient(145deg, var(--surface-strong), var(--surface)); +} + +.project-icon { + display: grid; + flex: 0 0 auto; + place-items: center; + width: 48px; + height: 48px; + border: 1px solid color-mix(in srgb, var(--acc) 25%, var(--line)); + border-radius: 14px; + color: var(--acc); + background: color-mix(in srgb, var(--acc) 10%, var(--surface)); + font-size: 1.65rem; + font-weight: 700; + line-height: 1; +} + +.project-icon-music { color: #c9a5ff; } +.project-icon-volume { color: #78c4ff; } +.project-icon-weather { color: #6fdec6; } +.project-icon-android { color: #a8db78; } +.project-icon-web { color: #f5bd7d; font-size: 1rem; } + +.project-content { + display: grid; + flex: 1 1 auto; + justify-items: start; + gap: 5px; + min-width: 0; +} + +.project-name { + font-size: 1.08rem; + font-weight: 800; + line-height: 1.3; + overflow-wrap: anywhere; +} + +.project-featured .project-name { + font-size: 1.35rem; +} + +.project-description { + color: var(--mut); + font-size: .88rem; + line-height: 1.5; } footer { @@ -894,6 +1052,16 @@ footer { background: rgba(246, 249, 252, .88); } +.theme-light .project-card { + background: linear-gradient(145deg, #fff, var(--surface)); +} + +.theme-light .project-featured { + background: + radial-gradient(circle at 92% 10%, rgba(14, 165, 233, .12), transparent 42%), + linear-gradient(145deg, #fff, var(--surface)); +} + /* OLED theme */ .theme-oled { --bg: #000; @@ -924,6 +1092,11 @@ footer { background: #000; } +.theme-oled .project-card, +.theme-oled .project-featured { + background: #000; +} + /* Toggle animation */ #theme-toggle .emoji { display: inline-block; @@ -1071,6 +1244,31 @@ footer { border-radius: 18px; } + .projects-heading { + align-items: flex-start; + flex-direction: column; + gap: 8px; + } + + .projects-grid { + grid-template-columns: 1fr; + } + + .project-featured { + grid-column: auto; + } + + .project-card, + .project-featured { + padding: 16px; + } + + .project-icon { + width: 42px; + height: 42px; + font-size: 1.4rem; + } + .j-wrap { align-items: stretch; flex-direction: column; @@ -1099,9 +1297,9 @@ footer { font-size: 1.3rem; } - .service-actions, - .btn { - width: 100%; + .service-card-link::after { + top: 18px; + right: 18px; } footer { diff --git a/index.html b/index.html index b4a3bec..de07ba8 100644 --- a/index.html +++ b/index.html @@ -167,7 +167,7 @@

Service status

-
+ - -