Files
customerTicket/design-prototypes/chaharsu/index.html
T
2026-10-05 12:36:58 +03:30

492 lines
42 KiB
HTML
Raw 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" data-static-version="1791111429240969400">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#08376b">
<title>چهارسو · پیش‌نمایش مرکز خدمات مشتریان</title>
<link rel="icon" href="../../static/images/favicon.ico?v=1791111429240969400">
<link rel="stylesheet" href="../../static/css/tailwind.css?v=1791111429240969400">
<style>
@font-face{font-family:ChaharsuVazirmatn;src:url('../../static/fonts/vazirmatn-arabic-wght-normal.woff2?v=1791111429240969400') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:ChaharsuLatin;src:url('../../static/fonts/vazirmatn-latin-wght-normal.woff2?v=1791111429240969400') format('woff2');font-weight:100 900;font-display:swap}
:root{--ink:var(--color-ink);--sea:var(--color-sea);--muted:#526c86;--line:#dce5ed}
html{scroll-padding-top:110px}
body{font-family:ChaharsuVazirmatn,ChaharsuLatin,sans-serif}
button,a,input{touch-action:manipulation}
button{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--sea);outline-offset:4px}
[hidden]{display:none!important}
svg.icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.preview-bar{background:#e5f4ff;color:var(--ink);font-size:11px;text-align:center;padding:7px 14px;line-height:1.8;border-bottom:1px solid #cde6f7}
.preview-bar b{font-weight:800}
.cs-header{position:sticky;top:0;z-index:30;background:#eeeeeeed;border-bottom:1px solid #dce2e8;backdrop-filter:blur(14px)}
.cs-header-inner{max-width:1120px;margin:auto;padding:0 24px;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.cs-brand{display:flex;align-items:center;gap:15px;color:var(--ink)}
.cs-brand img{width:85px;height:auto}
.brand-divider{width:1px;height:32px;background:#cdd7e0}
.cs-brand b{display:block;font-size:20px;font-weight:900;line-height:1.3}
.cs-brand small{display:block;font-size:10px;color:var(--muted);margin-top:4px}
.cs-desktop-nav{display:flex;align-items:center;gap:8px}
.cs-desktop-nav a{padding:11px 18px;border-radius:12px;font-size:13px;font-weight:700;color:var(--muted)}
.cs-desktop-nav a[aria-current]{color:var(--ink);background:white}
.cs-profile{background:white;border:1px solid var(--line);border-radius:14px;color:var(--ink);min-height:44px;box-shadow:none;font-size:12px;padding:8px 12px;gap:8px}
.cs-profile:hover{background:#e5f4ff;color:var(--ink);box-shadow:none}
.avatar{display:grid;place-items:center;border-radius:10px;width:30px;height:30px;background:#e5f4ff;color:var(--ink);font-weight:800}
.cs-main{max-width:1120px;margin:auto;padding:28px 24px 40px}
.welcome{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;gap:14px}
.welcome p{font-size:13px;color:var(--muted);margin:0}
.welcome b{color:var(--ink);font-weight:800}
.welcome small{font-size:11px;color:var(--muted)}
.cs-hero{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:30px;overflow:hidden;background:var(--ink);color:white;border-radius:28px;padding:30px 34px;border-bottom:4px solid var(--color-coral)}
.cs-hero:before{content:'';position:absolute;z-index:-1;width:360px;height:360px;border-radius:50%;left:-160px;top:-210px;background:#0693e340}
.hero-copy{max-width:600px}
.hero-eyebrow{display:flex;align-items:center;gap:8px;color:#c0dff4;font-size:11px;font-weight:700;margin:0 0 12px}
.hero-eyebrow span{width:6px;height:6px;border-radius:50%;background:var(--color-coral)}
.cs-hero h1{font-size:30px;line-height:1.6;margin:0;font-weight:900;letter-spacing:0}
.cs-hero p:last-child{font-size:13px;line-height:1.9;color:#cfdfed;margin:8px 0 0}
.crossroads{width:156px;height:156px;position:relative;flex-shrink:0;display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px;transform:rotate(-8deg)}
.crossroads span{border:1px solid #ffffff28;border-radius:18px;background:#ffffff0a;display:grid;place-items:center;color:#92d5ff}
.crossroads span:nth-child(2){background:#0693e33b}
.crossroads span:nth-child(3){background:#fa9f0015;color:#ffc451}
.crossroads:after{content:'';position:absolute;width:20px;height:20px;background:#ffc451;border:6px solid var(--ink);border-radius:50%;top:calc(50% - 10px);left:calc(50% - 10px)}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:28px 0 15px}
.section-head h2{font-size:19px;line-height:1.6;margin:0;font-weight:900}
.section-head p{font-size:12px;color:var(--muted);margin:3px 0 0}
.section-head a{display:flex;align-items:center;gap:6px;font-size:12px;color:#1977ce;font-weight:800;min-height:44px;white-space:nowrap}
.section-label{font-size:10px;font-weight:700;color:#1977ce;display:block;margin-bottom:3px}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.service-card{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:right;gap:0;padding:20px;border-radius:22px;border:1px solid var(--line);background:white;color:var(--ink);box-shadow:none;min-height:200px;overflow:hidden}
.service-card:hover{background:white;color:var(--ink);box-shadow:0 15px 35px -25px #08376b70;border-color:#0693e350;transform:translateY(-3px)}
.service-card.featured{border-color:#badff5;background:#e5f4ff}
.service-card.featured:hover{background:#dff1fd}
.service-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:6px}
.service-icon{width:44px;height:44px;border-radius:14px;background:#e5f4ff;display:grid;place-items:center;color:#1977ce}
.featured .service-icon{background:#0693e3;color:white}
.future .service-icon{background:#f0f3f6;color:#526c86}
.soon{color:#805300;background:#fff3da;border:1px solid #f3ddae;border-radius:20px;padding:3px 8px;font-size:10px;font-weight:700;white-space:nowrap}
.service-card strong{font-size:15px;font-weight:900;line-height:1.7}
.service-card p{font-size:11px;font-weight:400;color:var(--muted);line-height:1.9;margin:4px 0 14px}
.service-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto;color:#1977ce;font-size:11px;font-weight:800}
.future .service-bottom{color:var(--muted)}
.service-bottom svg{width:17px;height:17px}
.profile-note{display:flex;align-items:center;gap:12px;margin-top:18px;border:1px solid #d6e1ea;background:#ffffff80;border-radius:16px;padding:12px 16px}
.profile-note>.icon{color:#1977ce;width:20px;height:20px}
.profile-note p{margin:0;font-size:11px;color:var(--muted);flex:1;line-height:1.9}
.profile-note b{color:var(--ink);font-weight:800}
.text-button{min-height:40px;padding:5px 8px;background:transparent;color:#1977ce;box-shadow:none;font-size:11px;white-space:nowrap}
.text-button:hover{background:#e5f4ff;color:var(--ink);box-shadow:none;transform:none}
.recent-head{margin-top:32px}
.history-panel{background:white;border:1px solid var(--line);border-radius:24px;overflow:hidden}
.history-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;gap:16px;border-bottom:1px solid #e7edf2}
.filter-group{display:flex;gap:5px;padding:4px;border-radius:12px;background:#f2f5f7}
.filter-group button{min-height:36px;padding:6px 12px;border-radius:9px;font-size:11px;background:transparent;box-shadow:none;color:var(--muted);font-weight:700}
.filter-group button[aria-pressed=true]{background:white;color:var(--ink);box-shadow:0 2px 5px #08376b0a}
.filter-group button:hover{transform:none;color:var(--ink);background:white}
.search{display:flex;gap:8px;align-items:center;max-width:250px;background:#f6f8fa;border:1px solid #e1e8ef;border-radius:12px;padding:0 10px}
.search svg{width:18px;height:18px;color:var(--muted)}
.search input[type=search]{min-width:0;background:transparent;border:0;box-shadow:none;border-radius:10px;padding:10px 0;font-size:12px;width:100%;min-height:42px}
.search input:focus{box-shadow:none}
.ticket-row{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto 24px;align-items:center;gap:14px;padding:20px;background:white;color:var(--ink);text-align:right;border-radius:0;box-shadow:none;border-bottom:1px solid #e7edf2;min-height:100px}
.ticket-row:last-child{border:0}
.ticket-row:hover{background:#f7fbfe;color:var(--ink);transform:none;box-shadow:none}
.ticket-symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#f0f5f9;color:#1977ce}
.ticket-content strong{display:block;font-size:14px;font-weight:800;line-height:1.8}
.ticket-content small{display:block;margin-top:6px;font-size:10px;color:var(--muted);font-weight:400}
.ticket-side{text-align:left;display:flex;align-items:flex-end;flex-direction:column;gap:8px}
.status{display:inline-flex;align-items:center;gap:5px;font-size:10px;border-radius:20px;padding:4px 9px;font-weight:700;white-space:nowrap;background:#e5f4ff;color:#1260a3}
.status:before{content:'';width:5px;height:5px;background:currentColor;border-radius:50%}
.status.closed{background:#f0f3f6;color:#526c86}
.status.waiting{background:#fff3da;color:#805300}
.ticket-number{font-family:ChaharsuLatin,monospace;font-size:10px;color:var(--muted);font-weight:400}
.row-arrow{color:#7791a8;width:18px!important}
.history-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #e7edf2;padding:10px 18px;font-size:10px;color:var(--muted)}
.history-footer button{font-size:11px}
.empty-result{padding:36px 20px;text-align:center;color:var(--muted);font-size:13px}
.empty-result b{display:block;color:var(--ink);font-size:16px;margin:10px 0}
.cs-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:10px;margin-top:25px;line-height:1.8}
.cs-footer span{display:flex;align-items:center;gap:6px}
.cs-footer svg{width:15px;height:15px}
.cs-dock{display:none}
dialog{width:min(520px,calc(100% - 28px));max-height:calc(100dvh - 40px);margin:auto;overflow-y:auto;overscroll-behavior:contain;padding:24px;border:1px solid var(--line);border-radius:24px;background:white;color:var(--ink);box-shadow:0 30px 100px #08376b35}
dialog::backdrop{background:#06284db3;backdrop-filter:blur(5px)}
.dialog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.close-dialog{min-height:40px;width:40px;padding:0;background:#f1f5f8;color:var(--ink);box-shadow:none;border-radius:12px;font-size:22px;font-weight:400}
.close-dialog:hover{background:#e5f4ff;color:var(--ink);transform:none;box-shadow:none}
dialog h2{font-size:22px;line-height:1.7;font-weight:900}
dialog p{font-size:13px;color:var(--muted);line-height:2;margin:10px 0 18px}
.demo-note{background:#fff7e7;color:#805300;font-size:11px;line-height:1.9;padding:12px;border-radius:12px;margin:14px 0}
.dialog-action{display:flex;width:100%;margin-top:16px}
.account-placeholder{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px;font-size:12px;gap:12px}
.account-placeholder b{font-weight:700}
.upload-demo{display:block;border:1px dashed #a3c7df;border-radius:16px;padding:22px;background:#f5fbff;text-align:center}
.upload-demo input[type=file]{font-size:12px;margin-top:12px;padding:8px;background:white}
.upload-demo span{font-size:12px;color:var(--muted);font-weight:400;display:block}
#file-status{font-size:12px}
@media(min-width:900px){.cs-main{padding-top:30px}.cs-hero{min-height:220px}.ticket-row{grid-template-columns:42px minmax(0,1fr) 185px 24px}}
@media(max-width:899px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-desktop-nav{gap:0}.cs-desktop-nav a{padding:10px}.cs-hero h1{font-size:27px}.crossroads{width:130px;height:130px}}
@media(max-width:639px){
html{scroll-padding-top:85px}
.preview-bar{font-size:10px;padding:5px 12px}
.cs-header-inner{min-height:65px;padding:0 18px}
.cs-brand{gap:10px}.cs-brand img{width:68px}.brand-divider{height:28px}.cs-brand b{font-size:18px}.cs-brand small{font-size:9px}
.cs-desktop-nav{display:none}.cs-profile{width:40px;min-height:40px;padding:0;background:transparent;border:0}.cs-profile .profile-label{display:none}
.cs-main{padding:18px 18px 110px}
.welcome{margin-bottom:13px}.welcome p{font-size:12px}.welcome small{font-size:10px}
.cs-hero{padding:22px;border-radius:26px;gap:0;min-height:184px}
.cs-hero h1{font-size:24px;line-height:1.65;max-width:245px}.hero-eyebrow{font-size:10px;margin-bottom:7px}.cs-hero p:last-child{font-size:12px;max-width:270px;margin-top:7px}
.crossroads{position:absolute;left:-15px;top:16px;width:105px;height:105px;opacity:.22;z-index:-1;gap:6px}.crossroads svg{width:18px;height:18px}
.section-head{margin-top:22px;margin-bottom:12px;gap:10px}.section-head h2{font-size:18px}.section-head p{font-size:11px}.section-head a{font-size:11px}.section-label{font-size:10px}
.service-grid{gap:10px}.service-card{padding:15px;border-radius:20px;min-height:174px}.service-top{margin-bottom:13px;gap:4px}.service-icon{width:37px;height:37px;border-radius:12px}.service-icon svg{width:21px;height:21px}.soon{font-size:9px;padding:3px 7px}
.service-card strong{font-size:13px;line-height:1.8}.service-card p{font-size:10px;line-height:1.9;margin:3px 0 10px}.service-bottom{font-size:10px}
.profile-note{gap:8px;padding:11px 12px;margin-top:14px}.profile-note p{font-size:10px}.profile-note p span{display:none}.profile-note .text-button{font-size:10px}
.recent-head{margin-top:24px}
.history-panel{border-radius:22px}.history-toolbar{padding:12px;flex-direction:column;align-items:stretch;gap:10px}.filter-group{align-self:stretch;justify-content:space-between}.filter-group button{flex:1;padding:6px 5px;font-size:10px}.search{max-width:none}.search input[type=search]{font-size:12px;min-height:40px}
.ticket-row{padding:16px 14px;grid-template-columns:minmax(0,1fr) auto;gap:10px;min-height:115px}.ticket-symbol,.row-arrow{display:none!important}.ticket-content strong{font-size:13px}.ticket-content small{font-size:10px;line-height:1.9;max-width:175px}.ticket-number{font-size:9px}.ticket-side{gap:10px}.status{font-size:9px;padding:4px 7px}
.history-footer{padding:10px 12px;font-size:9px}.history-footer button{font-size:10px}.cs-footer{flex-direction:column;align-items:center;font-size:9px;gap:8px}
.cs-dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;bottom:max(10px,env(safe-area-inset-bottom));inset-inline:12px;z-index:40;background:#08376bf5;padding:6px;border:1px solid #ffffff75;border-radius:22px;box-shadow:0 15px 35px #08376b35;backdrop-filter:blur(12px)}
.cs-dock a,.cs-dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:52px;border-radius:16px;color:#c4d7e9;font-size:10px;font-weight:700;background:transparent;padding:5px 2px;box-shadow:none}
.cs-dock [aria-current]{background:var(--sea);color:white}.cs-dock svg{width:20px;height:20px}.cs-dock button:hover{transform:none;box-shadow:none;background:#ffffff14;color:white}
dialog{padding:20px}dialog h2{font-size:20px}
}
@media(max-width:359px){.cs-main{padding-inline:12px}.cs-header-inner{padding-inline:12px}.service-card{padding:12px}.service-card strong{font-size:12px}.service-card p{font-size:10px}.ticket-row{grid-template-columns:1fr}.ticket-side{flex-direction:row;justify-content:space-between;align-items:center}.welcome small{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Service-first home: no history feed or profile reminder on this view. */
.services-intro{margin:4px 0 24px;max-width:640px}
.services-intro .section-label{margin-bottom:10px;color:#1977ce;font-size:12px}
.services-intro h1{font-size:30px;line-height:1.7;letter-spacing:0;font-weight:900;margin:0}
.services-intro p{margin:7px 0 0;font-size:13px;line-height:1.9;color:var(--muted)}
.service-grid{gap:16px}
.service-card{min-height:220px;padding:24px}
.service-card strong{font-size:17px}
.service-card p{font-size:12px}
.service-icon{width:48px;height:48px}
.service-bottom{font-size:12px}
.service-card.featured{background:var(--ink);border-color:var(--ink);color:white;border-bottom:3px solid var(--color-coral)}
.service-card.featured:hover{background:#0b4c8c;color:white}
.featured p{color:#cadbea}
.featured .service-bottom{color:white}
.featured .service-icon{background:#0693e3}
.back-to-services{display:inline-flex;align-items:center;min-height:44px;font-size:12px;font-weight:700;color:#1977ce;margin-bottom:8px}
#requests .recent-head{margin-top:8px}
#requests h1{font-size:26px;line-height:1.6;font-weight:900}
.cs-dock{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:639px){
.cs-main{padding-top:22px}
.services-intro{margin:0 0 22px}
.services-intro .section-label{font-size:10px;margin-bottom:7px}
.services-intro h1{font-size:23px;line-height:1.7}
.services-intro p{font-size:12px;line-height:1.9;margin-top:6px}
.service-grid{gap:12px}
.service-card{min-height:191px;padding:17px 15px}
.service-top{margin-bottom:17px}
.service-icon{width:42px;height:42px}
.service-card strong{font-size:14px}
.service-card p{font-size:11px;margin-bottom:15px}
.service-bottom{font-size:11px}
.cs-footer{margin-top:24px}
#requests h1{font-size:22px}
}
@media(max-width:359px){.services-intro h1{font-size:21px}.service-card{padding:14px 12px;min-height:190px}.service-card strong{font-size:13px}.service-card p{font-size:10px}.service-bottom{font-size:10px}}
.request-service{grid-column:span 2;cursor:default;min-height:154px;padding:20px}
.service-card.request-service:hover{transform:none;box-shadow:none;background:var(--ink);border-color:var(--ink);border-bottom-color:var(--color-coral)}
.request-service-head{display:flex;align-items:center;gap:10px}
.request-service-head .service-icon{flex-shrink:0;width:34px;height:34px;border-radius:11px}
.request-service-head .icon{width:20px;height:20px}
.request-service h2{font-size:17px;line-height:1.6;font-weight:900;margin:0}
.request-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:14px;margin-top:auto}
.request-action{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:9px 12px;border-radius:12px;color:white;text-align:center;border:1px solid transparent;box-shadow:none}
.request-action>span{min-width:0}
.request-action b{display:block;font-size:13px;line-height:1.7;font-weight:800;white-space:nowrap}
.request-action .icon{width:20px;height:20px}
.request-create{background:var(--sea)}
.request-create:hover{background:#1977ce;color:white;transform:none;box-shadow:none}
.request-history{background:#ffffff0d;border-color:#ffffff40}
.request-history:hover{background:#ffffff1a;color:white;border-color:#ffffff70}
.services-intro{margin:0 0 20px}
.services-intro h1{font-size:28px;line-height:1.6}
.service-card.future{min-height:184px}
@media(max-width:899px){.request-service{min-height:0}}
@media(max-width:639px){
.cs-main{padding:12px 16px 95px}
.services-intro{margin:0 0 12px}
.services-intro h1{font-size:22px;line-height:1.6}
.services-intro p{font-size:12px;margin-top:4px;line-height:1.8}
.service-grid{gap:10px}
.request-service{padding:12px 14px;min-height:0;border-radius:20px}
.request-service h2{font-size:15px}
.request-service-head .service-icon{width:30px;height:30px;border-radius:10px}
.request-service-head .icon{width:18px;height:18px}
.request-actions{gap:8px;padding-top:10px}
.request-action{min-height:44px;padding:9px 8px;gap:6px;border-radius:11px}
.request-action b{font-size:12px}
.request-action .icon{width:18px;height:18px}
.service-card.future{min-height:150px;padding:12px 13px;border-radius:20px}
.future .service-top{margin-bottom:8px}
.future .service-icon{width:31px;height:31px;border-radius:11px}
.future .service-icon .icon{width:20px;height:20px}
.future strong{font-size:13px}
.service-card.future p{font-size:11px;line-height:1.8;margin:4px 0 10px}
.future .service-bottom{font-size:10px}
.cs-footer{margin-top:18px}
}
@media(max-width:359px){
.cs-main{padding-inline:12px}
.request-action b{font-size:11px}
.service-card.future p{font-size:10px}
.service-card.future strong{font-size:12px}
}
.request-service .request-description{font-size:12px;font-weight:400;line-height:1.9;color:#cadbea;margin:6px 0 0;max-width:390px}
.developer-credit{justify-content:center;text-align:center}
.developer-credit p{margin:0;font-size:inherit;line-height:1.9}
.developer-credit a{color:inherit;white-space:nowrap}
.developer-credit a:hover{color:#1977ce}
/* Readable service text at every width; keep the full expert description visible. */
.mobile-copy{display:none}
.request-service h2{font-size:20px}
.request-service .request-description{display:block;font-size:14px;line-height:1.7;max-width:none}
.request-action b{font-size:14px}
.service-card.future strong{font-size:17px}
.service-card.future p{font-size:14px;line-height:1.7}
.future .service-bottom{font-size:13px}
.soon{font-size:12px}
.developer-credit{font-size:12px}
@media(max-width:639px){
.cs-main{padding-top:10px}
.services-intro{margin-bottom:12px}
.services-intro h1{font-size:22px}
.request-service-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;align-items:center}
.request-service-head>.service-icon{grid-column:2;grid-row:1}
.request-service-head>div{display:contents}
.request-service h2{grid-column:1;grid-row:1;font-size:18px}
.request-service .request-description{grid-column:1/-1;margin-top:6px;font-size:14px;line-height:1.65}
.request-action{gap:5px;padding-inline:7px}
.request-action b{font-size:13px}
.request-action .icon{width:16px;height:16px}
.service-card.future{min-height:120px;padding:11px 12px}
.future .service-top{margin-bottom:7px}
.future .service-icon{width:28px;height:28px}
.service-card.future strong{font-size:14px}
.service-card.future p{font-size:14px;line-height:1.65;margin-bottom:0}
.future .service-bottom{display:none}
.soon{font-size:12px;padding:2px 6px}
.desktop-copy{display:none}
.mobile-copy{display:inline}
}
.cs-brand small{font-size:11px}
.cs-desktop-nav a{font-size:14px}
@media(max-width:639px){
.request-action b{font-size:14px}
.cs-dock a,.cs-dock button{font-size:12px}
}
@media(max-width:359px){.request-action>.icon{display:none}.request-action{padding-inline:6px}}
/* Requests view: apply STYLE_GUIDE typography, spacing and touch targets. */
#requests .back-to-services{font-size:14px;color:var(--ink);min-height:44px}
#requests h1{font-size:28px;line-height:1.5;font-weight:900}
#requests .section-head p{font-size:14px;line-height:1.7;color:var(--muted)}
#requests .section-head{align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px}
#requests .text-button{font-size:14px;min-height:44px;color:var(--ink);padding:8px 10px}
#requests .text-button:hover{color:var(--ink);background:#e5f4ff}
#requests .history-panel{border-radius:22px}
#requests .history-toolbar{padding:16px;gap:12px}
#requests .filter-group{gap:4px;border-radius:12px}
#requests .filter-group button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;min-width:44px;padding:8px 12px;font-size:14px;line-height:1.5;color:var(--muted);white-space:nowrap}
#requests .filter-group button[aria-pressed=true]{color:var(--ink);background:white}
#requests .filter-group button span{font-size:12px}
#requests .search{max-width:300px;min-width:0;width:100%;border-color:var(--line)}
#requests .search input[type=search]{font-size:16px;line-height:1.5;min-height:44px;color:var(--ink);padding:10px 0}
#requests .search input::placeholder{color:var(--muted);opacity:1}
#requests .ticket-row{grid-template-columns:42px minmax(0,1fr) 230px 20px;gap:16px;padding:20px;min-height:112px}
#requests .ticket-content{min-width:0}
#requests .ticket-content strong{font-size:16px;line-height:1.7;font-weight:800;overflow-wrap:anywhere}
#requests .ticket-content small{font-size:12px;line-height:1.7;font-weight:400;color:var(--muted);max-width:none}
#requests .ticket-side{min-width:0;gap:8px;text-align:end}
#requests .status{font-size:12px;line-height:1.6;padding:4px 9px}
#requests .ticket-number{font-size:14px;line-height:1.7;overflow-wrap:anywhere;max-width:100%}
#requests .history-footer{padding:10px 16px;font-size:12px;line-height:1.7;flex-wrap:wrap;gap:8px}
#requests .history-footer button{font-size:14px}
#requests .empty-result{font-size:14px;line-height:1.7;padding:24px 16px}
#requests .empty-result b{font-size:18px}
#requests .ticket-symbol{background:#e5f4ff;color:var(--ink)}
#requests .row-arrow{color:var(--muted)}
/* White text on dark blue meets the guide's contrast mapping for this nav item. */
.cs-dock a[href="#requests"][aria-current]{background:var(--color-ink-soft);color:white}
#service-dialog:has(.request-detail-number) p{font-size:14px;line-height:1.7}
#service-dialog:has(.request-detail-number) .demo-note{font-size:14px;line-height:1.7}
#service-dialog:has(.request-detail-number) .close-dialog{min-height:44px;width:44px}
#service-dialog:has(.request-detail-number) h2{font-size:20px}
@media(max-width:899px){
#requests .ticket-row{grid-template-columns:42px minmax(0,1fr) 190px 20px}
#requests .history-toolbar{flex-wrap:wrap}
}
@media(max-width:639px){
#requests h1{font-size:24px}
#requests .section-head{align-items:flex-start;gap:8px}
#requests .history-panel{border-radius:20px}
#requests .history-toolbar{padding:12px;gap:10px}
#requests .filter-group button{padding:8px 5px;gap:4px;flex:1}
#requests .search{max-width:none}
#requests .ticket-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px 14px;min-height:0}
#requests .ticket-content strong{font-size:14px;line-height:1.7}
#requests .ticket-content small{margin-top:4px}
#requests .ticket-side{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
#requests .ticket-number{font-size:14px}
#requests .history-footer{padding:10px 12px}
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">
<symbol id="i-home" viewBox="0 0 24 24"><path d="m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1Z"/></symbol>
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
<symbol id="i-chat" viewBox="0 0 24 24"><path d="M5 4h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-6 3V6a2 2 0 0 1 2-2Z"/><path d="M7 9h10M7 13h6"/></symbol>
<symbol id="i-history" viewBox="0 0 24 24"><path d="M3 11a9 9 0 1 1 2 7M3 5v6h6M12 7v5l3 2"/></symbol>
<symbol id="i-receipt" viewBox="0 0 24 24"><path d="M5 3h14v18l-3-2-4 2-4-2-3 2ZM9 8h6M9 12h6"/></symbol>
<symbol id="i-bank" viewBox="0 0 24 24"><path d="m3 7 9-4 9 4v3H3ZM5 10v7M10 10v7M14 10v7M19 10v7M3 17h18v4H3"/></symbol>
<symbol id="i-grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="2"/><rect x="14" y="3" width="7" height="7" rx="2"/><rect x="3" y="14" width="7" height="7" rx="2"/><rect x="14" y="14" width="7" height="7" rx="2"/></symbol>
<symbol id="i-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21v-2a8 8 0 0 1 16 0v2"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M20 12H4m6-6-6 6 6 6"/></symbol>
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="m15 15 6 6"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path d="m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6Z"/><path d="m8 12 3 3 5-6"/></symbol>
</svg>
<div class="preview-bar"><b>پیش‌نمایش طراحی چهارسو</b> · اطلاعات نمونه است و هیچ درخواستی ارسال نمی‌شود.</div>
<header class="cs-header">
<div class="cs-header-inner">
<a class="cs-brand" href="#home" aria-label="چهارسو، خانه"><img src="../../static/images/company-logo.png?v=1791111429240969400" alt="لوله گستر گلپایگان" width="300" height="130"><span class="brand-divider" aria-hidden="true"></span><span><b>چهارسو</b><small>مرکز خدمات مشتریان</small></span></a>
<nav class="cs-desktop-nav" aria-label="منوی اصلی"><a href="#home" aria-current="page">خدمات چهارسو</a><a href="#requests">درخواست‌های من</a></nav>
<button class="cs-profile" data-dialog="profile" aria-label="مشاهده پروفایل"><span class="avatar">م</span><span class="profile-label">پروفایل من</span></button>
</div>
</header>
<main class="cs-main">
<section id="home" aria-labelledby="services-title">
<section id="services" aria-labelledby="services-title">
<div class="services-intro"><h1 id="services-title" tabindex="-1">خدمات چهارسو</h1></div>
<div class="service-grid">
<section class="service-card featured request-service" aria-labelledby="request-service-title">
<div class="request-service-head"><span class="service-icon"><svg class="icon" aria-hidden="true"><use href="#i-chat"/></svg></span><div><h2 id="request-service-title">ارتباط با کارشناسان</h2><p class="request-description">سؤال بپرسید، درخواست ثبت کنید یا برای پیگیری و هماهنگی با کارشناسان در ارتباط باشید.</p></div></div>
<div class="request-actions">
<button class="request-action request-create" data-dialog="new" aria-label="ثبت درخواست جدید"><svg class="icon" aria-hidden="true"><use href="#i-plus"/></svg><span><b>ثبت درخواست</b></span></button>
<a class="request-action request-history" href="#requests"><svg class="icon" aria-hidden="true"><use href="#i-history"/></svg><span><b>درخواست‌های من</b></span></a>
</div>
</section>
<!-- IMPLEMENTATION NOTE: ارسال فیش واریزی و شماره حساب‌ها دو خدمت مستقل‌اند.
در پیاده‌سازی Django برای هرکدام URL نام‌گذاری‌شده، view و template جدا تعریف شود.
این کارت‌ها باید لینک ناوبری به صفحهٔ خدمت باشند؛ آن‌ها را به modal یا data-dialog تبدیل نکنید.
نام فایل‌ها در اینجا فقط مربوط به نمونهٔ مستقل است؛ مسیر نهایی Django هنوز تعیین نشده است. -->
<a class="service-card future" href="payment-receipt.html?v=1791111429240969400">
<span class="service-top"><span class="service-icon"><svg class="icon" aria-hidden="true"><use href="#i-receipt"/></svg></span><span class="soon">به‌زودی</span></span>
<strong>ارسال فیش واریزی</strong><p><span class="desktop-copy">ارسال تصویر فیش برای بررسی پرداخت</span><span class="mobile-copy">ثبت تصویر پرداخت</span></p><span class="service-bottom">صفحهٔ ارسال فیش<svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></span>
</a>
<a class="service-card future" href="bank-accounts.html?v=1791111429240969400">
<span class="service-top"><span class="service-icon"><svg class="icon" aria-hidden="true"><use href="#i-bank"/></svg></span><span class="soon">به‌زودی</span></span>
<strong>شماره حساب‌ها</strong><p><span class="desktop-copy">دریافت شماره حساب، شبا و شناسهٔ واریز</span><span class="mobile-copy">حساب، شبا و شناسهٔ واریز</span></p><span class="service-bottom">مشاهده حساب‌ها<svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></span>
</a>
</div>
</section>
</section>
<section id="requests" aria-labelledby="recent-title" hidden>
<a class="back-to-services" href="#home">→ بازگشت به خدمات</a><div class="section-head recent-head"><div><h1 id="recent-title" tabindex="-1">درخواست‌های من</h1><p>پاسخ‌ها را ببینید و گفت‌وگوهای قبلی را ادامه دهید.</p></div><button class="text-button" data-dialog="new">+ درخواست جدید</button></div>
<div class="history-panel">
<div class="history-toolbar">
<div class="filter-group" role="group" aria-label="فیلتر درخواست‌ها"><button data-filter="all" aria-pressed="true">همه <span>۵</span></button><button data-filter="open" aria-pressed="false">در جریان <span>۲</span></button><button data-filter="closed" aria-pressed="false">بسته <span>۳</span></button></div>
<label class="search" style="margin:0"><svg class="icon" aria-hidden="true"><use href="#i-search"/></svg><input type="search" id="ticket-search" aria-label="جست‌وجوی درخواست‌ها" placeholder="جست‌وجوی موضوع یا شماره…"></label>
</div>
<div id="ticket-rows">
<button class="ticket-row" data-state="open" data-dialog="ticket" data-title="استعلام قیمت لوله و اتصالات" data-number="TK-2026-95742E53"><span class="ticket-symbol"><svg class="icon" aria-hidden="true"><use href="#i-chat"/></svg></span><span class="ticket-content"><strong>استعلام قیمت لوله و اتصالات</strong><small>فروش · پیش‌فاکتور و خرید · صف عمومی</small></span><span class="ticket-side"><span class="status">در حال بررسی</span><span class="ticket-number" dir="ltr">TK-2026-95742E53</span></span><svg class="icon row-arrow" aria-hidden="true"><use href="#i-arrow"/></svg></button>
<button class="ticket-row" data-state="open" data-dialog="ticket" data-title="پیگیری زمان تحویل سفارش" data-number="TK-2026-74B21A08"><span class="ticket-symbol"><svg class="icon" aria-hidden="true"><use href="#i-chat"/></svg></span><span class="ticket-content"><strong>پیگیری زمان تحویل سفارش</strong><small>فروش · پیگیری سفارش · آخرین فعالیت: ۲۴ شهریور</small></span><span class="ticket-side"><span class="status waiting">در انتظار پاسخ شما</span><span class="ticket-number" dir="ltr">TK-2026-74B21A08</span></span><svg class="icon row-arrow" aria-hidden="true"><use href="#i-arrow"/></svg></button>
<button class="ticket-row" data-state="closed" data-dialog="ticket" data-title="آزمایشی: درخواست قیمت" data-number="TK-2026-32C85F10"><span class="ticket-symbol"><svg class="icon" aria-hidden="true"><use href="#i-chat"/></svg></span><span class="ticket-content"><strong>آزمایشی: درخواست قیمت</strong><small>فروش · پیش‌فاکتور و خرید · ۲۴ شهریور ۱۴۰۵</small></span><span class="ticket-side"><span class="status closed">بسته</span><span class="ticket-number" dir="ltr">TK-2026-32C85F10</span></span><svg class="icon row-arrow" aria-hidden="true"><use href="#i-arrow"/></svg></button>
<button class="ticket-row" data-state="closed" data-dialog="ticket" data-title="مشاوره انتخاب محصول" data-number="TK-2026-AB61D922" data-older hidden><span class="ticket-symbol"><svg class="icon" aria-hidden="true"><use href="#i-chat"/></svg></span><span class="ticket-content"><strong>مشاوره انتخاب محصول</strong><small>فروش · مشاوره خرید · ۲۰ شهریور ۱۴۰۵</small></span><span class="ticket-side"><span class="status closed">بسته</span><span class="ticket-number" dir="ltr">TK-2026-AB61D922</span></span><svg class="icon row-arrow" aria-hidden="true"><use href="#i-arrow"/></svg></button>
<button class="ticket-row" data-state="closed" data-dialog="ticket" data-title="دریافت پیش‌فاکتور خرید" data-number="TK-2026-4F26C818" data-older hidden><span class="ticket-symbol"><svg class="icon" aria-hidden="true"><use href="#i-chat"/></svg></span><span class="ticket-content"><strong>دریافت پیش‌فاکتور خرید</strong><small>فروش · پیش‌فاکتور و خرید · ۱۸ شهریور ۱۴۰۵</small></span><span class="ticket-side"><span class="status closed">بسته</span><span class="ticket-number" dir="ltr">TK-2026-4F26C818</span></span><svg class="icon row-arrow" aria-hidden="true"><use href="#i-arrow"/></svg></button>
</div>
<div class="empty-result" id="no-results" role="status" hidden><b>درخواستی پیدا نشد</b>موضوع یا شمارهٔ دیگری جست‌وجو کنید.<br><button class="text-button" id="reset-search">پاک کردن جست‌وجو و فیلتر</button></div>
<div class="history-footer"><span id="result-count" aria-live="polite">نمایش ۳ درخواست از ۵ مورد</span><button class="text-button" id="show-all" aria-expanded="false">مشاهده همهٔ درخواست‌ها ←</button></div>
</div>
</section>
<!-- IMPLEMENTATION NOTE: در نسخهٔ اصلی امضای توسعه‌دهنده از تنظیمات برند (developer_credit) تأمین شود. -->
<footer class="cs-footer developer-credit"><p>طراحی و توسعه: محمد جواد فصاحت <a href="tel:09202202129" dir="ltr">09202202129</a></p></footer>
</main>
<nav class="cs-dock" aria-label="دسترسی سریع مشتری"><a href="#home" aria-current="page"><svg class="icon" aria-hidden="true"><use href="#i-grid"/></svg>خدمات</a><a href="#requests"><svg class="icon" aria-hidden="true"><use href="#i-history"/></svg>درخواست‌ها</a><button data-dialog="profile"><svg class="icon" aria-hidden="true"><use href="#i-user"/></svg>پروفایل</button></nav>
<dialog id="service-dialog" aria-labelledby="dialog-title">
<div class="dialog-top"><span class="service-icon" id="dialog-icon"><svg class="icon" aria-hidden="true"><use href="#i-chat"/></svg></span><button class="close-dialog" id="close-dialog" aria-label="بستن پنجره">×</button></div>
<h2 id="dialog-title"></h2><div id="dialog-body"></div>
<button class="dialog-action" id="dialog-done">متوجه شدم</button>
</dialog>
<script>
(() => {
const dialog=document.querySelector('#service-dialog');
const title=document.querySelector('#dialog-title');
const body=document.querySelector('#dialog-body');
const rows=[...document.querySelectorAll('.ticket-row')];
let activeFilter='all',expanded=false;
document.addEventListener('click', event=>{
const trigger=event.target.closest('[data-dialog]');
if(trigger){
const kind=trigger.dataset.dialog;
const icon={new:'plus',profile:'user',ticket:'chat'}[kind];
document.querySelector('#dialog-icon use').setAttribute('href','#i-'+icon);
if(kind==='new'){
title.textContent='ثبت درخواست جدید';
body.innerHTML='<p>موضوعتان را انتخاب کنید و گفت‌وگو با کارشناسان را آغاز کنید.</p><div class="demo-note">این نسخه برای بررسی طراحی است. فرم نمونه نیز اطلاعاتی ارسال نمی‌کند.</div><a class="button dialog-action" href="../ticket-new-wizard/index.html?v=1791111429240969400">مشاهده فرم نمونه ←</a>';
}else if(kind==='profile'){
title.textContent='پروفایل شما';
body.innerHTML='<p>نام، نام خانوادگی، استان و شهر به کارشناسان کمک می‌کند دقیق‌تر راهنمایی‌تان کنند.</p><div class="demo-note">تکمیل این اطلاعات اختیاری است و ثبت درخواست را متوقف نمی‌کند. ویرایش پروفایل در این نمونه به حساب واقعی متصل نیست.</div>';
}else{
title.textContent=trigger.dataset.title;
body.replaceChildren();
const number=document.createElement('p');number.className='request-detail-number';number.dir='ltr';number.textContent=trigger.dataset.number;
const note=document.createElement('div');note.className='demo-note';note.textContent='این درخواست نمونه است. در نسخهٔ اصلی، این انتخاب صفحهٔ گفت‌وگو، پیام‌ها و پیوست‌های همین درخواست را باز می‌کند.';
body.append(number,note);
}
dialog.showModal();
}
const filter=event.target.closest('[data-filter]');
if(filter){activeFilter=filter.dataset.filter;document.querySelectorAll('[data-filter]').forEach(b=>b.setAttribute('aria-pressed',String(b===filter)));render();}
});
const showView=(focus=false)=>{
const isHistory=location.hash==='#requests';
document.querySelector('#home').hidden=isHistory;
document.querySelector('#requests').hidden=!isHistory;
document.querySelectorAll('.cs-dock a,.cs-desktop-nav a').forEach(a=>{
a.removeAttribute('aria-current');
if(a.hash===(isHistory?'#requests':'#home'))a.setAttribute('aria-current','page');
});
document.title=isHistory?'درخواست‌های من · چهارسو':'چهارسو · پیش‌نمایش مرکز خدمات مشتریان';
if(focus){window.scrollTo({top:0,behavior:'instant'});document.querySelector(isHistory?'#recent-title':'#services-title').focus({preventScroll:true});}
};
window.addEventListener('hashchange',()=>showView(true));
showView();
const render=()=>{
const query=document.querySelector('#ticket-search').value.trim().toLowerCase().replace(/ي/g,'ی').replace(/ك/g,'ک');
let shown=0,total=0;
rows.forEach(row=>{
const matches=(activeFilter==='all'||row.dataset.state===activeFilter)&&row.textContent.toLowerCase().replace(/ي/g,'ی').replace(/ك/g,'ک').includes(query);
if(matches)total++;
row.hidden=!(matches&&(expanded||activeFilter!=='all'||query||!row.hasAttribute('data-older')));
if(!row.hidden)shown++;
});
document.querySelector('#no-results').hidden=shown!==0;
document.querySelector('#result-count').textContent='نمایش '+shown.toLocaleString('fa-IR')+' درخواست از '+total.toLocaleString('fa-IR')+' مورد';
const all=document.querySelector('#show-all');
all.hidden=expanded||total===shown;
all.setAttribute('aria-expanded',String(expanded));
};
document.querySelector('#ticket-search').addEventListener('input',render);
document.querySelector('#show-all').addEventListener('click',()=>{expanded=true;render();});
document.querySelector('#reset-search').addEventListener('click',()=>{
document.querySelector('#ticket-search').value='';activeFilter='all';
document.querySelectorAll('[data-filter]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.filter==='all')));
render();document.querySelector('#ticket-search').focus();
});
document.querySelector('#close-dialog').addEventListener('click',()=>dialog.close());
document.querySelector('#dialog-done').addEventListener('click',()=>dialog.close());
dialog.addEventListener('click',event=>{if(event.target===dialog){const r=dialog.getBoundingClientRect();if(event.clientX<r.left||event.clientX>r.right||event.clientY<r.top||event.clientY>r.bottom)dialog.close();}});
})();
</script>
</body>
</html>