Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Car Price Predictor</title> | |
| <style> | |
| body { | |
| background-image: url("/static/R.jpeg"); | |
| background-size: cover; | |
| background-position: center; | |
| font-family: 'Segoe UI', Arial, sans-serif; | |
| /* background: linear-gradient(120deg, #4a83ed, #517fd6); */ | |
| padding: 40px 0; | |
| } | |
| .container { | |
| max-width: 480px; | |
| background: #5dd9f4; | |
| padding: 32px 28px 28px 28px; | |
| border-radius: 16px; | |
| margin: auto; | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18); | |
| border: 1px solid #e3e3e3; | |
| } | |
| input, select { | |
| width: 100%; | |
| padding: 12px 10px; | |
| margin: 12px 0 18px 0; | |
| border: 1px solid #bfc9d1; | |
| border-radius: 6px; | |
| font-size: 1rem; | |
| background: #f8fafc; | |
| transition: border 0.2s; | |
| } | |
| input:focus, select:focus { | |
| border: 1.5px solid #007bff; | |
| outline: none; | |
| } | |
| button { | |
| background: linear-gradient(90deg, #007bff 60%, #28a745 100%); | |
| color: white; | |
| padding: 12px 0; | |
| border: none; | |
| border-radius: 6px; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| width: 100%; | |
| cursor: pointer; | |
| box-shadow: 0 2px 8px rgba(0,123,255,0.08); | |
| transition: background 0.2s; | |
| } | |
| button:hover { | |
| background: linear-gradient(90deg, #0056b3 60%, #218838 100%); | |
| } | |
| h2 { | |
| color: #22223b; | |
| margin-bottom: 18px; | |
| text-align: center; | |
| } | |
| label { | |
| font-weight: 500; | |
| color: #495057; | |
| } | |
| .result { | |
| margin-top: 24px; | |
| padding: 18px 12px; | |
| background: #e7f9ed; | |
| border-left: 5px solid #28a745; | |
| border-radius: 6px; | |
| font-size: 1.2rem; | |
| color: #155724; | |
| font-weight: 600; | |
| text-align: center; | |
| min-height: 32px; | |
| opacity: 0; | |
| animation: fadeIn 1s forwards; | |
| } | |
| .result:not(:empty) { | |
| opacity: 1; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .error { | |
| background: #ffeaea; | |
| border-left: 5px solid #dc3545; | |
| color: #721c24; | |
| } | |
| .spinner { | |
| display: none; | |
| margin: 0 auto 18px auto; | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid #007bff; | |
| border-radius: 50%; | |
| width: 36px; | |
| height: 36px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| input:hover, select:hover { | |
| background: #eef6fb; | |
| border-color: #007bff; | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| cursor: help; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 180px; | |
| background-color: #22223b; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 6px 8px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -90px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| font-size: 0.95rem; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .footer { | |
| margin-top: 40px; | |
| text-align: center; | |
| color: #888; | |
| font-size: 0.98rem; | |
| letter-spacing: 0.5px; | |
| } | |
| @media (max-width: 600px) { | |
| .container { padding: 18px 6px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Car Price Predictor</h2> | |
| <form method="post" autocomplete="off" id="predictForm" onsubmit="showSpinner()"> | |
| <label for="present_price">Present Price (in Lakhs) | |
| <span class="tooltip">ⓘ | |
| <span class="tooltiptext">Current ex-showroom price of the car in lakhs (e.g. 5.5)</span> | |
| </span> | |
| </label> | |
| <input type="number" step="0.01" min="0" name="present_price" id="present_price" placeholder="e.g. 5.5" required> | |
| <label for="kms_driven">Kilometers Driven | |
| <span class="tooltip">ⓘ | |
| <span class="tooltiptext">Total distance the car has been driven (e.g. 35000)</span> | |
| </span> | |
| </label> | |
| <input type="number" min="0" name="kms_driven" id="kms_driven" placeholder="e.g. 35000" required> | |
| <label for="owner">Number of Owners | |
| <span class="tooltip">ⓘ | |
| <span class="tooltiptext">How many people have owned the car?</span> | |
| </span> | |
| </label> | |
| <select name="owner" id="owner" required> | |
| <option value="0">0 (First Owner)</option> | |
| <option value="1">1 (Second Owner)</option> | |
| <option value="3">3 (Third Owner or more)</option> | |
| </select> | |
| <label for="car_age">Car Age (Years) | |
| <span class="tooltip">ⓘ | |
| <span class="tooltiptext">How old is the car? (e.g. 5)</span> | |
| </span> | |
| </label> | |
| <input type="number" min="0" max="30" name="car_age" id="car_age" placeholder="e.g. 5" required> | |
| <label for="fuel_type">Fuel Type | |
| <span class="tooltip">ⓘ | |
| <span class="tooltiptext">Select the car's fuel type</span> | |
| </span> | |
| </label> | |
| <select name="fuel_type" id="fuel_type" required> | |
| <option value="Petrol">Petrol</option> | |
| <option value="Diesel">Diesel</option> | |
| <option value="LPG">LPG</option> | |
| </select> | |
| <label for="company">Company | |
| <span class="tooltip">ⓘ | |
| <span class="tooltiptext">Select the car's manufacturer</span> | |
| </span> | |
| </label> | |
| <select name="company" id="company" required> | |
| <option value="Hyundai">Hyundai</option> | |
| <option value="Ford">Ford</option> | |
| <option value="Mahindra">Mahindra</option> | |
| <option value="Maruti">Maruti</option> | |
| <option value="Honda">Honda</option> | |
| <option value="Toyota">Toyota</option> | |
| <option value="Volkswagen">Volkswagen</option> | |
| <option value="Tata">Tata</option> | |
| </select> | |
| <div style="display: flex; gap: 10px;"> | |
| <button type="submit" style="flex:1;">Predict Car Price</button> | |
| <button type="reset" style="flex:1; background: #6c757d;">Reset</button> | |
| </div> | |
| </form> | |
| <div class="spinner" id="spinner"></div> | |
| <div class="result {% if 'Error' in prediction_text %}error{% endif %}" id="resultBox"> | |
| {{ prediction_text }} | |
| </div> | |
| <div class="footer"> | |
| © 2025 Car Price Predictor | Powered by Machine Learning | |
| </div> | |
| <script> | |
| function showSpinner() { | |
| document.getElementById('spinner').style.display = 'block'; | |
| document.getElementById('resultBox').style.opacity = 0.5; | |
| } | |
| document.getElementById('predictForm').addEventListener('reset', function() { | |
| setTimeout(function() { | |
| document.getElementById('resultBox').innerHTML = ''; | |
| }, 100); | |
| }); | |
| </script> | |
| </div> | |
| </body> | |
| </html> | |