<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>پیوند تروما | اینفوگرافیک با لوگوی روانشناسی</title>
<style>
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
body {
margin: 0;
padding: 40px 20px;
background: linear-gradient(145deg, #0a2f44 0%, #0a1f2e 100%);
font-family: 'Segoe UI', 'Tahoma', 'IranSans', 'Vazir', 'Peyda', system-ui, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.poster {
max-width: 1200px;
width: 100%;
background: rgba(10, 25, 45, 0.55);
backdrop-filter: blur(3px);
border-radius: 64px 48px 64px 48px;
padding: 30px 25px;
box-shadow: 0 25px 45px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.1);
border: 1px solid rgba(0, 255, 255, 0.25);
}
/* لوگوی جدید در هدر */
.logo-header {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.psych-logo {
background: linear-gradient(135deg, #0a3b4e, #052c3a);
border-radius: 120px;
padding: 12px 22px 12px 22px;
display: inline-flex;
align-items: center;
gap: 12px;
backdrop-filter: blur(2px);
border: 1px solid #3bc9ff;
box-shadow: 0 0 15px rgba(59,201,255,0.2);
}
.logo-icon {
font-size: 2.2rem;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.logo-text {
font-size: 0.85rem;
letter-spacing: 1px;
background: linear-gradient(145deg, #b4e4ff, #2bc8ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: bold;
}
.logo-svg {
width: 48px;
height: 48px;
}
h1 {
font-size: 3.2rem;
margin: 0 0 0.2rem 0;
background: linear-gradient(135deg, #9ad7ff, #2dd0ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 5px rgba(0,0,0,0.2);
text-align: center;
}
.sub {
text-align: center;
color: #aad0f0;
border-bottom: 2px dashed #2c7da0;
display: inline-block;
width: auto;
margin: 0 auto 25px auto;
font-size: 1.2rem;
padding-bottom: 6px;
font-weight: 400;
}
.def-card {
background: rgba(0, 40, 60, 0.75);
backdrop-filter: blur(8px);
border-radius: 48px;
padding: 25px 30px;
margin: 20px 0 35px 0;
border-right: 8px solid #3bc9ff;
box-shadow: 0 15px 30px -10px rgba(0,0,0,0.4);
color: #eef5ff;
line-height: 1.75;
font-size: 1.05rem;
}
.cycles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 30px 0;
}
.cycle-card {
background: linear-gradient(145deg, #0e2a3b, #06212e);
border-radius: 36px;
padding: 20px 18px;
border: 1px solid #2f90b0;
transition: 0.2s ease;
box-shadow: 0 12px 20px -12px black;
color: #cce7f5;
}
.cycle-card:hover {
transform: translateY(-5px);
border-color: #3bc9ff;
background: #0f3142;
}
.cycle-num {
display: inline-block;
background: #0077b6;
width: 45px;
height: 45px;
text-align: center;
line-height: 45px;
font-size: 1.6rem;
font-weight: bold;
border-radius: 30px;
margin-bottom: 15px;
color: white;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.cycle-title {
font-size: 1.5rem;
font-weight: bold;
margin: 8px 0 8px 0;
color: #7fd6ff;
}
.cycle-desc {
font-size: 0.95rem;
line-height: 1.55;
opacity: 0.9;
}
.theories {
background: rgba(0, 20, 40, 0.7);
backdrop-filter: blur(4px);
border-radius: 48px;
padding: 20px 30px;
margin-top: 40px;
border: 1px solid #2c90b0;
}
.theories h2 {
color: #9ee2ff;
border-right: 5px solid #0ff;
padding-right: 18px;
margin-top: 0;
}
.theory-list {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 15px;
}
.theory-item {
background: #0b3850;
padding: 10px 18px;
border-radius: 60px;
font-size: 0.9rem;
font-weight: 500;
color: #cfecff;
box-shadow: inset 0 1px 2px #2ba0d030, 0 5px 8px #00000020;
}
hr {
margin: 30px 0 10px;
border-color: #1b6d8a;
}
.watermark-note {
text-align: center;
font-size: 0.7rem;
color: #3d7f9e;
margin-top: 20px;
}
@media (max-width: 680px) {
.poster { padding: 16px; }
h1 { font-size: 2.2rem; }
.cycle-title { font-size: 1.2rem; }
.logo-text { font-size: 0.65rem; }
}
</style>
</head>
<body>
<div class="poster">
<!-- لوگوی روانشناسی خفن در بالا -->
<div class="logo-header">
<div class="psych-logo">
<span class="logo-icon">🧠</span>
<div class="logo-svg">
<svg width="40" height="40" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="45" stroke="#3bc9ff" stroke-width="2" stroke-dasharray="6 4" fill="none"/>
<path d="M50 20 L55 40 L75 45 L55 50 L50 70 L45 50 L25 45 L45 40 Z" fill="#2bc8ff" stroke="#a0e7ff" stroke-width="1.2"/>
<path d="M32 32 L42 42 M68 32 L58 42 M50 20 L50 40" stroke="#ffffffcc" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="50" cy="50" r="6" fill="#072c3a" stroke="#7fd6ff" stroke-width="1.5"/>
</svg>
</div>
<span class="logo-text">روانشناسی پیوند تروما</span>
<span class="logo-icon">⚡</span>
</div>
</div>
<h1>🔗 بیوند تروما</h1>
<div style="text-align:center;">
<div class="sub">✦ پیوند تروما چیست؟ ✦</div>
</div>
<div class="def-card">
<strong style="color:#70d6ff; font-size:1.2rem;">📖 تعریف</strong><br>
پیوند تروما، وابستگی عاطفی قوی‌ای است که بین فرد آسیب‌دیده و فرد آزاردهنده ایجاد می‌شود.<br>
این ارتباط زمانی شکل می‌گیرد که فرد آزاردهنده به‌صورت مکرر، باعث آسیب، کنترل، بی‌توجهی یا تحقیر می‌شود. اما در کنار آن، گاهی، محبت، دلجویی یا توجه نشان می‌دهد.<br>
این الگو بیشتر در روابط آزارگرانه دیده می‌شود. اما می‌تواند در خانواده، دوستی، محیط کار یا هر رابطه‌ی نابرابر قدرت نیز رخ دهد.
</div>
<h2 style="color:#c0e4ff; margin-bottom: -5px;">🌀 چرخه پیوند تروما | ۸ مرحله</h2>
<div class="cycles-grid">
<div class="cycle-card"><div class="cycle-num">۱</div><div class="cycle-title">افزایش تنش</div><div class="cycle-desc">تنش، اضطراب، انتقاد، سردی و احساس فاصله بیشتر شود.</div></div>
<div class="cycle-card"><div class="cycle-num">۲</div><div class="cycle-title">انفجار یا درگیری</div><div class="cycle-desc">جر و بحث، پریشانی، سرزنش، تهدید یا آسیب رخ می‌دهد.</div></div>
<div class="cycle-card"><div class="cycle-num">۳</div><div class="cycle-title">غیر قابل پیش‌بینی بودن</div><div class="cycle-desc">رابطه وابستگی عاطفی ایجاد می‌کند.</div></div>
<div class="cycle-card"><div class="cycle-num">۴</div><div class="cycle-title">بازگشت امید</div><div class="cycle-desc">امید به بهبود رابطه، کاهش تنش و تکرار چرخه.</div></div>
<div class="cycle-card"><div class="cycle-num">۵</div><div class="cycle-title">حمایت و آرامش</div><div class="cycle-desc">حمایت، هدیه، قول، اعتماد، تعهد، کمک، توانمندی، مسئولیت، امنیت، پذیرش و صبر و تحمل — کوتاه‌مدت.</div></div>
<div class="cycle-card"><div class="cycle-num">۶</div><div class="cycle-title">امید</div><div class="cycle-desc">ترس، عشق، درد، سردرگمی.</div></div>
<div class="cycle-card"><div class="cycle-num">۷</div><div class="cycle-title">لحظه‌های محبت و آرامش</div><div class="cycle-desc">فاز شیرین اما موقتی که چرخه را حفظ می‌کند.</div></div>
<div class="cycle-card"><div class="cycle-num">۸</div><div class="cycle-title">تکرار</div><div class="cycle-desc">بازگشت به مرحله ۱ — چرخه کامل می‌شود.</div></div>
</div>
<div class="theories">
<h2>🧠 نظریه‌های پیوند تروما</h2>
<div class="theory-list">
<span class="theory-item">🔹 وابستگی شدید با وجود آسیب</span>
<span class="theory-item">🔹 توجیه رفتار آزاردهنده</span>
<span class="theory-item">🔹 سختی در ترک رابطه</span>
<span class="theory-item">🔹 انتظار بازگشت نسخه خوب فرد</span>
<span class="theory-item">🔹 احساس مسئولیت برای نجات او</span>
<span class="theory-item">🔹 احساس خلا پس از فاصله</span>
<span class="theory-item">🔹 اشتباه گرفتن شدت رابطه با عشق</span>
</div>
</div>
<hr>
<div class="watermark-note">
⚡ اینفوگرافیک تخصصی | طراحی شده برای جلوگیری از کپی مستقیم متن
</div>
</div>
</body>
</html>
