Spaces:

rezasabir123
/

guardian-score-evaluator

Running

App Files Files Community

rezasabir123 commited on Oct 27, 2025

Commit

f65e655

verified ·

1 Parent(s): 6f1b925

یک وبسایت درست کن که در آن فرد ابتدا اطلاعات هویتی شامل نام نام خانوادگی سن سال تولد کد ملی را وارد و دیتای زیر را پر کند:

Browse files

1) وضعیت جسمانی و فیزیکی (حداکثر 20 امتیاز)
 قد (10 امتیاز)
 175 تا 185 (3 امتیاز)
 185 تا 195 (6امتیاز)
 بیش از 195 (10 امتیاز)
 شاخص توده بدنی BMI (10 امتیاز)
 16 تا 5/18 (5 امتیاز)
 5/18 تا25 (10 امتیاز)
 25 تا 30 (5 امتیاز)
 35 تا 40 (3امتیاز)

2) سابقه ورزشی (حداکثر 10 امتیاز)
 مقام جهانی و آسیایی (۱۰ امتیاز)
 مقام کشوری (۷ امتیاز و بیش از 2 مقام در مجموع 10 امتیاز)
 مقام استانی (3 امتیاز و بیش از 2 مقام در مجموع 5 امتیاز)

3) سابقه بسیج و ایثارگری (حداکثر 5 امتیاز)
به ازای هر 2 سال یک امتیاز

4) گواهی‌نامه‌های رانندگی و مهارت (حداکثر 5 امتیاز)
 گواهی‌نامه رانندگی موتور یا ماشین (۳ امتیاز)
 گواهی مهارت‌های هفت‌گانه ICDL سازمان فنی و حرفه‌ای (5 امتیاز)
 گواهی پایان دوره نصب و راه اندازی دوربین مداربسته (5 امتیاز)
 گواهی پایان دوره کاربری سیستم مداربسته و مانیتورینگ (۵ امتیاز)

5) تسلط به زبان خارجی (حداکثر 10 امتیاز)
 داشتن گواهی‌ پایان دوره زبان خارجی از مراکز معتبر

6) سابقه کار مشابه (حداکثر 20 امتیاز)
 هر سال کار در زمینه حفاظت فیزیکی با ارائه مستندات و گواهی کارکرد (5 امتیاز)

7) حمایت از خانواده و جوانی جمعیت (حداکثر 10 امتیاز)
 متاهل بودن (2 امتیاز)
 داشتن یک فرزند (۳ امتیاز)
 داشتن دو فرزند به بالا (۵ امتیاز)

البته خود کاربر امتیاز را نبیند و سپس پس از تایید فرم ثبت شود. همچنین در پنل ادمین کلیه اطلاعات ثبت شده با مجموع امتیازات قابل مشاهده باشد.
طراحی بروز و رسمی باشد.

Files changed (7) hide show

README.md +7 -4
admin.html +118 -0
components/footer.js +37 -0
components/navbar.js +65 -0
index.html +165 -19
script.js +49 -0
style.css +32 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Guardian Score Evaluator
-emoji: 🐨
-colorFrom: indigo
 colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Guardian Score Evaluator 🛡️
+colorFrom: red
 colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

admin.html ADDED Viewed

	@@ -0,0 +1,118 @@

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>پنل مدیریت - Guardian Score Evaluator</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: '#1e40af',
+              secondary: '#1e3a8a',
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <div class="mb-6 flex justify-between items-center">
+            <h1 class="text-2xl font-bold text-primary">پنل مدیریت ارزیابی‌ها</h1>
+            <div class="flex space-x-2">
+                <button class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg flex items-center">
+                    <i data-feather="download" class="ml-1"></i>
+                    خروجی Excel
+                </button>
+                <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center">
+                    <i data-feather="refresh-cw" class="ml-1"></i>
+                    بروزرسانی
+                </button>
+            </div>
+        </div>
+        <div class="bg-white rounded-xl shadow-md overflow-hidden">
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام و نام خانوادگی</th>
+                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">کد ملی</th>
+                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت جسمانی</th>
+                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">سابقه ورزشی</th>
+                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">سابقه کار</th>
+                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">امتیاز کل</th>
+                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">عملیات</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">محمد احمدی</td>
+                            <td class="px-6 py-4 whitespace-nowrap">1234567890</td>
+                            <td class="px-6 py-4 whitespace-nowrap">16/20</td>
+                            <td class="px-6 py-4 whitespace-nowrap">7/10</td>
+                            <td class="px-6 py-4 whitespace-nowrap">15/20</td>
+                            <td class="px-6 py-4 whitespace-nowrap font-bold text-primary">68/80</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <button class="text-blue-600 hover:text-blue-900 mr-3">
+                                    <i data-feather="eye"></i>
+                                </button>
+                                <button class="text-green-600 hover:text-green-900">
+                                    <i data-feather="download"></i>
+                                </button>
+                            </td>
+                        </tr>
+                        <!-- More rows would be dynamically generated in a real app -->
+                    </tbody>
+                </table>
+            </div>
+            <div class="bg-gray-50 px-6 py-4 flex items-center justify-between border-t border-gray-200">
+                <div class="flex-1 flex justify-between sm:hidden">
+                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> قبلی </a>
+                    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> بعدی </a>
+                </div>
+                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                    <div>
+                        <p class="text-sm text-gray-700">
+                            نمایش
+                            <span class="font-medium">1</span>
+                            تا
+                            <span class="font-medium">10</span>
+                            از
+                            <span class="font-medium">24</span>
+                            نتیجه
+                        </p>
+                    </div>
+                    <div>
+                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                                <i data-feather="chevron-right"></i>
+                            </a>
+                            <a href="#" aria-current="page" class="z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a>
+                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a>
+                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                                <i data-feather="chevron-left"></i>
+                            </a>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

components/footer.js ADDED Viewed

	@@ -0,0 +1,37 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #111827;
+          color: white;
+          padding: 2rem;
+          text-align: center;
+          margin-top: 3rem;
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .copyright {
+          margin-top: 1rem;
+          font-size: 0.9rem;
+          opacity: 0.8;
+        }
+        @media (max-width: 768px) {
+          footer {
+            padding: 1.5rem;
+          }
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <p>سیستم ارزیابی و سنجش امتیازات حفاظتی</p>
+          <p class="copyright">تمامی حقوق محفوظ است © ۱۴۰۲</p>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,65 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .logo {
+          color: white;
+          font-weight: bold;
+          font-size: 1.25rem;
+          display: flex;
+          align-items: center;
+        }
+        .logo i {
+          margin-left: 0.5rem;
+        }
+        ul {
+          display: flex;
+          gap: 1.5rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        a {
+          color: white;
+          text-decoration: none;
+          transition: opacity 0.2s;
+          font-size: 0.95rem;
+        }
+        a:hover {
+          opacity: 0.8;
+        }
+        @media (max-width: 768px) {
+          nav {
+            flex-direction: column;
+            padding: 1rem;
+          }
+          ul {
+            margin-top: 1rem;
+            flex-wrap: wrap;
+            justify-content: center;
+          }
+        }
+      </style>
+      <nav>
+        <div class="logo">
+          <i data-feather="shield"></i>
+          <span>سیستم ارزیابی حفاظتی</span>
+        </div>
+        <ul>
+          <li><a href="/">صفحه اصلی</a></li>
+          <li><a href="/admin.html">پنل مدیریت</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,165 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Guardian Score Evaluator</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: '#1e40af',
+              secondary: '#1e3a8a',
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
+            <div class="p-8">
+                <h1 class="text-3xl font-bold text-primary mb-6">فرم ارزیابی امتیازات حفاظتی</h1>
+                <form id="evaluationForm" class="space-y-6">
+                    <section class="border-b pb-6">
+                        <h2 class="text-xl font-semibold text-gray-800 mb-4">اطلاعات هویتی</h2>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                                <label for="firstName" class="block text-sm font-medium text-gray-700">نام</label>
+                                <input type="text" id="firstName" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                            </div>
+                            <div>
+                                <label for="lastName" class="block text-sm font-medium text-gray-700">نام خانوادگی</label>
+                                <input type="text" id="lastName" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                            </div>
+                            <div>
+                                <label for="birthYear" class="block text-sm font-medium text-gray-700">سال تولد</label>
+                                <input type="number" id="birthYear" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                            </div>
+                            <div>
+                                <label for="nationalId" class="block text-sm font-medium text-gray-700">کد ملی</label>
+                                <input type="text" id="nationalId" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                            </div>
+                        </div>
+                    </section>
+                    <section class="border-b pb-6">
+                        <h2 class="text-xl font-semibold text-gray-800 mb-4">وضعیت جسمانی و فیزیکی (حداکثر 20 امتیاز)</h2>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                                <label for="height" class="block text-sm font-medium text-gray-700">قد (سانتیمتر)</label>
+                                <input type="number" id="height" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                            </div>
+                            <div>
+                                <label for="weight" class="block text-sm font-medium text-gray-700">وزن (کیلوگرم)</label>
+                                <input type="number" id="weight" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                            </div>
+                        </div>
+                    </section>
+                    <section class="border-b pb-6">
+                        <h2 class="text-xl font-semibold text-gray-800 mb-4">سابقه ورزشی (حداکثر 10 امتیاز)</h2>
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700">مقام جهانی/آسیایی</label>
+                                <input type="number" placeholder="تعداد" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700">مقام کشوری</label>
+                                <input type="number" placeholder="تعداد" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700">مقام استانی</label>
+                                <input type="number" placeholder="تعداد" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                            </div>
+                        </div>
+                    </section>
+                    <section class="border-b pb-6">
+                        <h2 class="text-xl font-semibold text-gray-800 mb-4">سابقه بسیج و ایثارگری (حداکثر 5 امتیاز)</h2>
+                        <div>
+                            <label for="basijYears" class="block text-sm font-medium text-gray-700">تعداد سال‌های فعالیت</label>
+                            <input type="number" id="basijYears" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                        </div>
+                    </section>
+                    <section class="border-b pb-6">
+                        <h2 class="text-xl font-semibold text-gray-800 mb-4">گواهی‌نامه‌ها (حداکثر 5 امتیاز)</h2>
+                        <div class="space-y-3">
+                            <div class="flex items-center">
+                                <input id="drivingLicense" name="certificates" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
+                                <label for="drivingLicense" class="mr-2 block text-sm text-gray-700">گواهی‌نامه رانندگی</label>
+                            </div>
+                            <div class="flex items-center">
+                                <input id="icdl" name="certificates" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
+                                <label for="icdl" class="mr-2 block text-sm text-gray-700">گواهی ICDL</label>
+                            </div>
+                            <div class="flex items-center">
+                                <input id="cctvInstallation" name="certificates" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
+                                <label for="cctvInstallation" class="mr-2 block text-sm text-gray-700">نصب دوربین مداربسته</label>
+                            </div>
+                            <div class="flex items-center">
+                                <input id="cctvMonitoring" name="certificates" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
+                                <label for="cctvMonitoring" class="mr-2 block text-sm text-gray-700">کاربری سیستم مداربسته</label>
+                            </div>
+                        </div>
+                    </section>
+                    <section class="border-b pb-6">
+                        <h2 class="text-xl font-semibold text-gray-800 mb-4">تسلط به زبان خارجی (حداکثر 10 امتیاز)</h2>
+                        <div>
+                            <label for="languageCertificate" class="block text-sm font-medium text-gray-700">گواهی زبان معتبر</label>
+                            <input type="text" id="languageCertificate" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                        </div>
+                    </section>
+                    <section class="border-b pb-6">
+                        <h2 class="text-xl font-semibold text-gray-800 mb-4">سابقه کار مشابه (حداکثر 20 امتیاز)</h2>
+                        <div>
+                            <label for="workExperience" class="block text-sm font-medium text-gray-700">تعداد سال‌های تجربه</label>
+                            <input type="number" id="workExperience" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                        </div>
+                    </section>
+                    <section class="border-b pb-6">
+                        <h2 class="text-xl font-semibold text-gray-800 mb-4">وضعیت خانوادگی (حداکثر 10 امتیاز)</h2>
+                        <div class="space-y-3">
+                            <div class="flex items-center">
+                                <input id="married" name="maritalStatus" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
+                                <label for="married" class="mr-2 block text-sm text-gray-700">متأهل</label>
+                            </div>
+                            <div>
+                                <label for="childrenCount" class="block text-sm font-medium text-gray-700">تعداد فرزندان</label>
+                                <input type="number" id="childrenCount" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
+                            </div>
+                        </div>
+                    </section>
+                    <div class="flex justify-end">
+                        <button type="submit" class="bg-primary hover:bg-secondary text-white font-bold py-2 px-6 rounded-lg transition duration-200">
+                            ثبت نهایی اطلاعات
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,49 @@

+document.getElementById('evaluationForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+    // Collect all form data
+    const formData = {
+        personalInfo: {
+            firstName: document.getElementById('firstName').value,
+            lastName: document.getElementById('lastName').value,
+            birthYear: document.getElementById('birthYear').value,
+            nationalId: document.getElementById('nationalId').value
+        },
+        physicalInfo: {
+            height: document.getElementById('height').value,
+            weight: document.getElementById('weight').value
+        },
+        // ... collect other form data similarly
+    };
+    // Calculate score (this would be done server-side in a real app)
+    let score = 0;
+    // Height score
+    const height = parseInt(formData.physicalInfo.height);
+    if (height >= 175 && height < 185) score += 3;
+    else if (height >= 185 && height < 195) score += 6;
+    else if (height >= 195) score += 10;
+    // BMI score (sample calculation)
+    const weight = parseInt(formData.physicalInfo.weight);
+    if (height && weight) {
+        const bmi = weight / Math.pow(height/100, 2);
+        if (bmi >= 16 && bmi < 18.5) score += 5;
+        else if (bmi >= 18.5 && bmi < 25) score += 10;
+        else if (bmi >= 25 && bmi < 30) score += 5;
+        else if (bmi >= 35 && bmi < 40) score += 3;
+    }
+    // Add other score calculations here...
+    // In a real app, you would send this to the server
+    console.log('Form data:', formData);
+    console.log('Calculated score:', score);
+    // Show success message
+    alert('اطلاعات با موفقیت ثبت شد. امتیاز شما محاسبه و به مدیر سیستم ارسال گردید.');
+    // Reset form
+    this.reset();
+});

style.css CHANGED Viewed

@@ -1,28 +1,41 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
-}

+/* Custom styles for RTL support */
 body {
+    font-family: 'Yekan', 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
+/* Form input styling */
+input[type="text"],
+input[type="number"],
+input[type="checkbox"],
+select {
+    font-family: inherit;
 }
+/* Custom checkbox */
+input[type="checkbox"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    padding: 2px;
+    background-clip: content-box;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    background-color: #fff;
+    margin-left: 5px;
 }
+input[type="checkbox"]:checked {
+    background-color: #1e40af;
+    border-color: #1e40af;
 }
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}