improve UI/UX of the Admin Area

#497

GanjooRazor/Areas/Admin/Pages/CatUtils.cshtml

@@ -7,12 +7,14 @@
     ViewData["Title"] = "مدیریت بخش";
 }
 
-<h1>@ViewData["Title"]</h1>
+<div class="up-page-header">
+    <h1>@ViewData["Title"]</h1>
+</div>
 
 <script>
-     function deleteRelatedImage(targetUrl){
-        if (!confirm('آیا از حذف تصویر منتهی به نشانی زیر اطمینان دارید؟\r\n'+targetUrl))
-            return;
+     async function deleteRelatedImage(targetUrl){
+        var ok = await upConfirm('آیا از حذف تصویر منتهی به نشانی زیر اطمینان دارید؟\r\n'+targetUrl);
+        if (!ok) return;
         var url = '?handler=RemNaskbanImage';
 
         $.ajax({
@@ -22,21 +24,18 @@
                 url: targetUrl
             },
             error: function (e) {
-                if (e.responseText == null)
-                    alert(e);
-                else
-                    alert(e.responseText);
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
             },
             success: function () {
-                alert('انجام شد!')
+                upToast('انجام شد!', 'success')
             },
 
         });
      }
 
-     function reslugCat(catId) {
-        if (!confirm('آیا از تولید مجدد نشانی‌های شعرهای بخش اطمینان دارید؟'))
-            return;
+     async function reslugCat(catId) {
+        var ok = await upConfirm('آیا از تولید مجدد نشانی‌های شعرهای بخش اطمینان دارید؟');
+        if (!ok) return;
 
         var url = '?handler=BatchReSlugCatPoems';
 
@@ -47,21 +46,18 @@
                 id: catId
             },
            error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
-                },
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
+            },
             success: function () {
-                alert('انجام شد!')
+                upToast('انجام شد!', 'success')
             },
 
         });
     }
 
-    function startTocGenerationForSubCats(catId) {
-        if (!confirm('آیا از شروع کار تولید مجدد فهرست همهٔ زیربخشها اطمینان دارید؟'))
-            return;
+    async function startTocGenerationForSubCats(catId) {
+        var ok = await upConfirm('آیا از شروع کار تولید مجدد فهرست همهٔ زیربخشها اطمینان دارید؟');
+        if (!ok) return;
 
         var url = '?handler=StartGeneratingSubCatsTOC';
 
@@ -72,21 +68,18 @@
                 id: catId
             },
            error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
-                },
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
+            },
             success: function () {
-                alert('کار تولید مجدد فهرست همهٔ زیربخشهای بخش شروع شد.')
+                upToast('کار تولید مجدد فهرست همهٔ زیربخشهای بخش شروع شد.', 'success')
             },
 
         });
     }
 
-    function tagCatWithRhymes(catId) {
-        if (!confirm('آیا از شروع کار قافیه‌یابی اطمینان دارید؟'))
-            return;
+    async function tagCatWithRhymes(catId) {
+        var ok = await upConfirm('آیا از شروع کار قافیه‌یابی اطمینان دارید؟');
+        if (!ok) return;
 
         var url = '?handler=StartRhymeAnalysis';
 
@@ -97,21 +90,18 @@
                 id: catId
             },
             error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
-                },
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
+            },
             success: function () {
-                alert('کار قافیه‌یابی بخش شروع شد.')
+                upToast('کار قافیه‌یابی بخش شروع شد.', 'success')
             },
 
         });
     }
 
-    function tagCatWithRhythms(catId) {
-        if (!confirm('آیا از شروع کار وزن‌یابی یا وزن‌گذاری اطمینان دارید؟'))
-            return;
+    async function tagCatWithRhythms(catId) {
+        var ok = await upConfirm('آیا از شروع کار وزن‌یابی یا وزن‌گذاری اطمینان دارید؟');
+        if (!ok) return;
 
         var url = '?handler=StartRhythmAnalysis';
 
@@ -123,21 +113,18 @@
                 rhythm: $('#rhythm').val()
             },
             error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
-                },
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
+            },
             success: function () {
-                alert('کار وزن‌یابی یا وزن‌گذاری بخش شروع شد.')
+                upToast('کار وزن‌یابی یا وزن‌گذاری بخش شروع شد.', 'success')
             },
 
         });
     }
 
-    function regenRelatedSections(catId) {
-         if (!confirm('آیا از شروع کار بازسازی قطعات مرتبط بخش اطمینان دارید؟'))
-            return;
+    async function regenRelatedSections(catId) {
+         var ok = await upConfirm('آیا از شروع کار بازسازی قطعات مرتبط بخش اطمینان دارید؟');
+        if (!ok) return;
 
         var url = '?handler=StartRegeneratingRelatedSections';
 
@@ -148,24 +135,22 @@
                 id: catId,
             },
             error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
-                },
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
+            },
             success: function () {
-                alert('کار بازسازی قطعات مرتبط بخش شروع شد.')
+                upToast('کار بازسازی قطعات مرتبط بخش شروع شد.', 'success')
             },
 
         });
     }
 
-    function tagPoemsWithLanguage(catId) {
+    async function tagPoemsWithLanguage(catId) {
 
         var lang = document.getElementById('cat-poem-language').value;
         if(lang == '')
             lang = 'fa-IR';
-        if(confirm(lang)){
+        var ok = await upConfirm(lang);
+        if (ok) {
             var url = '?handler=SetCategoryLanguageTag';
             $.ajax({
                 type: "POST",
@@ -175,23 +160,21 @@
                     language: lang
                 },
                 error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
-                },
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
+            },
                 success: function () {
-                    alert('انجام شد.')
+                    upToast('انجام شد.', 'success')
                 },
 
             });
         }
     }
 
-    function tagPoemsWithFormat(catId) {
+    async function tagPoemsWithFormat(catId) {
 
         var format = document.getElementById('cat-poem-format').value;
-        if (confirm(format)) {
+        var ok = await upConfirm(format);
+        if (ok) {
             var url = '?handler=SetCategoryPoemFormat';
             $.ajax({
                 type: "POST",
@@ -201,13 +184,10 @@
                     format: format
                 },
                 error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
-                },
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
+            },
                 success: function () {
-                    alert('انجام شد.')
+                    upToast('انجام شد.', 'success')
                 },
 
             });
@@ -222,8 +202,9 @@
         }
     }
 
-    function deleteSelectedPoems(){
-        if(!confirm('آیا از حذف شعرهای انتخاب شده اطمینان دارید؟')) return;
+    async function deleteSelectedPoems(){
+        var ok = await upConfirm('آیا از حذف شعرهای انتخاب شده اطمینان دارید؟');
+        if (!ok) return;
         var checkboxes = document.getElementsByClassName('poemSelect');
         for(var i = 0; i < checkboxes.length; i++){
             if(checkboxes[i].checked){
@@ -235,11 +216,8 @@
                         id: dataValue
                     },
                     error: function (e) {
-                            if (e.responseText == null)
-                                alert(e);
-                            else
-                                alert(e.responseText);
-                        },
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
+            },
                     success: function () {
                         var poemBlockId = '#tr-' + dataValue;
                         $(poemBlockId).remove();
@@ -249,12 +227,13 @@
         }
     }
 
-    function tagPoemsWithDigitalTag(catId) {
+    async function tagPoemsWithDigitalTag(catId) {
 
         var tag = document.getElementById('digital-source-url-slug').value;
         var name = document.getElementById('digital-source-name').value;
 
-        if (!confirm('آیا از برچسب‌گذاری اشعار این بخش با منبع دیجیتال با نشانی '+tag+' اطمینان دارید؟')) return;
+        var ok = await upConfirm('آیا از برچسب‌گذاری اشعار این بخش با منبع دیجیتال با نشانی '+tag+' اطمینان دارید؟');
+        if (!ok) return;
        
         var url = '?handler=SetCategoryDigitalSourceTag';
         $.ajax({
@@ -266,13 +245,10 @@
                 name: name
             },
             error: function (e) {
-                if (e.responseText == null)
-                    alert(e);
-                else
-                    alert(e.responseText);
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
             },
             success: function () {
-                alert('انجام شد.')
+                upToast('انجام شد.', 'success')
             },
 
         });
@@ -281,15 +257,15 @@
 
 @if (!string.IsNullOrEmpty(Model.LastMessage))
 {
-    <p>
-        @Html.Raw(Model.LastMessage)
-    </p>
+    <div class="up-alert up-alert--info">@Html.Raw(Model.LastMessage)</div>
 }
 
 @if (Model.PageInformation != null)
 {
-    <p><a href="@Model.PageInformation.FullUrl">@Model.PageInformation.FullTitle</a></p>
-    <p>@Model.Cat.Cat.Id</p>
+    <div class="up-card">
+        <p><a href="@Model.PageInformation.FullUrl">@Model.PageInformation.FullTitle</a></p>
+        <p class="up-hint">@Model.Cat.Cat.Id</p>
+    </div>
 }
 
 @if (Model.Cat != null)
@@ -307,7 +283,7 @@
         }
     </table>
 
-    <a href="/Admin/CatUtils?url=@Model.Cat.Cat.FullUrl&images=1">نمایش تصاویر نسکبان</a>
+    <a href="/Admin/CatUtils?url=@Model.Cat.Cat.FullUrl&images=1" class="up-btn up-btn--ghost up-btn--sm">نمایش تصاویر نسکبان</a>
 
 
     <h2>اشعار بخش</h2>
@@ -401,7 +377,7 @@
                     <td colspan="5">
                         <img src="@Model.PoemRelatedImages.Where(r => r.PoemId == poem.Id && r.TargetPageUrl.Contains("https://naskban.ir")).First().ThumbnailImageUrl" />
                         <br />
-                        <p><a role="button" onclick="deleteRelatedImage('@Model.PoemRelatedImages.Where(r => r.PoemId == poem.Id && r.TargetPageUrl.Contains("https://naskban.ir")).First().TargetPageUrl')" class="actionlink">حذف این تصویر</a></p>
+                        <p><a role="button" onclick="deleteRelatedImage('@Model.PoemRelatedImages.Where(r => r.PoemId == poem.Id && r.TargetPageUrl.Contains("https://naskban.ir")).First().TargetPageUrl')" class="up-btn up-btn--ghost up-btn--sm">حذف این تصویر</a></p>
                     </td>
                 </tr>
             }
@@ -409,16 +385,16 @@
 
         <tr>
             <td colspan="5">
-                <p><a role="button" onclick="deleteSelectedPoems()" class="actionlink">حذف شعرهای انتخاب شده</a></p>
+                <p><a role="button" onclick="deleteSelectedPoems()" class="up-btn up-btn--ghost up-btn--sm">حذف شعرهای انتخاب شده</a></p>
             </td>
         </tr>
     </table>
 
-    <p><a href="/Admin/ModifyPage?id=@Model.PageInformation.Id">ویرایش صفحهٔ متناظر</a></p>
+    <p><a href="/Admin/ModifyPage?id=@Model.PageInformation.Id" class="up-btn up-btn--ghost up-btn--sm">ویرایش صفحهٔ متناظر</a></p>
 
-    <p><a role="button" onclick="startTocGenerationForSubCats(@Model.Cat.Cat.Id)" class="actionlink">شروع تولید مجدد فهرست همهٔ زیربخشها</a></p>
+    <p><a role="button" onclick="startTocGenerationForSubCats(@Model.Cat.Cat.Id)" class="up-btn up-btn--ghost up-btn--sm">شروع تولید مجدد فهرست همهٔ زیربخشها</a></p>
 
-    <p><a role="button" onclick="tagCatWithRhymes(@Model.Cat.Cat.Id)" class="actionlink">شروع قافیه‌یابی</a></p>
+    <p><a role="button" onclick="tagCatWithRhymes(@Model.Cat.Cat.Id)" class="up-btn up-btn--ghost up-btn--sm">شروع قافیه‌یابی</a></p>
 
     <table>
         <tr>
@@ -431,7 +407,7 @@
                             <option value="@rhythm.Rhythm">@rhythm.Rhythm</option>
                         }
                 </datalist>
-                <p><a role="button" onclick="tagCatWithRhythms(@Model.Cat.Cat.Id)" class="actionlink">شروع وزن‌یابی یا وزن‌گذاری</a></p>
+                <p><a role="button" onclick="tagCatWithRhythms(@Model.Cat.Cat.Id)" class="up-btn up-btn--ghost up-btn--sm">شروع وزن‌یابی یا وزن‌گذاری</a></p>
             </td>
         </tr>
         <tr>
@@ -463,7 +439,7 @@
         </tr>
         <tr>
             <td colspan="2">
-                <p><a role="button" onclick="tagPoemsWithLanguage(@Model.Cat.Cat.Id)" class="actionlink">تعیین زبان</a></p>
+                <p><a role="button" onclick="tagPoemsWithLanguage(@Model.Cat.Cat.Id)" class="up-btn up-btn--ghost up-btn--sm">تعیین زبان</a></p>
             </td>
         </tr>
     </table>
@@ -484,7 +460,7 @@
         </tr>
         <tr>
             <td colspan="2">
-                <p><a role="button" onclick="tagPoemsWithFormat(@Model.Cat.Cat.Id)" class="actionlink">تعیین قالب</a></p>
+                <p><a role="button" onclick="tagPoemsWithFormat(@Model.Cat.Cat.Id)" class="up-btn up-btn--ghost up-btn--sm">تعیین قالب</a></p>
             </td>
         </tr>
     </table>
@@ -543,10 +519,10 @@
         </tr>
         <tr>
             <td>
-                <input type="submit" value="تغییر نام گروهی" />
+                <input type="submit" value="تغییر نام گروهی" class="up-btn up-btn--success" />
             </td>
             <td>
-                <input type="submit" id="renameSubcats" name="renameSubcats" value="برای زیربخش‌ها" />
+                <input type="submit" id="renameSubcats" name="renameSubcats" value="برای زیربخش‌ها" class="up-btn up-btn--ghost" />
             </td>
         </tr>
     </table>
@@ -555,10 +531,10 @@
 
 <h2>الگوهای شماره‌گذاری</h2>
 <script>
-    function deleteNumbering(itemId, itemName) {
+    async function deleteNumbering(itemId, itemName) {
 
-        if (!confirm('آیا از حذف الگوی شماره‌گذاری ' + itemName + ' اطمینان دارید؟'))
-            return;
+        var ok = await upConfirm('آیا از حذف الگوی شماره‌گذاری ' + itemName + ' اطمینان دارید؟');
+        if (!ok) return;
 
 
         $.ajax({
@@ -568,21 +544,18 @@
                 id: itemId
             },
              error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
-                },
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
+            },
             success: function () {
                 location.reload();
                 return false;
             },
         });
     }
-    function recountNumbering(itemId, itemName) {
+    async function recountNumbering(itemId, itemName) {
 
-        if (!confirm('آیا از شمارش مجدد الگوی شماره‌گذاری ' + itemName + ' اطمینان دارید؟'))
-            return;
+        var ok = await upConfirm('آیا از شمارش مجدد الگوی شماره‌گذاری ' + itemName + ' اطمینان دارید؟');
+        if (!ok) return;
 
         var url = '?handler=Recount';
 
@@ -593,21 +566,18 @@
                 id: itemId
             },
             error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
-                },
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
+            },
             success: function () {
-                alert('شمارش مجدد شروع شد.')
+                upToast('شمارش مجدد شروع شد.', 'success')
             },
         });
     }
 
-    function regenMissingNumbering() {
+    async function regenMissingNumbering() {
 
-        if (!confirm('آیا از تولید الگوهای شماره‌گذاری ناموجود اطمینان دارید؟'))
-            return;
+        var ok = await upConfirm('آیا از تولید الگوهای شماره‌گذاری ناموجود اطمینان دارید؟');
+        if (!ok) return;
 
         var url = '?handler=RegenerateNumberings';
 
@@ -615,13 +585,10 @@
             type: "POST",
             url: url,
              error: function (e) {
-                    if (e.responseText == null)
-                        alert(e);
-                    else
-                        alert(e.responseText);
-                },
+                upToast(e.responseText || 'خطا رخ داد.', 'error');
+            },
             success: function () {
-                alert('تولید الگوهای شماره‌گذاری ناموجود شروع شد.')
+                upToast('تولید الگوهای شماره‌گذاری ناموجود شروع شد.', 'success')
             },
         });
     }
@@ -663,14 +630,14 @@
                 }
             </td>
             <td>
-                <a role="button" onclick="deleteNumbering(@numbering.Id, '@numbering.Name')" class="actionlink" title="حذف">🗑</a>
-                <a role="button" onclick="recountNumbering(@numbering.Id, '@numbering.Name')" class="actionlink" title="شمارش مجدد">⟳</a>
+                <a role="button" onclick="deleteNumbering(@numbering.Id, '@numbering.Name')" class="up-btn up-btn--ghost up-btn--sm" title="حذف">🗑</a>
+                <a role="button" onclick="recountNumbering(@numbering.Id, '@numbering.Name')" class="up-btn up-btn--ghost up-btn--sm" title="شمارش مجدد">⟳</a>
             </td>
         </tr>
     }
     <tr>
         <td colspan="5">
-            <a role="button" onclick="regenMissingNumbering()" class="actionlink" title="تولید کلی الگوهای ناموجود">تولید کلی الگوهای ناموجود</a>
+            <a role="button" onclick="regenMissingNumbering()" class="up-btn up-btn--ghost up-btn--sm" title="تولید کلی الگوهای ناموجود">تولید کلی الگوهای ناموجود</a>
         </td>
     </tr>
 </table>
@@ -703,7 +670,7 @@
         </tr>
         <tr>
             <td colspan="2">
-                <input type="submit" value="ایجاد الگوی شماره‌گذاری" />
+                <input type="submit" value="ایجاد الگوی شماره‌گذاری" class="up-btn up-btn--success" />
             </td>
         </tr>
     </table>
@@ -746,7 +713,7 @@
         </tr>
         <tr>
             <td colspan="2">
-                <input type="submit" value="به‌روزرسانی ابرداده‌های دیگر" />
+                <input type="submit" value="به‌روزرسانی ابرداده‌های دیگر" class="up-btn up-btn--success" />
             </td>
         </tr>
     </table>
@@ -759,21 +726,21 @@
         <td>
             <form method="post" enctype="multipart/form-data" action="/Admin/CatUtils?Handler=UploadDb&url=@Model.Cat.Cat.FullUrl">
                 <input type="file" asp-for="SQLiteDb" />
-                <input type="submit" value="بارگذاری" />
+                <input type="submit" value="بارگذاری" class="up-btn up-btn--success" />
             </form>
         </td>
     </tr>
 </table>
 
-<p><a href="/Admin/CatTrans?id=@Model.Cat.Cat.Id">انتقال بخش</a></p>
+<p><a href="/Admin/CatTrans?id=@Model.Cat.Cat.Id" class="up-btn up-btn--ghost up-btn--sm">انتقال بخش</a></p>
 
-<p><a href="/Admin/CatDel?id=@Model.Cat.Cat.Id">حذف بخش</a></p>
+<p><a href="/Admin/CatDel?id=@Model.Cat.Cat.Id" class="up-btn up-btn--danger up-btn--sm">حذف بخش</a></p>
 
 
-<p><a role="button" onclick="regenRelatedSections(@Model.Cat.Cat.Id)" class="actionlink" title="بازسازی قطعات مرتبط">بازسازی قطعات مرتبط</a></p>
+<p><a role="button" onclick="regenRelatedSections(@Model.Cat.Cat.Id)" class="up-btn up-btn--ghost up-btn--sm" title="بازسازی قطعات مرتبط">بازسازی قطعات مرتبط</a></p>
 
 
-<p><a role="button" onclick="reslugCat(@Model.Cat.Cat.Id)" class="actionlink">تولید مجدد نشانی‌های اشعار بخش</a></p>
+<p><a role="button" onclick="reslugCat(@Model.Cat.Cat.Id)" class="up-btn up-btn--ghost up-btn--sm">تولید مجدد نشانی‌های اشعار بخش</a></p>
 
 <table>
     <tr>
@@ -794,7 +761,7 @@
     </tr>
     <tr>
         <td colspan="2">
-            <p><a role="button" onclick="tagPoemsWithDigitalTag(@Model.Cat.Cat.Id)" class="actionlink">تعیین منبع</a></p>
+            <p><a role="button" onclick="tagPoemsWithDigitalTag(@Model.Cat.Cat.Id)" class="up-btn up-btn--ghost up-btn--sm">تعیین منبع</a></p>
         </td>
     </tr>
 </table>

GanjooRazor/Areas/Admin/Pages/ModifyPage.cshtml

@@ -1,18 +1,21 @@
-@page
+@page
 @model GanjooRazor.Areas.Admin.Pages.ModifyPageModel
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @{
     Layout = "_AdminLayout";
     ViewData["Title"] = "ویرایش";
 }
+<div class="up-page-header">
+    <h1>@ViewData["Title"]</h1>
+</div>
 
-<h1>@ViewData["Title"]</h1>
-
-<p>@Html.Raw(Model.LastMessage)</p>
+@if (!string.IsNullOrEmpty(Model.LastMessage))
+{
+    <div class="up-alert up-alert--info">@Html.Raw(Model.LastMessage)</div>
+}
 
 @if (Model.PageInformation != null)
 {
-
     <script>
         function defaultHtmlText() {
             $('#ModifyModel_HtmlText').html('@Model.DefaultHtmlText');
@@ -26,7 +29,7 @@
                     id: poemId
                 },
                 error: function() {
-                    alert('خطا رخ داد.');
+                    upToast('خطا رخ داد.', 'error');
                 },
                 success: function(rhyme) {
                     $(elementId).val(rhyme);
@@ -36,250 +39,93 @@
         }
     </script>
 
+    <div class="up-card">
+        <form method="post" class="up-form">
+            <div class="up-field">
+                <label>شناسهٔ صفحه</label>
+                <div class="up-field-static"><a href="/?p=@Request.Query["id"]">@Request.Query["id"]</a></div>
+            </div>
+            <div class="up-field">
+                <label asp-for="ModifyModel.Title">عنوان</label>
+                <input asp-for="ModifyModel.Title" />
+            </div>
+            <div class="up-field up-field--ltr">
+                <label asp-for="ModifyModel.UrlSlug">نامک</label>
+                <input asp-for="ModifyModel.UrlSlug" />
+            </div>
+            <div class="up-field">
+                <label asp-for="ModifyModel.HtmlText">متن</label>
+                <textarea asp-for="ModifyModel.HtmlText" tabindex="4" rows="20"></textarea>
+            </div>
 
-    <form method="post">
-        <table style="width:100%" class="noborder">
-            <tr>
-                <td>
-                    <span class="inputlabel">شناسهٔ صفحه: </span>
-                </td>
-                <td>
-                    <span class="inputlabel"><a href="/?p=@Request.Query["id"]">@Request.Query["id"]</a></span>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel">عنوان: </span>
-                </td>
-                <td>
-                    <input asp-for="ModifyModel.Title" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel">نامک: </span>
-                </td>
-                <td>
-                    <input style="text-align:left;direction:ltr;" asp-for="ModifyModel.UrlSlug" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel">متن: </span>
-                </td>
-                <td>
-                    <textarea asp-for="ModifyModel.HtmlText" tabindex="4" rows="20" cols="80"></textarea>
-                </td>
-            </tr>
             @if (Model.PageInformation.GanjoorPageType == RMuseum.Models.Ganjoor.GanjoorPageType.PoemPage)
             {
-                <tr>
-                    <td>
-                        <span class="inputlabel">منبع: </span>
-                    </td>
-                    <td>
-                        <table>
-                            <tr>
-                                <td><span>نام:</span> <input asp-for="ModifyModel.SourceName" /></td>
-                            </tr>
-                            <tr>
-                                <td><span>نشانی:</span> <input style="text-align:left;direction:ltr;" asp-for="ModifyModel.SourceUrlSlug" /></td>
-                            </tr>
-                        </table>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <span class="inputlabel">دسته‌بندی کهن: </span>
-                    </td>
-                    <td>
-                        <table>
-                            <tr>
-                                <td><span>نام:</span> <input asp-for="ModifyModel.OldTag" /></td>
-                            </tr>
-                            <tr>
-                                <td><span>نشانی:</span> <input style="text-align:left;direction:ltr;" asp-for="ModifyModel.OldTagPageUrl" /></td>
-                            </tr>
-                        </table>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <span class="inputlabel">وزن: </span>
-                    </td>
-                    <td>
-                        <input asp-for="ModifyModel.Rhythm" size="50" list="rythms" />
-                        <datalist id="rythms">
-                            @if (Model.Rhythms != null)
-                                @foreach (var rhythm in Model.Rhythms)
-                                {
-                                    <option value="@rhythm.Rhythm">@rhythm.Rhythm</option>
-                                }
-                        </datalist>
-
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <span class="inputlabel">حروف قافیه: </span>
-                    </td>
-                    <td>
-                        <input asp-for="ModifyModel.RhymeLetters" />
-                        <a role="button" onclick="computePoemRhyme(@Request.Query["id"], '#ModifyModel_RhymeLetters')" class="actionlink">محاسبه</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <span class="inputlabel">زبان (برای کدگذاری صفحه و نه مشخصات لهجه‌ها)</span>
-                    </td>
-                    <td>
-                        <select asp-for="ModifyModel.Language">
-                            <option value="">فارسی</option>
-                            <option value="azb">ترکی</option>
-                            <option value="ar">عربی</option>
-                            <option value="ckb">کردی</option>
-                        </select>
-                    </td>
-                </tr>
+                <div class="up-field">
+                    <label>منبع</label>
+                    <input asp-for="ModifyModel.SourceName" placeholder="نام" />
+                    <input asp-for="ModifyModel.SourceUrlSlug" placeholder="نشانی" style="direction:ltr;text-align:left;" />
+                </div>
+                <div class="up-field">
+                    <label>دسته‌بندی کهن</label>
+                    <input asp-for="ModifyModel.OldTag" placeholder="نام" />
+                    <input asp-for="ModifyModel.OldTagPageUrl" placeholder="نشانی" style="direction:ltr;text-align:left;" />
+                </div>
+                <div class="up-field">
+                    <label asp-for="ModifyModel.Rhythm">وزن</label>
+                    <input asp-for="ModifyModel.Rhythm" list="rythms" />
+                    <datalist id="rythms">
+                        @if (Model.Rhythms != null)
+                        {
+                            foreach (var rhythm in Model.Rhythms)
+                            {
+                                <option value="@rhythm.Rhythm">@rhythm.Rhythm</option>
+                            }
+                        }
+                    </datalist>
+                </div>
+                <div class="up-field">
+                    <label asp-for="ModifyModel.RhymeLetters">حروف قافیه</label>
+                    <div class="up-form-actions">
+                        <input asp-for="ModifyModel.RhymeLetters" style="flex:1;" />
+                        <a role="button" onclick="computePoemRhyme(@Request.Query["id"], '#ModifyModel_RhymeLetters')" class="up-btn up-btn--ghost up-btn--sm">محاسبه</a>
+                    </div>
+                </div>
+                <div class="up-field">
+                    <label asp-for="ModifyModel.Language">زبان (برای کدگذاری صفحه و نه مشخصات لهجه‌ها)</label>
+                    <select asp-for="ModifyModel.Language">
+                        <option value="">فارسی</option>
+                        <option value="azb">ترکی</option>
+                        <option value="ar">عربی</option>
+                        <option value="ckb">کردی</option>
+                    </select>
+                </div>
             }
 
             @if (Model.PageInformation.GanjoorPageType == RMuseum.Models.Ganjoor.GanjoorPageType.CatPage || Model.PageInformation.GanjoorPageType == RMuseum.Models.Ganjoor.GanjoorPageType.PoetPage || Model.PageInformation.GanjoorPageType == RMuseum.Models.Ganjoor.GanjoorPageType.PoemPage)
             {
-                <tr>
-                    <td>
-                        <span class="inputlabel">منتشر شده (فعلا استفاده نشده)</span>
-                    </td>
-                    <td>
-                        <input type="checkbox" asp-for="ModifyModel.Published" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <span class="inputlabel">ترتیب در فهرستها:</span>
-                    </td>
-                    <td>
-                        <input asp-for="ModifyModel.MixedModeOrder" />
-                    </td>
-                </tr>
+                <div class="up-field">
+                    <label asp-for="ModifyModel.Published">منتشر شده (فعلا استفاده نشده)</label>
+                    <input type="checkbox" asp-for="ModifyModel.Published" />
+                </div>
+                <div class="up-field">
+                    <label asp-for="ModifyModel.MixedModeOrder">ترتیب در فهرستها</label>
+                    <input asp-for="ModifyModel.MixedModeOrder" />
+                </div>
             }
 
-
             @if (Model.PageInformation.GanjoorPageType == RMuseum.Models.Ganjoor.GanjoorPageType.CatPage || Model.PageInformation.GanjoorPageType == RMuseum.Models.Ganjoor.GanjoorPageType.PoetPage)
             {
-                <tr>
-                    <td>
-                        <span class="inputlabel">نوع بخش (فقط بخش‌ها)</span>
-                    </td>
-                    <td>
-                        <select asp-for="ModifyModel.CatType">
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorCatType.Default">پیش‌فرض</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorCatType.Book">کتاب</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorCatType.BookPart">بخش</option>
-                        </select>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <span class="inputlabel">نحوهٔ فهرست‌گذاری بخش (فقط بخش‌ها)</span>
-                    </td>
-                    <td>
-                        <select asp-for="ModifyModel.TableOfContentsStyle">
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.Analyse">بر اساس تحلیل بخش</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.OnlyTitles">فقط عناوین</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.TitlesAndFirstVerse">عنوان و مصرع اول</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithFirstVerse">الفبایی با مصرع اول</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithSecondVerse">الفبایی با مصرع دوم</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithFirstCouplet">الفبایی با بیت اول</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.TitlesAndSecondVerse">عنوان و مصرع دوم</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.TitlesAndFirstCouplet">عنوان و بیت اول</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.TitlesAndFirstCenteredVerse">عنوان و مصرع بند</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.TitlesAndFirstCenteredCouplet">عنوان و بیت بند</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithFirstVerseNotSorted">الفبایی با مصرع اول - مرتب نشده</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithSecondVerseNotSorted">الفبایی با مصرع دوم - مرتب نشده</option>
-                            <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithFirstCoupletNotSorted">الفبایی با بیت اول - مرتب نشده</option>
-                        </select>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <span class="inputlabel">توضیحات متنی بخش (فقط بخش‌ها): </span>
-                    </td>
-                    <td>
-                        <textarea asp-for="ModifyModel.Description" rows="20" cols="80"></textarea>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <span class="inputlabel">توضیحات Html بخش (فقط بخش‌ها): </span>
-                    </td>
-                    <td>
-                        <textarea asp-for="ModifyModel.DescriptionHtml" class="editor width-100per"></textarea>
-                    </td>
-                </tr>
-            }
-
-            <tr>
-                <td>
-                    <span class="inputlabel">ایندکس نشود</span>
-                </td>
-                <td>
-                    <input type="checkbox" asp-for="ModifyModel.NoIndex" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span class="inputlabel">از این نشانی (کامل) هم به این صفحه ری‌دایرکت شود</span>
-                </td>
-                <td>
-                    <input style="text-align:left;direction:ltr;" asp-for="ModifyModel.RedirectFromFullUrl" />
-                </td>
-            </tr>
-
-            <tr>
-                <td>
-                    <span class="inputlabel">توضیح این ویرایش: </span>
-                </td>
-                <td>
-                    <input asp-for="ModifyModel.Note" />
-
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <button type="submit" name="approve" id="approve" style="width:100%;color:white;background-color:green">ذخیره</button>
-                </td>
-            </tr>
-
-            <tr>
-                <td colspan="2">
-                    <a href="/Admin/PageHistory?id=@Request.Query["id"]">سوابق</a>
-                </td>
-            </tr>
-
-            <tr>
-                <td colspan="2">
-                    <a role="button" href="/Admin/CatUtils?url=@Model.PageInformation.FullUrl" class="actionlink">مدیریت بخش متناظر</a>
-                </td>
-            </tr>
-            @if (Model.PageInformation.PoetOrCat != null)
-            {
-                <tr>
-                    <td colspan="2">
-                        <a role="button" href="/Admin/Poet?id=@Model.PageInformation.PoetOrCat.Poet.Id" class="actionlink">سخنور</a>
-                    </td>
-                </tr>
-            }
-
-        </table>
-    </form>
-
-    <form action="?Handler=GenerateCatPage&id=@Model.PageInformation.Id" method="post">
-        <table>
-            <tr>
-                <td>
-                    <select asp-for="GanjoorTOC">
+                <div class="up-field">
+                    <label asp-for="ModifyModel.CatType">نوع بخش (فقط بخش‌ها)</label>
+                    <select asp-for="ModifyModel.CatType">
+                        <option value="@RMuseum.Models.Ganjoor.GanjoorCatType.Default">پیش‌فرض</option>
+                        <option value="@RMuseum.Models.Ganjoor.GanjoorCatType.Book">کتاب</option>
+                        <option value="@RMuseum.Models.Ganjoor.GanjoorCatType.BookPart">بخش</option>
+                    </select>
+                </div>
+                <div class="up-field">
+                    <label asp-for="ModifyModel.TableOfContentsStyle">نحوهٔ فهرست‌گذاری بخش (فقط بخش‌ها)</label>
+                    <select asp-for="ModifyModel.TableOfContentsStyle">
                         <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.Analyse">بر اساس تحلیل بخش</option>
                         <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.OnlyTitles">فقط عناوین</option>
                         <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.TitlesAndFirstVerse">عنوان و مصرع اول</option>
@@ -294,61 +140,112 @@
                         <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithSecondVerseNotSorted">الفبایی با مصرع دوم - مرتب نشده</option>
                         <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithFirstCoupletNotSorted">الفبایی با بیت اول - مرتب نشده</option>
                     </select>
-                </td>
-                <td>
-                    <button type="submit" style="width:100%;color:white;background-color:blue">تولید</button>
-                    <button type="submit" name="directInsert" id="directInsert" style="width:100%;color:white;background-color:blue">درج مستقیم</button>
-                </td>
-            </tr>
-        </table>
-    </form>
+                </div>
+                <div class="up-field">
+                    <label asp-for="ModifyModel.Description">توضیحات متنی بخش (فقط بخش‌ها)</label>
+                    <textarea asp-for="ModifyModel.Description" rows="20"></textarea>
+                </div>
+                <div class="up-field">
+                    <label asp-for="ModifyModel.DescriptionHtml">توضیحات Html بخش (فقط بخش‌ها)</label>
+                    <textarea asp-for="ModifyModel.DescriptionHtml" class="editor"></textarea>
+                </div>
+            }
+
+            <div class="up-field">
+                <label asp-for="ModifyModel.NoIndex">ایندکس نشود</label>
+                <input type="checkbox" asp-for="ModifyModel.NoIndex" />
+            </div>
+            <div class="up-field up-field--ltr">
+                <label asp-for="ModifyModel.RedirectFromFullUrl">از این نشانی (کامل) هم به این صفحه ری‌دایرکت شود</label>
+                <input asp-for="ModifyModel.RedirectFromFullUrl" />
+            </div>
+            <div class="up-field">
+                <label asp-for="ModifyModel.Note">توضیح این ویرایش</label>
+                <input asp-for="ModifyModel.Note" />
+            </div>
+
+            <div class="up-form-actions">
+                <button type="submit" name="approve" id="approve" class="up-btn up-btn--success">ذخیره</button>
+            </div>
+
+            <div class="up-form-actions" style="margin-top:var(--up-space-3);">
+                <a href="/Admin/PageHistory?id=@Request.Query["id"]" class="up-btn up-btn--ghost up-btn--sm">سوابق</a>
+                <a role="button" href="/Admin/CatUtils?url=@Model.PageInformation.FullUrl" class="up-btn up-btn--ghost up-btn--sm">مدیریت بخش متناظر</a>
+                @if (Model.PageInformation.PoetOrCat != null)
+                {
+                    <a role="button" href="/Admin/Poet?id=@Model.PageInformation.PoetOrCat.Poet.Id" class="up-btn up-btn--ghost up-btn--sm">سخنور</a>
+                }
+            </div>
+        </form>
+    </div>
+
+    <div class="up-card">
+        <form action="?Handler=GenerateCatPage&id=@Model.PageInformation.Id" method="post" class="up-form">
+            <div class="up-field">
+                <label asp-for="GanjoorTOC">تولید فهرست</label>
+                <select asp-for="GanjoorTOC">
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.Analyse">بر اساس تحلیل بخش</option>
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.OnlyTitles">فقط عناوین</option>
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.TitlesAndFirstVerse">عنوان و مصرع اول</option>
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithFirstVerse">الفبایی با مصرع اول</option>
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithSecondVerse">الفبایی با مصرع دوم</option>
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithFirstCouplet">الفبایی با بیت اول</option>
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.TitlesAndSecondVerse">عنوان و مصرع دوم</option>
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.TitlesAndFirstCouplet">عنوان و بیت اول</option>
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.TitlesAndFirstCenteredVerse">عنوان و مصرع بند</option>
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.TitlesAndFirstCenteredCouplet">عنوان و بیت بند</option>
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithFirstVerseNotSorted">الفبایی با مصرع اول - مرتب نشده</option>
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithSecondVerseNotSorted">الفبایی با مصرع دوم - مرتب نشده</option>
+                    <option value="@RMuseum.Models.Ganjoor.GanjoorTOC.AlphabeticWithFirstCoupletNotSorted">الفبایی با بیت اول - مرتب نشده</option>
+                </select>
+            </div>
+            <div class="up-form-actions">
+                <button type="submit" class="up-btn up-btn--primary">تولید</button>
+                <button type="submit" name="directInsert" id="directInsert" class="up-btn up-btn--primary">درج مستقیم</button>
+            </div>
+        </form>
+    </div>
 
     @if (Model.PageInformation.Poem != null)
     {
-        @if (Model.PageInformation.Poem.Previous != null)
-        {
-            <p><a href="/Admin/ModifyPage?id=@Model.PageInformation.Poem.Previous.Id">ویرایش شعر قبل</a></p>
-        }
-        @if (Model.PageInformation.Poem.Next != null)
-        {
-            <p><a href="/Admin/ModifyPage?id=@Model.PageInformation.Poem.Next.Id">ویرایش شعر بعد</a></p>
-        }
+        <div class="up-form-actions">
+            @if (Model.PageInformation.Poem.Previous != null)
+            {
+                <a href="/Admin/ModifyPage?id=@Model.PageInformation.Poem.Previous.Id" class="up-btn up-btn--ghost up-btn--sm">ویرایش شعر قبل</a>
+            }
+            @if (Model.PageInformation.Poem.Next != null)
+            {
+                <a href="/Admin/ModifyPage?id=@Model.PageInformation.Poem.Next.Id" class="up-btn up-btn--ghost up-btn--sm">ویرایش شعر بعد</a>
+            }
+        </div>
     }
 
-    <p><a role="button" onclick="defaultHtmlText()" class="actionlink" title="چینش پیش‌فرض ابیات">چینش پیش‌فرض ابیات</a></p>
+    <div class="up-card">
+        <h2 class="up-card__title">ابزارها</h2>
+        <div class="up-form-actions">
+            <a role="button" onclick="defaultHtmlText()" class="up-btn up-btn--ghost up-btn--sm" title="چینش پیش‌فرض ابیات">چینش پیش‌فرض ابیات</a>
+            <a role="button" onclick="cleanCache(@Model.PageInformation.Id)" class="up-btn up-btn--ghost up-btn--sm" title="حذف کش صفحه">حذف کش صفحه</a>
+            <a role="button" onclick="rebuildSitemap()" class="up-btn up-btn--ghost up-btn--sm" title="بازسازی نقشهٔ سایت">بازسازی نقشهٔ سایت</a>
+            <a role="button" onclick="rebuildTajikSitemap()" class="up-btn up-btn--ghost up-btn--sm" title="بازسازی نقشهٔ سایت">بازسازی نقشهٔ سایت تاجیکی</a>
+            <a role="button" onclick="refillCoupletCounts()" class="up-btn up-btn--ghost up-btn--sm">بازشماری تعداد ابیات قطعات</a>
+            <a role="button" onclick="rebuildStats()" class="up-btn up-btn--ghost up-btn--sm" title="بازسازی صفحات آمار و اوزان عروضی">بازسازی صفحات آمار و اوزان عروضی</a>
+            <a role="button" onclick="rebuildRelatedPages()" class="up-btn up-btn--ghost up-btn--sm" title="بازسازی صفحات استقبالها">بازسازی صفحات استقبالها</a>
+            <a role="button" onclick="rebuildDigitalSourcesStats()" class="up-btn up-btn--ghost up-btn--sm" title="بازسازی آمار منابع دیجیتال">بازسازی آمار منابع دیجیتال</a>
+            <a role="button" onclick="transilerate()" class="up-btn up-btn--ghost up-btn--sm" title="برگردان تاجیکی">برگردان تاجیکی</a>
+        </div>
 
-    <p><a role="button" onclick="cleanCache(@Model.PageInformation.Id)" class="actionlink" title="حذف کش صفحه">حذف کش صفحه</a></p>
+        @if (Model.PageInformation.PoetOrCat != null)
+        {
+            <div class="up-form-actions" style="margin-top:var(--up-space-2);">
+                <a role="button" onclick="rebuildRebuildWordCounts(@Model.PageInformation.PoetOrCat.Poet.Id)" class="up-btn up-btn--ghost up-btn--sm" title="شمارش واژگان">شمارش واژگان</a>
+                <a role="button" onclick="discoverNaskbanPaperSources(@Model.PageInformation.PoetOrCat.Poet.Id)" class="up-btn up-btn--ghost up-btn--sm" title="فهرست کردن کتابهای نسکبان">فهرست کردن کتابهای نسکبان</a>
+                <a role="button" onclick="discoverMusuemPaperSources(@Model.PageInformation.PoetOrCat.Poet.Id)" class="up-btn up-btn--ghost up-btn--sm" title="فهرست کردن کتابهای گنجینه">فهرست کردن کتابهای گنجینه</a>
+            </div>
+        }
+    </div>
 
-    <p><a role="button" onclick="rebuildSitemap()" class="actionlink" title="بازسازی نقشهٔ سایت">بازسازی نقشهٔ سایت</a></p>
-
-    <p><a role="button" onclick="rebuildTajikSitemap()" class="actionlink" title="بازسازی نقشهٔ سایت">بازسازی نقشهٔ سایت تاجیکی</a></p>
-
-    <p><a role="button" onclick="refillCoupletCounts()" class="actionlink">بازشماری تعداد ابیات قطعات</a></p>
-
-    <p><a role="button" onclick="rebuildStats()" class="actionlink" title="بازسازی صفحات آمار و اوزان عروضی">بازسازی صفحات آمار و اوزان عروضی</a></p>
-
-    <p><a role="button" onclick="rebuildRelatedPages()" class="actionlink" title="بازسازی صفحات استقبالها">بازسازی صفحات استقبالها</a></p>
-
-    <p><a role="button" onclick="rebuildDigitalSourcesStats()" class="actionlink" title="بازسازی آمار منابع دیجیتال">بازسازی آمار منابع دیجیتال</a></p>
-
-    @if (Model.PageInformation.PoetOrCat != null)
-    {
-        <p><a role="button" onclick="rebuildRebuildWordCounts(@Model.PageInformation.PoetOrCat.Poet.Id)" class="actionlink" title="شمارش واژگان">شمارش واژگان</a></p>
-        <p><a role="button" onclick="discoverNaskbanPaperSources(@Model.PageInformation.PoetOrCat.Poet.Id)" class="actionlink" title="فهرست کردن کتابهای نسکبان">فهرست کردن کتابهای نسکبان</a></p>
-        <p><a role="button" onclick="discoverMusuemPaperSources(@Model.PageInformation.PoetOrCat.Poet.Id)" class="actionlink" title="فهرست کردن کتابهای گنجینه">فهرست کردن کتابهای گنجینه</a></p>
-       
-    }
-
-
-    <p><a role="button" onclick="transilerate()" class="actionlink" title="برگردان تاجیکی">برگردان تاجیکی</a></p>
-
-
-    <table>
-        <tr>
-            <td><a role="button" href="/Admin/ModifyPage?id=0" class="actionlink">صفحهٔ جدید</a></td>
-        </tr>
-        <tr>
-            <td><a role="button" href="/Admin/PageDel/?url=@Model.PageInformation.FullUrl" class="actionlink">حذف صفحه</a></td>
-        </tr>
-    </table>
-}
+    <div class="up-form-actions">
+        <a role="button" href="/Admin/ModifyPage?id=0" class="up-btn up-btn--ghost up-btn--sm">صفحهٔ جدید</a>
+        <a role="button" href="/Admin/PageDel/?url=@Model.PageInformation.FullUrl" class="up-btn up-btn--danger up-btn--sm">حذف صفحه</a>
+    </div>
+}

GanjooRazor/Pages/Shared/_AdminLayout.cshtml

@@ -127,9 +127,9 @@
 
         
 
-        function rebuildSitemap() {
-            if (!confirm('آیا از بازسازی نقشهٔ سایت اطمینان دارید؟'))
-                return;
+        async function rebuildSitemap() {
+            var ok = await upConfirm('آیا از بازسازی نقشهٔ سایت اطمینان دارید؟');
+            if (!ok) return;
 
             var url = '?handler=RebuildSitemap';
 
@@ -137,18 +137,18 @@
                 type: "POST",
                 url: url,
                 error: function() {
-                    alert('خطا رخ داد.')
+                    upToast('خطا رخ داد.', 'error');
                 },
                 success: function() {
-                    alert('فرایند بازسازی نقشهٔ سایت شروع شد.')
+                    upToast('فرایند بازسازی نقشهٔ سایت شروع شد.', 'success');
                 },
 
             });
         }
 
-        function rebuildTajikSitemap() {
-            if (!confirm('آیا از بازسازی نقشهٔ سایت تاجیکی اطمینان دارید؟'))
-                return;
+        async function rebuildTajikSitemap() {
+            var ok = await upConfirm('آیا از بازسازی نقشهٔ سایت تاجیکی اطمینان دارید؟');
+            if (!ok) return;
 
             var url = '?handler=RebuildTajikSitemap';
 
@@ -156,10 +156,10 @@
                 type: "POST",
                 url: url,
                 error: function () {
-                    alert('خطا رخ داد.')
+                    upToast('خطا رخ داد.', 'error');
                 },
                 success: function () {
-                    alert('فرایند بازسازی نقشهٔ سایت تاجیکی شروع شد.')
+                    upToast('فرایند بازسازی نقشهٔ سایت تاجیکی شروع شد.', 'success');
                 },
 
             });
@@ -167,9 +167,9 @@
 
 
 
-        function rebuildStats() {
-            if (!confirm('آیا از بازسازی صفحات آمار اطمینان دارید؟'))
-                return;
+        async function rebuildStats() {
+            var ok = await upConfirm('آیا از بازسازی صفحات آمار اطمینان دارید؟');
+            if (!ok) return;
 
             var url = '?handler=RebuildStats';
 
@@ -177,10 +177,10 @@
                 type: "POST",
                 url: url,
                 error: function() {
-                    alert('خطا رخ داد.')
+                    upToast('خطا رخ داد.', 'error');
                 },
                 success: function() {
-                    alert('فرایند بازسازی صفحات آمار شروع شد.')
+                    upToast('فرایند بازسازی صفحات آمار شروع شد.', 'success');
                 },
 
             });
@@ -188,9 +188,9 @@
 
         
 
-        function refillCoupletCounts() {
-            if (!confirm('آیا از بازشماری تعداد ابیات قطعات اطمینان دارید؟'))
-                return;
+        async function refillCoupletCounts() {
+            var ok = await upConfirm('آیا از بازشماری تعداد ابیات قطعات اطمینان دارید؟');
+            if (!ok) return;
 
             var url = '?handler=RefillSectionsCoupletCounts';
 
@@ -198,18 +198,18 @@
                 type: "POST",
                 url: url,
                 error: function() {
-                    alert('خطا رخ داد.')
+                    upToast('خطا رخ داد.', 'error');
                 },
                 success: function() {
-                    alert('فرایند بازشماری تعداد ابیات قطعات شروع شد.')
+                    upToast('فرایند بازشماری تعداد ابیات قطعات شروع شد.', 'success');
                 },
 
             });
         }
 
-        function rebuildRelatedPages() {
-            if (!confirm('آیا از بازسازی محتوای صفحات استقبال‌ها اطمینان دارید؟'))
-                return;
+        async function rebuildRelatedPages() {
+            var ok = await upConfirm('آیا از بازسازی محتوای صفحات استقبال‌ها اطمینان دارید؟');
+            if (!ok) return;
 
             var url = '?handler=RebuildRelatedPages';
 
@@ -217,18 +217,18 @@
                 type: "POST",
                 url: url,
                 error: function () {
-                    alert('خطا رخ داد.')
+                    upToast('خطا رخ داد.', 'error');
                 },
                 success: function () {
-                    alert('فرایند بازسازی صفحات آمار شروع شد.')
+                    upToast('فرایند بازسازی صفحات آمار شروع شد.', 'success');
                 },
 
             });
         }
 
-        function rebuildDigitalSourcesStats() {
-            if (!confirm('آیا از بازسازی آمار منابع دیجیتال اطمینان دارید؟'))
-                return;
+        async function rebuildDigitalSourcesStats() {
+            var ok = await upConfirm('آیا از بازسازی آمار منابع دیجیتال اطمینان دارید؟');
+            if (!ok) return;
 
             var url = '?handler=RebuildDigitalSourcesStats';
 
@@ -236,10 +236,10 @@
                 type: "POST",
                 url: url,
                 error: function () {
-                    alert('خطا رخ داد.')
+                    upToast('خطا رخ داد.', 'error');
                 },
                 success: function () {
-                    alert('فرایند بازسازی شروع شد.')
+                    upToast('فرایند بازسازی شروع شد.', 'success');
                 },
 
             });
@@ -247,9 +247,9 @@
 
         
 
-        function transilerate() {
-            if (!confirm('آیا از شروع برگردان تاجیکی اطمینان دارید؟'))
-                return;
+        async function transilerate() {
+            var ok = await upConfirm('آیا از شروع برگردان تاجیکی اطمینان دارید؟');
+            if (!ok) return;
 
             var url = '?handler=Transilerate';
 
@@ -257,21 +257,22 @@
                 type: "POST",
                 url: url,
                 error: function () {
-                    alert('خطا رخ داد.')
+                    upToast('خطا رخ داد.', 'error');
                 },
                 success: function () {
-                    alert('فرایند شروع شد.')
+                    upToast('فرایند شروع شد.', 'success');
                 },
 
             });
         }
 
-        function rebuildRebuildWordCounts(poetId) {
-            if(!confirm('فقط شاعر جاری؟')){
+        async function rebuildRebuildWordCounts(poetId) {
+            var onlyCurrentPoet = await upConfirm('فقط شاعر جاری؟', { danger: false });
+            if (!onlyCurrentPoet) {
                 poetId = 0;
             }
-            if (!confirm('آیا از شمارش واژگان برای شاعر جاری با کد '+poetId.toString() + ' اطمینان دارید؟'))
-                return;
+            var ok = await upConfirm('آیا از شمارش واژگان برای شاعر جاری با کد ' + poetId.toString() + ' اطمینان دارید؟');
+            if (!ok) return;
 
             var url = '?handler=RebuildWordCounts';
 
@@ -282,10 +283,10 @@
                 },
                 url: url,
                 error: function () {
-                    alert('خطا رخ داد.')
+                    upToast('خطا رخ داد.', 'error');
                 },
                 success: function () {
-                    alert('فرایند بازسازی شروع شد.')
+                    upToast('فرایند بازسازی شروع شد.', 'success');
                 },
 
             });
@@ -306,10 +307,10 @@
                 },
                 url: url,
                 error: function () {
-                    alert('خطا رخ داد.')
+                    upToast('خطا رخ داد.', 'error');
                 },
                 success: function () {
-                    alert('فرایند بازسازی شروع شد.')
+                    upToast('فرایند بازسازی شروع شد.', 'success');
                 },
 
             });
@@ -326,10 +327,10 @@
                 },
                 url: url,
                 error: function () {
-                    alert('خطا رخ داد.')
+                    upToast('خطا رخ داد.', 'error');
                 },
                 success: function () {
-                    alert('فرایند بازسازی شروع شد.')
+                    upToast('فرایند بازسازی شروع شد.', 'success');
                 },
 
             });
@@ -339,10 +340,6 @@
 
         
 
-
-
-
-
         async function exportAll() {
             var ok = await upConfirm('آیا از تولید مجدد همهٔ فایلهای گنجور رومیزی اطمینان دارید؟');
             if (!ok) return;
@@ -365,9 +362,9 @@
 
 
 
-        function cleanCache(id) {
-            if (!confirm('آیا از حذف کش این صفحه اطمینان دارید؟'))
-                return;
+        async function cleanCache(id) {
+            var ok = await upConfirm('آیا از حذف کش این صفحه اطمینان دارید؟');
+            if (!ok) return;
 
             var url = '?handler=CleanCache';
 
@@ -378,10 +375,10 @@
                     id: id
                 },
                 error: function() {
-                    alert('خطا رخ داد.')
+                    upToast('خطا رخ داد.', 'error');
                 },
                 success: function() {
-                    alert('کش صفحه پاک شد.')
+                    upToast('کش صفحه پاک شد.', 'success');
                 },
 
             });