AzitaRahimi/inova-archive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Azita Rahimi
2026-06-17 13:17:47 +03:30
commit 48bd4c1878
43 changed files with 5016 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

785
archive.html Normal file
View File

@@ -0,0 +1,785 @@
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./src/core/stylesheet/core.css" />
<link rel="stylesheet" href="./src/assets/css/archive.css" />
<link rel="stylesheet" href="./src/assets/css/archive-responsive.css" />
<script type="module" src="./src/assets/js/archive.js" defer></script>
<title></title>
</head>
<body>
<div id="root">
<!-- ==============================================هیرو سکشن================================= -->
<section class="hero-section">
<div class="container-hero-section">
<div class="hero-section-wrapper">
<div class="hero-card">
<div class="hero-circles" aria-hidden="true">
<div class="circle circle--1"></div>
<div class="circle circle--2"></div>
<div class="circle circle--3"></div>
<div class="circle circle--4"></div>
</div>
<div class="hero-hollow hero-hollow--left" aria-hidden="true"></div>
<div class="hero-hollow hero-hollow--right" aria-hidden="true"></div>
<div class="hero-dot-pattern" aria-hidden="true"></div>
<div class="hero-content">
<h2 class="hero-title">
هر پروژه یک داستان است؛ داستانی که شما
<br />
قهرمان آن هستید.
</h2>
<p class="hero-txt">
هر پروژه داستانی از صیقل خوردن یک ایده و تبدیل آن به یک موفقیت تجاری است.
نمونه‌های منتخب ما را تماشا کنید.
</p>
<div class="stats">
<div class="stat-item">
<span class="counter" data-target="300" data-prefix="+">0</span>
<div class="stat-text">پروژه موفق</div>
</div>
<div class="stat-item">
<span class="counter" data-target="92" data-suffix="%">0</span>
<div class="stat-text">رضایت کارفرمایان</div>
</div>
<div class="stat-item">
<span class="counter" data-target="45" data-suffix="+">0</span>
<div class="stat-text">تعداد مشتریان</div>
</div>
<div class="stat-item">
<span class="counter" data-target="1.5" data-suffix="x">0</span>
<div class="stat-text">افزایش رشد/فروش مشتریان</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================== آرشیوسکشن================================= -->
<section
class="gallery-section related-section"
data-related-section="gallery"
data-nav-title="گالری"
>
<header class="gallery-section-header">
<h2>جدیدترین نمونه‌کارها</h2>
<p>به این سبک پروژه‌ها علاقه دارید؟ پس پروژه‌های زیر را ببینید</p>
</header>
<!-- ===== STICKY FILTER BAR ===== -->
<div class="filter-sticky-wrapper">
<div class="filter-bar" id="filterBar">
<div class="filter-bar-inner">
<!-- دکمه فیلتر کردن / بستن -->
<button class="filter-toggle-btn" id="filterToggleBtn" type="button">
<span id="filterToggleText">فیلتر کردن</span>
</button>
<!-- کنترل‌های دسکتاپ (بعد از باز شدن نمایش داده می‌شه) -->
<div class="filter-controls" id="filterControls">
<!-- دسته بندی‌ها -->
<div class="filter-group">
<button class="filter-group-btn" id="categoryBtn" type="button">
<svg aria-hidden="true" width="20" height="20">
<use href="./src/assets/icons/portfolioP.svg#filter"></use>
</svg>
دسته بندی‌ها
<span class="filter-badge" id="categoryBadge">0</span>
<svg aria-hidden="true" width="20" height="20">
<use href="./src/assets/icons/portfolioP.svg#down-blue-more"></use>
</svg>
</button>
<div class="filter-dropdown" id="categoryDropdown">
<label class="filter-check-item">
<input
type="checkbox"
class="filter-checkbox category-checkbox"
value="طراحی سایت"
/>
<span>طراحی سایت</span>
</label>
<label class="filter-check-item">
<input
type="checkbox"
class="filter-checkbox category-checkbox"
value="گیمیفیکیشن"
/>
<span>گیمیفیکیشن</span>
</label>
<label class="filter-check-item">
<input
type="checkbox"
class="filter-checkbox category-checkbox"
value="سئو"
/>
<span>سئو</span>
</label>
<label class="filter-check-item">
<input
type="checkbox"
class="filter-checkbox category-checkbox"
value="برندینگ"
/>
<span>برندینگ</span>
</label>
</div>
</div>
<!-- تگ‌ها -->
<div class="filter-group">
<button class="filter-group-btn" id="tagsBtn" type="button">
<svg aria-hidden="true" width="20" height="20">
<use href="./src/assets/icons/portfolioP.svg#tag"></use>
</svg>
تگ‌ها
<span class="filter-badge" id="tagBadge">0</span>
<svg aria-hidden="true" width="20" height="20">
<use href="./src/assets/icons/portfolioP.svg#down-blue-more"></use>
</svg>
</button>
<div class="filter-dropdown" id="tagsDropdown">
<label class="filter-check-item">
<input type="checkbox" class="filter-checkbox tag-checkbox" value="تگ 1" />
<span>تگ 1</span>
</label>
<label class="filter-check-item">
<input type="checkbox" class="filter-checkbox tag-checkbox" value="تگ 2" />
<span>تگ 2</span>
</label>
<label class="filter-check-item">
<input type="checkbox" class="filter-checkbox tag-checkbox" value="تگ 3" />
<span>تگ 3</span>
</label>
</div>
</div>
<!-- حذف فیلتر -->
<button class="filter-clear-btn" id="filterClearBtn" type="button" disabled>
<svg aria-hidden="true" width="20" height="20">
<use href="./src/assets/icons/portfolioP.svg#trash"></use>
</svg>
حذف فیلتر
</button>
<!-- تعداد پروژه‌ها -->
<span class="filter-count-text">150 پروژه</span>
</div>
</div>
</div>
</div>
<!-- ===== MOBILE POPUP ===== -->
<div class="filter-mobile-overlay" id="filterMobileOverlay">
<div class="filter-mobile-popup">
<div class="filter-mobile-header">
<h3 class="filter-mobile-title" id="filterMobileTitle">فیلتر کردن</h3>
<button class="filter-mobile-close" id="filterMobileClose" type="button">
<svg aria-hidden="true" width="24" height="24">
<use href="./src/assets/icons/portfolioP.svg#close"></use>
</svg>
</button>
<button class="filter-mobile-back" id="filterMobileBack" type="button">
<span>برگشت</span>
<svg aria-hidden="true" width="20" height="20">
<use href="./src/assets/icons/portfolioP.svg#back"></use>
</svg>
</button>
</div>
<!-- نمای اصلی -->
<div class="filter-mobile-main" id="filterMobileMain">
<button class="filter-mobile-option-btn" id="mobileCategoryBtn" type="button">
<div>
<span class="tag-txt">دسته بندی‌ها</span>
<span class="filter-badge" id="mobileCategoryBadge">0</span>
</div>
<svg aria-hidden="true" width="24" height="24">
<use href="./src/assets/icons/portfolioP.svg#chevron-left"></use>
</svg>
</button>
<button class="filter-mobile-option-btn" id="mobileTagsBtn" type="button">
<div>
<span class="tag-txt">تگ‌ها</span>
<span class="filter-badge" id="mobileTagBadge">0</span>
</div>
<svg aria-hidden="true" width="24" height="24">
<use href="./src/assets/icons/portfolioP.svg#chevron-left"></use>
</svg>
</button>
</div>
<!-- زیرمنو: دسته‌بندی -->
<div class="filter-mobile-sub" id="filterMobileCategorySub">
<label class="filter-check-item">
<input type="checkbox" class="filter-checkbox mob-cat-cb" value="طراحی سایت" /><span
>طراحی سایت</span
>
</label>
<label class="filter-check-item">
<input type="checkbox" class="filter-checkbox mob-cat-cb" value="گیمیفیکیشن" /><span
>گیمیفیکیشن</span
>
</label>
<label class="filter-check-item">
<input type="checkbox" class="filter-checkbox mob-cat-cb" value="سئو" /><span
>سئو</span
>
</label>
<label class="filter-check-item">
<input type="checkbox" class="filter-checkbox mob-cat-cb" value="برندینگ" /><span
>برندینگ</span
>
</label>
</div>
<!-- زیرمنو: تگ‌ها -->
<div class="filter-mobile-sub" id="filterMobileTagsSub">
<label class="filter-check-item">
<input type="checkbox" class="filter-checkbox mob-tag-cb" value="تگ 1" /><span
>تگ 1</span
>
</label>
<label class="filter-check-item">
<input type="checkbox" class="filter-checkbox mob-tag-cb" value="تگ 2" /><span
>تگ 2</span
>
</label>
<label class="filter-check-item">
<input type="checkbox" class="filter-checkbox mob-tag-cb" value="تگ 3" /><span
>تگ 3</span
>
</label>
</div>
<div class="filter-mobile-footer">
<button class="filter-mobile-apply" id="filterMobileApply" type="button">
اعمال فیلتر
</button>
<button class="filter-mobile-clear" id="filterMobileClear" type="button" disabled>
حذف فیلترها
</button>
</div>
</div>
</div>
<div class="container">
<div class="related-boxes">
<a class="related-card" href="">
<div class="related-image">
<div
data-type="video"
class="media-container"
data-src="./public/images/videotest.mp4"
></div>
<button class="play-btn" aria-label="play-video">
<svg class="progress-ring" width="22" height="22">
<circle class="progress-circle" cx="22" cy="22" r="11" />
</svg>
<svg class="play-icon icon-play" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
</svg>
<svg class="play-icon icon-pause" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
</svg>
</button>
<div class="overlay-layer">
<div class="button-overlay">
<span class="date">23 آذر 1404</span>
<svg aria-hidden="true" height="24" width="24">
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
</svg>
</div>
</div>
</div>
<div class="related-content">
<h3>طراحی وبسایت حسابداری فرداد</h3>
<p>طراحی سایت | گیمیفیکیشن</p>
</div>
</a>
<a class="related-card" href="">
<div class="related-image">
<div
data-type="image"
class="media-container"
data-src="./public/images/2.png"
></div>
<button class="play-btn" aria-label="play-video">
<svg class="progress-ring" width="22" height="22">
<circle class="progress-circle" cx="22" cy="22" r="11" />
</svg>
<svg class="play-icon icon-play" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
</svg>
<svg class="play-icon icon-pause" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
</svg>
</button>
<div class="overlay-layer">
<div class="button-overlay">
<span class="date">23 آذر 1404</span>
<svg aria-hidden="true" height="24" width="24">
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
</svg>
</div>
</div>
</div>
<div class="related-content">
<h3>طراحی وبسایت زبان مهر</h3>
<p>طراحی سایت | گیمیفیکیشن</p>
</div>
</a>
<a class="related-card" href="">
<div class="related-image">
<div
data-type="image"
class="media-container"
data-src="./public/images/3.png"
></div>
<button class="play-btn" aria-label="play-video">
<svg class="progress-ring" width="22" height="22">
<circle class="progress-circle" cx="22" cy="22" r="11" />
</svg>
<svg class="play-icon icon-play" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
</svg>
<svg class="play-icon icon-pause" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
</svg>
</button>
<div class="overlay-layer">
<div class="button-overlay">
<span class="date">23 آذر 1404</span>
<svg aria-hidden="true" height="24" width="24">
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
</svg>
</div>
</div>
</div>
<div class="related-content">
<h3>طراحی صفحه گیمیفیکیشن زبان مهر</h3>
<p>طراحی سایت | گیمیفیکیشن</p>
</div>
</a>
<a class="related-card" href="">
<div class="related-image">
<div
data-type="video"
class="media-container"
data-src="./public/images/videotest.mp4"
></div>
<button class="play-btn" aria-label="play-video">
<svg class="progress-ring" width="22" height="22">
<circle class="progress-circle" cx="22" cy="22" r="11" />
</svg>
<svg class="play-icon icon-play" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
</svg>
<svg class="play-icon icon-pause" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
</svg>
</button>
<div class="overlay-layer">
<div class="button-overlay">
<span class="date">23 آذر 1404</span>
<svg aria-hidden="true" height="24" width="24">
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
</svg>
</div>
</div>
</div>
<div class="related-content">
<h3>طراحی وبسایت حسابداری فرداد</h3>
<p>طراحی سایت | گیمیفیکیشن</p>
</div>
</a>
<a class="related-card" href="">
<div class="related-image">
<div
data-type="image"
class="media-container"
data-src="./public/images/2.png"
></div>
<button class="play-btn" aria-label="play-video">
<svg class="progress-ring" width="22" height="22">
<circle class="progress-circle" cx="22" cy="22" r="11" />
</svg>
<svg class="play-icon icon-play" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
</svg>
<svg class="play-icon icon-pause" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
</svg>
</button>
<div class="overlay-layer">
<div class="button-overlay">
<span class="date">23 آذر 1404</span>
<svg aria-hidden="true" height="24" width="24">
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
</svg>
</div>
</div>
</div>
<div class="related-content">
<h3>طراحی وبسایت زبان مهر</h3>
<p>طراحی سایت | گیمیفیکیشن</p>
</div>
</a>
<a class="related-card" href="">
<div class="related-image">
<div
data-type="image"
class="media-container"
data-src="./public/images/3.png"
></div>
<button class="play-btn" aria-label="play-video">
<svg class="progress-ring" width="22" height="22">
<circle class="progress-circle" cx="22" cy="22" r="11" />
</svg>
<svg class="play-icon icon-play" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
</svg>
<svg class="play-icon icon-pause" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
</svg>
</button>
<div class="overlay-layer">
<div class="button-overlay">
<span class="date">23 آذر 1404</span>
<svg aria-hidden="true" height="24" width="24">
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
</svg>
</div>
</div>
</div>
<div class="related-content">
<h3>طراحی صفحه گیمیفیکیشن زبان مهر</h3>
<p>طراحی سایت | گیمیفیکیشن</p>
</div>
</a>
<a class="related-card" href="">
<div class="related-image">
<div
data-type="video"
class="media-container"
data-src="./public/images/videotest.mp4"
></div>
<button class="play-btn" aria-label="play-video">
<svg class="progress-ring" width="22" height="22">
<circle class="progress-circle" cx="22" cy="22" r="11" />
</svg>
<svg class="play-icon icon-play" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
</svg>
<svg class="play-icon icon-pause" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
</svg>
</button>
<div class="overlay-layer">
<div class="button-overlay">
<span class="date">23 آذر 1404</span>
<svg aria-hidden="true" height="24" width="24">
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
</svg>
</div>
</div>
</div>
<div class="related-content">
<h3>طراحی وبسایت حسابداری فرداد</h3>
<p>طراحی سایت | گیمیفیکیشن</p>
</div>
</a>
<a class="related-card" href="">
<div class="related-image">
<div
data-type="image"
class="media-container"
data-src="./public/images/2.png"
></div>
<button class="play-btn" aria-label="play-video">
<svg class="progress-ring" width="22" height="22">
<circle class="progress-circle" cx="22" cy="22" r="11" />
</svg>
<svg class="play-icon icon-play" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
</svg>
<svg class="play-icon icon-pause" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
</svg>
</button>
<div class="overlay-layer">
<div class="button-overlay">
<span class="date">23 آذر 1404</span>
<svg aria-hidden="true" height="24" width="24">
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
</svg>
</div>
</div>
</div>
<div class="related-content">
<h3>طراحی وبسایت زبان مهر</h3>
<p>طراحی سایت | گیمیفیکیشن</p>
</div>
</a>
<a class="related-card" href="">
<div class="related-image">
<div
data-type="image"
class="media-container"
data-src="./public/images/3.png"
></div>
<button class="play-btn" aria-label="play-video">
<svg class="progress-ring" width="22" height="22">
<circle class="progress-circle" cx="22" cy="22" r="11" />
</svg>
<svg class="play-icon icon-play" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
</svg>
<svg class="play-icon icon-pause" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
</svg>
</button>
<div class="overlay-layer">
<div class="button-overlay">
<span class="date">23 آذر 1404</span>
<svg aria-hidden="true" height="24" width="24">
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
</svg>
</div>
</div>
</div>
<div class="related-content">
<h3>طراحی صفحه گیمیفیکیشن زبان مهر</h3>
<p>طراحی سایت | گیمیفیکیشن</p>
</div>
</a>
<a class="related-card" href="">
<div class="related-image">
<div
data-type="video"
class="media-container"
data-src="./public/images/videotest.mp4"
></div>
<button class="play-btn" aria-label="play-video">
<svg class="progress-ring" width="22" height="22">
<circle class="progress-circle" cx="22" cy="22" r="11" />
</svg>
<svg class="play-icon icon-play" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
</svg>
<svg class="play-icon icon-pause" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
</svg>
</button>
<div class="overlay-layer">
<div class="button-overlay">
<span class="date">23 آذر 1404</span>
<svg aria-hidden="true" height="24" width="24">
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
</svg>
</div>
</div>
</div>
<div class="related-content">
<h3>طراحی وبسایت حسابداری فرداد</h3>
<p>طراحی سایت | گیمیفیکیشن</p>
</div>
</a>
<a class="related-card" href="">
<div class="related-image">
<div
data-type="image"
class="media-container"
data-src="./public/images/2.png"
></div>
<button class="play-btn" aria-label="play-video">
<svg class="progress-ring" width="22" height="22">
<circle class="progress-circle" cx="22" cy="22" r="11" />
</svg>
<svg class="play-icon icon-play" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
</svg>
<svg class="play-icon icon-pause" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
</svg>
</button>
<div class="overlay-layer">
<div class="button-overlay">
<span class="date">23 آذر 1404</span>
<svg aria-hidden="true" height="24" width="24">
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
</svg>
</div>
</div>
</div>
<div class="related-content">
<h3>طراحی وبسایت زبان مهر</h3>
<p>طراحی سایت | گیمیفیکیشن</p>
</div>
</a>
<a class="related-card" href="">
<div class="related-image">
<div
data-type="image"
class="media-container"
data-src="./public/images/3.png"
></div>
<button class="play-btn" aria-label="play-video">
<svg class="progress-ring" width="22" height="22">
<circle class="progress-circle" cx="22" cy="22" r="11" />
</svg>
<svg class="play-icon icon-play" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
</svg>
<svg class="play-icon icon-pause" aria-hidden="true">
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
</svg>
</button>
<div class="overlay-layer">
<div class="button-overlay">
<span class="date">23 آذر 1404</span>
<svg aria-hidden="true" height="24" width="24">
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
</svg>
</div>
</div>
</div>
<div class="related-content">
<h3>طراحی صفحه گیمیفیکیشن زبان مهر</h3>
<p>طراحی سایت | گیمیفیکیشن</p>
</div>
</a>
</div>
<nav class="pagination">
<ul>
<li>
<a href="#" class="item">
<svg aria-hidden="true" width="16" height="16">
<use href="./src/assets/icons/portfolioGallery.svg#chevrons-right"></use>
</svg>
</a>
</li>
<li>
<a href="#" class="item">
<svg aria-hidden="true" width="16" height="16">
<use href="./src/assets/icons/portfolioGallery.svg#right"></use>
</svg>
</a>
</li>
<li class="current">
<a href="#" class="item"> 1 </a>
</li>
<li>
<a href="#" class="item"> 2 </a>
</li>
<li>
<span class="item"> … </span>
</li>
<li>
<a href="#" class="item"> 8 </a>
</li>
<li>
<a href="#" class="item">
<svg aria-hidden="true" width="16" height="16">
<use href="./src/assets/icons/portfolioGallery.svg#left"></use>
</svg>
</a>
</li>
<li>
<a href="#" class="item">
<svg aria-hidden="true" width="16" height="16">
<use href="./src/assets/icons/portfolioGallery.svg#chevrons-left"></use>
</svg>
</a>
</li>
</ul>
</nav>
</div>
</section>
</div>
</body>
</html>