GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Car Details UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    font-weight: 600;23    color: #222;24    font-size: 38px;25  }26  .status-bar .right {27    margin-left: auto;28    display: flex;29    gap: 22px;30    align-items: center;31    color: #555;32  }33  .dot { width: 14px; height: 14px; background:#777; border-radius: 50%; display:inline-block; }34 35  /* App bar */36  .app-bar {37    height: 130px;38    border-bottom: 1px solid #E6E6E6;39    display: flex;40    align-items: center;41    padding: 0 28px;42    gap: 18px;43  }44  .app-title {45    font-size: 48px;46    font-weight: 600;47    color: #222;48  }49  .spacer { flex: 1; }50  .app-actions {51    display: flex;52    gap: 36px;53    align-items: center;54  }55  .icon-btn {56    width: 64px; height: 64px;57    display: inline-flex; align-items: center; justify-content: center;58    color: #333;59  }60  svg { display: block; }61 62  /* Content */63  .content {64    padding: 20px 36px 260px 36px;65    overflow-y: auto;66    height: calc(2400px - 240px); /* status + app bar approx */67  }68 69  .section {70    padding: 18px 0 10px 0;71    border-bottom: 1px solid #EDEDED;72  }73  .section:last-of-type { border-bottom: none; }74 75  .section-title {76    display: flex; align-items: center; gap: 18px;77    font-size: 44px; font-weight: 700; color:#1f1f1f;78    margin: 8px 0 6px 0;79  }80  .section-sub {81    font-size: 36px; color: #5f5f5f; line-height: 1.35;82    margin: 10px 0 26px 82px;83  }84 85  .outline-btn {86    border: 2px solid #3c3c3c;87    border-radius: 20px;88    height: 120px;89    display: flex; align-items: center; justify-content: center;90    font-size: 44px; font-weight: 700; color:#222;91    margin: 12px 0 30px 0;92  }93 94  .rows { padding: 10px 0 16px 0; }95  .row {96    display: flex; align-items: center;97    padding: 22px 0;98    font-size: 40px;99    color: #333;100  }101  .row + .row { border-top: 1px solid #F1F1F1; }102  .row .label {103    flex: 1;104    color: #444;105  }106  .row .value {107    font-weight: 700;108    color: #222;109  }110 111  /* Bottom actions */112  .bottom-actions {113    position: absolute;114    left: 0; right: 0; bottom: 22px;115    padding: 0 36px;116    display: flex; gap: 40px;117  }118  .action-btn {119    flex: 1;120    background: #F1E85A;121    height: 160px;122    border-radius: 22px;123    display: flex; align-items: center; justify-content: center;124    gap: 20px;125    font-size: 48px; font-weight: 700; color: #2b2b2b;126    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;127  }128  .muted {129    color: #8B8B8B;130    font-weight: 600;131  }132 133  /* Small car icon circle */134  .circle-icon {135    width: 62px; height: 62px; border-radius: 12px;136    background: #F6F6F6; border: 1px solid #E4E4E4;137    display: flex; align-items: center; justify-content: center;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Status Bar -->145  <div class="status-bar">146    5:17147    <div class="right">148      <span class="dot"></span>149      <span class="dot" style="opacity:.6"></span>150      <span class="dot" style="opacity:.4"></span>151    </div>152  </div>153 154  <!-- App Bar -->155  <div class="app-bar">156    <div class="icon-btn" aria-label="Back">157      <svg width="64" height="64" viewBox="0 0 48 48">158        <path d="M28 10 L16 22 L28 34" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>159      </svg>160    </div>161    <div class="app-title">1 from 826</div>162    <div class="spacer"></div>163    <div class="app-actions">164      <div class="icon-btn" aria-label="Document">165        <svg width="64" height="64" viewBox="0 0 48 48">166          <path d="M14 8h16l6 6v24a2 2 0 0 1-2 2H14a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z" fill="none" stroke="#222" stroke-width="3"/>167          <path d="M30 8v8h8" fill="none" stroke="#222" stroke-width="3"/>168        </svg>169      </div>170      <div class="icon-btn" aria-label="Favorite">171        <svg width="64" height="64" viewBox="0 0 48 48">172          <path d="M24 6l5.9 11.7 12.9 1.9-9.4 9.2 2.2 12.7L24 36.8 12.4 41.5l2.2-12.7-9.4-9.2 12.9-1.9L24 6z" fill="none" stroke="#222" stroke-width="3" stroke-linejoin="round"/>173        </svg>174      </div>175      <div class="icon-btn" aria-label="Share">176        <svg width="64" height="64" viewBox="0 0 48 48">177          <circle cx="36" cy="12" r="4" fill="#222"/>178          <circle cx="12" cy="24" r="4" fill="#222"/>179          <circle cx="36" cy="36" r="4" fill="#222"/>180          <path d="M16 24l16-10M16 24l16 10" stroke="#222" stroke-width="3" fill="none"/>181        </svg>182      </div>183    </div>184  </div>185 186  <!-- Scrollable content -->187  <div class="content">188 189    <!-- Trade-In -->190    <div class="section">191      <div class="section-title">192        <div class="circle-icon">193          <svg width="40" height="40" viewBox="0 0 48 48">194            <rect x="10" y="18" width="28" height="10" rx="2" fill="none" stroke="#333" stroke-width="3"/>195            <circle cx="16" cy="32" r="3" fill="#333"/>196            <circle cx="32" cy="32" r="3" fill="#333"/>197          </svg>198        </div>199        <div>Trade-In</div>200      </div>201      <div class="section-sub">Buy and sell conveniently in just one step!</div>202      <div class="outline-btn">Add vehicle data</div>203    </div>204 205    <!-- Basic Data -->206    <div class="section">207      <div class="section-title">208        <div class="circle-icon">209          <svg width="40" height="40" viewBox="0 0 48 48">210            <rect x="10" y="18" width="28" height="10" rx="2" fill="none" stroke="#333" stroke-width="3"/>211            <circle cx="16" cy="32" r="3" fill="#333"/>212            <circle cx="32" cy="32" r="3" fill="#333"/>213          </svg>214        </div>215        <div>Basic Data</div>216      </div>217 218      <div class="rows">219        <div class="row">220          <div class="label">Body type</div>221          <div class="value">Off-Road/Pick-up</div>222        </div>223        <div class="row">224          <div class="label">Condition</div>225          <div class="value">Used</div>226        </div>227        <div class="row">228          <div class="label">Drive train</div>229          <div class="value">4WD</div>230        </div>231        <div class="row">232          <div class="label">Door count</div>233          <div class="value">5</div>234        </div>235        <div class="row">236          <div class="label">Number of Seats</div>237          <div class="value">7</div>238        </div>239        <div class="row">240          <div class="label">Offer number</div>241          <div class="value">11530038</div>242        </div>243        <div class="row">244          <div class="label">HSN</div>245          <div class="value">1480/AAN</div>246        </div>247      </div>248    </div>249 250    <!-- Vehicle History -->251    <div class="section">252      <div class="section-title">253        <div class="circle-icon">254          <svg width="40" height="40" viewBox="0 0 48 48">255            <rect x="10" y="18" width="28" height="10" rx="2" fill="none" stroke="#333" stroke-width="3"/>256            <circle cx="16" cy="32" r="3" fill="#333"/>257            <circle cx="32" cy="32" r="3" fill="#333"/>258          </svg>259        </div>260        <div>Vehicle History</div>261      </div>262 263      <div class="rows">264        <div class="row">265          <div class="label">Mileage</div>266          <div class="value">81,800 km</div>267        </div>268        <div class="row">269          <div class="label">First registration</div>270          <div class="value">04/2017</div>271        </div>272        <div class="row">273          <div class="label">Full Service History</div>274          <div class="value">Yes</div>275        </div>276        <div class="row">277          <div class="label">Non Smoker Car</div>278          <div class="value">Yes</div>279        </div>280        <div class="row">281          <div class="label">General inspection</div>282          <div class="value">04/2024</div>283        </div>284      </div>285    </div>286 287  </div>288 289  <!-- Bottom action buttons -->290  <div class="bottom-actions">291    <div class="action-btn">292      <svg width="56" height="56" viewBox="0 0 48 48">293        <path d="M14 10l6 6-4 4c2.5 4.4 6 8 10.4 10.4l4-4 6 6-3 5c-1 1.5-2.8 2.2-4.6 1.8C18 37 11 30 8.8 21.2c-.4-1.8.3-3.6 1.8-4.6l3.4-2.6z" fill="#2b2b2b"/>294      </svg>295      Call296    </div>297    <div class="action-btn">298      <svg width="56" height="56" viewBox="0 0 48 48">299        <path d="M6 12h36v24H6z" fill="none" stroke="#2b2b2b" stroke-width="3"/>300        <path d="M6 14l18 12L42 14" fill="none" stroke="#2b2b2b" stroke-width="3"/>301      </svg>302      E-mail303    </div>304  </div>305 306</div>307</body>308</html>