divan/DivanRazor/Pages/PeopleExplorer.cshtml
Anas Rashid e3e3819c78 Urdu public pages, batch 2 (#2): auth, errors, map, FAQ, similar poems, people pages, page titles
- translate remaining public views and page-model strings (titles, messages, relation names)
- Urdu stopword list for word-frequency stats (replaces Persian list)
- error pages: drop list of alternative Ganjoor services

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-05 00:22:09 +02:00

79 lines
3.4 KiB
Plaintext

@page
@model DivanRazor.Pages.PeopleExplorerModel
@{
Layout = null;
}
@if (!string.IsNullOrEmpty(Model.LastError))
{
<p>@Model.LastError</p>
}
else
{
<div class="up-modal-explorer">
<h2>شخصیات کی تلاش</h2>
@if (Model.FamilyTreeRoots != null && Model.FamilyTreeRoots.Count > 0)
{
<h3>شجرے</h3>
<ul>
@foreach (var root in Model.FamilyTreeRoots)
{
<li>
<a href="javascript:void(0)" onclick="PersonWindow.open(@root.Id)">@root.FamilyTreeCaption</a>
<small>(@root.Name)</small>
— <a href="javascript:void(0)" onclick="FamilyTreeWindow.open(@root.Id)"><small>خاکہ دکھائیں</small></a>
</li>
}
</ul>
}
<h3>تمام شخصیات کے روابط کا جال</h3>
<p class="up-hint"><small>
کسی گرہ پر کلک کریں تاکہ صرف اسی شخص کے روابط نمایاں ہوں (واپسی کے لیے دوبارہ کلک کریں)؛ کسی شخصیت کے نام پر کلک کریں تو اس کی مکمل معلومات کھل جائیں گی۔
خاکے کو ماؤس سے کھینچیں اور ماؤس کے پہیے سے بڑا/چھوٹا کریں.
</small></p>
<div style="margin-bottom:10px;">
<input type="text" id="pge-search" placeholder="شخصیت کا نام تلاش کریں..." style="width:240px;" />
<a role="button" id="pge-reset" class="up-btn up-btn--ghost up-btn--sm">سب دکھائیں</a>
</div>
<div id="pge-legend" class="pg-legend"></div>
<div id="pge-container" style="position:relative;width:100%;height:55vh;border:1px solid #d8cdb8;border-radius:6px;overflow:hidden;background:#faf7f0;">
<svg id="pge-svg" width="100%" height="100%"></svg>
</div>
<div class="spacer">&nbsp;</div>
<div style="max-height:30vh;overflow:auto;">
<table class="up-table">
<thead>
<tr>
<th>پہلا شخص</th>
<th>رشتے کی نوعیت</th>
<th>دوسرا شخص</th>
<th>نوٹ</th>
</tr>
</thead>
<tbody id="pge-table-body"></tbody>
</table>
</div>
<style>
.pg-circle { fill: #fdf6e6; stroke: #8b6b4a; stroke-width: 1.5; }
.pg-circle-tree { fill: #f3e2b8; stroke: #7a4a2a; stroke-width: 2; }
.pg-label { font-size: 11px; fill: #4a3520; font-family: inherit; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.pg-legend-item { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.pg-legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.pg-person-link { cursor: pointer; }
</style>
@* not an executable script - just a data holder, parsed and rendered explicitly by
PeopleExplorer.open()'s onReady callback in personwindow.js once this fragment has been
injected into the modal body *@
<script type="application/json" id="pge-data">@Html.Raw(Model.GraphDataJson)</script>
</div>
}