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>Mobile UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13 14  /* Root render target required by spec */15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;22    color: #333;23  }24 25  /* Status bar (green) */26  .status-bar {27    position: absolute;28    top: 0;29    left: 0;30    width: 1080px;31    height: 140px;32    background: #11c16b;33    color: #fff;34    display: flex;35    align-items: center;36    justify-content: space-between;37    padding: 0 36px;38    box-sizing: border-box;39  }40  .status-left {41    display: flex;42    align-items: center;43    gap: 22px;44    font-size: 44px;45    font-weight: 600;46    opacity: 0.95;47  }48  .status-right {49    display: flex;50    align-items: center;51    gap: 24px;52  }53  .icon-wifi, .icon-battery {54    display: inline-flex;55    align-items: center;56    justify-content: center;57  }58 59  /* App bar (white) */60  .app-bar {61    position: absolute;62    top: 140px;63    left: 0;64    width: 1080px;65    height: 140px;66    background: #ffffff;67    border-bottom: 1px solid #e9ecef;68    display: flex;69    align-items: center;70    justify-content: space-between;71    padding: 0 24px 0 16px;72    box-sizing: border-box;73  }74  .app-left {75    display: flex;76    align-items: center;77    gap: 18px;78  }79  .title {80    font-size: 54px;81    color: #444;82    font-weight: 500;83  }84  .app-right {85    display: flex;86    align-items: center;87    gap: 28px;88    padding-right: 8px;89  }90 91  /* Content area */92  .content {93    position: absolute;94    top: 280px; /* below status + app bar */95    left: 0;96    right: 0;97    bottom: 120px; /* above nav bar */98    background: #ffffff;99  }100 101  /* Vertical step indicator (left) */102  .stepper {103    position: absolute;104    left: 26px;105    top: 560px;106    display: flex;107    flex-direction: column;108    gap: 34px;109  }110  .stepper .dot {111    width: 26px;112    height: 26px;113    background: #ffffff;114    border-radius: 50%;115    border: 2px solid #d9d9d9;116    box-shadow: 0 2px 6px rgba(0,0,0,0.2);117    opacity: 0.85;118  }119 120  /* Center loader arc */121  .loader {122    position: absolute;123    top: 54%;124    left: 50%;125    width: 170px;126    height: 170px;127    transform: translate(-50%, -50%) rotate(-20deg);128    border-radius: 50%;129    border: 22px solid #10c776;130    border-right-color: transparent;131    border-top-color: transparent;132    background: transparent;133  }134 135  /* Bottom navigation (gesture) bar */136  .nav-bar {137    position: absolute;138    bottom: 0;139    left: 0;140    width: 1080px;141    height: 120px;142    background: #000000;143  }144  .gesture-pill {145    position: absolute;146    left: 50%;147    top: 50%;148    width: 320px;149    height: 14px;150    transform: translate(-50%, -50%);151    background: #d8d8d8;152    border-radius: 10px;153    opacity: 0.9;154  }155 156  /* Utility: subtle icon coloring */157  .icon-grey { stroke: #6b7780; fill: none; }158  .icon-dark { stroke: #404a54; fill: none; }159  .icon-green { stroke: #10c776; fill: none; }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status bar -->166  <div class="status-bar">167    <div class="status-left">168      <div class="time">3:08</div>169      <!-- Small placeholder circles like app indicators -->170      <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8" fill="#ffffff" opacity="0.9"/></svg>171      <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8" fill="#ffffff" opacity="0.9"/></svg>172      <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8" fill="#ffffff" opacity="0.9"/></svg>173      <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8" fill="#ffffff" opacity="0.9"/></svg>174      <svg width="10" height="10"><circle cx="5" cy="5" r="5" fill="#ffffff" opacity="0.8"/></svg>175    </div>176    <div class="status-right">177      <!-- WiFi icon -->178      <svg class="icon-wifi" width="52" height="52" viewBox="0 0 24 24">179        <path d="M2 8.5C7.5 4 16.5 4 22 8.5" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>180        <path d="M5 12c4-3 10-3 14 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>181        <path d="M9 15.5c3-1.8 6-1.8 9 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>182        <circle cx="12" cy="19" r="1.5" fill="#ffffff"/>183      </svg>184      <!-- Battery icon -->185      <svg class="icon-battery" width="60" height="60" viewBox="0 0 28 16">186        <rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>187        <rect x="3" y="4" width="18" height="8" fill="#ffffff"/>188        <rect x="24" y="6" width="3" height="4" fill="#ffffff"/>189      </svg>190    </div>191  </div>192 193  <!-- App bar -->194  <div class="app-bar">195    <div class="app-left">196      <!-- Back Arrow -->197      <svg width="70" height="70" viewBox="0 0 24 24" aria-hidden="true">198        <path d="M15 4 L7 12 L15 20" stroke="#6b7780" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>199      </svg>200      <div class="title">Edit</div>201    </div>202    <div class="app-right">203      <!-- Send (paper plane) -->204      <svg width="70" height="70" viewBox="0 0 24 24" aria-hidden="true">205        <path d="M3 11.5 L20.5 4 L13.5 21 L12 13 L3 11.5 Z" stroke="#11c16b" stroke-width="2.4" fill="none" stroke-linejoin="round"/>206      </svg>207      <!-- More vertical (3 dots) -->208      <svg width="52" height="52" viewBox="0 0 24 24" aria-hidden="true">209        <circle cx="12" cy="5" r="2" fill="#6b7780"/>210        <circle cx="12" cy="12" r="2" fill="#6b7780"/>211        <circle cx="12" cy="19" r="2" fill="#6b7780"/>212      </svg>213    </div>214  </div>215 216  <!-- Content area -->217  <div class="content">218    <!-- Left stepper dots -->219    <div class="stepper">220      <div class="dot"></div>221      <div class="dot"></div>222      <div class="dot"></div>223      <div class="dot"></div>224    </div>225 226    <!-- Center loader arc -->227    <div class="loader" aria-label="Loading indicator"></div>228  </div>229 230  <!-- Bottom navigation / gesture bar -->231  <div class="nav-bar">232    <div class="gesture-pill"></div>233  </div>234 235</div>236</body>237</html>