-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
191 lines (155 loc) · 7.94 KB
/
index.html
File metadata and controls
191 lines (155 loc) · 7.94 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AutoIQ : Used Car Pricing System</title>
<!-- Favicon Section -->
<link rel="icon" type="image/x-icon" href="images/favicon.png">
<!-- Font Awesome Section -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<!-- CSS File Section -->
<link rel="stylesheet" href="style.css">
<!-- Fontshare Section -->
<link href="https://api.fontshare.com/v2/css?f[]=chillax@1&display=swap" rel="stylesheet">
<!-- Image Preload Section -->
<link rel="preload" as="image" href="images/hero_image.png">
<!-- Google Analytics Tag -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4YGZX5TVNK"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-4YGZX5TVNK');
</script>
</head>
<body>
<!-- Navbar Section -->
<header class="navbar">
<div class="logo">
<img src="images/favicon.png" alt="AutoIQ Logo" loading="lazy">
</div>
<nav class="menu">
<a href="https://github.com/themrityunjaypathak/AutoIQ" target="_blank">GitHub</a>
<a href="https://autoiq.onrender.com/docs" target="_blank">API Docs</a>
<a href="https://hub.docker.com/r/themrityunjaypathak/autoiq" target="_blank">Docker Hub</a>
</nav>
<a href="https://github.com/themrityunjaypathak/AutoIQ" class="star-button" target="_blank">
<i class="fa-solid fa-star"></i> Star on GitHub
</a>
</header>
<main class="container">
<!-- Form Section -->
<section class="form">
<div class="hero-image">
<img src="images/hero_image.png" alt="Car Price Prediction Illustration" fetchpriority="high">
</div>
<form class="prediction" id="predictionForm">
<div class="form-grid">
<!-- Car Brand Input -->
<div class="input-group">
<select id="brand" required>
<option value="">Select Brand of your Car</option>
<option value="Maruti">Maruti</option>
<option value="Tata">Tata</option>
<option value="Nissan">Nissan</option>
<option value="Renault">Renault</option>
<option value="Hyundai">Hyundai</option>
<option value="Honda">Honda</option>
<option value="KIA">KIA</option>
<option value="MG">MG</option>
<option value="Ford">Ford</option>
<option value="Skoda">Skoda</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Mahindra">Mahindra</option>
<option value="Toyota">Toyota</option>
<option value="Jeep">Jeep</option>
<option value="Datsun">Datsun</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
</select>
</div>
<!-- Car Model Input -->
<div class="input-group">
<select id="model" required>
<option value="">Select Model of your Car</option>
</select>
</div>
<!-- KM Driven Input -->
<div class="input-group">
<input id="km_driven" placeholder="Enter KM Driven of your Car" type="number" min="0" required>
</div>
<!-- Engine Capacity Input -->
<div class="input-group">
<input id="engine_capacity" placeholder="Enter Engine Capacity (in CC) of your Car"
type="number" min="0" required>
</div>
<!-- Fuel Type Input -->
<div class="input-group">
<select id="fuel_type" required>
<option value="">Select Fuel Type of your Car</option>
<option value="Petrol">Petrol</option>
<option value="Diesel">Diesel</option>
<option value="CNG">CNG</option>
</select>
</div>
<!-- Transmission Input -->
<div class="input-group">
<select id="transmission" required>
<option value="">Select Transmission of your Car</option>
<option value="Automatic">Automatic</option>
<option value="Manual">Manual</option>
</select>
</div>
<!-- Manufacture Year Input -->
<div class="input-group">
<select id="year" required>
<option value="">Select Manufacture Year of your Car</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
</div>
</div>
<!-- Owner Input -->
<fieldset id="owner" class="owner">
<input type="radio" id="owner1" name="owner_type" value="1st owner" checked>
<label for="owner1">1<sup>st</sup> Owner</label>
<input type="radio" id="owner2" name="owner_type" value="2nd owner">
<label for="owner2">2<sup>nd</sup> Owner</label>
<input type="radio" id="owner3" name="owner_type" value="3rd owner">
<label for="owner3">3<sup>rd</sup> Owner</label>
<input type="radio" id="owner4" name="owner_type" value="Others">
<label for="owner4">Others</label>
</fieldset>
<!-- Form Button Section -->
<div class="form-button">
<button type="button" onclick="predict()"><i class="fa-solid fa-earth-americas"></i>
Predict</button>
<button type="button" onclick="resetForm()"><i class="fa-solid fa-rotate-right"></i>
Reset</button>
</div>
<!-- Prediction Result -->
<div id="result" class="result-box">
Please fill the form to get the estimated value of your car.
</div>
</form>
</section>
</main>
<!-- Javascript File Section -->
<script src="script.js" defer></script>
</body>
</html>