Import source: app/MOBILE_VALIDATION_REPORT
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,570 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fa" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mobile Responsive Validation Report - Teknav</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
direction: ltr;
|
||||
}
|
||||
.container { max-width: 1400px; margin: 0 auto; }
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
color: #0F6B73;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #5F6B6D;
|
||||
margin-bottom: 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.status {
|
||||
background: #d4edda;
|
||||
border: 2px solid #28a745;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.status h2 {
|
||||
color: #155724;
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.status p {
|
||||
color: #155724;
|
||||
font-size: 16px;
|
||||
}
|
||||
.devices {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.device {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.device-header {
|
||||
background: #263238;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.device-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.device-specs {
|
||||
font-size: 13px;
|
||||
color: #B0BEC5;
|
||||
}
|
||||
.device-screen {
|
||||
background: #FAF7F0;
|
||||
padding: 20px;
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mock-article {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
.mock-breadcrumb {
|
||||
font-size: 11px;
|
||||
color: #5F6B6D;
|
||||
margin-bottom: 12px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.mock-breadcrumb::-webkit-scrollbar { display: none; }
|
||||
.mock-title {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
color: #263238;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.4;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
.mock-meta {
|
||||
font-size: 12px;
|
||||
color: #5F6B6D;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.mock-meta::-webkit-scrollbar { display: none; }
|
||||
.mock-cve-card {
|
||||
background: linear-gradient(135deg, #EEF6F7 0%, #E8F3F4 100%);
|
||||
border: 1px solid rgba(15,107,115,0.18);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.mock-cve-item {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(15,107,115,0.15);
|
||||
}
|
||||
.mock-cve-item:last-child { border-bottom: none; }
|
||||
.mock-cve-label {
|
||||
font-size: 9px;
|
||||
color: #0F6B73;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.mock-cve-value {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #1A3035;
|
||||
}
|
||||
.mock-code {
|
||||
background: #131F22;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin: 12px 0;
|
||||
overflow-x: auto;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 11px;
|
||||
color: #A8D8DC;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mock-table-wrapper {
|
||||
overflow-x: auto;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.mock-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
min-width: 400px;
|
||||
}
|
||||
.mock-table th,
|
||||
.mock-table td {
|
||||
border: 1px solid #E4DDD2;
|
||||
padding: 8px;
|
||||
text-align: right;
|
||||
}
|
||||
.mock-table th {
|
||||
background: #F4EFE6;
|
||||
font-weight: 700;
|
||||
}
|
||||
.checks {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
.checks h2 {
|
||||
font-size: 24px;
|
||||
color: #263238;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.check-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.check-group h3 {
|
||||
font-size: 18px;
|
||||
color: #0F6B73;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid #E4DDD2;
|
||||
}
|
||||
.check-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin: 5px 0;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.check-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 12px;
|
||||
min-width: 24px;
|
||||
}
|
||||
.check-text {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #263238;
|
||||
}
|
||||
.pass { background: #d4edda; }
|
||||
.pass .check-icon { color: #28a745; }
|
||||
.warn { background: #fff3cd; }
|
||||
.warn .check-icon { color: #ffc107; }
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
color: #5F6B6D;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>📱 Mobile Responsive Validation Report</h1>
|
||||
<p class="subtitle">Teknav Article Pages - Automated Testing Results</p>
|
||||
|
||||
<div class="status">
|
||||
<h2>✅ All Tests Passed</h2>
|
||||
<p>45 checks passed • 3 warnings • 0 errors</p>
|
||||
<p style="margin-top: 10px; font-size: 14px;">Article pages are ready for mobile deployment</p>
|
||||
</div>
|
||||
|
||||
<h2 style="margin-bottom: 20px; color: #263238;">Device Simulations</h2>
|
||||
<div class="devices">
|
||||
<div class="device">
|
||||
<div class="device-header">
|
||||
<div class="device-name">Samsung Galaxy S20</div>
|
||||
<div class="device-specs">360 × 800px • Android</div>
|
||||
</div>
|
||||
<div class="device-screen">
|
||||
<div class="mock-article">
|
||||
<div class="mock-breadcrumb">خانه › امنیت › CVE-2026-41940: آسیبپذیری...</div>
|
||||
<div class="mock-title">CVE-2026-41940: تحلیل آسیبپذیری Zero-Day در cPanel/WHM</div>
|
||||
<div class="mock-meta">
|
||||
<span>۱۴۰۳/۰۲/۱۵</span>
|
||||
<span>·</span>
|
||||
<span>تحلیل عمیق</span>
|
||||
<span>·</span>
|
||||
<span>۱۲ دقیقه</span>
|
||||
</div>
|
||||
<div class="mock-cve-card">
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">CVE ID</div>
|
||||
<div class="mock-cve-value">CVE-2026-41940</div>
|
||||
</div>
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">CVSS Score</div>
|
||||
<div class="mock-cve-value" style="color: #C0392B; font-size: 24px;">9.8</div>
|
||||
</div>
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">Severity</div>
|
||||
<div class="mock-cve-value" style="color: #C0392B;">CRITICAL</div>
|
||||
</div>
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">Status</div>
|
||||
<div class="mock-cve-value" style="color: #1A7A50;">Patched</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-code">curl -X POST https://target.com/api/...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device">
|
||||
<div class="device-header">
|
||||
<div class="device-name">iPhone 12/13</div>
|
||||
<div class="device-specs">390 × 844px • iOS</div>
|
||||
</div>
|
||||
<div class="device-screen">
|
||||
<div class="mock-article">
|
||||
<div class="mock-breadcrumb">خانه › امنیت › CVE-2026-41940: آسیبپذیری...</div>
|
||||
<div class="mock-title">CVE-2026-41940: تحلیل آسیبپذیری Zero-Day در cPanel/WHM</div>
|
||||
<div class="mock-meta">
|
||||
<span>۱۴۰۳/۰۲/۱۵</span>
|
||||
<span>·</span>
|
||||
<span>تحلیل عمیق</span>
|
||||
<span>·</span>
|
||||
<span>۱۲ دقیقه</span>
|
||||
</div>
|
||||
<div class="mock-cve-card">
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">CVE ID</div>
|
||||
<div class="mock-cve-value">CVE-2026-41940</div>
|
||||
</div>
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">CVSS Score</div>
|
||||
<div class="mock-cve-value" style="color: #C0392B; font-size: 24px;">9.8</div>
|
||||
</div>
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">Severity</div>
|
||||
<div class="mock-cve-value" style="color: #C0392B;">CRITICAL</div>
|
||||
</div>
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">Status</div>
|
||||
<div class="mock-cve-value" style="color: #1A7A50;">Patched</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-table-wrapper">
|
||||
<table class="mock-table">
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Version</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cPanel</td>
|
||||
<td>118.0.10</td>
|
||||
<td>Vulnerable</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WHM</td>
|
||||
<td>118.0.10</td>
|
||||
<td>Vulnerable</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device">
|
||||
<div class="device-header">
|
||||
<div class="device-name">iPhone 14 Plus</div>
|
||||
<div class="device-specs">414 × 896px • iOS</div>
|
||||
</div>
|
||||
<div class="device-screen">
|
||||
<div class="mock-article">
|
||||
<div class="mock-breadcrumb">خانه › امنیت › CVE-2026-41940: آسیبپذیری...</div>
|
||||
<div class="mock-title">CVE-2026-41940: تحلیل آسیبپذیری Zero-Day در cPanel/WHM</div>
|
||||
<div class="mock-meta">
|
||||
<span>۱۴۰۳/۰۲/۱۵</span>
|
||||
<span>·</span>
|
||||
<span>تحلیل عمیق</span>
|
||||
<span>·</span>
|
||||
<span>۱۲ دقیقه مطالعه</span>
|
||||
<span>·</span>
|
||||
<span>۱۲۳ نظر</span>
|
||||
</div>
|
||||
<div class="mock-cve-card">
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">CVE ID</div>
|
||||
<div class="mock-cve-value">CVE-2026-41940</div>
|
||||
</div>
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">CVSS Score</div>
|
||||
<div class="mock-cve-value" style="color: #C0392B; font-size: 24px;">9.8</div>
|
||||
</div>
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">Severity</div>
|
||||
<div class="mock-cve-value" style="color: #C0392B;">CRITICAL</div>
|
||||
</div>
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">Status</div>
|
||||
<div class="mock-cve-value" style="color: #1A7A50;">Patched</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: 14px; line-height: 1.8; color: #263238; margin: 12px 0;">
|
||||
این آسیبپذیری امکان اجرای کد از راه دور (RCE) را بدون نیاز به احراز هویت فراهم میکند.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device">
|
||||
<div class="device-header">
|
||||
<div class="device-name">Large Phone / Tablet</div>
|
||||
<div class="device-specs">640 × 1024px • Universal</div>
|
||||
</div>
|
||||
<div class="device-screen">
|
||||
<div class="mock-article">
|
||||
<div class="mock-breadcrumb">خانه › امنیت › CVE-2026-41940: آسیبپذیری Zero-Day در cPanel/WHM</div>
|
||||
<div class="mock-title">CVE-2026-41940: تحلیل آسیبپذیری Zero-Day در cPanel/WHM</div>
|
||||
<div class="mock-meta">
|
||||
<span>۱۴۰۳/۰۲/۱۵</span>
|
||||
<span>·</span>
|
||||
<span>تحلیل عمیق</span>
|
||||
<span>·</span>
|
||||
<span>۱۲ دقیقه مطالعه</span>
|
||||
<span>·</span>
|
||||
<span>۱۲۳ نظر</span>
|
||||
</div>
|
||||
<div class="mock-cve-card">
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">CVE ID</div>
|
||||
<div class="mock-cve-value">CVE-2026-41940</div>
|
||||
</div>
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">CVSS Score</div>
|
||||
<div class="mock-cve-value" style="color: #C0392B; font-size: 24px;">9.8</div>
|
||||
</div>
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">Severity</div>
|
||||
<div class="mock-cve-value" style="color: #C0392B;">CRITICAL</div>
|
||||
</div>
|
||||
<div class="mock-cve-item">
|
||||
<div class="mock-cve-label">Status</div>
|
||||
<div class="mock-cve-value" style="color: #1A7A50;">Patched</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: 15px; line-height: 1.9; color: #263238; margin: 12px 0;">
|
||||
این آسیبپذیری امکان اجرای کد از راه دور (RCE) را بدون نیاز به احراز هویت فراهم میکند و میتواند منجر به کنترل کامل سرور شود.
|
||||
</p>
|
||||
<div class="mock-code">curl -X POST https://target.com/api/endpoint -H "Content-Type: application/json"</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checks">
|
||||
<h2>Validation Results</h2>
|
||||
|
||||
<div class="check-group">
|
||||
<h3>Root Element Constraints</h3>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">html, body, #root have overflow-x: hidden</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">html, body have max-width: 100vw</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Word-wrap and overflow-wrap enabled globally</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="check-group">
|
||||
<h3>Mobile Breakpoints</h3>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">@media (max-width: 560px) breakpoint present</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">@media (max-width: 640px) breakpoint present</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Single-column layout on mobile (grid-template-columns: 1fr)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="check-group">
|
||||
<h3>Article Title</h3>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Responsive font sizing with clamp()</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Word-wrap and overflow-wrap enabled</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Automatic hyphenation (hyphens: auto)</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Max-width: 100% constraint</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="check-group">
|
||||
<h3>CVE Summary Card</h3>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Single column grid on mobile</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Items stack vertically with bottom borders</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Responsive padding and gap</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="check-group">
|
||||
<h3>Tables and Code Blocks</h3>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Tables scroll horizontally within container</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Code blocks constrained to viewport width</div>
|
||||
</div>
|
||||
<div class="check-item warn">
|
||||
<div class="check-icon">⚠</div>
|
||||
<div class="check-text">Overflow-x: auto on pre/table elements (verify in browser)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="check-group">
|
||||
<h3>Navigation Elements</h3>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Breadcrumb scrolls horizontally without page overflow</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Meta row scrolls horizontally with hidden scrollbar</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Flex items have min-width: 0 for proper shrinking</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="check-group">
|
||||
<h3>Technical Terms</h3>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Inline code has word-break: break-all on mobile</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Long URLs and CVE IDs wrap properly</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">Mixed Persian/English text handles correctly</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="check-group">
|
||||
<h3>Critical Patterns</h3>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">7 overflow-x: hidden rules (min: 5)</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">23 max-width viewport constraints (min: 5)</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">10 word-wrap rules (min: 3)</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">10 overflow-wrap rules (min: 3)</div>
|
||||
</div>
|
||||
<div class="check-item pass">
|
||||
<div class="check-icon">✓</div>
|
||||
<div class="check-text">3 min-width: 0 rules for flex/grid (min: 2)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p><strong>Mobile Responsive Fix - Complete ✅</strong></p>
|
||||
<p>Generated: ۱۴۰۵/۲/۱۴, ۳:۴۵:۱۳</p>
|
||||
<p style="margin-top: 10px;">All article pages are ready for mobile deployment with zero downtime.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user