راهنمای افزودن درس و کارت جدید

۱

ساختار کلی پوشه‌ها

قبل از هر تغییری، ساختار پروژه را به خاطر بسپارید. هر درس داخل رشته خودش قرار می‌گیرد:

📁 پوشه اصلی/ │ ├── index.html ← Dashboard اصلی │ ├── 📁 Teaching_Resources/ ← منابع تدریس │ └── index.html ← انتخاب رشته │ └── 📁 fanni/ ← فنی و حرفه‌ای │ └── 📁 riazi1/ ← ریاضی ۱ │ ├── index.html │ ├── poudman1.html │ ├── poudman2.html │ └── azmoon.html │ ├── 📁 class-management/ ← مدیریت کلاس │ └── 📁 third-tool/ ← این راهنما

💡

قانون طلایی: همیشه فایل‌های یک درس را در پوشه خودش نگه دارید. هرگز فایل‌ها را در ریشه اصلی پخش نکنید.

۲

افزودن درس جدید (مثل ریاضی ۲)

گام ۱ — ساخت پوشه

در پوشه رشته مربوطه (مثلاً fanni) یک پوشه جدید بسازید:

📁 fanni/ ├── 📁 riazi1/ └── 📁 riazi2/ ← پوشه جدید

گام ۲ — کپی فایل‌ها

فایل‌های درس ریاضی ۱ را به پوشه جدید کپی کنید و ویرایش کنید:

index.html — صفحه انتخاب پودمان
poudman1.html تا poudman5.html — محتوای دروس
azmoon.html — آزمون تعاملی

گام ۳ — ویرایش فایل رشته

فایل fanni/index.html را باز کنید. کارت ریاضی ۲ را در کنار ریاضی ۱ اضافه کنید:

fanni/index.html

<a class="subject riazi2" href="riazi2/index.html">
  <div class="ic">📊</div>
  <div class="info">
    <div class="ttl">ریاضی ۲</div>
    <div class="sub">پایه یازدهم — فنی و حرفه‌ای</div>
    <div class="tags">
      <span class="tag">۶ پودمان</span>
      <span class="tag">۱۸۰ سؤال</span>
    </div>
  </div>
  <div class="arrow">‹</div>
</a>

گام ۴ — افزودن رنگ به CSS

در بخش <style> همان فایل، این کدها را اضافه کنید:

CSS

/* رنگ کارت ریاضی ۲ */
.subject.riazi2::before{
  background: linear-gradient(180deg,#0d9488,#22c55e);
}
.subject.riazi2 .ic{
  background: linear-gradient(135deg,#ccfbf1,#99f6e4);
  color: #0d9488;
}
.subject.riazi2 .tag{
  background: #ccfbf1;
  color: #0d9488;
}

✅

حالا فایل fanni/index.html را در مرورگر باز کنید. کارت ریاضی ۲ را خواهید دید!

۳

افزودن رشته جدید (مثل کاردانش)

گام ۱ — ساخت پوشه رشته

📁 Teaching_Resources/ ├── 📁 fanni/ └── 📁 kardanesh/ ← پوشه رشته جدید └── 📁 riazi1/

گام ۲ — کپی تمام محتویات

تمام محتوای پوشه fanni/ را به kardanesh/ کپی کنید.

گام ۳ — ویرایش فایل اصلی رشته‌ها

فایل Teaching_Resources/index.html را باز کنید. کارت قفل‌شده کاردانش را پیدا کنید و با این کد جایگزین کنید:

Teaching_Resources/index.html

<a class="major kardanesh" href="kardanesh/index.html">
  <div class="ic">🎯</div>
  <div class="info">
    <div class="ttl">کاردانش</div>
    <div class="sub">شاخه کاردانش — پایه دهم</div>
    <div class="tags">
      <span class="tag">ریاضی ۱</span>
      <span class="tag">۵ پودمان</span>
    </div>
  </div>
  <div class="arrow">‹</div>
</a>

ℹ️

کلاس locked را حذف کنید تا کارت از حالت قفل خارج شود.

۴

افزودن کارت جدید به Dashboard اصلی

فایل index.html اصلی (Dashboard) را باز کنید. داخل بخش cards-grid این کد را اضافه کنید:

index.html

<a class="big-card new" href="پوشه-شما/index.html">
  <div class="ic">📊</div>
  <div class="info">
    <div class="ttl">عنوان کارت</div>
    <div class="sub">توضیح کوتاه</div>
    <div class="meta">
      <span class="chip">برچسب ۱</span>
      <span class="chip">برچسب ۲</span>
    </div>
  </div>
  <div class="arrow">‹</div>
</a>

افزودن رنگ جدید برای کارت

در بخش <style>، این کدها را اضافه کنید:

CSS

/* رنگ کارت جدید */
.big-card.new::before{
  background: linear-gradient(180deg,#ec4899,#be185d);
}
.big-card.new::after{
  background: #ec4899;
}
.big-card.new .ic{
  background: linear-gradient(135deg,#fce7f3,#fbcfe8);
  color: #be185d;
}
.big-card.new .chip{
  background: #fce7f3;
  color: #be185d;
}
.big-card.new:active .arrow{
  color: #ec4899;
}

رنگ‌های پیشنهادی

رنگ	کد اصلی	کد تیره
🔵 آبی	`#3b82f6`	`#1e40af`
🟢 سبز	`#22c55e`	`#15803d`
🟡 نارنجی	`#f59e0b`	`#d97706`
🔴 قرمز	`#ef4444`	`#b91c1c`
🟣 بنفش	`#a855f7`	`#7c3aed`
🌸 صورتی	`#ec4899`	`#be185d`
🌊 فیروزه‌ای	`#14b8a6`	`#0d9488`
⚫ خاکستری	`#64748b`	`#334155`

۵

افزودن پودمان جدید به یک درس

وقتی می‌خواهید پودمان ششم به ریاضی ۱ اضافه کنید:

گام ۱ — ساخت فایل پودمان

فایل poudman5.html را کپی کنید و نامش را poudman6.html بگذارید. محتوا را ویرایش کنید.

گام ۲ — افزودن به فهرست

در فایل riazi1/index.html، این کارت را به لیست اضافه کنید:

riazi1/index.html

<div class="pcard p6" onclick="location.href='poudman6.html'">
  <div class="icon">🎯</div>
  <div class="info">
    <div class="ttl">پودمان ششم</div>
    <div class="sub">عنوان پودمان</div>
  </div>
  <div class="arrow">‹</div>
</div>

گام ۳ — افزودن سؤالات به آزمون

در فایل azmoon.html، بخش QUIZZES را باز کنید و ۳۰ سؤال اضافه کنید. ساختار سؤال:

JavaScript — سؤالات

{
  q: 'متن سؤال اینجا',
  o: ['گزینه ۱', 'گزینه ۲', 'گزینه ۳', 'گزینه ۴'],
  a: 0,        // اندیس پاسخ درست (۰ تا ۳)
  w: 'توضیح پاسخ درست'
}

⚠️

توجه: اندیس پاسخ درست از صفر شروع می‌شود. یعنی گزینه اول a:0، گزینه دوم a:1، و الی آخر.

۶

تغییر رنگ‌ها و ظاهر

اگر می‌خواهید رنگ‌بندی را کاملاً عوض کنید، فقط کدهای رنگ (hex) را در CSS جایگزین کنید:

مکان	مثال کد
رنگ نوار کناری	`background: #3b82f6;`
رنگ آیکون	`color: #1d4ed8;`
رنگ گرادیانت	`linear-gradient(135deg,#dbeafe,#bfdbfe)`
رنگ پس‌زمینه	`linear-gradient(160deg,#0f172a,#1e1b4b)`

🎨

برای انتخاب رنگ، از سایت coolors.co یا colorhunt.co استفاده کنید و کد hex را کپی کنید.

۷

نکات مهم و اشتباهات رایج

❌

اشتباه ۱: اسامی پوشه‌ها را با فاصله یا کاراکتر فارسی بسازید. حتماً از حروف انگلیسی و خط تیره استفاده کنید (مثل riazi-2).

❌

اشتباه ۲: لینک‌ها را با آدرس کامل بنویسید (مثل C:\Users\...\file.html). همیشه از مسیر نسبی استفاده کنید (مثل riazi2/index.html).

❌

اشتباه ۳: یک کلاس CSS را برای دو کارت مختلف استفاده کنید. هر کارت باید کلاس یکتای خودش را داشته باشد.

✅

نکته ۱: قبل از هر تغییر، از پوشه اصلی یک نسخه پشتیبان (backup) بگیرید.

✅

نکته ۲: بعد از هر تغییر، فایل را در مرورگر رفرش کنید (با Ctrl+F5) تا کش پاک شود.

✅

نکته ۳: نام فایل‌ها را کوتاه و انگلیسی نگه دارید تا لینک‌دهی ساده‌تر شود.

💡

راه سریع: برای اضافه کردن یک درس جدید، همیشه از پوشه درس قبلی یک کپی بگیرید و محتوا را ویرایش کنید. نیازی به نوشتن از صفر نیست!

راهنمای کامل افزودن درس و کارت

فهرست مطالب