Files
sports-division/src/SportsDivision.Web/Views/Shared/_HelpLayout.cshtml
2026-06-27 14:23:30 -04:00

110 lines
4.5 KiB
Plaintext

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Sports Division Help</title>
<link rel="icon" href="~/favicon.ico" sizes="any" />
<link rel="icon" href="~/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="~/apple-touch-icon.png" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
<style>
:root {
--help-primary: #003366;
--help-accent: #FFD700;
}
body {
background-color: #f4f6f9;
color: #212529;
}
.help-topbar {
background-color: var(--help-primary);
color: #fff;
padding: .6rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 1030;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.help-topbar .brand { font-weight: 600; font-size: 1.1rem; }
.help-topbar .brand i { color: var(--help-accent); }
.help-topbar a.back-link { color: #fff; text-decoration: none; }
.help-topbar a.back-link:hover { color: var(--help-accent); }
.help-wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.help-hero {
background: linear-gradient(135deg, var(--help-primary), #004080);
color: #fff;
border-radius: .75rem;
padding: 2rem;
margin-bottom: 1.25rem;
}
.help-search-bar {
position: sticky;
top: 56px;
z-index: 1020;
background: #f4f6f9;
padding: .75rem 0;
margin-bottom: 1rem;
}
.help-search-bar input {
font-size: 1.05rem;
padding: .65rem 1rem .65rem 2.6rem;
}
.help-search-icon {
position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
color: #6c757d; pointer-events: none;
}
.help-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; }
@@media (max-width: 800px) { .help-layout { grid-template-columns: 1fr; } .help-toc { display: none; } }
.help-toc {
position: sticky; top: 130px; align-self: start;
max-height: calc(100vh - 150px); overflow-y: auto;
}
.help-toc a {
display: block; padding: .3rem .5rem; color: #495057; text-decoration: none;
border-left: 3px solid transparent; font-size: .92rem; border-radius: 0 .25rem .25rem 0;
}
.help-toc a:hover { background: #e9ecef; border-left-color: var(--help-accent); color: var(--help-primary); }
.help-section { scroll-margin-top: 130px; margin-bottom: 2rem; }
.help-section > h2 {
color: var(--help-primary); border-bottom: 2px solid var(--help-accent);
padding-bottom: .35rem; margin-bottom: 1rem; font-size: 1.45rem;
}
.help-entry {
background: #fff; border: 1px solid #e3e6ea; border-radius: .5rem;
padding: 1rem 1.25rem; margin-bottom: .85rem; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.help-entry h3 { font-size: 1.08rem; margin-bottom: .5rem; color: #003366; }
.help-entry h3 i { color: var(--help-accent); }
.help-entry p:last-child, .help-entry ul:last-child, .help-entry ol:last-child { margin-bottom: 0; }
.help-entry code, .help-formula {
background: #eef2f7; border-radius: .25rem; padding: .1rem .35rem; font-size: .92em;
}
.help-formula { display: inline-block; padding: .4rem .7rem; margin: .25rem 0; font-weight: 600; }
mark { background: var(--help-accent); padding: 0 .1rem; }
.help-noresults { display: none; }
</style>
</head>
<body>
<div class="help-topbar">
<span class="brand"><i class="bi bi-life-preserver"></i> Sports Division Help</span>
<a class="back-link" asp-controller="Dashboard" asp-action="Index"><i class="bi bi-arrow-left-circle me-1"></i>Back to App</a>
</div>
<div class="help-wrap">
@RenderBody()
</div>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>