GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Fitness Walk UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #121418;14    color: #EAEAEA;15    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    border-radius: 24px;17    box-shadow: 0 20px 60px rgba(0,0,0,0.45);18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 110px;27    padding: 0 36px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #F5F7F8;32    font-size: 40px;33    opacity: 0.95;34  }35  .status-left { display: flex; align-items: center; gap: 24px; }36  .status-left .time { font-weight: 600; letter-spacing: 0.5px; }37  .chip {38    width: 64px; height: 64px;39    border-radius: 18px;40    border: 2px solid rgba(255,255,255,0.25);41    color: #fff; font-weight: 700;42    display: flex; align-items: center; justify-content: center;43    font-size: 34px;44    opacity: 0.9;45  }46  .temp { font-size: 34px; color: rgba(255,255,255,0.9); }47  .dot {48    width: 12px; height: 12px; border-radius: 50%;49    background: rgba(255,255,255,0.9);50    display: inline-block;51  }52  .status-right { display: flex; align-items: center; gap: 28px; }53  .status-icon { width: 44px; height: 44px; opacity: 0.9; }54 55  /* Map placeholder (image semantic) */56  .map {57    position: absolute;58    top: 110px;59    left: 0;60    width: 1080px;61    height: 1350px; /* leaves space for bottom panel */62    background: #E0E0E0; /* per requirements for image placeholders */63    border-top: 1px solid #BDBDBD;64    border-bottom: 1px solid #BDBDBD;65    display: flex;66    align-items: center;67    justify-content: center;68    color: #757575;69    font-size: 42px;70    letter-spacing: 0.4px;71  }72  .route-line {73    position: absolute;74    width: 520px;75    height: 6px;76    background: linear-gradient(90deg, rgba(120,180,255,0.15), rgba(120,180,255,0.9));77    right: 80px;78    top: 750px;79    transform: rotate(-14deg);80    border-radius: 3px;81  }82  .blue-dot {83    position: absolute;84    width: 28px; height: 28px;85    border-radius: 50%;86    background: #4F86FF;87    border: 4px solid #CFE0FF;88    left: 480px;89    top: 880px;90  }91 92  /* Bottom tracking panel */93  .panel {94    position: absolute;95    bottom: 0;96    left: 0;97    width: 1080px;98    height: 940px;99    background: #1B1D21;100    border-top-left-radius: 28px;101    border-top-right-radius: 28px;102  }103  .mode {104    text-align: center;105    color: #A3A7AD;106    font-size: 42px;107    margin-top: 42px;108    letter-spacing: 0.3px;109  }110  .timer {111    text-align: center;112    font-size: 180px;113    line-height: 1;114    font-weight: 300;115    color: #EDEFF1;116    margin-top: 26px;117    letter-spacing: 4px;118  }119  .metrics {120    width: 980px;121    margin: 40px auto 0 auto;122    display: flex;123    justify-content: space-between;124    align-items: flex-end;125  }126  .metric { text-align: center; }127  .metric .value {128    font-size: 96px;129    font-weight: 400;130    color: #F0F0F0;131    line-height: 1.1;132  }133  .metric:nth-child(2) .value { letter-spacing: 6px; }134  .metric .sub {135    color: #A3A7AD;136    font-size: 36px;137    margin-top: 12px;138  }139 140  .metrics-2 {141    width: 980px;142    margin: 80px auto 0 auto;143    display: flex;144    justify-content: space-between;145    align-items: flex-start;146  }147  .m2 { display: flex; flex-direction: column; gap: 10px; }148  .m2 .value { font-size: 90px; color: #F0F0F0; }149  .m2 .sub { font-size: 36px; color: #A3A7AD; }150 151  .pause-btn {152    position: absolute;153    bottom: 180px;154    left: 50%;155    transform: translateX(-50%);156    width: 160px;157    height: 160px;158    border-radius: 50%;159    background: radial-gradient(circle at 40% 40%, #4A5F87 0%, #3B4B6F 60%, #324361 100%);160    display: flex;161    align-items: center;162    justify-content: center;163    box-shadow: 0 12px 24px rgba(0,0,0,0.35);164  }165  .pause-btn .bar {166    width: 18px;167    height: 64px;168    background: rgba(255,255,255,0.85);169    margin: 0 12px;170    border-radius: 4px;171  }172 173  .home-indicator {174    position: absolute;175    bottom: 30px;176    left: 50%;177    transform: translateX(-50%);178    width: 420px;179    height: 12px;180    background: #E6E6E6;181    border-radius: 12px;182    opacity: 0.75;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status bar -->190  <div class="status-bar">191    <div class="status-left">192      <span class="time">3:26</span>193      <div class="chip">M</div>194      <span class="temp">83°</span>195      <span class="dot"></span>196    </div>197    <div class="status-right">198      <!-- Location icon -->199      <svg class="status-icon" viewBox="0 0 24 24">200        <path d="M12 2c4.4 0 8 3.6 8 8 0 7-8 12-8 12S4 17 4 10c0-4.4 3.6-8 8-8zm0 5a3 3 0 110 6 3 3 0 010-6z" fill="#FFFFFF" opacity="0.9"></path>201      </svg>202      <!-- Wi-Fi icon -->203      <svg class="status-icon" viewBox="0 0 24 24">204        <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5l2 2 2-2-2-2-2 2z" fill="#FFFFFF" opacity="0.9"></path>205      </svg>206      <!-- Battery icon -->207      <svg class="status-icon" viewBox="0 0 28 24">208        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.9"></rect>209        <rect x="4" y="8" width="16" height="8" fill="#FFFFFF" opacity="0.9"></rect>210        <rect x="22" y="9" width="3" height="6" rx="1" fill="#FFFFFF" opacity="0.9"></rect>211      </svg>212    </div>213  </div>214 215  <!-- Map area with semantic image placeholder -->216  <div class="map">217    [IMG: Dark Map of Orléans]218    <div class="route-line"></div>219    <div class="blue-dot"></div>220  </div>221 222  <!-- Bottom tracking panel -->223  <div class="panel">224    <div class="mode">Walking</div>225    <div class="timer">03:50</div>226 227    <div class="metrics">228      <div class="metric">229        <div class="value">0.00</div>230        <div class="sub">mi</div>231      </div>232      <div class="metric">233        <div class="value">-:-</div>234        <div class="sub">/mi</div>235      </div>236      <div class="metric">237        <div class="value">0</div>238        <div class="sub">Heart Pts</div>239      </div>240    </div>241 242    <div class="metrics-2">243      <div class="m2 left">244        <span class="value">18</span>245        <span class="sub">Cal</span>246      </div>247      <div class="m2 right">248        <span class="value">7</span>249        <span class="sub">steps</span>250      </div>251    </div>252 253    <div class="pause-btn">254      <div class="bar"></div>255      <div class="bar"></div>256    </div>257  </div>258 259  <div class="home-indicator"></div>260</div>261</body>262</html>