diff --git a/src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css b/src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css
index 935fc0c..39af1f6 100644
--- a/src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css
@@ -2,8 +2,8 @@
position: relative;
width: 100%;
min-height: 100vh;
- background-color: #0a0c10;
- color: #e0e6ed;
+ background-color: #121214;
+ color: #e4e4e7;
overflow-x: hidden;
display: flex;
justify-content: center;
@@ -18,7 +18,7 @@
transform: translate(-50%, -50%);
width: 800px;
height: 800px;
- background: radial-gradient(circle, rgba(0, 255, 153, 0.05) 0%, transparent 70%);
+ background: radial-gradient(circle, rgba(16, 185, 129, 0.03) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
@@ -63,17 +63,17 @@
.avatar-inner {
width: 120px;
height: 120px;
- background: #151921;
- border: 2px solid var(--nexus-neon);
+ background: #1a1a1e;
+ border: 2px solid #10b981;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 3.5rem;
font-weight: 800;
- color: var(--nexus-neon);
+ color: #10b981;
z-index: 2;
- box-shadow: 0 0 30px rgba(0, 255, 153, 0.2), inset 0 0 20px rgba(0, 255, 153, 0.1);
+ box-shadow: 0 0 30px rgba(16, 185, 129, 0.2), inset 0 0 20px rgba(16, 185, 129, 0.1);
position: relative;
}
@@ -81,7 +81,7 @@
position: absolute;
width: 140px;
height: 140px;
- border: 1px solid rgba(0, 255, 153, 0.3);
+ border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 50%;
animation: pulse-ring 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@@ -104,7 +104,7 @@
.system-rank {
font-family: 'Inter', 'Courier New', Courier, monospace;
font-size: 0.9rem;
- color: var(--nexus-neon);
+ color: #10b981;
text-transform: uppercase;
letter-spacing: 0.2em;
opacity: 0.8;
@@ -120,11 +120,17 @@
.glass-panel {
padding: 32px;
+ background: #1a1a1e;
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ transition: all 0.3s ease;
}
.glass-panel:hover {
- border-color: rgba(0, 255, 153, 0.2);
+ border-color: rgba(16, 185, 129, 0.2);
transform: translateY(-4px);
+ background: #1e1e24;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.metric-card {
@@ -185,8 +191,8 @@
.progress-bar {
height: 100%;
- background: var(--nexus-neon);
- box-shadow: 0 0 15px rgba(0, 255, 153, 0.5);
+ background: #10b981;
+ box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
border-radius: 10px;
}
@@ -206,7 +212,7 @@
.score-value {
font-size: 2.5rem;
font-weight: 800;
- color: var(--nexus-neon);
+ color: #10b981;
line-height: 1;
}
@@ -223,7 +229,8 @@
align-items: center;
gap: 8px;
padding: 10px 16px;
- background: rgba(0, 255, 153, 0.05);
+ background: rgba(16, 185, 129, 0.05);
+ border: 1px solid rgba(16, 185, 129, 0.1);
border-radius: 12px;
font-size: 0.85rem;
color: #cbd5e0;
@@ -259,10 +266,16 @@
width: fit-content;
}
-.plan-badge.pro {
- background: rgba(0, 255, 153, 0.1);
- color: var(--nexus-neon);
- border: 1px solid rgba(0, 255, 153, 0.2);
+.plan-badge.pro, .plan-badge.enterprise {
+ background: rgba(16, 185, 129, 0.15);
+ color: #10b981;
+ border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.plan-badge.free {
+ background: rgba(255, 255, 255, 0.05);
+ color: #a1a1aa;
+ border: 1px solid rgba(255, 255, 255, 0.1);
}
.tenant-tag {
@@ -318,11 +331,11 @@
.nexus-loader {
width: 60px;
height: 60px;
- border: 4px solid rgba(0, 255, 153, 0.1);
- border-top-color: var(--nexus-neon);
+ border: 4px solid rgba(16, 185, 129, 0.1);
+ border-top-color: #10b981;
border-radius: 50%;
animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
- filter: drop-shadow(0 0 10px var(--nexus-neon));
+ filter: drop-shadow(0 0 10px #10b981);
}
@keyframes spin { to { transform: rotate(360deg); } }
diff --git a/src/NexusReader.UI.Shared/Pages/Catalog.razor b/src/NexusReader.UI.Shared/Pages/Catalog.razor
new file mode 100644
index 0000000..09eca8b
--- /dev/null
+++ b/src/NexusReader.UI.Shared/Pages/Catalog.razor
@@ -0,0 +1,234 @@
+@page "/catalog"
+@attribute [Authorize]
+@using NexusReader.UI.Shared.Components.Organisms
+@using NexusReader.Application.DTOs.User
+@using NexusReader.UI.Shared.Services
+@using System.Net.Http.Json
+@inject HttpClient Http
+@inject IReaderNavigationService ReaderNavigation
+@inject NavigationManager NavigationManager
+
+
+
+
+
+ @if (_isLoading)
+ {
+
+
+
+
Wczytywanie katalogu...
+
+
+
+ @for (int i = 0; i < 3; i++)
+ {
+
+ }
+
+
+ }
+ else
+ {
+
+ @* Render real books first *@
+ @if (_books != null && _books.Any())
+ {
+ @foreach (var book in _books)
+ {
+
+
+
+
+ Uruchom kurs
+
+
+
+
E-Book
+
@book.Title
+
Autor: @book.Author.Name
+
+ @(string.IsNullOrEmpty(book.Description) ? "Rozpocznij naukę i buduj strukturę pojęć w oparciu o autorskie algorytmy ekstrakcji wiedzy Nexus AI." : book.Description)
+
+
+
+
+
+
+
+
+
+ }
+ }
+
+ @* Curated Showcase Mock Courses to look extremely premium *@
+
+
+
+ <.NET 10>
+
+
+ Zarejestruj się
+
+
+
+
Architektura
+
.NET 10 & Blazor SaaS Architecture
+
Autor: Nexus Architect
+
+ Zaawansowany kurs budowania skalowalnych SaaS z Native AOT, CQRS, MediatR, FluentResults i izolowanym systemem stylów Blazor CSS.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ BLAZOR
+
+
+ Zarejestruj się
+
+
+
+
Performance
+
Blazor State & Rendering Masterclass
+
Autor: Nexus Architect
+
+ Techniki optymalizacji renderowania, zarządzanie stanem w aplikacjach rozproszonych oraz głęboka integracja JavaScript Interop.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ D3.JS GRAPH
+
+
+ Zarejestruj się
+
+
+
+
Wizualizacja
+
D3.js & interactive Knowledge Graphs
+
Autor: Nexus Architect
+
+ Projektowanie interaktywnych grafów pojęć i dynamicznych map myśli 2D/3D zsynchronizowanych z modelem językowym AI.
+
+
+
+
+
+
+
+
+
+
+ }
+
+
+
+@code {
+ private bool _isLoading = true;
+ private List
? _books;
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ {
+ await LoadBooksAsync();
+ }
+ }
+
+ private async Task LoadBooksAsync()
+ {
+ _isLoading = true;
+ StateHasChanged();
+
+ try
+ {
+ _books = await Http.GetFromJsonAsync>("api/library/books");
+ _isLoading = false;
+ }
+ catch (Exception ex)
+ {
+ Console.WriteLine($"[Catalog] Failed to load books: {ex.Message}");
+ if (OperatingSystem.IsBrowser())
+ {
+ _isLoading = false;
+ }
+ }
+ finally
+ {
+ StateHasChanged();
+ }
+ }
+
+ private void OpenBook(Guid bookId)
+ {
+ ReaderNavigation.NavigateToBook(bookId);
+ }
+
+ private void ShowPremiumAlert()
+ {
+ // Showcase callback
+ NavigationManager.NavigateTo("/profile");
+ }
+}
diff --git a/src/NexusReader.UI.Shared/Pages/Catalog.razor.css b/src/NexusReader.UI.Shared/Pages/Catalog.razor.css
new file mode 100644
index 0000000..976681c
--- /dev/null
+++ b/src/NexusReader.UI.Shared/Pages/Catalog.razor.css
@@ -0,0 +1,358 @@
+.catalog-page {
+ padding: 3rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ animation: fadeIn 0.6s ease-out;
+}
+
+.catalog-header {
+ margin-bottom: 3rem;
+}
+
+.catalog-header h1 {
+ font-family: var(--nexus-font-serif);
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin: 0 0 0.5rem 0;
+ color: #ffffff;
+ letter-spacing: -0.5px;
+}
+
+.catalog-header .subtitle {
+ font-size: 1rem;
+ color: #a1a1aa;
+ margin: 0;
+}
+
+/* Catalog Grid */
+.catalog-grid, .loading-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: 2.5rem;
+}
+
+.course-card {
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: hidden;
+ border-radius: 12px;
+ background: #1a1a1e;
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+}
+
+.course-card:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
+ border-color: rgba(16, 185, 129, 0.2);
+}
+
+.card-cover-container {
+ position: relative;
+ height: 200px;
+ background: rgba(0, 0, 0, 0.2);
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.card-cover {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.course-card:hover .card-cover {
+ transform: scale(1.04);
+}
+
+/* Gradients for Mock Course Covers */
+.mock-cover {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+}
+
+.cover-code-text {
+ font-family: var(--nexus-font-sans, "Outfit", sans-serif);
+ font-size: 1.5rem;
+ font-weight: 800;
+ color: #ffffff;
+ letter-spacing: 1px;
+ text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.dotnet-gradient {
+ background: linear-gradient(135deg, #512bd4 0%, #10b981 100%);
+}
+
+.blazor-gradient {
+ background: linear-gradient(135deg, #f05a28 0%, #10b981 100%);
+}
+
+.graph-gradient {
+ background: linear-gradient(135deg, #0d9488 0%, #10b981 100%);
+}
+
+.cover-overlay {
+ position: absolute;
+ inset: 0;
+ background: rgba(13, 13, 15, 0.6);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ backdrop-filter: blur(4px);
+}
+
+.course-card:hover .cover-overlay {
+ opacity: 1;
+}
+
+.start-action {
+ color: #ffffff;
+ font-weight: 600;
+ font-size: 1rem;
+ padding: 0.6rem 1.25rem;
+ border: 2px solid #ffffff;
+ border-radius: 30px;
+ transform: translateY(10px);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.course-card:hover .start-action {
+ transform: translateY(0);
+ background: #ffffff;
+ color: #121214;
+}
+
+.card-details {
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.category-badge {
+ align-self: flex-start;
+ font-size: 0.7rem;
+ font-weight: 700;
+ color: #a1a1aa;
+ background: rgba(255, 255, 255, 0.05);
+ padding: 0.2rem 0.5rem;
+ border-radius: 4px;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ margin-bottom: 0.75rem;
+}
+
+.category-badge.architecture {
+ color: #f43f5e;
+ background: rgba(244, 63, 94, 0.1);
+}
+
+.category-badge.design {
+ color: #0ea5e9;
+ background: rgba(14, 165, 233, 0.1);
+}
+
+.category-badge.analytics {
+ color: #a855f7;
+ background: rgba(168, 85, 247, 0.1);
+}
+
+.course-title {
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin: 0 0 0.4rem 0;
+ color: #ffffff;
+ line-height: 1.3;
+ font-family: var(--nexus-font-sans, "Outfit", sans-serif);
+}
+
+.course-author {
+ font-size: 0.85rem;
+ color: #a1a1aa;
+ margin: 0 0 1rem 0;
+}
+
+.course-desc {
+ font-size: 0.88rem;
+ line-height: 1.5;
+ color: #a1a1aa;
+ margin: 0 0 1.5rem 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.card-footer-info {
+ margin-top: auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 0.8rem;
+ color: #a1a1aa;
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
+ padding-top: 0.75rem;
+}
+
+.meta-item {
+ display: flex;
+ align-items: center;
+ gap: 0.35rem;
+}
+
+.text-success {
+ color: #10b981;
+ font-weight: 600;
+}
+
+.text-premium {
+ color: #10b981;
+ font-weight: 600;
+}
+
+.card-actions {
+ margin-top: 1.25rem;
+}
+
+.start-course-btn {
+ width: 100%;
+ background: #10b981;
+ color: #0d0d0d;
+ border: none;
+ padding: 0.75rem 1.5rem;
+ font-size: 0.8rem;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ text-transform: uppercase;
+}
+
+.start-course-btn:hover {
+ background: #059669;
+ color: #ffffff;
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
+}
+
+/* Skeleton Loading */
+.skeleton-card {
+ border-radius: 12px;
+ overflow: hidden;
+ height: 440px;
+ background: #1a1a1e;
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ opacity: 0.6;
+}
+
+.skeleton-cover {
+ height: 200px;
+ background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
+ background-size: 200% 100%;
+ animation: loading 1.5s infinite;
+}
+
+.skeleton-details {
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.skeleton-line {
+ background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
+ background-size: 200% 100%;
+ animation: loading 1.5s infinite;
+ border-radius: 4px;
+}
+
+.skeleton-line.title {
+ height: 20px;
+ width: 80%;
+}
+
+.skeleton-line.author {
+ height: 14px;
+ width: 50%;
+}
+
+.skeleton-line.button {
+ height: 36px;
+ width: 100%;
+ margin-top: auto;
+}
+
+.catalog-loading-container {
+ position: relative;
+ width: 100%;
+}
+
+.catalog-loading-container .loader-card {
+ position: absolute;
+ top: 100px;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ gap: 1.25rem;
+ padding: 1.25rem 2.25rem;
+ border-radius: 40px;
+ background: rgba(13, 13, 15, 0.85);
+ backdrop-filter: blur(16px);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.spinner-glow {
+ width: 28px;
+ height: 28px;
+ border: 2px solid rgba(16, 185, 129, 0.1);
+ border-radius: 50%;
+ border-top-color: #10b981;
+ animation: spin 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
+ box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
+}
+
+.loader-text {
+ font-weight: 500;
+ color: #ffffff;
+ font-size: 0.95rem;
+}
+
+/* Animations */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(15px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes loading {
+ 0% { background-position: 200% 0; }
+ 100% { background-position: -200% 0; }
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+@keyframes scaleIn {
+ from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
+ to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+}
diff --git a/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor b/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor
index e4ae704..0e86898 100644
--- a/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor
+++ b/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor
@@ -44,7 +44,7 @@
Brak Aktywnych Książek
Nie wybrano żadnej książki lub ta książka nie ma jeszcze wygenerowanej mapy pojęć przez Nexus AI.
- Przejdź do Biblioteki
+ Przejdź do Moich Książek