235 lines
7.0 KiB
HTML
235 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>عرض سعر السيارة - Tenhall</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
line-height: 1.6;
|
|
background-color: #f9f9f9;
|
|
color: #333;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
.row {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background-color: #fff;
|
|
padding: 30px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
margin-bottom: 20px;
|
|
font-size: 20px;
|
|
}
|
|
p {
|
|
margin: 10px 0;
|
|
font-size: 14px;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px; /* Space between elements */
|
|
margin-bottom: 10px;
|
|
}
|
|
.row input {
|
|
flex: 1; /* Input fields take remaining space */
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
table-layout: fixed;
|
|
}
|
|
th, td {
|
|
padding: 10px;
|
|
text-align: center;
|
|
border: 1px solid #ddd;
|
|
word-wrap: break-word;
|
|
font-size: 14px;
|
|
}
|
|
th {
|
|
background-color: #2c3e50;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
tr:nth-child(even) {
|
|
background-color: #f8f9fa;
|
|
}
|
|
.footer {
|
|
margin-top: 30px;
|
|
font-size: 12px;
|
|
color: #777;
|
|
text-align: center;
|
|
border-top: 1px solid #ddd;
|
|
padding-top: 20px;
|
|
}
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.header img {
|
|
width: 100px;
|
|
height: auto;
|
|
}
|
|
.signature-section {
|
|
margin-top: 30px;
|
|
padding: 15px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.signature-section p {
|
|
margin: 5px 0;
|
|
font-size: 14px;
|
|
}
|
|
.highlight {
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
}
|
|
.gap {
|
|
display: inline-block;
|
|
width: 150px;
|
|
border-bottom: 1px solid #333;
|
|
margin: 0 5px;
|
|
}
|
|
input[type="text"] {
|
|
border: none;
|
|
border-bottom: 1px solid #333;
|
|
text-align: start; /* Align text to the start (left for RTL) */
|
|
width: 100%;
|
|
margin: 0 5px;
|
|
box-sizing: border-box;
|
|
font-size: 14px;
|
|
direction: rtl; /* Ensure RTL direction for input */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="row">
|
|
<div class="header">
|
|
<h1>عرض سعر السيارة - Tenhal</h1>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<p>المكرمين/</p>
|
|
<input type="text">
|
|
</div>
|
|
|
|
<p>السلام عليكم و رحمة الله و بركاته،</p>
|
|
|
|
<p>بناء على طلبكم، نورد لكم عرض سعر للسيارة وهو يعد إيجابا منا بالبيع:</p>
|
|
|
|
<table>
|
|
<tr>
|
|
<th style="width: 30%;">نوع السيارة</th>
|
|
<th style="width: 30%;">اللون الخارجي</th>
|
|
<th style="width: 30%;">اللون الداخلي</th>
|
|
</tr>
|
|
<tr>
|
|
{% for car in cars %}
|
|
<td><input type="text" style="text-align: center" value="{{ car.vin }}" disabled></td>
|
|
<td><input type="text" style="background-color: rgb({{ car.colors.first.interior.rgb }})" disabled></td>
|
|
<td><input type="text" style="background-color: rgb({{ car.colors.first.exterior.rgb }})" disabled></td>
|
|
{% endfor %}
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="row">
|
|
<p>حمولة المركبة (</p>
|
|
<input type="text">
|
|
<p>) سنة الصنع (</p>
|
|
<input type="text">
|
|
<p>) (جديد / مستعملة) كلم/ميل</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<p>مستوى اقتصاد الوقود (</p>
|
|
<input type="text">
|
|
<p>) رقم الشاسيه "في حال كانت السيارة مستعملة فقط" (</p>
|
|
<input type="text">
|
|
<p>)</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<p>مواصفات أخرى:</p>
|
|
<input type="text">
|
|
</div>
|
|
|
|
<table>
|
|
<tr>
|
|
<th style="width: 30%;">سعر السيارة الأساسي</th>
|
|
<th style="width: 30%;">مبلغ ضريبة القيمة المضافة (15% VAT)</th>
|
|
<th style="width: 30%;">إجمالي سعر السيارة مع الضريبة</th>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="text"></td>
|
|
<td><input type="text"></td>
|
|
<td><input type="text"></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>إجمالي سعر السيارة مع الضريبة كتابة: <span class="highlight">ريالا سعوديا فقط لا غير</span></p>
|
|
|
|
<div class="row">
|
|
<p>مدة الضمان:</p>
|
|
<input type="text">
|
|
<p>شهرا، أو</p>
|
|
<input type="text">
|
|
<p>كيلومترا /ميل (أيهما يأتي أولا)</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<p>ملاحظات:</p>
|
|
<input type="text">
|
|
</div>
|
|
|
|
<div class="row">
|
|
<p>اسم الشركة/ الوكالة:</p>
|
|
<input type="text">
|
|
</div>
|
|
|
|
<div class="row">
|
|
<p>العنوان: المدينة شارع</p>
|
|
<input type="text">
|
|
</div>
|
|
|
|
<div class="row">
|
|
<p>ص.ب رمز بريدي الهاتف:</p>
|
|
<input type="text">
|
|
</div>
|
|
|
|
<div class="signature-section">
|
|
<div class="row">
|
|
<p>الموظف المسؤول التوقيع:</p>
|
|
<span class="gap"></span>
|
|
</div>
|
|
<div class="row">
|
|
<p>التاريخ:</p>
|
|
<input type="text" style="width: 50px;">
|
|
<p>/</p>
|
|
<input type="text" style="width: 50px;">
|
|
<p>/</p>
|
|
<input type="text" style="width: 50px;">
|
|
<p>م الختم</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<!-- Footer content here -->
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |