Files

T

arsam e9cd12dda6 Import remaining project documentation and reference notes

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.

2026-09-18 23:33:04 +03:30

217 KiB

Raw Permalink Blame History

Teknav Frontend Design System — Complete Reference (v6226)

Disclaimer: This document is a complete design reference for the Teknav frontend (a Persian RTL React SPA at teknav.ir). Every color, spacing, typography, component state, animation, responsive breakpoint, and layout pattern is documented below. After reading this document, the reader should be able to reconstruct the entire UI verbatim without ever seeing the live site.

1. IDENTITY & BRAND

1.1 Brand Overview

Name (Persian): تکناو (Teknav)
Tagline (Persian): روایت عمیق فناوری / تحلیل فناوری، هوش مصنوعی و امنیت سایبری
Tagline (English): Deep technology narrative
English Sub-brand: TEKNAV (all-caps, letter-spacing 0.15em–0.32em)
Domain: teknav.ir
Language: fa-IR (Persian), RTL; secondary LTR for TekRAG English article
Category: Technology analysis media — AI, data science, cybersecurity, software, hardware, startups, future tech
Year Established: Static copyright reads "۱۴۰۵" (2026)

1.2 Brand Voice

Authoritative, data-driven, academic yet accessible
Persian-first RTL, technical Persian terminology
Uses formal Persian greetings ("صبح بخیر", "شب بخیر") with time-based greeting on login
"Learner" tone — content is deep analysis, not breaking news

1.3 Logo & Wordmark

Header Logo:

Wordmark "تکناو" in Vazirmatn 900 weight, 22px font size, color #0F6B73
Sub-label "TEKNAV" below in sans-serif 9px, letter-spacing 0.15em, color #5F6B6D
Clickable (navigates to /)
Hamburger menu icon on mobile (3 horizontal lines, SVG 20x20, stroke #263238, strokeWidth 2)

Footer Logo:

"تکناو" in PelakFA 900, 28px, color #0F2A2E
"TEKNAV" below in 11px, letter-spacing 0.18em, color #C46A4D, weight 700

Auth Page Logo (Brand Panel):

Gold gradient square (26px radius) with "ت" character in center on dark background
Dashed and solid orbiting rings around logo with animation
Gradient: linear-gradient(145deg, #C8951C 0%, #F4C36A 50%, #C8951C 100%)
Character: color #0B2226, font-size 44px, weight 900

Auth Page Mobile Logo:

Same gold gradient square 44x44px, boxShadow '0 4px 14px rgba(200,149,28,0.3)'
"ت" character at 21px, #0F2A2E
Wordmark "تکناو" at 24px, PelakFA, #0F2A2E

Favicon:

/favicon.ico (ICO format)
/favicon.png 512x512 (PNG, apple-touch-icon and PWA)

2. COLOR SYSTEM

2.1 Primary Palette

Token	Hex	Usage	Shade Name
`--tek-teal`	`#0F6B73`	Primary brand, links, buttons, active states, header logo, borders	Deep Teal
`--tek-teal-dark`	`#0F2A2E`	Headings, premium banners, dark brand text	Dark Teal
`--tek-teal-light`	`#0F6B7318`	Background tints (18% opacity)	Light Teal Tint
`--tek-terracotta`	`#C46A4D`	Login button, stats accent, profile primary	Terracotta
`--tek-terracotta-light`	`#C46A4D18`	Background tints	Light Terracotta
`--tek-gold`	`#D49A2A`	Shimmer text, badges, premium, brand panel	Gold
`--tek-gold-light`	`#D49A2A0A`	Blockquote backgrounds, tints	Light Gold
`--tek-gold-dark`	`#A8761B`	Gold gradient endpoints	Dark Gold
`--tek-green`	`#2F8F6B`	Success, published status, positive metrics	Warm Green
`--tek-green-light`	`#E8F4EF`	Profile expertise tags, follow states	Light Green
`--tek-cream`	`#FAF7F0`	Page body background, splash bg	Cream
`--tek-cream-dark`	`#F4EFE6`	Panels, secondary backgrounds, hover states	Dark Cream
`--tek-sand`	`#ebe3d2`	Footer background, stats bar, newsletter box	Sand
`--tek-line`	`#E4DDD2`	Borders, dividers, scrollbar thumb	Border Line
`--tek-ink`	`#263238`	Body text, headings primary	Ink
`--tek-muted`	`#5F6B6D`	Secondary text, metadata	Muted
`--tek-muted-light`	`#9AA5A6`	Tertiary text, hints, placeholders in auth	Muted Light
`--tek-white`	`#fff`	Card backgrounds, code blocks, contrast surfaces	White
`--tek-red`	`#C94C4C`	Error, danger, breaking news badge, delete	Red
`--tek-red-light`	`#C94C4D0A`	Error backgrounds, security alerts	Light Red

2.2 Article Type Color Map (Badges)

Type	Background	Text
تحلیل عمیق (Deep Analysis)	`#0F6B73`	`#fff`
راهنمای فنی (Technical Guide)	`#D49A2A`	`#fff`
داده‌نما (Data Visualization)	`#C76D4A`	`#fff`
پژوهش (Research)	`#2F8F6B`	`#fff`
راستی‌آزمایی‌شده (Fact-checked)	`#263238`	`#fff`
خبر فوری (Breaking News)	`#C94C4C`	`#fff`
خبر تحلیلی (Analytical News)	`#5F6B6D`	`#fff`
پرونده (Dossier)	`#20343A`	`#FAF7F0`
default	`#E4DDD2`	`#263238`

2.3 Status Color Map

Status	Color
منتشرشده (Published)	`#2F8F6B`
پیش‌نویس (Draft)	`#5F6B6D`
در انتظار بررسی (Pending Review)	`#D49A2A`
نیازمند اصلاح (Needs Revision)	`#C94C4C`
زمان‌بندی‌شده (Scheduled)	`#0F6B73`

2.4 Role Color Map

Role	Color	Persian Label
admin	`#C76D4A`	مدیر کل
editor	`#0F6B73`	سردبیر
writer	`#D49A2A`	نویسنده
reviewer	`#2F8F6B`	بازبین
reader	`#5F6B6D`	خواننده

2.5 Profile Page Color Palette (Terracotta-oriented)

The profile page (teknav-profile.jsx) uses its own color system separate from main site teal:

Token	Hex	Usage
terracotta	`#C45C3D`	Primary action color (buttons, links, accent bars)
orange	`#E07A3A`	Secondary accent (counters, analytics)
green	`#3A7D5E`	Success states, expertise tags, toggle on
greenLight	`#E8F4EF`	Background for green-tagged elements
ink	`#263238`	Headings, body text
muted	`#5F6B6D`	Secondary text, metadata
cream	`#FAF7F0`	Page background
panel	`#F4EFE6`	Card/panel background
line	`#E4DDD2`	Borders
white	`#fff`	Card surfaces

2.6 Category Colors

Category slug	Color	Usage
ai	`#0F6B73`	Teal — AI / هوش مصنوعی
data	`#2F8F6B`	Green — Data Science / علم داده
security	`#C62828`	Red — Security / امنیت سایبری
software	`#1565C0`	Blue — Software / نرم‌افزار
hardware	`#6A1B9A`	Purple — Hardware / سخت‌افزار
startup	`#C76D4A`	Terracotta — Startup / استارتاپ
future	`#D49A2A`	Gold — Future Tech / آینده فناوری

Category badges use the color at 18% opacity for background (via color + '18' CSS) and the full color for text, with a 30% opacity border.

2.7 Gradient Definitions

Hero background glows: radial-gradient(circle, rgba(15,107,115,0.10) 0%, transparent 70%) and radial-gradient(circle, rgba(196,106,77,0.10) 0%, transparent 70%)
Gold shimmer text: linear-gradient(90deg, #A8761B 0%, #D49A2A 30%, #F4C36A 50%, #D49A2A 70%, #A8761B 100%)
Footer accent bar: linear-gradient(90deg, transparent 0%, #0F6B73 25%, #D49A2A 50%, #C46A4D 75%, transparent 100%)
Streak widget: linear-gradient(135deg, #FF9D6C 0%, #C46A4D 100%)
Premium gate: linear-gradient(135deg, #0F2A2E 0%, #1A3A40 100%)
Gold button (auth): linear-gradient(135deg, #C8951C 0%, #D49A2A 60%, #C8951C 100%)
Profile banner: linear-gradient(145deg, #FDF6EE 0%, #F7EDE0 55%, #EEF5F0 100%)
Verdict section (comparison): #0F3540 (solid dark teal background)
Newsletter box: #ebe3d2 solid with radial gradient decorative circles
Category page: linear-gradient(135deg, ${cat.color}18 0%, #F4EFE6 100%)
CVE summary card: linear-gradient(135deg, #EEF6F7 0%, #E8F3F4 100%)
Article diagram card: linear-gradient(135deg, #F4EFE6 0%, #FFFFFF 100%)
TekRAG diagram card: #FAFAFA solid with #E8E8E8 border
Gold logo glow (auth): logoGlow animation shadow 0 10px 36px rgba(200,149,28,0.35) -> 0 10px 56px rgba(200,149,28,0.6)

3. TYPOGRAPHY

3.1 Font Families

Primary (Body) — Vazirmatn:

Font family: 'Vazirmatn', system-ui, sans-serif
6 weights loaded (all TrueType): 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold), 800 (ExtraBold), 900 (Black)
Source: /fonts/Vazirmatn-{weight}.ttf (self-hosted, zero CDN)
font-display: swap

Display (Headlines) — PelakFA:

Font family: 'PelakFA', 'Vazirmatn', sans-serif
2 weights loaded (WOFF): 700 (Bold), 800 (ExtraBold)
Source: /fonts/PelakFA-{weight}.woff (self-hosted, zero CDN)
Used for: hero headlines, auth brand wordmark, footer headings, section titles, stats numbers

TekRAG Article — Inter/Arial:

English article pages use 'Inter', Arial, sans-serif
Fallback for code blocks: 'Courier New', Consolas, monospace
LTR direction

3.2 Font Sizes & Line Heights

Body Scale:

Article content body: 16px, line-height 2.0
Body paragraph (general): 14px–16px
Small/secondary: 13px, line-height 1.7–1.9
X-small/metadata: 12px, line-height 1.7
Tiny/labels: 11px
Micro/badges: 10px–11px

Heading Scale:

Hero H1 (homepage): clamp(34px, 5.4vw, 58px), line-height 1.25, PelakFA 800
Article H1: clamp(22px, 4vw, 34px), line-height 1.4, Vazirmatn 900
Section H2 (homepage): 22px, Vazirmatn 800
Article H2: 22px, Vazirmatn 800
Article H3: 18px, Vazirmatn 700
Category page H1: clamp(28px, 5vw, 42px), Vazirmatn 900
Featured headline: 18px (homepage sidebar card), PelakFA 700
Article header subtitle: 18px, color #5F6B6D, weight 400

Article Content Typography:

Lead paragraph: 18px, line-height 2.05, color #1A3035, weight 500
Body: 16px, line-height 2.0, color #263238
Blockquote: 16px, line-height 2.0, color #263238
Code inline: 13px (code:not(pre code))
Code block: 13.5px, line-height 1.85, monospace

3.3 Font Weights Usage

Weight	CSS Variable	Usage
400 (Regular)	`font-weight: 400`	Body text, paragraphs, meta
500 (Medium)	`font-weight: 500`	Lead paragraphs, some labels
600 (SemiBold)	`font-weight: 600`	Buttons, category badges, active filters
700 (Bold)	`font-weight: 700`	H3, subheadings, type badges, filter chips
800 (ExtraBold)	`font-weight: 800`	H1, H2, section titles, stat values, article titles
900 (Black)	`font-weight: 900`	Hero headlines, prominent numbers, stat counters

3.4 CSS Class-Based Typography

Class	Properties
`.lead`	18px, line-height 2.05, #1A3035, weight 500, white bg, 1px #E4DDD2 border, 4px #0F6B73 right border, 12px radius, 20px 22px padding
`.gold-shimmer`	Animated gold gradient text via background-clip
`.ltr`	direction: ltr, unicode-bidi: isolate, display inline-block, font-family Inter/Arial

4. SPACING & LAYOUT

4.1 Page Structure

Page max-width: 1280px (centered with margin: 0 auto)
Article max-width content: 760px (Persian), 860px (TekRAG English)
Header height: 64px (desktop), 56px (mobile <560px)
Header padding: 0 24px (desktop), 0 14px (mobile)
Footer padding: 56px 24px 28px, margin-top 80px
Page padding-top: 64px (to offset fixed header)
Article list page padding-top: 80px
Auth page: split-panel, no header/footer

4.2 Grid Systems

Homepage grids:

Article cards: repeat(auto-fill, minmax(280px, 1fr)), gap 20px
Featured article: 1fr 1fr (two-column), min-height 280px
Authors: repeat(auto-fill, minmax(200px, 1fr)), gap 16px
Categories: repeat(auto-fill, minmax(200px, 1fr)), gap 12px
Stats bar: repeat(auto-fit, minmax(180px, 1fr)), gap 16px
Newsletter box: single column centered, max-width 520px for text

Article list grids:

Article rows: 1fr 140px (text column + thumbnail column), gap 24px
Related articles: repeat(auto-fill, minmax(220px, 1fr)), gap 16px

Article detail grids:

Layout: 200px 1fr (TOC sidebar + article content), gap 48px
Author box: flex row with gap 16px
Series nav banner: flex space-between, gap 12px

Search layout:

Two-column: 240px 1fr, gap 32px (filters sidebar + results)

Category page:

Hero: 1fr 320px, gap 40px (text + diagram)

Profile page:

Own profile grid: 1fr 1fr, gap 16px (reading history + followed writers)
Analytics cards: repeat(3, 1fr), gap 14px
Badges: horizontal flex wrap, gap 10px

Comparison page:

Cards: flex 1 1 300px, gap 20px
Use cases: flex 1 1 280px, gap 20px

Directory page:

Companies: repeat(auto-fill, minmax(280px, 1fr)), gap 16px

Stories list page:

Grid: repeat(auto-fill, minmax(160px, 1fr)), gap 14px
Aspect ratio: padding-bottom 177% (portrait phone ratio)

Footer grid:

repeat(auto-fit, minmax(200px, 1fr)), gap 40px (5 sections)

4.3 Border Radii

Radius	Usage
3px	Type badges (small), role badges
4px	Category badges, inline code blocks, tag pills
6px	Skill tags, progress bars, skeleton loaders, small buttons
8px	Buttons (pillBtn), inputs, cards, thumbnails, icons, search bar
10px	Article hero diagram, notification dropdown, comment cards, filter chips, search results
12px	Article cards, featured card, category cards, profile cards, modals, auth form sections, sendBeacon sections
14px	Stories cards
16px	Featured article (homepage hero), newsletter box, comparison verdict, premium gate, company profile header, reading list modal
18px	Forgot password modal
20px	Newsletter box, some containers
999px	Pill badges, verified expert badges, status badges with dot

4.4 Shadows

Shadow	Usage
`0 2px 12px rgba(0,0,0,0.04)`	Default article card
`0 8px 32px rgba(0,0,0,0.1)`	Article card hover
`0 4px 24px rgba(0,0,0,0.06)`	Featured article default
`0 12px 48px rgba(0,0,0,0.12)`	Featured article hover
`0 14px 40px rgba(15,42,46,0.08)`	Hero sidebar featured card
`0 6px 22px rgba(15,107,115,0.28)`	Hero CTA button
`0 10px 28px rgba(15,107,115,0.35)`	Hero CTA button hover
`0 4px 20px rgba(0,0,0,0.06)`	Category hero diagram card
`0 4px 20px rgba(196,92,61,0.15)`	Profile avatar
`0 20px 60px rgba(0,0,0,0.2)`	Confirm modal
`0 24px 64px rgba(0,0,0,0.22)`	Profile settings modal
`0 32px 80px rgba(0,0,0,0.24)`	Forgot password modal
`0 4px 16px rgba(200,149,28,0.22)`	Auth gold button
`0 12px 40px rgba(0,0,0,0.22)`	Push notification prompt
`0 4px 16px rgba(0,0,0,0.4)`	Quote sharer tooltip
`0 16px 44px rgba(0,0,0,0.14)`	Notification dropdown
`0 12px 34px rgba(15,42,46,0.06)`	Article diagram card
`0 4px 15px rgba(196,106,77,0.3)`	Streak widget
`-4px 0 24px rgba(0,0,0,0.12)`	Mobile drawer
`0 1px 4px rgba(0,0,0,0.05)`	Badge pills
`0 8px 24px rgba(0,0,0,0.08)`	Author card hover
`0 4px 16px rgba(0,0,0,0.09)`	Comparison card hover
`0 8px 24px rgba(0,0,0,0.07)`	Article mini-card hover (profile)
`0 4px 14px rgba(200,149,28,0.3)`	Auth mobile logo

4.5 Gap / Padding Scale

Value	Common Usage
4px	Very tight spacing (verified badge inner)
6px	Badge wrapping, tight element groups
8px	Button icon spacing, filter chip gaps, tight sections
10px	Toast gaps, icon-text spacing
12px	Element clusters, tag wrapping, breadcrumb gaps
14px	Input padding, button padding (auth)
16px	General card padding, section spacing, grid gaps
18px	Code block padding, some card padding
20px	Card padding, grid gaps, section padding
24px	Page padding, card padding, section margins
28px	Toast bottom position, large margins
32px	Page sections, padding, gaps
40px	Section spacing, hero padding
44px	Auth form padding (mobile)
48px	Section spacing, auth padding desktop
52px	Profile hero padding
56px	Footer padding top
60px	Empty state padding
64px	Header offset

5. COMPONENT DESIGN SYSTEM

5.1 Header

Structure:

Fixed position, top:0, right:0, left:0, z-index:100
Background: rgba(250,247,240,0.95) (scrolled) or rgba(250,247,240,0.85) (default), backdrop-filter blur(12px)
Border-bottom: 1px solid #E4DDD2 (scrolled) or transparent (default)
Height: 64px (desktop), 56px (<560px)
Inner max-width: 1280px, margin auto, padding 0 24px
Flex layout: logo | nav | actions

Navigation Items (desktop):

خانه (/) — Home
هوش مصنوعی (/category/ai) — AI
علم داده (/category/data) — Data Science
استارتاپ (/category/startup) — Startup
امنیت (/category/security) — Security
سخت‌افزار (/category/hardware) — Hardware
نرم‌افزار (/category/software) — Software
آینده فناوری (/category/future) — Future Tech
نویسندگان (/authors) — Authors

Nav Item States:

Default: font-size 13px, color #263238, weight 400
Active (current page): color #0F6B73, weight 700, border-bottom 2px solid #0F6B73
Hover: no explicit hover (transition on all 0.15s)

Action Buttons (right side):

Search icon: SVG circle + path magnifying glass, 18x18px, stroke #263238, strokeWidth 2
Notification bell: SVG bell icon, 18x18px, with badge counter (red #C94C4C circle, 17px min-width, 9px radius, white text)
Admin button: pillBtn, background #0F6B73, color #fff
Profile button: pillBtn, background #F4EFE6, color #263238, shows @username
Logout button: pillBtn, background #F4EFE6, color #263238
Login button: pillBtn, background #C46A4D, color #fff, text "ورود / ثبت‌نام"

Search Bar (expandable):

Toggled by search icon button
Full-width strip below header, borderTop 1px solid #E4DDD2, background #FAF7F0, padding 12px 24px
Form max-width 600px, centered, flex gap 8px
Input: inputStyle, placeholder "جستجو در مقاله‌ها، نویسندگان و دسته‌بندی‌ها..."
Submit button: pillBtn, background #0F6B73, color #fff, text "جستجو"

5.2 Mobile Drawer

Trigger: hamburger button (display:none on desktop, flex on <768px)
Overlay: fixed inset 0, background rgba(0,0,0,0.4)
Panel: absolute, top 0, right 0, width 280px (or min(84vw, 300px) on mobile), height 100%, background #FAF7F0, padding 24px, boxShadow '-4px 0 24px rgba(0,0,0,0.12)'
Close button: top-right, "✕"
Nav items: block, width 100%, text-align right, padding 12px 0, font-size 15px, borderBottom 1px solid #E4DDD2, active color #0F6B73
Auth section: follows same pattern as desktop action buttons but stacked vertically

5.3 Footer

Background: #ebe3d2, color #4A5A5C
Decorative top accent bar: 3px height, gradient across full width
5-column grid: About, Categories, Tools, Links, Contact
About section: "تکناو" headline 28px PelakFA 900, #0F2A2E; "TEKNAV" sub-label 11px, #C46A4D; description paragraph 13px, line-height 1.9
Link sections (Categories, Tools, Links): 14px headings in PelakFA, #0F2A2E; link items 13px, #5F6B6D with hover effect (color #0F6B73 + translateX(-4px) with transition)
Social buttons: background rgba(15,107,115,0.08), border 1px rgba(15,107,115,0.25), color #0F6B73, padding 7px 14px, radius 8px, 12px font weight 600; hover: fill #0F6B73, text white, translateY(-2px)
Support badges: "🌊 حامی خلیج فارس" and "🌐 حامی اینترنت آزاد برای عموم" — amber background, dark text
Bottom bar: copyright "© ۱۴۰۵ تکناو — تمام حقوق محفوظ است" + "Designed By Coaxys" with #0F6B73 accent

Structure: White card, 12px radius, 1px #E4DDD2 border, 24px padding, cursor pointer

opacity: 0 -> 1 with translateY(24px) -> 0 on intersection (staggered delay)
Hover: boxShadow 0 8px 32px rgba(0,0,0,0.1)

Sections (top to bottom):

Diagram thumbnail: 120px height, #F4EFE6 background, 8px radius, centered DiagramRenderer scaled to 0.7
- Continue-reading overlay: bottom progress bar (4px, #0F6B73) + badge ("ادامه مطالعه" in #0F6B73 bg, white text, 10px)
Badge row: TypeBadge + CategoryBadge (+ optional "Promoted Content" amber or "Premium" dark badge), flex wrap gap 6px
Title: 15px, weight 700, color #263238, line-height 1.5
Summary: 12px, color #5F6B6D, line-height 1.7, truncated to 100 chars
Meta row: flex space-between, 11px, color #5F6B6D
- Left: date
- Right: AuthorAvatar (22px) + read time + bookmark button

5.5 Featured Article (Homepage Hero)

Two-column grid: 1fr 1fr, min-height 280px
Left column: padding 32px (right side padding 24px)
- Badge row: TypeBadge + CategoryBadge
- Title: 22px, weight 800, #263238, line-height 1.5, Vazirmatn
- Summary: 14px, #5F6B6D, line-height 1.8
- Author line: borderTop 1px solid #E4DDD2, avatar 36px + name + date/read time
Right column: #F4EFE6 background, DiagramRenderer centered
Hover: boxShadow 0 12px 48px rgba(0,0,0,0.12)

5.6 Article Row (List — Article List Page)

Grid: 1fr 140px, gap 24px, padding 32px 0, borderBottom 1px solid #E4DDD2
Staggered entry animation (opacity 0->1, translateY 16px->0, 0.4s, idx*60ms delay)
Hover: opacity 0.85

Text column:

Meta: date · TypeBadge · CategoryBadge, 12px, gap 8px
Title: 19px, weight 800, #263238, line-height 1.5
Subtitle (optional): 14px, #0F6B73, weight 600
Author: 13px clickable name (#0F6B73 if clickable), specialty, separator ·
Summary: 14px, #5F6B6D, line-height 1.8
Stats: type, read time, views, tags (2 max, #F4EFE6 bg)

Thumbnail column:

140px wide, 120px height, #F4EFE6 bg, 10px radius
DiagramRenderer at 0.5 scale, 280px container width
Hidden on mobile (<560px)

5.7 Article Detail Page

Breadcrumb (sticky-aware):

Background #F4EFE6, borderBottom 1px solid #E4DDD2, padding 12px 24px
Font 12px, color #5F6B6D
Home › Category › Article title (truncated to 40 chars)
Clickable: home (#0F6B73), category (#0F6B73)

Layout:

Two-column: TOC sidebar (200px) + article content (max-width 760px), gap 48px
For TekRAG: TOC 220px + content max-width 860px, gap 52px, centered with justify-content center

Article Header:

badge row (TypeBadge, CategoryBadge, StatusBadge, optional promoted/premium)
H1: clamp(22px,4vw,34px), 900 weight, #263238, line-height 1.4
Subtitle: 18px, #5F6B6D, weight 400, line-height 1.6
Author byline: avatar 40px + clickable name + specialty + verified badge
Meta: date · type · read time · comment count, 13px, #5F6B6D
Action row: Save button + Share buttons (Telegram blue #0088cc, WhatsApp green #25D366, X dark #14171A, LinkedIn blue #0A66C2, copy link)

Author Box (bottom of article):

Background #F4EFE6, 12px radius, 24px padding
Flex row, gap 16px
Avatar 64px, author name 16px 700 weight, specialty #0F6B73, bio 13px
Social links as pill buttons (white bg, 1px #0F6B7330 border)

Reaction Row:

Label: "واکنش شما به این مقاله؟"
5 reaction buttons: مفید (thumbsUpIcon), عالی (starIcon), عاشقانه (heartIcon), داغ (flameIcon), تأمل‌برانگیز (lightbulbIcon)
Each: pillBtn style, bg #F4EFE6 / #0F6B7318 (active), border #E4DDD2 / #0F6B7340 (active)
TekRAG English: Helpful, Excellent, Valuable, Important, Thought-provoking

Series Banner (if part of series):

Background #0F6B7308, border 1px #0F6B7330, 10px radius, 16px padding
"سری مقاله" badge (#0F6B73 bg, white text) + series title + position
"مشاهده همه قسمت‌ها ←" link

Correction Notice:

Background #FFF8EA, border 1px #D49A2A55, 12px radius, 18px padding
Title "اصلاحیه و به‌روزرسانی" 14px, 900 weight

Tags:

Flex wrap, gap 8px
"برچسب‌ها:" label 12px, #5F6B6D
Tag buttons: bg #F4EFE6, border 1px #E4DDD2, 3px 10px padding, 4px radius, 12px, #5F6B6D

Related Articles:

Section below comments
H3 "مقاله‌های مرتبط" 18px 700
Grid of ArticleCard components

5.8 Table of Contents (Sidebar)

Sticky position, top 90px, max-height calc(100vh - 100px), overflow-y auto
Header: "فهرست مطالب" 11px, 700 weight, #5F6B6D, letter-spacing 0.08em
Headings: block items with padding
- H2 level: 5px 0, font-size 13px
- H3 level: 4px 12px, font-size 12px
Active state: color #0F6B73, weight 700, right border 2px solid #0F6B73
Inactive: color #5F6B6D, weight 400, transparent right border
Smooth scroll on click via scrollIntoView
Hidden on <900px screens

5.9 Article Content Styling (articleContentStyle)

font-size 16px, line-height 2.0, color #263238, direction rtl
H2: 22px, 800 weight, #263238, margin 40px 0 16px, padding-bottom 8px, border-bottom 2px solid #E4DDD2
H3: 18px, 700 weight, #263238, margin 32px 0 12px
P: margin 0 0 20px
.lead: 18px, line-height 2.05, #1A3035, 500 weight, white bg, border 1px #E4DDD2, right border 4px #0F6B73, 12px radius, 20px 22px padding
Blockquote: right border 4px #D49A2A, margin 28px 0, padding 16px 20px, bg #D49A2A0A, radius 0 8px 8px 0
.security-quote blockquote: right border color #C94C4D, bg #C94C4D08
Strong: color #263238, weight 700
Em: color #0F6B73, font-style normal, weight 600
Inline code: bg #0F6B7316, border 1px #0F6B7328, 4px radius, padding 1px 6px, font-size 13px, monospace, color #0A5060, direction ltr, unicode-bidi isolate, white-space nowrap
Pre/code blocks: bg #131F22, 10px radius, padding 40px 18px 18px, margin 24px 0, border 1px #1E3035, direction ltr; code: color #A8D8DC, font-size 13.5px, line-height 1.85, display block
.code-copy-btn: absolute top 8px left 10px, bg #1E3035, border 1px #2A4048, color #6AACB5, 6px radius, 4px 10px padding, 11px font; hover bg #2A4048 color #A8D8DC
[data-lang]::before: language label, absolute top 10px right 14px, 10px, color #4A7A82, monospace, uppercase
UL: padding-right 0, list-style none, grid gap 6px; li::before — "›" character, #0F6B73, 17px, position absolute right 4px
OL: counter-reset, padding-right 0, grid gap 8px; li::before — circled number, 24x24px, #0F6B73 bg, white text, 11px 800 weight
.ltr: direction ltr, unicode-bidi isolate, inline-block, Inter/Arial
.metric-grid: repeat(auto-fit, minmax(150px, 1fr)), gap 12px, margin 28px 0
.metric-card: white bg, 1px #E4DDD2, top border 3px #0F6B73, 10px radius, 14px 16px padding
.metric-value: #0F6B73, 900 weight, 22px
.metric-label: #5F6B6D, 12px
Table: width 100%, collapse borders, margin 24px 0, white bg, 1px #E4DDD2, 10px radius overflow hidden; th: bg #F4EFE6, 800 weight; td/th: 12px 14px padding, min-width 130px
.comparison-template: bg #fffaf1, border 1px #E4DDD2, 12px radius, 18px padding
.risk-box: bg #C46A4D10, border 1px #C46A4D35, 12px radius, 18px 22px padding
.agent-steps: counter-reset, gap 10px; .agent-step: white bg, 1px #E4DDD2, 10px radius, 14px 48px 14px 16px; ::before circled counter number
.article-diagram-card: bg gradient #F4EFE6→#FFFFFF, border 1px #E4DDD2, 12px radius, 22px padding, shadow 0 12px 34px rgba(15,42,46,0.06)
.insight-box: bg #0F6B7310, border 1px #0F6B7330, 10px radius, 20px 24px padding; .insight-title: 13px, #0F6B73, 700 weight
.footnote-box: bg #F4EFE6, 8px radius, 16px 20px padding, 12px, #5F6B6D
.cve-summary-card: gradient #EEF6F7→#E8F3F4, 1px rgba(15,107,115,0.18), 12px radius, 20px 24px padding, grid repeat(auto-fit, minmax(120px, 1fr))
.security-alert: bg #C94C4D0A, border 1px #C94C4D30, right border 4px #C94C4D, radius 0 10px 10px 0, 16px 20px padding; .alert-title: 13px, 800 weight, #C94C4D

5.10 Premium Content Gating

Article content with mask: maskImage: linear-gradient(to bottom, black 40%, transparent 100%), max-height 320px, overflow hidden
PremiumGateCard: gradient #0F2A2E→#1A3A40, 16px radius, 36px 32px padding, border 1px #D49A2A40
- Crown icon SVG
- Title "این مقاله برای اعضای ویژه" — 18px, #D49A2A, 700 weight
- Description text #A8B8BA
- Features list with checkmarks
- CTA button: gradient #D49A2A→#B8821E, white text, rounded
- Secondary login button: transparent, #A8B8BA border

5.11 Filter Bar (Article List)

Category chips: "همه" + 7 category buttons
Type chips: همه + تحلیل عمیق + راهنمای فنی + داده‌نما + پژوهش + راستی‌آزمایی‌شده + پرونده
Sort chips: جدیدترین / پربازدیدترین / زمان مطالعه
Chip states:
- Active: border 1.5px solid #0F6B73, bg #0F6B7312, color #0F6B73, weight 700
- Inactive: border 1px solid #E4DDD2, bg #fff, color #5F6B6D, weight 400
Border-radius 20px (pill), padding 5px 12px, 12px font
Scrollable horizontally on mobile (overflow-x auto, no scrollbar)

5.12 Newsletters

NewsletterForm: max-width 460px, centered
- Email input + TeknavCAP captcha + submit button (#C46A4D bg)
- Success state: checkmark ✓ + "عضویت شما ثبت شد!" in #2F8F6B

5.13 Empty State

Center alignment, padding 60px 24px
Large circle icon "◎" 48px, 0.4 opacity
Title 16px 600 weight, #263238
Subtitle 13px, #5F6B6D

5.14 Skeleton Loader

Multiple lines (configurable count), 16px default height
Gradient shimmer: linear-gradient(90deg, #E4DDD2 0%, #F4EFE6 50%, #E4DDD2 100%)
Background-size 200% 100%, shimmer animation 1.4s infinite
Last line: 60% width for visual variety
Inline @keyframes shimmer style tag for portability

Fixed inset 0, z-index 500, centered flex
Backdrop: rgba(0,0,0,0.45)
Card: bg #FAF7F0, 12px radius, 32px padding, max-width 380px, 90% width, boxShadow 0 20px 60px rgba(0,0,0,0.2)
Title "تأیید عملیات" 15px 600
Message 13px, #5F6B6D
Buttons: "انصراف" (#F4EFE6) + "تأیید و حذف" (#C94C4C) — right aligned, gap 10px
ESC key to close

5.16 Toast System

Fixed position: bottom 28px, left 24px, z-index 9999
Stack: column gap 10px
Each toast: padding 11px 20px, 8px radius, #fff text, 14px Vazirmatn
Backgrounds: success #2F8F6B, error #C94C4C, warning #D08A22
boxShadow 0 4px 20px rgba(0,0,0,0.18)
Animation: slideUp 0.25s ease
Auto-dismiss after 3200ms
Direction rtl

5.17 Reading Progress Bar

Fixed position: top 64px (below header), full-width, height 3px, z-index 99
Track: #E4DDD2
Fill: #0F6B73 with transition width 0.1s linear
Synced to (scrollTop / (scrollHeight - clientHeight)) * 100

5.18 Author Avatar

Circle, default size 40px
Background: author's color or #0F6B73 fallback
White text at size*0.32, weight 700
Shows initials (author.initials || name.slice(0,2))
Flex shrink 0

5.19 Badges

CategoryBadge:

Inline-block, padding 3px 10px (small: 2px 8px)
4px radius, 12px font (small: 11px), weight 600
Background: color + '18' opacity
Color: full hex or #0F6B73 default
Border: 1px solid (color + '30' opacity default)

TypeBadge:

Inline-block, padding 3px 10px (small: 2px 8px)
3px radius, 11px font (small: 10px), weight 700, letter-spacing 0.03em
Background + text from TYPE_COLORS map

StatusBadge:

Inline-flex, gap 5px, padding 3px 10px
20px radius (pill), 11px, weight 600
Dots: 6px circle, same color
Background: color + '15', border: color + '30'

RoleBadge:

Padding 2px 9px, 3px radius, 11px font, 700 weight
Background: color + '18', text color

RolePill (Profile page):

Inline-block, padding 3px 12px, 20px radius, 11px, 700 weight
Colors per role (terracotta for admin, green for editor, gold for writer, blue for reviewer, muted for reader)

5.20 Button Styles

iconBtnStyle:

background: none, border: none, cursor pointer
Flex center, 36x36px, 8px radius
Transition background 0.15s

pillBtn:

border: none, cursor pointer
padding 8px 18px, 8px radius
13px, Vazirmatn, weight 600
Transition all 0.15s
Inline-flex, gap 6px, align-items center

inputStyle:

border 1px solid #E4DDD2, 8px radius
padding 9px 14px, 13px font, Vazirmatn
background #fff, color #263238
outline none, width 100%

Auth goldBtn:

width 100%, padding 13px 0, 10px radius
Gold gradient background, #0F2A2E text
14px 700 weight, boxShadow 0 4px 16px rgba(200,149,28,0.22)
Loaded state: bg #E8E2D8, color #B0B8BA, cursor not-allowed, no shadow
CSS class .auth-gold-btn hover: opacity 0.91, translateY(-1px), stronger shadow

Auth oauthBtnStyle:

Flex center, gap 10px, width 100%
padding 11px 0, 10px radius
border 1.5px solid #E4DDD2, bg #fff
13px weight 600, color #1A2E30
CSS hover: border-color #C46A4D, bg #FFFCFB

Auth cancelBtn:

flex 1, padding 12px 0, border 1.5px solid #E4DDD2
10px radius, transparent bg
color #7B8C8E, 13px 600 weight

Gold Buttons (auth page):

class .auth-gold-btn: hover opacity 0.91, translateY(-1px), boxShadow 0 7px 22px rgba(200,149,28,0.38)
Disabled: cursor not-allowed

5.21 Input Fields

AuthInput component:

Label: 12px, 600 weight, color #7B8C8E (error: #C94C4C), margin-bottom 6px
Input wrapper: position relative
Input: border 1.5px #E4DDD2 (error: #C94C4C), 10px radius, padding 13px 16px (or 13px 16px 13px 46px with suffix), 14px, bg #FAFAF8, color #1A2E30
Focus: border-color #C8951C, bg #fff, boxShadow 0 0 0 3px rgba(200,149,28,0.1)
Suffix: absolute left 14px, top 50%, transform translateY(-50%), color #9AA5A6
Hint: 11px, color #9AA5A6
Error: 11px, color #C94C4C

PasswordStrength component:

5-segment bar: 3px height, 2px radius per segment, color varies by score (≤2: #C94C4C, 3: #D08A22, ≥4: #2F8F6B)
Chips: flex wrap, 10px font, 20px radius, 2px 8px padding
- Passed: bg rgba(47,143,107,0.09), color #2F8F6B, ✓ prefix
- Failed: bg #F2EFE9, color #9AA5A6, · prefix
Criteria: ۸+ کاراکتر, حرف کوچک, حرف بزرگ, عدد, نماد

6. ANIMATIONS & TRANSITIONS

6.1 Keyframe Animations

Name	Details	Usage
`fadeIn`	0→1 opacity	Generic fade-in
`slideUp`	translateY(20px) + opacity 0 → 0 + 1	Toast, modals, push prompts
`shimmer`	background-position 200%→-200%	Skeleton loader, diagram skeleton
`spin`	0→360deg rotate	Loading spinner
`float-y`	translateY(0)→(-6)→(0), 3s	Gold star, streak widget, word bubbles
`goldShimmer`	background-position -200%→200%, 5s linear	Gold shimmer text
`pulseRing`	boxShadow expand from 0 to 14px to 0, 2.2s	Live indicator dot, hero badge pulse
`heroReveal`	opacity 0→1, filter blur(6px)→0, translateY(18px)→0	Homepage hero elements (staggered 0.1s–1.35s delays)
`orbit`	0→360deg rotate	Auth brand panel outer/inner rings
`orbitR`	0→-360deg rotate	Auth brand panel middle ring
`tickerUp`	translateY(0)→(-50%), linear 22s	Auth brand topic ticker
`bgGrid`	background-position loop, 38s linear	Auth form grid background
`logoGlow`	boxShadow pulse, 4.5s ease-in-out	Auth logo glow
`fadeSlideUp`	opacity 0→1, translateY(16px)→0, 0.45s/0.25s	Auth cards and modals
`statReveal`	scale 0.75→1.05→1 + translateY, cubic-bezier	Brand panel stat numbers
`dividerExpand`	width 0→48px, opacity 0→1	Brand panel divider
`blink`	opacity 1→0.3→1	Cursor/indicator blink

6.2 Transition Timings

Duration	Easing	Usage
0.15s	ease	Button hovers, nav items, link colors, chip states, filter changes
0.18s	ease	Social button hovers, auth tab toggles, OAuth buttons
0.2s	ease	Card shadows, hero CTA, general hovers, icon buttons
0.22s	ease	Auth tab buttons
0.25s	ease, cubic-bezier(.2,.8,.2,1)	Lift-on-hover, toast entrance, hero-tilt
0.3s	linear/ease	Loading bar, scroll progress, header backdrop, card opacity
0.4s	cubic-bezier(.2,.8,.2,1)	Hero tilt, stagger article row entrance
0.5s	ease	Staggered card entrance (homepage)
0.6s	cubic-bezier(.2,.8,.2,1)	Hero reveal animations
0.7s	linear	Loading bar tick
0.8s–3.2s	various	Auth brand panel parallax, delayed animations
0.9s	cubic-bezier(.2,.8,.2,1)	Auth brand parallax glow

6.3 Hover Effects Summary

Cards: shadow elevation increase + translateY(-2px to -4px)
Buttons: background fill, opacity change, slight lift
Links: color change to #0F6B73, translateX(-4px) in footer
Featured card: parallax tilt (perspective 900px, rotateX/Y up to ±6deg)
Article rows: opacity 0.85
Category cards: background tint
Comparison/comany cards: shadow on hover
Story cards: scale(1.03) + shadow

7. HOMEPAGE LAYOUT (Detailed)

Structure in order (top to bottom):

Personalized Bar (logged-in only): background #F4EFE6, borderBottom 1px #E4DDD2, flex wrap
- StreakWidget: gradient orange, 8px 14px padding, 12px radius, white text, float-y animation
- ContinueReadingBar: dark #263238 bg, horizontal scroll of in-progress articles with progress bars
Hero Section: light bg #F4F1EC, min-height 560px
- Neural network Canvas background (32 nodes, teal/terracotta/green palette, pulsing connections up to 130px distance)
- Radial gradient glows + subtle grid overlay (48px squares, 4% opacity lines, masked radial)
- Tagline badge "روایت عمیق فناوری" with pulse dot
- H1 "درک عمیق‌تر" (PelakFA) + gold-shimmer "دنیای فناوری"
- Subtitle "تحلیل‌های علمی، تخصصی و مستقل..."
- CTA buttons: "مشاهده همه مقاله‌ها →" (teal, shadow) + "هوش مصنوعی" (terracotta outline)
- Featured card sidebar: white, 4px gold gradient left accent, "مقاله ویژه" label + title + author/type/read time
- Mouse parallax tilt effect on featured card
- SVG wave divider (#ebe3d2 fill) at bottom for transition
Stats Bar: bg #ebe3d2, 40px padding
- 4 stats: مقالات منتشرشده ۱۸۰+, نویسنده فعال ۳, خواننده ماهانه ۴۵۰۰۰+, میانگین زمان مطالعه ۸ دقیقه
- CountUp animation (cubic ease-out, 1400ms) with Persian digit formatting + thousands separator
- Gold (#A8761B) numbers in PelakFA 900, 30px
- Vertical dividers between items
Personalized Feed (logged-in): "پیشنهاد برای شما" section
Featured Article: "مقاله منتخب" — FeaturedArticle component (two-column layout)
Latest Articles: "تازه‌ترین خبرها" with "مشاهده همه ←" link — 6 ArticleCards in grid
Deep Analyses: "تحلیل‌های عمیق" — ArticleRowCompact list items
Popular: "محبوب‌ترین‌ها" — 4 ArticleCards in grid
Categories: "دسته‌بندی‌ها" — category cards with 3px colored right border, description, article count
Authors: "نویسندگان تکناو" — author cards with avatar 56px, name, specialty, article count
Newsletter: "عضو خبرنامه تکناو شوید" — sand box with radial glows, form

8. ARTICLE IMAGES & THUMBNAILS

8.1 Diagram System

Articles do NOT use photographic images. Instead, every article has a diagram field (string type identifier) that maps to a DiagramRenderer or LazyDiagram component. These are interactive SVG/Canvas-based diagrams rendered inline.

Diagram types observed:

"pipeline" — data/agent pipeline flow
"diagram-12" — architecture diagram
"cyber" — cybersecurity risk map
"orbit" — market movement diagram
Various category-specific diagrams per article

Thumbnail rendering:

Homepage ArticleCard: 120px height container, #F4EFE6 bg, DiagramRenderer scaled to 0.7
ArticleRow (list): 140px wide × 120px height, DiagramRenderer at 0.5 scale
ArticleRowCompact (homepage deep analysis): 80×80px thumbnail, 0.55 scale
Article hero diagram: full width, #F4EFE6 background, 12px radius, 24px padding

Hero diagram (article detail):

Placed below article header
Background #F4EFE6, 12px radius, 24px padding, 32px margin-bottom
Label "نمودار تعاملی — با موس روی عناصر بروید" in 11px, #5F6B6D
LazyDiagram loads on demand with lazy chunk loading

Diagram skeleton (loading):

100% width, min-height 120px
8px radius
Shimmer gradient: #ebe3d2 → #f4efe6 → #ebe3d2
shimmer animation 1.4s infinite

8.2 OG Images & Discover Hero

OG images generated at build time: /images/og/{slug}.jpg (1200×630px)
Optional ogImage field in article data for custom images
Discover Hero image (optional): displayed as <figure> with 1200×630 aspect ratio, borderRadius 12px, border 1px #E4DDD2, object-fit cover
Stories: article thumbnails use ogImage or /images/og/{slug}.jpg, shown at filter: brightness(0.55) with gradient overlay

8.3 Article Diagrams (Embedded Cards)

EmbeddedDiagramCard component: title + subtitle + LazyDiagram
Title: 13px (Persian) / 15px (English), 800 weight, #0F6B73
Subtitle: 12px, #5F6B6D, line-height 1.8
Card background: gradient #F4EFE6→#FFFFFF (Persian) or #FAFAFA solid (English)
Border: 1px #E4DDD2 (Persian) or #E8E8E8 (English)
Box-shadow: 0 12px 34px rgba(15,42,46,0.06) (Persian) or 0 2px 8px rgba(0,0,0,0.06) (English)

8.4 Quote Sharer Canvas Card

Canvas 1080×1080px
Dark gradient background: #0C1E22 → #0F3540
Corner accent: #0F6B73 triangle (top-right, 220px)
Subtle grid overlay: 60px grid lines at 3% opacity white
Gold separator bar (#D49A2A): 5px wide, 80px tall, positioned at (80, 90)
Logo: "تکناو" in 32px 700 weight, right-aligned at (W-60, 80)
Tagline: "teknav.ir" in 16px, rgba(212,154,42,0.55), at (W-60, 106)
Large quotation mark: "«" in 280px, rgba(212,154,42,0.18), at (W-40, 420)
Quote text: white, 38px, 400 weight, RTL, wrapped at W-160 max width, 60px line-height
Gold divider line after quote: 2px height, W-160 width
Article title: rgba(255,255,255,0.65), 26px, 400 weight
Author name: rgba(255,255,255,0.45), 22px, 400 weight, positioned at bottom

8.5 Story Pages (Generated Static)

Full-screen CSS scroll-snap story format
Each story has OG + Twitter Card meta
Keyboard navigation supported
Generated at build time into dist/stories/{slug}/index.html

8.6 Comparison Page Images

No images — purely text-based comparison with pros/cons lists
Item names in colored badges: first item green (#E8F5E9 bg, #2E7D32 text), second item orange (#FFF3E0 bg, #E65100 text)
Arrow separator: "در برابر" text in #5F6B6D

8.7 Company Directory Images

No images — company cards are text-only
Company name, description (truncated 100 chars), tech stack tags, verified badge

9. AUTH PAGE DESIGN

9.1 Layout

Full-viewport flex split: form column (flex:1) + brand panel (440px fixed width)
Hidden at <880px (brand panel disappears, mobile logo appears)
The auth-layout has class auth-layout (flex, min-height 100vh, rtl)

9.2 Form Column

Background #FAF7F0 with subtle grid pattern (terracotta lines at 2.8% opacity, 52px grid size, bgGrid animation 38s)
Radial vignette: radial-gradient(ellipse 80% 55% at 50% 5%, transparent → rgba(250,247,240,0.55))
Content max-width 420px, centered, position relative z-index 1
Heading with vertical accent bar (3.5px width, 30px height, gradient #C46A4D→rgba(200,149,28,0.6))
Time-based greeting in PelakFA 800, 25px, #0F2A2E

Background #EDE9E2, 12px radius, 4px padding
Two tabs: "ورود" (login) / "ثبت‌نام" (signup)
Active tab: white bg, boxShadow 0 1px 6px rgba(0,0,0,0.1), color #0F2A2E
Inactive: transparent bg, color #9AA5A6
CSS class .auth-tab-btn: flex 1, padding 10px 0, 13px 700 weight, 9px radius, transition 0.22s

Fields: identifier (email/username) + password + CAPTCHA
Identifier: AuthInput with label "نام کاربری یا ایمیل", placeholder "@username یا you@example.com", LTR direction
Password: AuthInput with label "رمز عبور", show/hide toggle (EyeIcon), "فراموشی رمز؟" link
CAPTCHA: TeknavCAP custom component
Submit: goldBtn "ورود به حساب" with loading spinner
Forgot password link opens modal

Fields: name + username + email/phone toggle + password + confirm password
Name: "نام نمایشی", placeholder "مثال: علی رضایی"
Username: English only, LTR, auto-lowercase, hint shows profile URL
Identifier toggle: email/phone pill switcher (#F0EDE6 bg, white active pill)
Password: EyeIcon toggle + PasswordStrength bar
Confirm: checkmark icon when match (#2F8F6B)
CAPTCHA + terms acceptance
Submit: goldBtn "ایجاد حساب کاربری"

9.6 OAuth Buttons Section

Conditionally rendered based on GET /api/v1/auth/oauth/providers
Google button with SVG icon: "ادامه با Google"
GitHub button with SVG icon: "ادامه با GitHub"
Divider: "یا با ایمیل" text between lines
CSS hover: border-color #C46A4D, bg #FFFCFB

9.7 Brand Panel (Dark Theme)

Background: #0B2226 (very dark teal)
Giant watermark letter "ت" in 360px, 1.6% opacity, PelakFA
Dot grid pattern (white dots at 3.2% opacity, 28px spacing)
Parallax gold glow that follows cursor (300px circle, 14% opacity gold, transforms with mouse position)
Terracotta accent glow at bottom-left
Floating Persian tech words (هوش مصنوعی, ابر, امنیت, متن‌باز, پردازش, شبکه, داده, زیرساخت) at various positions with float-y animation
Orbital logo: 100px square with dashed/solid orbiting rings (44s, 17s, 9s durations), gold gradient center with "ت" character
Wordmark "تکناو" in 50px PelakFA, #FAF7F0, with "TEKNAV · IR" sub-label
Animated divider line (gold gradient, expands from center)
Tagline: "آخرین دانش فناوری، اول به فارسی"
Live stats count-up: ۲۳+ مقاله, ۸۴۰۰ خواننده, ۶ سری
Topic ticker: scrolling text list (8 Persian tech topics, 22s linear infinite, masked with linear gradient)
Online pulse indicator: green dot with pulseRing animation + "در حال حاضر آنلاین"

Centered modal with dark overlay (rgba(11,34,38,0.62))
Card: bg #FAF7F0, 18px radius, 36px 32px padding, max-width 400px
"بازیابی رمز عبور" title in PelakFA 18px 800, #1A2E30
Email input + cancel/send buttons
Sent state: message + close button

10. PROFILE PAGE DESIGN

10.1 Color Identity

Uses terracotta-centric palette (P object): terracotta #C45C3D, orange #E07A3A, green #3A7D5E. No teal on this page.

10.2 Hero Banner

Gradient background: #FDF6EE → #F7EDE0 → #EEF5F0
Border-bottom 1px #E4DDD2
3 decorative circles (terracotta 6%, green 7%, gold 6% opacity)
Flex layout: avatar (110px) + info + action buttons
AvatarUpload component: 110px circle, 3px terracotta border, boxShadow, upload overlay at bottom
Name with verified expert badge (terracotta outline pill), RolePill
@username in terracotta 13px 600
Bio paragraph 14px, #5F6B6D, max-width 580px
Education/credential info with graduation cap and scroll icons
Expertise tags: green bg, green text, 20px radius pills
Join date, article count, follower count, social links (X, LinkedIn)
Follow/Edit buttons

10.3 Stats Bar (Writers)

Background #F4EFE6 panel
3 stats with left borders: articles count, total views, total reactions
Numbers in 22px 900 weight, terracotta

10.4 Badges Section

White background, border-bottom
Badge pills: gradient #F4EFE6→#FDFAF5, 1px #E4DDD2, 24px radius, 6px 14px padding, 12px 600 weight
8 types: ai_reader, data_reader, security_reader, hardware_reader, weekly_streak, monthly_streak, power_reader, early_adopter

10.5 Content Tabs

"مقالات" (Articles) and "آمار و تحلیل" (Analytics) tabs
Underline style: active has 2px terracotta bottom border
Tab content: grid of ArticleMiniCard components (4px terracotta left border, white bg, title 15px 700, summary, views/reactions)

10.6 Writer Analytics Tab

3 summary cards: total views, reactions, comments — each with 3px colored top border
30-day sparkline SVG chart (terracotta line, 12% opacity fill)
Per-article table with columns: title, views (terracotta), reactions (orange), comments, saved

Full-screen overlay (rgba 0,0,0,0.5)
Card: cream bg, 16px radius, 32px padding, max-width 440px, max-height 88vh scrollable
Sections: display name, username (conditionally editable), bio, password change, email verification, phone OTP, 2FA toggle, browser push notifications, notification preferences (expandable table)

10.8 Notification Preferences Table

Expandable panel (toggle open/close)
Table with columns: event type | push | email | sms
Events: comment, comment_reply, new_article, review_approved, review_revision, review_rejected, review_submitted, system
Toggle buttons: 28×16px pill switches, green (#3A7D5E) when enabled, #CCC when disabled

11. COMPARISON PAGES

11.1 ComparisonsListPage

Breadcrumb: تکناو › مقایسه‌ها
Title "مقایسه‌های فنی تکناو" — 32px 800 weight, #0C1E22
Search input (max-width 400px)
Comparison cards: white bg, 12px radius, 1px #E4DDD2, 20px 24px padding, hover shadow
- Category badge colored pill (#fff text)
- Title 17px 700
- Item names: green pill (item1) + "در برابر" (in #5F6B6D) + orange pill (item2)
- Arrow "←" in #0F6B73

11.2 ComparisonPage (Detail)

Card layout: flex wrap, two cards side by side
Each card: white bg, 12px radius, 24px padding, border 1px #E4DDD2, flex 1 1 300px
- Item name: 20px 700, #0F6B73
- Summary paragraph 14px
- Pros (✓ green #2E7D32) and Cons (✗ red #C62828)
Use cases: sand bg (#F8F5F0), flex row of two white bordered cards with item name labels
Verdict: dark teal bg (#0F3540), #D49A2A title, white text
Related glossary: white cards with teal border, term + english
Related articles: white bordered cards with title + summary + arrow
Vote widget (ComparisonVoteBar): localStorage-based, two-button layout for item1 vs item2

12. SEARCH PAGE

Advanced search layout: 240px sidebar + results area
Filters: category (dropdown), author (dropdown), content type (dropdown), clear button
Search results: fade-in staggered animation, 24px padding, borderBottom
Highlighted query terms: <mark> with background #D49A2A30, #263238 text

13. LOADING & ERROR STATES

13.1 Splash Loader (index.html)

Full-screen fixed overlay (#FAF7F0 bg, z-index 9999)
"تکناو" in 36px 900 weight, #0F6B73
"TEKNAV" sub-label 11px, #5F6B6D, letter-spacing 0.15em
Loading bar: 40px wide, 3px height, #E4DDD2 track, #0F6B73 fill, transition width 0.3s
Auto-progress from 0→90% (8% every 120ms), then jumps to 100% on JS mount
window.__doneLoading() called from main.jsx after React renders
Class .hidden sets opacity 0 + pointer-events none (0.4s transition)
HTML class js toggles visibility; no-JS fallback shows static content

13.2 Static Fallback (no-JS)

Class .static-fallback: min-height 100vh, bg #FAF7F0, color #263238, rtl, padding 72px 20px, Vazirmatn
Max-width 920px inner container
Eyebrow "رسانه فارسی تحلیل فناوری" — #C45C3D, 13px, 800 weight
H1 in #0F6B73, 36px
H2 in #263238, 22px
Lead paragraph #5F6B6D
Link list items: border 1px #E4DDD2, 8px radius, white bg, 12px 14px padding; links in #C45C3D 800 weight
Section "تکناو چیست؟" with explanatory paragraph

13.3 Network/API Error States

Article 404: EmptyState + back-to-articles button
Comments error: EmptyState "نظرها از API دریافت نشد"
Article not found: EmptyState + return button
Search empty: EmptyState "نتیجه‌ای یافت نشد"
Category not found: EmptyState "دسته‌بندی یافت نشد"
Profile not found: EmptyState "پروفایل یافت نشد"
Comparison not found: EmptyState
Company not found: EmptyState
Generic loading: "در حال بارگذاری…" or SkeletonLoader

13.4 Auth Error States

401: invalid credentials message
429: rate limit warning
403: account suspended message
400: captcha invalid + refresh instruction
409: duplicate email/phone/username
Rate limit: "تعداد تلاش‌های ناموفق از حد مجاز گذشت"
OAuth errors: red error box (#FEF2F2 bg, #991B1B text) with "account_suspended" handling

14.1 Architecture

Separate Vite entry: embed.html → src/embed.jsx → src/widgets/
URL routing: /embed/{type}/{slug}
Types: glossary, article-card, company
Third-party loader: public/embed-loader.js — creates sandboxed <iframe>

14.2 GlossaryWidget

Background: light cream (#FAF7F0-like) with dark mode support (prefers-color-scheme)
Header: term name in gold (#D49A2A) + English translation
Summary paragraph
Collapsible FAQs (<details>/<summary>)
Footer link to Teknav
Auto-resize via ResizeObserver + postMessage

14.3 ArticleCardWidget

Hero image (OG image or generated) with category badge overlay
Title + summary (120 chars)
Author name + "خواندن در تکناو ↗" link
Dark mode via static check
Auto-resize

14.4 CompanyWidget

Loading skeleton during fetch
Header: company logo placeholder, name, verified badge, category pill
Description paragraph
Tech stack tags
Footer: website link + "پروفایل در تکناو ↗"
Empty/not-found state
Dark mode + auto-resize

14.5 embed-loader.js (Third-party Script)

Self-contained, pasted as <script> tag
Reads data-type, data-slug, data-width attributes
Creates sandboxed <iframe> pointing to www.teknav.ir/embed/{type}/{slug}
Attributes: loading="lazy", sandbox="allow-scripts allow-popups allow-same-origin", title
Listens for postMessage resize events
Default width 480px

15. PWA & INSTALL

15.1 Service Worker

Registered in index.html inline script on window.load
Service worker file: /service-worker.js
Push notification subscription via PushManager API + VAPID keys

15.2 InstallPrompt

Listens for beforeinstallprompt event
Prompt card: fixed bottom-100 right-24, z-index 500
White bg, 16px 20px padding, 16px radius, 1px #E4DDD2, boxShadow
"نصب اپلیکیشن تکناو" title, "دسترسی سریع‌تر و آفلاین به مقالات" subtitle
Actions: "بعداً" (outline) + "نصب" (teal filled)

15.3 PushNotificationPrompt

Appears if PushManager available, permission default, not dismissed
Card: dark bg #1A2E30, 16px radius, 14px 18px padding, 1px #2A4045 border
Bell icon + "اعلان‌های مرورگر" title + subtitle
Actions: "بعداً" (dark outline) + "فعال‌سازی" (terracotta)
Records dismissal to localStorage

15.4 Manifest

/manifest.json
Theme color: #0F6B73
Icons: 512x512 PNG favicon

16. RESPONSIVE DESIGN

16.1 Breakpoints

Breakpoint	Name	Changes
≤768px	Tablet	Desktop nav hidden, mobile hamburger shown, article layout to single column
≤640px	Small tablet	Featured article to single column, stats to 2-column, categories to 2-column, article cards to single column
≤560px	Phone	Aggressive mobile adjustments (see below)
≤880px	Auth break	Brand panel hidden, mobile logo appears
≤900px	Article break	TOC sidebar hidden, article layout single column

16.2 Mobile Specifics (<560px)

Header:

Height 56px, padding 14px
Action buttons smaller (38px min-height, 9px radius, 12px font)
Auth actions hidden

Homepage:

Hero padding 44px 16px 48px
Sections padding 28px
Featured card: single column
Stats: 2-column grid
Article grid: single column
Categories grid: 2-column
Authors grid: 2-column
Newsletter padding 36px 20px

Article List:

Padding-top 64px
Row single column (no thumbnail)
Title 17px, summary 13px
Horizontal scroll for meta/chips (no scrollbar)
Filter chips: nowrap, scrollable

Article Detail:

Padding 22px 16px, single column
Title clamp(20px,5vw,23px)
Summary 14px
Byline flex-wrap
Author box: wrap
Lead: 16px, padding 16px

Code blocks:

Smaller padding, max-width calc(100vw - 32px)
Inline code: word-break break-all

CVE cards: single column, no left border (bottom border instead)

Tables: overflow-x auto, font-size 13px, smaller cell padding

Metric grid: single column

All content elements: max-width: 100vw, overflow-wrap: break-word, hyphens: auto for headings

Pre/table: overflow-x: auto with scrollbar hidden (webkit)

16.3 Responsive Grid Patterns

Most grids use auto-fill/auto-fit with minmax() for intrinsic responsiveness. The @media queries override specific grid templates at breakpoints where the intrinsic sizing doesn't produce ideal layouts.

17. TEKRAG ENGLISH ARTICLE SYSTEM

17.1 Overview

The TekRAG article (slug: tekrag-persian-data-centric-rag-benchmark) is an English-language research article rendered with LTR layout and distinct styling.

17.2 Differences from Persian Articles

dir="ltr", textAlign: left
Font family: 'Inter', Arial, sans-serif (instead of Vazirmatn)
Layout: TOC 220px + content 860px, centered (instead of 200px + 760px)
Article type badges in English labels
Reaction labels: "Helpful", "Excellent", "Valuable", "Important", "Thought-provoking"
Comment section: English labels throughout
Author box: "AUTHOR" label, English bio
Breadcrumb: "Home" instead of "خانه"
Diagram cards: #FAFAFA bg, #E8E8E8 border
Blockquote: left border instead of right, 0 8px 8px 0 → 8px 0 0 8px
Lists: padding-left instead of padding-right, bullet/ counter positions flipped
H2/H3/p/li/td/th: direction ltr, text-align left
Code blocks: pre-existing LTR (no change)

18. DIAGRAM & DATA VISUALIZATION

18.1 DiagramRenderer / LazyDiagram

Renders interactive diagrams (SVG/Canvas-based)
Types include: pipeline, diagram-12, cyber, orbit, category-specific diagrams
Compact mode for thumbnails (scaled down)
Lazy loaded via React.lazy + Suspense
Animations: pulsing nodes, flowing connections, hover tooltips
Canvas-based for neural network (HeroBackground on homepage)

18.2 Sparkline (Profile)

Inline SVG polyline
120×36px default (500×56px for analytics)
Configurable color (default #C45C3D)
Area fill at 12% opacity
Stroke width 2px, round line caps

18.3 Comparison Vote Bar

localStorage-based voting
Two buttons for item1 vs item2
No API calls — purely client-side persistence

19. ICON SYSTEM

19.1 SVG Icons

React components render inline SVG elements for social media logos:

Google (4-color Google logo SVG)
GitHub (black GitHub icon SVG)
Telegram (blue paper plane, #0088cc)
WhatsApp (green phone, #25D366)
X/Twitter (dark #14171A)
LinkedIn (blue #0A66C2)

19.2 CSS Mask Icons

Class .tek-icon pattern for SVG icons from asset files:

CSS: display: inline-block, width: 1em, height: 1em, background-color: currentColor, mask: var(--i) center / contain no-repeat
Used via: <span class="tek-icon" style={{ '--i': url(${icon}) }} aria-hidden />
Inherits text color, scales with font size
Used icons: crown, thumbs-up, star, heart, flame, lightbulb, eye, graduation-cap, scroll, bot, chart-column, lock, laptop, zap, library, sprout, medal, share-2, clipboard-copy

19.3 Text-Based Icons

"✕" for close buttons
"✦" decorative star
"◉" bullet/metric icon
"›" list bullet and breadcrumb separator
"←" / "→" directional arrows
"▲" upvote indicator
"✓" checkmark (success)
"✗" cross (failure)
"⊕" plus/save
"♡" heart (reaction)
"●" dot (reaction)
"?" thinking reaction
"◎" empty state icon
"🔥" fire emoji (streak widget)
"🔔" bell emoji (push prompt)
"✉" mail emoji (newsletter)

20. MISCELLANEOUS DESIGN PATTERNS

20.1 Scrollbar Styling

Width: 6px (both axes)
Track: #FAF7F0
Thumb: #E4DDD2 with 3px radius
Thumb hover: #5F6B6D
Mobile: scrollbar-width none for horizontal scroll containers

20.2 Focus Styles

All interactive elements: outline: 2px solid #0F6B73, outline-offset: 2px on :focus-visible

20.3 Selection

Browser default selection styling (not customized in CSS)
QuoteSharer intercepts for 20–400 character selections within article container

Consistent across all content pages: Home › Section › Current
Home and section links in #0F6B73, clickable
Current page in #263238 or #5F6B6D, truncated with ellipsis if long
Separator: "›" character (not / or >)
Typically in a #F4EFE6 strip with borderBottom

20.5 Premium/Membership Upsell

Premium badge: dark bg #0F2A2E, gold text #D49A2A, "Premium" label
Premium gating: mask gradient on article content + PremiumGateCard
Membership page at /membership
Membership success at /membership/success

20.6 Promoted Content

Amber label: bg #FFF4D8, color #8A5A00, border 1px #D49A2A55
Labeled "Promoted Content" in 10-11px 800 weight

20.7 Fact-checking & Correction

Correction notice: amber bg, gold border, title "اصلاحیه و به‌روزرسانی"
Fact-checked date shown on articles and comparison pages
Fact-checked articles can have TypeBadge "راستی‌آزمایی‌شده"

20.8 Count-Up Number Formatting

Persian digits: ۰۱۲۳۴۵۶۷۸۹
Thousands separator: ٬ (Persian comma, U+066C)
Animation: cubic ease-out (power of 3), configurable duration (default 1400ms for stats)
Rendered via toLocaleString('fa-IR') for standard formatting

20.9 LTR Embeddings

Code blocks: always LTR (direction: ltr, text-align: left)
English text in Persian articles: wrapped in .ltr spans
Email/password fields in auth: LTR with left-aligned text
Metric values: LTR-safe (numbers)
TekRAG article: entire page LTR

20.10 Toast Accessibility

Fixed bottom-left in viewport (not blocking RTL content)
Auto-dismiss after 3.2 seconds
Color-coded by type (green success, red error, amber warning)

All modals use rgba(0,0,0,0.45) or darker for overlay
Auth modals: rgba(11,34,38,0.62) (coordinated with dark brand)
Clicking backdrop closes modal
ESC key closes most modals
Modal card z-index: 500-700 range

20.12 Accessibility Features

aria-label on all icon buttons and nav sections
aria-current="page" on active nav items
role="banner" on header, role="contentinfo" on footer, role="navigation" on nav
role="dialog", aria-modal="true" on modals
role="search" on search forms
aria-expanded on expandable elements
Focus-visible outlines on all interactive elements
Semantic HTML: <article>, <section>, <nav>, <header>, <footer>, <main>, <aside>, <figure>, <time>

21. FILE & ARCHITECTURE SUMMARY

21.1 Module Responsibilities

File	Primary Role	Design Significance
`index.html`	HTML shell, SEO meta, JSON-LD, splash loader, static fallback	First paint, branding, loading state
`src/main.jsx`	Vite entry, global CSS import, splash dismissal	Startup flow
`src/styles/global.css`	Fonts, reset, animations, RTL base, utilities, mobile overrides	Core visual foundation
`teknav-app.jsx`	Router, provider stack, error tracking	App shell, provider nesting
`teknav-ui.jsx`	Shared UI: Header, Footer, auth, nav, badges, toasts, modals, prompts	Consistent component library
`teknav-home.jsx`	Homepage layout, hero, stats, cards, author section	First impression
`teknav-articles.jsx`	Article list, detail, comments, Q&A, TOC, diagrams, reactions	Core reading experience
`teknav-pages.jsx`	All secondary pages (search, category, glossary, comparisons, etc.)	Content discovery
`teknav-auth.jsx`	Login/signup page, brand panel, OAuth, password reset	Auth UX
`teknav-profile.jsx`	User profile, settings, analytics, badges, history	User identity
`teknav-data.js`	Static seed data (articles, authors, categories, comparisons, companies)	Content reference
`teknav-store.js`	Legacy localStorage store (auth stubbed)	Legacy state
`src/lib/api.js`	fetch wrapper with CSRF, versioning, typed errors	Transport layer
`src/lib/content-api.js`	Public content API, in-memory article cache, fallback data	Data fetching
`src/lib/admin-api.js`	Admin/writer CRUD API	Content management
`src/lib/engagement-api.js`	Comments, reactions, history, push, notifications, follows	Social features
`src/lib/seo.jsx`	Dynamic JSON-LD + meta injection	SEO optimization
`src/lib/TeknavCAP.jsx`	Custom CAPTCHA widget	Security UX
`src/components/QuoteSharer.jsx`	Canvas quote card generator	Social sharing
`src/components/lazy-diagram.jsx`	Lazy-loaded diagram renderer	Visual content
`src/widgets/`	Embeddable widgets (glossary, article, company)	Third-party embed
`src/embed.jsx`	Widget iframe bootstrapper	Second Vite entry
`public/embed-loader.js`	Third-party iframe injection script	Embed distribution
`vite.config.js`	Build config, proxy, code splitting	Build architecture

22. COMPLETE COLOR REFERENCES (Every Hex)

#0F6B73   — Primary teal (brand, buttons, links, active states)
#0F2A2E   — Dark teal (premium bg, headings, auth bg)
#C46A4D   — Terracotta (login btn, auth accents, profile primary)
#C45C3D   — Profile terracotta (dark variant for profile page)
#D49A2A   — Gold (shimmer, badges, premium, brand panel)
#A8761B   — Dark gold (gradient endpoint)
#C8951C   — Auth gold (button gradient, brand accents)
#F4C36A   — Light gold (gradient midpoint)
#2F8F6B   — Green (success, published, positive)
#3A7D5E   — Profile green
#FAF7F0   — Cream (body bg, splash bg)
#F4EFE6   — Dark cream (panels, secondary surfaces)
#E4DDD2   — Border line
#ebe3d2   — Sand (footer, stats bar)
#263238   — Ink (body text, headings)
#5F6B6D   — Muted (secondary text)
#9AA5A6   — Muted light (hints, placeholders)
#C94C4C   — Red (error, danger, delete)
#B8821E   — Dark gold (premium btn gradient)
#20343A   — Dark dossier badge bg
#7B8C8E   — Muted teal (auth labels)
#1A2E30   — Dark auth input text
#0B2226   — Auth brand panel bg
#EDE9E2   — Auth tab bar bg
#F0EDE6   — Auth signup toggle bg
#E8E2D8   — Auth gold disabled bg
#B0B8BA   — Auth gold disabled text
#E07A3A   — Profile orange accent
#E8F4EF   — Light green (expertise tags)
#A87A10   — Gold dark (writer role text)
#5566AA   — Blue (reviewer role text)
#0C1E22   — Near black (comparison page headings, quote bg)
#0F3540   — Dark teal (verdict section bg, quote card bottom)
#131F22   — Code block bg
#1E3035   — Code block border
#2A4048   — Code copy btn border/hover
#A8D8DC   — Code text
#6AACB5   — Code copy btn text
#4A7A82   - Code language label
#0A5060   - Inline code text
#1A3035   - Lead paragraph text
#0F2A2E08 — Footer section headings
#1A3A40   - Premium gate gradient end
#A8B8BA   - Premium gate description
#D08A22   - Warning toast
#FF9D6C   - Streak widget gradient start
#C46A4D   - Streak widget gradient end
#1565C0   - Software category blue
#6A1B9A   - Hardware category purple
#C62828   - Security category red
#FFF4D8   - Promoted content bg
#8A5A00   - Promoted content text
#2E7D32   - Comparison item1 green text
#E65100   - Comparison item2 orange text
#E8F5E9   - Comparison item1 green bg
#FFF3E0   - Comparison item2 orange bg
#F8F5F0   - Comparison use cases sand bg
#FFF8EA   - Correction notice amber bg
#FFFCFB   - OAuth btn hover bg
#0F3540   - Comparison verdict section
#C0392B   - CVE critical score
#1A7A50   - CVE patched status
#FEF2F2   - Auth OAuth error bg
#991B1B   - Auth OAuth error text
#FCA5A5   - Auth OAuth error border
#C4C8C9   - Auth footer text
#FAFAFA   - TekRAG diagram card bg
#E8E8E8   - TekRAG diagram card border
#F8F5F0   - Company profile claim bg
#2A4045   - Push prompt border
#8AA5A8   - Push prompt subtitle
#C8D8DA   - Premium gate feature text
#F5F5DC   - Not used
#0F6B7318 — Teal at 18% opacity (category badge bg)
#0F6B7312 — Teal at 12% opacity (active filter chip bg)
#0F6B7308 — Teal at 8% opacity (light hover tints)
#0F6B7330 — Teal at 30% opacity (category badge border)
#0F6B7340 — Teal at 40% opacity (active saved btn border)
#D49A2A55 — Gold at 55% opacity (promoted content border)
#D49A2A40 — Gold at 40% opacity (premium gate border)
#D49A2A0A — Gold at 10% opacity (blockquote bg)
#D49A2A30 — Gold at 30% opacity (search highlight)
#C46A4D10 — Terracotta at 10% opacity (risk box bg)
#C46A4D35 — Terracotta at 35% opacity (risk box border)
#C94C4D0A — Red at 10% opacity (security alert bg)
#C94C4D30 — Red at 30% opacity (security alert border)
#C46A4D18 — Terracotta at 18% opacity
#0F6B7310 — Teal at 10% opacity (insight box bg)
#E4DDD230 — Border at 30% opacity (status badges)
#F4EFE680 — Cream at 80% opacity (comment reply bg)

23.1 SPA Routing Implementation

No React Router. Custom SPA router via NavProvider context:

Reads window.location.pathname as primary source
Legacy fallback: window.location.hash (strips #/ prefix, rewrites to pathname)
Strips trailing slashes (except root /)
Exposes { page, navigate } via useNav() hook
navigate(to): calls history.pushState(null, '', to), updates state, scrolls to top
Listens to popstate and hashchange events
getCurrentPage() always returns clean path + search string

23.2 All Routes (37 total)

Route	Component	Notes
`/`	HomePage	Featured, latest, popular, categories, authors, newsletter
`/en`	EnglishHomePage	English landing
`/articles`	ArticleListPage	Filtered, paginated, searchable
`/article/:slug`	ArticleDetail	Full article reader
`/category/:slug`	CategoryPage	Category hero + filtered articles
`/tag/:tag`	TagPage	Tag-filtered articles
`/glossary/:slug`	GlossaryPage	Term definition
`/topics/:slug`	TopicHubPage	Topic hub with series/authors
`/series/:slug`	SeriesPage	Series article list
`/newsletter`	NewsletterArchivePage	Archived campaigns
`/newsletter/:slug`	NewsletterIssuePage	Single issue display
`/search`	SearchPage	Advanced search with sidebar filters
`/search?q=...`	SearchPage	Pre-filled query
`/authors`	AuthorsListPage	Author directory
`/author/:slug`	AuthorProfilePage	Redirects to `/profile/@:username`
`/profile/@:username`	UserProfilePage	Public profile
`/login`	LoginPage	Auth (login/signup)
`/admin`	AdminPanel	Full CMS
`/writer`	WriterWorkspace	Writer dashboard
`/privacy`	PrivacyPolicyPage	Legal
`/terms`	TermsOfUsePage	Legal
`/about`	AboutPage	Static
`/contact`	ContactPage	Contact form
`/compare`	ComparisonsListPage	Comparisons directory
`/compare/:slug`	ComparisonPage	Side-by-side comparison
`/stories`	StoriesListPage	Story cards grid
`/directory`	DirectoryListPage	Company directory
`/directory/:slug`	CompanyProfilePage	Company detail
`/tools`	ToolsPage	Tool listing
`/tools/nlp-normalizer`	NlpNormalizerPage	Client-side NLP tool
`/tools/rag-calculator`	RagCalculatorPage	RAG parameter calculator
`/tekrag-persian`	TekRagHubPage	Benchmark hub
`/jobs`	JobsPage	Job board
`/courses`	CoursesPage	Course catalog
`/membership`	MembershipPage	Premium subscription
`/membership/success`	MembershipSuccessPage	Post-payment

Routes excluded from Header/Footer: /admin, /login, /en

23.3 Page Transition Flow

All page transitions: instant (no router-level animation)
Card-level entrance: IntersectionObserver-based staggered reveals
Article list items: fadeIn + translateY with per-item delay
Hero elements: sequential heroReveal with increasing delays (0.1s, 0.35s, 0.6s, 0.85s, 1.1s, 1.35s)

24. INTERACTIVE COMPONENT STATE DIAGRAMS

24.1 NotificationBell

States: idle → loading → open → reading → closed
- idle: bell icon, no unread count shown
- loading: fetching GET /api/v1/auth/notifications?limit=20 on mount
- unread count: badge shows "N" in red circle (overflow: "9+")
- open: dropdown panel (320px, white, 12px radius, shadow)
- reading: clicking item → marks read via PATCH → navigates to article
- live: EventSource SSE stream `/api/v1/auth/notifications/stream` pushes new notifications
- closed: clicking outside or toggling button

24.2 ReadingListModal

States: closed → loading → loaded → adding → done
- closed: hidden
- loading: SkeletonLoader 3 lines during GET /api/v1/auth/lists
- loaded: list of reading list cards (white bg, 1px border, 10px radius)
- adding: POST to add article to list → toast "به لیست اضافه شد"
- create: form at bottom to create new list + auto-add
- done: modal closes via onDone callback

24.3 StreakWidget

States: hidden (no user/no streak) → visible
- null/0 streak: returns null (hidden)
- streak > 0: gradient orange card with fire emoji
- "N روز مطالعه متوالی!" in bold, "به یادگیری ادامه دهید" subtitle
- float-y animation infinite
- boxShadow 0 4px 15px rgba(196,106,77,0.3)

24.4 ContinueReadingBar

States: hidden → visible
- null/empty continueReading: returns null
- populated: dark bar (#263238) with horizontal scroll of in-progress articles
- each article: title (truncated) + 2px progress bar (teal fill on dark track)
- label "ادامه مطالعه:" in orange (#FF9D6C)
- clicking navigates to article

24.5 Article Reactions

States: idle → active (per reaction type)
- idle: button bg #F4EFE6, text #263238, border #E4DDD2
- active: bg #0F6B7318, text #0F6B73, border #0F6B7340
- toggle: POST /api/v1/articles/:id/reactions → res.active boolean
- 5 types: helpful, star, heart, fire, thinking (Persian) / helpful, excellent, valuable, important, thought-provoking (English)
- toast confirmation on each toggle

24.6 Article Save

States: unsaved → saved → list-modal
- unsaved: ⊕ ذخیره, bg #F4EFE6
- saved: ✓ ذخیره‌شده, bg #0F6B7318, text #0F6B73
- toggle: POST /api/v1/articles/:id/save → sets listModalOpen true
- English: Save / Saved

24.7 Comment Upvote & Like

Comment upvote:
- idle: ▲ N, bg #F4EFE6
- active: ▲ N, bg #0F6B7318, color #0F6B73, border #0F6B7340
- POST /api/v1/comments/:id/upvote → res.upvoted + res.upvoteCount

Comment like:
- idle: transparent bg, #5F6B6D text
- active: bg #0F6B7318, color #0F6B73, border #0F6B7330
- POST /api/v1/comments/:id/like → res.liked + res.likeCount

24.8 Follow Writer

States: idle → following
- idle: "دنبال کردن" button, terracotta bg 8%, terracotta border
- following: "دنبال می‌کنی", green bg, green text, green border
- toggle: POST/DELETE /api/v1/writers/:username/follow
- count updates in UI

24.9 Comment Flag

States: idle → flagged
- click → POST /api/v1/comments/:id/flag
- toast "گزارش نظر ثبت شد"
- requires authentication
- triggers comment list refresh

24.10 Push Notification Toggle (Profile)

States: disabled → enabled → blocked
- disabled: show "فعال‌سازی" button (green bg)
- enabled: show "غیرفعال‌سازی" button (white bg, terracotta text)
- blocked: show info message (notification permission denied)
- transition: requestPermission → PushManager.subscribe → POST /api/v1/auth/push/subscribe

24.11 OAuth Flow

States: start → redirect → callback → error/success
1. Click "ادامه با Google/GitHub"
2. `window.location.href = /api/v1/auth/oauth/{provider}/start`
3. Backend redirects to OAuth provider
4. Callback returns with hash fragment: `#?error={code}` or successful session
5. Error: shown in red box with specific message
6. Success: page reloads with authenticated user

25. FORM DESIGN DETAILS

Layout (top to bottom):
1. Identifier input (email or @username)
   - label: "نام کاربری یا ایمیل" (12px, 600, #7B8C8E)
   - placeholder: "@username یا you@example.com"
   - inputProps: { type: 'text', autocomplete: 'username', style: { direction: 'ltr', textAlign: 'left' } }

2. Password input
   - label: "رمز عبور" (same style)
   - "فراموشی رمز؟" link (right-aligned, 12px, underline, #9AA5A6, hover #C46A4D)
   - placeholder: "••••••••"
   - suffix: EyeIcon toggle (16x16 SVG, #9AA5A6)
   - autoComplete: 'current-password'

3. TeknavCAP captcha widget
   - onChange callback sets { captchaId, userSolution }

4. Submit button
   - goldBtn style (full-width, gold gradient, 13px padding, 10px radius)
   - Text: "ورود به حساب"
   - Loading: spinner (14px circle, 2px border, spin animation) + "در حال ورود..."
   - Disabled: opacity-based

5. Switch prompt
   - "حساب ندارید؟ ثبت‌نام کنید"
   - "ثبت‌نام کنید" is a link-style button (#C46A4D, underline, hover #C8951C)

Layout (top to bottom):
1. Name input
   - label: "نام نمایشی"
   - placeholder: "مثال: علی رضایی"
   - autoComplete: 'name'

2. Username input
   - label: "نام کاربری"
   - hint: "فقط حروف لاتین، عدد، نقطه و زیرخط" / shows "@username" preview
   - placeholder: "ali_rezaei"
   - auto-lowercase, strips @ prefix
   - LTR direction

3. Identifier toggle + input
   - Toggle: pill UI (#F0EDE6 bg, 8px radius, 3px padding)
     - "ایمیل" (active: white bg, shadow)
     - "موبایل" (active: white bg, shadow)
   - Email: type='email', placeholder "you@example.com"
   - Phone: type='tel', placeholder "09123456789"

4. Password input
   - label: "رمز عبور"
   - placeholder: "••••••••"
   - EyeIcon toggle
   - autoComplete: 'new-password'
   - PasswordStrength component shown when password non-empty

5. Confirm password input
   - label: "تکرار رمز عبور"
   - placeholder: "••••••••"
   - Error when mismatch: "رمزها تطابق ندارند" (#C94C4C)
   - Suffix checkmark when match (SVG polyline, #2F8F6B)

6. TeknavCAP captcha

7. Terms acceptance text
   - "با ثبت‌نام، شرایط استفاده و سیاست حریم خصوصی تکناو را می‌پذیرید."
   - Terms/privacy links: #C46A4D, underline

8. Submit button
   - goldBtn style
   - Text: "ایجاد حساب کاربری"
   - Loading: spinner + "در حال ثبت‌نام..."

1. Email input (LTR, direction ltr)
   - label: "ایمیل"
   - placeholder: "you@example.com"

2. Action buttons
   - "انصراف" (cancelBtn style: border 1.5px #E4DDD2, transparent bg, #7B8C8E)
   - "ارسال لینک" (goldBtn style, flex:1)
   - Loading: disabled with "…"

3. Sent state
   - Message: "اگر این ایمیل در سیستم ثبت شده باشد، لینک بازنشانی برای شما ارسال خواهد شد."
   - CTA: "بستن" (goldBtn)

25.4 CAPTCHA (TeknavCAP)

Custom CAPTCHA widget (not reCAPTCHA)
Imported from src/lib/TeknavCAP.jsx
Usage pattern: <TeknavCAP onChange={setCaptcha} />
Callback receives { captchaId, userSolution }

25.5 Contact Form (teknav-pages.jsx)

Uses raw contact-form handling; no backend contact route is currently registered in backend/src/routes/
Not a component exported from teknav-ui — embedded within ContactPage

25.6 Job Submission Form (teknav-pages.jsx)

contentApi.submitJob(payload) — POST /api/v1/jobs
Used within JobsPage component

States: idle → submitting → done
- idle: email input + CAPTCHA + submit button
- submitting: validation checks (email format, captcha) → contentApi.subscribeNewsletter()
- done: checkmark + "عضویت شما ثبت شد!" + "جدیدترین مقاله‌های تکناو را در ایمیل دریافت خواهید کرد."

Error states:
- Invalid email: "لطفاً یک ایمیل معتبر وارد کنید"
- No captcha: "لطفاً کد امنیتی را وارد کنید"
- 429: "تعداد درخواست‌ها از حد مجاز گذشت"
- 400: "کد امنیتی نامعتبر است"
- Generic: "خطا در ثبت عضویت خبرنامه"
- Already subscribed: "این ایمیل قبلاً ثبت شده است" (warning toast)

26. ADMIN PANEL DESIGN (src/admin/index.js)

26.1 Overview

Re-exported from teknav-admin.jsx via export { AdminPanel, WriterWorkspace, actionBtn } from './src/admin/index.js'
Hidden from Header/Footer (excluded via isAdmin check)
Role-based access: admin, editor, writer, reviewer
All data from backend API only (no mock data)

26.2 Notable Features (from Phase 9/10 context)

Article editor with SEO fields (title, metaDescription, keywords, ogTitle, ogDescription)
Comparison article template
Correction submission workflow
Verified author management
Review workflow (approval/revision/rejection)
Newsletter campaign builder
Article series management
Media library with upload
Analytics dashboards (writer, editor, admin)

27. TOOLS PAGES DESIGN

27.1 ToolsPage

Tool listing with cards
Links to /tools/nlp-normalizer and /tools/rag-calculator

27.2 NlpNormalizerPage

Client-side Persian text normalization tool
No server API calls — pure JavaScript processing
Input text area → normalized output

27.3 RagCalculatorPage

RAG (Retrieval-Augmented Generation) parameter calculator
Chunk size, overlap, token simulation
Client-side numeric computation

27.4 TekRagHubPage

Academic benchmark hub for Persian RAG evaluation
Links to HuggingFace, Zenodo, GitHub
Citation information
Static content from TeknavData + TekRAG article

28.1 NewsletterArchivePage

Lists all past newsletter campaigns
Each item: title + date + preview
Click navigates to /newsletter/:slug

28.2 NewsletterIssuePage

Renders newsletter HTML body
Full content display (not truncated)

29. JOBS & COURSES PAGES

29.1 JobsPage

Job listing fetched from contentApi.listJobs()
Job submission form via contentApi.submitJob()
Each job card: title, company, location, type, description

29.2 CoursesPage

Course catalog from contentApi.listCourses()
Cards with course title, instructor, duration, description

29.3 MembershipPage

Premium subscription/payment page
API calls: raw fetch('/api/v1/membership/*')

30. COMMENT SYSTEM DESIGN

30.1 Comment List

Threaded comments: parent + replies with indentation
Each comment: white bg card, 10px radius, 14px padding, 1px #E4DDD2
Header: author name (#0F6B73 if clickable, #263238 if not) + @username + time
Actions: upvote ▲ N, report, like/reply buttons
Replies: bg #FAF7F0, 2px #E4DDD2 right border, 0 8px 8px 0 radius

30.2 Comment Form

Textarea (min-height 90px, resizable vertical) + character counter N/1000
Submit: pillBtn teal bg
Reply state: shows "پاسخ به {name}" with cancel button (#C94C4C)
Unauthenticated: info box "برای نظر دادن وارد شوید." (#F4EFE6 bg)

30.3 Q&A Section

Similar structure to comments
Questions listed with answer thread
Reply button per question
Answered questions have indented answer cards

30.4 Comment Moderation (Admin)

Bulk moderation via admin API
Flag/unflag, delete, approve
Flagged comments listing

31. READING LIST SYSTEM

Article-level access via bookmark button
Lists all user's reading lists
Create new list inline
Add article to existing list
Auto-add to new list on creation

31.2 Reading List CRUD (Backend API)

GET /api/v1/auth/lists — list all
POST /api/v1/auth/lists — create
DELETE /api/v1/auth/lists/:id — delete
POST /api/v1/auth/lists/:id/items — add article
DELETE /api/v1/auth/lists/:id/items/:itemId — remove
PUT /api/v1/auth/lists/:id/reorder — reorder items

32. FOLLOW SYSTEM

32.1 Writer Follows

Follow/unfollow toggle on profile page
Button state: "دنبال کردن" (terracotta outline) / "دنبال می‌کنی" (green filled)
Follower count display
Following list on own profile

32.2 Topic Follows

Topic hubs have follow/unfollow toggle
POST /api/v1/topics/:slug/follow
DELETE /api/v1/topics/:slug/follow
Guest push notification subscription per topic

32.3 Following List (Profile)

Shown on own profile page
List of followed writers with name + @username
Click navigates to writer's profile

33. READING HISTORY

33.1 History Recording

Scroll-based: on article detail page, listens to scroll
Triggers at >5% scroll progress
POST /api/v1/auth/history with articleId + progress (0–1 ratio)
Recorded once per scroll event

33.2 History Display (Profile)

Own profile: shows last 5 items in sidebar
Each item: article title (truncated) + time
"پاک کردن تاریخچه" button with confirm dialog
DELETE /api/v1/auth/history to clear all

34. NOTIFICATION SYSTEM

34.1 Notification Types

Type	Trigger	Display Text
`comment`	User comments on your article	"{name} برای مقاله شما نظر گذاشت"
`comment_reply`	User replies to your comment	"{name} به نظر شما پاسخ داد"
`new_article`	Writer you follow publishes	"مقاله تازه از {name}"
`review_approved`	Editor approves revision	UI-specific
`review_revision`	Editor requests revision	UI-specific
`review_rejected`	Editor rejects article	UI-specific
`review_submitted`	Writer submits for review	UI-specific
`system`	System notifications	UI-specific

34.2 Notification Display

Bell icon in header with unread count badge
Dropdown: max 20 items, scrollable
Unread items: bg #F4EFE6, weight 900
Read items: bg #fff, weight 600
All items: title + article title (payload)
"خواندن همه" button marks all read
Empty state: "اعلانی وجود ندارد."

34.3 Live Notifications

EventSource SSE: /api/v1/auth/notifications/stream
Pushes new notifications in real-time
Reconnects on error (automatic EventSource behavior)

34.4 Notification Preferences

Per-event-type + per-channel (push, email, SMS)
Toggle UI: 28×16px pill switches
Green (#3A7D5E) for enabled, #CCC for disabled

35. SEO & META DESIGN

35.1 SeoManager Component

Returns null (no visible output)
Injects meta tags, JSON-LD, link tags into <head>
Re-runs on route change via useNav().page
Fetches page data async with static fallback

35.2 JSON-LD Schemas

Schema type	Page types	Key fields
Organization / NewsMediaOrganization	Global	name, url, logo, sameAs, contactPoint
WebSite	Global	name, url, inLanguage, searchAction
NewsArticle / TechArticle / ScholarlyArticle	Article detail	headline, datePublished, dateModified, author, image, wordCount, timeRequired
CollectionPage	Category, Tag, Topic, Series, Author archive	name, description, numberOfItems
ProfilePage	Author / @username profile	mainEntity (Person)
Person	Author, article author	name, knowsAbout, alumniOf, credential, interactionStatistic
BreadcrumbList	All content pages	itemListElement (home → section → page)
ItemList	Tagged/topic article lists	itemListElement (up to 15 articles)
DefinedTerm	Glossary pages	name, description, sameAs (wikidata)
FAQPage	Articles with FAQs, glossary, topic hubs	mainEntity (Question/Answer)
CreativeWork	Benchmark articles	identifier, version, citationUrls, researchQuestions
ImageObject	Logo, article images	url, width, height
SpeakableSpecification	Article, WebPage	xpath for title/description

35.3 Meta Tags

Tag	Pattern
`description`	Category/article/author description
`keywords`	Article keywords or category keywords
`robots`	`index,follow,max-image-preview:large`
`canonical`	Full URL with www
`alternate hreflang`	fa-IR
`og:locale`	fa_IR
`og:type`	article / website
`og:title`	Page title
`og:description`	Page description
`og:url`	Full canonical URL
`og:image`	/images/og/{slug}.jpg or default
`og:image:width/height`	1200 / 630
`twitter:card`	summary_large_image
`twitter:title/description/image`	Same as OG

35.4 Academic Citation Meta

For scholarly articles (TekRAG benchmark):

citation_title, citation_author, citation_publication_date
citation_online_date, citation_pdf_url

36. ENGAGEMENT ANALYTICS

36.1 Tracked Events

Share clicks: POST /api/v1/analytics/events with { type: 'share_clicked', articleId, topic, metadata: { channel } }
Channels: telegram, whatsapp, x, linkedin, copy, quote_card (via QuoteSharer)

36.2 Writer Analytics

Overview: total views, reactions, comments
30-day views sparkline (date + view count pairs)
Per-article table: title, views, reactions, comments, saved
Separate endpoint for overview vs per-article data

36.3 Article View Tracking

contentApi.trackEvent() for custom events
Reading progress recorded via history API
Scroll depth tracked as continuous progress (0–1)

37. ERROR TRACKING (Self-hosted)

37.1 Client Error Capture

window.onerror + window.onunhandledrejection listeners in InnerApp
Payload: { message, source, stack, path, userAgent }
Sent via navigator.sendBeacon('/api/v1/errors', ...) or fetch POST /api/v1/errors
Uses keepalive: true for reliability during page unload

37.2 Admin Error Viewing

adminApi.getClientErrors() — list captured errors
Available in admin dashboard

38. CDN & ASSET CONSTRAINTS

38.1 Zero CDN Policy

All fonts: self-hosted at /fonts/Vazirmatn-*.ttf and /fonts/PelakFA-*.woff
All icons: local SVG files in src/assets/icons/
All images: generated at build time into dist/ (OG images, article pages)
Build script rejects any CDN URL in dist/

38.2 Build-time Asset Pipeline

seo:sitemap → og:images → vite build → check-no-cdn → check-responsive
→ generate-article-pages → generate-web-stories → generate-comparison-pages
→ generate-company-pages → generate-en-page → generate-author-pages
→ generate-semantic-pages → compress-dist

38.3 SVG Inline Policy

SVGs under src/assets/icons/ are never base64-inlined
Custom assetsInlineLimit function returns false for icons directory
Ensures CSS mask property works with real file URLs

38.4 Code Splitting

Vendor chunks: vendor-react, vendor-three, vendor-d3, vendor
Separate entry: embed.html for widget iframes
Lazy-loaded: LazyDiagram component via React.lazy

39. COMPLETE NAV ITEM SPECIFICATION

39.1 Desktop Header Nav (9 items)

Order (left to right in RTL — visually displayed right to left):

#	Label	Path	Active State Color	Weight
1	خانه	/	#0F6B73	700
2	هوش مصنوعی	/category/ai	#0F6B73	700
3	علم داده	/category/data	#0F6B73	700
4	استارتاپ	/category/startup	#0F6B73	700
5	امنیت	/category/security	#0F6B73	700
6	سخت‌افزار	/category/hardware	#0F6B73	700
7	نرم‌افزار	/category/software	#0F6B73	700
8	آینده فناوری	/category/future	#0F6B73	700
9	نویسندگان	/authors	#0F6B73	700

Inactive: color #263238, weight 400

39.2 Mobile Drawer Nav (9 items + auth)

Same items stacked vertically
Additional: auth buttons at bottom (profile, admin, logout OR login)

39.3 Footer Link Sections

Categories (5):

هوش مصنوعی
علم داده
امنیت سایبری
سخت‌افزار
نرم‌افزار

Tools (5):

مقایسه‌های فنی → /compare
استوری‌ها → /stories
دایرکتوری شرکت‌ها → /directory
واژگان تخصصی → /glossary/ai
ابزارهای تکناو → /tools

Teknav (5):

درباره ما → /about
تیم نویسندگان → /authors
قوانین حریم خصوصی → /privacy
شرایط استفاده → /terms
تماس با ما → /contact

توییتر (Twitter/X)
لینکدین (LinkedIn)
تلگرام (Telegram)

Hover: background fill #0F6B73, text white, translateY(-2px)

40. HTML ELEMENT REFERENCE

40.1 Inline Style Element Injection

Multiple components inject <style> tags for scoped CSS:

teknav-ui.jsx Header: nav responsiveness, animations, scrollbar styling
teknav-home.jsx: heroReveal keyframe, responsive grid overrides
teknav-articles.jsx: article CSS (~100 lines), TOC responsive, TekRAG overrides
teknav-auth.jsx: AuthStyles component (~60 lines)
teknav-pages.jsx: search layout responsive
teknav-profile.jsx: profile responsive

40.2 Dynamic Head Injection (SeoManager)

Direct DOM manipulation: document.querySelector('head') append/remove
Meta tags: create/update via document.querySelector('meta[name="..."]')
JSON-LD: create/remove <script type="application/ld+json">
Link tags: canonical, alternate, RSS
HTML attributes: lang, dir on <html>

40.3 IntersectionObserver Usage

Used in 7 locations:

Homepage ArticleCard: stagger entry animation (threshold 0.1)
Homepage CountUp: trigger counter animation (threshold 0.4)
ArticleRow: stagger entry (threshold 0.05)
TableOfContents: active heading tracking (rootMargin -20% 0% -70% 0%)
useViewportPrefetch: prefetch article data (rootMargin 100px)
GlossaryPage: similar card animation
SearchPage results: fade-in staggered

41. TEXT DIRECTION & LOCALIZATION

41.1 RTL Conventions

direction: rtl on all major containers
text-align: right for body text
padding-right / padding-left for list bullets
border-right for blockquotes, accent bars
marginInlineStart / marginInlineEnd for logical properties
insetInlineEnd for absolute positioning
Footer hover: transformOrigin: 'right', translateX(-4px) (moves left = forward in RTL)
Breadcrumb: right-to-left order (Home › Section › Page)
Share buttons: borderInlineStart for left separator
Auth form: padding-right for vertical accent bar

41.2 LTR Overrides

Code blocks: force LTR
English text spans: .ltr class with unicode-bidi: isolate
TekRAG article: entire page LTR
Email/URL/username inputs: LTR with left alignment
Numbers: always LTR-safe (Persian digit formatting via locale)

41.3 Mixed Content

Persian articles may contain English terms, code, URLs
English terms rendered inline via unicode-bidi: isolate
Code blocks always LTR regardless of article direction

42. PERSIAN DIGIT FORMATTING

42.1 Conversion Pattern

// Persian digit mapping
'۰۱۲۳۴۵۶۷۸۹'[d]  // for each digit character

// Full formatting
toLocaleString('fa-IR')
  → adds Persian digits
  → adds Persian thousands separator (٬)
  → adds Persian decimal separator (/)

42.2 Usage Locations

Article view counts
Comment counts
Reaction counts
Stats bar numbers
Profile analytics numbers
Search result counts
Category article counts
Reading time
Unread notification badge

43. BUILD & DEVELOPMENT CONFIGURATION

43.1 Vite Dev Server

Port: 3009
Host: 0.0.0.0
Strict port
Proxy: /api → http://localhost:3010 (Fastify backend)

43.2 Vite Build

Target: es2020
Sourcemaps: true
CSS code split: true
Manual chunks: vendor-react, vendor-three, vendor-d3, vendor
Two entry points: index.html (SPA) + embed.html (widgets)
Output: dist/ directory

43.3 Preview Server

Port: 4173 (Vite default preview)
Host: 0.0.0.0

43.4 Environment Variables

VITE_API_BASE — override API base URL (e.g., http://localhost:3010 in dev)

44. DATA FLOW DESIGN PATTERNS

44.1 Fallback Architecture

App renders → use seed data (TeknavData) as initial state
            → fetch API data in useEffect
            → on success: replace state with API data
            → on failure: keep seed data (silent)
            → loading state: use SkeletonLoader

44.2 Caching Strategy

In-memory: articleCache Map in content-api.js for getArticle(slug)
- First call: fetch + store in Map
- Subsequent calls: return cached value
LocalStorage: teknav-store.js for legacy data (version-checked, auto-purge)
No Service Worker article cache mentioned beyond push notifications

44.3 Optimistic Updates

Comment upvote/like: immediately flip UI state, let API confirm
Follow/unfollow: update UI immediately, revert on error
Article save: toggle UI immediately

45. RESPONSIVE IMAGE & DIAGRAM BEHAVIOR

45.1 Diagram Scaling

Homepage cards: 0.7 scale
Article list rows: 0.5 scale
Full article: 1.0 scale (full-size interactive)
Mobile: overflow-x auto for wide diagrams

45.2 Image Loading

loading="lazy" for story images, OG images
loading="eager" for hero discover image
fetchPriority="high" for hero/hero images
decoding="async" for all images

45.3 Aspect Ratios

OG images: 1200×630 (≈1.9:1)
Discover hero: 1200/630 aspect-ratio via aspectRatio: '1200 / 630'
Story cards: padding-bottom 177% (9:16 portrait)
Quote card: 1080×1080 (1:1 square)

46. COMPONENT SIZE SPECIFICATIONS

46.1 Fixed Dimensions

Element	Width	Height	Notes
Header	100%	64px (desktop), 56px (mobile)	Fixed/sticky
Footer	100%	auto	Padding 56px 24px 28px
Reading progress	100%	3px	Fixed top:64px
Article card thumbnail	100%	120px	Overflow hidden
Article row thumbnail	140px	120px	Fixed aspect
Compact row thumbnail	80px	80px	Fixed square
Avatar (article)	40px	40px	Circle
Avatar (featured)	36px	36px	Circle
Avatar (author section)	56px	56px	Circle
Avatar (article author box)	64px	64px	Circle
Avatar (profile page)	110px	110px	Circle
AuthorAvatar default	40px	40px	Configurable via size prop
Streak widget	auto	auto	8px 14px padding
Toast container	auto	auto	Fixed bottom:28 left:24
Notification badge	min 17px	17px	Red circle
Loading bar	40px	3px	Splash screen
Verification status dot	6px	6px	Circle
Login/Register btn	auto	auto	8px 18px padding
Scrollbar	6px	6px	Both axes

46.2 Minimum Dimensions

Element	Min	Notes
Search input	200px	Newsletter form
Comparison card	300px	flex-basis
Use case card	280px	flex-basis
Article content	760px max	No minimum
Auth form content	420px max	No minimum
Category diagram	320px	flex-basis
Mobile drawer	280px / 84vw	Which is smaller

47. CARD & PANEL BACKGROUND VARIATIONS

Surface	Background	Border	Radius	Usage
White card	`#fff`	1px `#E4DDD2`	12px	ArticleCard, category cards, comment cards
Cream panel	`#F4EFE6`	none	0	Stats bar, article breadcrumb, search filter bar
Sand panel	`#ebe3d2`	none	0	Footer, newsletter box
Light sidebar card	`#fff`	1px `#E4DDD2`	16px	Hero featured card
Diagram container	`#F4EFE6`	none	8/12px	Thumbnails, hero diagram
Insight box	`#0F6B7310`	1px `#0F6B7330`	10px	Article content callouts
Risk box	`#C46A4D10`	1px `#C46A4D35`	12px	Article risk warnings
Code block	`#131F22`	1px `#1E3035`	10px	Code examples
Correction notice	`#FFF8EA`	1px `#D49A2A55`	12px	Article corrections
Security alert	`#C94C4D0A`	1px `#C94C4D30`	0/10px	Security warnings
Premium gate	`#0F2A2E`→`#1A3A40`	1px `#D49A2A40`	16px	Gated content
Verdict section	`#0F3540`	none	12px	Comparison verdict
Use cases panel	`#F8F5F0`	none	12px	Comparison use cases
Company profile	`#0C1E22`	none	16px	Company header
Notification dropdown	`#fff`	1px `#E4DDD2`	12px	Notification bell
Quote tooltip	`#0F3540`	1px `#D49A2A`	8px	Quote sharer
Series banner	`#0F6B7308`	1px `#0F6B7330`	10px	Article series nav
CVE summary	`#EEF6F7`→`#E8F3F4`	1px `rgba(15,107,115,0.18)`	12px	CVE data cards
Profile analytics card	`#fff`	1px `#E4DDD2`	12px	Profile summary cards
Own profile grid	`#fff`	1px `#E4DDD2`	12px	History + following
Comparison card	`#fff`	1px `#E4DDD2`	12px	Side-by-side compare
Story card overlay	gradient black→transparent	none	0	Bottom gradient on story images
Bubble word	`rgba(250,247,240,0.07)` border	20px radius	Auth brand panel

48. LOADING STATES (Per Component)

Component	Loading UI	Error UI	Empty UI
ArticleListPage	SkeletonLoader	Seed data fallback	EmptyState
ArticleDetail	Seed data initially	EmptyState + return btn	N/A
CategoryPage	Seed data initially	EmptyState	EmptyState
SearchPage	SkeletonLoader 5 lines	EmptyState	EmptyState "نتیجه‌ای یافت نشد"
Comments	"در حال بارگذاری نظرها..."	EmptyState	EmptyState "هنوز نظری ثبت نشده است"
Q&A	"در حال بارگذاری..."	Toast error	"هنوز پرسشی ثبت نشده است"
Profile	"در حال بارگذاری…"	EmptyState	EmptyState
NotificationBell	No loading state	Empty dropdown	"اعلانی وجود ندارد"
Reading lists	SkeletonLoader 3 lines	Toast error	Empty list (no text)
NewsletterForm	Submit button spinner	Toast error	N/A
Auth forms	Button spinner	Toast error	N/A
ForgotPassword	Button spinner	Toast error	Sent state message
GlossaryWidget	Static data only	N/A	N/A (slug lookup)
ArticleCardWidget	Static data only	N/A	N/A
CompanyWidget	SkeletonLoader	Empty/not-found state	Empty/not-found state
MembershipPage	Button opacity 0.7	Toast error	Non-logged-in redirect
MembershipSuccessPage	None (static)	N/A	N/A
NewsletterArchivePage	"در حال بارگذاری..."	Silent fail	EmptyState
NewsletterIssuePage	"در حال بارگذاری..."	EmptyState	EmptyState
SeriesPage	"در حال بارگذاری..."	EmptyState	EmptyState
JobsPage	None (initial [])	Silent fail	EmptyState
CoursesPage	None (initial [])	Silent fail	Empty grid
ContactPage	Button text change	Toast	Sent state card
NLP Normalizer	None (client-side)	N/A	N/A (always rendered)
RAG Calculator	None (client-side)	N/A	"هنوز نتیجه‌ای محاسبه نشده" (implicit)
Topics/Hubs	Static data	Silent fail	EmptyState
Glossary detail	Static data	EmptyState	EmptyState
Admin Dashboard	PanelState loading	PanelState error	PanelState empty
Admin ArticleList	PanelState loading	PanelState error	EmptyState "موردی مطابق فیلترها یافت نشد"
Admin ArticleEditor	N/A (form)	Validation errors	N/A
Admin Comments	PanelState loading	PanelState error	PanelState empty
Admin Users	PanelState loading	PanelState error	PanelState empty
Admin Media	PanelState loading	PanelState error	PanelState empty
Admin Categories	PanelState loading	PanelState error	PanelState empty
Admin Tags	PanelState loading	PanelState error	PanelState empty
Admin Analytics	PanelState loading	PanelState error	"هنوز داده‌ای ثبت نشده"
Admin Reviews	PanelState loading	PanelState error	"در انتظار بررسی نیست"
Admin Newsletter	PanelState loading	PanelState error	PanelState empty
Admin Series	PanelState loading	PanelState error	PanelState empty
Admin Jobs	PanelState loading	PanelState error	PanelState empty
Admin SEO Audit	PanelState loading	PanelState error	"مشکلی یافت نشد"
RevisionDrawer	"در حال بارگذاری…"	N/A (close button)	"هنوز نسخه‌ای ذخیره نشده است"
ArtifactStudio	N/A (toolbar)	Upload error message	"هنوز دیاگرامی انتخاب نشده" (preview empty)


---

## 49. ADMIN PANEL COMPLETE DESIGN

### 49.1 Admin Sidebar (AdminDashboard)

**Background:** `linear-gradient(180deg, #073F45 0%, #0F6B73 52%, #0A3136 100%)`
**Width:** 256px (fixed)
**Padding:** 22px 0
**Box shadow:** `-14px 0 40px rgba(15,42,46,0.16)`
**Min height:** 100%

**Logo area:** padding `0 22px 22px`, border-bottom `1px solid rgba(250,247,240,0.14)`
- "تکناو": font-size `24px`, font-weight `900`, color `#fff`, font-family `PelakFA,Vazirmatn`
- "پنل تولید محتوا": font-size `12px`, color `rgba(255,255,255,0.72)`

**Nav items:** padding `18px 12px`, flex: 1
- Each button: flex, align-items center, gap `12px`, width `100%`, text-align right, padding `12px 14px`, margin-bottom `6px`, border-radius `12px`
- Active: background `rgba(250,247,240,0.96)`, border `1px solid rgba(250,247,240,0.95)`, color `#0F6B73`, font-weight `800`, box-shadow `0 12px 28px rgba(0,0,0,0.18)`
- Inactive: background transparent, color `rgba(255,255,255,0.74)`, font-weight `600`
- Font: `13px`, Vazirmatn
- Icon container: `15px`, `26x26px`, border-radius `8px`, inline-flex
  - Active bg: `#0F6B73` + `14` opacity
  - Inactive bg: `rgba(255,255,255,0.10)`

**User footer:** padding `16px 20px`, border-top `1px solid rgba(250,247,240,0.14)`
- Name: `12px`, color `rgba(255,255,255,0.72)`
- RoleBadge component

### 49.2 Admin Topbar (AdminPanel)

**Background:** `rgba(250,247,240,0.86)`
**Backdrop filter:** `blur(14px)`
**Border bottom:** `1px solid #E4DDD2`
**Padding:** `0 28px`
**Min height:** `64px`
**Flex:** space-between, align-items center

**Left side:**
- Mobile hamburger: `background: none; border: 1px solid #E4DDD2; borderRadius: 8; padding: 6px 10px; cursor: pointer; fontSize: 18; color: #0F2A2E`
- Title: `fontSize: 14; fontWeight: 800; color: #0F2A2E`
- Subtitle: `fontSize: 11; color: #5F6B6D; marginTop: 2`

**Right side buttons:**
- "مقاله جدید": pillBtn + background `#0F6B73`, color `#fff`, fontSize `12`
- "بازگشت به سایت": pillBtn + background `#0F6B73`+12 opacity, color `#0F6B73`, fontSize `12`
- "خروج": pillBtn + background `#C94C4C18`, color `#C94C4C`, fontSize `12`

### 49.3 Admin Panel Main Layout

**Outer container:** `minHeight: 100vh; display: flex; background: linear-gradient(135deg, #FAF7F0 0%, #F3EEE4 100%); fontFamily: Vazirmatn,sans-serif; direction: rtl`
**Content area:** `flex: 1; padding: 30px clamp(18px, 3vw, 38px); overflowY: auto`
**Section heading:** `fontSize: 22; fontWeight: 900; color: #0F2A2E; margin: 0 0 20px; fontFamily: 'PelakFA','Vazirmatn',sans-serif`

**Tab routing (18 tabs):** dashboard, articles, create, users, authors, media, comments, analytics, reviews, newsletter, series, categories, tags, seo-audit, jobs, client-errors, activity, roles

### 49.4 Dashboard Stats Grid (DashboardStats)

**Grid:** `display: grid; gridTemplateColumns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; marginBottom: 28px`

**Stat card:**
- Background: `#fff`
- Border: `1px solid #E4DDD2`
- Border radius: `12px`
- Padding: `20px 20px`
- Top border: `3px solid ${color}`
- Value: `fontSize: 24; fontWeight: 900; color: ${color}; marginBottom: 4`
- Label: `fontSize: 13; color: #5F6B6D`

**Colors by stat type:**
- Published articles: `#2F8F6B` (green)
- Pending review: `#D08A22` (amber)
- Drafts: `#5F6B6D` (gray)
- Total views: `#0F6B73` (teal)
- Users: `#3A7D5E` (medium green)
- Media: `#C46A4D` (terracotta)
- Needs revision: `#C94C4C` (red)

**Role-based stat sets:** admin (6 cards), editor (3 cards), writer (3 cards)

### 49.5 Live Admin Feed (LiveAdminFeed)

**Container:** `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 18px; marginBottom: 20`

**Header:** flex, space-between
- "وضعیت زنده": `fontSize: 14; color: #0F2A2E`
- Status dot: `8px`, border-radius `50%`
  - Connected: `background: #2F8F6B` with pulseRing animation
  - Disconnected: `background: #C94C4C`
- Text: "متصل" or "قطع"

**Stats grid:** `gridTemplateColumns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; marginBottom: 16`
- Box: `background: #FAF7F0; padding: 12px; borderRadius: 8; textAlign: center`
- Value: `fontSize: 20; fontWeight: 900`
- Value colors: total=`#0F6B73`, users=`#2F8F6B`, guests=`#D49A2A`, comments=`#C46A4D`
- Label: `fontSize: 11; color: #5F6B6D`

**Events:** border-top `1px solid #E4DDD2`
- Each event: `fontSize: 11; color: #5F6B6D; background: #F4EFE6; padding: 6px 10px; borderRadius: 6`
- Actor: `fontWeight: 600; color: #0F2A2E`

### 49.6 Activity Log (ActivityLog)

**Each row:** `display: flex; gap: 14px; padding: 14px 0; borderBottom: 1px solid #E4DDD2; direction: rtl; alignItems: flex-start`
- Color dot: `8px` circle, border-radius `50%`, margin-top `6px`, flex-shrink `0`
- Colors: publish `#2F8F6B`, submit `#D49A2A`, draft `#5F6B6D`, approve `#2F8F6B`, reject `#C94C4C`, user `#0F6B73`, tag `#C76D4A`, category `#D49A2A`, edit `#0F6B73`, role `#C76D4A`, delete `#C94C4C`, author `#C76D4A`, upload `#2F8F6B`, media `#C46A4D`, schedule `#D49A2A`
- User name: `fontWeight: 600; color: #263238; fontSize: 13`
- Action: `color: #5F6B6D; fontSize: 13`
- Target: `color: #0F6B73; fontSize: 13`
- Time: `fontSize: 11; color: #5F6B6D; whiteSpace: nowrap; flexShrink: 0`

**CSV export:** pillBtn + background `#0F6B7318`, color `#0F6B73`, fontSize `12`, textDecoration `none`

### 49.7 Role Metrics Panel (RoleMetricsPanel)

**Grid:** `gridTemplateColumns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px`
- Card: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 18px 20px; borderTop: 3px solid ${color}`
- Value: `fontSize: 24; fontWeight: 900; color; marginBottom: 4`
- Label: `fontSize: 12; color: #5F6B6D`

**Live coverage subsection:**
- Container: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 16`
- Title: `fontSize: 13; fontWeight: 800; color: #0F2A2E; marginBottom: 10`
- Event badges: `background: #F4EFE6; border: 1px solid #E4DDD2; borderRadius: 999px; padding: 5px 10px; fontSize: 12; color: #0F2A2E`

**Auto-refresh:** every 15s via adminApi.getPanelMetrics()
**SSE:** `/api/v1/admin/stream` for real-time event push

### 49.8 Admin Article List (ArticlesManagement)

**Filters row:** search input (inputStyle, maxWidth 260), status dropdown (inputStyle, maxWidth 180), freshness dropdown (inputStyle, maxWidth 180)
- Status options: همه وضعیت‌ها, منتشرشده, پیش‌نویس, در انتظار بررسی, نیازمند اصلاح, زمان‌بندی‌شده
- Freshness options: همه تازگی‌ها, به‌روز, نیاز به بازنگری, بازنگری برنامه‌ریزی‌شده, آرشیو

**Table:**
- Container: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; overflow: hidden`
- Scrollable wrapper: `overflowX: auto`
- Table: `width: 100%; borderCollapse: collapse; fontFamily: Vazirmatn,sans-serif; fontSize: 13; direction: rtl`
- Column headers: `background: #F4EFE6; borderBottom: 1px solid #E4DDD2; padding: 12px 16px; textAlign: right; color: #5F6B6D; fontWeight: 600; whiteSpace: nowrap`
- Columns: عنوان, نویسنده, دسته, وضعیت, بازدید, تاریخ, اقدام
- Body rows: alternating `#fff` / `#FDFBF7`, `borderBottom: 1px solid #E4DDD2`
- Title cell (280px max-width): `fontWeight: 600; color: #263238; cursor: pointer`, truncated 50 chars
- Review note: `padding: 5px 9px; background: rgba(200,149,28,0.10); border: 1px solid rgba(200,149,28,0.28); borderRadius: 6; fontSize: 11; color: #7A5A00; lineHeight: 1.7`

**Action buttons (actionBtn style):**
- Approve: background `#2F8F6B18`, color `#2F8F6B`, "تأیید"
- Reject: background `#C94C4C18`, color `#C94C4C`, "رد"
- Submit: background `#D49A2A18`, color `#D49A2A`, "ارسال"
- Edit: background `#0F6B7318`, color `#0F6B73`, "ویرایش"
- Delete: background `#C94C4C18`, color `#C94C4C`, "حذف"

**Pagination:** when > 15 items
- Toggle: `background: none; border: 1px solid #E4DDD2; borderRadius: 8; padding: 7px 20px; cursor: pointer; fontSize: 12; color: #5F6B6D`

### 49.9 Article Editor (ArticleEditor)

**Flow label:** "جریان تولید: نوشتن → Artifact → بازبینی → انتشار" — `fontSize: 11; color: #0F6B73; fontWeight: 800; marginBottom: 4`
**Title h2:** `fontSize: 24; fontWeight: 900; color: #0F2A2E; fontFamily: 'PelakFA','Vazirmatn',sans-serif`

**Online editors indicator:**
- `background: #FFF8F0; border: 1px solid #F5C97A; borderRadius: 20; padding: 4px 10px; fontSize: 11; color: #7A5A00`
- Editor avatars: `width: 22px; height: 22px; borderRadius: 50%; background: #E07A3A; color: #fff; fontSize: 9; fontWeight: 800; border: 2px solid #fff`

**Review note banner:**
- `background: linear-gradient(135deg, #FFF8F0, #FFF3E0); border: 1px solid rgba(200,149,28,0.35); borderRadius: 10; padding: 12px 16px; marginBottom: 20`
- Title: "بازخورد ویراستار" — `fontSize: 12; fontWeight: 800; color: #7A5A00`
- Note: `fontSize: 13; color: #5A4000; lineHeight: 1.8`

**Editor grid:** `gridTemplateColumns: 0.9fr 1.1fr; gap: 24`

**Left column (metadata):**
- Card: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 16; padding: 22; boxShadow: 0 10px 34px rgba(15,42,46,0.05)`
- Section dividers: `fontSize: 11; fontWeight: 800; color: #0F6B73; letterSpacing: 0.08em; paddingBottom: 8; borderBottom: 1px solid #E4DDD2`
- Sections: "اطلاعات پایه", "نشانه‌گذاری", "زمان‌بندی"
- Fields: عنوان (input), زیرعنوان (input), خلاصه (textarea), دسته‌بندی (select), نویسنده (select), نوع محتوا (select: تحلیل عمیق, راهنمای فنی, داده‌نما, پژوهش, پرونده, خبر فوری), زمان مطالعه (number), برچسب‌ها (input)
- Toggle switches: premiumOnly, sponsored, featured
  - Label: `display: flex; alignItems: center; gap: 8; fontSize: 13; color: #263238`
  - Toggle: `width: 44px; height: 24px; borderRadius: 12; border: none; cursor: pointer`
  - On: `background: #0F6B73`
  - Off: `background: #D0CCC5`
  - Knob: `position: absolute; top: 3; width: 18px; height: 18px; borderRadius: 50%; background: #fff; transition: inset-inline-start 0.2s; insetInlineStart: 23` (on) or `3` (off)

**SEO section (collapsible):**
- Toggle: `width: 100%; background: none; border: none; cursor: pointer; padding: 10px 0 8px; display: flex; justifyContent: space-between`
- Arrow: `▴` (open) or `▾` (closed)
- Fields: slug, metaDescription (textarea), keywords, ogTitle, ogDescription (textarea), ogImage, canonicalPath

**Right column (content):** HtmlEditor + ArtifactStudio

**Preview mode:**
- `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 32`
- Title: `fontSize: 28; fontWeight: 900; color: #263238; margin: 16px 0 8px; lineHeight: 1.4`
- Subtitle: `fontSize: 18; color: #5F6B6D; lineHeight: 1.6; fontWeight: 500`
- Content: `fontSize: 16; lineHeight: 2; color: #263238` — dangerouslySetInnerHTML

**Action buttons:**
- Published + admin: "بروزرسانی و انتشار" (green `#2F8F6B`), "تبدیل به پیش‌نویس", "زمان‌بندی مجدد"
- Published + writer: "ذخیره پیش‌نویس", "ارسال برای بررسی مجدد"
- Draft: "ذخیره پیش‌نویس" (beige), "ارسال برای بررسی" (teal `#0F6B73`), "زمان‌بندی انتشار" (gold `#D49A2A`)
- Cancel: "انصراف" (gray `#5F6B6D`)
- All: pillBtn + `padding: 10px 24px`
- Dirty indicator: `fontSize: 11; color: #C94C4C; fontWeight: 700` → "● ذخیره نشده · Ctrl+S"

**Field helper (Basic Field):**
- Label: `fontSize: 13; fontWeight: 600; color: #5F6B6D; display: block; marginBottom: 6`
- Input: inputStyle
- Error: `fontSize: 12; color: #C94C4C; marginTop: 4`

### 49.10 Artifact Studio (ArtifactStudio)

**Outer section:** `background: #fff; border: 1px solid #E4DDD2; borderRadius: 16; overflow: hidden; boxShadow: 0 14px 40px rgba(15,42,46,0.06)`

**Gradient header:** `padding: 18px; background: linear-gradient(135deg, #0F6B73 0%, #073F45 100%); color: #fff`
- Sub-label: "Artifact Writing" — `fontSize: 11; opacity: 0.76; marginBottom: 4`
- Title: "کتابخانه دیاگرام و ابزار کدنویسی" — `fontSize: 18; fontWeight: 900`

**Mode toggle:** `background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); borderRadius: 10; padding: 3`
- Labels: "قالب‌ها" and "کد اختصاصی"
- Active: `background: #fff; color: #0F6B73`
- Inactive: `background: transparent; color: #fff`
- Style: `border: 0; borderRadius: 8; padding: 7px 13px; cursor: pointer; fontWeight: 800; fontSize: 12`

**Upload bar:**
- `borderBottom: 1px solid #E4DDD2; background: #F8FBFA; display: flex; alignItems: center; justifyContent: space-between; gap: 12`
- Text: `fontSize: 12; color: #5F6B6D; lineHeight: 1.7`
- Button: pillBtn, background `#0F6B73` (or `#5F6B6D` when busy), color `#fff`
- Max file size: 12MB

**Library mode (diagram gallery):**
- Two-column grid: `gridTemplateColumns: 1.1fr 0.9fr; gap: 16`
- Left pane: `gridTemplateColumns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10; maxHeight: 360; overflowY: auto`
- Each diagram button:
  - Selected: `border: 1px solid #0F6B73; background: #0F6B73+10 opacity; boxShadow: 0 8px 24px rgba(15,107,115,0.12); borderRadius: 12; padding: 12`
  - Unselected: `border: 1px solid #E4DDD2; background: #fff; borderRadius: 12; padding: 12`
  - Preview: `height: 56px; borderRadius: 10; marginBottom: 9; overflow: hidden; background: #F4F0EA; display: flex; alignItems: center; justifyContent: center`
  - Diagram scaled: `transform: scale(0.33); transformOrigin: center; width: 400px; pointerEvents: none`
  - Label: `fontSize: 12; fontWeight: 800; color: #0F2A2E; lineHeight: 1.5`
- Right pane: `background: #F4EFE6; border: 1px solid #E4DDD2; borderRadius: 14; padding: 14`
  - Heading: `fontSize: 12; fontWeight: 800; color: #0F6B73; marginBottom: 10`
  - Preview: `background: #fff; borderRadius: 12; padding: 10; minHeight: 180`

**Code mode:**
- Two-column grid: `gridTemplateColumns: 1fr 1fr; gap: 16`
- Language toggle (mermaid, plantuml, d2):
  - Active: `background: #0F6B73+18 opacity; color: #0F6B73`
  - Inactive: `background: #F4EFE6; color: #5F6B6D`
- Textarea: inputStyle + `direction: ltr; textAlign: left; fontFamily: Consolas, monospace; lineHeight: 1.6; resize: vertical`
- Insert button: pillBtn + `background: #0F6B73; color: #fff; marginTop: 10`
- Right pane code preview: `background: #101A1C; color: #DDEBE9; borderRadius: 14; padding: 16; minHeight: 290; direction: ltr; border: 1px solid rgba(15,107,115,0.45)`
  - Header: `color: #8CCFD2; fontSize: 11`
  - Code: `whiteSpace: pre-wrap; fontSize: 12; lineHeight: 1.7`
  - Empty: `color: #4A6A6C`

**210 total diagram choices:** 18 base types + 192 generated (diagram-001 through diagram-192)

### 49.11 HTML Editor (HtmlEditor)

**Toolbar:** `display: flex; flexWrap: wrap; alignItems: center; gap: 4; padding: 7px 10px; background: #F9F7F4; border: 1px solid #E4DDD2; borderRadius: 8px 8px 0 0; direction: ltr`
- Toolbar button (TB): `padding: 4px 9px; border: 1px solid #D4C9B8; borderRadius: 5; cursor: pointer; background: #fff; color: #263238; fontFamily: Vazirmatn or monospace; fontSize: 11-12`
- Hover: `background: #EFE9E0; color: #C46A4D; borderColor: #C8951C; transition: all 0.12s`
- Buttons: B (bold), I (italic), H2, H3, link icon (SVG), «» (blockquote), </> (inline code), { } (code block), ≡ (bullet list), 1. (numbered list), — (hr)
- Separator: `width: 1px; alignSelf: stretch; background: #D4C9B8; margin: 2px 3px`
- Image upload label: SVG icon + "تصویر", same hover styling
- WebP checkbox: `fontSize: 11; color: #5F6B6D`

**Textarea:**
- inputStyle + `resize: vertical; lineHeight: 1.8; direction: rtl; borderTop: none; borderBottom: none; borderRadius: 0; fontFamily: monospace; fontSize: 13`
- Rows: 18
- Ctrl+B (bold) and Ctrl+I (italic) shortcuts

**Footer bar:** `display: flex; gap: 16; padding: 5px 12px; background: #F9F7F4; border: 1px solid #E4DDD2; borderTop: none; borderRadius: 0 0 8px 8px; fontSize: 11; color: #8A9A9B; direction: ltr`
- Shows word count + character count (Persian locale)

### 49.12 Revision Drawer (RevisionDrawer)

**Overlay:** `position: fixed; inset: 0; z-index: 700; display: flex; alignItems: stretch; justifyContent: flex-end`
- Backdrop: `position: absolute; inset: 0; background: rgba(0,0,0,0.45)`
- Drawer: `width: 100%; maxWidth: 520px; background: #FAF7F0; boxShadow: -8px 0 40px rgba(0,0,0,0.18); direction: rtl; flex column`

**Header:** `padding: 20px 24px; borderBottom: 1px solid #E4DDD2; display: flex; justifyContent: space-between; alignItems: center`
- Title: "تاریخچه نسخه‌ها" — `fontSize: 18; fontWeight: 900; color: #263238`
- Close: `background: none; border: none; fontSize: 20; cursor: pointer; color: #5F6B6D` (✕)

**Body:** `flex: 1; overflowY: auto; padding: 16px 24px`
- Each revision: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 10; padding: 10px 14px; cursor: pointer`
  - Selected: `background: #F0F9F4; border: 1px solid #3A7D5E`
  - Title: `fontSize: 13; fontWeight: 700; color: #263238; marginBottom: 3; overflow: hidden; textOverflow: ellipsis; whiteSpace: nowrap`
  - Meta: `fontSize: 11; color: #5F6B6D` — "date · author · status"
- Pagination: `display: flex; gap: 8; justifyContent: center; marginTop: 16`
  - "قبلی" / "بعدی" buttons: pillBtn style, fontSize `12`
  - Page indicator: `fontSize: 12; color: #5F6B6D`

**Preview:** `marginTop: 20; background: #fff; border: 1px solid #E4DDD2; borderRadius: 10; padding: 16`
- Content: `fontSize: 13; color: #263238; lineHeight: 1.8; maxHeight: 300; overflowY: auto; whiteSpace: pre-wrap; wordBreak: break-word`

**Restore footer:** `padding: 16px 24px; borderTop: 1px solid #E4DDD2`
- Button: pillBtn; width 100%; background `#3A7D5E`; color `#fff`; padding `12px 0`; fontSize `14`
- Text: "بازیابی این نسخه" (or "…" when restoring)

### 49.13 User Management (UserManagement)

**Table:** Same style as ArticleList table
- Columns: نام, ایمیل, نقش, وضعیت, مقاله‌ها, اقدام
- Avatar: AuthorAvatar with size 32
- Name: `fontWeight: 600; color: #263238`
- Email: `direction: ltr; color: #5F6B6D; fontSize: 12`
- Role select: `border: 1px solid #E4DDD2; borderRadius: 6; padding: 3px 8px; fontSize: 12; fontFamily: Vazirmatn`
- Status: active = `color: #2F8F6B` "فعال", suspended = `color: #C94C4C` "غیرفعال"
- Actions: "جزئیات" (teal), "غیرفعال"/"فعال" (red/green)

**User Detail Modal:**
- Backdrop: `rgba(0,0,0,0.45)`
- Panel: `background: #FAF7F0; borderRadius: 14; padding: 32; maxWidth: 420; width: 90%; boxShadow: 0 20px 60px rgba(0,0,0,0.2)`
- Avatar size 60
- Info grid: `gridTemplateColumns: 1fr 1fr; gap: 12`
- Info box: `background: #F4EFE6; borderRadius: 8; padding: 12`
  - Label: `fontSize: 11; color: #5F6B6D`
  - Value: `fontSize: 14; fontWeight: 600; color: #263238`
- Close: pillBtn `background: #F4EFE6; color: #263238; width: 100%`

### 49.14 Category Management (CategoryManagement)

**Add form:** `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 24; marginBottom: 24`
- Name input (maxWidth 200), description input (flex:1; minWidth 200), color picker (`width: 48; height: 40; border: 1px solid #E4DDD2; borderRadius: 8; padding: 2`), submit (pillBtn `background: #0F6B73; color: #fff`)

**Category grid:** `gridTemplateColumns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14`
- Card: `background: #fff; border: 1px solid ${color}30; borderRadius: 10; padding: 16px 18px; borderRight: 4px solid ${color}`
- Name: `fontSize: 14; fontWeight: 700; color: #263238`
- Count: `fontSize: 11; color: #5F6B6D`
- Delete: actionBtn + `background: #C94C4C18; color: #C94C4C`

### 49.15 Tags Management (TagsManagement)

**Add + search:** new tag input (inputStyle, maxWidth 220), add button (pillBtn `background: #0F6B73; color: #fff`), search input (inputStyle, maxWidth 200)

**Tag chips:** `display: flex; gap: 10; flexWrap: wrap`
- Chip: `background: #F4EFE6; border: 1px solid #E4DDD2; borderRadius: 20; padding: 5px 14px; display: flex; alignItems: center; gap: 8`
- Name: `fontSize: 13; color: #263238`
- Count: `fontSize: 11; color: #5F6B6D`
- Delete X: `background: none; border: none; cursor: pointer; color: #C94C4C; fontSize: 14`

### 49.16 Authors Management (AuthorsManagement)

**Form card:** `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 24; marginBottom: 24`
- 2-column grid rows (name+slug, specialty+initials+color)
- Bio textarea: inputStyle + `minHeight: 80; resize: vertical`
- Save/cancel: pillBtn

**Author card grid:** `gridTemplateColumns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16`
- Card: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 20; borderRight: 4px solid ${color}`
- Avatar: `width: 48px; height: 48px; borderRadius: 50%; background: ${color}18; fontSize: 16; fontWeight: 700; color: ${color}`
- Name: `fontSize: 15; fontWeight: 700; color: #263238`
- Specialty: `fontSize: 11; color: #5F6B6D; marginTop: 2`
- Bio: `fontSize: 12; color: #5F6B6D; lineHeight: 1.6`
- Actions: edit (teal) + delete (red) via actionBtn

### 49.17 Media Library (MediaLibrary)

**Filters:** Search input (maxWidth 260), mime type select (maxWidth 180)

**Media grid:** `gridTemplateColumns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16`
- Card: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; overflow: hidden`
- Preview area: `height: 138px; background: #F4EFE6; display: flex; alignItems: center; justifyContent: center`
- Image: `width: 100%; height: 100%; objectFit: cover` (lazy loading)
- Info: `padding: 14px`
  - Filename: `fontSize: 13; fontWeight: 700; color: #263238; whiteSpace: nowrap; overflow: hidden; textOverflow: ellipsis`
  - Size: `fontSize: 11; color: #5F6B6D; marginTop: 6` → "X KB · W×H"
  - Actions: "کپی URL" (teal, actionBtn), "حذف" (red, actionBtn, admin only)

### 49.18 Comments Moderation (CommentsModeration)

**Filter:** Checkbox "فقط گزارش‌شده" + "حذف همه گزارش‌شده" button (red actionBtn)

**Table:** Same pattern as ArticleList
- Columns: وضعیت, نظر, مقاله, کاربر, تاریخ, اقدام
- Comment body: `fontSize: 13; color: #263238; lineHeight: 1.7; whiteSpace: nowrap; overflow: hidden; textOverflow: ellipsis; maxWidth: 280`
- Action buttons: "حذف" (red), "رفع گزارش" (teal), approve (green), reject (red)
- Bulk actions: "حذف انتخاب‌شده‌ها" button
- Selection: checkbox per row

### 49.19 Writer Workspace (WriterWorkspace)

**Header area:** `background: linear-gradient(160deg, #F2EBE3 0%, #FAF7F0 55%); borderBottom: 1px solid #E4DDD2; padding: 24px clamp(16px,3vw,44px) 0; maxWidth: 1280; margin: 0 auto`

**Greeting badge:** `display: inline-flex; alignItems: center; gap: 6; fontSize: 11; color: #C46A4D; fontWeight: 700; background: #FAF0EB; padding: 4px 12px; borderRadius: 20; border: 1px solid rgba(196,106,77,0.22); letterSpacing: 0.05em`
- Text: "✦ استودیوی نویسنده · تکناو"

**Greeting h1:** `fontSize: 28; fontWeight: 900; color: #1A2E30; fontFamily: 'PelakFA','Vazirmatn',sans-serif; lineHeight: 1.2`
- Time-based: شب بخیر (h<6 or h>=21), صبح بخیر (h 6-11), ظهر بخیر (h 12-16), عصر بخیر (h 17-20)

**Action buttons:** "✦ مقاله جدید" (wwPrimaryBtn), "پنل کامل" (wwGhostBtn → /admin), "سایت" (wwGhostBtn), "خروج" (wwDangerBtn)

**Writer button styles:**
- wwPrimaryBtn: `padding: 10px 22px; borderRadius: 10; border: none; background: #C46A4D; color: #fff; fontSize: 13; fontWeight: 700; boxShadow: 0 3px 12px rgba(196,106,77,0.25); display: inline-flex; alignItems: center; gap: 6`
- wwGhostBtn: `padding: 9px 16px; borderRadius: 10; border: 1px solid #E4DDD2; background: #fff; color: #1A2E30; fontSize: 13; fontWeight: 600`
- wwDangerBtn: `padding: 9px 16px; borderRadius: 10; border: none; background: rgba(201,76,76,0.08); color: #C94C4C; fontSize: 13; fontWeight: 600`
- wwLinkBtn: `background: #FAF0EB; border: none; cursor: pointer; color: #C46A4D; fontSize: 11; fontWeight: 700; padding: 3px 10px; borderRadius: 6`

**Tab bar:** `display: flex; gap: 0; overflowX: auto`
- Tabs: آمار من (◈), تحلیل‌ها (▤), نوشتن/ویرایش (✦), نوشته‌ها (◉), نظرها (◎)
- Active: `color: #C46A4D; borderBottom: 2.5px solid #C46A4D`
- Inactive: `color: #7B8C8E; borderBottom: 2.5px solid transparent`
- Padding: `11px 22px`, fontSize `13`, fontWeight `700`, transition `0.18s`

**Content area:** `maxWidth: 1280; margin: 0 auto; padding: 28px clamp(16px,3vw,44px)`

**Writer color palette (WW):**
- terra: `#C46A4D`, terraLight: `#FAF0EB`, terraBorder: `rgba(196,106,77,0.22)`
- gold: `#C8951C`, goldLight: `#FBF6E8`
- ink: `#1A2E30`, muted: `#7B8C8E`, faint: `#9AA5A6`
- cream: `#FAF7F0`, border: `#E4DDD2`
- success: `#3A7D5E`, successLight: `#EFF8F4`
- purple: `#7B5EA7`, purpleLight: `#F5F0FB`

**Writing Tip Card:**
- Container: `background: linear-gradient(135deg, #FAF0EB 0%, #FBF6E8 100%); border: 1px solid rgba(196,106,77,0.22); borderRadius: 12; padding: 14px 16px; display: flex; gap: 12; alignItems: flex-start`
- Icon box: `width: 36px; height: 36px; borderRadius: 10; background: linear-gradient(135deg, rgba(196,106,77,0.14), rgba(200,149,28,0.1)); display: flex; alignItems: center; justifyContent: center; fontSize: 16; color: #C46A4D`
- Label: "نکته نویسندگی" — `fontSize: 10; fontWeight: 700; color: #C46A4D; letterSpacing: 0.1em`
- Nav buttons: `background: #FAF0EB; color: #C46A4D; fontSize: 11; padding: 2px 7px; borderRadius: 6` (‹ and ›)
- Tip text: `fontSize: 12.5; color: #1A2E30; lineHeight: 1.85`
- Auto-rotate: every 7 seconds, fade transition opacity `0.35s`

**Weekly Chart (WeeklyChart):**
- Bars: `display: flex; alignItems: flex-end; gap: 5px; height: 48px`
- Today bar: `linear-gradient(to top, #C46A4D, rgba(196,106,77,0.45))`
- Other bars: `linear-gradient(to top, #E4DDD2, #EDE9E2)`
- Transition: `height 0.5s ease`
- Day labels: Persian week abbreviations (ش, ی, د, س, چ, پ, ج)

**Writer Analytics (WriterAnalyticsPanel):**
- Table: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 24`
- Title: "عملکرد نوشته‌های من" — `fontSize: 16; color: #1A2E30; fontWeight: 900`
- Columns: عنوان مقاله, بازدید, واکنش, نظر, روند اخیر
- Rows: alternating `#fff` / `#FDFBF7`, `borderBottom: 1px solid #E4DDD2`
- Sparkline (inline SVG 80x20): stroke `#C46A4D`, strokeWidth `1.5`, dot fill `#C46A4D`, r `2.5`
- Expanded sparkline: 560x80 viewBox, area gradient `#C46A4D` 22%→1%, stroke `2`, end dot r `3.5`
- Footer total: `borderTop: 2px solid #E4DDD2; background: #FAF7F0; fontWeight: 700; color: #C46A4D`

### 49.20 Admin Panel Responsive Behavior

**At max-width 640px:**
- Sidebar hidden by default (`.admin-sidebar { display: none }`)
- `.open` class shows sidebar as fixed overlay: z-index `300`, width `280px`, overflow-y auto
- `.admin-overlay` shown (rgba(0,0,0,0.4))
- Topbar title font-size `12px`

**At max-width 768px:**
- Dashboard 2-column grid collapses to 1 column

**At max-width 980px:**
- Editor grid collapses to single column
- Artifact studio grid collapses to single column

---

## 50. ENGLISH HOMEPAGE (teknav-en.jsx)

### 50.1 Global Shell

**Background:** `#FAF7F0`, text color `#132326`
**Font stack:** `-apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Arial, sans-serif`
**Direction:** `ltr`, language `en`

### 50.2 Sticky Header

**Background:** `rgba(250,247,240,0.94)`, backdrop-filter `blur(14px)`
**Border bottom:** `1px solid #E4DDD2`
**Padding:** `0 28px`, height `60px`
**Logo "Teknav":** `fontSize: 22; fontWeight: 900; color: #0F2A2E; letterSpacing: -0.02em`
**"ENGLISH" badge:** `fontSize: 10; color: #C46A4D; fontWeight: 700; letterSpacing: 0.14em`
**Nav links:** `fontSize: 13; fontWeight: 500; color: #4A5A5C`
**"Persian site" button:** transparent bg, border `1px solid #0F6B73`, color `#0F6B73`, borderRadius `7px`, padding `6px 14px`, fontSize `12px`, fontWeight `600`

### 50.3 Hero Section

**Background:** `#F4F1EC`, min-height `520px`
**Radial glows:** teal (480px, top-right) + terracotta (340px, bottom-left) at 9% opacity
**Grid pattern:** 48px grid, 3.5% opacity lines, radial masked
**Content grid:** `1.3fr / 0.7fr`, gap `48px`, padding `80px 28px 72px`

**Pill badge:** background `rgba(15,107,115,0.08)`, border `1px solid rgba(15,107,115,0.22)`, color `#0F6B73`, padding `6px 16px`, borderRadius `999px`, fontSize `11px`, fontWeight `700`
- Dot: `6px`, borderRadius `50%`, background `#0F6B73`, enPulse animation

**H1:** `clamp(36px, 5.5vw, 62px)`, fontWeight `800`, color `#0F2A2E`, lineHeight `1.12`, letterSpacing `-0.02em`
**Gradient span:** `linear-gradient(90deg, #0F6B73, #D49A2A)`, `-webkit-background-clip: text`
**Subtitle:** `fontSize: 16; color: #4A5A5C; lineHeight: 1.85; maxWidth: 580`
**Primary CTA ("Browse research"):** bg `#0F6B73`, color `#fff`, padding `13px 28px`, borderRadius `9px`, fontWeight `700`, boxShadow `0 6px 20px rgba(15,107,115,0.28)`
**Secondary CTA ("Read TekRAG-Persian"):** bg `rgba(196,106,77,0.08)`, color `#A8512E`, border `1px solid rgba(196,106,77,0.4)`, padding `13px 26px`, borderRadius `9px`

**Featured card:** bg `#fff`, border `1px solid #E4DDD2`, borderRadius `14px`, padding `22px 24px`, boxShadow `0 12px 38px rgba(15,42,46,0.08)`
- Left accent: `4px`, `linear-gradient(180deg, #D49A2A, #C46A4D)`
- "FEATURED ARTICLE": `fontSize: 10; color: #C46A4D; fontWeight: 700; letterSpacing: 0.1em`
- Title: `fontSize: 16; fontWeight: 700; color: #0F2A2E; lineHeight: 1.55`
- Meta author in `#0F6B73`

**SVG wave divider:** fill `#ebe3d2`, height `42px`

### 50.4 Stats Bar

**Background:** `#ebe3d2`, padding `36px 24px`
**Grid:** 4-column, gap `16px`, separator lines
**Stat number:** `fontSize: 28; fontWeight: 900; color: #A8761B`
**Stat label:** `fontSize: 12; color: #4A5A5C; fontWeight: 500`

### 50.5 English Article Cards

**Standard card:** borderRadius `12px`, border `1px solid #E4DDD2`, padding `22px`, boxShadow `0 2px 10px rgba(0,0,0,0.04)`
- Thumbnail: height `110px`, bg `#F4EFE6`, borderRadius `8px`, scale `0.68`
- H3: `fontSize: 14; fontWeight: 700; color: #263238; lineHeight: 1.5`
- Summary: `fontSize: 12; color: #5F6B6D; lineHeight: 1.7`
- Footer: `fontSize: 11; color: #8A9A9C`

**Grid:** `repeat(3, minmax(0,1fr))`, gap `18px`

### 50.6 "Most Read" Section

- Rank number: `fontSize: 32; fontWeight: 900; color: #E4DDD2; minWidth: 40px; font-variant-numeric: tabular-nums`
- Title: `fontSize: 15; fontWeight: 700; color: #263238; lineHeight: 1.45`
- Thumbnail: `72x72px`, bg `#F4EFE6`, borderRadius `8px`, scale `0.52`

### 50.7 "Topics We Cover" Section

**Grid:** `repeat(auto-fill, minmax(200px,1fr))`, gap `12px`
- Card: bg `#fff`, border `1px solid {cat.color}30`, border-left `3px solid {cat.color}`, borderRadius `10px`, padding `18px 16px`

### 50.8 Writers Section

**Grid:** `repeat(auto-fill, minmax(260px,1fr))`, gap `16px`
- Card: borderRadius `12px`, padding `22px`, hover translateY(-3px) + shadow
- Avatar: `48x48px`, borderRadius `50%`, bg `#0F6B7322`, color `#0F6B73`, fontSize `20px`
- Name: `fontSize: 15; fontWeight: 700`
- Bio: `fontSize: 12; color: #5F6B6D; lineHeight: 1.75`

### 50.9 Newsletter CTA (English)

**Background:** `#ebe3d2`, borderRadius `18px`, padding `52px 40px`
**Label:** `fontSize: 11; color: #A8512E; fontWeight: 700; letterSpacing: 0.1em; uppercase`
**Heading:** `clamp(20px, 2.5vw, 30px)`, fontWeight `800`, color `#0F2A2E`
**Button:** bg `#0F6B73`, hover `#0d5c63`, color `#fff`, borderRadius `9px`, padding `13px 26px`

### 50.10 English Footer

**Background:** `#0F2A2E` (dark teal), text color `#C8D4D5`
**Padding:** `40px 28px`, max-width `1240px`
**Logo:** `fontSize: 22; fontWeight: 900; color: #FAF7F0`
**Tagline:** `fontSize: 12; color: #7A9A9C`
**Nav links:** `color: #A8C0C2; fontSize: 13`, hover `#FAF7F0`
**Copyright:** `fontSize: 12; color: #4A6A6C`

### 50.11 English Animations

**enReveal:** opacity `0→1`, filter `blur(5px)→0`, translateY(16px)→(0)
**enPulse:** opacity `1→0.5→1`, scale `1→1.4→1`, 2.2s

### 50.12 English Hero Canvas

**28 nodes** with teal/terracotta/green palette
**Connection distance:** `< 120px`, stroke `rgba(15,107,115, 0.15 * (1-d/120))`, lineWidth `0.7`
**Pulse:** `0.45 + 0.18 * sin(t + phase)` on alpha
**CountUp:** 1400ms, cubic ease-out, IntersectionObserver threshold 0.4

---

## 51. DIAGRAM SYSTEM COMPLETE REFERENCE (teknav-diagrams.jsx)

### 51.1 Shared Diagram Properties

- All SVGs: `width="100%"` with viewBox
- Font: `Vazirmatn, sans-serif`
- Diagram colors: `#0F6B73` (teal), `#D49A2A` (gold), `#C76D4A`/`#C46A4D` (terracotta), `#2F8F6B` (green), `#5F6B6D` (muted), `#E4DDD2` (border), `#F4EFE6` (cream bg), `#20343A` (tooltip bg), `#FAF7F0` (light text), `#263238` (dark text), `#C94C4C` (red)
- Tooltip pattern: `rect` rx `4`, fill `#20343A`, opacity `0.9`, fontSize `9px`, fill `#FAF7F0`
- Hover: nodes enlarge, opacity increases, cursor pointer
- Animation: setInterval 40-100ms, requestAnimationFrame equivalent

### 51.2 NeuralNetworkDiagram (420×280)

- 4 layers: ورودی (x=60), پنهان ۱ (x=160), توجه (x=260), خروجی (x=360)
- Node counts: 4, 3, 3, 2
- Node colors: `['#0F6B73', '#D49A2A', '#C76D4A', '#2F8F6B']`
- Connections: `stroke="#E4DDD2" strokeWidth="1" opacity="0.6"`
- Pulse dots: `fill="#D49A2A"` radius 3, traveling
- Nodes: `r=10` (hover `r=13`), opacity `0.85` (hover `1`), transition `0.15s`
- Tick interval: 80ms

### 51.3 DataPipelineDiagram (700×180 / 480×140)

- 7 steps: Raw → Clean → Label → Feature → Train → Eval → Output
- Step colors: `#5F6B6D`, `#D49A2A`, `#C76D4A`, `#0F6B73`, `#2F8F6B`, `#D49A2A`, `#0F6B73`
- Center line: `stroke="#E4DDD2" strokeWidth="2"`
- Animated dots: 4 dots, `fill="#D49A2A"`, radius 4, opacity 0.8
- Step circles: radius 22 (hover 26), opacity 0.85 (hover 1)
- Tick interval: 60ms

### 51.4 CyberSecurityDiagram (400×300)

- Center: `cx=200, cy=150`, dashed spinning ring `r=55`, `stroke="#2F8F6B" strokeWidth=2.5`, `strokeDasharray="8 4"`, animation `spin 20s linear infinite`
- 6 threats at 60° intervals, radius 90
- Colors: `#C94C4C`, `#D08A22`, `#C76D4A` repeating
- Connection lines: dashed pulsing `6 3` or `3 6`, opacity 0.7
- Threat nodes: `r=8` (hover `r=10`), opacity `0.75` (hover `1`)
- Tick interval: 100ms

### 51.5 StartupGrowthDiagram (400×200+30)

- S-curve: 5 milestones, `stroke="#0F6B73" strokeWidth="2.5"`, `strokeLinecap="round"`
- Area fill: `fill="#0F6B73" opacity="0.08"`
- Milestone dots: `r=7`, `fill="#D49A2A"`
- Animation: 0→100 in 100 steps at 20ms intervals (2s total)
- Growth: `y = H - padY - Math.pow(t, 1.8) * (H - padY*3)`

### 51.6 HardwareChipDiagram (400×220)

- Chip rect: `x=10, y=20, w=380, h=190, rx=8`, fill `#F4EFE6`
- 5 blocks: Memory (gold), Processor (teal), AI Accelerator (clay), Data Bus (green), Memory Controller (gray)
- Block: `80x40` or `80x80`, `rx=5`, opacity 0.85
- Animated pulse dots traveling data routes
- Tick interval: 70ms

### 51.7 FutureTimelineDiagram (480×120+20)

- 5 milestones: 2025–2035
- Dots: `r=10` (hover `r=14`), colors: teal, gold, clay, green, teal
- Year labels: `fontSize: 10; fontWeight: 700`
- Labels: `fontSize: 8.5`

### 51.8 SoftwareArchDiagram (420×250)

- 6 modules in layered architecture
- Module: `100x36`, `rx=6`, opacity 0.85
- Arrow marker: `#E4DDD2`, `M0,0 L6,3 L0,6 Z`

### 51.9 WaveStreamDiagram (480×160)

- 3 data streams: gold (amp=28, freq=0.022), terracotta (amp=20, freq=0.03), green (amp=24, freq=0.018)
- Gradients for fade edges
- Animated dot per stream: `r=4`
- Tick interval: 40ms

### 51.10 OrbitDiagram (280×220)

- Center: AI nucleus, `r=22`, fill `#20343A`
- 3 orbits: r=40 (gold, 0.04), r=65 (terracotta, -0.025), r=90 (green, 0.016)
- Dashed `4 6`, opacity 0.35
- Tick interval: 50ms

### 51.11 GeneratedDiagram (520/320 × 210/150)

- 5-color palette
- 6-12 nodes radially, radius 48-90px
- Full connection graph, line width varies 0.5-3.5
- Nodes: `r=6-9`, opacity 0.9
- Pulsing outer rings
- Tick interval: 50ms

### 51.12 BrainDiagram (400/300 × 260/180)

- Radial glow: `radialGradient` #0F6B73 at 30% opacity
- 8 nodes in brain-like pattern
- Connections: distance < 100px
- Pulsing nodes: `r = Math.sin(tick*0.1 + i) * 3 + 6`
- Tick interval: 60ms

### 51.13 DatabaseDiagram (320×200)

- 3 cylinder stacks: gray (h=40), gold (h=60), teal (h=50)
- Cylinder: rect + top/bottom ellipse
- Curved path: dashed `5 5`, animated stroke-dashoffset
- Tick interval: 50ms

### 51.14 CloudDiagram (400×220)

- Cloud path: fill `#F4EFE6`, stroke `#0F6B73`, strokeWidth 2
- 3 server blocks: `30x15`, `rx=3`, pulsing gold/gray
- Tick interval: 80ms

### 51.15 QuantumDiagram (400×200)

- 2 circles: `r=30`, dashed `4 4`, `stroke="#2F8F6B"`
- 2 orbiting electrons: `r=6`, `fill="#2F8F6B"`, opposite phases
- Tick interval: 40ms

### 51.16 VlaDiagram (400×220)

- Center: `160x80`, `rx=10`, fill `#F4EFE6`, stroke `#C76D4A`
- Vision/Language/Action lines
- Tick interval: 50ms

### 51.17 DnaDiagram (320×200)

- 10 rungs, spacing 15px
- Left: `r=5`, fill `#C76D4A`; Right: `r=5`, fill `#0F6B73`
- Sinusoidal motion: `Math.sin(tick*0.1 + i*0.8) * 40`
- Tick interval: 60ms

### 51.18 FusionDiagram (320×200)

- Outer ring: `r=50`, dashed `5 5`, `stroke="#D49A2A"`, rotating 4s
- Pulsing core: `r = 20 + sin(tick*0.2)*5`
- Tick interval: 40ms

### 51.19 SatelliteDiagram (320×200)

- Earth: `r=30`, fill `#0F6B73` opacity 0.6
- Orbit ellipse: `rx=80, ry=40`
- Satellite: `16x8`, rotating with `tick*1.7`
- Tick interval: 50ms

### 51.20 BlockchainDiagram (400×150)

- 4 blocks: `60x50`, `rx=6`, fill `#F4EFE6`, stroke `#2F8F6B`
- Dashed connecting arrows
- Static (no tick)

### 51.21 TekRagThreeDiagram (3D Three.js)

- 3 variants: corpus, retrieval, evaluation
- WebGLRenderer, antialias, alpha, pixel ratio capped at 2, SRGBColorSpace
- PerspectiveCamera(45, aspect, 0.1, 100)
- Lighting: AmbientLight(0xffffff, 0.7), DirectionalLight(0xffffff, 1.4), DirectionalLight(0xd49a2a, 0.8) rim
- 3D palette: teal `0x0f6b73`, gold `0xd49a2a`, clay `0xc76d4a`, green `0x2f8f6b`, ink `0x20343a`, line `0xe4ddd2`, red `0xc94c4c`, cream `0xf4efe6`
- BoxGeometry + MeshStandardMaterial, roughness 0.48, metalness 0.12
- Hover labels via raycasting
- Drag rotation, auto-rotation `+= 0.003`
- Canvas bg: `radial-gradient(circle at 50% 20%, #ffffff 0%, #f4efe6 42%, #e9f2f2 100%)`
- Legend pills: border `1px solid #E4DDD2`, borderRadius `999px`, bg `#fff`

---

## 52. WIDGET SYSTEM DESIGN

### 52.1 GlossaryWidget

**Max-width:** 480px, direction: rtl

**Light theme:**
- Card: bg `#fff`, border `1px solid #E4DDD2`, color `#263238`, borderRadius `12px`, overflow hidden
- Header: bg `#0C1E22` (dark teal)
- Footer: bg `#F8F5F0`, border-top `1px solid #E4DDD2`
- Term (Persian): color `#D49A2A`, fontWeight `700`, fontSize `16px`
- English term: color `rgba(255,255,255,0.5)`, fontSize `12px`
- Summary: `fontSize: 14; lineHeight: 1.9`
- FAQ question: color `#0F6B73`
- FAQ answer: color `#5F6B6D`
- Link: color `#0F6B73`

**Dark theme:**
- Card: bg `#0C1E22`, border `1px solid rgba(255,255,255,0.1)`, color `#E4DDD2`
- Header: bg `#061014`
- Footer: bg `#061014`, border-top `1px solid rgba(255,255,255,0.08)`
- Summary: color `rgba(255,255,255,0.85)`
- FAQ question: color `#D49A2A`
- FAQ answer: color `rgba(255,255,255,0.6)`
- Link: color `#D49A2A`

### 52.2 ArticleCardWidget

**Max-width:** 480px, direction: rtl, borderRadius `12px`, overflow hidden

**Image section:** height `180px`, overflow hidden
- Image: 100%×100%, object-fit cover, loading lazy
- Category badge: bg `#0F6B73`, color `#fff`, fontSize `11px`, fontWeight `700`, padding `3px 10px`, borderRadius `20px`, positioned bottom-right
- Read time badge: bg `rgba(0,0,0,0.55)`, color `#fff`, fontSize `11px`, borderRadius `20px`, positioned top-left

**Content section:** padding `16px 20px`
- H3: `fontSize: 16; fontWeight: 700; lineHeight: 1.6`
  - Light: color `#0C1E22`
  - Dark: color `#fff`
- Summary: `fontSize: 13; lineHeight: 1.8`, truncated 120 chars
  - Light: color `#5F6B6D`
  - Dark: color `rgba(255,255,255,0.6)`

**Footer:** border-top `1px solid #E4DDD2` / `rgba(255,255,255,0.08)`, padding `10px 20px`, bg `#F8F5F0` / `#061014`
- Author name: `fontSize: 12`
- Link: `fontSize: 12; color: #D49A2A; fontWeight: 600` → "خواندن در تکناو ↗"

### 52.3 CompanyWidget

**Same scaffolding** as ArticleCardWidget

**Loading state:** padding `24px`, flex gap `12px`
- Skeleton avatar: `40x40px`, borderRadius `8px`, bg `#E4DDD2` / `rgba(255,255,255,0.08)`
- Skeleton lines: height `14px`/`10px`, borderRadius `4px`, width `60%`/`40%`

**Header:** bg `#061014` / `#0C1E22`, padding `16px 20px`
- Logo: `40x40px`, borderRadius `8px`, bg `#fff`, padding `4px`
- Company name: color `#fff`, fontWeight `700`, fontSize `16px`
- Verified badge: color `#D49A2A`, fontSize `11px`
- Category pill: bg `rgba(212,154,42,0.15)`, color `#D49A2A`, borderRadius `20px`

**Body:** padding `16px 20px`
- Description: `fontSize: 14; lineHeight: 1.9`
  - Light: `#263238`
  - Dark: `rgba(255,255,255,0.8)`
- Tech tags: flex wrap, gap `6px`
  - Light: bg `#E4DDD2`, color `#263238`
  - Dark: bg `rgba(255,255,255,0.08)`, color `rgba(255,255,255,0.7)`

**Footer:** link color `#D49A2A` (always)

### 52.4 Widget Resize Protocol

All widgets use `ResizeObserver` on `#widget-root` and send `postMessage({ type: 'resize', height })` to parent `*` whenever the height changes.

### 52.5 embed-loader.js

- Reads `data-type`, `data-slug`, `data-width` attributes
- Creates sandboxed `<iframe>` pointing to `www.teknav.ir/embed/{type}/{slug}`
- Attributes: `loading="lazy"`, `sandbox="allow-scripts allow-popups allow-same-origin"`, `title`
- Listens for `postMessage` resize events, adjusts iframe height dynamically
- Default width 480px
- Error: console.warn if `data-slug` missing

### 52.6 Widget Error States

- GlossaryWidget: term not found — empty details
- ArticleCardWidget: article not found — empty card
- CompanyWidget: company not found — `<EmptyState>` with not-found message
- Generic widget error: red text `#C62828`, `fontFamily: 'Vazirmatn,sans-serif'`, padding `20px`, direction `rtl`

---

## 53. SEO MANAGER DESIGN (seo.jsx)

### 53.1 Operation

- `SeoManager` component renders `null` (no DOM output)
- On page change (via `useNav().page`), fetches async data with static fallback
- Injects meta tags, JSON-LD, link tags into `document.head`
- All previous SEO elements cleaned before re-injection

### 53.2 Meta Tags Injected (30+)

**Standard SEO:** `description`, `keywords`, `robots`, `googlebot`, `bingbot`, `author`, `language`
**Academic citation:** `citation_title`, `citation_author`, `citation_publication_date`, `citation_online_date`, `citation_lastdate`, `citation_journal_title`, `citation_language`, `citation_public_url`, `citation_keywords`, `citation_reference` (up to 20)
**Dublin Core:** `DC.title`, `DC.creator`, `DC.date`, `DC.language`, `DC.identifier`
**Open Graph:** `og:locale`, `og:site_name`, `og:type`, `og:title`, `og:description`, `og:url`, `og:image`, `og:image:width`, `og:image:height`
**Twitter Card:** `twitter:card` (summary_large_image), `twitter:title`, `twitter:description`, `twitter:image`
**Link:** `canonical`, `alternate` hreflang

### 53.3 JSON-LD Schemas (15 types)

All wrapped in `@graph` array. Site-wide base graph (Organization + WebSite) present on every page. Additional schemas per page type:
- Article: NewsArticle + TechArticle [+ ScholarlyArticle], CreativeWork (benchmark), FAQPage, BreadcrumbList
- Category: CollectionPage, BreadcrumbList
- Tag: CollectionPage, ItemList, BreadcrumbList
- Glossary: DefinedTerm, FAQPage, BreadcrumbList
- Topic Hub: CollectionPage, FAQPage, ItemList, BreadcrumbList
- Series: CollectionPage, ItemList, BreadcrumbList
- Author/Profile: ProfilePage, Person, BreadcrumbList
- Listing pages: CollectionPage (articles, authors, newsletter, jobs, courses, membership)
- Newsletter issue: Article, BreadcrumbList
- Search: base graph only
- Fallback/home: WebPage

### 53.4 Wikidata Entity Mapping

26 Persian/English terms → Wikidata URLs. Examples:
- `هوش مصنوعی` → Q11660
- `rag` → Q108745802
- `امنیت سایبری` → Q3510502
- `quantum computing` → Q11190
- `deep learning` → Q197536

### 53.5 Constants

- `SITE_URL`: `VITE_SITE_URL` env or `https://www.teknav.ir`
- `SITE_NAME`: `تکناو`
- `DEFAULT_TITLE`: `تکناو | تحلیل فناوری، هوش مصنوعی و امنیت سایبری`
- `DEFAULT_IMAGE`: `{SITE_URL}/images/og/default.jpg`

---

## 54. CAPTCHA WIDGET (TeknavCAP.jsx)

### 54.1 Visual Design

**Container:** `direction: rtl`, flex row, gap `12px`, flexWrap wrap, marginBottom `8px`

**CAPTCHA image area:**
- Border: `2px solid #E4DDD2`, borderRadius `8px`, padding `8px`
- Background: `#fff`
- Cursor: pointer (click to refresh)
- Min dimensions: 200×80px
- Centered content
- Title: "برای تازه‌سازی کلیک کنید"

**Refresh button:**
- Background: `#0F6B73`, color `#fff`
- Border: none, borderRadius `8px`
- Padding: `10px 16px`
- Font: `13px`, Vazirmatn, weight `600`
- Opacity: `0.6` when loading
- Text: "↻ تازه‌سازی"

**Input field:**
- Full width, `padding: 10px 14px`
- Border: `1px solid #E4DDD2`, borderRadius `8px`
- Font: `14px`, monospace, `letterSpacing: 0.1em`, centered
- Focus: border-color `#0F6B73`
- Placeholder: "کد امنیتی را وارد کنید"
- Max length: 10, dir="ltr"

**Loading text:** `fontSize: 13; color: #5F6B6D` — "در حال بارگذاری..."
**Error text:** `fontSize: 12; color: #C94C4C` — "خطا در بارگذاری کپچا"

### 54.2 Interaction Flow

1. On mount: fetches `/api/v1/teknav-cap/generate`
2. Click image: refreshes captcha
3. Refresh button click: same
4. Input change: calls `onChange({ captchaId, userSolution })`
5. Error: displays message, logs to console

---

## 55. ICON SYSTEM (icon.jsx)

### 55.1 Function: iconNode(value, style)

- If `value` ends with `.svg`: renders `<span className="tek-icon" style={{ '--i': url("{value}"), ...style }} />`
- If `value` is anything else (text, emoji, symbol): returns value unchanged

### 55.2 CSS Behavior

- `.tek-icon`: `display: inline-block`, `width: 1em`, `height: 1em`, `background-color: currentColor`, `mask: var(--i) center / contain no-repeat`
- Inherits text color, scales with font size
- Icons are single-color, adaptive to surrounding text

### 55.3 Imported SVG Icons

34 SVG files in `src/assets/icons/`: bell, book-open, bookmark, bot, chart-column, clipboard-copy, crown, database, eye, flame, globe, graduation-cap, heart, image, laptop, library, lightbulb, link, lock, mail, map-pin, medal, pen-line, pencil, ruler, scroll, settings, share-2, sprout, square-pen, star, thumbs-up, triangle-alert, waves, zap

---

## 56. PAGES LAYOUT COMPLETE REFERENCE (teknav-pages.jsx)

### 56.1 SearchPage

**Layout:** two-column: sidebar (240px) + results, gap 32px
**Filters:** category (select), author (select), type (select), clear button
**Highlight:** `<mark>` with background `#D49A2A30`, color `#263238`, borderRadius `2px`
**Search result:** `padding: 24px 0`, borderBottom `1px solid #E4DDD2`, fadeIn animation

### 56.2 CategoryPage

**Hero:** gradient `linear-gradient(135deg, ${cat.color}18 0%, #F4EFE6 100%)`
**Grid:** 1fr 320px (text + diagram), responsive at 768px
**Category badge:** color+20 bg, full color text, 4px radius
**H1:** clamp(28px,5vw,42px), 900 weight
**Stats:** flex gap 32, wrap
**Diagram card:** white bg, 12px radius, 20px padding, shadow

### 56.3 AuthorsListPage

**H1:** 32px, 900 weight
**Grid:** repeat(auto-fill, minmax(300px,1fr)), gap 20px
**Card:** white bg, 14px radius, 24px padding, hover translateY(-3px) + shadow
**Avatar:** 60px
**Verified badge:** fontSize 10, bg `#0F6B7314`, border `#0F6B7330`, borderRadius 999
**Bio:** truncated to 120 chars

### 56.4 TagPage

**H1:** 30px, 900 weight
**Articles list:** same pattern as CategoryPage article list

### 56.5 GlossaryPage

**Hero:** gradient `linear-gradient(135deg,#FFFFFF 0%,#F4EFE6 100%)`
**Grid:** `1.1fr 0.9fr` (content + sidebar), responsive at 850px
**FAQs card:** white bg, 8px radius, border 1px #E4DDD2
**FAQ item:** borderTop divider, padding 14px 0
**Related terms:** pill buttons in flex wrap
**Topic button:** white bg, 8px radius, 18px padding

### 56.6 TopicHubPage

**Topic hero** with follow toggle + guest push subscription
**FAQs section** with Question/Answer pairs
**Series section** listing related series
**Authors section** listing topic authors
**Related articles section**

### 56.7 SeriesPage

**H1:** 30px, 900 weight
**Article list:** grid gap 14px
**Position circle:** 36px, borderRadius 999, bg `#0F6B73`, color `#fff`, weight 900
**Loading:** min-height 60vh, centered

### 56.8 NewsletterArchivePage

**H1:** 32px, 900 weight
**List:** grid gap 14px
**Item:** white bg, 10px radius, 18px padding
**Subject:** 18px, 800 weight
**Date:** fontSize 12, color `#5F6B6D`

### 56.9 NewsletterIssuePage

**Article:** maxWidth 760px, centered
**Content body:** fontSize 16, lineHeight 2, color #263238, white bg, 12px radius, 24px padding, dangerouslySetInnerHTML

### 56.10 JobsPage

**Grid:** 1fr 360px (list + form), responsive at 850px
**Job card:** white bg, 12px radius, 18px padding
**Form:** white bg, 12px radius, 18px padding, grid gap 10px
**Form fields:** company, title (required), location, remote checkbox, contactEmail, url, description (required, minHeight 110px)

### 56.11 CoursesPage

**H1:** 32px, 900 weight
**Grid:** repeat(auto-fit, minmax(260px,1fr)), gap 16px
**Card:** white bg, 12px radius, 20px padding
**Level:** color #0F6B73, fontSize 12, weight 800
**Price:** color #D49A2A, weight 900

### 56.12 MembershipPage

**Premium banner:** bg `#0F6B7318`, border `#0F6B7340`, 12px radius
**Feature grid:** repeat(auto-fit, minmax(240px,1fr)), gap 16px
**Subscribe button:** gradient `#D49A2A→#B8821E`, color `#fff`, 14px, 700 weight, borderRadius 10px, padding 14px 36px

### 56.13 MembershipSuccessPage

**Crown icon:** fontSize 56px
**H1:** 26px, 900 weight
**Home button:** pillBtn, bg #0F6B73, color #fff

### 56.14 Legal Pages (shared.jsx)

**LegalPage:** maxWidth 820px, heading h1 28px 800 weight, gold accent bar (3px, 48px, #D49A2A), content card (white bg, 12px radius, 36px 40px padding, fontSize 14, color #374549)
**LegalSection:** marginBottom 32px, h2 16px 700 weight, borderRight 3px solid #0F6B73, paddingRight 10px

### 56.15 AboutPage

**Sections:** bullet points with `#0F6B73` dot indicators (8px circle)
**Buttons:** primary teal btn + outline teal btn

### 56.16 ContactPage

**Contact cards grid:** repeat(auto-fit, minmax(200px,1fr))
**Form:** grid, name+email row 1fr 1fr, inputs bg #FAF7F0, border #D8D0C4, borderRadius 8px, padding 11px 14px
**Submit:** bg #0F6B73, color #fff, pillBtn
**Success state:** checkmark 56px, h2 22px 800 weight

### 56.17 PrivacyPolicyPage / TermsOfUsePage

**7 sections each**, each with LegalSection
List style: `disc`, paddingRight 20px

### 56.18 ToolsPage

**Tool listing** with cards linking to NLP normalizer and RAG calculator

### 56.19 NlpNormalizerPage

**Textarea style:** `width: 100%; minHeight: 180; background: #FAF7F0; border: 1px solid #D8D0C4; borderRadius: 8; padding: 12px 16px; fontSize: 14; fontFamily: Vazirmatn; color: #263238; lineHeight: 1.7; resize: vertical`
**Options panel:** bg #FAF7F0, border 1px #E4DDD2, 10px radius, 18px padding
**Options grid:** repeat(auto-fit, minmax(200px,1fr)), checkbox accentColor #0F6B73
**Button:** bg #0F6B73 + outline cancel btn
**Citation:** borderTop divider, code block bg #FAF7F0, monospace

### 56.20 RagCalculatorPage

**Textarea:** same style as NlpNormalizer
**Settings panel:** bg #FAF7F0, border 1px #E4DDD2, 10px radius, 18px padding
**Parameter grid:** repeat(auto-fit, minmax(180px,1fr))
**Number inputs:** `padding: 10px 12px; border: 1px solid #D8D0C4; borderRadius: 8; fontSize: 14`
**Results section:** stats grid (3 columns), chunk list with numbered headers
**Chunk card:** border 1px #E4DDD2, 10px radius, header bg #FAF7F0

### 56.21 TekRagHubPage

**Benchmark hub** with citations, links to HuggingFace/Zenodo/GitHub
**Static content** from TeknavData + TekRAG article

### 56.22 DirectoryListPage

**H1:** clamp(22px,4vw,30px), color #0C1E22
**Grid:** repeat(auto-fill, minmax(280px,1fr)), gap 16px
**Card:** white bg, 12px radius, 20px padding, hover shadow
**Verified badge:** bg #E8F5E9, color #2E7D32, borderRadius 20px
**Tech tags:** bg #F4EFE6, color #263238, borderRadius 20px

### 56.23 CompanyProfilePage

**Hero:** bg #0C1E22, 16px radius, 28px padding
**Company name:** clamp(20px,4vw,28px), color #fff, 800 weight
**Verified badge:** bg #D49A2A, color #0C1E22, borderRadius 20px
**Description:** color rgba(255,255,255,0.8), fontSize 15px
**Website button:** bg #0F6B73, color #fff, borderRadius 8px
**Tech tags:** bg #E4DDD2, color #263238, borderRadius 20px
**Claim card:** bg #F8F5F0, 12px radius, 24px padding

### 56.24 ComparisonsListPage

**H1:** clamp(22px,4vw,32px), color #0C1E22
**Search:** inputStyle, maxWidth 400px
**List:** flex column, gap 14px
**Card:** white bg, 12px radius, 20px 24px padding, hover shadow
**Category pills:** bg per CATEGORY_COLORS map, color #fff, borderRadius 20px
**Item badges:** green (E8F5E9 bg, #2E7D32 text) / orange (FFF3E0 bg, #E65100 text)

### 56.25 ComparisonPage (Detail)

**ComparisonVoteBar:** bg #F8F5F0, 12px radius, 20px 24px padding
- Vote buttons: flex 1, 9px 16px padding, borderRadius 8px, fontWeight 700
  - Item1 active: bg #0F6B73, color #fff, border 2px solid #0F6B73
  - Item2 active: bg #D49A2A, color #fff, border 2px solid #D49A2A
  - Inactive: white bg, border 2px solid #E4DDD2
- Share button: bg #0C1E22, color #D49A2A, borderRadius 8px; shared: bg #2E7D32, color #fff

**Cards:** flex 1 1 300px, white bg, 12px radius, 24px padding, border 1px #E4DDD2
- h2: fontSize 20, 700 weight, color #0F6B73
- Pros: ✓ green (#2E7D32)
- Cons: ✗ red (#C62828)

**Use cases:** bg #F8F5F0, 12px radius, 24px padding
**Verdict:** bg #0F3540, color #fff, h2 #D49A2A
**Glossary terms:** white bg, border 1px #0F6B73, 8px radius
**Related articles:** white bg, border 1px #E4DDD2, 8px radius

### 56.26 StoriesListPage

**Grid:** repeat(auto-fill, minmax(160px,1fr)), gap 14px
**Card:** borderRadius 14px, overflow hidden, bg #0C1E22, paddingBottom 177%
**Image:** absolute, inset 0, object-fit cover, brightness 0.55
**Badge:** "▶ استوری", bg rgba(15,107,115,0.85), borderRadius 20px
**Bottom overlay:** gradient transparent→rgba(5,20,25,0.95)
**Category:** fontSize 11, color #D49A2A, 700 weight
**Title:** fontSize 12, color #fff, 600 weight

---

## 57. COMPLETE API ENDPOINT REFERENCE

### 57.1 Public Endpoints

| Path | Method | Module |
|---|---|---|
| `/api/v1/articles` | GET | content-api |
| `/api/v1/articles/:slug` | GET | content-api |
| `/api/v1/articles/:slug/related` | GET | content-api |
| `/api/v1/articles/:slug/comments` | GET | engagement-api |
| `/api/v1/articles/:slug/comments` | POST | engagement-api |
| `/api/v1/articles/:slug/qa` | GET | engagement-api |
| `/api/v1/articles/:slug/qa` | POST | engagement-api |
| `/api/v1/qa/questions/:id/answers` | POST | engagement-api |
| `/api/v1/articles/:id/reactions` | POST | content-api |
| `/api/v1/articles/:id/save` | POST | content-api |
| `/api/v1/comments/:id/like` | POST | engagement-api |
| `/api/v1/comments/:id/upvote` | POST | engagement-api |
| `/api/v1/comments/:id/flag` | POST | engagement-api |
| `/api/v1/series` | GET | content-api |
| `/api/v1/series/:slug` | GET | content-api |
| `/api/v1/search` | GET | content-api |
| `/api/v1/search/semantic` | POST | RAG/search |
| `/api/v1/rag/:slug` | GET | RAG/search |
| `/api/v1/categories` | GET | content-api |
| `/api/v1/categories/:slug` | GET | content-api |
| `/api/v1/authors` | GET | content-api |
| `/api/v1/authors/:slug` | GET | content-api |
| `/api/v1/jobs` | GET/POST | content-api |
| `/api/v1/courses` | GET | content-api |
| `/api/v1/newsletter` | POST | content-api |
| `/api/v1/newsletter/archive` | GET | content-api |
| `/api/v1/newsletter/archive/:slug` | GET | content-api |
| `/api/v1/analytics/events` | POST | content-api |
| `/api/v1/auth/me` | GET | auth |
| `/api/v1/auth/login` | POST | auth |
| `/api/v1/auth/logout` | POST | auth |
| `/api/v1/auth/signup` | POST | auth |
| `/api/v1/auth/2fa/verify` | POST | auth |
| `/api/v1/auth/oauth/:provider/start` | GET | auth |
| `/api/v1/auth/oauth/providers` | GET | auth |
| `/api/v1/auth/forgot-password` | POST | auth |
| `/api/v1/auth/reset-password` | POST | auth |
| `/api/v1/auth/email/verify/request` | POST | profile |
| `/api/v1/auth/email/verify/confirm` | POST | auth |
| `/api/v1/auth/otp/send` | POST | profile |
| `/api/v1/auth/otp/verify` | POST | profile |
| `/api/v1/auth/profile` | PUT | profile |
| `/api/v1/auth/avatar` | POST | profile |
| `/api/v1/auth/2fa` | PUT | profile |
| `/api/v1/auth/history` | GET/POST/DELETE | engagement-api |
| `/api/v1/auth/streaks` | GET | engagement-api |
| `/api/v1/auth/notifications` | GET | engagement-api |
| `/api/v1/auth/notifications/read-all` | POST | engagement-api |
| `/api/v1/auth/notifications/:id/read` | PATCH | engagement-api |
| `/api/v1/auth/notifications/:id` | DELETE | engagement-api |
| `/api/v1/auth/notifications/stream` | SSE | engagement-api |
| `/api/v1/auth/notifications/preferences` | GET/PUT | engagement-api |
| `/api/v1/auth/lists` | GET/POST | engagement-api |
| `/api/v1/auth/lists/:id` | DELETE | engagement-api |
| `/api/v1/auth/lists/:id/items` | POST | engagement-api |
| `/api/v1/auth/lists/:id/items/:itemId` | DELETE | engagement-api |
| `/api/v1/auth/lists/:id/reorder` | PUT | engagement-api |
| `/api/v1/auth/analytics/overview` | GET | engagement-api |
| `/api/v1/auth/analytics/articles` | GET | engagement-api |
| `/api/v1/auth/analytics/article/:slug` | GET | engagement-api |
| `/api/v1/auth/badges` | GET | engagement-api |
| `/api/v1/auth/push/vapid-key` | GET | engagement-api |
| `/api/v1/auth/push/subscribe` | POST | engagement-api |
| `/api/v1/auth/push/unsubscribe` | DELETE | engagement-api |
| `/api/v1/push/vapid-key` | GET | engagement-api |
| `/api/v1/push/guest-subscribe` | POST | engagement-api |
| `/api/v1/push/guest-unsubscribe` | DELETE | engagement-api |
| `/api/v1/profile/:slug` | GET | profile |
| `/api/v1/writers/:username/follow` | POST/DELETE | engagement-api |
| `/api/v1/writers/:username/followers` | GET | engagement-api |
| `/api/v1/topics/:slug/follow` | POST/DELETE | engagement-api |
| `/api/v1/topics/:slug/followers` | GET | engagement-api |
| `/api/v1/auth/following` | GET | engagement-api |
| `/api/v1/directory/companies` | GET | directory |
| `/api/v1/directory/companies/:slug` | GET | directory |
| `/api/v1/directory/companies/:companyId/claim` | POST | directory |
| `/api/v1/lms/paths` | GET | LMS |
| `/api/v1/lms/paths/:slug` | GET | LMS |
| `/api/v1/lms/me` | GET | LMS |
| `/api/v1/lms/quiz/:quizId/submit` | POST | LMS |
| `/api/v1/wiki/proposals` | POST | wiki |
| `/api/v1/glossary/proposals` | POST | wiki |
| `/api/v1/membership/status` | GET | membership |
| `/api/v1/membership/subscribe` | POST | membership |
| `/api/v1/membership/callback` | GET | membership |
| `/api/v1/errors` | POST | error tracking |
| `/api/v1/csp-report` | POST | error tracking |
| `/api/v1/teknav-cap/generate` | GET | captcha |
| `/api/v1/teknav-cap/verify` | POST | captcha |
| `/api/v1/health` | GET | backend |
| `/api/v1/ready` | GET | backend |

### 57.2 Admin Endpoints

| Path | Method | Module |
|---|---|---|
| `/api/v1/admin/dashboard` | GET | admin-api |
| `/api/v1/admin/health` | GET | admin-api |
| `/api/v1/admin/panel-metrics` | GET | admin-api |
| `/api/v1/admin/writer/dashboard` | GET | admin-api |
| `/api/v1/admin/analytics` | GET | admin-api |
| `/api/v1/admin/analytics/content` | GET | admin-api |
| `/api/v1/admin/analytics/newsletter` | GET | admin-api |
| `/api/v1/admin/analytics/engagement` | GET | admin-api |
| `/api/v1/admin/seo/audit` | GET | admin-api |
| `/api/v1/admin/articles` | GET/POST | admin-api |
| `/api/v1/admin/articles/:id` | PATCH/DELETE | admin-api |
| `/api/v1/admin/articles/:id/publish` | POST | admin-api |
| `/api/v1/admin/articles/:id/schedule` | POST | admin-api |
| `/api/v1/admin/articles/:id/corrections` | POST | admin-api |
| `/api/v1/admin/articles/:id/review` | PUT | admin-api |
| `/api/v1/admin/articles/:id/revisions` | GET | revisions |
| `/api/v1/admin/articles/:id/revisions/:revId` | GET | revisions |
| `/api/v1/admin/articles/:id/revisions/:revId/restore` | POST | revisions |
| `/api/v1/admin/articles/:id/heartbeat` | POST | presence |
| `/api/v1/admin/articles/:id/presence` | GET | presence |
| `/api/v1/admin/categories` | GET/POST | admin-api |
| `/api/v1/admin/categories/:id` | PATCH/DELETE | admin-api |
| `/api/v1/admin/tags` | GET/POST | admin-api |
| `/api/v1/admin/tags/:id` | DELETE | admin-api |
| `/api/v1/admin/authors` | GET/POST | admin-api |
| `/api/v1/admin/authors/:id` | PUT/DELETE | admin-api |
| `/api/v1/admin/users` | GET | admin-api |
| `/api/v1/admin/users/:id` | PATCH | admin-api |
| `/api/v1/admin/comments` | GET/DELETE | admin-api |
| `/api/v1/admin/comments/bulk` | POST | admin-api |
| `/api/v1/admin/comments/:id` | DELETE | admin-api |
| `/api/v1/admin/comments/:id/unflag` | PUT | admin-api |
| `/api/v1/admin/media` | GET | admin-api |
| `/api/v1/admin/media/:id` | DELETE | admin-api |
| `/api/v1/admin/uploads` | POST | admin-api |
| `/api/v1/admin/activity` | GET | admin-api |
| `/api/v1/admin/activity/export.csv` | GET | admin-api |
| `/api/v1/admin/reviews` | GET | admin-api |
| `/api/v1/admin/newsletter/subscribers` | GET | admin-api |
| `/api/v1/admin/newsletter/campaigns` | GET/POST | admin-api |
| `/api/v1/admin/newsletter/campaigns/:id/send` | POST | admin-api |
| `/api/v1/admin/series` | GET/POST | admin-api |
| `/api/v1/admin/series/:id` | PATCH/DELETE | admin-api |
| `/api/v1/admin/jobs` | GET | admin-api |
| `/api/v1/admin/jobs/:id` | PATCH | admin-api |
| `/api/v1/admin/errors` | GET | admin-api |
| `/api/v1/admin/errors/digest` | POST | admin-api |
| `/api/v1/admin/security/events` | GET | admin-api |
| `/api/v1/admin/directory/claims` | GET | admin-api |
| `/api/v1/admin/directory/claims/:id` | PATCH | admin-api |
| `/api/v1/admin/wiki/proposals` | GET | admin-api |
| `/api/v1/admin/wiki/proposals/:id` | PATCH | admin-api |
| `/api/v1/metrics` | GET | admin-api |
| `/api/v1/admin/stream` | SSE | admin-stream |

---

## 58. DIFF VIEWER COMPONENT (diff-viewer.jsx)

### 58.1 Visual Design

**Container:** `white-space: pre-wrap; direction: rtl; text-align: right; font-family: monospace; padding: 1rem; background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 8px; line-height: 1.6`

**Inline spans:**
- Added text: `color: #10b981` (emerald green), `background: rgba(16, 185, 129, 0.1)`, `padding: 2px 4px`, `border-radius: 4px`
- Removed text: `color: #ef4444` (red), `background: rgba(239, 68, 68, 0.1)`, `text-decoration: line-through`, `padding: 2px 4px`, `border-radius: 4px`
- Unchanged: `color: inherit`, `background: transparent`

**Algorithm:** Uses `diff` library's `diffWordsWithSpace`

---

## 59. KNOWLEDGE GRAPH COMPONENT (knowledge-graph.jsx)

### 59.1 Visual Design

**Container:** `overflow: hidden; border-radius: 12px; border: 1px solid var(--border-color); background-color: var(--bg-surface)`
**SVG:** `width: 100%; height: auto; display: block`

**D3 Force Simulation (800×600 default):**
- Link distance: 100
- Charge strength: -300
- Links: `stroke: var(--border-color)`, `stroke-opacity: 0.6`
- Nodes: `r=8`, `stroke: #fff`, `stroke-width: 1.5`
  - Group 1: `fill: var(--primary-color)` (#0F6B73)
  - Other: `fill: var(--brand-muted)`
- Labels: `font-size: 12px`, `fill: var(--text-color)`, `text-anchor: middle`, `dy=-12`
- Title tooltips (native SVG title)
- Drag: alphaTarget 0.3 with pinning

---

## 60. DIRECTORY PANEL (DirectoryPanel.jsx)

### 60.1 Visual Design

**Container:** `padding: 2rem; max-width: 1200px; margin: 0 auto; direction: rtl`
**Header:** flex justify-between, H1 "دایرکتوری فناوری و استارتاپ‌ها"
**Grid:** `grid gap-6 md:grid-cols-2 lg:grid-cols-3`
**Card:** `p-6 bg-bg-surface border border-border rounded-xl shadow-sm hover:shadow-md transition-shadow flex flex-col`
**Logo:** `w-16 h-16 rounded-lg object-cover` (or fallback with first char)
**Company name:** `text-xl font-bold`
**Industry:** `text-sm text-brand-muted`
**Description:** `text-sm mb-6 flex-grow`
**Website link:** `text-xs px-2 py-1 bg-border rounded hover:bg-brand hover:text-white transition-colors`
**Claimed badge:** `mt-auto pt-4 border-t border-border/50 text-xs text-brand-muted flex items-center gap-2` with green dot
**Empty:** `col-span-full py-12 text-center text-brand-muted border-2 border-dashed border-border rounded-xl`

---

## 61. LMS PANEL (LmsPanel.jsx)

### 61.1 Visual Design

**Container:** `padding: 2rem; max-width: 1000px; margin: 0 auto; direction: rtl`
**Header:** H1 "دوره‌های آموزشی و مسیرهای یادگیری"
**Certificates section:** `mb-8 p-6 bg-green-900/20 border border-green-500/30 rounded-xl`
- H2: "گواهینامه‌های شما" — `text-green-400`
- Grid: `md:grid-cols-2`

**Learning paths section:** H2 "مسیرهای یادگیری"
- Grid: `md:grid-cols-2`
- Card: `p-6 bg-bg-surface border border-border rounded-xl shadow-sm`
- Module list with order badges: `w-6 h-6 rounded-full bg-brand/10 text-brand flex items-center justify-center text-xs`
- Button: `w-full py-2 bg-brand text-white rounded-lg font-medium` → "شروع یادگیری"

---

## 62. SERVICE WORKER DESIGN (service-worker.js)

### 62.1 Cache

- **Cache name:** `teknav-v5`
- **Pre-cached:** `/`, `/index.html`, `/manifest.json`, `/favicon.png`

### 62.2 Strategy (Network-first with cache fallback)

- Article pages (`/article/*`, `/`, `/articles`): fetch → cache success → fallback cache → fallback /index.html
- API articles (`/api/v1/articles`): network-only
- HTML pages (Accept: text/html): fetch → cache → fallback → /index.html
- Everything else: cache-first → network

### 62.3 Push Notifications

- Icon: `/icons/icon-192x192.png`
- Badge: `/icons/badge-72x72.png`
- Direction: `rtl`, lang: `fa`
- Default title: "تکناو", body: "", url: "/"
- Click: focuses/navigates to data.url

---

## 63. PWA MANIFEST (manifest.json)

- `name`: `"تکناو"`
- `short_name`: `"Teknav"`
- `description`: `"تحلیل فناوری، هوش مصنوعی و امنیت سایبری"`
- `display`: `"standalone"`
- `display_override`: `["window-controls-overlay", "standalone", "browser"]`
- `background_color`: `"#FAF7F0"` (matches page background)
- `theme_color`: `"#0F6B73"` (primary teal)
- `icons`: one entry — `512×512`, `image/png`, purpose `"any maskable"`, src `"/favicon.png"`

---

## 64. COMPLETE CSS ANIMATION SPEED REFERENCE

| Animation | Duration | Delay | Timing | Instances |
|---|---|---|---|---|
| heroReveal | 0.6–0.7s | 0.1s–1.35s (staggered) | cubic-bezier | Hero elements (6 elements) |
| slideUp | 0.25s–0.45s | 0 | ease / cubic-bezier | Toasts, modals, dropdowns |
| fadeIn | 0.3s | idx * 40ms | ease | Search results |
| shimmer | 1.4s | 0 | linear infinite | Skeleton loaders (all) |
| spin | 0.7s | 0 | linear infinite | Loading spinners |
| float-y | 3s | varies | ease-in-out infinite | Auth word bubbles |
| goldShimmer | 5s | 0 | linear infinite | Gold shimmer text |
| pulseRing | 2.2s | 0 | ease-in-out infinite | Live indicators |
| orbit | 44s / 9s | 0 | linear infinite | Auth rings |
| orbitR | 17s | 0 | linear infinite | Auth middle ring |
| tickerUp | 22s | 0 | linear infinite | Topic ticker |
| bgGrid | 38s | 0 | linear infinite | Auth bg grid |
| logoGlow | 4.5s | 0 | ease-in-out infinite | Auth logo |
| statReveal | 0.55s | 0–0.33s staggered | cubic-bezier | Brand stats |
| dividerExpand | 1.2s | 0.3s | ease | Auth divider |
| blink | 0.8s | 0 | ease-in-out infinite | Cursor |
| enReveal | 0.6–0.7s | 0.1–0.55s staggered | ease | English hero |
| enPulse | 2.2s | 0 | ease-in-out infinite | English pulse dot |
| CSS spin (diagram) | 20s / 4s | 0 | linear infinite | Diagram rings |
| Chart bar | 0.5s | 0 | ease | WeeklyChart bars |
| Article card entry | 0.4–0.5s | idx*60–100ms | ease | Cards staggered |
| Article row entry | 0.4s | idx*60ms | ease | List entries |
| WritingTip fade | 0.35s | 0 | ease | Tip transitions |
| SSE reconnect | 0–3s | varies | -- | Auto |

---

## 65. ADMIN ANALYTICS PANELS (AnalyticsPanel.jsx)

### 65.1 SEO Audit Panel (SeoAuditPanel)

**Summary badge:** `background: #fff; border: 1px solid #E4DDD2; borderRadius: 10; padding: 10px 18px; fontSize: 14; fontWeight: 700; color: BRAND.ink`
- Text: "{totalIssues} مشکل یافت شد در {issuesCount} مقاله"
- All-clear: `color: #2F8F6B; fontWeight: 700; fontSize: 14` — "✓ همه مقاله‌ها سالم هستند"

**Table:** Same admin table pattern
- Columns: مقاله, مشکلات, شدت
- Each issue row: alternating `#fff` / `#FDFBF7`
- Article title: clickable button, `color: BRAND.primary`, `fontWeight: 700`, `fontFamily: Vazirmatn`
- Issue pills: `background: s.bg; border: 1px solid s.color+33; borderRadius: 6; padding: 2px 8px; fontSize: 11; fontWeight: 600`
- Severity pill: `background: sev.bg; color: sev.color; border: 1px solid sev.color+33; borderRadius: 6; padding: 4px 10px; fontSize: 11; fontWeight: 700`
- Pagination: "قبلی" page "بعدی" with opacity 0.5 when disabled

**Severity levels (SEO_SEVERITY):**
- error: label "خطا", color `#C94C4C`, bg `#FEF2F2`
- warning: label "هشدار", color `#C8951C`, bg `#FFFBEB`
- info: label "پیشنهاد", color `#0F6B73`, bg `#F0FDFA`

**Missing field to severity mapping:**
- error: metaDescription, ogTitle, ogDescription
- warning: keywords, ogImage, canonicalPath
- info: everything else

### 65.2 Engagement Analytics Panel (EngagementAnalyticsPanel)

**Weekly bar chart:**
- Container: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 18`
- Bars: `display: flex; gap: 4; alignItems: flex-end; height: 100`
- Bar: `width: 100%; background: BRAND.primary (#0F6B73); borderRadius: 4px 4px 0 0; height: value%`
- Labels: rotated -35deg, fontSize 9, color `#5F6B6D`

**Event type table:**
- Columns: نوع رویداد, تعداد, درصد
- Percent: "X٪" or "—"
- Empty: `<EmptyState title="هنوز رویدادی ثبت نشده است" />`

**Top 5 articles:**
- Each row: `display: flex; justifyContent: space-between; padding: 8px 0; borderBottom: 1px solid #E4DDD2`
- Title: `fontWeight: 800; color: BRAND.ink`
- Count: `fontSize: 12; color: #5F6B6D`

### 65.3 Phase 9 Analytics Panel (Phase9AnalyticsPanel)

**Tab buttons:**
- Active: `background: BRAND.primary; color: #fff; border: 1px solid BRAND.primary`
- Inactive: `background: transparent; color: #5F6B6D; border: 1px solid #E4DDD2`
- Style: `borderRadius: 8; padding: 6px 16px; fontSize: 12; fontWeight: 600`

**Overview tab:**
- Stats grid: `repeat(auto-fit,minmax(160px,1fr)); gap: 12`
- Cards: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 16`
- Label: `fontSize: 12; color: #5F6B6D`
- Value: `fontSize: 24; fontWeight: 900; color: BRAND.primary`
- Stats displayed: comments, saves, newsletter subscribers

**Top articles section:**
- Container: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 18`
- H3: `margin: 0; fontSize: 15; color: BRAND.ink`
- Each article: `display: flex; justifyContent: space-between; padding: 10px 0; borderBottom: 1px solid #E4DDD2`
- Title: `fontSize: 13; fontWeight: 800; color: BRAND.ink`
- Views: `fontSize: 12; color: #5F6B6D`

### 65.4 Jobs Moderation Panel (JobsPanel)

**Filter:** select with inputStyle, width 160
- Options: همه وضعیت‌ها, در انتظار, تأیید شده, رد شده

**Status labels/colors:**
- pending: #D49A2A, "در انتظار"
- approved: #0F6B73, "تأیید شده"
- rejected: #C46A4D, "رد شده"

**Status badge:** `background: statusColor+22; color: statusColor; borderRadius: 6; padding: 2px 10px; fontWeight: 700; fontSize: 12`

**Table:** Same admin table pattern, columns: شرکت, عنوان, موقعیت, وضعیت, تاریخ, عملیات
- Action: "تأیید" button (background `#0F6B7318`, color `#0F6B73`) / "رد" button (background `#C46A4D18`, color `#C46A4D`)

**Empty:** "هیچ آگهی یافت نشد" — centered, padding 40
**Loading:** "در حال بارگذاری..."

### 65.5 Client Errors Panel (ClientErrorsPanel)

**Daily error bar chart:**
- Container: `background: #fff; border: 1px solid BRAND.line; borderRadius: 12; padding: 20`
- 30-day bars: `display: flex; alignItems: flex-end; gap: 3; height: 60`
- Each bar: `flex: 1; height: calculated; background: #C46A4D88; borderRadius: 2; minWidth: 4`

**Top errors list:**
- Each: `borderBottom: 1px solid BRAND.line; padding: 8px 0; display: flex; justifyContent: space-between`
- Message: `fontSize: 12; word-break: break-all`
- Count: `color: #C46A4D; fontWeight: 700` — "{count} بار"
- Date: `color: BRAND.muted`

**Recent errors:**
- Each: `borderBottom: 1px solid BRAND.line; padding: 8px 0; fontSize: 12`
- Message: `color: BRAND.ink`
- Meta: `color: BRAND.muted; display: flex; gap: 12`

**Empty states:** "خطایی ثبت نشده است"
**Error state:** "خطا در بارگذاری اطلاعات"
**Loading:** "در حال بارگذاری..."

---

## 66. NEWSLETTER PANEL (NewsletterPanel.jsx)

### 66.1 Layout

**Grid:** `display: grid; gap: 18; direction: rtl`

### 66.2 Subscriber Count

`background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 16`
Text: "مشترکان واقعی API: {count}"

### 66.3 Create Campaign Form

`background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 16; display: grid; gap: 10`
- Subject input: inputStyle, placeholder "موضوع کمپین", dir rtl
- Body textarea: inputStyle + minHeight 140, placeholder "HTML خبرنامه", dir rtl
- Submit: pillBtn + background BRAND.primary, color #fff, justifySelf start, text "ذخیره کمپین"

### 66.4 Campaign List

Each campaign card: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 16`
- Subject: `fontWeight: 900; color: BRAND.ink`
- Status: `fontSize: 12; color: #5F6B6D; margin: 6px 0 12px` — "ارسال‌شده به X" or "آماده ارسال"
- Send button: pillBtn + background BRAND.primary, color #fff, text "ارسال"

---

## 67. REVIEW PANEL (ReviewsPanel.jsx)

### 67.1 Layout

Each review card: `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 16; marginBottom: 12; direction: rtl`
- Article title: `fontWeight: 900; color: BRAND.ink; marginBottom: 4`
- Status line: `fontSize: 12; color: #5F6B6D; marginBottom: 12` — "{status} · {reviewer name}"

**Action buttons:** flex wrap, gap 8
- "تأیید": pillBtn + background `#0F6B73`, color `#fff`
- "نیاز به اصلاح": pillBtn + background `#F4EFE6`, color `#C46A4D`, border `1px solid #E4DDD2`
- "رد": pillBtn + background `#C94C4C`, color `#fff`

**Empty:** PanelState with title "موردی در گردش بررسی وجود ندارد"

---

## 68. SERIES MANAGEMENT PANEL (SeriesPanel.jsx)

### 68.1 Layout

**Grid:** `display: grid; gap: 18; direction: rtl`

**Create form:** `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 16; display: grid; gap: 10`
- Title input: inputStyle, placeholder "عنوان سری", dir rtl
- Description textarea: inputStyle + minHeight 80, placeholder "توضیح کوتاه", dir rtl
- Submit: pillBtn + background BRAND.primary, color #fff, justifySelf start, text "ایجاد سری"

**Series list:** each card `background: #fff; border: 1px solid #E4DDD2; borderRadius: 12; padding: 16`
- Title: `fontWeight: 900; color: BRAND.ink`
- Meta: `fontSize: 12; color: #5F6B6D; marginTop: 4` — "{N} مقاله · /series/{slug}"
- Empty: `<EmptyState title="هنوز سری مقاله‌ای در API نیست" />`

---

## 69. SIDEBAR ITEMS COMPLETE (Shared.jsx)

### 69.1 Admin Role (17 items)

| ID | Label | Icon |
|---|---|---|
| dashboard | داشبورد | ◈ |
| articles | مدیریت مقاله‌ها | ◉ |
| create | مقاله جدید | ⊕ |
| users | مدیریت کاربران | ◐ |
| authors | مدیریت نویسندگان | penLineIcon |
| media | کتابخانه رسانه | ▣ |
| comments | نظرها | ◌ |
| analytics | تحلیل محتوا | ▤ |
| reviews | گردش بررسی | ◇ |
| newsletter | خبرنامه | mailIcon |
| series | سری مقاله‌ها | ▥ |
| categories | دسته‌بندی‌ها | ⬡ |
| tags | برچسب‌ها | ⬟ |
| seo-audit | ممیزی SEO | ◈ |
| jobs | آگهی‌های شغلی | ◑ |
| client-errors | خطاهای کلاینت | triangleAlertIcon |
| activity | گزارش فعالیت | ◷ |

### 69.2 Editor Role (11 items)
dashboard, articles, create, authors, media, comments, analytics, reviews, newsletter, series, categories

### 69.3 Writer Role (5 items)
dashboard, create, articles, analytics, reviews

### 69.4 Reviewer Role (3 items)
dashboard, articles, reviews

### 69.5 BRAND Colors (Shared.jsx)

| Key | Hex |
|---|---|
| primary | #0F6B73 |
| primaryDark | #073F45 |
| ink | #0F2A2E |
| muted | #5F6B6D |
| cream | #FAF7F0 |
| panel | #F4EFE6 |
| line | #E4DDD2 |
| gold | #D49A2A |
| terracotta | #C46A4D |

### 69.6 Diagram Choices

- 18 base diagrams: neural, pipeline, growth, cyber, chip, arch, timeline, wave, orbit, brain, database, cloud, quantum, vla, dna, fusion, satellite, blockchain
- 192 generated diagrams: diagram-001 through diagram-192
- Total: 210 choices

### 69.7 Role Names

| Role | Persian |
|---|---|
| admin | مدیر کل |
| editor | سردبیر |
| writer | نویسنده |
| reviewer | بازبین |

---

## 70. TEKNAV-PAGES COMPLETE EXPORT MAP (index.js)

All 27 page components exported from `src/pages/index.js`:
SearchPage, CategoryPage, TagPage, GlossaryPage, AuthorsListPage, AuthorProfilePage, SeriesPage, TopicHubPage, NewsletterArchivePage, NewsletterIssuePage, JobsPage, CoursesPage, MembershipPage, MembershipSuccessPage, PrivacyPolicyPage, TermsOfUsePage, AboutPage, ContactPage, ToolsPage, NlpNormalizerPage, RagCalculatorPage, TekRagHubPage, ComparisonPage, DirectoryListPage, CompanyProfilePage, ComparisonsListPage, StoriesListPage

Plus 4 exported from `teknav-pages.jsx` directly: SearchPage, CategoryPage, TagPage, GlossaryPage (and everything else above)

---

## 71. AUTHOR PROFILE PAGE RENDER (AuthorProfilePage.jsx)

### 71.1 Hero Section

**Background:** `linear-gradient(135deg,#20343A,#0F2830)` — dark teal gradient
**Padding:** `48px 24px`
**Layout:** flex, gap 28, wrap
**Avatar:** AuthorAvatar size 96
**Name:** `fontSize: 28; fontWeight: 900; color: #FAF7F0; display: flex; alignItems: center; gap: 10; flexWrap: wrap`
**Verified badge:** `fontSize: 12; color: #D49A2A; background: rgba(212,154,42,0.12); border: 1px solid rgba(212,154,42,0.45); borderRadius: 999; padding: 3px 10px`
**Verification note:** `color: #CFE2DD; fontSize: 12; marginBottom: 8`
**Specialty:** `fontSize: 14; color: #D49A2A; fontWeight: 600; marginBottom: 10`
**Bio:** `fontSize: 14; color: #90A4AE; lineHeight: 1.8; margin: 0 0 16px; maxWidth: 520`
**Stats:** flex gap 24
- Number: `fontSize: 22; fontWeight: 800; color: #D49A2A`
- Label: `fontSize: 12; color: #90A4AE; marginRight: 4`

### 71.2 Articles Section

**Max-width:** 900, padding 32px 24px
**H2:** `fontSize: 20; fontWeight: 700; color: #263238; margin: 0 0 24px`
**Empty:** `<EmptyState title="مقاله‌ای منتشر نشده" />`

### 71.3 Note

This component immediately redirects via `navigate(/profile/@${username})`, so it serves as a transitional page. The full UI is rendered by the UserProfilePage component.

---

## 72. AUTHORS LIST PAGE COMPLETE (AuthorsListPage.jsx)

### 72.1 Layout

**Outer:** paddingTop 80, bg #FAF7F0, minHeight 100vh
**Inner:** maxWidth 1100, padding 0 24px, direction rtl
**Header:** paddingTop 32, paddingBottom 32, borderBottom 1px solid #E4DDD2
- H1: fontSize 32, fontWeight 900, color #263238
- Subtitle: fontSize 15, color #5F6B6D

### 72.2 Author Cards

**Grid:** `repeat(auto-fill, minmax(300px, 1fr))`, gap 20, padding 32px 0
**Card:** bg #fff, border 1px #E4DDD2, borderRadius 14, padding 24, cursor pointer, direction rtl, transition all 0.2s
- Hover: `transform: translateY(-3px); boxShadow: 0 10px 32px rgba(0,0,0,0.08)`
- Avatar: AuthorAvatar size 60
- Name: fontSize 16, fontWeight 700, color #263238, flex gap 6 wrap
- Verified badge: fontSize 10, color #0F6B73, bg #0F6B7314, border #0F6B7330, borderRadius 999, padding 2px 7px
- Specialty: fontSize 12, color #5F6B6D, marginBottom 6
- Article count: fontSize 12, color #0F6B73, fontWeight 600
- Bio: fontSize 13, color #5F6B6D, lineHeight 1.7, margin 0 0 16px, truncated 120 chars
- Latest article badge: bg #F4EFE6, borderRadius 8, padding 10px 14px, fontSize 12, color #263238

---

## 73. TOPIC HUB PAGE COMPLETE (TopicHubPage.jsx)

### 73.1 Hero Section

**Background:** `linear-gradient(135deg, ${category.color}18, #F4EFE6)`
**Padding:** 44px 24px
**Back button:** pillBtn, bg #FFFFFFAA, color #0F6B73, border 1px solid #E4DDD2
**H1:** clamp(30px,5vw,48px), fontWeight 900, color #263238
**Intro:** maxWidth 760, color #4F5D60, fontSize 16, lineHeight 1.95

### 73.2 Action Buttons

**Follow button:** pillBtn
- Following: bg #0F6B73, color #fff, text "دنبال می‌کنید · {count}"
- Not following: bg #fff, color #0F6B73, border 1px solid #0F6B7330, text "دنبال کردن موضوع · {count}"

**Push notification button:**
- Enabled: bg #fff, color #0F6B73, border 1px solid #0F6B7330, text "اعلان فعال است"
- Disabled: bg #FAF7F0, color #0F6B73, border 1px solid #0F6B7330, text "دریافت اعلان مقالات"
- Loading: opacity 0.6

### 73.3 Content Sections

**Featured articles section:** gap 14 grid, EmptyState "مقاله شاخصی برای این موضوع ثبت نشده است"
**Latest articles section:** ArticleRow list, EmptyState "هنوز مقاله‌ای در این موضوع منتشر نشده است"

**Series + Authors grid:** `repeat(auto-fit,minmax(260px,1fr)); gap: 18`
- Series card: bg #fff, border 1px #E4DDD2, borderRadius 12, padding 20
  - Series list buttons: display block, bg #F4EFE6, border 1px #E4DDD2, borderRadius 8, padding 12
  - Empty: "سری مقاله مرتبط پس از تایید سردبیر اینجا نمایش داده می‌شود."
- Authors card: bg #fff, border 1px #E4DDD2, borderRadius 12, padding 20
  - Author list buttons: flex, gap 10, bg transparent, padding 8px 0
  - AuthorAvatar size 36
  - Empty: "نویسنده مرتبطی پیدا نشد."

**FAQs section:** bg #fff, border 1px #E4DDD2, borderRadius 12, padding 20
- Each `<details>`: borderTop 1px solid #E4DDD2, padding 12px 0
- `<summary>`: fontWeight 700, color #263238
- Answer: color #5F6B6D, lineHeight 1.9

---

## 74. CONTACT PAGE FORM COMPLETE (ContactPage.jsx)

### 74.1 Contact Info Cards

**Grid:** `repeat(auto-fit, minmax(200px, 1fr))`, gap 16
**Card:** bg #FAF7F0, border 1px #E4DDD2, borderRadius 10, padding 16px 18px
- Icon: fontSize 22, marginBottom 6
- Label: fontSize 12, color #5F6B6D
- Value: fontSize 13, fontWeight 600, color #0F2A2E

### 74.2 Contact Form

**Field style:** bg #FAF7F0, border 1px #D8D0C4, borderRadius 8, padding 11px 14px, fontSize 14, Vazirmatn, color #263238, width 100%

**Name/Email row:** `gridTemplateColumns: 1fr 1fr`, gap 14
**Labels:** fontSize 12, fontWeight 600, color #5F6B6D, display block, marginBottom 5
**Required asterisk:** color #C46A4D
**Email input:** direction ltr
**Submit button:** bg #0F6B73, color #fff, borderRadius 8, padding 12px 28px, fontSize 14, fontWeight 600, alignSelf flex-start, text "ارسال پیام"

**Sent state:** centered layout, checkmark 56px, h2 "پیام شما ارسال شد" fontSize 22, body text, home button

---

## 75. TOOLS PAGE COMPLETE (ToolsPage.jsx)

### 75.1 Grid Layout

`repeat(auto-fit, minmax(280px, 1fr))`, gap 20

### 75.2 Tool Cards

Card: bg #FAF7F0, border 1px #E4DDD2, borderRadius 12, padding 24, flex column, space-between
- Icon: fontSize 32, marginBottom 12
- Title: fontSize 17, fontWeight 800, color #0F2A2E, marginBottom 10
- Description: color #5F6B6D, fontSize 13, lineHeight 1.8, marginBottom 20
- Button: bg #0F6B73, color #fff, borderRadius 8, padding 10px 18px, fontSize 13, fontWeight 600, width 100%, text "ورود به ابزار"

Two tools: NLP Normalizer, RAG Calculator

---

## 76. NLP NORMALIZER PAGE COMPLETE (NlpNormalizerPage.jsx)

### 76.1 Textarea Style

`width: 100%; minHeight: 180; background: #FAF7F0; border: 1px solid #D8D0C4; borderRadius: 8; padding: 12px 16px; fontSize: 14; fontFamily: 'Vazirmatn, sans-serif'; color: #263238; outline: none; lineHeight: 1.7; resize: vertical; boxSizing: border-box`

### 76.2 Options Panel

bg #FAF7F0, border 1px #E4DDD2, borderRadius 10, padding 18
**Grid:** `repeat(auto-fit, minmax(200px, 1fr))`, gap 12
**Checkbox labels:** flex, gap 10, cursor pointer, fontSize 13, color #374549, accentColor #0F6B73
Options: stripHtml, normalizeLetters, normalizeZwnj, cleanWhitespace

### 76.3 Buttons

**Normalize:** bg #0F6B73, color #fff, borderRadius 8, padding 12px 28px, fontSize 14, fontWeight 600, text "نرمال‌سازی متن"
**Back:** bg transparent, color #5F6B6D, border 1px #D8D0C4, borderRadius 8, padding 12px 20px, fontSize 14, fontWeight 600, text "بازگشت"

### 76.4 Output Section

Output textarea: same as input textarea + bg #fff
Copy button: bg #FAF7F0, border 1px #D8D0C4, borderRadius 6, padding 6px 12px

### 76.5 Citation Section

Code block: bg #FAF7F0, border 1px #E4DDD2, borderRadius 8, padding 12, fontSize 11, monospace, direction ltr

---

## 77. RAG CALCULATOR PAGE COMPLETE (RagCalculatorPage.jsx)

### 77.1 Settings Panel

bg #FAF7F0, border 1px #E4DDD2, borderRadius 10, padding 18
**Grid:** `repeat(auto-fit, minmax(180px, 1fr))`, gap 16
**Labels:** fontSize 12, color #5F6B6D, display block, marginBottom 5
**Number inputs:** width 100%, padding 10px 12px, border 1px #D8D0C4, borderRadius 8, fontSize 14, Vazirmatn

### 77.2 Results Section

**Summary stats:** `gridTemplateColumns: repeat(3, 1fr)`, gap 12
**Stat card:** bg #FAF7F0, border 1px #E4DDD2, borderRadius 8, padding 12, textAlign center
- Label: fontSize 11, color #5F6B6D
- Value: fontSize 16, fontWeight 800, color #0F2A2E

**Chunk cards:** `flexDirection: column; gap: 14`
- Header: bg #FAF7F0, borderBottom 1px #E4DDD2, padding 10px 16px, flex space-between
- Chunk label: fontSize 12, fontWeight 800, color #0F2A2E
- Copy button: bg #fff, border 1px #D8D0C4, borderRadius 4, padding 3px 8px, fontSize 11
- Body: padding 16, fontSize 13, lineHeight 1.8, color #263238, bg #fff, whiteSpace pre-wrap

### 77.3 Buttons

Same as NLP: "محاسبه و شبیه‌سازی" + "بازگشت"

---

## 78. TEKRAG HUB PAGE (TekRagHubPage.jsx)

### 78.1 Purpose

Academic benchmark hub for Persian RAG evaluation with citations, links to HuggingFace, Zenodo, GitHub

### 78.2 Content

Static content from TeknavData + TekRAG article data
- Citation information (DOI, version)
- Links to external platforms
- Benchmark description and methodology

---

## 79. MEMBERSHIP PAGE COMPLETE

### 79.1 Header

H1: fontSize 32, fontWeight 900, color #263238
Subtitle: color #5F6B6D, lineHeight 1.9, marginBottom 28

### 79.2 Premium Status Banner

bg #0F6B7318, border 1px #0F6B7340, borderRadius 12, padding 16px 20px, marginBottom 28
Text: "✓ شما در حال حاضر عضو ویژه هستید" + expiry date

### 79.3 Feature Cards

**Grid:** `repeat(auto-fit, minmax(240px, 1fr))`, gap 16, marginBottom 32
Each card: bg #fff, border 1px #E4DDD2, borderRadius 12, padding 20
- Icon: fontSize 24, marginBottom 8
- Title: fontSize 18, color #263238
- Body: color #5F6B6D, lineHeight 1.8

### 79.4 Subscribe Button (non-premium only)

`background: linear-gradient(135deg, #D49A2A, #B8821E); color: #fff; border: none; borderRadius: 10; padding: 14px 36px; fontSize: 16; fontWeight: 700`
- Normal: "شروع عضویت ویژه"
- Loading: "در حال اتصال به درگاه..." (opacity 0.7)

### 79.5 Membership Success Page

Crown emoji 56px, h1 "عضویت ویژه فعال شد!" fontSize 26, body text, home button (pillBtn bg #0F6B73)

---

## 80. SERIES PAGE COMPLETE

### 80.1 Layout

maxWidth 960, margin auto, padding 40px 24px
Back button: pillBtn, bg #F4EFE6, color #0F6B73, border 1px #E4DDD2
H1: fontSize 30, fontWeight 900, color #263238
Description: color #5F6B6D, fontSize 15, lineHeight 1.9

### 80.2 Article List

**Grid:** gap 14
Each row: `gridTemplateColumns: 44px 1fr`, gap 14, alignItems start
Position circle: 36px, borderRadius 999, bg #0F6B73, color #fff, display grid placeItems center, fontWeight 900

### 80.3 States

- Loading: "در حال بارگذاری..." — min-height 60vh, centered
- Error: `<EmptyState title="سری مقاله پیدا نشد" subtitle="این مجموعه در API وجود ندارد یا هنوز منتشر نشده است." />`
- Empty articles: `<EmptyState title="هنوز مقاله‌ای در این سری نیست" />`

---

## 81. NEWSLETTER PAGES COMPLETE

### 81.1 NewsletterArchivePage

**H1:** fontSize 32, fontWeight 900, color #263238, "آرشیو خبرنامه تکنـاو"
**List items:** bg #fff, border 1px #E4DDD2, borderRadius 10, padding 18, cursor pointer
- Subject: fontSize 18, fontWeight 800, color #263238
- Date: color #5F6B6D, fontSize 12
**Loading:** "در حال بارگذاری..."
**Empty:** `<EmptyState title="هنوز خبرنامه‌ای منتشر نشده است" />`

### 81.2 NewsletterIssuePage

**Content body:** fontSize 16, lineHeight 2, color #263238, bg #fff, border 1px #E4DDD2, borderRadius 12, padding 24, dangerouslySetInnerHTML
**H1:** fontSize 30, fontWeight 900, color #263238, lineHeight 1.45
**Date:** color #5F6B6D, fontSize 12, marginBottom 28
**Error:** `<EmptyState title="خبرنامه پیدا نشد" />`

---

## 82. MEMBERSHIP SUCCESS PAGE (MembershipSuccessPage.jsx)

**Layout:** centered flex, min-height 100vh
**Content:** maxWidth 480, textAlign center
- Crown emoji: fontSize 56, marginBottom 16
- H1: fontSize 26, fontWeight 900, color #263238, marginBottom 12
- Body: color #5F6B6D, lineHeight 1.9, marginBottom 28
- Button: pillBtn bg #0F6B73, color #fff, padding 12px 28px, fontSize 14, text "بازگشت به خانه"

---

## 83. JOBS PAGE COMPLETE

### 83.1 Layout

**Grid:** `1fr 360px`, gap 22, responsive at 850px → 1fr
**H1:** fontSize 32, fontWeight 900, "فرصت‌های شغلی فناوری"

### 83.2 Job Cards

bg #fff, border 1px #E4DDD2, borderRadius 12, padding 18
- Title: fontSize 18, color #263238
- Company: color #0F6B73, fontWeight 800, fontSize 13
- Location: color #5F6B6D, fontSize 12, "Remote" or city
- Description: color #5F6B6D, lineHeight 1.8, fontSize 13
- URL: color #0F6B73, fontWeight 800, "مشاهده و ارسال رزومه"
**Empty:** `<EmptyState title="هنوز آگهی منتشرشده‌ای وجود ندارد" />`

### 83.3 Job Submission Form

bg #fff, border 1px #E4DDD2, borderRadius 12, padding 18, alignSelf start
- H2: fontSize 17, color #263238, "ثبت آگهی شرکت"
- Inputs: inputStyle, various placeholders
- Remote checkbox: label flex gap 8, fontSize 13, color #263238
- Textarea: inputStyle + minHeight 110, resize vertical
- Submit: pillBtn bg #0F6B73, color #fff, text "ارسال برای بررسی" / "در حال ارسال..."

---

## 84. COURSES PAGE COMPLETE

### 84.1 Layout

maxWidth 1040, padding 40px 24px
**Grid:** `repeat(auto-fit, minmax(260px, 1fr))`, gap 16
**H1:** fontSize 32, fontWeight 900, "دوره‌های تخصصی تکناو"

### 84.2 Course Cards

bg #fff, border 1px #E4DDD2, borderRadius 12, padding 20
- Level: color #0F6B73, fontSize 12, fontWeight 800, marginBottom 8
- Title: color #263238, fontSize 19
- Summary: color #5F6B6D, lineHeight 1.9, fontSize 13
- Price: color #D49A2A, fontWeight 900, "X تومان" or "به‌زودی"

---

## 85. LEGAL PAGES COMPLETE

### 85.1 LegalPage Shell

**Wrapper:** paddingTop 88, paddingBottom 80, bg #FAF7F0, minHeight 100vh, Vazirmatn, direction rtl
**Inner:** maxWidth 820, margin auto, padding 0 24px
**Header:** marginBottom 40
- H1: fontSize 28, fontWeight 800, color #0F2A2E, fontFamily PelakFA
- Subtitle: fontSize 14, color #5F6B6D, lineHeight 1.8
- Gold bar: height 3, width 48, bg #D49A2A, borderRadius 2, marginTop 16
**Content card:** bg #fff, border 1px #E4DDD2, borderRadius 12, padding 36px 40px, lineHeight 1.95, color #374549, fontSize 14

### 85.2 LegalSection

marginBottom 32
H2: fontSize 16, fontWeight 700, color #0F2A2E, marginBottom 10, borderRight 3px solid #0F6B73, paddingRight 10

### 85.3 Privacy Policy (7 sections)

Section titles: اطلاعاتی که جمع‌آوری می‌کنیم, نحوه استفاده از اطلاعات, کوکی‌ها و ذخیره‌سازی محلی, امنیت اطلاعات, حقوق کاربر, تغییرات در این سیاست, تماس
List style: disc, paddingRight 20

### 85.4 Terms of Use (8 sections)

Section titles: پذیرش شرایط, محتوا و مالکیت معنوی, حساب کاربری, رفتار کاربران, سلب مسئولیت, تغییر خدمات, قانون حاکم, تماس

### 85.5 About Page (6 sections)

Section titles: تکناو چیست؟, حوزه‌های تخصصی, رویکرد ما, تیم, اطلاعات تماس
Domain list: 6 areas with #0F6B73 dot indicators (8px circle, 50% radius)
Buttons: "مشاهده تیم نویسندگان" (teal filled) + "تماس با ما" (teal outline)

---

## 86. DASHBOARD CATEGORY STATS (DashboardCategoryStats.jsx)

**Container:** white bg, 12px radius, 24px padding
**Each category row:** flex space-between, padding 8px 0, borderBottom 1px #E4DDD2
- Name: fontSize 13, color #263238
- Bar: width calculated (max(count*2, 20)), height 6px, bg category color or #0F6B73, borderRadius 3px, opacity 0.7
- Count: fontSize 12, color #5F6B6D

---

## 87. DASHBOARD TOP ARTICLES (DashboardTopArticles.jsx)

Each article: full-width button, bg transparent, borderBottom 1px #E4DDD2, padding 10px 0, textAlign right
- Title: fontSize 13, fontWeight 700, color #263238, lineHeight 1.6
- Meta: fontSize 11, color #5F6B6D, marginTop 2
- On click: navigate to /article/{slug}

---

## 88. LIVE ADMIN FEED SSE STREAM

**Endpoint:** `/api/v1/admin/stream`
**Event types:** `activity`, `view_update`, `visitor_update`
**Live metrics:** count (total visits), guests, users, commentsPerMin
**Up to 50 recent activity events** stored in state
**15-second auto-refresh** for panel metrics

---

## 89. PRESENCE TRACKING IN EDITOR

**Heartbeat:** POST `/api/v1/admin/articles/:id/heartbeat` every 30 seconds
**Editors list:** GET `/api/v1/admin/articles/:id/presence` every 30 seconds
**UI indicator:** "X نفر دیگر در حال ویرایش" — displayed when >1 editor
- Container: `background: #FFF8F0; border: 1px solid #F5C97A; borderRadius: 20; padding: 4px 10px; fontSize: 11; color: #7A5A00`
- Editor avatars: `width: 22px; height: 22px; borderRadius: 50%; background: #E07A3A; color: #fff; fontSize: 9; fontWeight: 800; border: 2px solid #fff`

---

## 90. SSE STREAMS SUMMARY

| Stream | Endpoint | Events | Usage |
|---|---|---|---|
| Admin live | `/api/v1/admin/stream` | activity, view_update, visitor_update | LiveAdminFeed, RoleMetricsPanel |
| Notification | `/api/v1/auth/notifications/stream` | notification | NotificationBell |
| View updates | `/api/v1/admin/stream` | view_update (articleId + views) | ArticlesManagement table |

---

## 91. COMPLETE RESPONSIVE LAYOUT CHANGES

### Breakpoint Summary Table

| Breakpoint | Layout Change | Components Affected |
|---|---|---|
| 980px | Editor grid → single column | ArticleEditor, ArtifactStudio |
| 900px | TOC hidden, article → single column | ArticleDetail (TekRAG) |
| 880px | Brand panel hidden, mobile logo shown | AuthPage |
| 850px | Glossary grid → single column | GlossaryPage |
| 850px | Jobs grid → single column | JobsPage |
| 768px | Desktop nav hidden, hamburger shown | Header |
| 768px | Category hero → single column | CategoryPage |
| 768px | Search layout → single column | SearchPage |
| 768px | Dashboard 2-col → 1-col | AdminDashboard |
| 768px | Sidebar hidden (overlay) | AdminSidebar |
| 640px | Sidebar fixed overlay | AdminSidebar mobile |
| 640px | Desktop header nav items hidden | Header nav |
| 640px | Mobile drawer at bottom | MobileDrawer |
| 560px | All aggressive mobile adjustments | Everything |
| 620px | EN article grid → 1 column | EnglishHomePage |

## 92. CSS MEDIA QUERY UTILITY CLASSES

```css
.desktop-nav { display: flex !important; }       /* Desktop: show */
.mobile-menu-btn { display: none !important; }    /* Desktop: hide */
@media (max-width: 768px) {
  .desktop-nav { display: none !important; }
  .mobile-menu-btn { display: flex !important; }
}

93. INLINE STYLE INJECTIONS

Component	Purpose	Approx Lines
teknav-ui.jsx Header	Nav responsive, keyframes, scrollbar	15
teknav-home.jsx HomePage	heroReveal keyframe, responsive	12
teknav-home.jsx HeroSection	heroReveal keyframe	5
teknav-articles.jsx ArticleDetail	articleCSS (full article styling), responsive	95
teknav-articles.jsx ArticleDetail	TekRAG LTR overrides, responsive	50
teknav-auth.jsx LoginPage	AuthStyles (animations, layout, inputs)	60
teknav-pages.jsx SearchPage	search-layout responsive	1
teknav-pages.jsx GlossaryPage	glossary-grid responsive	1
teknav-pages.jsx CategoryPage	cat-hero-grid responsive	1
teknav-pages.jsx JobsPage	jobs-grid responsive	1
teknav-pages.jsx TopicHubPage	(none inline)	0
teknav-profile.jsx UserProfilePage	profile responsive	6
teknav-home.jsx HomePage	featured-card responsive	10
admin/Dashboard.jsx AdminPanel	dash-grid + sidebar responsive	15

94. KEYBOARD SHORTCUTS

Shortcut	Action	Context
Ctrl+B	Bold (`<strong>`)	HtmlEditor textarea
Ctrl+I	Italic (`<em>`)	HtmlEditor textarea
Ctrl+S	Save article	ArticleEditor
Escape	Close modal	All modals (Confirm, ForgotPassword, Settings, QuoteSharer, ReadingList)
Enter (on input)	Submit search	Search bar, search form
Enter (on captcha input)	N/A	CAPTCHA (no enter handler)

95. DEPENDENCY INJECTION PATTERN

95.1 Provider Nesting (teknav-app.jsx)

<Root>
  <NavProvider>        ← SPA router (useNav)
    <AuthProvider>     ← Backend auth (useAuth)
      <ToastProvider>  ← Toast notifications (useToast)
        <InnerApp>
          <SeoManager />         ← Head SEO meta
          <Header />             ← Conditionally hidden
          <main>{renderPage()}</main>
          <Footer />             ← Conditionally hidden
          <InstallPrompt />      ← PWA install
          <PushNotificationPrompt />  ← Push subscribe
        </InnerApp>
      </ToastProvider>
    </AuthProvider>
  </NavProvider>
</Root>

Note: The App component (line 17) is a DUAL provider stack that is NOT used in production. The actual mount chain is Root → InnerApp.

95.2 Context Hooks

Hook	Returns	Provided By
`useNav()`	`{ page, navigate }`	NavProvider
`useAuth()`	`{ user, login, signup, logout, refreshMe, bootstrapping, verifyTwoFactor, startOAuth }`	AuthProvider
`useToast()`	`add(msg, type)`	ToastProvider

96. DATA ATTRIBUTES ON DOM ELEMENTS

Attribute	Value	Usage
`data-lang`	language name	Code blocks (e.g., "javascript")
`data-teknav-seo="jsonld"`	—	JSON-LD script tags for easy removal
`data-teknav-seo-list="true"`	—	Citation reference meta elements for easy removal

97. DOCUMENT HEAD MANIPULATION (SeoManager)

Elements created/updated on each page change:

<meta name="description">
<meta name="keywords">
<meta name="robots">
<meta name="googlebot">
<meta name="bingbot">
<meta name="author">
<meta name="language">
<meta name="citation_*"> (up to 20 citation references)
<meta name="DC.*">
<meta property="og:*"> (7 tags)
<meta name="twitter:*"> (4 tags)
<link rel="canonical">
<link rel="alternate" hreflang="...">
<script type="application/ld+json"> (single @graph containing all schemas)
document.title
document.documentElement.lang
document.documentElement.dir

Cleanup: Previous SEO elements are identified and removed before injection via:

Meta tags: identified by name or property attribute
Link tags: rel="canonical" and rel="alternate" replaced
JSON-LD: identified by data-teknav-seo="jsonld"
Citation references: identified by data-teknav-seo-list="true"

98. GRADIENT COLORS USED IN CANVAS (HeroBackground)

Three canvas neural network animations use these rgba color bases:

rgba(15,107,115, — Deep teal (brand)
rgba(196,106,77, — Terracotta
rgba(47,143,107, — Warm green

32 nodes total, colors cycle through the 3-color palette.

99. THREE.JS 3D SCENE SETUP (TekRagThree)

Renderer: WebGLRenderer, antialias: true, alpha: true, pixelRatio capped at 2, SRGBColorSpace Camera: PerspectiveCamera(45, aspect, 0.1, 100) Lighting:

AmbientLight(0xffffff, 0.7)
DirectionalLight(0xffffff, 1.4)
DirectionalLight(0xd49a2a, 0.8) — gold rim light

Materials: MeshStandardMaterial

Roughness: 0.48
Metalness: 0.12

Colors (hex for Three.js):

teal: 0x0f6b73
gold: 0xd49a2a
clay: 0xc76d4a
green: 0x2f8f6b
ink: 0x20343a
line: 0xe4ddd2
red: 0xc94c4c
cream: 0xf4efe6

Interaction:

Raycaster for hover detection
Drag rotation via pointer events
Auto-rotation: 0.003 rad/frame (lerp factor 0.08)

Canvas background: radial-gradient(circle at 50% 20%, #ffffff 0%, #f4efe6 42%, #e9f2f2 100%)

100. SITE-WIDE STATIC ASSET INVENTORY

100.1 Fonts (all self-hosted)

File	Type	Weight
Vazirmatn-Regular.ttf	TrueType	400
Vazirmatn-Medium.ttf	TrueType	500
Vazirmatn-SemiBold.ttf	TrueType	600
Vazirmatn-Bold.ttf	TrueType	700
Vazirmatn-ExtraBold.ttf	TrueType	800
Vazirmatn-Black.ttf	TrueType	900
PelakFA-Bold.woff	WOFF	700
PelakFA-ExtraBold.woff	WOFF	800
FiraCode-*.woff2	WOFF2	Multiple
FiraMono-*.woff2	WOFF2	Multiple

100.2 Icons (SVG, 34 files)

bell, book-open, bookmark, bot, chart-column, clipboard-copy, crown, database, eye, flame, globe, graduation-cap, heart, image, laptop, library, lightbulb, link, lock, mail, map-pin, medal, pen-line, pencil, ruler, scroll, settings, share-2, sprout, square-pen, star, thumbs-up, triangle-alert, waves, zap

100.3 OG Images (JPG, 37 files)

Generated at build time: /images/og/{slug}.jpg — one per article + default.jpg

100.4 Avatars (PNG, 3 files)

avatar-ahmadreza.png, avatar-arsam.png, avatar-radman.png

100.5 Sitemap Files (XML, 8 files)

sitemap.xml, sitemap-articles.xml, sitemap-companies.xml, sitemap-comparisons.xml, sitemap-en.xml, sitemap-main.xml, sitemap-news.xml, sitemap-stories.xml

100.6 Feed Files (XML, 10 files)

feed.xml, feeds/author-mahjoob.xml, feeds/author-radman-ghelichi.xml, feeds/author-sabbagh.xml, feeds/topic-ai.xml, feeds/topic-data.xml, feeds/topic-hardware.xml, feeds/topic-security.xml, feeds/topic-software.xml, feeds/topic-startup.xml

101. COMPLETE COMPONENT TREE HIERARCHY

index.html
  └── main.jsx (imports global.css + teknav-app.jsx)
      └── createRoot(#root).render(<Root />)
          ├── NavProvider
          │   └── AuthProvider
          │       └── ToastProvider
          │           └── InnerApp
          │               ├── SeoManager (null render)
          │               ├── Header (conditional)
          │               │   ├── Logo button
          │               │   ├── Desktop nav (9 items)
          │               │   ├── Search icon + search bar
          │               │   ├── NotificationBell
          │               │   │   └── Notification dropdown
          │               │   ├── Admin/Profile/Logout buttons (auth)
          │               │   └── Login button (anon)
          │               └── Mobile Drawer
          │               ├── <main> → renderPage()
          │               │   ├── HomePage
          │               │   │   ├── StreakWidget (auth)
          │               │   │   ├── ContinueReadingBar (auth)
          │               │   │   ├── HeroSection
          │               │   │   │   ├── HeroBackground (canvas)
          │               │   │   │   ├── CTA buttons
          │               │   │   │   └── FeaturedArticle
          │               │   │   ├── StatsBar + CountUp
          │               │   │   ├── Personalized Feed (ArticleCard grid)
          │               │   │   ├── Featured Article section
          │               │   │   ├── Latest Articles (grid)
          │               │   │   ├── Deep Analyses (ArticleRowCompact)
          │               │   │   ├── Popular (grid)
          │               │   │   ├── Categories grid
          │               │   │   ├── AuthorsSection
          │               │   │   └── NewsletterForm
          │               │   ├── EnglishHomePage
          │               │   ├── ArticleListPage
          │               │   │   ├── Search input
          │               │   │   ├── FilterBar
          │               │   │   └── ArticleRow (list)
          │               │   ├── ArticleDetail
          │               │   │   ├── ReadingProgress
          │               │   │   ├── Breadcrumb
          │               │   │   ├── TableOfContents (sidebar)
          │               │   │   ├── Article Header (badges, h1, byline, actions)
          │               │   │   ├── CorrectionNotice
          │               │   │   ├── HeroDiagram (LazyDiagram)
          │               │   │   ├── Article Content (dangerouslySetInnerHTML)
          │               │   │   ├── PremiumGateCard (if locked)
          │               │   │   ├── QuoteSharer
          │               │   │   ├── EmbeddedDiagrams
          │               │   │   ├── Reaction row
          │               │   │   ├── SeriesNavBanner
          │               │   │   ├── Tags
          │               │   │   ├── ArticleCommentSection
          │               │   │   ├── ArticleQaSection
          │               │   │   ├── Author Box
          │               │   │   └── Related Articles (ArticleCard grid)
          │               │   ├── SearchPage
          │               │   ├── CategoryPage
          │               │   ├── TagPage
          │               │   ├── GlossaryPage
          │               │   ├── TopicHubPage
          │               │   ├── AuthorsListPage
          │               │   ├── SeriesPage
          │               │   ├── AuthorProfilePage (redirect)
          │               │   ├── UserProfilePage
          │               │   │   ├── AvatarUpload
          │               │   │   ├── Hero Banner
          │               │   │   ├── Stats Bar
          │               │   │   ├── Badges Section
          │               │   │   ├── Content Tabs (articles/analytics)
          │               │   │   ├── WriterAnalyticsTab (+ Sparkline)
          │               │   │   └── ProfileSettingsModal
          │               │   │       ├── EditField
          │               │   │       ├── Password change
          │               │   │       ├── Email/Phone/2FA section
          │               │   │       ├── Push toggle
          │               │   │       └── NotificationPreferencesPanel
          │               │   ├── LoginPage
          │               │   │   ├── AuthStyles (scoped CSS)
          │               │   │   ├── Mobile Logo
          │               │   │   ├── Tab Switcher (login/signup)
          │               │   │   ├── OAuthButtons
          │               │   │   ├── LoginForm / SignupForm
          │               │   │   │   ├── AuthInput
          │               │   │   │   ├── PasswordStrength
          │               │   │   │   ├── TeknavCAP
          │               │   │   │   └── ForgotPasswordModal
          │               │   │   └── BrandPanel
          │               │   │       ├── Orbital Logo
          │               │   │       ├── BrandTicker
          │               │   │       └── CountUp stats
          │               │   ├── AdminPanel
          │               │   │   ├── AdminSidebar
          │               │   │   ├── Topbar
          │               │   │   └── Content (18 tabs)
          │               │   │       ├── Dashboard (LiveAdminFeed, Stats, Activity, etc.)
          │               │   │       ├── ArticlesManagement (table + actions)
          │               │   │       ├── ArticleEditor (metadata + HtmlEditor + ArtifactStudio + RevisionDrawer)
          │               │   │       ├── UserManagement (table + detail modal)
          │               │   │       ├── AuthorsManagement (form + card grid)
          │               │   │       ├── MediaLibrary (image grid)
          │               │   │       ├── CommentsModeration (table + bulk actions)
          │               │   │       ├── Analytics (SeoAudit, Engagement, Overview, Jobs, ClientErrors)
          │               │   │       ├── ReviewsPanel
          │               │   │       ├── NewsletterPanel
          │               │   │       ├── SeriesManagementPanel
          │               │   │       ├── CategoryManagement
          │               │   │       ├── TagsManagement
          │               │   │       └── ActivityLog
          │               │   └── WriterWorkspace
          │               │       ├── WritingTipCard
          │               │       ├── WeeklyChart
          │               │       ├── WriterAnalyticsPanel (table + sparklines)
          │               │       └── Overview (stats + recent articles/comments)
          │               ├── Footer (conditional)
          │               │   ├── About section
          │               │   ├── Categories links
          │               │   ├── Tools links
          │               │   ├── Links section
          │               │   └── Contact section
          │               ├── InstallPrompt (PWA)
          │               └── PushNotificationPrompt

102. TOTAL SIZE & COMPLEXITY METRICS

Metric	Count
Total lines of frontend JSX/JS	~38,000+ across all source files
Number of React components	200+ components
Named exports from all modules	150+
Number of routes (SPA)	37
Number of API endpoints consumed	120+
Number of diagram types	210 (18 base + 192 generated)
Number of CSS keyframe animations	20+
Number of CSS inline `<style>` injections	15+ sites
Number of JSON-LD schema types	15+
Number of meta tags injected	30+
Number of hex color values used	200+ distinct
Number of SVG icons	34
Number of self-hosted font files	16
Number of OG images	37
Number of feed XML files	10
Number of sitemap XML files	8
Number of test cases	~15 in lib tests
Number of widget types	3 (glossary, article-card, company)

103. LEGACY CODE & DEAD CODE REFERENCES

103.1 teknav-store.js

All CRUD operations for articles, users, categories, tags are localStorage-based
login() explicitly returns null with comment: "Auth now goes through /api/v1/auth/login — this stub stays for build safety"
DATA_VERSION = '2026-05-02-v1' for cache busting
Methods are synchronous

103.2 teknav-admin.jsx

Thin re-export file (1 line of logic): export { AdminPanel, WriterWorkspace, actionBtn } from './src/admin/index.js';

103.3 AuthorProfilePage (teknav-pages.jsx)

Immediately redirects to /profile/@:username via useNavigate. The full component is still defined with 60 lines of layout code but never actually renders because of the redirect.

103.4 App component (teknav-app.jsx)

The App function (lines 17-81) has its own provider stack (ToastProvider → AuthProvider → NavProvider) within the render, but the Root component (line 98) is what actually mounts. The App component appears to be dead code.

104. BUILD TIME GENERATED CONTENT

Artifact	Path Prefix	Count
OG images	`/images/og/{slug}.jpg`	37
Static article pages	`/articles/{slug}/index.html`	37
Web stories	`/stories/{slug}/index.html`	37
Comparison pages	`/compare/{slug}/index.html`	10
Company pages	`/directory/{slug}/index.html`	10
English homepage	`/en/index.html`	1
Author pages	`/author/{slug}/index.html`	3
Sitemap XML	`/sitemap*.xml`	8
Robots.txt	`/robots.txt`	1
Feed XML	`/feed.xml`, `/feeds/*.xml`	10

All generated by scripts in /scripts/ during npm run build.

105. ERROR TRACKING PAYLOAD FORMAT

{
  "message": "Uncaught TypeError: ...",
  "source": "https://teknav.ir/article/some-slug",
  "stack": "Error stack trace...",
  "path": "/article/some-slug",
  "userAgent": "Mozilla/5.0..."
}

Sent via navigator.sendBeacon('/api/v1/errors', blob) or fetch POST /api/v1/errors with keepalive: true.

THIS DOCUMENT IS COMPLETE.

Total sections: 105 Total page types documented: 37 Total components documented: 200+ Total colors documented: 200+ Total API endpoints: 120+

Every visible element of the Teknav frontend — from splash loader to footer, from homepage hero canvas to admin panel SEO audit, from login page orbital animations to article share buttons — has been exhaustively documented. Any UI designer reading this should be able to reconstruct the entire site pixel-perfectly without ever accessing the live URL.

217 KiB Raw Permalink Blame History Unescape Escape