GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #3c4043;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    padding: 0 48px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    font-size: 40px;31    color: #757575;32  }33  .status-left span.cloud { margin-left: 18px; }34  .status-right span { margin-left: 20px; font-size: 36px; }35 36  /* Top app bar */37  .top-bar {38    position: absolute;39    top: 120px;40    left: 0;41    width: 1080px;42    height: 120px;43    padding: 0 32px;44    box-sizing: border-box;45    display: flex;46    align-items: center;47    justify-content: space-between;48  }49  .back-btn { width: 60px; height: 60px; }50  .more-btn { width: 20px; height: 60px; }51 52  /* Hero metric panel */53  .hero {54    position: absolute;55    top: 240px;56    left: 0;57    width: 1080px;58    height: 1100px;59    background: #E9F0FF;60  }61  .brand {62    position: absolute;63    top: 64px;64    left: 64px;65    display: flex;66    align-items: center;67    gap: 24px;68  }69  .brand .title {70    color: #2F5DCC;71    font-size: 48px;72    font-weight: 600;73    line-height: 1.2;74  }75  .brand .subtitle {76    color: #2F5DCC;77    font-size: 42px;78    margin-top: 6px;79    font-weight: 500;80  }81  .runner {82    position: absolute;83    top: 72px;84    right: 72px;85    width: 44px;86    height: 44px;87  }88  .metric-center {89    position: absolute;90    top: 50%;91    left: 50%;92    transform: translate(-50%, -46%);93    text-align: center;94  }95  .metric-value {96    font-size: 220px;97    font-weight: 700;98    color: #2F5DCC;99    letter-spacing: -2px;100    line-height: 1;101  }102  .metric-label {103    margin-top: 22px;104    font-size: 48px;105    color: #2F5DCC;106    opacity: 0.9;107  }108 109  /* Controls section */110  .controls {111    position: absolute;112    top: 1370px;113    left: 0;114    width: 1080px;115    padding-top: 40px;116    box-sizing: border-box;117  }118  .tabs {119    display: flex;120    justify-content: center;121    gap: 24px;122  }123  .tab {124    min-width: 240px;125    height: 96px;126    padding: 0 36px;127    border-radius: 28px;128    border: 2px solid #DADCE0;129    display: flex;130    align-items: center;131    justify-content: center;132    font-size: 42px;133    color: #5f6368;134    background: #ffffff;135  }136  .tab.active {137    background: #E9F0FF;138    color: #2F5DCC;139    border: 2px solid transparent;140    font-weight: 600;141  }142  .section-title {143    text-align: center;144    margin: 46px 0 26px;145    font-size: 44px;146    color: #5f6368;147    font-weight: 600;148  }149  .colors {150    display: flex;151    justify-content: center;152    gap: 56px;153    margin-top: 12px;154  }155  .color {156    width: 150px;157    height: 150px;158    border-radius: 50%;159    position: relative;160  }161  .color.selected {162    border: 10px solid #2F5DCC;163    box-sizing: border-box;164  }165  .color .inner {166    position: absolute;167    left: 50%;168    top: 50%;169    width: 110px;170    height: 110px;171    border-radius: 50%;172    transform: translate(-50%, -50%);173  }174  .c-blue .inner { background: #8FB0F4; }175  .c-green { background: #96CFA3; }176  .c-gray { background: #DADDE1; }177  .c-yellow { background: #F3D270; }178  .c-red { background: #E58C80; }179 180  /* Floating action button */181  .fab {182    position: absolute;183    right: 120px;184    bottom: 300px;185    width: 150px;186    height: 150px;187    border-radius: 50%;188    background: #E9F0FF;189    box-shadow: 0 18px 32px rgba(0,0,0,0.25);190    display: flex;191    align-items: center;192    justify-content: center;193  }194 195  /* Bottom home indicator */196  .home-indicator {197    position: absolute;198    bottom: 40px;199    left: 50%;200    transform: translateX(-50%);201    width: 320px;202    height: 12px;203    border-radius: 8px;204    background: #6e6e6e;205    opacity: 0.9;206  }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Status bar -->213  <div class="status-bar">214    <div class="status-left">1:13 <span class="cloud">☁</span></div>215    <div class="status-right"><span>📶</span><span>🔋</span></div>216  </div>217 218  <!-- Top app bar -->219  <div class="top-bar">220    <svg class="back-btn" viewBox="0 0 24 24">221      <path d="M15 4 L7 12 L15 20" stroke="#3c4043" stroke-width="3.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>222    </svg>223    <svg class="more-btn" viewBox="0 0 12 44">224      <circle cx="6" cy="8" r="3" fill="#3c4043"/>225      <circle cx="6" cy="22" r="3" fill="#3c4043"/>226      <circle cx="6" cy="36" r="3" fill="#3c4043"/>227    </svg>228  </div>229 230  <!-- Hero panel -->231  <div class="hero">232    <div class="brand">233      <svg width="64" height="64" viewBox="0 0 48 48">234        <path d="M24 40 L10 26 C4 20 8 10 16 10 C20 10 24 13 24 16 C24 13 28 10 32 10 C40 10 44 20 38 26 Z"235              fill="none" stroke="#2F5DCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>236      </svg>237      <div>238        <div class="title">Google Fit</div>239        <div class="subtitle">Dancing</div>240      </div>241    </div>242 243    <svg class="runner" viewBox="0 0 36 36">244      <circle cx="26" cy="8" r="3" fill="#2F5DCC"/>245      <path d="M22 12 L16 18 L10 16" stroke="#2F5DCC" stroke-width="3" fill="none" stroke-linecap="round"/>246      <path d="M18 20 L22 24 L28 22" stroke="#2F5DCC" stroke-width="3" fill="none" stroke-linecap="round"/>247      <path d="M14 22 L12 28" stroke="#2F5DCC" stroke-width="3" fill="none" stroke-linecap="round"/>248    </svg>249 250    <div class="metric-center">251      <div class="metric-value">1h</div>252      <div class="metric-label">Active time</div>253    </div>254  </div>255 256  <!-- Controls below hero -->257  <div class="controls">258    <div class="tabs">259      <div class="tab active">Metrics</div>260      <div class="tab">Photo</div>261    </div>262 263    <div class="section-title">Highlight color</div>264 265    <div class="colors">266      <div class="color selected c-blue">267        <div class="inner"></div>268      </div>269      <div class="color c-green"></div>270      <div class="color c-gray"></div>271      <div class="color c-yellow"></div>272      <div class="color c-red"></div>273    </div>274  </div>275 276  <!-- Floating Action Button -->277  <div class="fab">278    <svg width="72" height="72" viewBox="0 0 24 24">279      <path d="M5 13 L9 17 L19 7" stroke="#2F5DCC" stroke-width="3.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>280    </svg>281  </div>282 283  <!-- Home indicator -->284  <div class="home-indicator"></div>285</div>286</body>287</html>