<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Parmon</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: 'Vazirmatn', sans-serif;
      background-color: #0a0a0f;
      color: #ffffff;
      display: flex;
      justify-content: center;
      min-height: 100vh;
    }

    .app-container {
      width: 100%;
      max-width: 420px;
      background-color: #0a0a0f;
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
      padding-bottom: 30px;
    }

    /* =========================================
       HEADER (طراحی جذاب و مدرن)
       ========================================= */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px 20px;
      position: relative;
      z-index: 10;
    }

    .header h1 {
      font-size: 22px; /* سایز کوچک‌تر و جمع‌وجورتر */
      font-weight: 900;
      background: linear-gradient(135deg, #ffffff 0%, #c084fc 100%); /* گرادینت جذاب‌تر و زنده‌تر */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 1px; /* فاصله حروف برای زیبایی بیشتر در متن انگلیسی */
      filter: drop-shadow(0 2px 8px rgba(192, 132, 252, 0.25)); /* سایه ملایم و شیک */
    }

    .hamburger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hamburger:active {
      background: rgba(192, 132, 252, 0.15);
      border-color: rgba(192, 132, 252, 0.4);
      transform: scale(0.92);
    }

    .hamburger span {
      display: block;
      height: 2px;
      background: #ffffff;
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    .hamburger span:nth-child(1) { width: 20px; }
    .hamburger span:nth-child(2) { width: 14px; }
    .hamburger span:nth-child(3) { width: 20px; }

    .hamburger:hover span:nth-child(2) {
      width: 20px;
    }

    /* =========================================
       HERO BANNER
       ========================================= */
    .hero-banner {
      margin: 0 16px 24px;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      height: 150px;
      background: #1a1a26;
      /* سایه پایین بنر حذف شد */
    }

    .hero-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* =========================================
       ICON GRID
       ========================================= */
    .icon-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px 14px;
      padding: 0 18px;
      margin-bottom: 28px;
    }

    .image-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      cursor: pointer;
    }

    .image-item img {
      width: 60px;
      height: 60px;
      object-fit: contain;
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    }

    .image-item:active img {
      transform: scale(0.9);
    }

    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      cursor: pointer;
    }

    .icon-box {
      width: 68px;
      height: 68px;
      background: linear-gradient(145deg, #1e1e2a 0%, #161622 100%);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .icon-box:active {
      transform: scale(0.92);
      background: linear-gradient(145deg, #252533 0%, #1a1a26 100%);
      border-color: rgba(192, 132, 252, 0.3);
    }

    .icon-box svg {
      width: 32px;
      height: 32px;
      stroke: #c084fc; /* هماهنگ با رنگ جدید هدر */
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 2px 4px rgba(192, 132, 252, 0.3));
    }

    .icon-label {
      font-size: 12px;
      font-weight: 600;
      color: #d1d1d8;
      text-align: center;
      transition: color 0.2s;
    }

    .image-item:active .icon-label,
    .icon-item:active .icon-label {
      color: #c084fc;
    }

    /* =========================================
       SECTIONS & CARDS
       ========================================= */
    .section {
      margin-bottom: 26px;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      margin-bottom: 14px;
    }

    .section-title {
      font-size: 16px;
      font-weight: 800;
      color: #fff;
    }

    .section-link {
      font-size: 13px;
      font-weight: 600;
      color: #c084fc; /* هماهنگ با تم جدید */
      cursor: pointer;
      transition: opacity 0.2s;
    }
    
    .section-link:active {
      opacity: 0.7;
    }

    .video-scroll, .movie-scroll {
      display: flex;
      gap: 12px;
      padding: 0 16px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .video-scroll::-webkit-scrollbar,
    .movie-scroll::-webkit-scrollbar {
      display: none;
    }

    .video-card {
      min-width: 120px;
      width: 120px;
      height: 185px;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
      cursor: pointer;
      background: #1e1e2a;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      transition: transform 0.2s;
    }

    .video-card:active {
      transform: scale(0.96);
    }

    .video-card img.card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .video-card .play-icon {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 26px;
      height: 26px;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .video-card .play-icon img {
      width: 12px;
      height: 12px;
      object-fit: contain;
    }

    .video-card .video-tag {
      position: absolute;
      top: 40px;
      right: 8px;
      left: 8px;
      background: rgba(255,255,255,0.95);
      color: #1a1a2e;
      font-size: 10px;
      font-weight: 700;
      padding: 5px 6px;
      border-radius: 9px;
      text-align: center;
      line-height: 1.4;
    }

    .video-card .video-title {
      position: absolute;
      bottom: 34px;
      right: 8px;
      left: 8px;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 8px;
      border-radius: 10px;
      text-align: center;
    }

    .video-card .video-duration {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background: rgba(0,0,0,0.6);
      color: #fff;
      font-size: 10px;
      font-weight: 600;
      padding: 3px 7px;
      border-radius: 6px;
    }

    .movie-card {
      min-width: 120px;
      width: 120px;
      height: 155px;
      border-radius: 16px;
      background: linear-gradient(145deg, #f0f0f2 0%, #e2e2e6 100%);
      position: relative;
      flex-shrink: 0;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      transition: transform 0.2s;
    }

    .movie-card:active {
      transform: scale(0.96);
    }

    .movie-card .movie-play {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 26px;
      height: 26px;
      background: rgba(0,0,0,0.08);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .movie-card .movie-play img {
      width: 12px;
      height: 12px;
      object-fit: contain;
    }
  </style>
</head>
<body>
  <div class="app-container">

    <!-- Header -->
    <div class="header">
      <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <h1>Parmon</h1>
    </div>

    <!-- Hero Banner (بدون سایه/گرادینت پایین) -->
    <div class="hero-banner">
      <img src="https://cdn.imgurl.ir/uploads/z55345__.jpg" alt="بنر آموزشی" />
    </div>

    <!-- Icon Grid -->
    <div class="icon-grid">

      <!-- ردیف بالا: بدون مربع -->
      <div class="image-item">
        <img src="https://cdn.imgurl.ir/uploads/r795298_icon_1_2048x2048.png" alt="موزیک" />
        <span class="icon-label">موزیک</span>
      </div>

      <div class="image-item">
        <img src="https://cdn.imgurl.ir/uploads/i118314_icon_2_2048x2048.png" alt="ویدیو" />
        <span class="icon-label">ویدیو</span>
      </div>

      <div class="image-item">
        <img src="https://cdn.imgurl.ir/uploads/l19165_icon_3_2048x2048.png" alt="لغات" />
        <span class="icon-label">لغات</span>
      </div>

      <div class="image-item">
        <img src="https://cdn.imgurl.ir/uploads/i4526_icon_4_2048x2048.png" alt="اصطلاحات" />
        <span class="icon-label">اصطلاحات</span>
      </div>

      <!-- ردیف پایین: با مربع و آیکون SVG -->
      <div class="icon-item">
        <div class="icon-box">
          <svg viewBox="0 0 24 24">
            <circle cx="11" cy="11" r="7"/>
            <path d="M11 4v14"/>
            <path d="M8 8c1.5 1 2.5 2.5 2.5 4.5S9.5 16 8 17"/>
            <path d="M14 8c-1.5 1-2.5 2.5-2.5 4.5S12.5 16 14 17"/>
            <circle cx="17" cy="17" r="4"/>
            <path d="M20 20l2.5 2.5"/>
          </svg>
        </div>
        <span class="icon-label">دیکشنری</span>
      </div>

      <div class="icon-item">
        <div class="icon-box">
          <svg viewBox="0 0 24 24">
            <rect x="3" y="6" width="18" height="12" rx="3"/>
            <path d="M7 10v4"/>
            <path d="M10 8.5v7"/>
            <path d="M13 10.5v3"/>
            <path d="M16 9v6"/>
            <path d="M19 11v2"/>
          </svg>
        </div>
        <span class="icon-label">تلفظ صوتی</span>
      </div>

      <div class="icon-item">
        <div class="icon-box">
          <svg viewBox="0 0 24 24">
            <rect x="5" y="4" width="14" height="16" rx="2.5"/>
            <path d="M9 9l1.5 1.5L13 8"/>
            <path d="M9 14h6"/>
            <path d="M9 17h4"/>
          </svg>
        </div>
        <span class="icon-label">کوییز</span>
      </div>

      <div class="icon-item">
        <div class="icon-box">
          <svg viewBox="0 0 24 24">
            <path d="M6 4h10a2 2 0 0 1 2 2v14H8a2 2 0 0 1-2-2V4z"/>
            <path d="M10 8h5M10 11.5h4M10 15h3"/>
            <path d="M18 6l2 2-2 2"/>
          </svg>
        </div>
        <span class="icon-label">گرامر</span>
      </div>

    </div>

    <!-- Short Videos Section -->
    <div class="section">
      <div class="section-header">
        <span class="section-title">ویدیو های کوتاه</span>
        <span class="section-link">مشاهده همه</span>
      </div>
      <div class="video-scroll">
        <div class="video-card">
          <img class="card-img" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&q=80" alt="video 1" />
          <div class="play-icon">
            <img src="https://cdn-icons-png.flaticon.com/512/727/727245.png" alt="play" />
          </div>
          <div class="video-title">انواع بگیرش</div>
          <div class="video-duration">00:25</div>
        </div>

        <div class="video-card">
          <img class="card-img" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&q=80" alt="video 2" />
          <div class="play-icon">
            <img src="https://cdn-icons-png.flaticon.com/512/727/727245.png" alt="play" />
          </div>
          <div class="video-tag">خدای گرامر میشی 😊</div>
          <div class="video-duration">00:35</div>
        </div>

        <div class="video-card">
          <img class="card-img" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&q=80" alt="video 3" />
          <div class="play-icon">
            <img src="https://cdn-icons-png.flaticon.com/512/727/727245.png" alt="play" />
          </div>
          <div class="video-tag">انگلیسی مخصوص تنبل ها!!!</div>
          <div class="video-duration">00:34</div>
        </div>

        <div class="video-card">
          <img class="card-img" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&q=80" alt="video 4" />
          <div class="play-icon">
            <img src="https://cdn-icons-png.flaticon.com/512/727/727245.png" alt="play" />
          </div>
          <div class="video-title">برردی</div>
          <div class="video-duration">00:42</div>
        </div>
      </div>
    </div>

    <!-- Movie Scans Section -->
    <div class="section">
      <div class="section-header">
        <span class="section-title">سکانس فیلم با زیرنویس</span>
        <span class="section-link">مشاهده کامل</span>
      </div>
      <div class="movie-scroll">
        <div class="movie-card">
          <div class="movie-play">
            <img src="https://cdn-icons-png.flaticon.com/512/727/727245.png" alt="play" />
          </div>
        </div>
        <div class="movie-card">
          <div class="movie-play">
            <img src="https://cdn-icons-png.flaticon.com/512/727/727245.png" alt="play" />
          </div>
        </div>
        <div class="movie-card">
          <div class="movie-play">
            <img src="https://cdn-icons-png.flaticon.com/512/727/727245.png" alt="play" />
          </div>
        </div>
        <div class="movie-card">
          <div class="movie-play">
            <img src="https://cdn-icons-png.flaticon.com/512/727/727245.png" alt="play" />
          </div>
        </div>
      </div>
    </div>

  </div>
</body>
</html>