→ تفاوت با ویرایش قدیمی‌تر تفاوت با ویرایش جدیدتر ←

نسخهٔ ‏۲۸ ژوئیهٔ ۲۰۲۶، ساعت ۱۵:۰۳

مدارک مورد نیاز ثبت نام

مدارک شناسایی

کد ملی شناسنامه عکس

مدارک مالی

کارت سریال مالیاتی

شرایط خاص

اشتغال سند تکفل

@@ خط ۱: / خط ۱: @@
+<html>
-<html lang="fa" dir="rtl">
+<div id="custom-registration-page" style="direction: rtl; background-color: #064e3b !important; padding: 60px 20px; min-height: 100vh; font-family: Tahoma, Arial, sans-serif; position: relative; overflow: hidden;">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport, content="width=device-width, initial-scale=1.0">
-    <title>لیست مدارک لازم برای ثبت نام خودرو</title>
-    <meta name="description" content="مشاهده لیست مدارک لازم برای ثبت نام خودرو به صورت گرافیکی و آسان">
-    <!-- Tailwind CSS for Styling -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Font Awesome for Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <!-- Google Fonts (Vazirmatn for Persian) -->
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap" rel="stylesheet">
-     <style>
+     <!-- 4. عنوان در سمت راست بالا -->
-         body {
+    <div style="text-align: right; margin-bottom: 50px;">
-            font-family: 'Vazirmatn', sans-serif;
+         <h1 style="color: #fbbf24; font-size: 28px; margin: 0; font-weight: bold;">مدارک مورد نیاز ثبت نام</h1>
-            background-color: #064e3b; /* Dark Green Background */
+    </div>
-        }
-         .sun-yellow {
+    <!-- Container برای ایجاد حالت آبشاری -->
-            background-color: #FFD700; /* Sun Yellow */
+    <div class="waterfall-container" style="display: flex; flex-direction: column; align-items: flex-start; max-width: 500px; margin-right: auto; margin-left: auto;">
-         }
+         <!-- 1. کاشی اول (شناسایی) -->
+        <article class="card tile-1" style="background-color: #FFD700 !important; width: 300px; height: 220px; border-radius: 40px; padding: 25px; box-shadow: 0 15px 30px rgba(0,0,0,0.3); z-index: 30; margin-bottom: 40px; color: #064e3b;">
+            <div style="text-align: center; margin-bottom: 15px;">
+                <i class="fas fa-id-card" style="font-size: 50px; margin-bottom: 10px;"></i> <!-- 3. آیکون بزرگتر -->
+                <h2 style="font-size: 20px; font-weight: bold; margin: 0;">مدارک شناسایی</h2>
+            </div>
+            <div style="display: flex; justify-content: space-around; font-size: 14px; font-weight: bold;">
+                <span><i class="fas fa-fingerprint"></i> کد ملی</span>
+                <span><i class="fas fa-address-card"></i> شناسنامه</span>
+                <span><i class="fas fa-user"></i> عکس</span>
+            </div>
+         </article>
-         /* Custom overlapping logic for Desktop */
+         <!-- 2. کاشی دوم (مالی) - گوشه بالا-چپ روی پایین-راست کاشی اول -->
-         @media (min-width: 1024px) {
+         <article class="card tile-2" style="background-color: #FFD700 !important; width: 300px; height: 220px; border-radius: 40px; padding: 25px; box-shadow: 0 15px 30px rgba(0,0,0,0.3); z-index: 20; margin-bottom: 40px; color: #064e3b; margin-right: -120px;">
-            .tile-container {
+            <div style="text-align: center; margin-bottom: 15px;">
-                display: flex;
+                 <i class="fas fa-wallet" style="font-size: 50px; margin-bottom: 10px;"></i> <!-- 3. آیکون بزرگتر -->
-                justify-content: center;
+                 <h2 style="font-size: 20px; font-weight: bold; margin: 0;">مدارک مالی</h2>
-                align-items: center;
+             </div>
-                 padding: 50px 0;
+             <div style="display: flex; justify-content: space-around; font-size: 14px; font-weight: bold;">
-            }
+                <span><i class="fas fa-credit-card"></i> کارت</span>
-            /* Tile 2 moves up and right to overlap Tile 1's bottom-left */
+                <span><i class="fas fa-key"></i> سریال</span>
-            .tile-2 {
+                 <span><i class="fas fa-money-check"></i> مالیاتی</span>
-                 margin-right: -4rem;
+             </div>
-                z-index: 20;
+         </article>
-             }
-             /* Tile 3 moves up and right to overlap Tile 2's bottom-right */
-            /* Note: Since we are in RTL, we adjust the logic to match the visual direction */
-            .tile-3 {
-                 margin-right: -4rem;
-                z-index: 10;
-             }
-         }
-         .card-shadow {
+         <!-- 3. کاشی سوم (شرایط خاص) - گوشه بالا-راست روی پایین-چپ کاشی دوم -->
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+        <article class="card tile-3" style="background-color: #FFD700 !important; width: 300px; height: 220px; border-radius: 40px; padding: 25px; box-shadow: 0 15px 30px rgba(0,0,0,0.3); z-index: 10; margin-bottom: 40px; color: #064e3b; margin-right: 120px;">
-        }
+            <div style="text-align: center; margin-bottom: 15px;">
-    </style>
+                <i class="fas fa-file-signature" style="font-size: 50px; margin-bottom: 10px;"></i> <!-- 3. آیکون بزرگتر -->
-</head>
+                <h2 style="font-size: 20px; font-weight: bold; margin: 0;">شرایط خاص</h2>
-<body class="min-h-screen flex items-center justify-center p-6">
+            </div>
+            <div style="display: flex; justify-content: space-around; font-size: 14px; font-weight: bold;">
+                <span><i class="fas fa-briefcase"></i> اشتغال</span>
+                <span><i class="fas fa-home"></i> سند</span>
+                <span><i class="fas fa-users"></i> تکفل</span>
+            </div>
+        </article>
-     <main class="container mx-auto">
+     </div>
-        <header class="text-center mb-12">
-            <h1 class="text-3xl md:text-4xl font-bold text-yellow-400">مدارک مورد نیاز ثبت‌نام</h1>
-            <p class="text-emerald-100 mt-2">آماده‌سازی سریع برای ثبت‌نام خودرو</p>
-        </header>
-        <!-- Tiles Container -->
+    <!-- 5. فوتر با نام فراغیب -->
-        <div class="tile-container flex flex-col lg:flex-row items-center gap-8 lg:gap-0">
+    <footer style="position: absolute; bottom: 20px; width: 100%; text-align: center; color: rgba(255,255,255,0.5); font-size: 12px;">
+        طراحی شده به قدرت <span style="color: #fbbf24;">فراغیب</span>
-            <!-- Category 1: Identity -->
+    </footer>
-            <article class="tile-1 sun-yellow w-full max-w-sm p-8 rounded-[3rem] card-shadow text-emerald-900">
-                <div class="text-center mb-6">
-                    <i class="fas fa-id-card text-4xl mb-3"></i>
-                    <h2 class="text-xl font-bold">مدارک شناسایی</h2>
-                </div>
-                <ul class="space-y-4">
-                    <li class="flex items-center gap-3">
-                        <i class="fas fa-fingerprint opacity-60"></i>
-                        <span>کد ملی</span>
-                    </li>
-                    <li class="flex items-center gap-3">
-                        <i class="fas fa-address-card opacity-60"></i>
-                        <span>شناسنامه</span>
-                    </li>
-                    <li class="flex items-center gap-3">
-                        <i class="fas fa-user-circle opacity-60"></i>
-                        <span>عکس پرسنلی</span>
-                    </li>
-                </ul>
-            </article>
-            <!-- Category 2: Financial -->
+</div>
-            <article class="tile-2 sun-yellow w-full max-w-sm p-8 rounded-[3rem] card-shadow text-emerald-900">
-                <div class="text-center mb-6">
-                    <i class="fas fa-wallet text-4xl mb-3"></i>
-                    <h2 class="text-xl font-bold">مدارک مالی</h2>
-                </div>
-                <ul class="space-y-4">
-                    <li class="flex items-center gap-3">
-                        <i class="fas fa-credit-card opacity-60"></i>
-                        <span>شماره کارت</span>
-                    </li>
-                    <li class="flex items-center gap-3">
-                        <i class="fas fa-key opacity-60"></i>
-                        <span>سریال کارت</span>
-                    </li>
-                    <li class="flex items-center gap-3">
-                        <i class="fas fa-file-invoice-dollar opacity-60"></i>
-                        <span>گواهی مالیاتی</span>
-                    </li>
-                </ul>
-            </article>
-            <!-- Category 3: Conditional -->
+<!-- Font Awesome Loading (در صورت عدم وجود در مدیویکی) -->
-            <article class="tile-3 sun-yellow w-full max-w-sm p-8 rounded-[3rem] card-shadow text-emerald-900">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-                <div class="text-center mb-6">
-                    <i class="fas fa-file-signature text-4xl mb-3"></i>
-                    <h2 class="text-xl font-bold">شرایط خاص</h2>
-                </div>
-                <ul class="space-y-4">
-                    <li class="flex items-center gap-3">
-                        <i class="fas fa-briefcase opacity-60"></i>
-                        <span>گواهی اشتغال</span>
-                    </li>
-                    <li class="flex items-center gap-3">
-                        <i class="fas fa-home opacity-60"></i>
-                        <span>سند مالکیت</span>
-                    </li>
-                    <li class="flex items-center gap-3">
-                        <i class="fas fa-users opacity-60"></i>
-                        <span>مدارک تکفل</span>
-                    </li>
-                </ul>
-            </article>
-         </div>
+<style>
-     </main>
+    /* حل مشکل تداخل با قالب مدیویکی */
+    #custom-registration-page {
+        display: block !important;
+         margin: 20px auto !important;
+    }
+    /* ریسپانسیو برای موبایل */
+     @media (max-width: 768px) {
+        .waterfall-container {
+            align-items: center !important;
+        }
+        .tile-1, .tile-2, .tile-3 {
+            margin-right: 0 !important;
+            width: 90% !important;
+            max-width: 300px;
+        }
+    }
+</style>
-    <footer class="fixed bottom-4 text-emerald-300 text-sm">
-        طراحی شده برای سهولت در ثبت نام
-    </footer>
-</body>
 </html>