GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Tesla Search Results</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 box-shadow: 0 10px 30px rgba(0,0,0,0.15);12 border-radius: 28px;13 }14 .statusbar {15 height:90px; padding:0 40px;16 display:flex; align-items:center; justify-content:space-between;17 color:#333; font-weight:600; font-size:36px;18 }19 .status-icons { display:flex; gap:30px; align-items:center; }20 .header {21 display:flex; align-items:center; gap:28px;22 padding:20px 40px;23 }24 .back-btn {25 width:72px; height:72px; border-radius:36px;26 display:flex; align-items:center; justify-content:center;27 border:1px solid #e0e0e0; background:#fff;28 }29 .header-title { display:flex; flex-direction:column; }30 .header-title .count { font-size:40px; font-weight:700; color:#111; }31 .header-title .label { font-size:34px; color:#666; margin-top:8px; }32 .chips { padding:10px 40px 20px 40px; display:flex; gap:18px; flex-wrap:wrap; }33 .chip {34 display:flex; align-items:center; gap:16px;35 border:1px solid #d7d7d7; border-radius:36px;36 padding:22px 28px; background:#f7f7f7; color:#333; font-size:34px;37 }38 .results-area { padding: 0 40px; }39 .card {40 border:1px solid #e6e6e6; border-radius:26px;41 overflow:hidden; box-shadow: 0 6px 12px rgba(0,0,0,0.08);42 margin-bottom:28px; background:#fff;43 }44 .car-image {45 width:100%; height:540px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;46 display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px;47 }48 .dealer-banner {49 width:100%; height:140px; background:#E0E0E0; border-top:1px solid #BDBDBD;50 display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;51 }52 .card-body { padding:30px 34px 20px 34px; }53 .title-row { display:flex; align-items:center; justify-content:space-between; }54 .car-title { font-size:44px; font-weight:800; color:#111; }55 .action-icons { display:flex; gap:26px; }56 .subtitle { font-size:38px; color:#333; margin-top:8px; }57 .price { font-size:56px; font-weight:800; color:#111; margin:24px 0; }58 .specs { display:grid; grid-template-columns: 1fr 1fr; row-gap:20px; column-gap:20px; font-size:34px; color:#333; }59 .muted { color:#777; }60 .dealer-info { border-top:1px solid #eee; margin-top:24px; padding-top:24px; font-size:32px; color:#333; }61 .rating { display:flex; align-items:center; gap:18px; margin-top:16px; }62 .rating .stars { display:flex; gap:8px; }63 .save-search {64 position:absolute; left:50%; transform:translateX(-50%);65 bottom:250px; width:760px; height:120px; border-radius:60px;66 background:#f9e54d; display:flex; align-items:center; justify-content:center;67 font-size:42px; font-weight:800; color:#333; box-shadow: 0 8px 16px rgba(0,0,0,0.15);68 gap:22px;69 }70 .bottom-nav {71 position:absolute; bottom:0; left:0; width:100%; height:190px;72 border-top:1px solid #e6e6e6; background:#fff;73 display:flex; justify-content:space-around; align-items:center;74 font-size:30px; color:#666;75 }76 .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; }77 .nav-item.active { color:#111; font-weight:700; }78 /* Simple icon styles */79 svg { display:block; }80</style>81</head>82<body>83<div id="render-target">84 <!-- Status Bar -->85 <div class="statusbar">86 <div style="display:flex; align-items:center; gap:22px;">87 <span>5:16</span>88 <!-- light gear icon -->89 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">90 <path d="M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l-2.2.4a7.9 7.9 0 00-.7 1.7l1.3 1.9-2.1 2.1-1.9-1.3a7.9 7.9 0 00-1.7.7L12 21l-1.4-2.2a7.9 7.9 0 00-1.7-.7l-1.9 1.3-2.1-2.1 1.3-1.9a7.9 7.9 0 00-.7-1.7L3 12l2.2-.4a7.9 7.9 0 00.7-1.7L4.6 8l2.1-2.1 1.9 1.3a7.9 7.9 0 001.7-.7L12 3l1.4 2.2a7.9 7.9 0 001.7.7l1.9-1.3L19 6.7l-1.3 1.9c.3.6.5 1.2.7 1.7L21 12z" stroke="#666" stroke-width="1.2"/>91 </svg>92 </div>93 <div class="status-icons">94 <!-- wifi -->95 <svg width="40" height="40" viewBox="0 0 24 24">96 <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zm-7-7a12 12 0 0114 0l-1.5 1.5a9.5 9.5 0 00-11 0L5 11.5zm3 3a7 7 0 018 0l-1.5 1.5a4.5 4.5 0 00-5 0L8 14.5z" fill="#555"/>97 </svg>98 <!-- battery -->99 <svg width="40" height="40" viewBox="0 0 24 24">100 <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#555"></rect>101 <rect x="20" y="10" width="2" height="4" fill="#555"></rect>102 </svg>103 </div>104 </div>105 106 <!-- Header -->107 <div class="header">108 <div class="back-btn">109 <svg width="42" height="42" viewBox="0 0 24 24">110 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>111 </svg>112 </div>113 <div class="header-title">114 <div class="count">826</div>115 <div class="label">Results</div>116 </div>117 <!-- up/down sort icon on far right -->118 <div style="margin-left:auto;">119 <svg width="48" height="48" viewBox="0 0 24 24">120 <path d="M7 4l-3 3h6L7 4zm10 16l3-3h-6l3 3zM4 10h16v2H4zm0 6h16v2H4z" fill="#333"/>121 </svg>122 </div>123 </div>124 125 <!-- Filter chips -->126 <div class="chips">127 <div class="chip">128 <svg width="36" height="36" viewBox="0 0 24 24">129 <path d="M4 6h16v2H4zm3 5h10v2H7zm3 5h4v2h-4z" fill="#333"/>130 </svg>131 <span>Filter</span>132 </div>133 <div class="chip">134 <span>Make: Tesla</span>135 <svg width="30" height="30" viewBox="0 0 24 24">136 <path d="M6 6l12 12M18 6L6 18" stroke="#777" stroke-width="2"/>137 </svg>138 </div>139 <div class="chip">140 <span>Model: Model X</span>141 <svg width="30" height="30" viewBox="0 0 24 24">142 <path d="M6 6l12 12M18 6L6 18" stroke="#777" stroke-width="2"/>143 </svg>144 </div>145 </div>146 147 <!-- First result card -->148 <div class="results-area">149 <div class="card">150 <div class="car-image">[IMG: Tesla Model X in showroom]</div>151 <div class="dealer-banner">[IMG: Dealer Logo - REFFGEN & SCHMUCK AUTO_LIEBE]</div>152 153 <div class="card-body">154 <div class="title-row">155 <div>156 <div class="car-title">Tesla Model X</div>157 <div class="subtitle">X PERFORMANCE DUAL 7SITZ...</div>158 </div>159 <div class="action-icons">160 <!-- star outline -->161 <svg width="48" height="48" viewBox="0 0 24 24">162 <path d="M12 17.3l-6 3.4 1.2-6.7L2 9.8l6.8-1L12 3l3.2 5.8 6.8 1-5.2 4.2 1.2 6.7-6-3.4z" fill="none" stroke="#1E88E5" stroke-width="1.8"/>163 </svg>164 <!-- share -->165 <svg width="48" height="48" viewBox="0 0 24 24">166 <path d="M18 8a3 3 0 10-2.9-3.7l-7 3.4a3 3 0 100 4.7l7 3.4A3 3 0 1018 16" fill="none" stroke="#1E88E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>167 </svg>168 </div>169 </div>170 171 <div class="price">€ 47,444.-</div>172 173 <div class="specs">174 <div>81,800 km</div>175 <div>04/2017</div>176 <div>568 kW (772 hp)</div>177 <div class="muted">Used</div>178 <div class="muted">- (Previous Owners)</div>179 <div style="display:flex; align-items:center; gap:12px;">180 Electric181 <svg width="30" height="30" viewBox="0 0 24 24">182 <path d="M13 2L5 14h6l-1 8 8-12h-6l1-8z" fill="#1565C0"/>183 </svg>184 </div>185 <div class="muted">- (kWh/100 km)*</div>186 <div class="muted">-/- (CO₂/km)*</div>187 </div>188 189 <div class="dealer-info">190 Reffgen & Schmuck Automobile GmbH<br>191 Benjamin Müller • DE-68309 Mannheim192 <div class="rating">193 <div class="stars">194 <!-- 5 yellow stars -->195 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 9l6.7-1L12 2l3.3 6 6.7 1-5.5 4.5L18 20z" fill="#FFD54F"/></svg>196 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 9l6.7-1L12 2l3.3 6 6.7 1-5.5 4.5L18 20z" fill="#FFD54F"/></svg>197 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 9l6.7-1L12 2l3.3 6 6.7 1-5.5 4.5L18 20z" fill="#FFD54F"/></svg>198 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 9l6.7-1L12 2l3.3 6 6.7 1-5.5 4.5L18 20z" fill="#FFD54F"/></svg>199 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 9l6.7-1L12 2l3.3 6 6.7 1-5.5 4.5L18 20z" fill="#FFD54F"/></svg>200 </div>201 <div>(359)</div>202 </div>203 </div>204 </div>205 </div>206 </div>207 208 <!-- Floating Save Search -->209 <div class="save-search">210 <svg width="44" height="44" viewBox="0 0 24 24">211 <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#333"/>212 </svg>213 <span>Save search</span>214 </div>215 216 <!-- Bottom Navigation -->217 <div class="bottom-nav">218 <div class="nav-item">219 <svg width="50" height="50" viewBox="0 0 24 24">220 <path d="M12 3l9 8h-3v8H6v-8H3l9-8z" fill="#666"/>221 </svg>222 <div>Discover</div>223 </div>224 <div class="nav-item active">225 <svg width="50" height="50" viewBox="0 0 24 24">226 <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1015.5 14zM10 15a5 5 0 110-10 5 5 0 010 10z" fill="#111"/>227 </svg>228 <div>Search</div>229 </div>230 <div class="nav-item">231 <svg width="50" height="50" viewBox="0 0 24 24">232 <path d="M12 21.35l-1.45-1.32C5 15 2 12.36 2 8.5A5.5 5.5 0 0112 6a5.5 5.5 0 0110 2.5c0 3.86-3 6.5-8.55 11.54L12 21.35z" fill="#666"/>233 </svg>234 <div>Favourites</div>235 </div>236 <div class="nav-item">237 <svg width="50" height="50" viewBox="0 0 24 24">238 <path d="M6 4h12v2H6zm0 5h12v2H6zm0 5h12v2H6zm0 5h12v2H6z" fill="#666"/>239 </svg>240 <div>Saved searches</div>241 </div>242 <div class="nav-item">243 <svg width="50" height="50" viewBox="0 0 24 24">244 <path d="M5 20h14v-2H5V4H3v14a2 2 0 002 2zm16-12h-6l2-3h4v3z" fill="#666"/>245 </svg>246 <div>Selling</div>247 </div>248 </div>249</div>250</body>251</html>