Spaces:

Esmaeilkianii
/

anycoder-49a74d49

Running

App Files Files Community

Esmaeilkianii commited on Dec 15, 2025

Commit

2f598e6

verified ·

1 Parent(s): 7dd8c36

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +629 -19

index.html CHANGED Viewed

@@ -1,19 +1,629 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>مکانیسم نفوذ آب در خاک - پاورپوینت علمی</title>
+  <style>
+    :root{
+      --bg:#f5efe6;
+      --panel:#ffffff;
+      --ink:#1b1b1b;
+      --muted:#5c5346;
+      --accent:#2a9d8f;    /* آبی-سبز */
+      --accent-2:#c97b2b;  /* خاکی */
+      --accent-3:#3a6d7a;  /* آب عمیق */
+      --ok:#2e7d32;
+      --warn:#b75d2a;
+      --shadow:0 10px 30px rgba(0,0,0,.12);
+      --radius:18px;
+    }
+    *{box-sizing:border-box}
+    html,body{height:100%}
+    body{
+      margin:0;
+      font-family: "Segoe UI", Tahoma, Arial, sans-serif;
+      color:var(--ink);
+      background:
+        radial-gradient(1200px 600px at 0% 0%, rgba(201,123,43,.08), transparent 60%),
+        radial-gradient(900px 500px at 100% 100%, rgba(42,157,143,.08), transparent 60%),
+        var(--bg);
+      line-height:1.75;
+    }
+    .app{
+      display:grid;
+      grid-template-columns: 320px 1fr;
+      grid-template-rows: 64px 1fr;
+      grid-template-areas:
+        "header header"
+        "sidebar stage";
+      min-height:100vh;
+      gap:16px;
+      padding:16px;
+    }
+    header{
+      grid-area:header;
+      display:flex; align-items:center; justify-content:space-between;
+      background:linear-gradient(180deg, #fff, #f9f6f0);
+      border-radius:var(--radius);
+      padding:10px 16px;
+      box-shadow: var(--shadow);
+      position:sticky; top:16px; z-index:5;
+    }
+    header h1{
+      margin:0; font-size:20px; letter-spacing:.3px;
+      background: linear-gradient(90deg, var(--accent-2), var(--accent));
+      -webkit-background-clip:text; background-clip:text; color:transparent;
+      font-weight:800;
+    }
+    .brand a{
+      text-decoration:none; color:var(--accent-3);
+      font-weight:700; display:inline-flex; align-items:center; gap:8px;
+      padding:6px 10px; border-radius:10px; transition:.2s;
+    }
+    .brand a:hover{ background:rgba(42,157,143,.08) }
+    aside#toc{
+      grid-area:sidebar;
+      background:var(--panel);
+      border-radius:var(--radius);
+      box-shadow: var(--shadow);
+      padding:14px;
+      display:flex; flex-direction:column; gap:8px;
+      max-height: calc(100vh - 128px);
+      position:sticky; top:96px; overflow:auto;
+    }
+    .toc-title{ font-weight:800; margin:4px 6px 8px; color:var(--muted) }
+    .toc-item{
+      display:flex; align-items:center; gap:10px;
+      padding:8px 10px; border-radius:12px; cursor:pointer;
+      transition:.2s; border:1px solid transparent;
+    }
+    .toc-item:hover{ background:rgba(42,157,143,.06) }
+    .toc-item.active{
+      border-color: var(--accent);
+      background: linear-gradient(180deg, rgba(42,157,143,.10), rgba(201,123,43,.08));
+      box-shadow: inset 0 0 0 1px rgba(42,157,143,.2);
+    }
+    .toc-item .num{
+      width:28px; height:28px; border-radius:50%;
+      display:grid; place-items:center; font-weight:700; font-size:13px;
+      background: linear-gradient(180deg, var(--accent), var(--accent-3));
+      color:#fff;
+    }
+    .toc-item .txt{ flex:1; font-size:14px; }
+    main#stage{
+      grid-area:stage;
+      display:grid;
+      grid-template-rows: 1fr auto;
+      gap:12px;
+    }
+    .slide{
+      background:linear-gradient(180deg, #fff, #fbf8f2);
+      border-radius:var(--radius);
+      box-shadow: var(--shadow);
+      padding:22px 22px 16px;
+      min-height: 540px;
+      display:none;
+      opacity:0;
+      transform: translateY(10px) scale(.995);
+      transition: opacity .4s ease, transform .4s ease;
+      position:relative; overflow:hidden;
+    }
+    .slide.active{ display:block; opacity:1; transform:none; }
+    .slide-header{
+      display:flex; align-items:center; justify-content:space-between;
+      margin-bottom:10px;
+      border-bottom:2px dashed rgba(42,157,143,.25);
+      padding-bottom:8px;
+    }
+    .slide-title{
+      margin:0; font-size:22px; font-weight:900;
+      color: var(--accent-3);
+      letter-spacing:.2px;
+    }
+    .slide-number{
+      font-weight:800; color: var(--accent-2);
+      background:rgba(201,123,43,.12);
+      padding:4px 10px; border-radius:999px;
+      border:1px solid rgba(201,123,43,.35);
+    }
+    .content{
+      display:grid; gap:12px;
+      grid-template-columns: 1.2fr .8fr;
+    }
+    .panel{
+      background:#fff;
+      border-radius:14px;
+      border:1px solid rgba(0,0,0,.06);
+      padding:12px 12px;
+    }
+    .panel h3{ margin:6px 0 8px; color:var(--accent) }
+    .panel ul{ margin:8px 0 0 20px }
+    .panel li{ margin:6px 0 }
+    .equation{
+      background: linear-gradient(180deg, #fdfcf9, #fbf5ec);
+      border:1px solid rgba(201,123,43,.35);
+      border-radius:12px; padding:10px; text-align:center;
+      font-weight:800; color:#5a3d17;
+    }
+    .diagram{
+      background: conic-gradient(from 180deg at 0% 100%, rgba(42,157,143,.05), rgba(201,123,43,.05));
+      border:1px dashed rgba(0,0,0,.1);
+      border-radius:14px; padding:6px; display:grid; place-items:center;
+      min-height:280px;
+      position:relative; overflow:hidden;
+    }
+    .controls{
+      display:flex; align-items:center; justify-content:space-between;
+      gap:10px; background:linear-gradient(180deg,#fff,#f6f2eb);
+      border-radius:var(--radius);
+      box-shadow: var(--shadow);
+      padding:10px 12px;
+    }
+    .btn{
+      border:none; padding:10px 14px; border-radius:12px;
+      background:linear-gradient(180deg, var(--accent), var(--accent-3));
+      color:#fff; font-weight:800; cursor:pointer; transition:.2s;
+      box-shadow: 0 6px 18px rgba(42,157,143,.35);
+    }
+    .btn.secondary{
+      background:linear-gradient(180deg, #fff, #f4efe7);
+      color: var(--accent-3);
+      border:1px solid rgba(42,157,143,.35);
+      box-shadow:none;
+    }
+    .btn:disabled{ opacity:.5; cursor:not-allowed }
+    .progress{
+      flex:1; display:flex; align-items:center; gap:10px;
+    }
+    .bar{
+      flex:1; height:10px; background:rgba(0,0,0,.08); border-radius:999px; overflow:hidden;
+    }
+    .bar > i{
+      display:block; height:100%; width:0%;
+      background: linear-gradient(90deg, var(--accent-2), var(--accent));
+      transition: width .35s ease;
+    }
+    .hint{ font-size:12px; color:var(--muted) }
+    .kbd{
+      background:#0000000d; border:1px solid #0000001a; padding:2px 6px; border-radius:6px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    }
+    /* Animations */
+    @keyframes floatUp { from{ transform:translateY(8px); opacity:.0 } to{ transform:none; opacity:1 } }
+    @keyframes wave { 0%{ transform:translateX(-20px)} 50%{ transform:translateX(20px)} 100%{ transform:translateX(-20px)} }
+    @keyframes pulse { 0%{opacity:.25} 50%{opacity:.9} 100%{opacity:.25} }
+    .reveal{ animation: floatUp .6s ease both }
+    .reveal:nth-child(1){ animation-delay:.05s }
+    .reveal:nth-child(2){ animation-delay:.12s }
+    .reveal:nth-child(3){ animation-delay:.18s }
+    .reveal:nth-child(4){ animation-delay:.24s }
+    /* Responsive */
+    @media (max-width: 1100px){
+      .content{ grid-template-columns: 1fr }
+      .app{ grid-template-columns: 1fr; grid-template-areas: "header" "stage" "sidebar"; }
+      aside#toc{ position:relative; top:0; max-height:none }
+    }
+    /* Soil layers background effect */
+    .soil-bg{
+      position:absolute; inset:0; pointer-events:none; opacity:.18;
+      background:
+        linear-gradient(180deg, rgba(201,123,43,.15), transparent 20%),
+        repeating-linear-gradient(
+          0deg,
+          #8d6e63 0 14px,
+          #a1887f 14px 28px,
+          #6d4c41 28px 42px,
+          #5d4037 42px 56px
+        );
+      mask-image: linear-gradient(180deg, #000 65%, transparent);
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <header>
+      <h1>مکانیسم نفوذ آب در خاک</h1>
+      <div class="brand">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener" title="AnyCoder on Hugging Face">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+            <path d="M12 2L2 7l10 5 10-5-10-5Zm0 7L2 14l10 5 10-5-10-5Zm0 7-10 5 10 5 10-5-10-5Z" fill="currentColor"/>
+          </svg>
+          Built with anycoder
+        </a>
+      </div>
+    </header>
+    <aside id="toc" aria-label="فهرست مطالب">
+      <div class="toc-title">فهرست مطالب</div>
+      <!--TOC populated by JS-->
+    </aside>
+    <main id="stage" aria-live="polite">
+      <!-- Slides will be injected by JS -->
+      <div class="controls">
+        <button class="btn secondary" id="prevBtn" aria-label="قبلی">◀︎ قبلی</button>
+        <div class="progress">
+          <div class="bar"><i id="barFill"></i></div>
+          <div class="hint">راهنما: <span class="kbd">←</span>/<span class="kbd">→</span> یا اسکرول</div>
+        </div>
+        <button class="btn" id="nextBtn" aria-label="بعدی">بعدی ▶︎</button>
+      </div>
+    </main>
+  </div>
+  <script>
+    // Slide data
+    const slides = [
+      {
+        title: "مکانیسم نفوذ آب در خاک",
+        html: `
+          <div class="soil-bg"></div>
+          <div class="slide-header">
+            <h2 class="slide-title">مکانیسم نفوذ آب در خاک</h2>
+            <span class="slide-number">1</span>
+          </div>
+          <div class="content">
+            <div class="panel reveal">
+              <h3>دانشگاهی • علمی • کاربردی</h3>
+              <ul>
+                <li>پدیده‌ای بنیادین در چرخه آب، کشاورزی و ژئوهیدرولوژی</li>
+                <li>تعیین‌کننده رطوبت خاک، رواناب، فرسایش و بهره‌وری آب</li>
+                <li>تحلیل با معادلات دیفرانسیلی، مدل‌های تجربی و شبیه‌سازی</li>
+              </ul>
+              <div class="equation" style="margin-top:10px">
+                نفوذ = فرآیند ورود آب از سطح به داخل خاک تحت نیروهای capillarity، گرانش و گرادیان فشار
+              </div>
+            </div>
+            <div class="diagram reveal" aria-label="نمای شماتیک نفوذ">
+              <svg width="520" height="260" viewBox="0 0 520 260">
+                <defs>
+                  <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stop-color="#e3f2fd"/>
+                    <stop offset="100%" stop-color="#ffffff"/>
+                  </linearGradient>
+                  <linearGradient id="soil" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stop-color="#a1887f"/>
+                    <stop offset="100%" stop-color="#5d4037"/>
+                  </linearGradient>
+                  <linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stop-color="#8ad7d0"/>
+                    <stop offset="100%" stop-color="#2a9d8f"/>
+                  </linearGradient>
+                  <filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
+                    <feGaussianBlur stdDeviation="2" />
+                  </filter>
+                </defs>
+                <rect x="0" y="0" width="520" height="100" fill="url(#sky)"/>
+                <rect x="0" y="100" width="520" height="160" fill="url(#soil)"/>
+                <!-- Surface -->
+                <line x1="0" y1="100" x2="520" y2="100" stroke="#3e2723" stroke-width="2"/>
+                <!-- Rain -->
+                <g stroke="#3a6d7a" stroke-width="2">
+                  <line x1="60" y1="0" x2="55" y2="80"><animate attributeName="y1" values="-20;0" dur="1.2s" repeatCount="indefinite"/></line>
+                  <line x1="90" y1="0" x2="85" y2="80"><animate attributeName="y1" values="-30;0" dur="1.2s" begin=".1s" repeatCount="indefinite"/></line>
+                  <line x1="120" y1="0" x2="115" y2="80"><animate attributeName="y1" values="-25;0" dur="1.2s" begin=".2s" repeatCount="indefinite"/></line>
+                <!-- Pond                </g>
+ed water -->
+                <rect x="150" y="92" width="220" height="8" fill="url(#water)" filter="url(#soft)">
+                  <animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/>
+                </rect>
+                <!-- Infiltration arrows -->
+                <g stroke="#2a9d8f" stroke-width="3" fill="none">
+                  <path d="M170 100 C170 120, 170 140, 170 160" />
+                  <path d="M210 100 C210 118, 210 140, 210 170" />
+                  <path d="M250 100 C250 122, 250 145, 250 175" />
+                  <path d="M290 100 C290 120, 290 142, 290 170" />
+                  <path d="M330 100 C330 118, 330 140, 330 165" />
+                  <animate attributeName="stroke-dasharray" values="0,200;40,200;0,200" dur="3s" repeatCount="indefinite"/>
+                </g>
+                <!-- Soil pores -->
+                <g fill="#3e2723" opacity=".25">
+                  <circle cx="180" cy="140" r="3"/><circle cx="200" cy="150" r="2"/><circle cx="240" cy="165" r="3"/>
+                  <circle cx="280" cy="150" r="2"/><circle cx="310" cy="170" r="3"/><circle cx="260" cy="140" r="2"/>
+                </g>
+                <!-- Labels -->
+                <g font-size="12" fill="#2e2e2e">
+                  <text x="10" y="20">بارش</text>
+                  <text x="150" y="90">آب ایستابی سطحی</text>
+                  <text x="160" y="210">نفوذ عمقی</text>
+                </g>
+              </svg>
+            </div>
+          </div>
+        `
+      },
+      {
+        title: "فهرست مطالب",
+        html: `
+          <div class="slide-header">
+            <h2 class="slide-title">فهرست مطالب</h2>
+            <span class="slide-number">2</span>
+          </div>
+          <div class="content">
+            <div class="panel reveal">
+              <ol style="line-height:2; font-size:15px">
+                <li>مقدمه: اهمیت نفوذ آب در خاک</li>
+                <li>ابعاد نفوذ آب در خاک</li>
+                <li>عوامل اصلی مؤثر بر سرعت نفوذ</li>
+                <li>معادلات نفوذ: گرین–آمبت</li>
+                <li>معادلات نفوذ: هورتون</li>
+                <li>معادلات نفوذ: ریچاردز</li>
+                <li>روش حلقه مضاعف</li>
+                <li>روش‌های دیگر اندازه‌گیری</li>
+                <li>نشت و جریان در محیط‌های متخلخل</li>
+                <li>پسماند رطوبتی و چرخه خشک‌شدن–ترشدن</li>
+                <li>کاربرد برنولی در تحلیل انرژی جریان</li>
+                <li>تعیین K در آزمایشگاه</li>
+                <li>تعیین K در صحرا</li>
+                <li>افزایش نفوذ در مزرعه</li>
+                <li>مدیریت نفوذ و کاهش رواناب</li>
+                <li>خاک‌ورزی حفاظتی و فرسایش</li>
+                <li>مدل‌سازی و شبیه‌سازی</li>
+                <li>سنجش‌ازدور و GIS</li>
+                <li>بافت و ساختار خاک</li>
+                <li>نفوذ در خاک‌های شور/سدیمی/فشرده</li>
+                <li>نفوذ ترجیحی (Preferred Flow)</li>
+                <li>جمع‌بندی و نتیجه‌گیری</li>
+                <li>منابع و مراجع</li>
+              </ol>
+            </div>
+            <div class="diagram reveal" aria-label="نمودار مفهومی سیستم خاک-آب">
+              <svg width="520" height="320" viewBox="0 0 520 320">
+                <defs>
+                  <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
+                    <stop offset="0%" stop-color="#c97b2b"/><stop offset="100%" stop-color="#2a9d8f"/>
+                  </linearGradient>
+                </defs>
+                <rect x="20" y="20" width="480" height="280" rx="16" fill="url(#g1)" opacity=".08"/>
+                <g font-size="13" fill="#333">
+                  <text x="40" y="50">بارش</text>
+                  <text x="40" y="100">نفوذ</text>
+                  <text x="40" y="150">جریان اشباع (سطحی)</text>
+                  <text x="40" y="200">زهکشی عمقی</text>
+                  <text x="40" y="250">تبخیر/تعرق</text>
+                </g>
+                <g stroke="#2a9d8f" stroke-width="3" fill="none">
+                  <path d="M180 45 C240 60, 320 60, 420 45"><animate attributeName="stroke-dasharray" values="0,400;60,400;0,400" dur="4s" repeatCount="indefinite"/></path>
+                  <path d="M180 95 C240 110, 320 110, 420 95"><animate attributeName="stroke-dasharray" values="0,400;60,400;0,400" dur="4s" begin=".2s" repeatCount="indefinite"/></path>
+                  <path d="M180 145 C240 160, 320 160, 420 145"><animate attributeName="stroke-dasharray" values="0,400;60,400;0,400" dur="4s" begin=".4s" repeatCount="indefinite"/></path>
+                  <path d="M180 195 C240 210, 320 210, 420 195"><animate attributeName="stroke-dasharray" values="0,400;60,400;0,400" dur="4s" begin=".6s" repeatCount="indefinite"/></path>
+                  <path d="M180 245 C240 260, 320 260, 420 245"><animate attributeName="stroke-dasharray" values="0,400;60,400;0,400" dur="4s" begin=".8s" repeatCount="indefinite"/></path>
+                </g>
+              </svg>
+            </div>
+          </div>
+        `
+      },
+      {
+        title: "مقدمه: اهمیت نفوذ آب در خاک",
+        html: `
+          <div class="slide-header">
+            <h2 class="slide-title">مقدمه: اهمیت نفوذ آب در خاک</h2>
+            <span class="slide-number">3</span>
+          </div>
+          <div class="content">
+            <div class="panel reveal">
+              <h3>چرا نفوذ مهم است؟</h3>
+              <ul>
+                <li>کنترل رواناب سطحی و سیل</li>
+                <li>ذخیره رطوبت برای گیاه و کاهش نیاز آبیاری</li>
+                <li>کاهش فرسایش خاک و رسوب‌گذاری</li>
+                <li>کیفیت آبخوان: تغذیه آبخوان و کنترل شوری/آلودگی</li>
+                <li>پایداری سازه‌های ژئوتکنیکی (شیب‌ها، سدها، جاده‌ها)</li>
+              </ul>
+            </div>
+            <div class="diagram reveal" aria-label="نمودار دایره‌ای کاربردها">
+              <svg width="520" height="320" viewBox="0 0 520 320">
+                <defs>
+                  <linearGradient id="ring1" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#2a9d8f"/><stop offset="100%" stop-color="#3a6d7a"/></linearGradient>
+                  <linearGradient id="ring2" x1="0" y1="1" x2="1" y2="0"><stop offset="0%" stop-color="#c97b2b"/><stop offset="100%" stop-color="#e0a458"/></linearGradient>
+                </defs>
+                <g transform="translate(260,160)">
+                  <circle r="120" fill="none" stroke="url(#ring1)" stroke-width="60" stroke-dasharray="280 1000">
+                    <animate attributeName="stroke-dashoffset" values="0;-200" dur="6s" repeatCount="indefinite"/>
+                  </circle>
+                  <circle r="120" fill="none" stroke="url(#ring2)" stroke-width="60" stroke-dasharray="220 1000" transform="rotate(60)">
+                    <animate attributeName="stroke-dashoffset" values="0;200" dur="6s" repeatCount="indefinite"/>
+                  </circle>
+                  <text x="0" y="6" text-anchor="middle" font-size="16" fill="#2e2e2e">تعادل آب خاک</text>
+                </g>
+              </svg>
+            </div>
+          </div>
+        `
+      },
+      {
+        title: "ابعاد نفوذ آب در خاک",
+        html: `
+          <div class="slide-header">
+            <h2 class="slide-title">ابعاد نفوذ آب در خاک</h2>
+            <span class="slide-number">4</span>
+          </div>
+          <div class="content">
+            <div class="panel reveal">
+              <h3>تعاریف کلیدی</h3>
+              <ul>
+                <li>سرعت نفوذ (Infiltration Rate, f): mm/h یا cm/h</li>
+                <li>نفوذ تجمعی (Cumulative Infiltration, F): mm یا cm</li>
+                <li>ظرفیت نفوذ (Infiltration Capacity, f_c): حداکثر نرخ ممکن</li>
+                <li>هدایت هیدرولیکی اشباع (K_s): میانگین سرعت جریان در خاک اشباع</li>
+                <li>پتانسیل ماتریک (Ψ_m): نیروی مکش منافذ خاک</li>
+              </ul>
+              <div class="equation">f(t) = dF/dt</div>
+            </div>
+            <div class="diagram reveal" aria-label="نمودار زمان-نرخ نفوذ">
+              <svg width="520" height="320" viewBox="0 0 520 320">
+                <g transform="translate(40,20)">
+                  <path d="M0 250 C80 240, 120 160, 200 90 C280 60, 360 45, 440 40" fill="none" stroke="#2a9d8f" stroke-width="4"/>
+                  <line x1="0" y1="250" x2="440" y2="250" stroke="#333" stroke-width="1"/>
+                  <line x1="0" y1="0" x2="0" y2="250" stroke="#333" stroke-width="1"/>
+                  <text x="430" y="270" font-size="12">زمان</text>
+                  <text x="-10" y="-6" font-size="12">f(t)</text>
+                  <circle cx="0" cy="250" r="4" fill="#c97b2b"/><text x="6" y="254" font-size="12">f0</text>
+                  <circle cx="200" cy="90" r="4" fill="#c97b2b"/><text x="206" y="94" font-size="12">fc</text>
+                </g>
+              </svg>
+            </div>
+          </div>
+        `
+      },
+      {
+        title: "عوامل اصلی مؤثر بر سرعت نفوذ",
+        html: `
+          <div class="slide-header">
+            <h2 class="slide-title">عوامل اصلی مؤثر بر سرعت نفوذ</h2>
+            <span class="slide-number">5</span>
+          </div>
+          <div class="content">
+            <div class="panel reveal">
+              <h3>دسته‌بندی عوامل</h3>
+              <ul>
+                <li>بافت خاک: ماسه (زیاد) تا رس (کم)</li>
+                <li>ساختار و تخلخل: پیوستگی، ترک‌ها، کرم‌ها، ریشه</li>
+                <li>رطوبت اولیه: خاک خشکcapillarity بیشتری دارد → f0 بزرگ‌تر</li>
+                <li>پوشش گیاهی و کاه‌وسرگین: حفاظت سطح، کاهش انباشت سطحی</li>
+                <li>شوری/سدیمی بودن: کاهش کشش سطحی و انسجام خاک</li>
+                <li>تراکم/فشردگی: کاهش تخلخل مؤثر</li>
+                <li>بارش و آبیاری: شدت، انرژی ضربه‌ای، پوشش سطحی</li>
+              </ul>
+            </div>
+            <div class="diagram reveal" aria-label="پارتو عوامل مؤثر">
+              <svg width="520" height="320" viewBox="0 0 520 320">
+                <g transform="translate(40,20)">
+                  <rect x="0" y="0" width="440" height="260" fill="#00000005" stroke="#00000010"/>
+                  <g font-size="12" fill="#333">
+                    <text x="10" y="20">بافت</text><rect x="120" y="10" width="200" height="16" fill="#2a9d8f"/>
+                    <text x="10" y="50">ساختار</text><rect x="120" y="40" width="180" height="16" fill="#3a6d7a"/>
+                    <text x="10" y="80">رطوبت اولیه</text><rect x="120" y="70" width="160" height="16" fill="#2a9d8f"/>
+                    <text x="10" y="110">پوشش گیاهی</text><rect x="120" y="100" width="140" height="16" fill="#3a6d7a"/>
+                    <text x="10" y="140">شوری/سدیم</text><rect x="120" y="130" width="110" height="16" fill="#c97b2b"/>
+                    <text x="10" y="170">تراکم</text><rect x="120" y="160" width="100" height="16" fill="#c97b2b"/>
+                    <text x="10" y="200">شدت بارش</text><rect x="120" y="190" width="80" height="16" fill="#c97b2b"/>
+                  </g>
+                </g>
+              </svg>
+            </div>
+          </div>
+        `
+      },
+      {
+        title: "معادلات نفوذ: گرین–آمبت",
+        html: `
+          <div class="slide-header">
+            <h2 class="slide-title">معادلات نفوذ: گرین–آمبت (Green–Ampt)</h2>
+            <span class="slide-number">6</span>
+          </div>
+          <div class="content">
+            <div class="panel reveal">
+              <h3>مدل مفهومی جبهه ترشدن</h3>
+              <ul>
+                <li>جبهه‌ای تیز بین ناحیه اشباع و خشک</li>
+                <li>نیروهای capillarity با Ψ_f مدل می‌شود</li>
+                <li>نفوذ تجمعی F(t) و نرخ f(t) با K_s و رطوبت اولیه مرتبط است</li>
+              </ul>
+              <div class="equation">f(t) = K_s · (1 + |Ψ_f|·Δθ / F(t))</div>
+              <div class="equation">F(t) ≈ K_s·t + |Ψ_f|·Δθ·ln(1 + F/|Ψ_f|·Δθ)</div>
+            </div>
+            <div class="diagram reveal" aria-label="شماتیک جبهه ترشدن">
+              <svg width="520" height="320" viewBox="0 0 520 320">
+                <defs>
+                  <linearGradient id="wet" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stop-color="#8ad7d0"/><stop offset="100%" stop-color="#2a9d8f"/>
+                  </linearGradient>
+                </defs>
+                <rect x="0" width="520" y="0" height="100" fill="#e3f2fd"/>
+                <rect x="0" y="100" width="520" height="220" fill="#c7b8b0"/>
+                <rect x="50" y="100" width="420" height="60" fill="url(#wet)" opacity=".9"/>
+                <line x1="50" y1="160" x2="470" y2="160" stroke="#2a9d8f" stroke-width="3" stroke-dasharray="10 8"/>
+                <text x="60" y="140" font-size="13" fill="#1b1b1b">ناحیه اشباع</text>
+                <text x="60" y="190" font-size="13" fill="#1b1b1b">جبهه ترشدن (Ψ_f)</text x="60">
+                <text y="260" font-size="13" fill="#1b1b1b">خاک خشک</text>
+              </svg>
+            </div>
+          </div>
+        `
+      },
+      {
+        title: "معادلات نفوذ: هورتون",
+        html: `
+          <div class="slide-header">
+            <h2 class="slide-title">معادلات نفوذ: هورتون (Horton)</h2>
+            <span class="slide-number">7</span>
+          </div>
+          <div class="content">
+            <div class="panel reveal">
+              <h3>کاهش نرخ نفوذ با زمان</h3>
+              <ul>
+                <li>توصیف تجربی افت ظرفیت نفوذ از f0 به fc</li>
+                <li>k ثابت کاهشی وابسته به شرایط سطح</li>
+              </ul>
+              <div class="equation">f(t) = f_c + (f_0 - f_c) · e^{-k t}</div>
+              <div class="equation">F(t) = f_c·t + (f_0 - f_c)/k · (1 - e^{-k t})</div>
+            </div>
+            <div class="diagram reveal" aria-label="نمودار افت نفوذ">
+              <svg width="520" height="320" viewBox="0 0 520 320">
+                <g transform="translate(40,20)">
+                  <path d="M0 240 C80 160, 120 80, 200 50 C300 40, 400 40, 440 40" fill="none" stroke="#c97b2b" stroke-width="4"/>
+                  <line x1="0" y1="240" x2="440" y2="240" stroke="#333" stroke-width="1"/>
+                  <line x1="0" y1="40" x2="0" y2="240" stroke="#333" stroke-width="1"/>
+                  <text x="430" y="260" font-size="12">زمان</text>
+                  <text x="-10" y="-6" font-size="12">f(t)</text>
+                  <circle cx="0" cy="240" r="5" fill="#2a9d8f"/><text x="6" y="244" font-size="12">f0</text>
+                  <circle cx="440" cy="40" r="5" fill="#2a9d8f"/><text x="360" y="36" font-size="12">fc</text>
+                </g>
+              </svg>
+            </div>
+          </div>
+        `
+      },
+      {
+        title: "معادلات نفوذ: ریچاردز",
+        html: `
+          <div class="slide-header">
+            <h2 class="slide-title">معادلات نفوذ: ریچاردز (Richards)</h2>
+            <span class="slide-number">8</span>
+          </div>
+          <div class="content">
+            <div class="panel reveal">
+              <h3>معادله دیفرانسیلی جریان غیراشباع</h3>
+              <ul>
+                <li>ترکیب بقای جرم و قانون دارسی با K(θ) و Ψ(θ)</li>
+                <li>قابلیت حل عددی (FEFLOW, HYDRUS, MODFLOW)</li>
+              </ul>
+              <div class="equation">∂θ/∂t = ∂/∂z [ K(θ) ( ∂Ψ/∂z + 1 ) ]</div>
+              <div class="equation">∂θ/∂t = ∇·[ D(θ) ∇θ ] + ∂K/∂z</div>
+            </div>
+            <div class="diagram reveal" aria-label="شبکه تفاضل محدود">
+              <svg width="520" height="320" viewBox="0 0 520 320">
+                <g transform="translate(40,20)">
+                  <rect x="0" y="0" width="440" height="260" fill="#fafafa" stroke="#ddd"/>
+                  <g stroke="#e0e0e0">
+                    ${Array.from({length:8}).map((_,i)=>`<line x1="${i*55}" y1="0" x2="${i*55}" y2="260"/>`).join('')}
+                    ${Array.from({length:6}).map((_,i)=>`<line x1="0" y1="${i*44}" y2="440" y2="${i*44}"/>`).join('')}
+                  </g>
+                  <g fill="#2a9d8f">
+                    ${[60,120,180,240,300,360].map((x,i)=>`<circle cx="${x}" cy="${60+i*30}" r="5"/>`).join('')}
+                  </g>
+                  <text x="10" y="16" font-size="12" fill="#444">گره‌ها و فلش‌های شار غیراشباع</text>
+                </g>
+              </svg>
+            </div>
+          </div>
+        `
+      },
+      {
+        title: "روش حلقه مضاعف",
+        html: `
+          <div class="slide-header">
+            <h2 class="slide-title">روش‌های اندازه‌گیری: حلقه مضاعف (Double Ring)</h2>
+            <span class="slide-number">9</span>
+          </div>
+          <div class="content">
+            <div class="panel reveal">
+              <h3>اصول و اجرا</h3>
+              <