Template:Vehicle Info: Difference between revisions

Revision as of 19:14, 14 March 2026

📋 How to use this template

Copy and paste the code below to display vehicle information in a professional card layout:

{{Vehicle Info
|name=Toyota Prius
|type=Hybrid Hatchback
|rate=2500
|transmission=Automatic
|ac=Yes
|seats=5
|fuel=Hybrid
|image=Toyota_Prius.jpg
}}

📝 Field descriptions:

name - Vehicle model name
type - Vehicle category (SUV, Sedan, Hatchback, etc.)
rate - Daily rental rate in BDT
transmission - Automatic or Manual
ac - Yes/No
seats - Number of seats
fuel - Petrol, Diesel, Hybrid, Electric
image - Filename of uploaded image

⚡ Note: After creating this template, go to your vehicle pages and add the code above.

@@ Line 1: / Line 1: @@
 <includeonly>
-<div style="border: 2px solid #2c3e50; border-radius: 10px; padding: 15px; margin: 15px 0; background-color: #f9f9f9;">
+<div style="border: none; border-radius: 16px; padding: 0; margin: 20px 0; background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 20px 30px -10px rgba(0,0,0,0.15), 0 8px 15px -6px rgba(0,0,0,0.1); overflow: hidden; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;">
-<div style="text-align: center; margin-bottom: 15px;">
-[[File:{{{image|}}}|center|300px|{{{name|}}}]]
+  <!-- Header with vehicle name and badge -->
-</div>
+  <div style="background: linear-gradient(135deg, #1e3c5c 0%, #2b4c7c 100%); padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
-<h3 style="color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 8px;">{{{name|Enter vehicle name}}}</h3>
+    <h2 style="margin: 0; color: white; font-weight: 600; font-size: 1.8em; letter-spacing: -0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">
-<table style="width: 100%; border-collapse: collapse;">
+      🚗 {{{name|Vehicle Name}}}
-  <tr style="background-color: #ecf0f1;">
+    </h2>
-    <th style="width: 200px; padding: 10px; border: 1px solid #bdc3c7;">Type:</th>
+    <span style="background-color: rgba(255,255,255,0.25); backdrop-filter: blur(5px); padding: 8px 20px; border-radius: 40px; color: white; font-weight: 600; font-size: 1.1em; border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
-    <td style="padding: 10px; border: 1px solid #bdc3c7;">{{{type|}}}</td>
+      ⭐ {{{type|Category}}}
-  </tr>
+    </span>
-  <tr>
+  </div>
-    <th style="width: 200px; padding: 10px; border: 1px solid #bdc3c7;">Daily Rate:</th>
-    <td style="padding: 10px; border: 1px solid #bdc3c7;">{{{rate|}}} BDT</td>
+  <!-- Two column layout: Image + Key Specs -->
-  </tr>
+  <div style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; background: white;">
-  <tr style="background-color: #ecf0f1;">
-    <th style="width: 200px; padding: 10px; border: 1px solid #bdc3c7;">Transmission:</th>
+    <!-- Left side: Image -->
-    <td style="padding: 10px; border: 1px solid #bdc3c7;">{{{transmission|}}}</td>
+    <div style="background-color: #f0f4f8; padding: 25px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e2e8f0;">
-  </tr>
+      <div style="width: 100%; text-align: center;">
-  <tr>
+        {{#if:{{{image|}}}|[[File:{{{image}}}|center|350px|{{{name|}}}]]|<div style="background: linear-gradient(145deg, #e6edf5, #d0ddee); padding: 60px 20px; border-radius: 24px; color: #4a5a6e; font-size: 1.2em;"><span style="font-size: 4em; display: block; margin-bottom: 10px;">🚘</span>No image available</div>}}
-    <th style="width: 200px; padding: 10px; border: 1px solid #bdc3c7;">AC:</th>
+      </div>
-    <td style="padding: 10px; border: 1px solid #bdc3c7;">{{{ac|}}}</td>
+    </div>
-  </tr>
-  <tr style="background-color: #ecf0f1;">
+    <!-- Right side: Key Specifications -->
-    <th style="width: 200px; padding: 10px; border: 1px solid #bdc3c7;">Seats:</th>
+    <div style="padding: 25px; background: white;">
-    <td style="padding: 10px; border: 1px solid #bdc3c7;">{{{seats|}}}</td>
+      <div style="margin-bottom: 20px; border-bottom: 2px solid #eef2f6; padding-bottom: 15px;">
-  </tr>
+        <h3 style="margin: 0; color: #1e3c5c; font-weight: 600; font-size: 1.4em; display: flex; align-items: center; gap: 8px;">
-  <tr>
+          <span style="background-color: #1e3c5c; width: 6px; height: 24px; border-radius: 3px; display: inline-block;"></span>
-    <th style="width: 200px; padding: 10px; border: 1px solid #bdc3c7;">Fuel Type:</th>
+          Key Specifications
-     <td style="padding: 10px; border: 1px solid #bdc3c7;">{{{fuel|Petrol}}}</td>
+        </h3>
-   </tr>
+      </div>
-</table>
-[[Category:Fleet Vehicles]]
+      <!-- Specs grid -->
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
+        <!-- Daily Rate -->
+        <div style="background: #f8fafc; border-radius: 14px; padding: 18px 12px; text-align: center; border: 1px solid #e9edf2; box-shadow: 0 4px 8px rgba(0,0,0,0.02);">
+          <div style="font-size: 1.8em; margin-bottom: 5px;">💰</div>
+          <div style="font-weight: 700; color: #1e3c5c; font-size: 1.3em;">{{{rate|0}}}</div>
+          <div style="font-size: 0.85em; color: #64748b;">BDT/Day</div>
+        </div>
+        <!-- Transmission -->
+        <div style="background: #f8fafc; border-radius: 14px; padding: 18px 12px; text-align: center; border: 1px solid #e9edf2; box-shadow: 0 4px 8px rgba(0,0,0,0.02);">
+          <div style="font-size: 1.8em; margin-bottom: 5px;">⚙️</div>
+          <div style="font-weight: 700; color: #1e3c5c; font-size: 1.3em;">{{{transmission|Auto}}}</div>
+          <div style="font-size: 0.85em; color: #64748b;">Transmission</div>
+        </div>
+        <!-- AC -->
+        <div style="background: #f8fafc; border-radius: 14px; padding: 18px 12px; text-align: center; border: 1px solid #e9edf2; box-shadow: 0 4px 8px rgba(0,0,0,0.02);">
+          <div style="font-size: 1.8em; margin-bottom: 5px;">❄️</div>
+          <div style="font-weight: 700; color: #1e3c5c; font-size: 1.3em;">{{{ac|Yes}}}</div>
+          <div style="font-size: 0.85em; color: #64748b;">Air Conditioning</div>
+        </div>
+        <!-- Seats -->
+        <div style="background: #f8fafc; border-radius: 14px; padding: 18px 12px; text-align: center; border: 1px solid #e9edf2; box-shadow: 0 4px 8px rgba(0,0,0,0.02);">
+          <div style="font-size: 1.8em; margin-bottom: 5px;">👥</div>
+          <div style="font-weight: 700; color: #1e3c5c; font-size: 1.3em;">{{{seats|5}}}</div>
+          <div style="font-size: 0.85em; color: #64748b;">Seats</div>
+        </div>
+        <!-- Fuel Type -->
+        <div style="background: #f8fafc; border-radius: 14px; padding: 18px 12px; text-align: center; border: 1px solid #e9edf2; box-shadow: 0 4px 8px rgba(0,0,0,0.02); grid-column: span 2;">
+          <div style="display: flex; align-items: center; justify-content: center; gap: 15px;">
+            <span style="font-size: 1.8em;">⛽</span>
+            <span style="font-weight: 700; color: #1e3c5c; font-size: 1.2em;">{{{fuel|Petrol}}}</span>
+          </div>
+        </div>
+      </div>
+      <!-- Rental Badge -->
+      <div style="margin-top: 20px; background: #eef7ff; border-radius: 12px; padding: 12px; text-align: center; border: 1px dashed #2b4c7c;">
+        <span style="color: #1e3c5c; font-weight: 600;">✓ Available for immediate rental</span>
+      </div>
+     </div>
+  </div>
+  <!-- Footer with category -->
+  <div style="background-color: #f0f4f8; padding: 12px 25px; font-size: 0.9em; color: #4a5a6e; border-top: 1px solid #dde3ea; display: flex; gap: 15px; flex-wrap: wrap;">
+    <span>📌 [[Category:Fleet Vehicles]]</span>
+    <span style="margin-left: auto;">🔄 Last updated: {{CURRENTDAY}} {{CURRENTMONTHNAME}} {{CURRENTYEAR}}</span>
+   </div>
 </div>
 </includeonly>
 <noinclude>
-== How to use this template ==
+<div style="background: linear-gradient(145deg, #f8fafc, #eef2f6); padding: 25px; border-radius: 20px; margin: 20px 0; border-left: 6px solid #1e3c5c; font-family: system-ui, -apple-system, sans-serif;">
-Use this template to display vehicle information.
+  <h2 style="color: #1e3c5c; margin-top: 0;">📋 How to use this template</h2>
+  <p style="font-size: 1.1em;">Copy and paste the code below to display vehicle information in a professional card layout:</p>
-=== Usage ===
+  <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #dde3ea; font-family: monospace; margin: 15px 0;">
-<pre>
+    <pre style="margin: 0; white-space: pre-wrap;">
 {{Vehicle Info
-|name=
+|name=Toyota Prius
-|type=
+|type=Hybrid Hatchback
-|rate=
+|rate=2500
-|transmission=
+|transmission=Automatic
-|ac=
+|ac=Yes
-|seats=
+|seats=5
-|fuel=
+|fuel=Hybrid
-|image=
+|image=Toyota_Prius.jpg
 }}
-</pre>
+    </pre>
+  </div>
+  <h3 style="color: #1e3c5c;">📝 Field descriptions:</h3>
+  <ul style="background: white; padding: 15px 30px; border-radius: 12px; border: 1px solid #dde3ea;">
+    <li><strong>name</strong> - Vehicle model name</li>
+    <li><strong>type</strong> - Vehicle category (SUV, Sedan, Hatchback, etc.)</li>
+    <li><strong>rate</strong> - Daily rental rate in BDT</li>
+    <li><strong>transmission</strong> - Automatic or Manual</li>
+    <li><strong>ac</strong> - Yes/No</li>
+    <li><strong>seats</strong> - Number of seats</li>
+    <li><strong>fuel</strong> - Petrol, Diesel, Hybrid, Electric</li>
+    <li><strong>image</strong> - Filename of uploaded image</li>
+  </ul>
+  <p style="margin-top: 15px; color: #2c3e50;">⚡ <strong>Note:</strong> After creating this template, go to your vehicle pages and add the code above.</p>
+</div>
 [[Category:Templates]]
 </noinclude>