Vibe deck builder WIP
This commit is contained in:
6d486f49
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(cp \"C:/Users/jonmc/ChronoCCG/Chrono/Web/Components/CardDialog.razor.css\" \"C:/Users/jonmc/ChronoCCG/Chrono/Server/Components/CardDialog.razor.css\")",
|
||||||
|
"Bash(cp \"C:/Users/jonmc/ChronoCCG/Chrono/Web/Pages/Cards.razor.css\" \"C:/Users/jonmc/ChronoCCG/Chrono/Server/Components/Pages/Cards.razor.css\")",
|
||||||
|
"Bash(dotnet ef *)",
|
||||||
|
"Bash(dotnet build *)",
|
||||||
|
"Bash(awk '{print $NF}')",
|
||||||
|
"Bash(dotnet test *)",
|
||||||
|
"Bash(dotnet user-secrets *)",
|
||||||
|
"Bash(env)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -14,8 +14,6 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Server", "Server\Server.csp
|
|||||||
EndProject
|
EndProject
|
||||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Shared", "Shared\Shared.csproj", "{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}"
|
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Shared", "Shared\Shared.csproj", "{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}"
|
||||||
EndProject
|
EndProject
|
||||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Cloud", "Cloud\Cloud.csproj", "{378D4271-55B8-4E77-92F0-65C7DA26ABD3}"
|
|
||||||
EndProject
|
|
||||||
Global
|
Global
|
||||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||||
Debug|Any CPU = Debug|Any CPU
|
Debug|Any CPU = Debug|Any CPU
|
||||||
@@ -110,18 +108,6 @@ Global
|
|||||||
{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Release|x64.Build.0 = Release|Any CPU
|
{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Release|x64.Build.0 = Release|Any CPU
|
||||||
{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Release|x86.ActiveCfg = Release|Any CPU
|
{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Release|x86.ActiveCfg = Release|Any CPU
|
||||||
{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Release|x86.Build.0 = Release|Any CPU
|
{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Release|x86.Build.0 = Release|Any CPU
|
||||||
{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
|
|
||||||
{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Debug|Any CPU.Build.0 = Debug|Any CPU
|
|
||||||
{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Debug|x64.ActiveCfg = Debug|Any CPU
|
|
||||||
{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Debug|x64.Build.0 = Debug|Any CPU
|
|
||||||
{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Debug|x86.ActiveCfg = Debug|Any CPU
|
|
||||||
{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Debug|x86.Build.0 = Debug|Any CPU
|
|
||||||
{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Release|Any CPU.ActiveCfg = Release|Any CPU
|
|
||||||
{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Release|Any CPU.Build.0 = Release|Any CPU
|
|
||||||
{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Release|x64.ActiveCfg = Release|Any CPU
|
|
||||||
{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Release|x64.Build.0 = Release|Any CPU
|
|
||||||
{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Release|x86.ActiveCfg = Release|Any CPU
|
|
||||||
{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Release|x86.Build.0 = Release|Any CPU
|
|
||||||
EndGlobalSection
|
EndGlobalSection
|
||||||
GlobalSection(SolutionProperties) = preSolution
|
GlobalSection(SolutionProperties) = preSolution
|
||||||
HideSolutionNode = FALSE
|
HideSolutionNode = FALSE
|
||||||
|
|||||||
@@ -1,15 +0,0 @@
|
|||||||
<Project Sdk="Microsoft.NET.Sdk.Web">
|
|
||||||
|
|
||||||
<PropertyGroup>
|
|
||||||
<TargetFramework>net10.0</TargetFramework>
|
|
||||||
<Nullable>enable</Nullable>
|
|
||||||
<ImplicitUsings>enable</ImplicitUsings>
|
|
||||||
<BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
|
|
||||||
</PropertyGroup>
|
|
||||||
|
|
||||||
<ItemGroup>
|
|
||||||
<ProjectReference Include="..\Model\Model.csproj"/>
|
|
||||||
<ProjectReference Include="..\Shared\Shared.csproj"/>
|
|
||||||
</ItemGroup>
|
|
||||||
|
|
||||||
</Project>
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
||||||
<base href="/"/>
|
|
||||||
<ResourcePreloader/>
|
|
||||||
<link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]"/>
|
|
||||||
<link rel="stylesheet" href="@Assets["app.css"]"/>
|
|
||||||
<link rel="stylesheet" href="@Assets["Cloud.styles.css"]"/>
|
|
||||||
<ImportMap/>
|
|
||||||
<link rel="icon" type="image/png" href="favicon.png"/>
|
|
||||||
<HeadOutlet/>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<Routes/>
|
|
||||||
<ReconnectModal/>
|
|
||||||
<script src="@Assets["_framework/blazor.web.js"]"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
@inherits LayoutComponentBase
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
<div class="sidebar">
|
|
||||||
<NavMenu/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<div class="top-row px-4">
|
|
||||||
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<article class="content px-4">
|
|
||||||
@Body
|
|
||||||
</article>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="blazor-error-ui" data-nosnippet>
|
|
||||||
An unhandled error has occurred.
|
|
||||||
<a href="." class="reload">Reload</a>
|
|
||||||
<span class="dismiss">🗙</span>
|
|
||||||
</div>
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
.page {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-row {
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
border-bottom: 1px solid #d6d5d5;
|
|
||||||
justify-content: flex-end;
|
|
||||||
height: 3.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
|
||||||
white-space: nowrap;
|
|
||||||
margin-left: 1.5rem;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-row ::deep a:first-child {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640.98px) {
|
|
||||||
.top-row {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 641px) {
|
|
||||||
.page {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
height: 100vh;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-row {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-row.auth ::deep a:first-child {
|
|
||||||
flex: 1;
|
|
||||||
text-align: right;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-row, article {
|
|
||||||
padding-left: 2rem !important;
|
|
||||||
padding-right: 1.5rem !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#blazor-error-ui {
|
|
||||||
color-scheme: light only;
|
|
||||||
background: lightyellow;
|
|
||||||
bottom: 0;
|
|
||||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: none;
|
|
||||||
left: 0;
|
|
||||||
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#blazor-error-ui .dismiss {
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
right: 0.75rem;
|
|
||||||
top: 0.5rem;
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
<div class="top-row ps-3 navbar navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="">Cloud</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input type="checkbox" title="Navigation menu" class="navbar-toggler"/>
|
|
||||||
|
|
||||||
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
|
|
||||||
<nav class="nav flex-column">
|
|
||||||
<div class="nav-item px-3">
|
|
||||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
|
||||||
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
|
|
||||||
</NavLink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-item px-3">
|
|
||||||
<NavLink class="nav-link" href="counter">
|
|
||||||
<span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
|
|
||||||
</NavLink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-item px-3">
|
|
||||||
<NavLink class="nav-link" href="weather">
|
|
||||||
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
|
|
||||||
</NavLink>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
@@ -1,105 +0,0 @@
|
|||||||
.navbar-toggler {
|
|
||||||
appearance: none;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 3.5rem;
|
|
||||||
height: 2.5rem;
|
|
||||||
color: white;
|
|
||||||
position: absolute;
|
|
||||||
top: 0.5rem;
|
|
||||||
right: 1rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggler:checked {
|
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-row {
|
|
||||||
min-height: 3.5rem;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bi {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
width: 1.25rem;
|
|
||||||
height: 1.25rem;
|
|
||||||
margin-right: 0.75rem;
|
|
||||||
top: -1px;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bi-house-door-fill-nav-menu {
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
|
|
||||||
}
|
|
||||||
|
|
||||||
.bi-plus-square-fill-nav-menu {
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
|
|
||||||
}
|
|
||||||
|
|
||||||
.bi-list-nested-nav-menu {
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item:first-of-type {
|
|
||||||
padding-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item:last-of-type {
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item ::deep .nav-link {
|
|
||||||
color: #d7d7d7;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
height: 3rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 3rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item ::deep a.active {
|
|
||||||
background-color: rgba(255, 255, 255, 0.37);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item ::deep .nav-link:hover {
|
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-scrollable {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggler:checked ~ .nav-scrollable {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 641px) {
|
|
||||||
.navbar-toggler {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-scrollable {
|
|
||||||
/* Never collapse the sidebar for wide screens */
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
/* Allow sidebar to scroll for tall menus */
|
|
||||||
height: calc(100vh - 3.5rem);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
<script type="module" src="@Assets["Components/Layout/ReconnectModal.razor.js"]"></script>
|
|
||||||
|
|
||||||
<dialog id="components-reconnect-modal" data-nosnippet>
|
|
||||||
<div class="components-reconnect-container">
|
|
||||||
<div class="components-rejoining-animation" aria-hidden="true">
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
<p class="components-reconnect-first-attempt-visible">
|
|
||||||
Rejoining the server...
|
|
||||||
</p>
|
|
||||||
<p class="components-reconnect-repeated-attempt-visible">
|
|
||||||
Rejoin failed... trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
|
|
||||||
</p>
|
|
||||||
<p class="components-reconnect-failed-visible">
|
|
||||||
Failed to rejoin.<br/>Please retry or reload the page.
|
|
||||||
</p>
|
|
||||||
<button id="components-reconnect-button" class="components-reconnect-failed-visible">
|
|
||||||
Retry
|
|
||||||
</button>
|
|
||||||
<p class="components-pause-visible">
|
|
||||||
The session has been paused by the server.
|
|
||||||
</p>
|
|
||||||
<p class="components-resume-failed-visible">
|
|
||||||
Failed to resume the session.<br/>Please retry or reload the page.
|
|
||||||
</p>
|
|
||||||
<button id="components-resume-button" class="components-pause-visible components-resume-failed-visible">
|
|
||||||
Resume
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
@@ -1,156 +0,0 @@
|
|||||||
.components-reconnect-first-attempt-visible,
|
|
||||||
.components-reconnect-repeated-attempt-visible,
|
|
||||||
.components-reconnect-failed-visible,
|
|
||||||
.components-pause-visible,
|
|
||||||
.components-resume-failed-visible,
|
|
||||||
.components-rejoining-animation {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
|
|
||||||
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
|
|
||||||
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
|
|
||||||
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
|
|
||||||
#components-reconnect-modal.components-reconnect-retrying,
|
|
||||||
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
|
|
||||||
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
|
|
||||||
#components-reconnect-modal.components-reconnect-failed,
|
|
||||||
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#components-reconnect-modal {
|
|
||||||
background-color: white;
|
|
||||||
width: 20rem;
|
|
||||||
margin: 20vh auto;
|
|
||||||
padding: 2rem;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
|
|
||||||
opacity: 0;
|
|
||||||
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
|
|
||||||
animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
|
|
||||||
|
|
||||||
&[open] {
|
|
||||||
animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
|
|
||||||
animation-fill-mode: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#components-reconnect-modal::backdrop {
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes components-reconnect-modal-slideUp {
|
|
||||||
0% {
|
|
||||||
transform: translateY(30px) scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes components-reconnect-modal-fadeInOpacity {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes components-reconnect-modal-fadeOutOpacity {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-reconnect-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#components-reconnect-modal p {
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#components-reconnect-modal button {
|
|
||||||
border: 0;
|
|
||||||
background-color: #6b9ed2;
|
|
||||||
color: white;
|
|
||||||
padding: 4px 24px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#components-reconnect-modal button:hover {
|
|
||||||
background-color: #3b6ea2;
|
|
||||||
}
|
|
||||||
|
|
||||||
#components-reconnect-modal button:active {
|
|
||||||
background-color: #6b9ed2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-rejoining-animation {
|
|
||||||
position: relative;
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-rejoining-animation div {
|
|
||||||
position: absolute;
|
|
||||||
border: 3px solid #0087ff;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-rejoining-animation div:nth-child(2) {
|
|
||||||
animation-delay: -0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes components-rejoining-animation {
|
|
||||||
0% {
|
|
||||||
top: 40px;
|
|
||||||
left: 40px;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
4.9% {
|
|
||||||
top: 40px;
|
|
||||||
left: 40px;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
5% {
|
|
||||||
top: 40px;
|
|
||||||
left: 40px;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
// Set up event handlers
|
|
||||||
const reconnectModal = document.getElementById("components-reconnect-modal");
|
|
||||||
reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);
|
|
||||||
|
|
||||||
const retryButton = document.getElementById("components-reconnect-button");
|
|
||||||
retryButton.addEventListener("click", retry);
|
|
||||||
|
|
||||||
const resumeButton = document.getElementById("components-resume-button");
|
|
||||||
resumeButton.addEventListener("click", resume);
|
|
||||||
|
|
||||||
function handleReconnectStateChanged(event) {
|
|
||||||
if (event.detail.state === "show") {
|
|
||||||
reconnectModal.showModal();
|
|
||||||
} else if (event.detail.state === "hide") {
|
|
||||||
reconnectModal.close();
|
|
||||||
} else if (event.detail.state === "failed") {
|
|
||||||
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
|
||||||
} else if (event.detail.state === "rejected") {
|
|
||||||
location.reload();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function retry() {
|
|
||||||
document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Reconnect will asynchronously return:
|
|
||||||
// - true to mean success
|
|
||||||
// - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
|
|
||||||
// - exception to mean we didn't reach the server (this can be sync or async)
|
|
||||||
const successful = await Blazor.reconnect();
|
|
||||||
if (!successful) {
|
|
||||||
// We have been able to reach the server, but the circuit is no longer available.
|
|
||||||
// We'll reload the page so the user can continue using the app as quickly as possible.
|
|
||||||
const resumeSuccessful = await Blazor.resumeCircuit();
|
|
||||||
if (!resumeSuccessful) {
|
|
||||||
location.reload();
|
|
||||||
} else {
|
|
||||||
reconnectModal.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
// We got an exception, server is currently unavailable
|
|
||||||
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function resume() {
|
|
||||||
try {
|
|
||||||
const successful = await Blazor.resumeCircuit();
|
|
||||||
if (!successful) {
|
|
||||||
location.reload();
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
reconnectModal.classList.replace("components-reconnect-paused", "components-reconnect-resume-failed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function retryWhenDocumentBecomesVisible() {
|
|
||||||
if (document.visibilityState === "visible") {
|
|
||||||
await retry();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
@page "/counter"
|
|
||||||
@rendermode InteractiveServer
|
|
||||||
|
|
||||||
<PageTitle>Counter</PageTitle>
|
|
||||||
|
|
||||||
<h1>Counter</h1>
|
|
||||||
|
|
||||||
<p role="status">Current count: @currentCount</p>
|
|
||||||
|
|
||||||
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
|
|
||||||
|
|
||||||
@code {
|
|
||||||
private int currentCount;
|
|
||||||
|
|
||||||
private void IncrementCount()
|
|
||||||
{
|
|
||||||
currentCount++;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
@page "/Error"
|
|
||||||
@using System.Diagnostics
|
|
||||||
|
|
||||||
<PageTitle>Error</PageTitle>
|
|
||||||
|
|
||||||
<h1 class="text-danger">Error.</h1>
|
|
||||||
<h2 class="text-danger">An error occurred while processing your request.</h2>
|
|
||||||
|
|
||||||
@if (ShowRequestId)
|
|
||||||
{
|
|
||||||
<p>
|
|
||||||
<strong>Request ID:</strong> <code>@RequestId</code>
|
|
||||||
</p>
|
|
||||||
}
|
|
||||||
|
|
||||||
<h3>Development Mode</h3>
|
|
||||||
<p>
|
|
||||||
Swapping to <strong>Development</strong> environment will display more detailed information about the error that
|
|
||||||
occurred.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
|
|
||||||
It can result in displaying sensitive information from exceptions to end users.
|
|
||||||
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong>
|
|
||||||
environment variable to <strong>Development</strong>
|
|
||||||
and restarting the app.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
@code{
|
|
||||||
[CascadingParameter] private HttpContext? HttpContext { get; set; }
|
|
||||||
|
|
||||||
private string? RequestId { get; set; }
|
|
||||||
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
|
|
||||||
|
|
||||||
protected override void OnInitialized()
|
|
||||||
{
|
|
||||||
RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
@page "/"
|
|
||||||
|
|
||||||
<PageTitle>Home</PageTitle>
|
|
||||||
|
|
||||||
<h1>Hello, world!</h1>
|
|
||||||
|
|
||||||
Welcome to your new app.
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
@page "/not-found"
|
|
||||||
@layout MainLayout
|
|
||||||
|
|
||||||
<h3>Not Found</h3>
|
|
||||||
<p>Sorry, the content you are looking for does not exist.</p>
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
@page "/weather"
|
|
||||||
@using Shared.Pages
|
|
||||||
@attribute [StreamRendering]
|
|
||||||
|
|
||||||
<Decks></Decks>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
@using Shared.Pages
|
|
||||||
@using NotFound = Cloud.Components.Pages.NotFound
|
|
||||||
<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Home).Assembly }"
|
|
||||||
NotFoundPage="typeof(NotFound)">
|
|
||||||
<Found Context="routeData">
|
|
||||||
<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)"/>
|
|
||||||
<FocusOnNavigate RouteData="routeData" Selector="h1"/>
|
|
||||||
</Found>
|
|
||||||
</Router>
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
@using System.Net.Http
|
|
||||||
@using System.Net.Http.Json
|
|
||||||
@using Microsoft.AspNetCore.Components.Forms
|
|
||||||
@using Microsoft.AspNetCore.Components.Routing
|
|
||||||
@using Microsoft.AspNetCore.Components.Web
|
|
||||||
@using static Microsoft.AspNetCore.Components.Web.RenderMode
|
|
||||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
|
||||||
@using Microsoft.JSInterop
|
|
||||||
@using Cloud
|
|
||||||
@using Cloud.Components
|
|
||||||
@using Cloud.Components.Layout
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
using Cloud.Components;
|
|
||||||
|
|
||||||
var builder = WebApplication.CreateBuilder(args);
|
|
||||||
|
|
||||||
// Add services to the container.
|
|
||||||
builder.Services.AddRazorComponents()
|
|
||||||
.AddInteractiveServerComponents();
|
|
||||||
|
|
||||||
var app = builder.Build();
|
|
||||||
|
|
||||||
// Configure the HTTP request pipeline.
|
|
||||||
if (!app.Environment.IsDevelopment())
|
|
||||||
{
|
|
||||||
app.UseExceptionHandler("/Error", true);
|
|
||||||
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
|
|
||||||
app.UseHsts();
|
|
||||||
}
|
|
||||||
|
|
||||||
app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
|
|
||||||
app.UseHttpsRedirection();
|
|
||||||
|
|
||||||
app.UseAntiforgery();
|
|
||||||
|
|
||||||
app.MapStaticAssets();
|
|
||||||
app.MapRazorComponents<App>()
|
|
||||||
.AddInteractiveServerRenderMode();
|
|
||||||
|
|
||||||
app.Run();
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
{
|
|
||||||
"$schema": "https://json.schemastore.org/launchsettings.json",
|
|
||||||
"profiles": {
|
|
||||||
"http": {
|
|
||||||
"commandName": "Project",
|
|
||||||
"dotnetRunMessages": true,
|
|
||||||
"launchBrowser": true,
|
|
||||||
"applicationUrl": "http://localhost:5230",
|
|
||||||
"environmentVariables": {
|
|
||||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"https": {
|
|
||||||
"commandName": "Project",
|
|
||||||
"dotnetRunMessages": true,
|
|
||||||
"launchBrowser": true,
|
|
||||||
"applicationUrl": "https://localhost:7086;http://localhost:5230",
|
|
||||||
"environmentVariables": {
|
|
||||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"Logging": {
|
|
||||||
"LogLevel": {
|
|
||||||
"Default": "Information",
|
|
||||||
"Microsoft.AspNetCore": "Warning"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"AllowedHosts": "*"
|
|
||||||
}
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
html, body {
|
|
||||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, .btn-link {
|
|
||||||
color: #006bb7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #1b6ec2;
|
|
||||||
border-color: #1861ac;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
|
|
||||||
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding-top: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.valid.modified:not([type=checkbox]) {
|
|
||||||
outline: 1px solid #26b050;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invalid {
|
|
||||||
outline: 1px solid #e50000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.validation-message {
|
|
||||||
color: #e50000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blazor-error-boundary {
|
|
||||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
|
|
||||||
padding: 1rem 1rem 1rem 3.7rem;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blazor-error-boundary::after {
|
|
||||||
content: "An error has occurred."
|
|
||||||
}
|
|
||||||
|
|
||||||
.darker-border-checkbox.form-check-input {
|
|
||||||
border-color: #929292;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
|
|
||||||
color: var(--bs-secondary-color);
|
|
||||||
text-align: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,609 +0,0 @@
|
|||||||
/*!
|
|
||||||
* Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
|
|
||||||
* Copyright 2011-2024 The Bootstrap Authors
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
*/
|
|
||||||
:root,
|
|
||||||
[data-bs-theme=light] {
|
|
||||||
--bs-blue: #0d6efd;
|
|
||||||
--bs-indigo: #6610f2;
|
|
||||||
--bs-purple: #6f42c1;
|
|
||||||
--bs-pink: #d63384;
|
|
||||||
--bs-red: #dc3545;
|
|
||||||
--bs-orange: #fd7e14;
|
|
||||||
--bs-yellow: #ffc107;
|
|
||||||
--bs-green: #198754;
|
|
||||||
--bs-teal: #20c997;
|
|
||||||
--bs-cyan: #0dcaf0;
|
|
||||||
--bs-black: #000;
|
|
||||||
--bs-white: #fff;
|
|
||||||
--bs-gray: #6c757d;
|
|
||||||
--bs-gray-dark: #343a40;
|
|
||||||
--bs-gray-100: #f8f9fa;
|
|
||||||
--bs-gray-200: #e9ecef;
|
|
||||||
--bs-gray-300: #dee2e6;
|
|
||||||
--bs-gray-400: #ced4da;
|
|
||||||
--bs-gray-500: #adb5bd;
|
|
||||||
--bs-gray-600: #6c757d;
|
|
||||||
--bs-gray-700: #495057;
|
|
||||||
--bs-gray-800: #343a40;
|
|
||||||
--bs-gray-900: #212529;
|
|
||||||
--bs-primary: #0d6efd;
|
|
||||||
--bs-secondary: #6c757d;
|
|
||||||
--bs-success: #198754;
|
|
||||||
--bs-info: #0dcaf0;
|
|
||||||
--bs-warning: #ffc107;
|
|
||||||
--bs-danger: #dc3545;
|
|
||||||
--bs-light: #f8f9fa;
|
|
||||||
--bs-dark: #212529;
|
|
||||||
--bs-primary-rgb: 13, 110, 253;
|
|
||||||
--bs-secondary-rgb: 108, 117, 125;
|
|
||||||
--bs-success-rgb: 25, 135, 84;
|
|
||||||
--bs-info-rgb: 13, 202, 240;
|
|
||||||
--bs-warning-rgb: 255, 193, 7;
|
|
||||||
--bs-danger-rgb: 220, 53, 69;
|
|
||||||
--bs-light-rgb: 248, 249, 250;
|
|
||||||
--bs-dark-rgb: 33, 37, 41;
|
|
||||||
--bs-primary-text-emphasis: #052c65;
|
|
||||||
--bs-secondary-text-emphasis: #2b2f32;
|
|
||||||
--bs-success-text-emphasis: #0a3622;
|
|
||||||
--bs-info-text-emphasis: #055160;
|
|
||||||
--bs-warning-text-emphasis: #664d03;
|
|
||||||
--bs-danger-text-emphasis: #58151c;
|
|
||||||
--bs-light-text-emphasis: #495057;
|
|
||||||
--bs-dark-text-emphasis: #495057;
|
|
||||||
--bs-primary-bg-subtle: #cfe2ff;
|
|
||||||
--bs-secondary-bg-subtle: #e2e3e5;
|
|
||||||
--bs-success-bg-subtle: #d1e7dd;
|
|
||||||
--bs-info-bg-subtle: #cff4fc;
|
|
||||||
--bs-warning-bg-subtle: #fff3cd;
|
|
||||||
--bs-danger-bg-subtle: #f8d7da;
|
|
||||||
--bs-light-bg-subtle: #fcfcfd;
|
|
||||||
--bs-dark-bg-subtle: #ced4da;
|
|
||||||
--bs-primary-border-subtle: #9ec5fe;
|
|
||||||
--bs-secondary-border-subtle: #c4c8cb;
|
|
||||||
--bs-success-border-subtle: #a3cfbb;
|
|
||||||
--bs-info-border-subtle: #9eeaf9;
|
|
||||||
--bs-warning-border-subtle: #ffe69c;
|
|
||||||
--bs-danger-border-subtle: #f1aeb5;
|
|
||||||
--bs-light-border-subtle: #e9ecef;
|
|
||||||
--bs-dark-border-subtle: #adb5bd;
|
|
||||||
--bs-white-rgb: 255, 255, 255;
|
|
||||||
--bs-black-rgb: 0, 0, 0;
|
|
||||||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
||||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
||||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
|
||||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
|
||||||
--bs-body-font-size: 1rem;
|
|
||||||
--bs-body-font-weight: 400;
|
|
||||||
--bs-body-line-height: 1.5;
|
|
||||||
--bs-body-color: #212529;
|
|
||||||
--bs-body-color-rgb: 33, 37, 41;
|
|
||||||
--bs-body-bg: #fff;
|
|
||||||
--bs-body-bg-rgb: 255, 255, 255;
|
|
||||||
--bs-emphasis-color: #000;
|
|
||||||
--bs-emphasis-color-rgb: 0, 0, 0;
|
|
||||||
--bs-secondary-color: rgba(33, 37, 41, 0.75);
|
|
||||||
--bs-secondary-color-rgb: 33, 37, 41;
|
|
||||||
--bs-secondary-bg: #e9ecef;
|
|
||||||
--bs-secondary-bg-rgb: 233, 236, 239;
|
|
||||||
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
|
|
||||||
--bs-tertiary-color-rgb: 33, 37, 41;
|
|
||||||
--bs-tertiary-bg: #f8f9fa;
|
|
||||||
--bs-tertiary-bg-rgb: 248, 249, 250;
|
|
||||||
--bs-heading-color: inherit;
|
|
||||||
--bs-link-color: #0d6efd;
|
|
||||||
--bs-link-color-rgb: 13, 110, 253;
|
|
||||||
--bs-link-decoration: underline;
|
|
||||||
--bs-link-hover-color: #0a58ca;
|
|
||||||
--bs-link-hover-color-rgb: 10, 88, 202;
|
|
||||||
--bs-code-color: #d63384;
|
|
||||||
--bs-highlight-color: #212529;
|
|
||||||
--bs-highlight-bg: #fff3cd;
|
|
||||||
--bs-border-width: 1px;
|
|
||||||
--bs-border-style: solid;
|
|
||||||
--bs-border-color: #dee2e6;
|
|
||||||
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
|
||||||
--bs-border-radius: 0.375rem;
|
|
||||||
--bs-border-radius-sm: 0.25rem;
|
|
||||||
--bs-border-radius-lg: 0.5rem;
|
|
||||||
--bs-border-radius-xl: 1rem;
|
|
||||||
--bs-border-radius-xxl: 2rem;
|
|
||||||
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
|
|
||||||
--bs-border-radius-pill: 50rem;
|
|
||||||
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
||||||
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
||||||
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
|
||||||
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
|
||||||
--bs-focus-ring-width: 0.25rem;
|
|
||||||
--bs-focus-ring-opacity: 0.25;
|
|
||||||
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
|
|
||||||
--bs-form-valid-color: #198754;
|
|
||||||
--bs-form-valid-border-color: #198754;
|
|
||||||
--bs-form-invalid-color: #dc3545;
|
|
||||||
--bs-form-invalid-border-color: #dc3545;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-bs-theme=dark] {
|
|
||||||
color-scheme: dark;
|
|
||||||
--bs-body-color: #dee2e6;
|
|
||||||
--bs-body-color-rgb: 222, 226, 230;
|
|
||||||
--bs-body-bg: #212529;
|
|
||||||
--bs-body-bg-rgb: 33, 37, 41;
|
|
||||||
--bs-emphasis-color: #fff;
|
|
||||||
--bs-emphasis-color-rgb: 255, 255, 255;
|
|
||||||
--bs-secondary-color: rgba(222, 226, 230, 0.75);
|
|
||||||
--bs-secondary-color-rgb: 222, 226, 230;
|
|
||||||
--bs-secondary-bg: #343a40;
|
|
||||||
--bs-secondary-bg-rgb: 52, 58, 64;
|
|
||||||
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
|
|
||||||
--bs-tertiary-color-rgb: 222, 226, 230;
|
|
||||||
--bs-tertiary-bg: #2b3035;
|
|
||||||
--bs-tertiary-bg-rgb: 43, 48, 53;
|
|
||||||
--bs-primary-text-emphasis: #6ea8fe;
|
|
||||||
--bs-secondary-text-emphasis: #a7acb1;
|
|
||||||
--bs-success-text-emphasis: #75b798;
|
|
||||||
--bs-info-text-emphasis: #6edff6;
|
|
||||||
--bs-warning-text-emphasis: #ffda6a;
|
|
||||||
--bs-danger-text-emphasis: #ea868f;
|
|
||||||
--bs-light-text-emphasis: #f8f9fa;
|
|
||||||
--bs-dark-text-emphasis: #dee2e6;
|
|
||||||
--bs-primary-bg-subtle: #031633;
|
|
||||||
--bs-secondary-bg-subtle: #161719;
|
|
||||||
--bs-success-bg-subtle: #051b11;
|
|
||||||
--bs-info-bg-subtle: #032830;
|
|
||||||
--bs-warning-bg-subtle: #332701;
|
|
||||||
--bs-danger-bg-subtle: #2c0b0e;
|
|
||||||
--bs-light-bg-subtle: #343a40;
|
|
||||||
--bs-dark-bg-subtle: #1a1d20;
|
|
||||||
--bs-primary-border-subtle: #084298;
|
|
||||||
--bs-secondary-border-subtle: #41464b;
|
|
||||||
--bs-success-border-subtle: #0f5132;
|
|
||||||
--bs-info-border-subtle: #087990;
|
|
||||||
--bs-warning-border-subtle: #997404;
|
|
||||||
--bs-danger-border-subtle: #842029;
|
|
||||||
--bs-light-border-subtle: #495057;
|
|
||||||
--bs-dark-border-subtle: #343a40;
|
|
||||||
--bs-heading-color: inherit;
|
|
||||||
--bs-link-color: #6ea8fe;
|
|
||||||
--bs-link-hover-color: #8bb9fe;
|
|
||||||
--bs-link-color-rgb: 110, 168, 254;
|
|
||||||
--bs-link-hover-color-rgb: 139, 185, 254;
|
|
||||||
--bs-code-color: #e685b5;
|
|
||||||
--bs-highlight-color: #dee2e6;
|
|
||||||
--bs-highlight-bg: #664d03;
|
|
||||||
--bs-border-color: #495057;
|
|
||||||
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
|
||||||
--bs-form-valid-color: #75b798;
|
|
||||||
--bs-form-valid-border-color: #75b798;
|
|
||||||
--bs-form-invalid-color: #ea868f;
|
|
||||||
--bs-form-invalid-border-color: #ea868f;
|
|
||||||
}
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
:root {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: var(--bs-body-font-family);
|
|
||||||
font-size: var(--bs-body-font-size);
|
|
||||||
font-weight: var(--bs-body-font-weight);
|
|
||||||
line-height: var(--bs-body-line-height);
|
|
||||||
color: var(--bs-body-color);
|
|
||||||
text-align: var(--bs-body-text-align);
|
|
||||||
background-color: var(--bs-body-bg);
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin: 1rem 0;
|
|
||||||
color: inherit;
|
|
||||||
border: 0;
|
|
||||||
border-top: var(--bs-border-width) solid;
|
|
||||||
opacity: 0.25;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6, h5, h4, h3, h2, h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1.2;
|
|
||||||
color: var(--bs-heading-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: calc(1.375rem + 1.5vw);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: calc(1.325rem + 0.9vw);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
h2 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: calc(1.3rem + 0.6vw);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
h3 {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: calc(1.275rem + 0.3vw);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
h4 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
-webkit-text-decoration: underline dotted;
|
|
||||||
text-decoration: underline dotted;
|
|
||||||
cursor: help;
|
|
||||||
-webkit-text-decoration-skip-ink: none;
|
|
||||||
text-decoration-skip-ink: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
address {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol,
|
|
||||||
ul {
|
|
||||||
padding-left: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol,
|
|
||||||
ul,
|
|
||||||
dl {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol ol,
|
|
||||||
ul ul,
|
|
||||||
ol ul,
|
|
||||||
ul ol {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 0.875em;
|
|
||||||
}
|
|
||||||
|
|
||||||
mark {
|
|
||||||
padding: 0.1875em;
|
|
||||||
color: var(--bs-highlight-color);
|
|
||||||
background-color: var(--bs-highlight-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
position: relative;
|
|
||||||
font-size: 0.75em;
|
|
||||||
line-height: 0;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre,
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
font-family: var(--bs-font-monospace);
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
display: block;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
overflow: auto;
|
|
||||||
font-size: 0.875em;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre code {
|
|
||||||
font-size: inherit;
|
|
||||||
color: inherit;
|
|
||||||
word-break: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-size: 0.875em;
|
|
||||||
color: var(--bs-code-color);
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
a > code {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
kbd {
|
|
||||||
padding: 0.1875rem 0.375rem;
|
|
||||||
font-size: 0.875em;
|
|
||||||
color: var(--bs-body-bg);
|
|
||||||
background-color: var(--bs-body-color);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
kbd kbd {
|
|
||||||
padding: 0;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
svg {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
caption-side: bottom;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
caption {
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
color: var(--bs-secondary-color);
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
text-align: inherit;
|
|
||||||
text-align: -webkit-match-parent;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead,
|
|
||||||
tbody,
|
|
||||||
tfoot,
|
|
||||||
tr,
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
border-color: inherit;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus:not(:focus-visible) {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
button,
|
|
||||||
select,
|
|
||||||
optgroup,
|
|
||||||
textarea {
|
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
select {
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
[role=button] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
word-wrap: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
select:disabled {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit] {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:not(:disabled),
|
|
||||||
[type=button]:not(:disabled),
|
|
||||||
[type=reset]:not(:disabled),
|
|
||||||
[type=submit]:not(:disabled) {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-focus-inner {
|
|
||||||
padding: 0;
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: calc(1.275rem + 0.3vw);
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
legend {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
legend + * {
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-datetime-edit-fields-wrapper,
|
|
||||||
::-webkit-datetime-edit-text,
|
|
||||||
::-webkit-datetime-edit-minute,
|
|
||||||
::-webkit-datetime-edit-hour-field,
|
|
||||||
::-webkit-datetime-edit-day-field,
|
|
||||||
::-webkit-datetime-edit-month-field,
|
|
||||||
::-webkit-datetime-edit-year-field {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-inner-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=search] {
|
|
||||||
-webkit-appearance: textfield;
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* rtl:raw:
|
|
||||||
[type="tel"],
|
|
||||||
[type="url"],
|
|
||||||
[type="email"],
|
|
||||||
[type="number"] {
|
|
||||||
direction: ltr;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-color-swatch-wrapper {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
|
||||||
font: inherit;
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
|
|
||||||
::file-selector-button {
|
|
||||||
font: inherit;
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
|
|
||||||
output {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
progress {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
[hidden] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,608 +0,0 @@
|
|||||||
/*!
|
|
||||||
* Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
|
|
||||||
* Copyright 2011-2024 The Bootstrap Authors
|
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
||||||
*/
|
|
||||||
:root,
|
|
||||||
[data-bs-theme=light] {
|
|
||||||
--bs-blue: #0d6efd;
|
|
||||||
--bs-indigo: #6610f2;
|
|
||||||
--bs-purple: #6f42c1;
|
|
||||||
--bs-pink: #d63384;
|
|
||||||
--bs-red: #dc3545;
|
|
||||||
--bs-orange: #fd7e14;
|
|
||||||
--bs-yellow: #ffc107;
|
|
||||||
--bs-green: #198754;
|
|
||||||
--bs-teal: #20c997;
|
|
||||||
--bs-cyan: #0dcaf0;
|
|
||||||
--bs-black: #000;
|
|
||||||
--bs-white: #fff;
|
|
||||||
--bs-gray: #6c757d;
|
|
||||||
--bs-gray-dark: #343a40;
|
|
||||||
--bs-gray-100: #f8f9fa;
|
|
||||||
--bs-gray-200: #e9ecef;
|
|
||||||
--bs-gray-300: #dee2e6;
|
|
||||||
--bs-gray-400: #ced4da;
|
|
||||||
--bs-gray-500: #adb5bd;
|
|
||||||
--bs-gray-600: #6c757d;
|
|
||||||
--bs-gray-700: #495057;
|
|
||||||
--bs-gray-800: #343a40;
|
|
||||||
--bs-gray-900: #212529;
|
|
||||||
--bs-primary: #0d6efd;
|
|
||||||
--bs-secondary: #6c757d;
|
|
||||||
--bs-success: #198754;
|
|
||||||
--bs-info: #0dcaf0;
|
|
||||||
--bs-warning: #ffc107;
|
|
||||||
--bs-danger: #dc3545;
|
|
||||||
--bs-light: #f8f9fa;
|
|
||||||
--bs-dark: #212529;
|
|
||||||
--bs-primary-rgb: 13, 110, 253;
|
|
||||||
--bs-secondary-rgb: 108, 117, 125;
|
|
||||||
--bs-success-rgb: 25, 135, 84;
|
|
||||||
--bs-info-rgb: 13, 202, 240;
|
|
||||||
--bs-warning-rgb: 255, 193, 7;
|
|
||||||
--bs-danger-rgb: 220, 53, 69;
|
|
||||||
--bs-light-rgb: 248, 249, 250;
|
|
||||||
--bs-dark-rgb: 33, 37, 41;
|
|
||||||
--bs-primary-text-emphasis: #052c65;
|
|
||||||
--bs-secondary-text-emphasis: #2b2f32;
|
|
||||||
--bs-success-text-emphasis: #0a3622;
|
|
||||||
--bs-info-text-emphasis: #055160;
|
|
||||||
--bs-warning-text-emphasis: #664d03;
|
|
||||||
--bs-danger-text-emphasis: #58151c;
|
|
||||||
--bs-light-text-emphasis: #495057;
|
|
||||||
--bs-dark-text-emphasis: #495057;
|
|
||||||
--bs-primary-bg-subtle: #cfe2ff;
|
|
||||||
--bs-secondary-bg-subtle: #e2e3e5;
|
|
||||||
--bs-success-bg-subtle: #d1e7dd;
|
|
||||||
--bs-info-bg-subtle: #cff4fc;
|
|
||||||
--bs-warning-bg-subtle: #fff3cd;
|
|
||||||
--bs-danger-bg-subtle: #f8d7da;
|
|
||||||
--bs-light-bg-subtle: #fcfcfd;
|
|
||||||
--bs-dark-bg-subtle: #ced4da;
|
|
||||||
--bs-primary-border-subtle: #9ec5fe;
|
|
||||||
--bs-secondary-border-subtle: #c4c8cb;
|
|
||||||
--bs-success-border-subtle: #a3cfbb;
|
|
||||||
--bs-info-border-subtle: #9eeaf9;
|
|
||||||
--bs-warning-border-subtle: #ffe69c;
|
|
||||||
--bs-danger-border-subtle: #f1aeb5;
|
|
||||||
--bs-light-border-subtle: #e9ecef;
|
|
||||||
--bs-dark-border-subtle: #adb5bd;
|
|
||||||
--bs-white-rgb: 255, 255, 255;
|
|
||||||
--bs-black-rgb: 0, 0, 0;
|
|
||||||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
||||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
||||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
|
||||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
|
||||||
--bs-body-font-size: 1rem;
|
|
||||||
--bs-body-font-weight: 400;
|
|
||||||
--bs-body-line-height: 1.5;
|
|
||||||
--bs-body-color: #212529;
|
|
||||||
--bs-body-color-rgb: 33, 37, 41;
|
|
||||||
--bs-body-bg: #fff;
|
|
||||||
--bs-body-bg-rgb: 255, 255, 255;
|
|
||||||
--bs-emphasis-color: #000;
|
|
||||||
--bs-emphasis-color-rgb: 0, 0, 0;
|
|
||||||
--bs-secondary-color: rgba(33, 37, 41, 0.75);
|
|
||||||
--bs-secondary-color-rgb: 33, 37, 41;
|
|
||||||
--bs-secondary-bg: #e9ecef;
|
|
||||||
--bs-secondary-bg-rgb: 233, 236, 239;
|
|
||||||
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
|
|
||||||
--bs-tertiary-color-rgb: 33, 37, 41;
|
|
||||||
--bs-tertiary-bg: #f8f9fa;
|
|
||||||
--bs-tertiary-bg-rgb: 248, 249, 250;
|
|
||||||
--bs-heading-color: inherit;
|
|
||||||
--bs-link-color: #0d6efd;
|
|
||||||
--bs-link-color-rgb: 13, 110, 253;
|
|
||||||
--bs-link-decoration: underline;
|
|
||||||
--bs-link-hover-color: #0a58ca;
|
|
||||||
--bs-link-hover-color-rgb: 10, 88, 202;
|
|
||||||
--bs-code-color: #d63384;
|
|
||||||
--bs-highlight-color: #212529;
|
|
||||||
--bs-highlight-bg: #fff3cd;
|
|
||||||
--bs-border-width: 1px;
|
|
||||||
--bs-border-style: solid;
|
|
||||||
--bs-border-color: #dee2e6;
|
|
||||||
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
|
||||||
--bs-border-radius: 0.375rem;
|
|
||||||
--bs-border-radius-sm: 0.25rem;
|
|
||||||
--bs-border-radius-lg: 0.5rem;
|
|
||||||
--bs-border-radius-xl: 1rem;
|
|
||||||
--bs-border-radius-xxl: 2rem;
|
|
||||||
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
|
|
||||||
--bs-border-radius-pill: 50rem;
|
|
||||||
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
||||||
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
||||||
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
|
||||||
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
|
||||||
--bs-focus-ring-width: 0.25rem;
|
|
||||||
--bs-focus-ring-opacity: 0.25;
|
|
||||||
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
|
|
||||||
--bs-form-valid-color: #198754;
|
|
||||||
--bs-form-valid-border-color: #198754;
|
|
||||||
--bs-form-invalid-color: #dc3545;
|
|
||||||
--bs-form-invalid-border-color: #dc3545;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-bs-theme=dark] {
|
|
||||||
color-scheme: dark;
|
|
||||||
--bs-body-color: #dee2e6;
|
|
||||||
--bs-body-color-rgb: 222, 226, 230;
|
|
||||||
--bs-body-bg: #212529;
|
|
||||||
--bs-body-bg-rgb: 33, 37, 41;
|
|
||||||
--bs-emphasis-color: #fff;
|
|
||||||
--bs-emphasis-color-rgb: 255, 255, 255;
|
|
||||||
--bs-secondary-color: rgba(222, 226, 230, 0.75);
|
|
||||||
--bs-secondary-color-rgb: 222, 226, 230;
|
|
||||||
--bs-secondary-bg: #343a40;
|
|
||||||
--bs-secondary-bg-rgb: 52, 58, 64;
|
|
||||||
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
|
|
||||||
--bs-tertiary-color-rgb: 222, 226, 230;
|
|
||||||
--bs-tertiary-bg: #2b3035;
|
|
||||||
--bs-tertiary-bg-rgb: 43, 48, 53;
|
|
||||||
--bs-primary-text-emphasis: #6ea8fe;
|
|
||||||
--bs-secondary-text-emphasis: #a7acb1;
|
|
||||||
--bs-success-text-emphasis: #75b798;
|
|
||||||
--bs-info-text-emphasis: #6edff6;
|
|
||||||
--bs-warning-text-emphasis: #ffda6a;
|
|
||||||
--bs-danger-text-emphasis: #ea868f;
|
|
||||||
--bs-light-text-emphasis: #f8f9fa;
|
|
||||||
--bs-dark-text-emphasis: #dee2e6;
|
|
||||||
--bs-primary-bg-subtle: #031633;
|
|
||||||
--bs-secondary-bg-subtle: #161719;
|
|
||||||
--bs-success-bg-subtle: #051b11;
|
|
||||||
--bs-info-bg-subtle: #032830;
|
|
||||||
--bs-warning-bg-subtle: #332701;
|
|
||||||
--bs-danger-bg-subtle: #2c0b0e;
|
|
||||||
--bs-light-bg-subtle: #343a40;
|
|
||||||
--bs-dark-bg-subtle: #1a1d20;
|
|
||||||
--bs-primary-border-subtle: #084298;
|
|
||||||
--bs-secondary-border-subtle: #41464b;
|
|
||||||
--bs-success-border-subtle: #0f5132;
|
|
||||||
--bs-info-border-subtle: #087990;
|
|
||||||
--bs-warning-border-subtle: #997404;
|
|
||||||
--bs-danger-border-subtle: #842029;
|
|
||||||
--bs-light-border-subtle: #495057;
|
|
||||||
--bs-dark-border-subtle: #343a40;
|
|
||||||
--bs-heading-color: inherit;
|
|
||||||
--bs-link-color: #6ea8fe;
|
|
||||||
--bs-link-hover-color: #8bb9fe;
|
|
||||||
--bs-link-color-rgb: 110, 168, 254;
|
|
||||||
--bs-link-hover-color-rgb: 139, 185, 254;
|
|
||||||
--bs-code-color: #e685b5;
|
|
||||||
--bs-highlight-color: #dee2e6;
|
|
||||||
--bs-highlight-bg: #664d03;
|
|
||||||
--bs-border-color: #495057;
|
|
||||||
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
|
||||||
--bs-form-valid-color: #75b798;
|
|
||||||
--bs-form-valid-border-color: #75b798;
|
|
||||||
--bs-form-invalid-color: #ea868f;
|
|
||||||
--bs-form-invalid-border-color: #ea868f;
|
|
||||||
}
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
:root {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: var(--bs-body-font-family);
|
|
||||||
font-size: var(--bs-body-font-size);
|
|
||||||
font-weight: var(--bs-body-font-weight);
|
|
||||||
line-height: var(--bs-body-line-height);
|
|
||||||
color: var(--bs-body-color);
|
|
||||||
text-align: var(--bs-body-text-align);
|
|
||||||
background-color: var(--bs-body-bg);
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin: 1rem 0;
|
|
||||||
color: inherit;
|
|
||||||
border: 0;
|
|
||||||
border-top: var(--bs-border-width) solid;
|
|
||||||
opacity: 0.25;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6, h5, h4, h3, h2, h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1.2;
|
|
||||||
color: var(--bs-heading-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: calc(1.375rem + 1.5vw);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: calc(1.325rem + 0.9vw);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
h2 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: calc(1.3rem + 0.6vw);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
h3 {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: calc(1.275rem + 0.3vw);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
h4 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
-webkit-text-decoration: underline dotted;
|
|
||||||
text-decoration: underline dotted;
|
|
||||||
cursor: help;
|
|
||||||
-webkit-text-decoration-skip-ink: none;
|
|
||||||
text-decoration-skip-ink: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
address {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol,
|
|
||||||
ul {
|
|
||||||
padding-right: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol,
|
|
||||||
ul,
|
|
||||||
dl {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol ol,
|
|
||||||
ul ul,
|
|
||||||
ol ul,
|
|
||||||
ul ol {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 0.875em;
|
|
||||||
}
|
|
||||||
|
|
||||||
mark {
|
|
||||||
padding: 0.1875em;
|
|
||||||
color: var(--bs-highlight-color);
|
|
||||||
background-color: var(--bs-highlight-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
position: relative;
|
|
||||||
font-size: 0.75em;
|
|
||||||
line-height: 0;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre,
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
font-family: var(--bs-font-monospace);
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
display: block;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
overflow: auto;
|
|
||||||
font-size: 0.875em;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre code {
|
|
||||||
font-size: inherit;
|
|
||||||
color: inherit;
|
|
||||||
word-break: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-size: 0.875em;
|
|
||||||
color: var(--bs-code-color);
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
a > code {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
kbd {
|
|
||||||
padding: 0.1875rem 0.375rem;
|
|
||||||
font-size: 0.875em;
|
|
||||||
color: var(--bs-body-bg);
|
|
||||||
background-color: var(--bs-body-color);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
kbd kbd {
|
|
||||||
padding: 0;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
svg {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
caption-side: bottom;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
caption {
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
color: var(--bs-secondary-color);
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
text-align: inherit;
|
|
||||||
text-align: -webkit-match-parent;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead,
|
|
||||||
tbody,
|
|
||||||
tfoot,
|
|
||||||
tr,
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
border-color: inherit;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus:not(:focus-visible) {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
button,
|
|
||||||
select,
|
|
||||||
optgroup,
|
|
||||||
textarea {
|
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
select {
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
[role=button] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
word-wrap: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
select:disabled {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit] {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:not(:disabled),
|
|
||||||
[type=button]:not(:disabled),
|
|
||||||
[type=reset]:not(:disabled),
|
|
||||||
[type=submit]:not(:disabled) {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-focus-inner {
|
|
||||||
padding: 0;
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
float: right;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: calc(1.275rem + 0.3vw);
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
legend {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
legend + * {
|
|
||||||
clear: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-datetime-edit-fields-wrapper,
|
|
||||||
::-webkit-datetime-edit-text,
|
|
||||||
::-webkit-datetime-edit-minute,
|
|
||||||
::-webkit-datetime-edit-hour-field,
|
|
||||||
::-webkit-datetime-edit-day-field,
|
|
||||||
::-webkit-datetime-edit-month-field,
|
|
||||||
::-webkit-datetime-edit-year-field {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-inner-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=search] {
|
|
||||||
-webkit-appearance: textfield;
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type="tel"],
|
|
||||||
[type="url"],
|
|
||||||
[type="email"],
|
|
||||||
[type="number"] {
|
|
||||||
direction: ltr;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-color-swatch-wrapper {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
|
||||||
font: inherit;
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
|
|
||||||
::file-selector-button {
|
|
||||||
font: inherit;
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
|
|
||||||
output {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
progress {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
[hidden] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
-1
File diff suppressed because one or more lines are too long
-13721
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
-4684
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,5 +1,6 @@
|
|||||||
using Chrono.Model;
|
using Chrono.Model;
|
||||||
using Microsoft.EntityFrameworkCore;
|
using Microsoft.EntityFrameworkCore;
|
||||||
|
using Server.Models;
|
||||||
|
|
||||||
namespace Server;
|
namespace Server;
|
||||||
|
|
||||||
@@ -10,9 +11,17 @@ public class AppDbContext : DbContext
|
|||||||
}
|
}
|
||||||
|
|
||||||
public DbSet<CardNote> CardNotes { get; set; }
|
public DbSet<CardNote> CardNotes { get; set; }
|
||||||
|
public DbSet<UserDeck> UserDecks { get; set; }
|
||||||
|
|
||||||
protected override void OnModelCreating(ModelBuilder modelBuilder)
|
protected override void OnModelCreating(ModelBuilder modelBuilder)
|
||||||
{
|
{
|
||||||
modelBuilder.Entity<CardNote>().HasKey(n => n.CardName);
|
modelBuilder.Entity<CardNote>().HasKey(n => n.CardName);
|
||||||
|
|
||||||
|
modelBuilder.Entity<UserDeck>(b =>
|
||||||
|
{
|
||||||
|
b.HasKey(d => d.Id);
|
||||||
|
b.Property(d => d.Cards).HasColumnType("jsonb");
|
||||||
|
b.Property(d => d.Divers).HasColumnType("jsonb");
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
using Microsoft.EntityFrameworkCore;
|
||||||
|
using Microsoft.EntityFrameworkCore.Design;
|
||||||
|
|
||||||
|
namespace Server;
|
||||||
|
|
||||||
|
public class AppDbContextFactory : IDesignTimeDbContextFactory<AppDbContext>
|
||||||
|
{
|
||||||
|
public AppDbContext CreateDbContext(string[] args)
|
||||||
|
{
|
||||||
|
var options = new DbContextOptionsBuilder<AppDbContext>()
|
||||||
|
.UseNpgsql("Host=localhost;Database=chrono;Username=postgres;Password=postgres")
|
||||||
|
.Options;
|
||||||
|
return new AppDbContext(options);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
<link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
<link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
<link href="/_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet"/>
|
<link href="/_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet"/>
|
||||||
<link href="/css/app.css" rel="stylesheet"/>
|
<link href="/css/app.css" rel="stylesheet"/>
|
||||||
<link href="/_content/Shared/Shared.styles.css" rel="stylesheet"/>
|
<link href="/Server.styles.css" rel="stylesheet"/>
|
||||||
<script defer src="/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
|
<script defer src="/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
|
||||||
<link href="/favicon.png" rel="icon" type="image/png"/>
|
<link href="/favicon.png" rel="icon" type="image/png"/>
|
||||||
<HeadOutlet/>
|
<HeadOutlet/>
|
||||||
|
|||||||
@@ -0,0 +1,282 @@
|
|||||||
|
|
||||||
|
@using System.Text.RegularExpressions
|
||||||
|
@namespace Chrono.Components
|
||||||
|
|
||||||
|
@if (Card != null)
|
||||||
|
{
|
||||||
|
<div class="modal-backdrop" @onclick="HandleBackdropClick"></div>
|
||||||
|
<div class="card-detail @(!HasImage ? "card-detail-noimg" : "")">
|
||||||
|
<button class="detail-close" @onclick="HandleClose"><i class="bi bi-x-lg"></i></button>
|
||||||
|
<div class="detail-layout @(!HasImage ? "layout-noimg" : "")">
|
||||||
|
@if (HasImage)
|
||||||
|
{
|
||||||
|
<div class="detail-image">
|
||||||
|
<img src="@Card.ImagePath" alt="@Card.Name"
|
||||||
|
onerror="this.style.display='none';this.parentElement.style.display='none'"/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div class="detail-info">
|
||||||
|
<div class="detail-header">
|
||||||
|
<h2>@Card.Name</h2>
|
||||||
|
<div class="detail-meta">
|
||||||
|
<span class="meta-badge category @Card.Category?.ToLowerInvariant()">@Card.Category</span>
|
||||||
|
@if (Card.Cost.HasValue)
|
||||||
|
{
|
||||||
|
<span class="meta-badge cost"><i class="bi bi-lightning-fill"></i> @Card.Cost</span>
|
||||||
|
}
|
||||||
|
@if (Card.Attack.HasValue)
|
||||||
|
{
|
||||||
|
<span class="meta-badge attack"><i class="bi bi-crosshair"></i> @Card.Attack</span>
|
||||||
|
}
|
||||||
|
@if (Card.Health.HasValue)
|
||||||
|
{
|
||||||
|
<span class="meta-badge health"><i class="bi bi-heart-fill"></i> @Card.Health</span>
|
||||||
|
}
|
||||||
|
@if (Card.Speed != null)
|
||||||
|
{
|
||||||
|
<span class="meta-badge speed"><i class="bi bi-wind"></i> @Card.Speed</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (Card.Faction != null)
|
||||||
|
{
|
||||||
|
<div class="detail-field">
|
||||||
|
<span class="field-label"><i class="bi bi-flag-fill"></i> Faction</span>
|
||||||
|
<span class="field-value">@Card.Faction</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (Card.Description != null)
|
||||||
|
{
|
||||||
|
<div class="detail-field description">
|
||||||
|
<span class="field-label"><i class="bi bi-chat-quote-fill"></i></span>
|
||||||
|
<span class="field-value">@RenderDescription(Card.Description)</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (Card.Set != null)
|
||||||
|
{
|
||||||
|
<div class="detail-field">
|
||||||
|
<span class="field-label"><i class="bi bi-collection"></i> Set</span>
|
||||||
|
<span class="field-value">@Card.Set</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (Card.Archetypes is { Count: > 0 })
|
||||||
|
{
|
||||||
|
<div class="detail-field">
|
||||||
|
<span class="field-label"><i class="bi bi-layers-fill"></i> Archetypes</span>
|
||||||
|
<span class="field-value">@string.Join(", ", Card.Archetypes)</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (Card.ImmortalizeWhen != null)
|
||||||
|
{
|
||||||
|
<div class="detail-field">
|
||||||
|
<span class="field-label"><i class="bi bi-star-fill"></i> Immortalize When</span>
|
||||||
|
<span class="field-value">@Card.ImmortalizeWhen</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (Card.HasImmortalize)
|
||||||
|
{
|
||||||
|
<div class="detail-field">
|
||||||
|
<span class="field-label"><i class="bi bi-arrow-right-circle-fill"></i> Immortalizes To</span>
|
||||||
|
<span class="field-value">
|
||||||
|
@foreach (var name in Card.ImmortalizeTo!)
|
||||||
|
{
|
||||||
|
var targetName = name;
|
||||||
|
var target = LookupCard(targetName);
|
||||||
|
if (target != null)
|
||||||
|
{
|
||||||
|
<button class="inline-card-btn"
|
||||||
|
@onclick="() => Navigate(target)">@targetName</button>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
@targetName
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (Card.ImmortalizeFrom != null)
|
||||||
|
{
|
||||||
|
<div class="detail-field">
|
||||||
|
<span class="field-label"><i class="bi bi-arrow-left-circle-fill"></i> Immortalizes From</span>
|
||||||
|
<span class="field-value">
|
||||||
|
@{
|
||||||
|
var fromCard = LookupCard(Card.ImmortalizeFrom);
|
||||||
|
if (fromCard != null)
|
||||||
|
{
|
||||||
|
<button class="inline-card-btn"
|
||||||
|
@onclick="() => Navigate(fromCard)">@Card.ImmortalizeFrom</button>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
@Card.ImmortalizeFrom
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (ShowNotes && Card.IsAgent)
|
||||||
|
{
|
||||||
|
<div class="detail-field note">
|
||||||
|
<span class="field-label"><i class="bi bi-pencil-fill"></i> Personal Note</span>
|
||||||
|
<textarea class="form-control note-input" @bind="currentNote" @onblur="SaveNote"
|
||||||
|
placeholder="Add a private note about this agent..."></textarea>
|
||||||
|
@if (isSaving)
|
||||||
|
{
|
||||||
|
<span class="saving-indicator">Saving...</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@code {
|
||||||
|
[Parameter] public CardData? Card { get; set; }
|
||||||
|
[Parameter] public EventCallback OnClose { get; set; }
|
||||||
|
[Parameter] public EventCallback<CardData> OnNavigate { get; set; }
|
||||||
|
[Parameter] public bool ShowNotes { get; set; }
|
||||||
|
|
||||||
|
[Inject] private HttpClient Http { get; set; } = default!;
|
||||||
|
|
||||||
|
private bool HasImage => Card?.ImageFile is { Length: > 0 } && Card.ImageFile != "placeholder.png";
|
||||||
|
|
||||||
|
private string currentNote = "";
|
||||||
|
private bool isSaving;
|
||||||
|
|
||||||
|
protected override void OnParametersSet()
|
||||||
|
{
|
||||||
|
if (Card != null && Card.IsAgent)
|
||||||
|
{
|
||||||
|
currentNote = "";
|
||||||
|
_ = LoadNote();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task LoadNote()
|
||||||
|
{
|
||||||
|
if (Card == null || !Card.IsAgent) return;
|
||||||
|
try
|
||||||
|
{
|
||||||
|
var note = await Http.GetFromJsonAsync<CardNote>($"api/notes/{Uri.EscapeDataString(Card.Name)}");
|
||||||
|
currentNote = note?.Note ?? "";
|
||||||
|
}
|
||||||
|
catch
|
||||||
|
{
|
||||||
|
currentNote = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task SaveNote()
|
||||||
|
{
|
||||||
|
if (Card == null || !Card.IsAgent) return;
|
||||||
|
|
||||||
|
isSaving = true;
|
||||||
|
try
|
||||||
|
{
|
||||||
|
await Http.PostAsJsonAsync("api/notes", new CardNote { CardName = Card.Name, Note = currentNote });
|
||||||
|
}
|
||||||
|
catch
|
||||||
|
{
|
||||||
|
}
|
||||||
|
finally
|
||||||
|
{
|
||||||
|
isSaving = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void HandleClose()
|
||||||
|
{
|
||||||
|
_ = OnClose.InvokeAsync();
|
||||||
|
}
|
||||||
|
|
||||||
|
private void HandleBackdropClick()
|
||||||
|
{
|
||||||
|
_ = OnClose.InvokeAsync();
|
||||||
|
}
|
||||||
|
|
||||||
|
private void Navigate(CardData card)
|
||||||
|
{
|
||||||
|
_ = OnNavigate.InvokeAsync(card);
|
||||||
|
}
|
||||||
|
|
||||||
|
private static CardData? LookupCard(string cardName)
|
||||||
|
{
|
||||||
|
return CardDatabase.Cards.FirstOrDefault(c =>
|
||||||
|
string.Equals(c.Name, cardName, StringComparison.OrdinalIgnoreCase));
|
||||||
|
}
|
||||||
|
|
||||||
|
private RenderFragment RenderDescription(string description)
|
||||||
|
{
|
||||||
|
return builder =>
|
||||||
|
{
|
||||||
|
var cardNames = CardDatabase.Cards
|
||||||
|
.Select(c => c.Name)
|
||||||
|
.Where(n => !string.IsNullOrWhiteSpace(n))
|
||||||
|
.OrderByDescending(n => n.Length)
|
||||||
|
.ToList();
|
||||||
|
|
||||||
|
var seq = 0;
|
||||||
|
var remaining = description;
|
||||||
|
|
||||||
|
while (!string.IsNullOrEmpty(remaining))
|
||||||
|
{
|
||||||
|
var bestIdx = -1;
|
||||||
|
string? bestName = null;
|
||||||
|
|
||||||
|
foreach (var name in cardNames)
|
||||||
|
{
|
||||||
|
var pattern = $@"\b{Regex.Escape(name)}\b";
|
||||||
|
var match = Regex.Match(remaining, pattern, RegexOptions.IgnoreCase);
|
||||||
|
|
||||||
|
if (match.Success)
|
||||||
|
{
|
||||||
|
if (bestIdx == -1 || match.Index < bestIdx)
|
||||||
|
{
|
||||||
|
bestIdx = match.Index;
|
||||||
|
bestName = match.Value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bestIdx != -1 && bestName != null)
|
||||||
|
{
|
||||||
|
if (bestIdx > 0)
|
||||||
|
builder.AddContent(seq++, remaining[..bestIdx]);
|
||||||
|
|
||||||
|
var card = LookupCard(bestName);
|
||||||
|
if (card != null)
|
||||||
|
{
|
||||||
|
builder.OpenElement(seq++, "button");
|
||||||
|
builder.AddAttribute(seq++, "class", "inline-card-btn");
|
||||||
|
builder.AddAttribute(seq++, "onclick",
|
||||||
|
EventCallback.Factory.Create(this, () => Navigate(card)));
|
||||||
|
builder.AddContent(seq++, bestName);
|
||||||
|
builder.CloseElement();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
builder.AddContent(seq++, bestName);
|
||||||
|
}
|
||||||
|
|
||||||
|
remaining = remaining[(bestIdx + bestName.Length)..];
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
builder.AddContent(seq++, remaining);
|
||||||
|
remaining = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,259 @@
|
|||||||
|
.modal-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 1040;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
animation: fade-in 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-detail {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 1050;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 0;
|
||||||
|
max-width: 720px;
|
||||||
|
width: 92vw;
|
||||||
|
max-height: 88vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
|
||||||
|
color: var(--text-primary);
|
||||||
|
animation: detail-enter 0.25s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes detail-enter {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-50%, -50%) scale(0.92);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.75rem;
|
||||||
|
right: 0.75rem;
|
||||||
|
z-index: 1;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
color: var(--text-primary);
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
transition: all var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-close:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-layout {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-image {
|
||||||
|
flex: 0 0 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-image img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── No-image layout ── */
|
||||||
|
.card-detail-noimg {
|
||||||
|
max-width: 460px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-noimg {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header h2 {
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.25rem 0.6rem;
|
||||||
|
border-radius: 100px;
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-badge.category.agent,
|
||||||
|
.meta-badge.category.immortalized {
|
||||||
|
background: rgba(79, 195, 247, 0.15);
|
||||||
|
color: #4fc3f7;
|
||||||
|
border-color: rgba(79, 195, 247, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-badge.category.spell {
|
||||||
|
background: rgba(206, 147, 216, 0.15);
|
||||||
|
color: #ce93d8;
|
||||||
|
border-color: rgba(206, 147, 216, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-badge.cost {
|
||||||
|
background: rgba(255, 215, 0, 0.12);
|
||||||
|
color: var(--gold);
|
||||||
|
border-color: rgba(255, 215, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-badge.attack {
|
||||||
|
background: rgba(239, 83, 80, 0.15);
|
||||||
|
color: #ef5350;
|
||||||
|
border-color: rgba(239, 83, 80, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-badge.health {
|
||||||
|
background: rgba(102, 187, 106, 0.15);
|
||||||
|
color: #66bb6a;
|
||||||
|
border-color: rgba(102, 187, 106, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-badge.speed {
|
||||||
|
background: rgba(79, 195, 247, 0.12);
|
||||||
|
color: #4fc3f7;
|
||||||
|
border-color: rgba(79, 195, 247, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-field {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-field.description {
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
padding: 0.6rem 0.75rem;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
border-left: 3px solid var(--accent);
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-label {
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-field.description .field-label {
|
||||||
|
min-width: auto;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-value {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-field.description .field-value {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-detail::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-detail::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-card-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent);
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
text-decoration-color: rgba(108, 99, 255, 0.3);
|
||||||
|
transition: color var(--transition), text-decoration-color var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-card-btn:hover {
|
||||||
|
color: #7b73ff;
|
||||||
|
text-decoration-color: #7b73ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.detail-layout {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-image {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
max-width: 180px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-detail,
|
||||||
|
.card-detail-noimg {
|
||||||
|
max-height: 90vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-detail-noimg {
|
||||||
|
max-width: 92vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,345 @@
|
|||||||
|
@page "/cards"
|
||||||
|
@using Shared.Services
|
||||||
|
@inject HttpClient Http
|
||||||
|
@inject AnalyticsService AnalyticsService
|
||||||
|
|
||||||
|
<PageTitle>Chrono CCG - Card Gallery</PageTitle>
|
||||||
|
|
||||||
|
<HeadContent>
|
||||||
|
<meta name="description" content="Browse and filter all Chrono CCG cards. Explore agents, spells, and more."/>
|
||||||
|
</HeadContent>
|
||||||
|
|
||||||
|
<div class="gallery-container">
|
||||||
|
<div class="gallery-header">
|
||||||
|
<h1>Card Gallery</h1>
|
||||||
|
<p class="text-secondary">Browse all @allCards.Count cards</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="category-tabs">
|
||||||
|
<button class="tab @(categoryFilter == "" ? "active" : "")" @onclick='@(() => SetCategory(""))'>
|
||||||
|
<i class="bi bi-grid-3x3-gap-fill"></i> All
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="tab agent @(categoryFilter == "Agent" ? "active" : "")" @onclick='@(() => SetCategory("Agent"))'>
|
||||||
|
<i class="bi bi-person-fill"></i> Agents
|
||||||
|
</button>
|
||||||
|
<button class="tab agent @(categoryFilter == "Immortalized" ? "active" : "")"
|
||||||
|
@onclick='@(() => SetCategory("Immortalized"))'>
|
||||||
|
<i class="bi bi-person-fill"></i> Immortalized
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="tab link-toggle @(agentLink ? "active" : "")" @onclick="ToggleAgentLink" title="Link Agents and Immortalized cards">
|
||||||
|
<i class="bi bi-link-45deg"></i>
|
||||||
|
<span>Linked</span>
|
||||||
|
<span class="toggle-switch @(agentLink ? "on" : "off")"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="category-divider"></div>
|
||||||
|
|
||||||
|
<button class="tab spell @(categoryFilter == "Spell" ? "active" : "")" @onclick='@(() => SetCategory("Spell"))'>
|
||||||
|
<i class="bi bi-wand"></i> Spells
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-bar">
|
||||||
|
<div class="search-wrapper">
|
||||||
|
<i class="bi bi-search search-icon"></i>
|
||||||
|
<input @bind="search" @bind:event="oninput" class="form-control search-input"
|
||||||
|
placeholder="Search cards by name or description..."/>
|
||||||
|
@if (search.Length > 0)
|
||||||
|
{
|
||||||
|
<button class="search-clear" @onclick="ClearSearch"><i class="bi bi-x-lg"></i></button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<select @bind="factionFilter" class="form-select filter-select">
|
||||||
|
<option value="">All Factions</option>
|
||||||
|
@foreach (var f in factions)
|
||||||
|
{
|
||||||
|
<option value="@f">@f</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
<select @bind="costFilter" class="form-select filter-select">
|
||||||
|
<option value="">All Costs</option>
|
||||||
|
@for (var i = 0; i <= 13; i++)
|
||||||
|
{
|
||||||
|
<option value="@i">@i</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
<div class="sort-group d-flex gap-1">
|
||||||
|
<select @bind="sortBy" class="form-select filter-select sort-select">
|
||||||
|
<option value="Cost">Sort by Cost</option>
|
||||||
|
<option value="Name">Sort by Name</option>
|
||||||
|
<option value="Attack">Sort by Attack</option>
|
||||||
|
<option value="Health">Sort by Health</option>
|
||||||
|
<option value="Efficiency">Sort by Efficiency</option>
|
||||||
|
</select>
|
||||||
|
<button class="btn btn-outline-secondary sort-dir-btn" @onclick="() => sortDescending = !sortDescending"
|
||||||
|
title="@(sortDescending ? "Descending" : "Ascending")">
|
||||||
|
<i class="bi bi-sort-@(sortDescending ? "down" : "up")"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button class="btn @(showDetailedView ? "btn-primary" : "btn-outline-primary") view-toggle-btn"
|
||||||
|
@onclick="() => showDetailedView = !showDetailedView" title="Toggle Detailed View">
|
||||||
|
<i class="bi bi-list-ul"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (HasActiveFilters)
|
||||||
|
{
|
||||||
|
<div class="active-filters">
|
||||||
|
<span class="filter-label">Filters:</span>
|
||||||
|
@if (categoryFilter != "")
|
||||||
|
{
|
||||||
|
<span class="filter-chip">
|
||||||
|
<i class="bi bi-tag-fill"></i> @categoryFilter
|
||||||
|
<button @onclick="ClearCategoryFilter"><i class="bi bi-x"></i></button>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
@if (factionFilter != "")
|
||||||
|
{
|
||||||
|
<span class="filter-chip">
|
||||||
|
<i class="bi bi-flag-fill"></i> @factionFilter
|
||||||
|
<button @onclick="ClearFactionFilter"><i class="bi bi-x"></i></button>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
@if (costFilter != "")
|
||||||
|
{
|
||||||
|
<span class="filter-chip">
|
||||||
|
<i class="bi bi-lightning-fill"></i> Cost @costFilter
|
||||||
|
<button @onclick="ClearCostFilter"><i class="bi bi-x"></i></button>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
<button class="clear-all" @onclick="ClearFilters">Clear all</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="result-count">
|
||||||
|
<span>@filteredCards.Count() card@(filteredCards.Count() != 1 ? "s" : "") found</span>
|
||||||
|
@if (HasActiveFilters || search != "")
|
||||||
|
{
|
||||||
|
<span class="text-muted">out of @allCards.Count total</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (filteredCards.Any())
|
||||||
|
{
|
||||||
|
<div class="card-grid @(showDetailedView ? "detailed-view" : "")">
|
||||||
|
@{ var idx = 0; }
|
||||||
|
@foreach (var card in filteredCards.Where(a => a.Category is "Agent" or "Spell" or "Immortalized"))
|
||||||
|
{
|
||||||
|
<div class="card-cell @(selectedCard == card ? "selected" : "")"
|
||||||
|
style="--i: @idx"
|
||||||
|
@onclick="() => SelectCard(card)">
|
||||||
|
<div class="card-image-wrapper">
|
||||||
|
<div class="card-shimmer"></div>
|
||||||
|
<img src="@card.ImagePath" alt="@card.Name" loading="lazy"
|
||||||
|
onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22280%22><rect fill=%22%23222244%22 width=%22200%22 height=%22280%22/><text fill=%22%23686888%22 font-size=%2214%22 x=%22100%22 y=%22140%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22>No Image</text></svg>'"/>
|
||||||
|
@if (card.IsImmortalized)
|
||||||
|
{
|
||||||
|
<div class="card-immortalize-badge" title="Immortalizes"><i class="bi bi-star-fill"></i>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
@if (showDetailedView)
|
||||||
|
{
|
||||||
|
<div class="card-label">
|
||||||
|
<div class="card-name">@card.Name</div>
|
||||||
|
<div class="card-stats">
|
||||||
|
@if (card.Attack.HasValue)
|
||||||
|
{
|
||||||
|
<span class="stat"><i class="bi bi-crosshair"></i> @card.Attack</span>
|
||||||
|
}
|
||||||
|
@if (card.Health.HasValue)
|
||||||
|
{
|
||||||
|
<span class="stat"><i class="bi bi-heart-fill"></i> @card.Health</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="card-description-preview">@card.Description</div>
|
||||||
|
<div class="card-category-badge @card.Category?.ToLowerInvariant()">@card.Category</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
idx++;
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="empty-state">
|
||||||
|
<i class="bi bi-search"></i>
|
||||||
|
<p>No cards match your filters.</p>
|
||||||
|
<button class="btn btn-outline-secondary" @onclick="ClearFilters">Reset Filters</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (selectedCard != null)
|
||||||
|
{
|
||||||
|
<CardDialog Card="selectedCard" OnClose="CloseDetail" OnNavigate="SelectCard"/>
|
||||||
|
}
|
||||||
|
|
||||||
|
@code {
|
||||||
|
private List<CardData> allCards = [];
|
||||||
|
private IEnumerable<CardData> filteredCards => ApplyFilters();
|
||||||
|
private string search = "";
|
||||||
|
private string categoryFilter = "";
|
||||||
|
private string immortalFilter = "";
|
||||||
|
private bool agentLink = true;
|
||||||
|
private string factionFilter = "";
|
||||||
|
private string costFilter = "";
|
||||||
|
private string sortBy = "Cost";
|
||||||
|
private bool sortDescending;
|
||||||
|
private bool showDetailedView;
|
||||||
|
private CardData? selectedCard;
|
||||||
|
private List<string> factions = [];
|
||||||
|
|
||||||
|
private bool HasActiveFilters => categoryFilter != "" || factionFilter != "" || costFilter != "" || immortalFilter != "";
|
||||||
|
|
||||||
|
protected override void OnInitialized()
|
||||||
|
{
|
||||||
|
allCards = CardDatabase.Cards;
|
||||||
|
factions = allCards
|
||||||
|
.Select(c => c.Faction)
|
||||||
|
.Where(f => f != null)
|
||||||
|
.Distinct()
|
||||||
|
.OrderBy(f => f)
|
||||||
|
.ToList()!;
|
||||||
|
}
|
||||||
|
|
||||||
|
private IEnumerable<CardData> ApplyFilters()
|
||||||
|
{
|
||||||
|
var primarySet = allCards.Where(c =>
|
||||||
|
c.MatchesSearch(search) &&
|
||||||
|
(categoryFilter == "" || c.Category == categoryFilter) &&
|
||||||
|
(factionFilter == "" || c.Faction == factionFilter) &&
|
||||||
|
(costFilter == "" || c.Cost?.ToString() == costFilter)
|
||||||
|
);
|
||||||
|
|
||||||
|
var sortedPrimary = sortBy switch
|
||||||
|
{
|
||||||
|
"Cost" => sortDescending ? primarySet.OrderByDescending(c => c.Cost) : primarySet.OrderBy(c => c.Cost),
|
||||||
|
"Efficiency" => sortDescending ? primarySet.OrderByDescending(c => c.StatEfficiency) : primarySet.OrderBy(c => c.StatEfficiency),
|
||||||
|
"Attack" => sortDescending ? primarySet.OrderByDescending(c => c.Attack) : primarySet.OrderBy(c => c.Attack),
|
||||||
|
"Health" => sortDescending ? primarySet.OrderByDescending(c => c.Health) : primarySet.OrderBy(c => c.Health),
|
||||||
|
_ => sortDescending ? primarySet.OrderByDescending(c => c.Name) : primarySet.OrderBy(c => c.Name)
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!agentLink)
|
||||||
|
{
|
||||||
|
return sortedPrimary;
|
||||||
|
}
|
||||||
|
|
||||||
|
var result = new List<CardData>();
|
||||||
|
var seen = new HashSet<string>();
|
||||||
|
foreach (var card in sortedPrimary)
|
||||||
|
{
|
||||||
|
if (seen.Contains(card.Name)) continue;
|
||||||
|
|
||||||
|
// Determine the "Chain Head" (the Agent)
|
||||||
|
var head = card;
|
||||||
|
if (card.Category == "Immortalized" && card.ImmortalizeFrom != null)
|
||||||
|
{
|
||||||
|
var source = allCards.FirstOrDefault(c => c.Name == card.ImmortalizeFrom);
|
||||||
|
if (source != null) head = source;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the chain starting from head
|
||||||
|
if (!seen.Contains(head.Name))
|
||||||
|
{
|
||||||
|
result.Add(head);
|
||||||
|
seen.Add(head.Name);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (head.ImmortalizeTo != null)
|
||||||
|
{
|
||||||
|
foreach (var targetName in head.ImmortalizeTo)
|
||||||
|
{
|
||||||
|
if (seen.Contains(targetName)) continue;
|
||||||
|
var linked = allCards.FirstOrDefault(c => c.Name == targetName);
|
||||||
|
if (linked != null)
|
||||||
|
{
|
||||||
|
result.Add(linked);
|
||||||
|
seen.Add(linked.Name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure the original card is added if it was somehow not part of the head's chain
|
||||||
|
if (!seen.Contains(card.Name))
|
||||||
|
{
|
||||||
|
result.Add(card);
|
||||||
|
seen.Add(card.Name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void SetImmortal(string imm)
|
||||||
|
{
|
||||||
|
immortalFilter = immortalFilter == imm ? "" : imm;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ClearImmortalFilter()
|
||||||
|
{
|
||||||
|
immortalFilter = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
private void SetCategory(string cat)
|
||||||
|
{
|
||||||
|
categoryFilter = categoryFilter == cat ? "" : cat;
|
||||||
|
_ = AnalyticsService.TrackEvent("filter_category", new { category = categoryFilter });
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ClearCategoryFilter()
|
||||||
|
{
|
||||||
|
categoryFilter = "";
|
||||||
|
_ = AnalyticsService.TrackEvent("filter_category", new { category = "All" });
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ClearFactionFilter()
|
||||||
|
{
|
||||||
|
factionFilter = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ToggleAgentLink()
|
||||||
|
{
|
||||||
|
agentLink = !agentLink;
|
||||||
|
OnToggleAgentLink();
|
||||||
|
}
|
||||||
|
|
||||||
|
private void OnToggleAgentLink()
|
||||||
|
{
|
||||||
|
_ = AnalyticsService.TrackEvent("toggle_agent_link", new { enabled = agentLink });
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ClearCostFilter()
|
||||||
|
{
|
||||||
|
costFilter = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ClearSearch()
|
||||||
|
{
|
||||||
|
search = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
private void SelectCard(CardData card)
|
||||||
|
{
|
||||||
|
selectedCard = card;
|
||||||
|
_ = AnalyticsService.TrackEvent("select_item", new { item_name = card.Name, item_category = card.Category });
|
||||||
|
}
|
||||||
|
|
||||||
|
private void CloseDetail()
|
||||||
|
{
|
||||||
|
selectedCard = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ClearFilters()
|
||||||
|
{
|
||||||
|
search = "";
|
||||||
|
categoryFilter = "";
|
||||||
|
factionFilter = "";
|
||||||
|
costFilter = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,604 @@
|
|||||||
|
.gallery-container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Header ── */
|
||||||
|
.gallery-header {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-header h1 {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-header p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Category Tabs ── */
|
||||||
|
.category-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.4rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 100px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition);
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 12px var(--accent-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active.agent {
|
||||||
|
border-color: #4fc3f7;
|
||||||
|
box-shadow: 0 0 12px rgba(79, 195, 247, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active.spell {
|
||||||
|
border-color: #ce93d8;
|
||||||
|
box-shadow: 0 0 12px rgba(206, 147, 216, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active.token {
|
||||||
|
border-color: #ffd54f;
|
||||||
|
box-shadow: 0 0 12px rgba(255, 213, 79, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab i {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-divider {
|
||||||
|
width: 1px;
|
||||||
|
height: 1.5rem;
|
||||||
|
background: var(--border);
|
||||||
|
margin: 0 0.6rem;
|
||||||
|
align-self: center;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.link-toggle {
|
||||||
|
border-style: dashed;
|
||||||
|
gap: 0.6rem;
|
||||||
|
user-select: none;
|
||||||
|
padding-right: 0.8rem;
|
||||||
|
margin-left: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.link-toggle.active {
|
||||||
|
border-style: solid;
|
||||||
|
background: rgba(108, 99, 255, 0.1);
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-switch {
|
||||||
|
width: 28px;
|
||||||
|
height: 16px;
|
||||||
|
background: var(--bg-hover);
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-switch.on {
|
||||||
|
background: var(--accent);
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-switch::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 2px;
|
||||||
|
left: 2px;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-switch.on::after {
|
||||||
|
transform: translateX(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Filter Bar ── */
|
||||||
|
.filter-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrapper {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.75rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: var(--text-muted);
|
||||||
|
z-index: 3;
|
||||||
|
pointer-events: none;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
padding-left: 2.2rem;
|
||||||
|
padding-right: 2.2rem;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-clear {
|
||||||
|
position: absolute;
|
||||||
|
right: 0.5rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-clear:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-select {
|
||||||
|
width: auto;
|
||||||
|
min-width: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Active Filter Chips ── */
|
||||||
|
.active-filters {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-label {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 100px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip i:first-child {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip button:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-all {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--accent);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-all:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Result Count ── */
|
||||||
|
.result-count {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Card Grid ── */
|
||||||
|
.card-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-grid.detailed-view {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-grid.detailed-view .card-cell {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 180px;
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-grid.detailed-view .card-image-wrapper {
|
||||||
|
width: 130px;
|
||||||
|
height: 100%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-grid.detailed-view .card-label {
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 0.75rem;
|
||||||
|
gap: 0.4rem;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-grid.detailed-view .card-name {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
white-space: normal;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-stats {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-stats .stat {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-stats .stat i {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-stats .stat:nth-child(1) {
|
||||||
|
color: #ffab40;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Attack */
|
||||||
|
.card-stats .stat:nth-child(2) {
|
||||||
|
color: #f44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Health */
|
||||||
|
|
||||||
|
.card-description-preview {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-group {
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-select {
|
||||||
|
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-dir-btn {
|
||||||
|
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||||||
|
border-left: none;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-toggle-btn {
|
||||||
|
min-width: 40px;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Card Cell ── */
|
||||||
|
.card-cell {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
animation: card-enter 0.4s ease-out both;
|
||||||
|
animation-delay: calc(var(--i, 0) * 25ms);
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-cell:hover {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
box-shadow: 0 8px 30px rgba(108, 99, 255, 0.2);
|
||||||
|
border-color: rgba(108, 99, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-cell.selected {
|
||||||
|
border-color: var(--gold);
|
||||||
|
box-shadow: 0 0 20px var(--gold-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-cell.selected:hover {
|
||||||
|
box-shadow: 0 8px 30px var(--gold-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes card-enter {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(16px) scale(0.97);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Card Image ── */
|
||||||
|
.card-image-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 5 / 7;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #111128;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-shimmer {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 2.5s infinite;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% {
|
||||||
|
background-position: -200% 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 200% 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image-wrapper img {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-cost-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.4rem;
|
||||||
|
left: 0.4rem;
|
||||||
|
background: rgba(0, 0, 0, 0.75);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
color: var(--gold);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0.15rem 0.5rem;
|
||||||
|
border-radius: 100px;
|
||||||
|
border: 1px solid rgba(255, 215, 0, 0.3);
|
||||||
|
z-index: 2;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-cost-badge::before {
|
||||||
|
content: "⚡";
|
||||||
|
margin-right: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-immortalize-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.4rem;
|
||||||
|
right: 0.4rem;
|
||||||
|
background: rgba(0, 0, 0, 0.75);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
color: var(--gold);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0.25rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 2;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid rgba(255, 215, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Card Label ── */
|
||||||
|
.card-label {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
padding: 0.4rem 0.6rem;
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
min-height: 2.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-category-badge {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.15rem 0.45rem;
|
||||||
|
border-radius: 100px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-category-badge.agent {
|
||||||
|
background: rgba(79, 195, 247, 0.15);
|
||||||
|
color: #4fc3f7;
|
||||||
|
border-color: rgba(79, 195, 247, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-category-badge.spell {
|
||||||
|
background: rgba(206, 147, 216, 0.15);
|
||||||
|
color: #ce93d8;
|
||||||
|
border-color: rgba(206, 147, 216, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-category-badge.token {
|
||||||
|
background: rgba(255, 213, 79, 0.15);
|
||||||
|
color: #ffd54f;
|
||||||
|
border-color: rgba(255, 213, 79, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Empty State ── */
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem 1rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state i {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Responsive ── */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.gallery-container {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-select {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 0.75rem;
|
||||||
|
max-width: 400px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-grid.detailed-view {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.card-grid, .card-grid.detailed-view {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 0.5rem;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-tabs {
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 0.35rem 0.65rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab i {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,434 @@
|
|||||||
|
@page "/deck-builder"
|
||||||
|
@page "/deck-builder/{Id:guid}"
|
||||||
|
@rendermode InteractiveServer
|
||||||
|
@using Chrono.Model
|
||||||
|
@inject AppDbContext Db
|
||||||
|
@inject NavigationManager Nav
|
||||||
|
|
||||||
|
<PageTitle>@(Id == null ? "New Deck" : "Edit Deck") - Chrono CCG</PageTitle>
|
||||||
|
|
||||||
|
<div class="builder-topbar">
|
||||||
|
<a href="/my-decks" class="btn btn-sm btn-outline-secondary">
|
||||||
|
<i class="bi bi-arrow-left"></i> My Decks
|
||||||
|
</a>
|
||||||
|
<input @bind="deckName" @bind:event="oninput" class="form-control deck-name-input" placeholder="Deck name..." maxlength="80"/>
|
||||||
|
<input @bind="deckSeason" @bind:event="oninput" class="form-control season-input" placeholder="Season (e.g. S1)" maxlength="20"/>
|
||||||
|
<span class="validity-badge @(IsValid ? "badge-valid" : "badge-invalid")">
|
||||||
|
<i class="bi @(IsValid ? "bi-check-circle-fill" : "bi-exclamation-circle-fill")"></i>
|
||||||
|
@ValidationMessage
|
||||||
|
</span>
|
||||||
|
<button class="btn btn-primary save-btn" @onclick="SaveDeck" disabled="@isSaving">
|
||||||
|
@if (isSaving)
|
||||||
|
{
|
||||||
|
<span class="spinner-border spinner-border-sm me-1"></span>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<i class="bi bi-floppy-fill me-1"></i>
|
||||||
|
}
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
@if (!string.IsNullOrEmpty(saveMessage))
|
||||||
|
{
|
||||||
|
<span class="save-toast @(saveError ? "save-error" : "save-ok")">@saveMessage</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="builder-layout">
|
||||||
|
|
||||||
|
<!-- LEFT: Card Browser -->
|
||||||
|
<div class="browser-panel">
|
||||||
|
<div class="category-tabs">
|
||||||
|
<button class="tab @(categoryFilter == "" ? "active" : "")" @onclick='() => categoryFilter = ""'>
|
||||||
|
<i class="bi bi-grid-3x3-gap-fill"></i> All
|
||||||
|
</button>
|
||||||
|
<button class="tab agent @(categoryFilter == "Agent" ? "active" : "")" @onclick='() => categoryFilter = "Agent"'>
|
||||||
|
<i class="bi bi-person-fill"></i> Agents
|
||||||
|
</button>
|
||||||
|
<button class="tab agent @(categoryFilter == "Immortalized" ? "active" : "")" @onclick='() => categoryFilter = "Immortalized"'>
|
||||||
|
<i class="bi bi-star-fill"></i> Immortalized
|
||||||
|
</button>
|
||||||
|
<button class="tab spell @(categoryFilter == "Spell" ? "active" : "")" @onclick='() => categoryFilter = "Spell"'>
|
||||||
|
<i class="bi bi-wand"></i> Spells
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-bar">
|
||||||
|
<div class="search-wrapper">
|
||||||
|
<i class="bi bi-search search-icon"></i>
|
||||||
|
<input @bind="search" @bind:event="oninput" class="form-control search-input" placeholder="Search cards..."/>
|
||||||
|
@if (search.Length > 0)
|
||||||
|
{
|
||||||
|
<button class="search-clear" @onclick='() => search = ""'><i class="bi bi-x-lg"></i></button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<select @bind="factionFilter" class="form-select filter-select">
|
||||||
|
<option value="">All Factions</option>
|
||||||
|
@foreach (var f in factions)
|
||||||
|
{
|
||||||
|
<option value="@f">@f</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="browser-grid">
|
||||||
|
@foreach (var card in BrowserCards)
|
||||||
|
{
|
||||||
|
var count = CountInDeck(card.Name);
|
||||||
|
var maxed = count >= 3;
|
||||||
|
<div class="browser-card @(count > 0 ? "in-deck" : "") @(maxed ? "maxed" : "")"
|
||||||
|
@onclick="() => AddCard(card)"
|
||||||
|
title="@(count > 0 ? $"{card.Name} ({count}/3)" : card.Name)">
|
||||||
|
<div class="browser-card-img">
|
||||||
|
<img src="@card.ImagePath" alt="@card.Name" loading="lazy"
|
||||||
|
onerror="this.style.display='none'"/>
|
||||||
|
@if (count > 0)
|
||||||
|
{
|
||||||
|
<span class="in-deck-count">@count</span>
|
||||||
|
}
|
||||||
|
@if (maxed)
|
||||||
|
{
|
||||||
|
<div class="maxed-overlay"><i class="bi bi-lock-fill"></i></div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="browser-card-name">@card.Name</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- RIGHT: Deck Panel -->
|
||||||
|
<div class="deck-panel">
|
||||||
|
|
||||||
|
<div class="deck-status-bar">
|
||||||
|
<span class="card-count @(deckCards.Count == 40 ? "count-ok" : deckCards.Count > 40 ? "count-over" : "count-under")">
|
||||||
|
<i class="bi bi-stack"></i> @deckCards.Count<span class="count-denom">/40</span>
|
||||||
|
</span>
|
||||||
|
<button class="btn btn-sm btn-outline-danger ms-auto" @onclick="ClearDeck" title="Clear deck">
|
||||||
|
<i class="bi bi-trash3"></i> Clear
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (deckCards.Count > 0)
|
||||||
|
{
|
||||||
|
<div class="mana-curve">
|
||||||
|
@for (var cost = 0; cost <= 10; cost++)
|
||||||
|
{
|
||||||
|
var c = cost;
|
||||||
|
var costCount = ManaCurveData.TryGetValue(c, out var v) ? v : 0;
|
||||||
|
var maxVal = ManaCurveData.Values.DefaultIfEmpty(1).Max();
|
||||||
|
var heightPct = maxVal > 0 ? costCount * 100 / maxVal : 0;
|
||||||
|
<div class="curve-col">
|
||||||
|
<div class="curve-bar-wrap">
|
||||||
|
<span class="curve-count">@(costCount > 0 ? costCount.ToString() : "")</span>
|
||||||
|
<div class="curve-bar" style="height: @heightPct%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="curve-label">@(c == 10 ? "10+" : c.ToString())</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="deck-card-list">
|
||||||
|
@if (DeckGroups.Count == 0)
|
||||||
|
{
|
||||||
|
<div class="deck-empty">
|
||||||
|
<i class="bi bi-collection"></i>
|
||||||
|
<span>Click cards on the left to add them</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
@foreach (var group in DeckGroups)
|
||||||
|
{
|
||||||
|
var cardData = group.Card;
|
||||||
|
<div class="deck-row">
|
||||||
|
<img src="@cardData.ImagePath" alt="@cardData.Name" class="deck-row-img" loading="lazy"
|
||||||
|
onerror="this.style.display='none'"/>
|
||||||
|
<span class="deck-row-name">@cardData.Name</span>
|
||||||
|
@if (cardData.Cost.HasValue)
|
||||||
|
{
|
||||||
|
<span class="deck-row-cost"><i class="bi bi-lightning-fill"></i>@cardData.Cost</span>
|
||||||
|
}
|
||||||
|
<div class="deck-row-controls">
|
||||||
|
<button class="count-btn" @onclick="() => RemoveCard(cardData.Name)">−</button>
|
||||||
|
<span class="count-display">@group.Count</span>
|
||||||
|
<button class="count-btn" @onclick="() => AddCard(cardData)" disabled="@(group.Count >= 3)">+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="divers-section">
|
||||||
|
<div class="section-header">
|
||||||
|
<i class="bi bi-person-arms-up"></i> Divers
|
||||||
|
<span class="section-count">@divers.Count(d => d != null)/2</span>
|
||||||
|
</div>
|
||||||
|
@for (var i = 0; i < 2; i++)
|
||||||
|
{
|
||||||
|
var idx = i;
|
||||||
|
var diver = idx < divers.Count ? divers[idx] : null;
|
||||||
|
<div class="diver-slot @(diver != null ? "filled" : "empty")" @onclick="() => OpenDiverPicker(idx)">
|
||||||
|
@if (diver != null)
|
||||||
|
{
|
||||||
|
var diverCard = AllCards.FirstOrDefault(c => c.Name == diver);
|
||||||
|
@if (diverCard != null)
|
||||||
|
{
|
||||||
|
<img src="@diverCard.ImagePath" class="diver-thumb" alt="@diver"
|
||||||
|
onerror="this.style.display='none'"/>
|
||||||
|
}
|
||||||
|
<span class="diver-name">@diver</span>
|
||||||
|
<button class="diver-remove" @onclick:stopPropagation="true" @onclick="() => RemoveDiver(idx)">
|
||||||
|
<i class="bi bi-x"></i>
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<i class="bi bi-plus-circle"></i>
|
||||||
|
<span>Select Diver @(idx + 1)</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="notes-section">
|
||||||
|
<div class="section-header"><i class="bi bi-pencil-fill"></i> Notes</div>
|
||||||
|
<textarea @bind="deckNotes" class="form-control notes-input" rows="4"
|
||||||
|
placeholder="Strategy notes, matchup tips, card choices..."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (showDiverPicker)
|
||||||
|
{
|
||||||
|
<div class="modal-backdrop" @onclick="CloseDiverPicker"></div>
|
||||||
|
<div class="diver-modal">
|
||||||
|
<div class="diver-modal-header">
|
||||||
|
<h5><i class="bi bi-person-arms-up"></i> Select Diver @(activeDiverSlot + 1)</h5>
|
||||||
|
<button class="btn-close" @onclick="CloseDiverPicker"></button>
|
||||||
|
</div>
|
||||||
|
<div class="filter-bar mb-2">
|
||||||
|
<div class="search-wrapper">
|
||||||
|
<i class="bi bi-search search-icon"></i>
|
||||||
|
<input @bind="diverSearch" @bind:event="oninput" class="form-control search-input" placeholder="Search..."/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="diver-picker-grid">
|
||||||
|
@foreach (var card in DiverPickerCards)
|
||||||
|
{
|
||||||
|
<div class="diver-picker-card" @onclick="() => SelectDiver(card.Name)">
|
||||||
|
<img src="@card.ImagePath" alt="@card.Name" loading="lazy" onerror="this.style.display='none'"/>
|
||||||
|
<span>@card.Name</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@code {
|
||||||
|
[Parameter] public Guid? Id { get; set; }
|
||||||
|
|
||||||
|
private List<CardData> AllCards => CardDatabase.Cards;
|
||||||
|
private List<string> factions = [];
|
||||||
|
|
||||||
|
private string deckName = "";
|
||||||
|
private string deckSeason = "";
|
||||||
|
private string deckNotes = "";
|
||||||
|
private List<string> deckCards = [];
|
||||||
|
private List<string> divers = [];
|
||||||
|
|
||||||
|
private string search = "";
|
||||||
|
private string categoryFilter = "";
|
||||||
|
private string factionFilter = "";
|
||||||
|
|
||||||
|
private bool showDiverPicker;
|
||||||
|
private int activeDiverSlot;
|
||||||
|
private string diverSearch = "";
|
||||||
|
|
||||||
|
private bool isSaving;
|
||||||
|
private string saveMessage = "";
|
||||||
|
private bool saveError;
|
||||||
|
|
||||||
|
private bool IsValid => deckCards.Count == 40 && divers.Count == 2 && divers.All(d => d != null);
|
||||||
|
|
||||||
|
private string ValidationMessage => (deckCards.Count, divers.Count) switch
|
||||||
|
{
|
||||||
|
(< 40, _) => $"{40 - deckCards.Count} cards short",
|
||||||
|
(> 40, _) => $"{deckCards.Count - 40} cards over",
|
||||||
|
(40, < 2) => "Need 2 divers",
|
||||||
|
_ => "Valid"
|
||||||
|
};
|
||||||
|
|
||||||
|
private IEnumerable<CardData> BrowserCards => AllCards
|
||||||
|
.Where(c => c.Category is "Agent" or "Spell" or "Immortalized")
|
||||||
|
.Where(c => categoryFilter == "" || c.Category == categoryFilter)
|
||||||
|
.Where(c => factionFilter == "" || c.Faction == factionFilter)
|
||||||
|
.Where(c => search == "" || c.MatchesSearch(search));
|
||||||
|
|
||||||
|
private record DeckGroup(CardData Card, int Count);
|
||||||
|
|
||||||
|
private List<DeckGroup> DeckGroups => deckCards
|
||||||
|
.GroupBy(name => name)
|
||||||
|
.Select(g => new DeckGroup(AllCards.First(c => c.Name == g.Key), g.Count()))
|
||||||
|
.OrderBy(g => g.Card.Cost ?? 99)
|
||||||
|
.ThenBy(g => g.Card.Name)
|
||||||
|
.ToList();
|
||||||
|
|
||||||
|
private IEnumerable<CardData> DiverPickerCards
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
var inDeck = deckCards.ToHashSet();
|
||||||
|
var otherDiverSlot = activeDiverSlot == 0
|
||||||
|
? (divers.Count > 1 ? divers[1] : null)
|
||||||
|
: (divers.Count > 0 ? divers[0] : null);
|
||||||
|
|
||||||
|
return AllCards
|
||||||
|
.Where(c => c.Category is "Agent" or "Spell" or "Immortalized")
|
||||||
|
.Where(c => !inDeck.Contains(c.Name))
|
||||||
|
.Where(c => c.Name != otherDiverSlot)
|
||||||
|
.Where(c => diverSearch == "" || c.MatchesSearch(diverSearch));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private Dictionary<int, int> ManaCurveData
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
var result = new Dictionary<int, int>();
|
||||||
|
foreach (var name in deckCards)
|
||||||
|
{
|
||||||
|
var card = AllCards.FirstOrDefault(c => c.Name == name);
|
||||||
|
if (card == null) continue;
|
||||||
|
var bucket = Math.Min(card.Cost ?? 0, 10);
|
||||||
|
result[bucket] = result.GetValueOrDefault(bucket) + 1;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private int CountInDeck(string name) => deckCards.Count(c => c == name);
|
||||||
|
|
||||||
|
protected override async Task OnParametersSetAsync()
|
||||||
|
{
|
||||||
|
factions = AllCards
|
||||||
|
.Where(c => c.Faction != null)
|
||||||
|
.Select(c => c.Faction!)
|
||||||
|
.Distinct()
|
||||||
|
.OrderBy(f => f)
|
||||||
|
.ToList();
|
||||||
|
|
||||||
|
if (Id.HasValue)
|
||||||
|
await LoadDeck(Id.Value);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task LoadDeck(Guid id)
|
||||||
|
{
|
||||||
|
var deck = await Db.UserDecks.FindAsync(id);
|
||||||
|
if (deck == null) return;
|
||||||
|
|
||||||
|
deckName = deck.Name;
|
||||||
|
deckSeason = deck.Season ?? "";
|
||||||
|
deckNotes = deck.Notes ?? "";
|
||||||
|
deckCards = new List<string>(deck.Cards);
|
||||||
|
divers = new List<string>(deck.Divers);
|
||||||
|
}
|
||||||
|
|
||||||
|
private void AddCard(CardData card)
|
||||||
|
{
|
||||||
|
if (CountInDeck(card.Name) >= 3) return;
|
||||||
|
deckCards.Add(card.Name);
|
||||||
|
}
|
||||||
|
|
||||||
|
private void RemoveCard(string name)
|
||||||
|
{
|
||||||
|
var idx = deckCards.LastIndexOf(name);
|
||||||
|
if (idx >= 0) deckCards.RemoveAt(idx);
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ClearDeck()
|
||||||
|
{
|
||||||
|
deckCards.Clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
private void OpenDiverPicker(int slot)
|
||||||
|
{
|
||||||
|
activeDiverSlot = slot;
|
||||||
|
diverSearch = "";
|
||||||
|
showDiverPicker = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void CloseDiverPicker() => showDiverPicker = false;
|
||||||
|
|
||||||
|
private void SelectDiver(string name)
|
||||||
|
{
|
||||||
|
while (divers.Count <= activeDiverSlot)
|
||||||
|
divers.Add(null!);
|
||||||
|
divers[activeDiverSlot] = name;
|
||||||
|
showDiverPicker = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void RemoveDiver(int slot)
|
||||||
|
{
|
||||||
|
if (slot < divers.Count)
|
||||||
|
divers.RemoveAt(slot);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task SaveDeck()
|
||||||
|
{
|
||||||
|
if (string.IsNullOrWhiteSpace(deckName))
|
||||||
|
{
|
||||||
|
saveMessage = "Please enter a deck name.";
|
||||||
|
saveError = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
isSaving = true;
|
||||||
|
saveMessage = "";
|
||||||
|
|
||||||
|
try
|
||||||
|
{
|
||||||
|
if (Id.HasValue)
|
||||||
|
{
|
||||||
|
var existing = await Db.UserDecks.FindAsync(Id.Value);
|
||||||
|
if (existing != null)
|
||||||
|
{
|
||||||
|
existing.Name = deckName;
|
||||||
|
existing.Cards = new List<string>(deckCards);
|
||||||
|
existing.Divers = new List<string>(divers);
|
||||||
|
existing.Notes = deckNotes;
|
||||||
|
existing.Season = deckSeason;
|
||||||
|
existing.UpdatedAt = DateTime.UtcNow;
|
||||||
|
await Db.SaveChangesAsync();
|
||||||
|
saveMessage = "Saved!";
|
||||||
|
saveError = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
var deck = new UserDeck
|
||||||
|
{
|
||||||
|
Name = deckName,
|
||||||
|
Cards = new List<string>(deckCards),
|
||||||
|
Divers = new List<string>(divers),
|
||||||
|
Notes = deckNotes,
|
||||||
|
Season = deckSeason,
|
||||||
|
UpdatedAt = DateTime.UtcNow
|
||||||
|
};
|
||||||
|
Db.UserDecks.Add(deck);
|
||||||
|
await Db.SaveChangesAsync();
|
||||||
|
saveMessage = "Saved!";
|
||||||
|
saveError = false;
|
||||||
|
Nav.NavigateTo($"/deck-builder/{deck.Id}", replace: true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
saveMessage = $"Error: {ex.Message}";
|
||||||
|
saveError = true;
|
||||||
|
}
|
||||||
|
finally
|
||||||
|
{
|
||||||
|
isSaving = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,549 @@
|
|||||||
|
/* ── Top Bar ── */
|
||||||
|
.builder-topbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-name-input {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 180px;
|
||||||
|
max-width: 360px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.season-input {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.validity-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.3rem 0.7rem;
|
||||||
|
border-radius: 100px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-valid {
|
||||||
|
background: rgba(102, 187, 106, 0.15);
|
||||||
|
color: #66bb6a;
|
||||||
|
border: 1px solid rgba(102, 187, 106, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-invalid {
|
||||||
|
background: rgba(255, 171, 64, 0.12);
|
||||||
|
color: #ffab40;
|
||||||
|
border: 1px solid rgba(255, 171, 64, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-toast {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
|
animation: fade-in 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-ok { color: #66bb6a; }
|
||||||
|
.save-error { color: #ef5350; }
|
||||||
|
|
||||||
|
/* ── Main Layout ── */
|
||||||
|
.builder-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 380px;
|
||||||
|
height: calc(100vh - 110px);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Browser Panel ── */
|
||||||
|
.browser-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-panel .category-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.4rem;
|
||||||
|
padding: 0.75rem 1rem 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-panel .filter-bar {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-grid {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0.5rem 1rem 1rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||||||
|
gap: 0.6rem;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-card {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 6px 20px rgba(108, 99, 255, 0.2);
|
||||||
|
border-color: rgba(108, 99, 255, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-card.in-deck {
|
||||||
|
border-color: rgba(108, 99, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-card.maxed {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-card.maxed:hover {
|
||||||
|
transform: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-card-img {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 5 / 7;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #111128;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-card-img img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.in-deck-count {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.3rem;
|
||||||
|
right: 0.3rem;
|
||||||
|
background: var(--accent);
|
||||||
|
color: white;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
width: 1.4rem;
|
||||||
|
height: 1.4rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.maxed-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0,0,0,0.45);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-card-name {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.3rem 0.4rem;
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Deck Panel ── */
|
||||||
|
.deck-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-status-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-count {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-denom { font-size: 0.8rem; font-weight: 400; color: var(--text-muted); }
|
||||||
|
.count-ok { color: #66bb6a; }
|
||||||
|
.count-over { color: #ef5350; }
|
||||||
|
.count-under { color: var(--text-secondary); }
|
||||||
|
|
||||||
|
/* ── Mana Curve ── */
|
||||||
|
.mana-curve {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 3px;
|
||||||
|
padding: 0.75rem 1rem 0.5rem;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.curve-col {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.curve-bar-wrap {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.curve-count {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
height: 0.8rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.curve-bar {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--accent);
|
||||||
|
border-radius: 2px 2px 0 0;
|
||||||
|
min-height: 2px;
|
||||||
|
transition: height 0.2s ease;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.curve-label {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Deck Card List ── */
|
||||||
|
.deck-card-list {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-empty {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 2rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-empty i { font-size: 2rem; }
|
||||||
|
|
||||||
|
.deck-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.3rem 1rem;
|
||||||
|
border-bottom: 1px solid rgba(42, 42, 74, 0.5);
|
||||||
|
transition: background 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-row:hover { background: var(--bg-hover); }
|
||||||
|
|
||||||
|
.deck-row-img {
|
||||||
|
width: 28px;
|
||||||
|
height: 40px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 3px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-row-name {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-row-cost {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--gold);
|
||||||
|
font-weight: 600;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-row-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-btn {
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background 0.15s ease;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); }
|
||||||
|
.count-btn:disabled { opacity: 0.35; cursor: not-allowed; }
|
||||||
|
|
||||||
|
.count-display {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
width: 1.2rem;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Divers Section ── */
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
padding: 0.6rem 1rem 0.4rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-count {
|
||||||
|
margin-left: auto;
|
||||||
|
background: var(--bg-hover);
|
||||||
|
padding: 0.1rem 0.5rem;
|
||||||
|
border-radius: 100px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divers-section { padding-bottom: 0.5rem; }
|
||||||
|
|
||||||
|
.diver-slot {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
margin: 0.25rem 1rem;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
border: 1px dashed var(--border);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-slot.empty:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
background: rgba(108, 99, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-slot.filled {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: rgba(108, 99, 255, 0.3);
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-thumb {
|
||||||
|
width: 28px;
|
||||||
|
height: 40px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 3px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-name {
|
||||||
|
flex: 1;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-remove {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-remove:hover { color: #ef5350; }
|
||||||
|
|
||||||
|
/* ── Notes Section ── */
|
||||||
|
.notes-section {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes-input {
|
||||||
|
margin: 0 1rem;
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 80px;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border-color: var(--border);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Diver Picker Modal ── */
|
||||||
|
.diver-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 1050;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1.25rem;
|
||||||
|
width: 560px;
|
||||||
|
max-width: 92vw;
|
||||||
|
max-height: 80vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
|
||||||
|
animation: detail-enter 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-modal-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-modal-header h5 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-picker-grid {
|
||||||
|
overflow-y: auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-picker-card {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: border-color 0.15s ease, transform 0.15s ease;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-picker-card:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-picker-card img {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 5 / 7;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-picker-card span {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
padding: 0.25rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Responsive ── */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.builder-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
height: auto;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-panel {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
max-height: 70vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-panel {
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.builder-topbar {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,181 @@
|
|||||||
|
@page "/my-decks"
|
||||||
|
@rendermode InteractiveServer
|
||||||
|
@using Microsoft.EntityFrameworkCore
|
||||||
|
@inject AppDbContext Db
|
||||||
|
@inject NavigationManager Nav
|
||||||
|
|
||||||
|
<PageTitle>My Decks - Chrono CCG</PageTitle>
|
||||||
|
|
||||||
|
<div class="my-decks-container">
|
||||||
|
<div class="my-decks-header">
|
||||||
|
<div>
|
||||||
|
<h1>My Decks</h1>
|
||||||
|
<p class="text-secondary">@decks.Count deck@(decks.Count != 1 ? "s" : "") saved</p>
|
||||||
|
</div>
|
||||||
|
<a href="/deck-builder" class="btn btn-primary">
|
||||||
|
<i class="bi bi-plus-lg me-1"></i> New Deck
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (loading)
|
||||||
|
{
|
||||||
|
<div class="decks-loading">
|
||||||
|
<span class="spinner-border spinner-border-sm me-2"></span> Loading decks...
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else if (decks.Count == 0)
|
||||||
|
{
|
||||||
|
<div class="decks-empty">
|
||||||
|
<i class="bi bi-journal-x"></i>
|
||||||
|
<p>No decks yet. Create your first deck!</p>
|
||||||
|
<a href="/deck-builder" class="btn btn-outline-primary">
|
||||||
|
<i class="bi bi-plus-lg me-1"></i> Build a Deck
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="decks-grid">
|
||||||
|
@foreach (var deck in decks)
|
||||||
|
{
|
||||||
|
var cardCount = deck.Cards.Count;
|
||||||
|
var uniqueCount = deck.Cards.Distinct().Count();
|
||||||
|
var isValid = cardCount == 40 && deck.Divers.Count == 2;
|
||||||
|
<div class="deck-card" @onclick="() => EditDeck(deck.Id)">
|
||||||
|
<div class="deck-card-header">
|
||||||
|
<div class="deck-name">@(string.IsNullOrEmpty(deck.Name) ? "Untitled Deck" : deck.Name)</div>
|
||||||
|
<span class="deck-valid-badge @(isValid ? "valid" : "invalid")">
|
||||||
|
<i class="bi @(isValid ? "bi-check-circle-fill" : "bi-exclamation-circle-fill")"></i>
|
||||||
|
@(isValid ? "Valid" : $"{cardCount}/40")
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (!string.IsNullOrEmpty(deck.Season))
|
||||||
|
{
|
||||||
|
<div class="deck-season">
|
||||||
|
<i class="bi bi-calendar3"></i> @deck.Season
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="deck-meta">
|
||||||
|
<span><i class="bi bi-stack"></i> @cardCount cards</span>
|
||||||
|
<span><i class="bi bi-files"></i> @uniqueCount unique</span>
|
||||||
|
<span><i class="bi bi-person-arms-up"></i> @deck.Divers.Count/2 divers</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (deck.Divers.Count > 0)
|
||||||
|
{
|
||||||
|
<div class="deck-divers">
|
||||||
|
@foreach (var diver in deck.Divers)
|
||||||
|
{
|
||||||
|
<span class="diver-chip"><i class="bi bi-person-arms-up"></i> @diver</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (!string.IsNullOrEmpty(deck.Notes))
|
||||||
|
{
|
||||||
|
<div class="deck-notes-preview">@deck.Notes</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="deck-footer">
|
||||||
|
<span class="deck-updated">
|
||||||
|
<i class="bi bi-clock"></i> @deck.UpdatedAt.ToLocalTime().ToString("MMM d, yyyy h:mm tt")
|
||||||
|
</span>
|
||||||
|
<button class="btn btn-sm btn-outline-danger deck-delete"
|
||||||
|
@onclick:stopPropagation="true"
|
||||||
|
@onclick="() => ConfirmDelete(deck)">
|
||||||
|
<i class="bi bi-trash3"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (deckToDelete != null)
|
||||||
|
{
|
||||||
|
<div class="modal-backdrop" @onclick="CancelDelete"></div>
|
||||||
|
<div class="confirm-modal">
|
||||||
|
<h5>Delete Deck</h5>
|
||||||
|
<p>Delete <strong>@(string.IsNullOrEmpty(deckToDelete.Name) ? "Untitled Deck" : deckToDelete.Name)</strong>? This cannot be undone.</p>
|
||||||
|
<div class="d-flex gap-2 justify-content-end">
|
||||||
|
<button class="btn btn-outline-secondary" @onclick="CancelDelete">Cancel</button>
|
||||||
|
<button class="btn btn-danger" @onclick="DeleteDeck" disabled="@deleting">
|
||||||
|
@if (deleting) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@code {
|
||||||
|
private List<UserDeck> decks = [];
|
||||||
|
private bool loading = true;
|
||||||
|
private UserDeck? deckToDelete;
|
||||||
|
private bool deleting;
|
||||||
|
|
||||||
|
protected override async Task OnInitializedAsync()
|
||||||
|
{
|
||||||
|
await LoadDecks();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task LoadDecks()
|
||||||
|
{
|
||||||
|
loading = true;
|
||||||
|
try
|
||||||
|
{
|
||||||
|
decks = await Db.UserDecks.OrderByDescending(d => d.UpdatedAt).ToListAsync();
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
Console.WriteLine($"[WARNING] Could not load decks: {ex.Message}");
|
||||||
|
decks = [];
|
||||||
|
}
|
||||||
|
finally
|
||||||
|
{
|
||||||
|
loading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void EditDeck(Guid id)
|
||||||
|
{
|
||||||
|
Nav.NavigateTo($"/deck-builder/{id}");
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ConfirmDelete(UserDeck deck)
|
||||||
|
{
|
||||||
|
deckToDelete = deck;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void CancelDelete()
|
||||||
|
{
|
||||||
|
deckToDelete = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task DeleteDeck()
|
||||||
|
{
|
||||||
|
if (deckToDelete == null) return;
|
||||||
|
deleting = true;
|
||||||
|
try
|
||||||
|
{
|
||||||
|
var deck = await Db.UserDecks.FindAsync(deckToDelete.Id);
|
||||||
|
if (deck != null)
|
||||||
|
{
|
||||||
|
Db.UserDecks.Remove(deck);
|
||||||
|
await Db.SaveChangesAsync();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
Console.WriteLine($"[WARNING] Could not delete deck: {ex.Message}");
|
||||||
|
}
|
||||||
|
finally
|
||||||
|
{
|
||||||
|
deleting = false;
|
||||||
|
deckToDelete = null;
|
||||||
|
await LoadDecks();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,219 @@
|
|||||||
|
.my-decks-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-decks-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-decks-header h1 {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-decks-header p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decks-loading {
|
||||||
|
color: var(--text-muted);
|
||||||
|
padding: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decks-empty {
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 1rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decks-empty i {
|
||||||
|
font-size: 3rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decks-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-card {
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 6px 24px rgba(108, 99, 255, 0.15);
|
||||||
|
border-color: rgba(108, 99, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-name {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-valid-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.2rem 0.55rem;
|
||||||
|
border-radius: 100px;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-valid-badge.valid {
|
||||||
|
background: rgba(102, 187, 106, 0.15);
|
||||||
|
color: #66bb6a;
|
||||||
|
border: 1px solid rgba(102, 187, 106, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-valid-badge.invalid {
|
||||||
|
background: rgba(255, 171, 64, 0.12);
|
||||||
|
color: #ffab40;
|
||||||
|
border: 1px solid rgba(255, 171, 64, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-season {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-meta span {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-divers {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diver-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0.2rem 0.55rem;
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 100px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-notes-preview {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-style: italic;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 1.5;
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
padding: 0.4rem 0.6rem;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
border-left: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: auto;
|
||||||
|
padding-top: 0.4rem;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-updated {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-delete {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck-card:hover .deck-delete {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Confirm Modal ── */
|
||||||
|
.confirm-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 1050;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 1.5rem;
|
||||||
|
width: 380px;
|
||||||
|
max-width: 92vw;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
|
||||||
|
animation: detail-enter 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-modal h5 {
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-modal p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
@@ -3,10 +3,4 @@
|
|||||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
|
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
|
||||||
<FocusOnNavigate RouteData="@routeData" Selector="h1"/>
|
<FocusOnNavigate RouteData="@routeData" Selector="h1"/>
|
||||||
</Found>
|
</Found>
|
||||||
<NotFound>
|
|
||||||
<PageTitle>Not found</PageTitle>
|
|
||||||
<LayoutView Layout="@typeof(MainLayout)">
|
|
||||||
<p role="alert">Sorry, there's nothing at this address.</p>
|
|
||||||
</LayoutView>
|
|
||||||
</NotFound>
|
|
||||||
</Router>
|
</Router>
|
||||||
|
|||||||
@@ -5,9 +5,13 @@
|
|||||||
@using Microsoft.AspNetCore.Components.Routing
|
@using Microsoft.AspNetCore.Components.Routing
|
||||||
@using Microsoft.AspNetCore.Components.Web
|
@using Microsoft.AspNetCore.Components.Web
|
||||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||||
|
@using static Microsoft.AspNetCore.Components.Web.RenderMode
|
||||||
@using Microsoft.JSInterop
|
@using Microsoft.JSInterop
|
||||||
@using Shared.Layout
|
@using Shared.Layout
|
||||||
@using Shared.Pages
|
@using Shared.Pages
|
||||||
|
@using Shared.Components
|
||||||
|
@using Server.Components
|
||||||
|
@using Server.Models
|
||||||
@using Telerik.Blazor
|
@using Telerik.Blazor
|
||||||
@using Telerik.Blazor.Components
|
@using Telerik.Blazor.Components
|
||||||
@using Telerik.DataSource
|
@using Telerik.DataSource
|
||||||
|
|||||||
@@ -0,0 +1,108 @@
|
|||||||
|
using Microsoft.AspNetCore.Mvc;
|
||||||
|
using Microsoft.EntityFrameworkCore;
|
||||||
|
using Server.Models;
|
||||||
|
|
||||||
|
namespace Server.Controllers;
|
||||||
|
|
||||||
|
[ApiController]
|
||||||
|
[Route("api/[controller]")]
|
||||||
|
public class DecksController : ControllerBase
|
||||||
|
{
|
||||||
|
private readonly AppDbContext _context;
|
||||||
|
|
||||||
|
public DecksController(AppDbContext context)
|
||||||
|
{
|
||||||
|
_context = context;
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpGet]
|
||||||
|
public async Task<ActionResult<List<UserDeck>>> GetDecks()
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
return Ok(await _context.UserDecks.OrderByDescending(d => d.UpdatedAt).ToListAsync());
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
Console.WriteLine($"[WARNING] Could not retrieve decks: {ex.Message}");
|
||||||
|
return Ok(new List<UserDeck>());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpGet("{id:guid}")]
|
||||||
|
public async Task<ActionResult<UserDeck>> GetDeck(Guid id)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
var deck = await _context.UserDecks.FindAsync(id);
|
||||||
|
if (deck == null) return NotFound();
|
||||||
|
return Ok(deck);
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
Console.WriteLine($"[WARNING] Could not retrieve deck: {ex.Message}");
|
||||||
|
return StatusCode(500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpPost]
|
||||||
|
public async Task<ActionResult<UserDeck>> CreateDeck(UserDeck deck)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
deck.Id = Guid.NewGuid();
|
||||||
|
deck.UpdatedAt = DateTime.UtcNow;
|
||||||
|
_context.UserDecks.Add(deck);
|
||||||
|
await _context.SaveChangesAsync();
|
||||||
|
return Ok(deck);
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
Console.WriteLine($"[WARNING] Could not create deck: {ex.Message}");
|
||||||
|
return StatusCode(500, "Failed to save deck.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpPut("{id:guid}")]
|
||||||
|
public async Task<ActionResult<UserDeck>> UpdateDeck(Guid id, UserDeck deck)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
var existing = await _context.UserDecks.FindAsync(id);
|
||||||
|
if (existing == null) return NotFound();
|
||||||
|
|
||||||
|
existing.Name = deck.Name;
|
||||||
|
existing.Cards = deck.Cards;
|
||||||
|
existing.Divers = deck.Divers;
|
||||||
|
existing.Notes = deck.Notes;
|
||||||
|
existing.Season = deck.Season;
|
||||||
|
existing.UpdatedAt = DateTime.UtcNow;
|
||||||
|
|
||||||
|
await _context.SaveChangesAsync();
|
||||||
|
return Ok(existing);
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
Console.WriteLine($"[WARNING] Could not update deck: {ex.Message}");
|
||||||
|
return StatusCode(500, "Failed to update deck.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpDelete("{id:guid}")]
|
||||||
|
public async Task<IActionResult> DeleteDeck(Guid id)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
var deck = await _context.UserDecks.FindAsync(id);
|
||||||
|
if (deck == null) return NotFound();
|
||||||
|
_context.UserDecks.Remove(deck);
|
||||||
|
await _context.SaveChangesAsync();
|
||||||
|
return NoContent();
|
||||||
|
}
|
||||||
|
catch (Exception ex)
|
||||||
|
{
|
||||||
|
Console.WriteLine($"[WARNING] Could not delete deck: {ex.Message}");
|
||||||
|
return StatusCode(500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
// <auto-generated />
|
||||||
|
using System;
|
||||||
|
using Microsoft.EntityFrameworkCore;
|
||||||
|
using Microsoft.EntityFrameworkCore.Infrastructure;
|
||||||
|
using Microsoft.EntityFrameworkCore.Migrations;
|
||||||
|
using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
|
||||||
|
using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
|
||||||
|
using Server;
|
||||||
|
|
||||||
|
#nullable disable
|
||||||
|
|
||||||
|
namespace Server.Migrations
|
||||||
|
{
|
||||||
|
[DbContext(typeof(AppDbContext))]
|
||||||
|
[Migration("20260703051336_AddUserDecks")]
|
||||||
|
partial class AddUserDecks
|
||||||
|
{
|
||||||
|
/// <inheritdoc />
|
||||||
|
protected override void BuildTargetModel(ModelBuilder modelBuilder)
|
||||||
|
{
|
||||||
|
#pragma warning disable 612, 618
|
||||||
|
modelBuilder
|
||||||
|
.HasAnnotation("ProductVersion", "10.0.9")
|
||||||
|
.HasAnnotation("Relational:MaxIdentifierLength", 63);
|
||||||
|
|
||||||
|
NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
|
||||||
|
|
||||||
|
modelBuilder.Entity("Chrono.Model.CardNote", b =>
|
||||||
|
{
|
||||||
|
b.Property<string>("CardName")
|
||||||
|
.HasColumnType("text");
|
||||||
|
|
||||||
|
b.Property<string>("Note")
|
||||||
|
.IsRequired()
|
||||||
|
.HasColumnType("text");
|
||||||
|
|
||||||
|
b.HasKey("CardName");
|
||||||
|
|
||||||
|
b.ToTable("CardNotes");
|
||||||
|
});
|
||||||
|
|
||||||
|
modelBuilder.Entity("Server.Models.UserDeck", b =>
|
||||||
|
{
|
||||||
|
b.Property<Guid>("Id")
|
||||||
|
.ValueGeneratedOnAdd()
|
||||||
|
.HasColumnType("uuid");
|
||||||
|
|
||||||
|
b.PrimitiveCollection<string>("Cards")
|
||||||
|
.IsRequired()
|
||||||
|
.HasColumnType("jsonb");
|
||||||
|
|
||||||
|
b.PrimitiveCollection<string>("Divers")
|
||||||
|
.IsRequired()
|
||||||
|
.HasColumnType("jsonb");
|
||||||
|
|
||||||
|
b.Property<string>("Name")
|
||||||
|
.IsRequired()
|
||||||
|
.HasColumnType("text");
|
||||||
|
|
||||||
|
b.Property<string>("Notes")
|
||||||
|
.HasColumnType("text");
|
||||||
|
|
||||||
|
b.Property<string>("Season")
|
||||||
|
.HasColumnType("text");
|
||||||
|
|
||||||
|
b.Property<DateTime>("UpdatedAt")
|
||||||
|
.HasColumnType("timestamp with time zone");
|
||||||
|
|
||||||
|
b.HasKey("Id");
|
||||||
|
|
||||||
|
b.ToTable("UserDecks");
|
||||||
|
});
|
||||||
|
#pragma warning restore 612, 618
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
using System;
|
||||||
|
using Microsoft.EntityFrameworkCore.Migrations;
|
||||||
|
|
||||||
|
#nullable disable
|
||||||
|
|
||||||
|
namespace Server.Migrations
|
||||||
|
{
|
||||||
|
/// <inheritdoc />
|
||||||
|
public partial class AddUserDecks : Migration
|
||||||
|
{
|
||||||
|
/// <inheritdoc />
|
||||||
|
protected override void Up(MigrationBuilder migrationBuilder)
|
||||||
|
{
|
||||||
|
migrationBuilder.CreateTable(
|
||||||
|
name: "UserDecks",
|
||||||
|
columns: table => new
|
||||||
|
{
|
||||||
|
Id = table.Column<Guid>(type: "uuid", nullable: false),
|
||||||
|
Name = table.Column<string>(type: "text", nullable: false),
|
||||||
|
Cards = table.Column<string>(type: "jsonb", nullable: false),
|
||||||
|
Divers = table.Column<string>(type: "jsonb", nullable: false),
|
||||||
|
Notes = table.Column<string>(type: "text", nullable: true),
|
||||||
|
Season = table.Column<string>(type: "text", nullable: true),
|
||||||
|
UpdatedAt = table.Column<DateTime>(type: "timestamp with time zone", nullable: false)
|
||||||
|
},
|
||||||
|
constraints: table =>
|
||||||
|
{
|
||||||
|
table.PrimaryKey("PK_UserDecks", x => x.Id);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <inheritdoc />
|
||||||
|
protected override void Down(MigrationBuilder migrationBuilder)
|
||||||
|
{
|
||||||
|
migrationBuilder.DropTable(
|
||||||
|
name: "UserDecks");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
// <auto-generated />
|
// <auto-generated />
|
||||||
|
using System;
|
||||||
using Microsoft.EntityFrameworkCore;
|
using Microsoft.EntityFrameworkCore;
|
||||||
using Microsoft.EntityFrameworkCore.Infrastructure;
|
using Microsoft.EntityFrameworkCore.Infrastructure;
|
||||||
using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
|
using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
|
||||||
@@ -34,6 +35,38 @@ namespace Server.Migrations
|
|||||||
|
|
||||||
b.ToTable("CardNotes");
|
b.ToTable("CardNotes");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
modelBuilder.Entity("Server.Models.UserDeck", b =>
|
||||||
|
{
|
||||||
|
b.Property<Guid>("Id")
|
||||||
|
.ValueGeneratedOnAdd()
|
||||||
|
.HasColumnType("uuid");
|
||||||
|
|
||||||
|
b.PrimitiveCollection<string>("Cards")
|
||||||
|
.IsRequired()
|
||||||
|
.HasColumnType("jsonb");
|
||||||
|
|
||||||
|
b.PrimitiveCollection<string>("Divers")
|
||||||
|
.IsRequired()
|
||||||
|
.HasColumnType("jsonb");
|
||||||
|
|
||||||
|
b.Property<string>("Name")
|
||||||
|
.IsRequired()
|
||||||
|
.HasColumnType("text");
|
||||||
|
|
||||||
|
b.Property<string>("Notes")
|
||||||
|
.HasColumnType("text");
|
||||||
|
|
||||||
|
b.Property<string>("Season")
|
||||||
|
.HasColumnType("text");
|
||||||
|
|
||||||
|
b.Property<DateTime>("UpdatedAt")
|
||||||
|
.HasColumnType("timestamp with time zone");
|
||||||
|
|
||||||
|
b.HasKey("Id");
|
||||||
|
|
||||||
|
b.ToTable("UserDecks");
|
||||||
|
});
|
||||||
#pragma warning restore 612, 618
|
#pragma warning restore 612, 618
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,12 @@
|
|||||||
|
namespace Server.Models;
|
||||||
|
|
||||||
|
public class UserDeck
|
||||||
|
{
|
||||||
|
public Guid Id { get; set; } = Guid.NewGuid();
|
||||||
|
public string Name { get; set; } = "";
|
||||||
|
public List<string> Cards { get; set; } = [];
|
||||||
|
public List<string> Divers { get; set; } = [];
|
||||||
|
public string? Notes { get; set; }
|
||||||
|
public string? Season { get; set; }
|
||||||
|
public DateTime UpdatedAt { get; set; } = DateTime.UtcNow;
|
||||||
|
}
|
||||||
@@ -11,6 +11,9 @@ builder.Services.AddEndpointsApiExplorer();
|
|||||||
builder.Services.AddRazorComponents().AddInteractiveServerComponents();
|
builder.Services.AddRazorComponents().AddInteractiveServerComponents();
|
||||||
builder.Services.AddTelerikBlazor();
|
builder.Services.AddTelerikBlazor();
|
||||||
builder.Services.AddSingleton<CardRenderingService>();
|
builder.Services.AddSingleton<CardRenderingService>();
|
||||||
|
builder.Services.AddScoped<AnalyticsService>();
|
||||||
|
builder.Services.AddHttpClient();
|
||||||
|
|
||||||
|
|
||||||
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
|
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
|
||||||
builder.Services.AddDbContext<AppDbContext>(options =>
|
builder.Services.AddDbContext<AppDbContext>(options =>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user