index.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Persian Caesar Team | تیم ایرانی توسعه‌دهنده پروژه‌های متن‌باز و ربات‌های دیسکورد">
  <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
  <title>Persian Caesar Team</title>
  <style>
    /* --- Import Google Fonts (Vazirmatn for Persian) --- */
    @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;800&display=swap');

    /* --- CSS Variables (Theme Colors) --- */
    :root {
      --neon-gold: #fad815;
      /* Main golden-yellow */
      --neon-glow-light: rgba(250, 216, 21, 0.712);
      /* Lighter glow for text */
      --neon-glow-heavy: rgba(250, 196, 21, 0.3);
      /* Wider, subtle glow for boxes */
      --bg-dark: #151515;
      /* Deep dark background for neon contrast */
      --bg-glass: rgba(24, 24, 24, 0.4);
      /* Transparent background for glassmorphism cards */
      --border-color: rgba(250, 204, 21, 0.3);
      /* Neon border color */
      --text-primary: #f1f5f9;
      /* Main body text */
      --text-secondary: #aaa;
      /* Faded text (e.g., footer) */
    }

    /* --- Global Resets & Base Styles --- */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Vazirmatn', sans-serif;
      /* Dark radial gradient for depth */
      background: radial-gradient(circle at 50% 90%, var(--bg-dark), #0d0d0d);
      color: var(--text-primary);
      line-height: 1.8;
      padding: 2rem;
    }

    /* --- Keyframe Animation for Neon Glow --- */
    @keyframes subtle-glow {
      from {
        text-shadow:
          0 0 10px var(--neon-glow-heavy),
          0 0 20px var(--neon-glow-heavy);
      }

      to {
        text-shadow:
          0 0 20px var(--neon-glow-light),
          0 0 30px var(--neon-glow-light);
      }
    }

    /* --- Header & Title Styling --- */
    header {
      text-align: center;
      margin-bottom: 3rem;
      /* Increased margin */
    }

    header h1 {
      font-size: 2.5rem;
      /* Larger title */
      color: var(--neon-gold);
      /* Apply animation for a living neon effect */
      animation: subtle-glow 2.5s infinite alternate ease-in-out;
    }

    header p {
      font-size: 1.1rem;
      opacity: 0.9;
      margin-top: 0.5rem;
    }

    /* --- Section & Card Styling (Glassmorphism + Neon) --- */
    section {
      max-width: 900px;
      margin: 2rem auto;
      background: var(--bg-glass);
      /* Semi-transparent glass background */
      padding: 2rem;
      border-radius: 16px;
      border: 1px solid var(--border-color);
      /* Subtle neon border */
      box-shadow: 0 0 20px var(--neon-glow-heavy);
      /* Soft glow from the container */
      backdrop-filter: blur(10px);
      /* The glass effect */
    }

    /* --- Typography (Headings, Links) --- */
    h2 {
      color: var(--neon-gold);
      /* Modern bottom border instead of side border */
      border-bottom: 2px solid var(--border-color);
      padding-bottom: 0.5rem;
      margin-bottom: 1.5rem;
      /* Subtle glow for section titles */
      text-shadow: 0 0 5px var(--neon-glow-heavy);
    }

    a {
      color: var(--neon-gold);
      text-decoration: none;
      font-weight: 600;
      /* Bolder links */
      transition: color 0.3s, text-shadow 0.3s;
    }

    a:hover {
      color: #fff;
      /* Brighten link color and add strong glow on hover */
      text-shadow:
        0 0 5px var(--neon-glow-light),
        0 0 10px var(--neon-glow-light);
    }

    /* --- Project List Styling --- */
    .projects ul {
      list-style: none;
      margin-top: 1rem;
    }

    .projects li {
      margin-bottom: 1rem;
      background: rgba(151, 151, 151, 0.05);
      padding: 1rem;
      border-radius: 10px;
      /* Neon accent border on the right */
      border-right: 3px solid var(--neon-gold);
      transition: background 0.3s, transform 0.3s;
    }

    .projects li:hover {
      background: rgba(250, 204, 21, 0.1);
      /* Slight lift effect */
      transform: translateX(5px);
    }

    /* --- Team Member Card Styling --- */
    .member {
      margin-top: 1rem;
      padding: 1rem;
      border-radius: 10px;
      background: rgba(52, 52, 52, 0.1);
      border: 1px solid rgba(148, 163, 184, 0.2);
      transition: all 0.3s ease;
    }

    .member:hover {
      background: rgba(250, 204, 21, 0.05);
      border-color: var(--border-color);
      box-shadow: 0 0 10px var(--neon-glow-heavy);
    }

    /* --- Footer Styling --- */
    footer {
      text-align: center;
      margin-top: 3rem;
      padding-top: 1.5rem;
      /* Separator line */
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--text-secondary);
      font-size: 0.9rem;
    }

    /* --- GitHub Repo List Grid --- */
    .repo-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      /* Increased gap */
      margin-top: 1rem;
    }

    .repo-card {
      background: linear-gradient(145deg, rgba(255, 207, 15, 0.02), rgba(0, 0, 0, 0.173));
      border: 1px solid var(--border-color);
      padding: 1.25rem;
      /* Increased padding */
      border-radius: 12px;
      transition: all 0.3s ease;
    }

    /* --- GitHub Card Hover Effect (Main Neon Effect) --- */
    .repo-card:hover {
      /* Lift and scale effect */
      transform: translateY(-5px) scale(1.02);
      /* Strong neon glow on hover */
      box-shadow:
        0 0 15px var(--neon-glow-light),
        0 0 30px var(--neon-glow-heavy);
      border-color: var(--neon-gold);
      /* Brighter border */
    }

    .repo-card h3 {
      color: var(--neon-gold);
      font-size: 1.15rem;
      /* Slightly larger */
      margin-bottom: 0.5rem;
      text-shadow: 0 0 4px var(--neon-glow-heavy);
    }

    .repo-card p {
      font-size: 0.9rem;
      color: #ddd;
      opacity: 0.9;
      margin-bottom: 0.5rem;
      min-height: 40px;
      /* Ensure cards have similar height */
    }

    .repo-meta {
      font-size: 0.85rem;
      color: var(--text-secondary);
    }

    /* --- Utility Classes --- */
    .rtl {
      direction: rtl;
    }

    .ltr {
      direction: ltr;
    }

    .text-center {
      text-align: center;
    }
  </style>
</head>

<body>
  <header>
    <h1>Persian Caesar Team</h1>
    <p>قدرت تکنولوژی ایرانی، برای مردم ایران</p>
  </header>

  <section>
    <h2>📜 داستان پیدایش تیم</h2>
    <p>
      در سال ۲۰۲۱ من <strong>Sobhan-SRZA</strong> ملقب به <strong>mr.sinre</strong> بعد از شروع برنامه‌نویسی و آغاز
      پروژه <strong>DJ Boy</strong> تصمیم گرفتم تیمی ایرانی بسازم که روزی نماد قدرت تکنولوژی جهان باشه.
      ایده از قهرمان وطن‌پرست «سزار روس» الهام گرفته شد و از همین‌جا نام <strong>Sizar Team</strong> شکل گرفت.
    </p>
    <p>
      اولین پروژه رسمی تیم، ربات دیسکورد <strong>DJ Boy</strong> بود — پلیری برای پخش موسیقی با قابلیت مدیریت از طریق
      پنل اختصاصی.
      <a href="https://github.com/Persian-Caesar/DJ-Boy" target="_blank">مشاهده در GitHub</a>
    </p>
    <p>
      سپس پروژه <strong>All For One Bot</strong> با نام مستعار <em>Ordak Farangi</em> منتشر شد؛
      رباتی چندمنظوره برای مدیریت، سرگرمی و ابزارهای دیسکورد.
      <a href="https://github.com/Persian-Caesar/All-For-One-Bot" target="_blank">مشاهده در GitHub</a>
    </p>
    <p>
      بعد از انجام پروژه <strong>اردک فرنگی</strong> و رسوندنش به حد قابل قبولی در سال ۲۰۲۲، تصمیم گرفتم اسم تیم رو
      ایرانی‌تر بکنم. با الهام از نقشهٔ ایران که شبیه گربه هست و با ترکیب ایدهٔ «سزار روس»، نام <strong>Persian
        Caesar</strong> شکل گرفت.
    </p>
    <p>
      در اوایل تا سال ۲۰۲۴، اسم تیم به‌اشتباه <strong>Persian Cezar</strong> نوشته می‌شد، اما بعد به‌صورت رسمی به
      <strong>Persian Caesar</strong> تغییر کرد.
    </p>
    <p>
      ایده‌های زیادی برای طراحی لوگو وجود داشت، اما الهام اصلی از لوگوی گیت‌هاب گرفته شد — جایی که از نماد گربه استفاده
      شده. قرار بر این است که لوگوی تیم نیز گربه‌ای باشد که نماد ایران را در خود دارد.
    </p>
    <p>
      در سال ۲۰۲۲ پروژه <strong>Ticker Boy</strong> آغاز شد و نسخهٔ نهایی آن در سال ۲۰۲۳ منتشر گردید.
      سیستمی کامل برای تیکت پشتیبانی با داشبورد و مدیریت ساده.
      <a href="https://github.com/Persian-Caesar/Ticker-Boy" target="_blank">مشاهده در GitHub</a>
    </p>
  </section>

  <section>
    <h2>👥 اعضای تیم</h2>
    <div class="member">
      <a href="https://srza.ir" target="_blank"><strong>Sobhan-SRZA (mr.sinre)</strong></a><br>
      بنیان‌گذار، توسعه‌دهندهٔ فول‌استک و خالق پروژه‌های اصلی تیم.
    </div>
    <div class="member">
      <a href="https://github.com/xsoltanx" target="_blank"><strong>Amir</strong></a><br>
      برنامه‌نویس پایتون تیم، عضو از سال 2021 و شروع فعالیت از سال 2025، مشارکت در پروژه‌های مشتریان تیم.
    </div>
    <div class="member">
      <a href="http://xo-aria.github.io/" target="_blank"><strong>Arya</strong></a><br>
      توسعه‌دهندهٔ فول‌استک PHP، عضو از سال 2024 و مسئول پروژه‌های زیرمجموعهٔ <a href="https://hycom.ir"
        target="_blank"><strong>HyCom</strong></a>.
    </div>
  </section>

  <section class="projects">
    <h2>🚀 پروژه‌های رسمی تیم</h2>
    <ul>
      <li>
        <a href="https://www.npmjs.com/package/aparat.js" target="_blank"><strong>aparat.js</strong></a> — پکیج ارتباط
        با آپارات به‌صورت Node.js، در حال توسعه مداوم.
      </li>
      <li>
        پروژه طراحی وب‌سایت برای <a href="https://a-o-v.ir" target="_blank"><strong>شرکت آرتا عمران ورق</strong></a> ✅
      </li>
      <li>
        ربات دیسکورد برای پلتفرم <a href="https://daramet.com/" target="_blank"><strong>دارمت</strong></a> با مدیریت تیم
        <a href="https://awizhe.com/" target="_blank"><strong>آویژه</strong></a> ⚙️
      </li>
    </ul>
  </section>

  <section>
    <h2>💾 نمایش پروژه‌های GitHub</h2>
    <div id="repo-container" class="repo-list">
      <p>در حال دریافت اطلاعات از GitHub...</p>
    </div>
  </section>

  <footer class="ltr">
    © <strong>2021–2025 Persian Caesar Team</strong> — All Rights Reserved.
  </footer>

  <script>
    // --- JavaScript for fetching GitHub repos (No changes made here) ---
    const repoContainer = document.getElementById("repo-container");
    const username = "Persian-Caesar";
    document.addEventListener("DOMContentLoaded", async () => {

      try {
        const projects_res = await fetch(`https://raw.githubusercontent.com/Sobhan-SRZA/Sobhan-SRZA/refs/heads/main/projects.json`)
        const git_res = await fetch(`https://api.github.com/users/${username}/repos`)
        const git_repos = await git_res.json()
        const all_repos = await projects_res.json()
        const repos = all_repos.filter(a => a.organization === "Persian-Caesar");
        repoContainer.innerHTML = "";
        repos.forEach(repo => {
          const git_repo = git_repos.find(a => a.name.toLowerCase() == repo.name.toLowerCase())
          const card = document.createElement("div");
          card.className = "repo-card";
          card.innerHTML = `
            <h3 class="text-center"><a href="https://github.com/${username}/${repo.name}" target="_blank">${repo.name}</a></h3>
            <p>${repo.description_fa ? repo.description_fa : "بدون توضیحات"}</p>
            <div class="repo-meta ltr text-center">
              ⭐ ${repo.stars} | 🍴 ${repo.forks}${git_repo ? ` | 🕓 ${new Date(git_repo.updated_at).toLocaleDateString('fa-IR')}` : ""}
            </div>
            `;
          repoContainer.appendChild(card);
        });

      }

      catch {
        repoContainer.innerHTML = "<p style='color:#f87171;'>خطا در دریافت داده از GitHub</p>";
      }
    })
  </script>
</body>

</html>