Files

2432 lines
82 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تعرفه Blockها | فیپ</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
/* ReUI / shadcn neutral palette */
--background: #ffffff;
--foreground: #09090b;
--muted: #f4f4f5;
--muted-foreground: #71717a;
--border: #e4e4e7;
--ring: #a1a1aa;
--primary: #18181b;
--primary-foreground: #fafafa;
--accent: #f4f4f5;
--accent-foreground: #18181b;
--destructive: #ef4444;
--destructive-muted: #fef2f2;
/* semantic aliases */
--bg: var(--background);
--surface: var(--background);
--text: var(--foreground);
--text-muted: var(--muted-foreground);
--primary-dark: var(--primary);
--primary-light: var(--muted);
--secondary: var(--muted-foreground);
--secondary-light: var(--muted-foreground);
--accent-soft: var(--accent);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
--radius: 0.5rem;
--radius-sm: calc(var(--radius) - 2px);
--container-max: 72rem;
--container-padding: 1.25rem;
}
@media (min-width: 1024px) {
:root { --container-padding: 2rem; }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Vazirmatn', system-ui, sans-serif;
background: var(--background);
color: var(--foreground);
line-height: 1.7;
font-size: 15px;
-webkit-font-smoothing: antialiased;
}
.site-shell {
position: relative;
min-height: 100vh;
overflow-x: hidden;
}
/* ReUI dot-grid hero background */
.grid-bg {
pointer-events: none;
position: absolute;
inset-inline: 0;
top: 0;
z-index: 0;
height: 50vh;
opacity: 0.45;
background-image:
linear-gradient(to right, var(--border) 1px, transparent 1px),
linear-gradient(to bottom, var(--border) 1px, transparent 1px);
background-size: 3px 3px;
-webkit-mask-image: linear-gradient(to bottom, #000, transparent 50%);
mask-image: linear-gradient(to bottom, #000, transparent 50%);
}
.container-wrapper {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
}
/* ── Header (ReUI hero) ── */
.site-header {
background: transparent;
padding: 3.5rem 0 2.5rem;
position: relative;
}
.hero-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
}
.hero-title {
color: var(--foreground);
font-size: clamp(1.75rem, 4.5vw, 2.75rem);
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.02em;
margin-bottom: 12px;
max-width: 42rem;
}
.hero-sub {
color: color-mix(in srgb, var(--muted-foreground) 85%, transparent);
font-size: 1rem;
max-width: 36rem;
line-height: 1.75;
margin-bottom: 4px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--background);
border: 1px solid var(--border);
color: var(--foreground);
font-weight: 600;
font-size: 0.8125rem;
padding: 6px 14px 6px 12px;
border-radius: 999px;
margin-bottom: 20px;
box-shadow: var(--shadow);
}
.hero-badge span { color: var(--muted-foreground); }
/* ── Layout ── */
.page-wrap {
margin-bottom: 4rem;
padding-bottom: 0;
}
.calculator-wrap {
margin: 0 0 1.75rem;
position: relative;
z-index: 10;
}
#calculator {
scroll-margin-top: 24px;
}
/* ── Sections (ReUI frame/card) ── */
.section {
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid var(--border);
padding: 1.75rem 2rem;
margin-bottom: 1rem;
}
@media (max-width: 600px) {
.section { padding: 1.25rem 1.125rem; }
}
h2 {
font-size: 1.125rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 1.25rem;
padding-bottom: 0;
border-bottom: none;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: -0.01em;
}
h2::before { display: none; }
h3 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--foreground);
margin: 1.5rem 0 0.875rem;
padding-right: 0;
border-right: none;
}
p { margin-bottom: 14px; color: var(--foreground); line-height: 1.75; height: auto; overflow: visible; }
p:last-child { margin-bottom: 0; }
strong { color: var(--foreground); font-weight: 600; }
/* ── Lists ── */
ul {
list-style: none;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
ul li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
background: var(--muted);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
font-weight: 500;
font-size: 0.875rem;
}
ul li::before {
content: '';
width: 6px;
height: 6px;
background: var(--muted-foreground);
border-radius: 50%;
margin-top: 9px;
flex-shrink: 0;
}
/* criteria pills */
.criteria-list {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.criteria-list li {
background: var(--background);
color: var(--foreground);
border: 1px solid var(--border);
padding: 6px 14px;
border-radius: 999px;
font-size: 0.8125rem;
box-shadow: var(--shadow);
}
.criteria-list li::before { display: none; }
.criteria-list li strong { color: var(--foreground); font-weight: 600; }
/* ── Callout ── */
.callout {
background: var(--muted);
color: var(--foreground);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.75rem;
text-align: center;
font-size: 1rem;
font-weight: 600;
margin: 24px 0;
box-shadow: var(--shadow);
}
.callout::after { display: none; }
.callout strong { color: var(--foreground); font-size: 1.125rem; font-weight: 700; }
/* ── Tables ── */
.table-collapse {
margin: 10px 0 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--surface);
}
.table-collapse-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 10px 14px;
background: var(--muted);
border: none;
cursor: pointer;
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
color: var(--foreground);
text-align: right;
transition: background 0.15s;
}
.table-collapse-trigger:hover { background: var(--accent); }
.table-collapse-trigger .trigger-label { flex: 1; }
.table-collapse-trigger .trigger-meta {
font-size: 0.78rem;
font-weight: 500;
color: var(--text-muted);
white-space: nowrap;
}
.table-collapse-trigger .chevron {
width: 18px;
height: 18px;
flex-shrink: 0;
transition: transform 0.25s ease;
color: var(--muted-foreground);
}
.table-collapse.is-open .chevron { transform: rotate(180deg); }
.table-collapse-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s ease;
}
.table-collapse.is-open .table-collapse-panel { grid-template-rows: 1fr; }
.table-collapse-inner { overflow: hidden; }
.table-collapse.is-open .table-collapse-inner { overflow-x: auto; }
.table-wrap {
overflow-x: auto;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
margin: 10px 0 14px;
-webkit-overflow-scrolling: touch;
}
.table-collapse .table-wrap { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--border); }
.section--collapsible .section-body-inner > .table-wrap {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin: 10px 0 0;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.82rem;
min-width: 240px;
}
thead tr {
background: var(--muted);
border-bottom: 1px solid var(--border);
}
thead th {
color: var(--muted-foreground);
font-weight: 500;
padding: 8px 12px;
text-align: right;
white-space: nowrap;
font-size: 0.8125rem;
}
tbody tr {
border-bottom: 1px solid var(--border);
transition: background 0.15s;
}
tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover { background: var(--muted); }
tbody tr:last-child { border-bottom: none; }
tbody td {
padding: 7px 12px;
color: var(--foreground);
line-height: 1.5;
font-size: 0.875rem;
}
tbody td:first-child { font-weight: 500; color: var(--foreground); }
tfoot tr {
background: var(--muted);
border-top: 1px solid var(--border);
}
tfoot th {
padding: 8px 12px;
font-weight: 600;
color: var(--foreground);
text-align: right;
font-size: 0.875rem;
}
/* section-level collapse for large tariff tables */
.section--collapsible { padding: 0; overflow: hidden; margin-bottom: 14px; }
.section--collapsible .section-trigger {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 20px 28px;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
text-align: right;
transition: background 0.15s;
}
.section--collapsible .section-trigger:hover { background: var(--muted); }
.section--collapsible .section-trigger h2 {
flex: 1;
margin: 0;
padding: 0;
border: none;
pointer-events: none;
}
.section--collapsible .section-trigger .chevron {
width: 22px;
height: 22px;
flex-shrink: 0;
color: var(--muted-foreground);
transition: transform 0.25s ease;
}
.section--collapsible.is-open .section-trigger .chevron { transform: rotate(180deg); }
.section--collapsible .section-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.section--collapsible.is-open .section-body { grid-template-rows: 1fr; }
.section--collapsible .section-body-inner {
overflow: hidden;
padding: 0 28px;
}
.section--collapsible.is-open .section-body-inner {
padding: 0 28px 24px;
overflow: visible;
}
@media (max-width: 600px) {
.section--collapsible .section-trigger { padding: 18px 16px; }
.section--collapsible .section-body-inner,
.section--collapsible.is-open .section-body-inner { padding-left: 16px; padding-right: 16px; }
.section--collapsible.is-open .section-body-inner { padding-bottom: 18px; }
}
/* compact 2-col tables side by side on desktop */
.table-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 10px 0;
}
@media (max-width: 640px) {
.table-grid { grid-template-columns: 1fr; }
}
.table-grid .table-collapse { margin: 0; }
/* ── Divider ── */
.divider {
border: none;
height: 2px;
background: linear-gradient(to left, transparent, var(--border), transparent);
margin: 8px 0;
}
/* ── Two-column lists (revision policy) ── */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 640px) {
.two-col { grid-template-columns: 1fr; }
}
.col-free h3 { color: var(--foreground); }
.col-paid h3 { color: var(--destructive); }
.col-paid ul li { background: var(--destructive-muted); border-color: color-mix(in srgb, var(--destructive) 20%, transparent); }
.col-paid ul li::before { background: var(--destructive); }
/* ── Formula box ── */
.formula-box {
background: var(--muted);
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
padding: 1.25rem 1.5rem;
text-align: center;
font-size: 1rem;
font-weight: 600;
color: var(--foreground);
margin: 16px 0;
}
/* ── Tag list (project categories) ── */
.tag-list {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 1.25rem;
}
.tag-list li {
background: var(--background);
border: 1px solid var(--border);
color: var(--foreground);
padding: 5px 12px;
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 500;
box-shadow: var(--shadow);
}
.tag-list li::before { display: none; }
/* ── Footer ── */
.site-footer {
text-align: center;
padding: 2rem var(--container-padding) 3rem;
color: var(--muted-foreground);
font-size: 0.875rem;
border-top: 1px solid var(--border);
margin-top: 2rem;
}
.site-footer a {
color: var(--foreground);
text-decoration: none;
font-weight: 500;
}
.site-footer a:hover { text-decoration: underline; }
.footer-logo svg { fill: var(--foreground); height: 22px; }
/* ── Calculator ── */
.section-calculator {
border: 1px solid var(--border);
box-shadow: var(--shadow-lg);
background: var(--surface);
}
.calc-intro {
color: var(--text-muted);
font-size: 0.92rem;
margin-bottom: 24px;
}
.calc-url-import {
margin-bottom: 20px;
padding: 1rem 1.125rem;
background: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.calc-url-import-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 6px;
}
.calc-url-import-hint {
font-size: 0.8125rem;
color: var(--text-muted);
margin-bottom: 12px;
line-height: 1.6;
}
.calc-url-import-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.calc-url-import-row input[type="url"] {
flex: 1 1 220px;
min-width: 0;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.875rem;
background: var(--background);
box-shadow: var(--shadow);
direction: ltr;
text-align: left;
}
.calc-url-import-row input[type="url"]:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
.calc-import-btn {
padding: 9px 16px;
background: var(--primary);
color: var(--primary-foreground);
border: 1px solid var(--primary);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.15s;
}
.calc-import-btn:hover:not(:disabled) { opacity: 0.9; }
.calc-import-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.calc-import-options {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
margin-top: 10px;
font-size: 0.8125rem;
color: var(--text-muted);
}
.calc-import-options label {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.calc-import-status {
margin-top: 10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
line-height: 1.6;
}
.calc-import-status.is-loading {
background: var(--background);
border: 1px solid var(--border);
color: var(--text-muted);
}
.calc-import-status.is-success {
background: color-mix(in srgb, #22c55e 12%, var(--background));
border: 1px solid color-mix(in srgb, #22c55e 35%, var(--border));
color: var(--foreground);
}
.calc-import-status.is-error {
background: var(--destructive-muted);
border: 1px solid color-mix(in srgb, var(--destructive) 30%, var(--border));
color: var(--destructive);
}
.calc-blocks-header {
display: grid;
grid-template-columns: 1.1fr 1.4fr 0.9fr 1fr 0.7fr 36px;
gap: 8px;
padding: 0 4px 8px;
font-size: 0.78rem;
font-weight: 700;
color: var(--text-muted);
}
@media (max-width: 768px) {
.calc-blocks-header { display: none; }
}
.calc-row {
display: grid;
grid-template-columns: 1.1fr 1.4fr 0.9fr 1fr 0.7fr 36px;
gap: 8px;
align-items: center;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.calc-row {
grid-template-columns: 1fr 1fr;
background: var(--muted);
border-radius: var(--radius-sm);
padding: 14px;
border: 1px solid var(--border);
}
.calc-row .calc-field-block { grid-column: 1 / -1; }
.calc-row .calc-field-units { grid-column: 1 / -1; text-align: center; }
.calc-row .calc-remove { grid-column: 2; justify-self: end; }
}
.calc-field label {
display: none;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 4px;
}
@media (max-width: 768px) {
.calc-field label { display: block; }
}
.calc-field select,
.calc-field input {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.875rem;
color: var(--foreground);
background: var(--background);
transition: border-color 0.15s, box-shadow 0.15s;
box-shadow: var(--shadow);
}
.calc-field select:focus,
.calc-field input:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
.calc-field-units {
font-weight: 600;
color: var(--foreground);
font-size: 0.8125rem;
text-align: center;
background: var(--muted);
padding: 9px 6px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
line-height: 1.4;
}
.calc-field-units .unit-cost {
display: block;
font-size: 0.72rem;
font-weight: 600;
color: var(--text-muted);
direction: ltr;
}
.calc-remove {
width: 36px;
height: 36px;
border: 1px solid var(--border);
background: var(--background);
color: var(--destructive);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
flex-shrink: 0;
box-shadow: var(--shadow);
}
.calc-remove:hover { background: var(--destructive-muted); }
.calc-add-btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
padding: 9px 18px;
background: var(--background);
color: var(--foreground);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
box-shadow: var(--shadow);
}
.calc-add-btn:hover { background: var(--accent); }
.calc-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
margin: 28px 0 24px;
padding: 1.25rem;
background: var(--muted);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.calc-options-title {
grid-column: 1 / -1;
font-size: 0.875rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 4px;
}
.calc-option label {
display: block;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 6px;
}
.calc-option--full {
grid-column: 1 / -1;
}
.calc-option input[type="text"] {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.875rem;
background: var(--background);
color: var(--foreground);
}
.calc-option input[type="text"]:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
.calc-option select {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.875rem;
background: var(--background);
box-shadow: var(--shadow);
}
.calc-option select:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
.calc-anim-extra {
margin-top: 6px;
}
.calc-anim-extra.hidden { display: none; }
.calc-anim-input {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.875rem;
background: var(--background);
box-shadow: var(--shadow);
}
.calc-anim-input:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
.calc-summary {
background: var(--primary);
border-radius: var(--radius);
padding: 1.5rem 1.75rem;
color: var(--primary-foreground);
border: 1px solid var(--primary);
}
.calc-summary-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 24px;
margin-bottom: 20px;
}
@media (max-width: 520px) {
.calc-summary-grid { grid-template-columns: 1fr; }
}
.calc-summary-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.88rem;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.15);
}
.calc-summary-item span:last-child {
font-weight: 700;
direction: ltr;
}
.calc-summary-total {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid color-mix(in srgb, var(--primary-foreground) 20%, transparent);
font-size: 1.05rem;
font-weight: 600;
}
.calc-summary-total .price {
font-size: 1.375rem;
color: var(--primary-foreground);
direction: ltr;
font-weight: 700;
}
.calc-empty {
text-align: center;
padding: 32px 20px;
color: var(--muted-foreground);
font-size: 0.875rem;
background: var(--muted);
border-radius: var(--radius-sm);
border: 1px dashed var(--border);
}
.calc-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: 20px;
align-items: start;
}
@media (max-width: 900px) {
.calc-layout { grid-template-columns: 1fr; }
}
.calc-main { min-width: 0; }
.calc-page-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.calc-page-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1;
}
.calc-page-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--background);
font-family: inherit;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
box-shadow: var(--shadow);
}
.calc-page-tab:hover { background: var(--accent); }
.calc-page-tab.is-active {
background: var(--primary);
color: var(--primary-foreground);
border-color: var(--primary);
}
.calc-page-tab .tab-total {
font-size: 0.72rem;
opacity: 0.85;
direction: ltr;
}
.calc-page-add {
padding: 7px 12px;
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
background: transparent;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
color: var(--text-muted);
transition: background 0.15s;
}
.calc-page-add:hover { background: var(--accent); color: var(--foreground); }
.calc-page-name-wrap {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.calc-page-name-wrap label {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
}
.calc-page-name {
flex: 1;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.875rem;
background: var(--background);
box-shadow: var(--shadow);
}
.calc-page-name:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
.calc-page-delete {
padding: 7px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--background);
color: var(--destructive);
font-family: inherit;
font-size: 0.8125rem;
cursor: pointer;
}
.calc-page-delete:hover { background: var(--destructive-muted); }
.calc-page-delete:disabled { opacity: 0.4; cursor: not-allowed; }
.calc-row-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
.calc-reuse-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
background: color-mix(in srgb, var(--primary) 8%, var(--background));
color: var(--foreground);
border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
box-shadow: var(--shadow);
}
.calc-reuse-btn:hover { background: color-mix(in srgb, var(--primary) 15%, var(--background)); }
.calc-reuse-group {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.calc-reuse-group[hidden] { display: none; }
.calc-reuse-select {
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.875rem;
background: var(--background);
min-width: 180px;
box-shadow: var(--shadow);
}
.calc-row.is-reuse {
background: color-mix(in srgb, var(--primary) 5%, var(--muted));
border-radius: var(--radius-sm);
padding: 4px 0;
}
.calc-row.is-reuse .calc-field-cat,
.calc-row.is-reuse .calc-field-block,
.calc-row.is-reuse .calc-field-complexity {
opacity: 1;
}
.calc-row .reuse-badge {
grid-column: 1 / -1;
font-size: 0.72rem;
font-weight: 600;
color: var(--primary);
padding: 0 4px 2px;
}
@media (max-width: 768px) {
.calc-row.is-reuse .reuse-badge { padding: 0 14px 4px; }
}
.calc-page-options {
margin: 20px 0;
padding: 1rem 1.25rem;
background: var(--muted);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.calc-page-options-title {
font-size: 0.8125rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 10px;
}
.calc-page-options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 640px) {
.calc-page-options-grid { grid-template-columns: 1fr; }
}
.calc-page-mult-hint {
font-size: 0.72rem;
color: var(--text-muted);
margin-top: 6px;
line-height: 1.5;
}
.calc-current-page-summary .page-mult-hint {
display: block;
font-size: 0.72rem;
font-weight: 400;
color: var(--text-muted);
margin-top: 4px;
}
.tab-mult,
.archive-mult-badge {
font-size: 0.68rem;
font-weight: 700;
color: #2563eb;
margin-inline-start: 4px;
}
.calc-page-tab.is-active .tab-mult { color: color-mix(in srgb, var(--primary-foreground) 85%, #93c5fd); }
.calc-sidebar {
position: sticky;
top: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
@media (max-width: 900px) {
.calc-sidebar { position: static; }
}
.calc-sidebar .calc-options {
grid-template-columns: 1fr;
margin: 0;
}
.calc-pages-summary {
background: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 1rem 1.125rem;
}
.calc-pages-summary-title {
font-size: 0.8125rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 10px;
}
.calc-page-summary-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8125rem;
padding: 8px 0;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: color 0.15s;
}
.calc-page-summary-item:hover { color: var(--primary); }
.calc-page-summary-item.is-active { font-weight: 600; color: var(--primary); }
.calc-page-summary-item span:last-child {
font-weight: 600;
direction: ltr;
font-size: 0.78rem;
}
.calc-pages-summary-empty {
font-size: 0.8125rem;
color: var(--text-muted);
text-align: center;
padding: 12px 0;
}
.calc-revision-panel {
background: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 1rem 1.125rem;
}
.calc-revision-panel summary {
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
color: var(--foreground);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.calc-revision-panel summary::-webkit-details-marker { display: none; }
.calc-revision-body { margin-top: 12px; }
.calc-revision-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
@media (max-width: 520px) {
.calc-revision-cols { grid-template-columns: 1fr; }
}
.calc-revision-col h4 {
font-size: 0.75rem;
font-weight: 600;
margin: 0 0 6px;
color: var(--text-muted);
}
.calc-revision-col ul {
margin: 0;
gap: 4px;
}
.calc-revision-col ul li {
padding: 6px 10px;
font-size: 0.72rem;
font-weight: 400;
}
.calc-revision-col ul li::before {
width: 4px;
height: 4px;
margin-top: 7px;
}
.calc-revision-col.col-free ul li::before { background: #22c55e; }
.calc-revision-col.col-paid ul li::before { background: var(--destructive); }
.calc-revision-extra label {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 4px;
}
.calc-revision-extra input {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.875rem;
background: var(--background);
}
.calc-current-page-summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin-top: 16px;
background: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
}
.calc-current-page-summary > div:first-child {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.calc-current-page-summary .price {
font-weight: 700;
direction: ltr;
}
.calc-page-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.calc-page-archive {
flex: 1;
min-width: 200px;
padding: 11px 18px;
border: 1px solid color-mix(in srgb, #22c55e 40%, var(--border));
border-radius: var(--radius-sm);
background: color-mix(in srgb, #22c55e 10%, var(--background));
color: var(--foreground);
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
box-shadow: var(--shadow);
}
.calc-page-archive:hover { background: color-mix(in srgb, #22c55e 18%, var(--background)); }
.calc-page-archive:disabled { opacity: 0.45; cursor: not-allowed; }
.calc-page-unarchive {
padding: 11px 18px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--background);
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
box-shadow: var(--shadow);
}
.calc-page-unarchive:hover { background: var(--accent); }
.calc-page-delete-archive {
padding: 11px 18px;
border: 1px solid color-mix(in srgb, var(--destructive) 35%, var(--border));
border-radius: var(--radius-sm);
background: var(--destructive-muted);
color: var(--destructive);
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
box-shadow: var(--shadow);
}
.calc-page-delete-archive:hover { background: color-mix(in srgb, var(--destructive) 12%, var(--destructive-muted)); }
.calc-archive-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin-bottom: 14px;
background: color-mix(in srgb, var(--primary) 8%, var(--muted));
border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 500;
color: var(--foreground);
}
.calc-archive-banner[hidden] { display: none; }
.calc-main--readonly .calc-page-options,
.calc-main--readonly .calc-page-actions .calc-page-archive,
.calc-main--readonly .calc-page-delete,
.calc-main--readonly .calc-page-name,
.calc-main--readonly .calc-page-options select,
.calc-main--readonly .calc-page-options input {
pointer-events: none;
opacity: 0.55;
}
.calc-main--readonly .calc-page-unarchive,
.calc-main--readonly .calc-page-delete-archive { pointer-events: auto; opacity: 1; }
.calc-archive-summary {
background: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 1rem 1.125rem;
}
.calc-archive-summary-title {
font-size: 0.8125rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 4px;
}
.calc-archive-summary-hint {
font-size: 0.72rem;
color: var(--text-muted);
margin-bottom: 10px;
}
.calc-archive-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
padding: 8px 10px;
margin-bottom: 4px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--background);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.calc-archive-item .archive-item-label {
min-width: 0;
flex: 1;
}
.calc-archive-item .archive-item-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.calc-archive-item .archive-item-price {
font-weight: 600;
direction: ltr;
font-size: 0.78rem;
}
.calc-archive-delete {
width: 26px;
height: 26px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--background);
color: var(--destructive);
font-size: 1rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s;
}
.calc-archive-delete:hover {
background: var(--destructive-muted);
border-color: color-mix(in srgb, var(--destructive) 30%, var(--border));
}
.calc-archive-item:hover { border-color: var(--primary); }
.calc-archive-item.is-viewing {
border-color: var(--primary);
background: color-mix(in srgb, var(--primary) 6%, var(--background));
}
.calc-archive-item .archive-badge {
font-size: 0.65rem;
font-weight: 600;
color: #22c55e;
margin-left: 6px;
}
.calc-archive-empty {
font-size: 0.78rem;
color: var(--text-muted);
text-align: center;
padding: 10px 0;
}
.calc-page-tab.is-archived-view {
opacity: 0.7;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
padding: 9px 20px;
background: var(--primary);
color: var(--primary-foreground);
font-weight: 500;
font-size: 0.875rem;
border-radius: var(--radius-sm);
text-decoration: none;
transition: background 0.15s, opacity 0.15s;
box-shadow: var(--shadow);
border: 1px solid var(--primary);
}
.hero-cta:hover {
opacity: 0.9;
background: color-mix(in srgb, var(--primary) 90%, white);
}
.calc-project-report {
margin-top: 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem 1.75rem;
box-shadow: var(--shadow);
}
.calc-project-report-header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.calc-project-report-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 4px;
}
.calc-project-report-hint {
font-size: 0.8125rem;
color: var(--text-muted);
line-height: 1.6;
max-width: 36rem;
}
.calc-project-report-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.calc-report-btn {
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--background);
font-family: inherit;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
box-shadow: var(--shadow);
transition: background 0.15s;
}
.calc-report-btn:hover { background: var(--accent); }
.calc-report-btn--primary {
background: var(--primary);
color: var(--primary-foreground);
border-color: var(--primary);
}
.calc-report-btn--primary:hover {
opacity: 0.9;
background: var(--primary);
}
.calc-project-report-body {
width: 100%;
min-height: 220px;
max-height: 560px;
margin-top: 12px;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--muted);
font-family: 'Vazirmatn', system-ui, sans-serif;
font-size: 0.8125rem;
line-height: 1.6;
color: var(--foreground);
overflow: auto;
direction: rtl;
user-select: text;
-webkit-user-select: text;
}
.calc-project-report-body:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
.calc-project-report-body .report-heading {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 12px;
text-align: center;
}
.calc-project-report-body .report-subheading {
font-size: 0.9375rem;
font-weight: 600;
margin: 20px 0 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.calc-project-report-body .report-page-title {
color: var(--primary);
}
.calc-project-report-body .report-empty {
margin: 12px 0;
color: var(--text-muted);
font-size: 0.8125rem;
}
.calc-project-report-body .report-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin: 8px 0 16px;
font-size: 0.78rem;
background: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.calc-project-report-body .report-table th,
.calc-project-report-body .report-table td {
border: 1px solid var(--border);
padding: 7px 10px;
text-align: right;
vertical-align: top;
word-wrap: break-word;
}
.calc-project-report-body .report-kv .col-kv-key { width: 34%; }
.calc-project-report-body .report-kv .col-kv-val { width: 66%; }
.calc-project-report-body .report-kv th {
font-weight: 600;
background: color-mix(in srgb, var(--muted) 80%, var(--background));
}
.calc-project-report-body .report-kv tr:last-child th,
.calc-project-report-body .report-kv tr:last-child td {
font-weight: 700;
background: color-mix(in srgb, var(--primary) 8%, var(--background));
}
.calc-project-report-body .report-blocks-table .col-block { width: 34%; }
.calc-project-report-body .report-blocks-table .col-detail { width: 28%; }
.calc-project-report-body .report-blocks-table .col-unit { width: 14%; }
.calc-project-report-body .report-blocks-table .col-cost { width: 24%; }
.calc-project-report-body .report-blocks-table thead th {
background: var(--primary);
color: var(--primary-foreground);
font-weight: 600;
}
.calc-project-report-body .report-blocks-table tbody tr:nth-child(even) td {
background: color-mix(in srgb, var(--muted) 35%, var(--background));
}
.calc-project-report-body .report-page-divider td {
background: color-mix(in srgb, var(--muted) 70%, var(--background));
font-weight: 700;
color: var(--foreground);
}
.calc-project-report-body .report-subtotal td {
background: color-mix(in srgb, var(--muted) 90%, var(--background));
font-weight: 600;
}
.calc-project-report-body .report-num {
text-align: left;
direction: ltr;
white-space: nowrap;
}
.calc-project-report-body .report-table [contenteditable="true"]:focus {
outline: 2px solid color-mix(in srgb, var(--ring) 50%, transparent);
outline-offset: -2px;
background: var(--background);
}
.calc-report-toast {
margin-top: 10px;
font-size: 0.8125rem;
color: #16a34a;
font-weight: 500;
}
.calc-report-toast[hidden] { display: none; }
</style>
<style id="report-print-css" media="not all">
@page { size: A4 portrait; margin: 10mm 12mm; }
:root {
--background: #ffffff;
--foreground: #09090b;
--muted: #f4f4f5;
--border: #e4e4e7;
--primary: #18181b;
--primary-foreground: #fafafa;
--text-muted: #71717a;
--radius-sm: 0.375rem;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: auto;
min-height: 0;
}
body {
font-family: 'Vazirmatn', system-ui, sans-serif;
font-size: 13px;
line-height: 1.6;
color: var(--foreground);
background: #fff;
direction: rtl;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.calc-project-report-body {
width: 100%;
min-height: 0;
max-height: none;
overflow: visible;
padding: 0;
border: none;
background: #fff;
font-family: inherit;
font-size: 0.8125rem;
line-height: 1.6;
color: var(--foreground);
direction: rtl;
}
.calc-project-report-body .report-heading {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 12px;
text-align: center;
}
.calc-project-report-body .report-subheading {
font-size: 0.9375rem;
font-weight: 600;
margin: 20px 0 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.calc-project-report-body .report-page-title { color: var(--primary); }
.calc-project-report-body .report-empty {
margin: 12px 0;
color: var(--text-muted);
font-size: 0.8125rem;
}
.calc-project-report-body .report-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin: 8px 0 16px;
font-size: 0.78rem;
background: var(--background);
border: 1px solid var(--border);
}
.calc-project-report-body .report-table th,
.calc-project-report-body .report-table td {
border: 1px solid var(--border);
padding: 7px 10px;
text-align: right;
vertical-align: top;
word-wrap: break-word;
}
.calc-project-report-body .report-kv .col-kv-key { width: 34%; }
.calc-project-report-body .report-kv .col-kv-val { width: 66%; }
.calc-project-report-body .report-kv th {
font-weight: 600;
background: #efeff1;
}
.calc-project-report-body .report-kv tr:last-child th,
.calc-project-report-body .report-kv tr:last-child td {
font-weight: 700;
background: #f3f3f4;
}
.calc-project-report-body .report-blocks-table .col-block { width: 34%; }
.calc-project-report-body .report-blocks-table .col-detail { width: 28%; }
.calc-project-report-body .report-blocks-table .col-unit { width: 14%; }
.calc-project-report-body .report-blocks-table .col-cost { width: 24%; }
.calc-project-report-body .report-blocks-table thead th {
background: var(--primary);
color: var(--primary-foreground);
font-weight: 600;
}
.calc-project-report-body .report-blocks-table tbody tr:nth-child(even) td {
background: #f8f8f9;
}
.calc-project-report-body .report-page-divider td {
background: #ececed;
font-weight: 700;
color: var(--foreground);
}
.calc-project-report-body .report-subtotal td {
background: #f0f0f1;
font-weight: 600;
}
.calc-project-report-body .report-num {
text-align: left;
direction: ltr;
white-space: nowrap;
}
tr.report-page-divider:not(:first-of-type) {
break-before: page;
page-break-before: always;
}
</style>
</head>
<body>
<div class="site-shell">
<div class="grid-bg" aria-hidden="true"></div>
<!-- ── Header ── -->
<header class="site-header">
<div class="container-wrapper">
<div class="hero-inner">
<div class="hero-badge">💡 <span>راهنمای قیمت‌گذاری</span></div>
<h1 class="hero-title">تعرفه طراحی و پیاده‌سازی Block</h1>
<p class="hero-sub">سیستم شفاف قیمت‌گذاری بر اساس Unit — برای برآورد دقیق و سریع پروژه‌های UI/UX</p>
<a href="#calculator" class="hero-cta">🧮 محاسبه قیمت پروژه</a>
</div>
</div>
</header>
<div class="container-wrapper">
<!-- ماشین‌حساب — جدا از بقیه محتوا برای نمایش قطعی -->
<div class="calculator-wrap">
<section class="section section-calculator" id="calculator">
<h2>ماشین‌حساب قیمت</h2>
<p class="calc-intro">لینک هر صفحه را وارد کنید — بلاک‌ها خودکار شناسایی، قیمت‌گذاری و آرشیو می‌شوند. از صفحه دوم به بعد هدر و فوتر حساب نمی‌شود و بلاک‌های مشابه به‌صورت Reuse محاسبه می‌گردند. برای صفحات تکراری (مثلاً ۱۵ دسته‌بندی فروشگاه) یک قالب بسازید و با <strong>ضریب تکرار</strong> همان صفحه را چندبرابر کنید.</p>
<div class="calc-url-import">
<div class="calc-url-import-title">واردات خودکار صفحه‌به‌صفحه</div>
<p class="calc-url-import-hint">آدرس صفحه را وارد کنید. سیستم در ۳ فاز کار می‌کند: <strong>۱)</strong> شمارش بلاک‌های ساختاری (Elementor section، header، footer) <strong>۲)</strong> شناسایی نوع هر بلاک <strong>۳)</strong> قیمت‌گذاری و آرشیو.</p>
<div class="calc-url-import-row">
<input type="url" id="calc-import-url" placeholder="https://example.com/page" autocomplete="url" dir="ltr">
<button type="button" class="calc-import-btn" id="calc-import-btn">تحلیل و ثبت صفحه</button>
</div>
<div class="calc-import-options">
<label><input type="checkbox" id="calc-import-title" checked> نام صفحه از عنوان سایت</label>
<label><input type="checkbox" id="calc-import-auto-archive" checked> ثبت و آرشیو خودکار پس از تحلیل</label>
</div>
<div id="calc-import-status" class="calc-import-status" hidden></div>
</div>
<div class="calc-layout">
<div class="calc-main" id="calc-main">
<div class="calc-archive-banner" id="calc-archive-banner" hidden>
<span>🔒</span>
<span>این صفحه آرشیو شده — بلاک‌ها قابل ویرایش و حذف هستند. نام صفحه و انیمیشن را برای تغییر، از آرشیو خارج کنید.</span>
</div>
<div class="calc-page-bar">
<div class="calc-page-tabs" id="calc-page-tabs" role="tablist"></div>
<button type="button" class="calc-page-add" id="calc-page-add">+ صفحه پیش‌نویس</button>
</div>
<div class="calc-page-name-wrap">
<label for="calc-page-name">نام صفحه</label>
<input type="text" class="calc-page-name" id="calc-page-name" placeholder="مثلاً Home">
<button type="button" class="calc-page-delete" id="calc-page-delete" title="حذف صفحه">حذف</button>
</div>
<div class="calc-blocks-header">
<span>دسته</span>
<span>Block</span>
<span>پیچیدگی</span>
<span>وضعیت</span>
<span>Unit</span>
<span></span>
</div>
<div id="calc-rows" aria-live="polite"></div>
<div id="calc-empty" class="calc-empty">هنوز Blockی اضافه نشده — روی دکمه زیر کلیک کنید.</div>
<div class="calc-row-actions">
<button type="button" class="calc-add-btn" id="calc-add">+ افزودن Block</button>
<div class="calc-reuse-group" id="calc-reuse-group" hidden>
<select class="calc-reuse-select" id="calc-reuse-select" aria-label="انتخاب Block برای Reuse"></select>
<button type="button" class="calc-reuse-btn" id="calc-reuse">↩ افزودن Reuse</button>
</div>
</div>
<div class="calc-page-options">
<div class="calc-page-options-title">تنظیمات این صفحه</div>
<div class="calc-page-options-grid">
<div class="calc-option">
<label for="opt-animation">نوع انیمیشن</label>
<select id="opt-animation">
<option value="0">Hover Effect — رایگان</option>
<option value="0.2">Transition — ۰.۲ Unit</option>
<option value="0.5">Motion ساده — ۰.۵ Unit</option>
<option value="complex">Motion پیچیده — ۱ تا ۳ Unit</option>
</select>
<div class="calc-anim-extra hidden" id="anim-extra-wrap">
<label for="opt-anim-units" style="display:block;font-size:0.78rem;font-weight:600;color:var(--text-muted);margin:8px 0 4px">تعداد Unit (۱–۳)</label>
<input type="number" id="opt-anim-units" min="1" max="3" step="0.5" value="2" class="calc-anim-input">
</div>
</div>
<div class="calc-option">
<label for="opt-page-multiplier">ضریب تکرار صفحه</label>
<input type="number" id="opt-page-multiplier" min="1" max="999" step="1" value="1" class="calc-anim-input" title="تعداد صفحات مشابه با همین ساختار">
<p class="calc-page-mult-hint">مثلاً ۱۵ برای ۱۵ دسته‌بندی یکسان — هزینه و Unit این صفحه ×۱۵ می‌شود.</p>
</div>
</div>
</div>
<div class="calc-page-actions">
<button type="button" class="calc-page-archive" id="calc-page-archive">✓ ثبت و آرشیو این صفحه</button>
<button type="button" class="calc-page-unarchive" id="calc-page-unarchive" hidden>↩ بازگردانی از آرشیو</button>
<button type="button" class="calc-page-delete-archive" id="calc-page-delete-archive" hidden>🗑 حذف از آرشیو</button>
</div>
<div class="calc-current-page-summary">
<div>
<span>جمع این صفحه</span>
<small id="sum-page-multiplier-hint" class="page-mult-hint" hidden></small>
</div>
<span class="price" id="sum-page-total">۰ تومان</span>
</div>
</div>
<aside class="calc-sidebar">
<div class="calc-pages-summary">
<div class="calc-pages-summary-title">پیش‌نویس‌ها</div>
<div id="calc-pages-list"></div>
</div>
<div class="calc-archive-summary">
<div class="calc-archive-summary-title">آرشیو صفحات</div>
<p class="calc-archive-summary-hint">صفحات تأییدشده — Blockها برای Reuse در دسترس‌اند</p>
<div id="calc-archive-list"></div>
</div>
<details class="calc-revision-panel">
<summary>Revision Policy <span style="font-size:0.72rem;font-weight:400;color:var(--text-muted)">▼</span></summary>
<div class="calc-revision-body">
<div class="calc-revision-cols">
<div class="calc-revision-col col-free">
<h4>موارد رایگان</h4>
<ul>
<li>دو مرتبه اصلاح برای هر Block</li>
<li>اصلاح رنگ، متن، فاصله</li>
<li>تغییر آیکون و اندازه</li>
<li>رفع باگ پیاده‌سازی</li>
</ul>
</div>
<div class="calc-revision-col col-paid">
<h4>مشمول هزینه</h4>
<ul>
<li>Block جدید</li>
<li>تغییر Layout پس از تأیید</li>
<li>تغییر UX / Flow</li>
</ul>
</div>
</div>
<div class="calc-revision-extra">
<label for="opt-revision-units">هزینه Revision اضافه (Unit)</label>
<input type="number" id="opt-revision-units" min="0" step="0.5" value="0">
</div>
</div>
</details>
<div class="calc-options">
<div class="calc-options-title">گزینه‌های کل پروژه</div>
<div class="calc-option calc-option--full">
<label for="opt-project-title">عنوان پروژه</label>
<input type="text" id="opt-project-title" placeholder="مثلاً سایت شرکت الف — در گزارش و فایل خروجی استفاده می‌شود">
</div>
<div class="calc-option">
<label for="opt-content">هزینه محتوا</label>
<select id="opt-content">
<option value="0">Placeholder — رایگان</option>
<option value="0.05">جایگذاری متن مشتری — ۵٪</option>
<option value="0.05_img">برش و بهینه‌سازی تصاویر — ۵٪</option>
<option value="0.20">تولید محتوا — ۲۰٪</option>
<option value="0.10">تولید تصاویر AI — ۱۰٪</option>
</select>
</div>
<div class="calc-option">
<label for="opt-responsive">Responsive</label>
<select id="opt-responsive">
<option value="0">Desktop فقط — ۱۰۰٪</option>
<option value="0.10">Desktop + Tablet — +۱۰٪</option>
<option value="0.20">Desktop + Tablet + Mobile — +۲۰٪</option>
</select>
</div>
<div class="calc-option">
<label for="opt-dark">Dark Mode</label>
<select id="opt-dark">
<option value="0">بدون Dark Mode</option>
<option value="0.15">پیاده‌سازی کامل — +۱۵٪</option>
</select>
</div>
<div class="calc-option">
<label for="opt-bilingual">دوزبانه</label>
<select id="opt-bilingual">
<option value="0">تک‌زبانه — ۱۰۰٪</option>
<option value="0.10">دوزبانه — +۱۰٪</option>
</select>
</div>
</div>
</aside>
</div>
<div class="calc-summary" style="margin-top:20px">
<div class="calc-summary-grid" id="calc-breakdown">
<div class="calc-summary-item"><span>مجموع Unitها</span><span id="sum-units">۰</span></div>
<div class="calc-summary-item"><span>هزینه Blockها</span><span id="sum-blocks">۰ تومان</span></div>
<div class="calc-summary-item"><span>اضافه محتوا</span><span id="sum-content">—</span></div>
<div class="calc-summary-item"><span>اضافه Responsive</span><span id="sum-responsive">—</span></div>
<div class="calc-summary-item"><span>اضافه Dark Mode</span><span id="sum-dark">—</span></div>
<div class="calc-summary-item"><span>اضافه دوزبانه</span><span id="sum-bilingual">—</span></div>
<div class="calc-summary-item"><span>Revision اضافه</span><span id="sum-revision">—</span></div>
</div>
<div class="calc-summary-total">
<span>قیمت نهایی پروژه</span>
<span class="price" id="sum-total">۰ تومان</span>
</div>
</div>
<div class="calc-project-report" id="calc-project-report">
<div class="calc-project-report-header">
<div>
<div class="calc-project-report-title">گزارش ذخیره‌شده پروژه</div>
<p class="calc-project-report-hint">گزارش به‌صورت جدول قابل ویرایش است. با «دانلود PDF» همان محتوای نمایش‌داده‌شده در پنجره چاپ باز می‌شود — «ذخیره به PDF» را انتخاب کنید.</p>
</div>
<div class="calc-project-report-actions">
<button type="button" class="calc-report-btn calc-report-btn--primary" id="calc-report-download-pdf">دانلود PDF</button>
<button type="button" class="calc-report-btn" id="calc-report-refresh">↻ به‌روزرسانی</button>
<button type="button" class="calc-report-btn" id="calc-report-copy">کپی متن</button>
<button type="button" class="calc-report-btn" id="calc-report-download">دانلود HTML</button>
<button type="button" class="calc-report-btn" id="calc-report-download-txt">دانلود TXT</button>
<button type="button" class="calc-report-btn" id="calc-report-select">انتخاب همه</button>
</div>
</div>
<div class="calc-project-report-body" id="calc-project-report-body" contenteditable="true" dir="rtl" aria-label="گزارش کامل پروژه"></div>
<div class="calc-report-toast" id="calc-report-toast" hidden>متن گزارش در کلیپ‌بورد کپی شد.</div>
</div>
</section>
</div>
<main class="page-wrap">
<!-- قوانین کلی -->
<section class="section">
<h2>قوانین کلی</h2>
<p>در این سیستم، هر Block بر اساس سه معیار اصلی قیمت‌گذاری می‌شود:</p>
<ul class="criteria-list">
<li><strong>نوع (Type)</strong></li>
<li><strong>سطح پیچیدگی (Simple / Medium / Complex)</strong></li>
<li><strong>وضعیت استفاده (New / Reuse)</strong></li>
</ul>
<p>به عنوان مثال:</p>
<div class="table-collapse is-open" data-collapse>
<button type="button" class="table-collapse-trigger" aria-expanded="true">
<span class="trigger-label">نمونه بلاک‌ها</span>
<span class="trigger-meta">۵ مورد</span>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="table-collapse-panel">
<div class="table-collapse-inner">
<div class="table-wrap">
<table>
<thead><tr><th>نمونه بلاک</th><th>Unit</th></tr></thead>
<tbody>
<tr><td>Hero (Medium)</td><td>3 Unit</td></tr>
<tr><td>Feature Grid</td><td>2 Unit</td></tr>
<tr><td>Pricing</td><td>2 Unit</td></tr>
<tr><td>Navbar</td><td>1.5 Unit</td></tr>
<tr><td>Footer</td><td>1 Unit</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p>در صورتی که همین Hero قبلاً طراحی شده باشد:</p>
<div class="table-collapse" data-collapse>
<button type="button" class="table-collapse-trigger" aria-expanded="false">
<span class="trigger-label">هزینه Reuse</span>
<span class="trigger-meta">۱ مورد</span>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="table-collapse-panel">
<div class="table-collapse-inner">
<div class="table-wrap">
<table>
<thead><tr><th>وضعیت</th><th>Unit</th></tr></thead>
<tbody>
<tr><td>Reuse Hero</td><td>0.3 Unit</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="callout">
تعرفه هر Unit برابر با <strong>۵۰۰,۰۰۰ تومان</strong> است.
</div>
</section>
<!-- تعرفه Blockهای عمومی -->
<section class="section section--collapsible" data-collapse>
<button type="button" class="section-trigger" aria-expanded="false">
<h2>تعرفه Blockهای عمومی</h2>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="section-body">
<div class="section-body-inner">
<div class="table-wrap">
<table>
<thead>
<tr><th>Block</th><th>Simple</th><th>Medium</th><th>Complex</th></tr>
</thead>
<tbody>
<tr><td>Navbar</td><td>1</td><td>1.5</td><td>2</td></tr>
<tr><td>Sidebar</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Footer</td><td>0.8</td><td>1</td><td>1.5</td></tr>
<tr><td>Hero</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>Banner</td><td>1</td><td>1.5</td><td>2</td></tr>
<tr><td>CTA</td><td>0.8</td><td>1</td><td>1.5</td></tr>
<tr><td>Feature Grid</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Card Section</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>FAQ</td><td>1</td><td>1.5</td><td>2</td></tr>
<tr><td>Timeline</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Testimonial</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Pricing</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>Gallery</td><td>2</td><td>3</td><td>5</td></tr>
<tr><td>Blog List</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>Contact Section</td><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- بلاک‌های داشبورد -->
<section class="section section--collapsible" data-collapse>
<button type="button" class="section-trigger" aria-expanded="false">
<h2>بلاک‌های داشبورد</h2>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="section-body">
<div class="section-body-inner">
<div class="table-wrap">
<table>
<thead>
<tr><th>Block</th><th>Simple</th><th>Medium</th><th>Complex</th></tr>
</thead>
<tbody>
<tr><td>Stat Card</td><td>0.5</td><td>0.8</td><td>1</td></tr>
<tr><td>Widget</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Data Table</td><td>2</td><td>4</td><td>6</td></tr>
<tr><td>Filter Bar</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Search</td><td>0.5</td><td>1</td><td>1.5</td></tr>
<tr><td>Pagination</td><td>0.5</td><td>0.8</td><td>1</td></tr>
<tr><td>Tabs</td><td>0.8</td><td>1</td><td>2</td></tr>
<tr><td>Chart</td><td>2</td><td>3</td><td>5</td></tr>
<tr><td>Calendar</td><td>2</td><td>4</td><td>6</td></tr>
<tr><td>Kanban</td><td>4</td><td>6</td><td>8</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- بلاک‌های فرم -->
<section class="section section--collapsible" data-collapse>
<button type="button" class="section-trigger" aria-expanded="false">
<h2>بلاک‌های فرم</h2>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="section-body">
<div class="section-body-inner">
<div class="table-wrap">
<table>
<thead>
<tr><th>Block</th><th>Simple</th><th>Medium</th><th>Complex</th></tr>
</thead>
<tbody>
<tr><td>Form Section</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Input Group</td><td>0.3</td><td>0.5</td><td>1</td></tr>
<tr><td>File Upload</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Rich Text</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>Multi Step</td><td>3</td><td>5</td><td>8</td></tr>
<tr><td>Dynamic Field</td><td>2</td><td>4</td><td>6</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- بلاک‌های تعاملی -->
<section class="section section--collapsible" data-collapse>
<button type="button" class="section-trigger" aria-expanded="false">
<h2>بلاک‌های تعاملی</h2>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="section-body">
<div class="section-body-inner">
<div class="table-wrap">
<table>
<thead><tr><th>Block</th><th>Unit</th></tr></thead>
<tbody>
<tr><td>Modal</td><td>1</td></tr>
<tr><td>Drawer</td><td>1</td></tr>
<tr><td>Dropdown</td><td>0.5</td></tr>
<tr><td>Popover</td><td>0.5</td></tr>
<tr><td>Command Menu</td><td>1</td></tr>
<tr><td>Toast</td><td>0.5</td></tr>
<tr><td>Skeleton</td><td>0.5</td></tr>
<tr><td>Loading State</td><td>0.5</td></tr>
<tr><td>Empty State</td><td>0.5</td></tr>
<tr><td>Error State</td><td>0.5</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Reuse Policy -->
<section class="section section--collapsible" data-collapse>
<button type="button" class="section-trigger" aria-expanded="false">
<h2>سیاست استفاده مجدد (Reuse Policy)</h2>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="section-body">
<div class="section-body-inner">
<p>در صورتی که یک Block قبلاً طراحی و پیاده‌سازی شده باشد، هزینه آن بر اساس میزان تغییرات موردنیاز محاسبه می‌شود.</p>
<div class="table-grid">
<div class="table-collapse is-open" data-collapse>
<button type="button" class="table-collapse-trigger" aria-expanded="true">
<span class="trigger-label">درصد هزینه بر اساس تغییرات</span>
<span class="trigger-meta">۵ مورد</span>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="table-collapse-panel">
<div class="table-collapse-inner">
<div class="table-wrap">
<table>
<thead><tr><th>وضعیت</th><th>درصد هزینه</th></tr></thead>
<tbody>
<tr><td>استفاده مجدد بدون تغییر</td><td>10٪</td></tr>
<tr><td>تغییر جزئی</td><td>25٪</td></tr>
<tr><td>تغییر متوسط</td><td>40٪</td></tr>
<tr><td>تغییر زیاد</td><td>70٪</td></tr>
<tr><td>بلاک کاملاً جدید</td><td>100٪</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="table-collapse is-open" data-collapse>
<button type="button" class="table-collapse-trigger" aria-expanded="true">
<span class="trigger-label">نمونه‌های Navbar</span>
<span class="trigger-meta">۴ مورد</span>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="table-collapse-panel">
<div class="table-collapse-inner">
<div class="table-wrap">
<table>
<thead><tr><th>نمونه</th><th>درصد هزینه</th></tr></thead>
<tbody>
<tr><td>Navbar</td><td>100٪</td></tr>
<tr><td>Navbar با منوی متفاوت</td><td>25٪</td></tr>
<tr><td>Navbar با Mega Menu</td><td>60٪</td></tr>
<tr><td>Navbar کاملاً جدید</td><td>100٪</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- هزینه محتوا -->
<section class="section section--collapsible" data-collapse>
<button type="button" class="section-trigger" aria-expanded="false">
<h2>هزینه محتوا</h2>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="section-body">
<div class="section-body-inner">
<p>تولید یا آماده‌سازی محتوا به صورت جداگانه روی قیمت پروژه تأثیر می‌گذارد.</p>
<div class="table-wrap">
<table>
<thead><tr><th>نوع محتوا</th><th>ضریب هزینه</th></tr></thead>
<tbody>
<tr><td>Placeholder</td><td>رایگان</td></tr>
<tr><td>جایگذاری متن مشتری</td><td>5٪</td></tr>
<tr><td>برش و بهینه‌سازی تصاویر</td><td>5٪</td></tr>
<tr><td>تولید محتوا</td><td>20٪</td></tr>
<tr><td>تولید تصاویر با هوش مصنوعی</td><td>10٪</td></tr>
<tr><td>طراحی بنر اختصاصی</td><td>توافقی</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Responsive -->
<section class="section section--collapsible" data-collapse>
<button type="button" class="section-trigger" aria-expanded="false">
<h2>Responsive</h2>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="section-body">
<div class="section-body-inner">
<p>پشتیبانی از دستگاه‌های مختلف به صورت درصدی به هزینه پروژه اضافه می‌شود.</p>
<div class="table-wrap">
<table>
<thead><tr><th>حالت</th><th>ضریب</th></tr></thead>
<tbody>
<tr><td>Desktop فقط</td><td>100٪</td></tr>
<tr><td>Desktop + Tablet</td><td>+10٪</td></tr>
<tr><td>Desktop + Tablet + Mobile</td><td>+20٪</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- دوزبانه -->
<section class="section section--collapsible" data-collapse>
<button type="button" class="section-trigger" aria-expanded="false">
<h2>دوزبانه</h2>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="section-body">
<div class="section-body-inner">
<p>در صورت پیاده‌سازی نسخه دوزبانه سایت، هزینه زیر به پروژه اضافه خواهد شد.</p>
<div class="table-wrap">
<table>
<thead><tr><th>مورد</th><th>ضریب</th></tr></thead>
<tbody>
<tr><td>پیاده‌سازی دوزبانه</td><td>+10٪</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Dark Mode -->
<section class="section section--collapsible" data-collapse>
<button type="button" class="section-trigger" aria-expanded="false">
<h2>Dark Mode</h2>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="section-body">
<div class="section-body-inner">
<p>در صورت طراحی نسخه Dark Mode برای کل پروژه، هزینه زیر به پروژه اضافه خواهد شد.</p>
<div class="table-wrap">
<table>
<thead><tr><th>مورد</th><th>ضریب</th></tr></thead>
<tbody>
<tr><td>پیاده‌سازی کامل Dark Mode</td><td>+15٪</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Animation -->
<section class="section section--collapsible" data-collapse>
<button type="button" class="section-trigger" aria-expanded="false">
<h2>Animation</h2>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="section-body">
<div class="section-body-inner">
<p>انیمیشن‌ها بر اساس میزان پیچیدگی قیمت‌گذاری می‌شوند.</p>
<div class="table-wrap">
<table>
<thead><tr><th>نوع انیمیشن</th><th>Unit</th></tr></thead>
<tbody>
<tr><td>Hover Effect</td><td>رایگان</td></tr>
<tr><td>Transition</td><td>0.2</td></tr>
<tr><td>Motion ساده</td><td>0.5</td></tr>
<tr><td>Motion پیچیده</td><td>1 تا 3</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Revision Policy -->
<section class="section">
<h2>Revision Policy</h2>
<div class="two-col">
<div class="col-free">
<h3>موارد رایگان</h3>
<ul>
<li>دو مرتبه اصلاح برای هر Block قبل از تأیید نهایی</li>
<li>اصلاح رنگ‌ها</li>
<li>اصلاح متن</li>
<li>اصلاح فاصله‌ها</li>
<li>تغییر آیکون‌ها</li>
<li>اصلاح اندازه‌ها</li>
<li>رفع باگ‌های پیاده‌سازی</li>
</ul>
</div>
<div class="col-paid">
<h3>موارد مشمول هزینه</h3>
<ul>
<li>اضافه شدن Block جدید</li>
<li>حذف یک Block و جایگزینی با Block دیگر</li>
<li>تغییر Layout پس از تأیید نهایی</li>
<li>تغییر UX</li>
<li>تغییر Flow صفحات</li>
<li>تغییر Design System پروژه</li>
</ul>
</div>
</div>
</section>
<!-- نمونه محاسبه -->
<section class="section">
<h2>نمونه محاسبه هزینه</h2>
<p>فرض کنید صفحه <strong>Home</strong> شامل Blockهای زیر باشد:</p>
<div class="table-collapse is-open" data-collapse>
<button type="button" class="table-collapse-trigger" aria-expanded="true">
<span class="trigger-label">صفحه Home — جدول هزینه</span>
<span class="trigger-meta">۹ بلاک</span>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="table-collapse-panel">
<div class="table-collapse-inner">
<div class="table-wrap">
<table>
<thead>
<tr><th>Block</th><th>Unit</th><th>هزینه (تومان)</th></tr>
</thead>
<tbody>
<tr><td>Navbar</td><td>1.5</td><td>750,000</td></tr>
<tr><td>Hero</td><td>3</td><td>1,500,000</td></tr>
<tr><td>Features</td><td>2</td><td>1,000,000</td></tr>
<tr><td>Statistics</td><td>1</td><td>500,000</td></tr>
<tr><td>Testimonials</td><td>2</td><td>1,000,000</td></tr>
<tr><td>Pricing</td><td>3</td><td>1,500,000</td></tr>
<tr><td>FAQ</td><td>1.5</td><td>750,000</td></tr>
<tr><td>CTA</td><td>1</td><td>500,000</td></tr>
<tr><td>Footer</td><td>1</td><td>500,000</td></tr>
</tbody>
<tfoot>
<tr><th>جمع کل</th><th>16 Unit</th><th>8,000,000 تومان</th></tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<p>حال فرض کنید در صفحه دوم همان <strong>Navbar</strong>، <strong>Footer</strong> و <strong>FAQ</strong> دوباره استفاده شوند.</p>
<div class="table-collapse" data-collapse>
<button type="button" class="table-collapse-trigger" aria-expanded="false">
<span class="trigger-label">صفحه دوم — Reuse</span>
<span class="trigger-meta">۳ بلاک</span>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="table-collapse-panel">
<div class="table-collapse-inner">
<div class="table-wrap">
<table>
<thead>
<tr><th>Block</th><th>Unit</th><th>هزینه (تومان)</th></tr>
</thead>
<tbody>
<tr><td>Navbar (Reuse)</td><td>0.2</td><td>100,000</td></tr>
<tr><td>Footer (Reuse)</td><td>0.1</td><td>50,000</td></tr>
<tr><td>FAQ (Reuse)</td><td>0.3</td><td>150,000</td></tr>
</tbody>
<tfoot>
<tr><th>جمع</th><th>0.6 Unit</th><th>300,000 تومان</th></tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<p>به این ترتیب، در صفحات بعدی فقط Blockهای جدید یا Blockهایی که نیاز به تغییر دارند هزینه‌گذاری می‌شوند و استفاده مجدد از Blockهای موجود، هزینه بسیار ناچیزی خواهد داشت.</p>
</section>
<!-- فرمول -->
<section class="section">
<h2>فرمول محاسبه هزینه</h2>
<p>هزینه هر پروژه بر اساس مجموع Unitهای موردنیاز محاسبه می‌شود.</p>
<div class="formula-box">
هزینه کل = مجموع Unit × 500,000 تومان
</div>
<p>در صورت نیاز، هزینه‌های مربوط به تولید محتوا، طراحی بنر، طراحی Responsive، پیاده‌سازی دوزبانه، پیاده‌سازی Dark Mode، انیمیشن‌ها یا درخواست‌های خارج از محدوده قرارداد به مبلغ نهایی اضافه خواهد شد.</p>
</section>
<!-- پیشنهاد ساختار -->
<section class="section">
<h2>پیشنهاد برای ساختار پروژه</h2>
<p>برای پروژه‌هایی که با <strong>Next.js</strong> و <strong>shadcn/ui</strong> توسعه داده می‌شوند، پیشنهاد می‌شود یک کاتالوگ ثابت از Blockهای استاندارد ایجاد شود.</p>
<p>این کاتالوگ می‌تواند شامل حدود <strong>۷۰ تا ۱۰۰ Block</strong> در دسته‌بندی‌های مختلف مانند:</p>
<ul class="tag-list">
<li>Landing Page</li>
<li>Dashboard</li>
<li>CRM</li>
<li>ERP</li>
<li>E-commerce</li>
<li>Authentication</li>
<li>Marketing</li>
<li>Blog</li>
</ul>
<p>برای هر Block یک Unit پایه و برای هر سطح پیچیدگی (Simple، Medium و Complex) مقدار مشخصی تعریف می‌شود. سپس برآورد هر پروژه تنها با انتخاب Blockهای موردنیاز انجام خواهد شد.</p>
<p>در این مدل، صفحه صرفاً محلی برای کنار هم قرار گرفتن Blockها است و نقش مستقیمی در قیمت‌گذاری ندارد. این روش علاوه بر افزایش دقت برآورد، باعث شفافیت بیشتر برای کارفرما، مقیاس‌پذیری بالاتر پروژه‌ها و سرعت بیشتر در تهیه پیش‌فاکتور خواهد شد.</p>
</section>
<!-- تعرفه پایه -->
<section class="section">
<h2>تعرفه پایه</h2>
<div class="callout">
هر Unit = <strong>500,000 تومان</strong>
</div>
</section>
</main>
</div><!-- /.container-wrapper -->
</div><!-- /.site-shell -->
<script src="calculator.js"></script>
</body>
</html>