GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Vehicle Details UI</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#111315; color:#F5F5F5;11  }12  .safe-pad { padding: 0 40px; }13  .row { display:flex; align-items:center; }14  .space-between { justify-content:space-between; }15  .statusbar { height:90px; padding: 0 34px; color:#E8E8E8; font-weight:600; font-size:34px; opacity:.95; }16  .status-icons svg { margin-left:26px; }17  .header { height:110px; padding:0 34px; border-bottom:1px solid rgba(255,255,255,0.07); }18  .header-title { font-size:44px; font-weight:600; margin-left:24px; }19  .icon-btn { width:70px; height:70px; display:flex; align-items:center; justify-content:center; }20  .section { padding:34px 40px 10px; }21  .section-title { font-size:40px; font-weight:700; display:flex; align-items:center; gap:18px; }22  .section-sub { font-size:34px; color:#B9BDC2; margin-top:10px; line-height:1.35; }23  .card-btn {24    margin-top:28px; height:120px; border:2px solid #A9ADB2; border-radius:18px;25    display:flex; align-items:center; justify-content:center; font-size:40px; font-weight:700;26    color:#EDEDED; letter-spacing:0.2px;27  }28  .divider { height:1px; background:rgba(255,255,255,0.08); margin:32px 0 22px; }29  .data-block { padding:10px 40px 0; }30  .pair { display:flex; align-items:flex-start; justify-content:space-between; padding:22px 0; border-bottom:1px solid rgba(255,255,255,0.06); }31  .pair:last-child { border-bottom:none; }32  .label { color:#AEB3B9; font-size:36px; }33  .value { color:#FFFFFF; font-size:38px; font-weight:700; }34  .subtle { color:#C8CDD2; }35  /* bottom action bar */36  .bottom-actions {37    position:absolute; left:0; right:0; bottom:32px; padding:0 40px; display:flex; gap:32px;38  }39  .cta {40    flex:1; height:120px; border-radius:18px; background:#E6E089; color:#1B1C1F; font-size:40px; font-weight:800;41    display:flex; align-items:center; justify-content:center; gap:20px;42    box-shadow: 0 4px 0 rgba(0,0,0,0.2) inset;43  }44  .muted-divider { height:1px; background:rgba(255,255,255,0.06); margin:26px 40px; }45  /* small icon color */46  .icon-stroke { stroke:#EDEDED; }47  .icon-fill { fill:#EDEDED; }48</style>49</head>50<body>51<div id="render-target">52 53  <!-- Status bar -->54  <div class="statusbar row space-between">55    <div>11:53</div>56    <div class="row status-icons">57      <!-- WiFi -->58      <svg width="40" height="40" viewBox="0 0 24 24" class="icon-fill"><path d="M12 18.5a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 12 18.5zM2 9c5.5-5 14.5-5 20 0l-2 2c-4.5-4-11.5-4-16 0L2 9zm4 4c3.5-3 8.5-3 12 0l-2 2c-2.5-2-5.5-2-8 0l-2-2z"/></svg>59      <!-- Battery -->60      <svg width="46" height="40" viewBox="0 0 28 18" class="icon-stroke" fill="none" stroke-width="2">61        <rect x="1" y="3" width="22" height="12" rx="2" stroke="#EDEDED"></rect>62        <rect x="3" y="5" width="14" height="8" fill="#EDEDED"></rect>63        <rect x="24" y="7" width="3" height="6" rx="1.2" fill="#EDEDED"></rect>64      </svg>65    </div>66  </div>67 68  <!-- Header -->69  <div class="header row space-between">70    <div class="row">71      <div class="icon-btn">72        <!-- Back Arrow -->73        <svg width="46" height="46" viewBox="0 0 24 24" class="icon-fill">74          <path d="M14.7 5.3 9 11l5.7 5.7-1.4 1.4L6.2 11l7.1-7.1 1.4 1.4z"></path>75        </svg>76      </div>77      <div class="header-title">2 from 13</div>78    </div>79    <div class="row">80      <!-- Document icon -->81      <div class="icon-btn">82        <svg width="44" height="44" viewBox="0 0 24 24" class="icon-stroke" fill="none" stroke-width="1.8">83          <path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z" stroke="#EDEDED"/>84          <path d="M14 2v5h5" stroke="#EDEDED"/>85        </svg>86      </div>87      <!-- Star icon -->88      <div class="icon-btn">89        <svg width="44" height="44" viewBox="0 0 24 24" class="icon-stroke" fill="none" stroke-width="1.8">90          <path d="m12 2.5 3 6 6.5.9-4.7 4.5 1.1 6.4L12 17.8 6.1 21.9l1.1-6.4L2.5 9.4 9 8.5z" stroke="#EDEDED"/>91        </svg>92      </div>93      <!-- Share icon -->94      <div class="icon-btn">95        <svg width="44" height="44" viewBox="0 0 24 24" class="icon-stroke" fill="none" stroke-width="1.8">96          <circle cx="18" cy="5" r="3" stroke="#EDEDED"></circle>97          <circle cx="6" cy="12" r="3" stroke="#EDEDED"></circle>98          <circle cx="18" cy="19" r="3" stroke="#EDEDED"></circle>99          <path d="M8.8 10.9 15.2 7.6M8.8 13.1l6.3 3.3" stroke="#EDEDED"></path>100        </svg>101      </div>102    </div>103  </div>104 105  <!-- Trade-In -->106  <div class="section">107    <div class="section-title">108      <!-- Simple car icon -->109      <svg width="44" height="44" viewBox="0 0 24 24" class="icon-stroke" fill="none" stroke-width="1.8">110        <path d="M3 13l2-5h14l2 5v4a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2H8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4z" stroke="#EDEDED"/>111        <circle cx="6.5" cy="16.5" r="1.5" fill="#EDEDED"></circle>112        <circle cx="17.5" cy="16.5" r="1.5" fill="#EDEDED"></circle>113      </svg>114      <span>Trade-In</span>115    </div>116    <div class="section-sub">Buy and sell conveniently in just one step!</div>117    <div class="card-btn">Add vehicle data</div>118  </div>119 120  <div class="divider"></div>121 122  <!-- Basic Data -->123  <div class="section">124    <div class="section-title">125      <svg width="44" height="44" viewBox="0 0 24 24" class="icon-stroke" fill="none" stroke-width="1.8">126        <path d="M4 7h16M4 12h16M4 17h16" stroke="#EDEDED"></path>127      </svg>128      <span>Basic Data</span>129    </div>130  </div>131 132  <div class="data-block">133    <div class="pair">134      <div class="label">Body type</div>135      <div class="value">Sedan</div>136    </div>137    <div class="pair">138      <div class="label">Condition</div>139      <div class="value">Pre-registered</div>140    </div>141    <div class="pair">142      <div class="label">Door count</div>143      <div class="value">4</div>144    </div>145    <div class="pair">146      <div class="label">Number of Seats</div>147      <div class="value">5</div>148    </div>149    <div class="pair">150      <div class="label">Offer number</div>151      <div class="value">66695</div>152    </div>153    <div class="pair">154      <div class="label">HSN</div>155      <div class="value">5013/ANG</div>156    </div>157    <div class="pair">158      <div class="label">Warranty</div>159      <div class="value">Yes</div>160    </div>161  </div>162 163  <div class="divider"></div>164 165  <!-- Vehicle History -->166  <div class="section">167    <div class="section-title">168      <svg width="44" height="44" viewBox="0 0 24 24" class="icon-stroke" fill="none" stroke-width="1.8">169        <path d="M4 4h16v16H4z" stroke="#EDEDED"/>170        <path d="M7 9h10M7 13h10M7 17h6" stroke="#EDEDED"/>171      </svg>172      <span>Vehicle History</span>173    </div>174  </div>175 176  <div class="data-block">177    <div class="pair">178      <div class="label">Mileage</div>179      <div class="value">20 km</div>180    </div>181    <div class="pair">182      <div class="label">First registration</div>183      <div class="value">11/2023</div>184    </div>185    <div class="pair">186      <div class="label">Production date</div>187      <div class="value">2023</div>188    </div>189    <div class="pair">190      <div class="label">Full Service History</div>191      <div class="value">Yes</div>192    </div>193    <div class="pair">194      <div class="label">Non Smoker Car</div>195      <div class="value">Yes</div>196    </div>197    <div class="pair">198      <div class="label">HU/AU new</div>199      <div class="value">Yes</div>200    </div>201  </div>202 203  <!-- Bottom action buttons -->204  <div class="bottom-actions">205    <div class="cta">206      <svg width="44" height="44" viewBox="0 0 24 24" class="icon-stroke" fill="none" stroke-width="2.2">207        <path d="M6.6 10.8c1.6 3 3.7 5 6.6 6.6l2.2-2.2a1 1 0 0 1 1.1-.2c1.2.5 2.5.8 3.8.8.6 0 1 .4 1 1V21a1 1 0 0 1-1 1C10.6 22 2 13.4 2 3a1 1 0 0 1 1-1h3.2c.6 0 1 .4 1 1 0 1.3.3 2.6.8 3.8.2.4.1.9-.2 1.1L6.6 10.8z" stroke="#1B1C1F"/>208      </svg>209      <span>Call</span>210    </div>211    <div class="cta">212      <svg width="44" height="44" viewBox="0 0 24 24" class="icon-stroke" fill="none" stroke-width="2.2">213        <path d="M3 5h18v14H3z" stroke="#1B1C1F"/>214        <path d="m3 6 9 7 9-7" stroke="#1B1C1F"/>215      </svg>216      <span>E-mail</span>217    </div>218  </div>219 220</div>221</body>222</html>