Adding slop info to home page
This commit is contained in:
+119
-3
@@ -1,7 +1,123 @@
|
||||
@page "/"
|
||||
|
||||
<PageTitle>Home</PageTitle>
|
||||
<PageTitle>Slop Game Reference - Chrono CCG</PageTitle>
|
||||
|
||||
<h1>Hello, world!</h1>
|
||||
<div class="home-hero">
|
||||
<div class="hero-glow"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">Collectible Card Game</div>
|
||||
<h1 class="hero-title">Slop Game Reference - Chrono CCG</h1>
|
||||
<p class="hero-subtitle">
|
||||
AI generated website for reference notes on playing Chrono CCG.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="cta-button primary" href="/cards">
|
||||
<i class="bi bi-collection-fill"></i> Browse Cards
|
||||
</a>
|
||||
<a class="cta-button secondary" href="/decks">
|
||||
<i class="bi bi-journal-text"></i> View Decks
|
||||
</a>
|
||||
<a class="cta-button secondary" href="/agents">
|
||||
<i class="bi bi-people-fill"></i> All Agents
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Welcome to your new app.
|
||||
<div class="home-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon agents">
|
||||
<i class="bi bi-person-fill"></i>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<span class="stat-value">@agentsCount</span>
|
||||
<span class="stat-label">Agents</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon spells">
|
||||
<i class="bi bi-wand"></i>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<span class="stat-value">@spellsCount</span>
|
||||
<span class="stat-label">Spells</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon tokens">
|
||||
<i class="bi bi-coin"></i>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<span class="stat-value">@tokensCount</span>
|
||||
<span class="stat-label">Tokens</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon decks">
|
||||
<i class="bi bi-journal-text"></i>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<span class="stat-value">@visibleDecks</span>
|
||||
<span class="stat-label">Decks</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon factions">
|
||||
<i class="bi bi-shield-fill"></i>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<span class="stat-value">@factionCount</span>
|
||||
<span class="stat-label">Factions</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon total">
|
||||
<i class="bi bi-grid-3x3-gap-fill"></i>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<span class="stat-value">@totalCount</span>
|
||||
<span class="stat-label">Total Cards</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-sections">
|
||||
<div class="section-card">
|
||||
<div class="section-icon"><i class="bi bi-collection-fill"></i></div>
|
||||
<h2>Explore Cards</h2>
|
||||
<p>Browse the full gallery of @totalCount cards. Filter by faction, cost, or category, and dive into detailed stats, archetypes, and immortalize chains.</p>
|
||||
<a href="/cards" class="section-link">Browse Gallery <i class="bi bi-arrow-right"></i></a>
|
||||
</div>
|
||||
<div class="section-card">
|
||||
<div class="section-icon"><i class="bi bi-people-fill"></i></div>
|
||||
<h2>View Agents</h2>
|
||||
<p>All @agentsCount agents in a sortable data grid with filtering, paging, and detailed stats at a glance.</p>
|
||||
<a href="/agents" class="section-link">View Agents <i class="bi bi-arrow-right"></i></a>
|
||||
</div>
|
||||
<div class="section-card">
|
||||
<div class="section-icon"><i class="bi bi-journal-text"></i></div>
|
||||
<h2>Browse Decks</h2>
|
||||
<p>Check out @visibleDecks curated deck lists. See key cards, divers, and full card breakdowns with interactive previews.</p>
|
||||
<a href="/decks" class="section-link">Browse Decks <i class="bi bi-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private int totalCount;
|
||||
private int agentsCount;
|
||||
private int spellsCount;
|
||||
private int tokensCount;
|
||||
private int visibleDecks;
|
||||
private int factionCount;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
var cards = CardDatabase.Cards;
|
||||
totalCount = cards.Count;
|
||||
agentsCount = cards.Count(c => c.IsAgent);
|
||||
spellsCount = cards.Count(c => c.IsSpell);
|
||||
tokensCount = cards.Count(c => c.IsToken);
|
||||
visibleDecks = DeckDatabase.Decks.Count(d => d.IsVisible);
|
||||
factionCount = cards.Where(c => c.Faction != null).Select(c => c.Faction).Distinct().Count();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
/* ── Hero ── */
|
||||
.home-hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 4rem 1rem 3rem;
|
||||
margin-bottom: 2.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-glow {
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
left: 50%;
|
||||
width: 60rem;
|
||||
height: 30rem;
|
||||
transform: translateX(-50%);
|
||||
background: radial-gradient(ellipse at center, rgba(108, 99, 255, 0.15) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
border: 1px solid rgba(255, 215, 0, 0.3);
|
||||
background: rgba(255, 215, 0, 0.06);
|
||||
padding: 0.3rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
margin: 0 0 1rem;
|
||||
line-height: 1.1;
|
||||
background: linear-gradient(135deg, #e8e8f0 0%, #6c63ff 50%, #ffd700 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.65;
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 2rem;
|
||||
max-width: 34rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.7rem 1.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.cta-button.primary {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 20px var(--accent-glow);
|
||||
}
|
||||
|
||||
.cta-button.primary:hover {
|
||||
background: #7b73ff;
|
||||
box-shadow: 0 0 30px var(--accent-glow);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.cta-button.secondary {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.cta-button.secondary:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ── Stats ── */
|
||||
.home-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 0.75rem;
|
||||
max-width: 56rem;
|
||||
margin: 0 auto 3rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-icon.agents { background: rgba(108, 99, 255, 0.15); color: var(--accent); }
|
||||
.stat-icon.spells { background: rgba(255, 215, 0, 0.12); color: var(--gold); }
|
||||
.stat-icon.tokens { background: rgba(0, 200, 150, 0.15); color: #00c896; }
|
||||
.stat-icon.decks { background: rgba(255, 120, 80, 0.15); color: #ff7850; }
|
||||
.stat-icon.factions { background: rgba(100, 200, 255, 0.15); color: #64c8ff; }
|
||||
.stat-icon.total { background: rgba(200, 150, 255, 0.15); color: #c896ff; }
|
||||
|
||||
.stat-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ── Section Cards ── */
|
||||
.home-sections {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.25rem;
|
||||
max-width: 56rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 2rem 1.5rem;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.section-card:hover {
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: var(--radius);
|
||||
background: rgba(108, 99, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.3rem;
|
||||
color: var(--accent);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-card h2 {
|
||||
font-size: 1.15rem;
|
||||
margin: 0 0 0.5rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-card p {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.section-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
transition: gap var(--transition);
|
||||
}
|
||||
|
||||
.section-link:hover {
|
||||
gap: 0.6rem;
|
||||
color: #7b73ff;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@@media (max-width: 900px) {
|
||||
.home-stats { grid-template-columns: repeat(3, 1fr); }
|
||||
.home-sections { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@@media (max-width: 600px) {
|
||||
.hero-title { font-size: 2.2rem; }
|
||||
.hero-subtitle { font-size: 0.95rem; }
|
||||
.hero-actions { flex-direction: column; align-items: center; }
|
||||
.cta-button { width: 100%; justify-content: center; }
|
||||
.home-stats { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
Reference in New Issue
Block a user