soroush.asadi
1c9d8cdc1b
Extracts Q/A pairs from the post body (an <h3> ending in the Persian question mark ؟ followed by the next <p>) and emits FAQPage JSON-LD in <head>. Makes posts with FAQ sections eligible for FAQ rich results in Google. Non-question <h3> headings are ignored. Verified: post with 3 h3s emits exactly 2 Question entries (the plain heading excluded), valid escaped JSON. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
391 lines
23 KiB
Plaintext
391 lines
23 KiB
Plaintext
@page "/blog/{slug}"
|
|
@model DrSousan.Api.Pages.Blog.PostModel
|
|
@{
|
|
var post = Model.Post!;
|
|
var baseUrl = Environment.GetEnvironmentVariable("SITE_BASE_URL")?.TrimEnd('/') ?? (Request.Scheme + "://" + Request.Host);
|
|
var canonicalUrl = baseUrl + "/blog/" + post.Slug;
|
|
var ogImage = ViewData["OgImage"]?.ToString() ?? "";
|
|
var articleType = ViewData["ArticleType"]?.ToString() ?? "MedicalWebPage";
|
|
var pubDate = post.PublishedAt?.ToString("yyyy-MM-ddTHH:mm:ssZ") ?? "";
|
|
var updDate = post.UpdatedAt.ToString("yyyy-MM-ddTHH:mm:ssZ");
|
|
// Escape a string for safe embedding inside a JSON string literal.
|
|
static string J(string? s) => System.Text.Json.JsonSerializer.Serialize(s ?? "")[1..^1];
|
|
}
|
|
|
|
@section Head {
|
|
<title>@ViewData["Title"]</title>
|
|
<meta name="description" content="@ViewData["MetaDesc"]" />
|
|
@if (!string.IsNullOrEmpty(ViewData["Keywords"]?.ToString())) {
|
|
<meta name="keywords" content="@ViewData["Keywords"]" />
|
|
}
|
|
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1" />
|
|
<meta name="author" content="@post.Author" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:site_name" content="@ViewData["SiteName"]" />
|
|
<meta property="og:title" content="@ViewData["Title"]" />
|
|
<meta property="og:description" content="@ViewData["MetaDesc"]" />
|
|
<meta property="og:url" content="@canonicalUrl" />
|
|
<meta property="og:locale" content="fa_IR" />
|
|
@if (!string.IsNullOrEmpty(pubDate)) { <meta property="article:published_time" content="@pubDate" /> }
|
|
<meta property="article:modified_time" content="@updDate" />
|
|
<meta property="article:author" content="@post.Author" />
|
|
@if (post.Category != null) { <meta property="article:section" content="@post.Category.Name" /> }
|
|
@if (!string.IsNullOrEmpty(ogImage)) {
|
|
<meta property="og:image" content="@(ogImage.StartsWith("http") ? ogImage : baseUrl + ogImage)" />
|
|
<meta property="og:image:alt" content="@post.Title" />
|
|
}
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="@ViewData["Title"]" />
|
|
<meta name="twitter:description" content="@ViewData["MetaDesc"]" />
|
|
@if (!string.IsNullOrEmpty(ogImage)) {
|
|
<meta name="twitter:image" content="@(ogImage.StartsWith("http") ? ogImage : baseUrl + ogImage)" />
|
|
}
|
|
<link rel="canonical" href="@canonicalUrl" />
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@@context": "https://schema.org",
|
|
"@@type": "@J(articleType)",
|
|
"headline": "@J(post.Title)",
|
|
"description": "@J(ViewData["MetaDesc"]?.ToString())",
|
|
"author": { "@@type": "Person", "name": "@J(post.Author)" },
|
|
"publisher": {
|
|
"@@type": "Organization",
|
|
"name": "@J(ViewData["SiteName"]?.ToString())",
|
|
"url": "@baseUrl"
|
|
},
|
|
"datePublished": "@pubDate",
|
|
"dateModified": "@updDate",
|
|
"mainEntityOfPage": "@canonicalUrl"
|
|
@if (!string.IsNullOrEmpty(ogImage)) {
|
|
@:,"image": "@(ogImage.StartsWith("http") ? ogImage : baseUrl + ogImage)"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@@context": "https://schema.org",
|
|
"@@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{ "@@type": "ListItem", "position": 1, "name": "خانه", "item": "@baseUrl/" },
|
|
{ "@@type": "ListItem", "position": 2, "name": "وبلاگ", "item": "@baseUrl/blog" }@(post.Category != null ? "," : "")
|
|
@if (post.Category != null) {
|
|
@:{ "@@type": "ListItem", "position": 3, "name": "@J(post.Category.Name)", "item": "@baseUrl/blog?category=@post.Category.Slug" },
|
|
@:{ "@@type": "ListItem", "position": 4, "name": "@J(post.Title)", "item": "@canonicalUrl" }
|
|
}
|
|
else {
|
|
@:{ "@@type": "ListItem", "position": 3, "name": "@J(post.Title)", "item": "@canonicalUrl" }
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
|
|
@if (Model.Faqs.Any())
|
|
{
|
|
<script type="application/ld+json">
|
|
{
|
|
"@@context": "https://schema.org",
|
|
"@@type": "FAQPage",
|
|
"mainEntity": [
|
|
@for (int i = 0; i < Model.Faqs.Count; i++)
|
|
{
|
|
var f = Model.Faqs[i];
|
|
@:{ "@@type": "Question", "name": "@J(f.Q)", "acceptedAnswer": { "@@type": "Answer", "text": "@J(f.A)" } }@(i < Model.Faqs.Count - 1 ? "," : "")
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
}
|
|
|
|
<style>
|
|
/* ─── Post Layout ──────────────────────────────────────────────── */
|
|
.post-layout{max-width:1100px;margin:0 auto;padding:5rem 2rem 3rem;display:grid;grid-template-columns:1fr 320px;gap:3rem;align-items:start}
|
|
@@media(max-width:900px){.post-layout{grid-template-columns:1fr;padding-top:5rem}}
|
|
/* ─── Article ──────────────────────────────────────────────────── */
|
|
.article-hero{border-radius:16px;overflow:hidden;margin-bottom:2rem;aspect-ratio:16/6;background:linear-gradient(135deg,var(--gold-pale),#EDE0CA);display:flex;align-items:center;justify-content:center;font-size:3rem}
|
|
.article-hero img{width:100%;height:100%;object-fit:cover}
|
|
.article-cat{display:inline-block;background:var(--gold-pale);color:var(--gold);font-size:.75rem;font-weight:600;padding:.25rem .8rem;border-radius:50px;margin-bottom:.8rem}
|
|
.article-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1.4;margin-bottom:1rem}
|
|
.article-meta{display:flex;gap:1.5rem;font-size:.8rem;color:var(--light);margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
|
|
.article-meta span{display:flex;align-items:center;gap:.3rem}
|
|
/* ─── Content ──────────────────────────────────────────────────── */
|
|
.article-content{font-size:.95rem;line-height:2;color:var(--dark)}
|
|
.article-content h2{font-size:1.3rem;font-weight:700;margin:1.8rem 0 .8rem;color:var(--dark);padding-bottom:.4rem;border-bottom:2px solid var(--gold-pale)}
|
|
.article-content h3{font-size:1.1rem;font-weight:600;margin:1.4rem 0 .6rem;color:var(--dark)}
|
|
.article-content p{margin-bottom:1rem}
|
|
.article-content ul,.article-content ol{padding-right:1.5rem;margin-bottom:1rem}
|
|
.article-content li{margin-bottom:.4rem}
|
|
.article-content strong{color:var(--dark);font-weight:600}
|
|
.article-content a{color:var(--gold);border-bottom:1px solid var(--gold-pale)}
|
|
.article-content blockquote{border-right:4px solid var(--gold);padding:.8rem 1.2rem;background:var(--gold-pale);border-radius:0 8px 8px 0;margin:1.2rem 0;font-style:italic;color:var(--mid)}
|
|
.article-content img{max-width:100%;height:auto;border-radius:12px;margin:1.2rem 0;display:block}
|
|
/* ─── In-content image carousel ───────────────────────────────── */
|
|
.post-carousel{position:relative;margin:1.5rem 0;border-radius:14px;overflow:hidden;background:#111}
|
|
.post-carousel .pc-track{display:flex;direction:ltr;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
|
|
.post-carousel .pc-track::-webkit-scrollbar{display:none}
|
|
.post-carousel .pc-track img{flex:0 0 100%;width:100%;max-height:480px;object-fit:cover;scroll-snap-align:center;display:block;margin:0 !important;border-radius:0 !important}
|
|
.post-carousel .pc-prev,.post-carousel .pc-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .2s}
|
|
.post-carousel .pc-prev:hover,.post-carousel .pc-next:hover{background:rgba(0,0,0,.72)}
|
|
.post-carousel .pc-prev{left:10px}
|
|
.post-carousel .pc-next{right:10px}
|
|
.post-carousel .pc-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:2}
|
|
.post-carousel .pc-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .2s}
|
|
.post-carousel .pc-dots span.active{background:#fff;width:20px;border-radius:4px}
|
|
/* ─── Tags ─────────────────────────────────────────────────────── */
|
|
.article-tags{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;gap:.5rem;flex-wrap:wrap}
|
|
.tag{background:var(--bg);border:1px solid var(--border);padding:.25rem .75rem;border-radius:50px;font-size:.78rem;color:var(--mid)}
|
|
/* ─── Share ─────────────────────────────────────────────────────── */
|
|
.share-box{margin-top:2rem;padding:1.5rem;background:var(--white);border-radius:12px;border:1px solid var(--border);text-align:center}
|
|
.share-title{font-size:.9rem;font-weight:600;margin-bottom:1rem}
|
|
.share-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
|
|
.share-btn{padding:.45rem 1rem;border-radius:8px;font-family:'Vazirmatn',sans-serif;font-size:.82rem;cursor:pointer;border:none;font-weight:500}
|
|
.share-telegram{background:#2CA5E0;color:#fff}
|
|
.share-whatsapp{background:#25D366;color:#fff}
|
|
.share-copy{background:var(--bg);color:var(--mid);border:1px solid var(--border)}
|
|
/* ─── CTA ──────────────────────────────────────────────────────── */
|
|
.cta-box{margin-top:2.5rem;padding:2rem;background:linear-gradient(135deg,var(--gold-pale),#EDE0CA);border-radius:16px;text-align:center}
|
|
.cta-box h3{font-size:1.1rem;font-weight:700;margin-bottom:.6rem}
|
|
.cta-box p{font-size:.88rem;color:var(--mid);margin-bottom:1.2rem}
|
|
.cta-btn{background:var(--gold);color:#fff;padding:.7rem 1.8rem;border-radius:50px;font-family:'Vazirmatn',sans-serif;font-size:.9rem;font-weight:600;border:none;cursor:pointer;display:inline-block;text-decoration:none}
|
|
/* ─── Sidebar ──────────────────────────────────────────────────── */
|
|
.sidebar{position:sticky;top:90px}
|
|
.sidebar-card{background:var(--white);border-radius:14px;border:1px solid var(--border);padding:1.4rem;margin-bottom:1.5rem}
|
|
.sidebar-title{font-size:.88rem;font-weight:700;color:var(--dark);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
|
|
.recent-post{display:flex;gap:.8rem;margin-bottom:.9rem;padding-bottom:.9rem;border-bottom:1px solid var(--border)}
|
|
.recent-post:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
|
|
.recent-img{width:56px;height:56px;border-radius:8px;background:var(--gold-pale);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem;overflow:hidden}
|
|
.recent-img img{width:100%;height:100%;object-fit:cover;border-radius:8px}
|
|
.recent-title{font-size:.82rem;font-weight:600;line-height:1.4;color:var(--dark);text-decoration:none}
|
|
.recent-title:hover{color:var(--gold)}
|
|
.recent-date{font-size:.73rem;color:var(--light);margin-top:.2rem}
|
|
.doctor-card{text-align:center}
|
|
.doc-avatar{width:90px;height:90px;border-radius:50%;background:var(--gold-pale);margin:0 auto .8rem;overflow:hidden;border:3px solid var(--gold)}
|
|
.doc-avatar img{width:100%;height:100%;object-fit:cover;object-position:top}
|
|
.doc-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.2rem}
|
|
.doc-name{font-size:.95rem;font-weight:700;color:var(--dark)}
|
|
.doc-title{font-size:.78rem;color:var(--light);margin:.2rem 0 .8rem}
|
|
.doc-btn{background:var(--gold);color:#fff;padding:.5rem 1.2rem;border-radius:50px;font-family:'Vazirmatn',sans-serif;font-size:.82rem;border:none;cursor:pointer;width:100%;text-decoration:none;display:block;text-align:center}
|
|
/* ─── Comments ─────────────────────────────────────────────────── */
|
|
.comments-section{margin-top:3rem}
|
|
.comments-section h2{font-size:1.3rem;font-weight:700;margin-bottom:1.5rem;color:var(--dark)}
|
|
.comment-card{background:var(--gold-pale);border-radius:12px;padding:1.2rem;margin-bottom:1rem;opacity:.98}
|
|
.comment-card.admin-reply{background:rgba(184,149,90,0.12);border-right:3px solid var(--gold)}
|
|
.comment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
|
|
.comment-author{font-weight:600;font-size:.92rem;color:var(--dark)}
|
|
.comment-author.admin{color:var(--gold)}
|
|
.comment-date{font-size:.78rem;color:var(--light)}
|
|
.comment-body{font-size:.88rem;color:var(--mid);line-height:1.8}
|
|
.comment-replies{margin-top:1rem;margin-right:1.5rem}
|
|
.comment-form-wrap{margin-top:2rem;background:var(--section-bg);border-radius:16px;padding:1.75rem;border:1px solid var(--border)}
|
|
.comment-form-wrap h3{font-size:1rem;font-weight:700;margin-bottom:1.2rem;color:var(--dark)}
|
|
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
|
|
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
|
|
.form-group label{font-size:.85rem;font-weight:500;color:var(--dark)}
|
|
.form-group input,.form-group textarea{background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:.65rem .9rem;font-family:'Vazirmatn',sans-serif;font-size:.88rem;color:var(--dark);direction:rtl;outline:none;transition:border-color .2s}
|
|
.form-group input:focus,.form-group textarea:focus{border-color:var(--gold)}
|
|
.form-group textarea{resize:vertical;min-height:100px}
|
|
.form-success{display:none;background:#e6f4ea;color:#1e7e34;border-radius:8px;padding:.8rem 1rem;text-align:center;margin-bottom:1rem;font-size:.88rem}
|
|
.form-success.show{display:block}
|
|
@@media(max-width:600px){.form-row{grid-template-columns:1fr}}
|
|
</style>
|
|
}
|
|
|
|
<div class="post-layout">
|
|
<!-- ── Article ── -->
|
|
<article>
|
|
<div class="article-hero">
|
|
@if (!string.IsNullOrEmpty(post.FeaturedImage))
|
|
{
|
|
<img src="@post.FeaturedImage" alt="@post.Title" loading="lazy" />
|
|
}
|
|
else { <span>📝</span> }
|
|
</div>
|
|
|
|
@if (post.Category != null)
|
|
{
|
|
<span class="article-cat">@post.Category.Name</span>
|
|
}
|
|
<h1 class="article-title">@post.Title</h1>
|
|
<div class="article-meta">
|
|
<span>✍️ @post.Author</span>
|
|
@if (post.PublishedAt.HasValue)
|
|
{
|
|
<span>📅 @post.PublishedAt.Value.ToString("yyyy/MM/dd")</span>
|
|
}
|
|
<span>🕐 @post.ReadingTimeMinutes دقیقه مطالعه</span>
|
|
<span>👁 @post.ViewCount بازدید</span>
|
|
</div>
|
|
|
|
<div class="article-content">
|
|
@Html.Raw(post.Content)
|
|
</div>
|
|
|
|
@if (!string.IsNullOrEmpty(post.Keywords))
|
|
{
|
|
<div class="article-tags">
|
|
@foreach (var kw in post.Keywords.Split(',', StringSplitOptions.RemoveEmptyEntries))
|
|
{
|
|
<span class="tag">@kw.Trim()</span>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
<div class="share-box">
|
|
<div class="share-title">این مقاله را به اشتراک بگذارید</div>
|
|
<div class="share-btns">
|
|
<a class="share-btn share-telegram" href="https://t.me/share/url?url=@Uri.EscapeDataString(canonicalUrl)&text=@Uri.EscapeDataString(post.Title)" target="_blank" rel="noopener">📱 تلگرام</a>
|
|
<a class="share-btn share-whatsapp" href="https://wa.me/?text=@Uri.EscapeDataString(post.Title + " " + canonicalUrl)" target="_blank" rel="noopener">💬 واتساپ</a>
|
|
<button class="share-btn share-copy" onclick="navigator.clipboard.writeText('@canonicalUrl').then(()=>{this.textContent='✓ کپی شد!';setTimeout(()=>this.textContent='🔗 کپی لینک',2000)})">🔗 کپی لینک</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cta-box">
|
|
<h3>آماده تحول در پوستتان هستید؟</h3>
|
|
<p>همین امروز با دکتر سوسن آلطه مشاوره رایگان دریافت کنید</p>
|
|
<a href="/#contact" class="cta-btn">رزرو نوبت رایگان</a>
|
|
</div>
|
|
|
|
<!-- Comments -->
|
|
<section class="comments-section" id="comments">
|
|
<h2>نظرات (@Model.Comments.Count)</h2>
|
|
|
|
@if (!Model.Comments.Any())
|
|
{
|
|
<p style="color:var(--light);margin-bottom:2rem;">اولین نظر را ثبت کنید!</p>
|
|
}
|
|
else
|
|
{
|
|
@foreach (var comment in Model.Comments)
|
|
{
|
|
<div class="comment-card @(comment.IsAdminReply ? "admin-reply" : "")">
|
|
<div class="comment-header">
|
|
<span class="comment-author @(comment.IsAdminReply ? "admin" : "")">
|
|
@(comment.IsAdminReply ? "👩⚕️ " : "")@comment.AuthorName
|
|
</span>
|
|
<span class="comment-date">@comment.CreatedAt.ToString("yyyy/MM/dd")</span>
|
|
</div>
|
|
<p class="comment-body">@comment.Body</p>
|
|
@if (comment.Replies.Any())
|
|
{
|
|
<div class="comment-replies">
|
|
@foreach (var reply in comment.Replies)
|
|
{
|
|
<div class="comment-card admin-reply">
|
|
<div class="comment-header">
|
|
<span class="comment-author admin">👩⚕️ @reply.AuthorName</span>
|
|
<span class="comment-date">@reply.CreatedAt.ToString("yyyy/MM/dd")</span>
|
|
</div>
|
|
<p class="comment-body">@reply.Body</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
|
|
<div class="comment-form-wrap">
|
|
<h3>ثبت نظر</h3>
|
|
@if (Model.CommentSent)
|
|
{
|
|
<div class="form-success show">✅ نظر شما ثبت شد و پس از تأیید نمایش داده میشود.</div>
|
|
}
|
|
<form method="post" asp-page="/Blog/Post" asp-route-slug="@post.Slug">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label asp-for="CommentAuthor">نام *</label>
|
|
<input asp-for="CommentAuthor" placeholder="نام شما" />
|
|
<span asp-validation-for="CommentAuthor" style="color:red;font-size:.78rem;"></span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label asp-for="CommentEmail">ایمیل (اختیاری)</label>
|
|
<input asp-for="CommentEmail" placeholder="ایمیل شما" dir="ltr" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label asp-for="CommentBody">نظر *</label>
|
|
<textarea asp-for="CommentBody" placeholder="نظر خود را بنویسید..."></textarea>
|
|
<span asp-validation-for="CommentBody" style="color:red;font-size:.78rem;"></span>
|
|
</div>
|
|
<button type="submit" class="btn-primary">ارسال نظر</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
|
|
<!-- ── Sidebar ── -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-card doctor-card">
|
|
<div class="doc-avatar">
|
|
@if (!string.IsNullOrEmpty(ViewData["HeroImage"]?.ToString()))
|
|
{
|
|
<img src="@ViewData["HeroImage"]" alt="@post.Author"/>
|
|
}
|
|
else
|
|
{
|
|
<div class="doc-avatar-placeholder">👩⚕️</div>
|
|
}
|
|
</div>
|
|
<div class="doc-name">@post.Author</div>
|
|
<div class="doc-title">@ViewData["HeroTag"]</div>
|
|
<a href="/#contact" class="doc-btn">رزرو نوبت</a>
|
|
</div>
|
|
|
|
<div class="sidebar-card">
|
|
<div class="sidebar-title">دستهبندی</div>
|
|
@if (post.Category != null)
|
|
{
|
|
<a href="/blog?category=@post.Category.Slug" style="color:var(--gold);font-size:.9rem;">@post.Category.Name ←</a>
|
|
}
|
|
</div>
|
|
|
|
@if (!string.IsNullOrEmpty(post.FocusKeyword))
|
|
{
|
|
<div class="sidebar-card">
|
|
<div class="sidebar-title">کلیدواژه اصلی</div>
|
|
<span style="background:var(--gold-pale);padding:.3rem .7rem;border-radius:12px;font-size:.82rem;color:var(--mid);">@post.FocusKeyword</span>
|
|
</div>
|
|
}
|
|
|
|
<div class="sidebar-card">
|
|
<div class="sidebar-title">خدمات ما</div>
|
|
<div style="display:flex;flex-direction:column;gap:.5rem;font-size:.85rem">
|
|
<a href="/#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> بوتاکس و فیلر</a>
|
|
<a href="/#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> لیزر درمانی</a>
|
|
<a href="/#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> مزوتراپی</a>
|
|
<a href="/#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> پاکسازی پوست</a>
|
|
<a href="/#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> مشاوره زیبایی</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script>
|
|
// Initialise any in-content image carousels (swipe + arrows + dots)
|
|
document.querySelectorAll('[data-carousel]').forEach(c => {
|
|
const track = c.querySelector('.pc-track');
|
|
if (!track) return;
|
|
const imgs = [...track.querySelectorAll('img')];
|
|
const dots = c.querySelector('.pc-dots');
|
|
if (imgs.length <= 1) {
|
|
c.querySelector('.pc-prev')?.remove();
|
|
c.querySelector('.pc-next')?.remove();
|
|
dots?.remove();
|
|
return;
|
|
}
|
|
if (dots) dots.innerHTML = imgs.map((_, i) => `<span data-i="${i}"></span>`).join('');
|
|
const dotEls = dots ? [...dots.querySelectorAll('span')] : [];
|
|
const current = () => Math.round(track.scrollLeft / track.clientWidth);
|
|
const update = () => { const i = current(); dotEls.forEach((d, di) => d.classList.toggle('active', di === i)); };
|
|
const go = (i) => { i = Math.max(0, Math.min(imgs.length - 1, i)); track.scrollTo({ left: i * track.clientWidth, behavior: 'smooth' }); };
|
|
c.querySelector('.pc-prev')?.addEventListener('click', () => go(current() - 1));
|
|
c.querySelector('.pc-next')?.addEventListener('click', () => go(current() + 1));
|
|
dotEls.forEach((d, di) => d.addEventListener('click', () => go(di)));
|
|
track.addEventListener('scroll', () => { clearTimeout(track._t); track._t = setTimeout(update, 60); });
|
|
update();
|
|
});
|
|
</script>
|
|
}
|