first commit
This commit is contained in:
soroush.asadi
@@ -0,0 +1,278 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fa" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<!-- SEO meta tags injected by JS -->
|
||||
<title id="pageTitle">مقاله | دکتر سوسن آلطه</title>
|
||||
<meta id="metaDesc" name="description" content=""/>
|
||||
<meta id="metaKw" name="keywords" content=""/>
|
||||
<!-- Open Graph -->
|
||||
<meta id="ogTitle" property="og:title" content=""/>
|
||||
<meta id="ogDesc" property="og:description" content=""/>
|
||||
<meta id="ogImg" property="og:image" content=""/>
|
||||
<meta property="og:type" content="article"/>
|
||||
<meta property="og:locale" content="fa_IR"/>
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta id="twTitle" name="twitter:title" content=""/>
|
||||
<meta id="twDesc" name="twitter:description" content=""/>
|
||||
<!-- Canonical -->
|
||||
<link id="canonical" rel="canonical" href=""/>
|
||||
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap" onload="this.rel='stylesheet'"/>
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--gold:#B8955A;--gold-l:#D4B483;--gold-pale:#F5ECD8;--bg:#FAFAF7;--white:#fff;--dark:#1E1E1E;--mid:#5A5A5A;--light:#9A9A9A;--border:#E8E2D9}
|
||||
body{font-family:'Vazirmatn',Tahoma,sans-serif;background:var(--bg);color:var(--dark);direction:rtl;line-height:1.8}
|
||||
a{text-decoration:none;color:inherit}
|
||||
|
||||
header{position:sticky;top:0;z-index:50;background:rgba(250,250,247,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 2rem;height:70px;display:flex;align-items:center;justify-content:space-between}
|
||||
.logo{font-size:1rem;font-weight:600;color:var(--gold)}
|
||||
nav{display:flex;gap:2rem}
|
||||
nav a{color:var(--mid);font-size:.88rem;transition:color .2s}
|
||||
nav a:hover{color:var(--gold)}
|
||||
.nav-cta{background:var(--gold);color:#fff!important;padding:.4rem 1.1rem;border-radius:50px;font-size:.85rem!important}
|
||||
|
||||
/* Layout */
|
||||
.post-layout{max-width:1100px;margin:0 auto;padding:3rem 2rem;display:grid;grid-template-columns:1fr 320px;gap:3rem;align-items:start}
|
||||
@media(max-width:900px){.post-layout{grid-template-columns:1fr}}
|
||||
|
||||
/* 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)}
|
||||
|
||||
/* 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:inherit;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:inherit;font-size:.9rem;font-weight:600;border:none;cursor:pointer;display:inline-block}
|
||||
|
||||
/* 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}
|
||||
.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)}
|
||||
.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:80px;height:80px;border-radius:50%;background:var(--gold-pale);margin:0 auto .8rem;display:flex;align-items:center;justify-content:center;font-size: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:inherit;font-size:.82rem;border:none;cursor:pointer;width:100%}
|
||||
|
||||
/* Loading */
|
||||
.loading{text-align:center;padding:5rem 2rem;color:var(--light)}
|
||||
|
||||
footer{background:var(--dark);color:rgba(255,255,255,.5);text-align:center;padding:2rem;font-size:.83rem;margin-top:3rem}
|
||||
footer a{color:var(--gold-l)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a class="logo" href="index.html">دکتر سوسن آلطه</a>
|
||||
<nav>
|
||||
<a href="index.html">خانه</a>
|
||||
<a href="blog.html">وبلاگ</a>
|
||||
<a href="index.html#contact" class="nav-cta">رزرو نوبت</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="loadingState" class="loading"><p>در حال بارگذاری...</p></div>
|
||||
|
||||
<div id="postLayout" class="post-layout" style="display:none">
|
||||
<!-- Article -->
|
||||
<article>
|
||||
<div class="article-hero" id="articleHero">📝</div>
|
||||
<span class="article-cat" id="articleCat">زیبایی پوست</span>
|
||||
<h1 class="article-title" id="articleTitle"></h1>
|
||||
<div class="article-meta">
|
||||
<span>✍️ <span id="articleAuthor">دکتر سوسن آلطه</span></span>
|
||||
<span>📅 <span id="articleDate"></span></span>
|
||||
<span>🕐 <span id="articleTime"></span> دقیقه مطالعه</span>
|
||||
<span>👁 <span id="articleViews"></span> بازدید</span>
|
||||
</div>
|
||||
<div class="article-content" id="articleContent"></div>
|
||||
<div class="article-tags" id="articleTags"></div>
|
||||
<div class="share-box">
|
||||
<div class="share-title">این مقاله را به اشتراک بگذارید</div>
|
||||
<div class="share-btns">
|
||||
<button class="share-btn share-telegram" onclick="shareTo('telegram')">📱 تلگرام</button>
|
||||
<button class="share-btn share-whatsapp" onclick="shareTo('whatsapp')">💬 واتساپ</button>
|
||||
<button class="share-btn share-copy" onclick="copyLink()">🔗 کپی لینک</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-box">
|
||||
<h3>آماده تحول در پوستتان هستید؟</h3>
|
||||
<p>همین امروز با دکتر سوسن آلطه مشاوره رایگان دریافت کنید</p>
|
||||
<a href="index.html#contact" class="cta-btn">رزرو نوبت رایگان</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-card doctor-card">
|
||||
<div class="doc-avatar">👩⚕️</div>
|
||||
<div class="doc-name">دکتر سوسن آلطه</div>
|
||||
<div class="doc-title">پزشک عمومی | متخصص زیبایی پوست</div>
|
||||
<button class="doc-btn" onclick="location.href='index.html#contact'">رزرو نوبت</button>
|
||||
</div>
|
||||
<div class="sidebar-card">
|
||||
<div class="sidebar-title">مقالات اخیر</div>
|
||||
<div id="recentPosts"></div>
|
||||
</div>
|
||||
<div class="sidebar-card">
|
||||
<div class="sidebar-title">خدمات ما</div>
|
||||
<div style="display:flex;flex-direction:column;gap:.5rem;font-size:.85rem">
|
||||
<a href="index.html#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> بوتاکس و فیلر</a>
|
||||
<a href="index.html#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> لیزر درمانی</a>
|
||||
<a href="index.html#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> مزوتراپی</a>
|
||||
<a href="index.html#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> پاکسازی پوست</a>
|
||||
<a href="index.html#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> مشاوره زیبایی</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div id="errorState" style="display:none;text-align:center;padding:5rem 2rem">
|
||||
<p style="color:#999;font-size:1.1rem">مقاله یافت نشد</p>
|
||||
<a href="blog.html" style="color:var(--gold);margin-top:1rem;display:inline-block">← بازگشت به وبلاگ</a>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>© ۱۴۰۳ دکتر سوسن آلطه | <a href="blog.html">وبلاگ</a> | <a href="admin/index.html">پنل مدیریت</a></p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const API='http://localhost:5000';
|
||||
const slug=new URLSearchParams(location.search).get('slug');
|
||||
|
||||
function fa(n){return String(n).replace(/\d/g,d=>'۰۱۲۳۴۵۶۷۸۹'[d]);}
|
||||
function fmtDate(d){if(!d)return'';const dt=new Date(d);const months=['فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند'];const m=months[dt.getMonth()]||'';return `${fa(dt.getDate())} ${m} ${fa(dt.getFullYear())}`;}
|
||||
|
||||
async function loadPost(){
|
||||
if(!slug){showError();return;}
|
||||
try{
|
||||
const post=await fetch(`${API}/api/blog/posts/${slug}`).then(r=>{if(!r.ok)throw r;return r.json();});
|
||||
renderPost(post);
|
||||
injectSeo(post);
|
||||
loadRecent(post.id);
|
||||
}catch(e){showError();}
|
||||
}
|
||||
|
||||
function renderPost(p){
|
||||
document.getElementById('loadingState').style.display='none';
|
||||
document.getElementById('postLayout').style.display='grid';
|
||||
|
||||
if(p.featuredImage) document.getElementById('articleHero').innerHTML=`<img src="${p.featuredImage}" alt="${p.title}" loading="lazy"/>`;
|
||||
document.getElementById('articleCat').textContent=p.category?.name||'عمومی';
|
||||
document.getElementById('articleTitle').textContent=p.title;
|
||||
document.getElementById('articleAuthor').textContent=p.author;
|
||||
document.getElementById('articleDate').textContent=fmtDate(p.publishedAt);
|
||||
document.getElementById('articleTime').textContent=fa(p.readingTimeMinutes);
|
||||
document.getElementById('articleViews').textContent=fa(p.viewCount);
|
||||
document.getElementById('articleContent').innerHTML=p.content;
|
||||
|
||||
if(p.keywords){
|
||||
document.getElementById('articleTags').innerHTML=
|
||||
p.keywords.split(',').filter(Boolean).map(k=>`<span class="tag">${k.trim()}</span>`).join('');
|
||||
}
|
||||
}
|
||||
|
||||
function injectSeo(p){
|
||||
document.getElementById('pageTitle').textContent=p.metaTitle||p.title+' | دکتر سوسن آلطه';
|
||||
setMeta('metaDesc',p.metaDescription);
|
||||
setMeta('metaKw',p.keywords);
|
||||
setMeta('ogTitle',p.metaTitle||p.title);
|
||||
setMeta('ogDesc',p.metaDescription);
|
||||
setMeta('ogImg',p.ogImage||p.featuredImage);
|
||||
setMeta('twTitle',p.metaTitle||p.title);
|
||||
setMeta('twDesc',p.metaDescription);
|
||||
document.getElementById('canonical').href=location.href;
|
||||
|
||||
// JSON-LD structured data
|
||||
const schema={
|
||||
"@context":"https://schema.org",
|
||||
"@type":p.articleType||"Article",
|
||||
"headline":p.title,
|
||||
"description":p.excerpt,
|
||||
"author":{"@type":"Person","name":p.author||"دکتر سوسن آلطه"},
|
||||
"publisher":{"@type":"Organization","name":"دکتر سوسن آلطه"},
|
||||
"datePublished":p.publishedAt,
|
||||
"dateModified":p.updatedAt,
|
||||
"image":p.featuredImage||"",
|
||||
"keywords":p.keywords
|
||||
};
|
||||
const s=document.createElement('script');
|
||||
s.type='application/ld+json';
|
||||
s.textContent=JSON.stringify(schema);
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
|
||||
function setMeta(id,val){const el=document.getElementById(id);if(el&&val)el.setAttribute(el.hasAttribute('content')?'content':'href',val);}
|
||||
|
||||
async function loadRecent(currentId){
|
||||
const data=await fetch(`${API}/api/blog/posts?page=1&pageSize=5`).then(r=>r.json()).catch(()=>null);
|
||||
if(!data) return;
|
||||
const rp=document.getElementById('recentPosts');
|
||||
rp.innerHTML=data.items.filter(p=>p.id!==currentId).slice(0,4).map(p=>`
|
||||
<div class="recent-post">
|
||||
<div class="recent-img">${p.featuredImage?`<img src="${p.featuredImage}" alt="${p.title}" loading="lazy"/>`:'📝'}</div>
|
||||
<div><a href="post.html?slug=${p.slug}" class="recent-title">${p.title}</a><div class="recent-date">🕐 ${p.readingTimeMinutes} دقیقه</div></div>
|
||||
</div>`).join('');
|
||||
}
|
||||
|
||||
function showError(){
|
||||
document.getElementById('loadingState').style.display='none';
|
||||
document.getElementById('errorState').style.display='block';
|
||||
}
|
||||
|
||||
function shareTo(platform){
|
||||
const url=encodeURIComponent(location.href);
|
||||
const title=encodeURIComponent(document.title);
|
||||
const links={telegram:`https://t.me/share/url?url=${url}&text=${title}`,whatsapp:`https://wa.me/?text=${title}%20${url}`};
|
||||
window.open(links[platform],'_blank');
|
||||
}
|
||||
|
||||
function copyLink(){
|
||||
navigator.clipboard.writeText(location.href).then(()=>{
|
||||
const btn=event.target;btn.textContent='✓ کپی شد!';setTimeout(()=>btn.textContent='🔗 کپی لینک',2000);
|
||||
});
|
||||
}
|
||||
|
||||
loadPost();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user