GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>UI Render</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #1f2126;20    color: #fff;21  }22 23  /* Map placeholder */24  .map-holder {25    position: absolute;26    left: 0;27    top: 0;28    width: 1080px;29    height: 1800px;30  }31  .image-box {32    width: 100%;33    height: 100%;34    background: #E0E0E0;35    border: 1px solid #BDBDBD;36    display: flex;37    align-items: center;38    justify-content: center;39    color: #757575;40    position: relative;41    overflow: hidden;42  }43  .image-box .label {44    position: relative;45    z-index: 2;46    font-size: 32px;47    letter-spacing: 0.5px;48  }49  .image-dark-overlay {50    position: absolute;51    inset: 0;52    background: rgba(0,0,0,0.78);53    z-index: 1;54  }55 56  /* Status bar */57  .status-bar {58    position: absolute;59    top: 0;60    left: 0;61    width: 1080px;62    height: 140px;63    display: flex;64    align-items: center;65    padding: 0 34px;66    box-sizing: border-box;67    color: #e6e6e6;68    font-weight: 600;69    font-size: 42px;70    letter-spacing: 0.3px;71    z-index: 5;72  }73  .status-left {74    display: flex;75    align-items: center;76    gap: 22px;77  }78  .status-right {79    margin-left: auto;80    display: flex;81    align-items: center;82    gap: 26px;83  }84  .status-icon {85    width: 44px;86    height: 44px;87    display: inline-flex;88    align-items: center;89    justify-content: center;90    opacity: 0.95;91  }92  .status-temp {93    font-size: 40px;94    opacity: 0.9;95  }96 97  /* Floating close (X) button */98  .close-btn {99    position: absolute;100    top: 160px;101    left: 36px;102    width: 80px;103    height: 80px;104    display: inline-flex;105    align-items: center;106    justify-content: center;107    z-index: 6;108    opacity: 0.9;109  }110 111  /* Small map blue dot */112  .blue-dot {113    position: absolute;114    top: 980px;115    left: 540px;116    width: 26px;117    height: 26px;118    background: #7aa2ff;119    border-radius: 50%;120    box-shadow: 0 0 0 6px rgba(122,162,255,0.35);121    z-index: 4;122  }123 124  /* Activity card */125  .card {126    position: absolute;127    left: 34px;128    top: 1770px;129    width: 1012px;130    height: 260px;131    border: 2px solid rgba(200,200,200,0.35);132    border-radius: 18px;133    box-sizing: border-box;134    padding: 30px 36px;135    background: rgba(33,33,33,0.55);136    z-index: 6;137  }138  .card-title {139    color: #d0d0d0;140    font-size: 38px;141    margin-bottom: 28px;142  }143  .card-row {144    display: flex;145    align-items: center;146    gap: 22px;147  }148  .walking-text {149    font-size: 52px;150    color: #cbd3de;151    font-weight: 700;152    letter-spacing: 0.2px;153  }154 155  /* Big number at bottom */156  .big-number {157    position: absolute;158    left: 50%;159    transform: translateX(-50%) rotate(-12deg);160    top: 2070px;161    font-size: 220px;162    color: #8ea0d8;163    font-weight: 700;164    z-index: 5;165  }166 167  /* Gesture pill (navigation bar) */168  .gesture-pill {169    position: absolute;170    left: 50%;171    transform: translateX(-50%);172    bottom: 28px;173    width: 220px;174    height: 10px;175    background: #eaeaea;176    border-radius: 7px;177    opacity: 0.92;178    z-index: 10;179  }180</style>181</head>182<body>183<div id="render-target">184  <!-- Map area -->185  <div class="map-holder">186    <div class="image-box">187      <div class="label">[IMG: Dark Map of Orléans, France]</div>188      <div class="image-dark-overlay"></div>189    </div>190  </div>191 192  <!-- Status bar -->193  <div class="status-bar">194    <div class="status-left">195      <div>3:22</div>196      <span class="status-icon" aria-hidden="true" title="notification">197        <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#e6e6e6" stroke-width="2">198          <rect x="5" y="6" width="14" height="12" rx="2"></rect>199          <path d="M7 6V4h10v2"></path>200        </svg>201      </span>202      <span class="status-icon" aria-hidden="true" title="messages">203        <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#e6e6e6" stroke-width="2">204          <path d="M4 5h16v10H7l-3 3z"></path>205        </svg>206      </span>207    </div>208    <div class="status-right">209      <div class="status-temp">83°</div>210      <span class="status-icon" aria-hidden="true" title="location">211        <svg viewBox="0 0 24 24" width="44" height="44" fill="#e6e6e6">212          <path d="M12 2c-4.4 0-8 3.4-8 7.6 0 6.6 8 12.4 8 12.4s8-5.8 8-12.4C20 5.4 16.4 2 12 2zm0 10a3.2 3.2 0 1 1 0-6.4 3.2 3.2 0 0 1 0 6.4z"/>213        </svg>214      </span>215      <span class="status-icon" aria-hidden="true" title="wifi">216        <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round">217          <path d="M3 10c4.7-4.1 13.3-4.1 18 0"></path>218          <path d="M6 13c3.2-2.8 8.8-2.8 12 0"></path>219          <path d="M9 16c1.7-1.5 4.3-1.5 6 0"></path>220          <circle cx="12" cy="19" r="1.5" fill="#e6e6e6" stroke="none"></circle>221        </svg>222      </span>223      <span class="status-icon" aria-hidden="true" title="battery">224        <svg viewBox="0 0 26 24" width="44" height="44" fill="none" stroke="#e6e6e6" stroke-width="2">225          <rect x="2" y="6" width="18" height="12" rx="2"></rect>226          <rect x="4" y="8" width="12" height="8" fill="#e6e6e6" stroke="none"></rect>227          <rect x="20" y="9" width="4" height="6" rx="1"></rect>228        </svg>229      </span>230    </div>231  </div>232 233  <!-- Close icon -->234  <div class="close-btn">235    <svg viewBox="0 0 24 24" width="80" height="80" stroke="#ffffff" stroke-width="2.5" opacity="0.95">236      <path d="M5 5 L19 19"></path>237      <path d="M19 5 L5 19"></path>238    </svg>239  </div>240 241  <!-- Blue position dot -->242  <div class="blue-dot"></div>243 244  <!-- Activity card -->245  <div class="card">246    <div class="card-title">Activity type</div>247    <div class="card-row">248      <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#96b0ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">249        <circle cx="12" cy="4" r="2" fill="#96b0ff" stroke="none"></circle>250        <path d="M10 22l2-6-3-3 3-2 3 2 1 4" />251        <path d="M6 22l4-7" />252      </svg>253      <div class="walking-text">Walking • Recent</div>254    </div>255  </div>256 257  <!-- Big number -->258  <div class="big-number">7</div>259 260  <!-- Gesture pill -->261  <div class="gesture-pill"></div>262</div>263</body>264</html>