From 373e34f0f979c78eeb90b7c40063fd77e95dcb98 Mon Sep 17 00:00:00 2001 From: ChevCellios <171721150+ChevCellios@users.noreply.github.com> Date: Sun, 16 Aug 2026 05:35:32 +0200 Subject: [PATCH 1/5] Complete ISS localization and mobile consent --- Petabit.Tests/ApplicationTests.cs | 34 ++++++++++++++++++++++ Petabit/Resources/Views.Home.Index.de.resx | 10 +++++++ Petabit/Resources/Views.Home.Index.en.resx | 10 +++++++ Petabit/Resources/Views.Home.Index.hr.resx | 10 +++++++ Petabit/Views/Home/Index.cshtml | 30 ++++++++++++++----- Petabit/Views/Shared/_Layout.cshtml.css | 2 ++ 6 files changed, 88 insertions(+), 8 deletions(-) diff --git a/Petabit.Tests/ApplicationTests.cs b/Petabit.Tests/ApplicationTests.cs index 01adca6..17565c5 100644 --- a/Petabit.Tests/ApplicationTests.cs +++ b/Petabit.Tests/ApplicationTests.cs @@ -253,6 +253,40 @@ public async Task HomePageLocalizesLedDisplay( Assert.Contains($"data-unavailable=\"{unavailableText}\"", body); } + [Theory] + [InlineData("en", "Earth hologram", "United States", "Crew spacecraft")] + [InlineData("hr", "Hologram Zemlje", "SAD", "Posadna letjelica")] + [InlineData("de", "Erde-Hologramm", "USA", "Bemannte Raumfähre")] + public async Task HomePageLocalizesHologramAndStationDetails( + string culture, + string hologramTitle, + string countryText, + string purposeText) + { + using var request = new HttpRequestMessage(HttpMethod.Get, "/"); + request.Headers.AcceptLanguage.ParseAdd(culture); + + var response = await _client.SendAsync(request); + var body = await response.Content.ReadAsStringAsync(); + + Assert.Equal(HttpStatusCode.OK, response.StatusCode); + Assert.Contains($">{hologramTitle}", body); + Assert.Contains($"data-country-usa=\"{countryText}\"", body); + Assert.Contains($"data-purpose-crewed=\"{purposeText}\"", body); + } + + [Fact] + public async Task MobileAnalyticsConsentStylesProvideBottomSheetBehavior() + { + var styles = await _client.GetStringAsync("/Petabit.styles.css"); + + Assert.Contains("max-height: min(45vh, 18rem)", styles); + Assert.Contains("overscroll-behavior: contain", styles); + Assert.Contains("touch-action: pan-y", styles); + Assert.Contains("min-height: 44px", styles); + Assert.Contains("safe-area-inset-bottom", styles); + } + [Fact] public async Task IssDataReturnsJsonWhenUpstreamSucceeds() { diff --git a/Petabit/Resources/Views.Home.Index.de.resx b/Petabit/Resources/Views.Home.Index.de.resx index 53d9f01..0a578ea 100644 --- a/Petabit/Resources/Views.Home.Index.de.resx +++ b/Petabit/Resources/Views.Home.Index.de.resx @@ -139,4 +139,14 @@ Referenzstand Quelle ISS-SIGNAL NICHT VERFÜGBAR + ORBITALANSICHT + Erde-Hologramm + Warten auf Ping ISS + Holografische Ansicht der Erde und der ISS-Position + Die aktuelle Markierung verwendet die nach dem Ping empfangenen Daten. Die Linie zeigt die projizierte ISS-Umlaufbahn. + USA + Frankreich + Russland + Bemannte Raumfähre + Frachter diff --git a/Petabit/Resources/Views.Home.Index.en.resx b/Petabit/Resources/Views.Home.Index.en.resx index 64108c9..186699f 100644 --- a/Petabit/Resources/Views.Home.Index.en.resx +++ b/Petabit/Resources/Views.Home.Index.en.resx @@ -139,4 +139,14 @@ Reference status Source ISS SIGNAL UNAVAILABLE + ORBITAL VIEW + Earth hologram + Waiting for Ping ISS + Holographic view of Earth and the ISS position + The current marker uses data received after the ping. The line shows the projected ISS orbit. + United States + France + Russia + Crew spacecraft + Cargo spacecraft diff --git a/Petabit/Resources/Views.Home.Index.hr.resx b/Petabit/Resources/Views.Home.Index.hr.resx index 22f0615..2a5a5fe 100644 --- a/Petabit/Resources/Views.Home.Index.hr.resx +++ b/Petabit/Resources/Views.Home.Index.hr.resx @@ -139,4 +139,14 @@ Referentno stanje Izvor ISS SIGNAL NIJE DOSTUPAN + ORBITALNI PRIKAZ + Hologram Zemlje + Čeka Ping ISS + Hologramski prikaz Zemlje i položaja ISS-a + Trenutna oznaka koristi podatke primljene nakon pinga. Linija prikazuje projekciju ISS orbite. + SAD + Francuska + Rusija + Posadna letjelica + Teretna letjelica diff --git a/Petabit/Views/Home/Index.cshtml b/Petabit/Views/Home/Index.cshtml index c30fe45..7ba5ab4 100644 --- a/Petabit/Views/Home/Index.cshtml +++ b/Petabit/Views/Home/Index.cshtml @@ -29,7 +29,12 @@ data-docked="@Localizer["LedDocked"]" data-reference="@Localizer["LedReference"]" data-source="@Localizer["LedSource"]" - data-unavailable="@Localizer["LedUnavailable"]"> + data-unavailable="@Localizer["LedUnavailable"]" + data-country-usa="@Localizer["CountryUsa"]" + data-country-france="@Localizer["CountryFrance"]" + data-country-russia="@Localizer["CountryRussia"]" + data-purpose-crewed="@Localizer["PurposeCrewed"]" + data-purpose-cargo="@Localizer["PurposeCargo"]">
@@ -56,16 +61,16 @@
-

ORBITAL VIEW

-

Hologram Zemlje

+

@Localizer["HologramKicker"]

+

@Localizer["HologramTitle"]

- ÄŒeka Ping ISS + @Localizer["HologramWaiting"]
- +
-

Trenutna oznaka koristi podatke primljene nakon pinga. Linija prikazuje projekciju ISS orbite.

+

@Localizer["HologramNote"]

@@ -97,6 +102,15 @@ } ledDisplay.hidden = false; } + const localizedCountry = country => ({ + 'SAD': ledStrings.countryUsa, + 'Francuska': ledStrings.countryFrance, + 'Rusija': ledStrings.countryRussia + })[country] ?? country; + const localizedPurpose = purpose => ({ + 'Posadna letjelica': ledStrings.purposeCrewed, + 'Teretna letjelica': ledStrings.purposeCargo + })[purpose] ?? purpose; const continentOutlines = [ [[72,-168],[70,-140],[60,-128],[55,-122],[49,-125],[43,-124],[34,-117],[23,-110],[17,-96],[25,-82],[30,-81],[43,-70],[51,-58],[59,-64],[66,-80],[73,-105],[72,-135],[72,-168]], [[12,-81],[8,-77],[-5,-81],[-18,-70],[-35,-72],[-55,-68],[-52,-55],[-34,-52],[-20,-40],[-5,-35],[7,-51],[12,-66],[12,-81]], @@ -293,10 +307,10 @@ globeStatus.classList.add('is-live'); globeHologram.classList.add('is-tracking'); const ledCrew = data.astronauts - .map(person => `${person.name} — ${person.country} (${person.agency})`) + .map(person => `${person.name} — ${localizedCountry(person.country)} (${person.agency})`) .join(' | '); const ledVehicles = data.dockedVehicles - .map(vehicle => `${vehicle.name} — ${vehicle.purpose} (${vehicle.operator})`) + .map(vehicle => `${vehicle.name} — ${localizedPurpose(vehicle.purpose)} (${vehicle.operator})`) .join(' | '); const referenceDate = new Date(data.stationStatusUpdatedAt).toLocaleDateString(ledStrings.locale); ledMessage.textContent = [ diff --git a/Petabit/Views/Shared/_Layout.cshtml.css b/Petabit/Views/Shared/_Layout.cshtml.css index 3609354..402d202 100644 --- a/Petabit/Views/Shared/_Layout.cshtml.css +++ b/Petabit/Views/Shared/_Layout.cshtml.css @@ -90,6 +90,8 @@ button.accept-policy { padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); border-radius: 0.85rem 0.85rem 0 0 !important; overflow-y: auto; + overscroll-behavior: contain; + touch-action: pan-y; font-size: 0.78rem; } From 3e9e6a7eb79e9b86143ff8bab439f0b297fb7636 Mon Sep 17 00:00:00 2001 From: ChevCellios <171721150+ChevCellios@users.noreply.github.com> Date: Thu, 27 Aug 2026 22:56:19 +0200 Subject: [PATCH 2/5] Fix dark/light mode toggle focus styling. :) --- Petabit/Views/Shared/_Layout.cshtml | 2 +- Petabit/wwwroot/css/site.css | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/Petabit/Views/Shared/_Layout.cshtml b/Petabit/Views/Shared/_Layout.cshtml index 48420bd..6a041f9 100644 --- a/Petabit/Views/Shared/_Layout.cshtml +++ b/Petabit/Views/Shared/_Layout.cshtml @@ -182,7 +182,7 @@
- + diff --git a/Petabit/wwwroot/css/site.css b/Petabit/wwwroot/css/site.css index 538e072..d08f5fd 100644 --- a/Petabit/wwwroot/css/site.css +++ b/Petabit/wwwroot/css/site.css @@ -88,10 +88,6 @@ body.dark-mode :is(h1, h2, h3, h4, h5, h6, .btn, .nav-link) { .mode-toggle { - position: fixed; - top: 1rem; - right: 1rem; - z-index: 1050; background: none; border: none; color: inherit; @@ -99,6 +95,14 @@ body.dark-mode :is(h1, h2, h3, h4, h5, h6, .btn, .nav-link) { cursor: pointer; padding: 0.25rem 0.5rem; } + .mode-toggle:focus { + outline: none; + box-shadow: none !important; + } + .mode-toggle:focus-visible { + outline: 2px solid currentColor; + outline-offset: 3px; + } .icon-button:hover { opacity: 0.75; From 264edce0fae6d50a1800f6690d5688e75b3184ed Mon Sep 17 00:00:00 2001 From: ChevCellios <171721150+ChevCellios@users.noreply.github.com> Date: Fri, 28 Aug 2026 21:54:01 +0200 Subject: [PATCH 3/5] Improve button styling and Blockchain dark mode contrast --- Petabit/Views/Home/Index.cshtml | 2 +- Petabit/wwwroot/css/site.css | 35 ++++++++++++++++++++++++++++----- 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/Petabit/Views/Home/Index.cshtml b/Petabit/Views/Home/Index.cshtml index 7ba5ab4..1691d07 100644 --- a/Petabit/Views/Home/Index.cshtml +++ b/Petabit/Views/Home/Index.cshtml @@ -172,7 +172,7 @@ const isLight = document.body.classList.contains('light-mode'); const grid = isLight ? 'rgba(0, 105, 105, 0.32)' : 'rgba(72, 255, 218, 0.32)'; const bright = isLight ? '#007b78' : '#62ffe1'; - const dim = isLight ? 'rgba(0, 120, 116, 0.12)' : 'rgba(75, 255, 220, 0.11)'; + const dim = isLight ? 'rgba(0, 100, 110, 0.45)' : 'rgba(75, 255, 220, 0.11)'; const baseRotation = issPosition ? -issPosition.longitude * Math.PI / 180 : 0; const rotation = reduceMotion.matches ? baseRotation diff --git a/Petabit/wwwroot/css/site.css b/Petabit/wwwroot/css/site.css index d08f5fd..05ff61b 100644 --- a/Petabit/wwwroot/css/site.css +++ b/Petabit/wwwroot/css/site.css @@ -4,6 +4,10 @@ html { position: relative; min-height: 100%; } +/* ========== Svi gumbi ========== */ +.btn { + font-weight: 700 !important; +} @media (min-width: 768px) { html { @@ -27,10 +31,10 @@ body { }*/ /* Light mode */ -body.light-mode { - background-color: #f4f4f4; - color: #000000; -} + body.light-mode { + background-color: #9faeb3; + color: #000000; + } /* Dark mode dodatni elementi */ body.dark-mode .navbar, @@ -87,7 +91,7 @@ body.dark-mode :is(h1, h2, h3, h4, h5, h6, .btn, .nav-link) { /* ========== Dark/Light Mode gumb ========== */ .mode-toggle -{ +{20000000000 background: none; border: none; color: inherit; @@ -160,6 +164,27 @@ select.form-select { } +/* Blockchain - bolji kontrast u dark modu */ +/* Blockchain - Bitcoin orange, dark mode */ +body.dark-mode a.btn.btn-warning.btn-home { + background-color: #d97706 !important; + border-color: #f7931a !important; + color: #ffffff !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; + box-shadow: 0 0 6px rgba(247, 147, 26, 0.8), 0 0 14px rgba(247, 147, 26, 0.45) !important; +} + + body.dark-mode a.btn.btn-warning.btn-home:hover { + background-color: #f7931a !important; + border-color: #ffad33 !important; + box-shadow: 0 0 8px rgba(247, 147, 26, 1), 0 0 20px rgba(247, 147, 26, 0.7) !important; + } + body.dark-mode a.btn.btn-warning.btn-home:hover { + background-color: #b67d00 !important; + border-color: #e0a000 !important; + color: #ffffff !important; + } + #iss-result, #iss-speed, #iss-astronauts, #astronaut-count { font-size: 1.2rem; margin-top: 10px; From 60eca036dd62fadfe64233e29a03d047f59c056f Mon Sep 17 00:00:00 2001 From: ChevCellios <171721150+ChevCellios@users.noreply.github.com> Date: Fri, 28 Aug 2026 22:31:51 +0200 Subject: [PATCH 4/5] Neon glow 4buttons --- Petabit/wwwroot/css/site.css | 37 +++++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/Petabit/wwwroot/css/site.css b/Petabit/wwwroot/css/site.css index 05ff61b..defcc06 100644 --- a/Petabit/wwwroot/css/site.css +++ b/Petabit/wwwroot/css/site.css @@ -8,6 +8,11 @@ html { .btn { font-weight: 700 !important; } +/* ========== Neon glow za sve gumbe ========== */ +.btn { + font-weight: 700 !important; + box-shadow: 0 0 5px rgba(0, 255, 0, 0.55), 0 0 10px rgba(0, 255, 0, 0.25); +} @media (min-width: 768px) { html { @@ -166,25 +171,31 @@ select.form-select { /* Blockchain - bolji kontrast u dark modu */ /* Blockchain - Bitcoin orange, dark mode */ -body.dark-mode a.btn.btn-warning.btn-home { +/* Blockchain - zajednièki izgled */ +a.btn.btn-warning.btn-home { background-color: #d97706 !important; border-color: #f7931a !important; - color: #ffffff !important; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; box-shadow: 0 0 6px rgba(247, 147, 26, 0.8), 0 0 14px rgba(247, 147, 26, 0.45) !important; } - body.dark-mode a.btn.btn-warning.btn-home:hover { - background-color: #f7931a !important; - border-color: #ffad33 !important; - box-shadow: 0 0 8px rgba(247, 147, 26, 1), 0 0 20px rgba(247, 147, 26, 0.7) !important; - } - body.dark-mode a.btn.btn-warning.btn-home:hover { - background-color: #b67d00 !important; - border-color: #e0a000 !important; - color: #ffffff !important; - } +/* LIGHT MODE - tamni tekst */ +body.light-mode a.btn.btn-warning.btn-home { + color: #1e1e1e !important; + text-shadow: 0 0 3px rgba(255, 180, 50, 0.7) !important; +} + +/* DARK MODE - svijetli tekst */ +body.dark-mode a.btn.btn-warning.btn-home { + color: #ffffff !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; +} +/* Hover - oba moda */ +a.btn.btn-warning.btn-home:hover { + background-color: #f7931a !important; + border-color: #ffad33 !important; + box-shadow: 0 0 8px rgba(247, 147, 26, 1), 0 0 20px rgba(247, 147, 26, 0.7) !important; +} #iss-result, #iss-speed, #iss-astronauts, #astronaut-count { font-size: 1.2rem; margin-top: 10px; From 70d6df422349f819963d6b9608333d811ae0ac04 Mon Sep 17 00:00:00 2001 From: ChevCellios <171721150+ChevCellios@users.noreply.github.com> Date: Fri, 28 Aug 2026 22:58:10 +0200 Subject: [PATCH 5/5] Refine button glow and Blockchain styling --- Petabit/wwwroot/css/site.css | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/Petabit/wwwroot/css/site.css b/Petabit/wwwroot/css/site.css index c7ec3a9..ee9d6d7 100644 --- a/Petabit/wwwroot/css/site.css +++ b/Petabit/wwwroot/css/site.css @@ -5,9 +5,12 @@ html { min-height: 100%; } /* ========== Svi gumbi ========== */ +<<<<<<< HEAD .btn { font-weight: 700 !important; } +======= +>>>>>>> 3db7d7e (Refine button glow and Blockchain styling) /* ========== Neon glow za sve gumbe ========== */ .btn { @@ -104,12 +107,17 @@ body.dark-mode :is(h1, h2, h3, h4, h5, h6, .btn, .nav-link) { font-size: 1.5rem; cursor: pointer; padding: 0.25rem 0.5rem; + box-shadow: none !important; } .mode-toggle:focus { outline: none; box-shadow: none !important; } + .mode-toggle:hover, + .mode-toggle:active { + box-shadow: none !important; + } .mode-toggle:focus-visible { outline: 2px solid currentColor; @@ -175,20 +183,27 @@ select.form-select { /* Blockchain - bolji kontrast u dark modu */ /* Blockchain - Bitcoin orange, dark mode */ + /* Blockchain - zajedni�ki izgled */ + +/* Blockchain - zajednièki izgled */ +/* ========== Blockchain button ========== */ + +/* Zajednièki izgled */ +>>>>>>> 3db7d7e (Refine button glow and Blockchain styling) a.btn.btn-warning.btn-home { background-color: #d97706 !important; border-color: #f7931a !important; box-shadow: 0 0 6px rgba(247, 147, 26, 0.8), 0 0 14px rgba(247, 147, 26, 0.45) !important; } -/* LIGHT MODE - tamni tekst */ +/* Light mode - tamni tekst */ body.light-mode a.btn.btn-warning.btn-home { color: #1e1e1e !important; text-shadow: 0 0 3px rgba(255, 180, 50, 0.7) !important; } -/* DARK MODE - svijetli tekst */ +/* Dark mode - svijetli tekst */ body.dark-mode a.btn.btn-warning.btn-home { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;