GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Colors */23  :root{24    --teal:#149EA3;25    --teal-dark:#0f8e93;26    --gray-bg:#eeeeee;27    --icon:#149EA3;28  }29 30  /* Top system/status area */31  .status-bar {32    height: 180px;33    background: var(--teal);34    color: #ffffff;35    display: flex;36    align-items: center;37    justify-content: space-between;38    padding: 0 36px;39    box-sizing: border-box;40    font-weight: 600;41  }42  .status-left {43    font-size: 46px;44    letter-spacing: 1px;45  }46  .status-right {47    display: flex;48    align-items: center;49    gap: 26px;50  }51  .status-dot {52    width: 14px;53    height: 14px;54    background: #ffffff;55    border-radius: 50%;56    opacity: 0.9;57  }58  .status-battery {59    display: flex;60    align-items: center;61    gap: 10px;62    font-size: 40px;63  }64  .battery-icon {65    width: 54px;66    height: 30px;67    border: 4px solid #fff;68    border-radius: 6px;69    position: relative;70  }71  .battery-icon::after {72    content: "";73    position: absolute;74    right: -10px;75    top: 8px;76    width: 8px;77    height: 14px;78    background: #fff;79    border-radius: 2px;80  }81  .battery-level {82    position: absolute;83    top: 3px;84    left: 3px;85    height: 22px;86    width: 34px;87    background: #fff;88  }89 90  /* App bar */91  .app-bar {92    height: 165px;93    background: #ffffff;94    display: flex;95    align-items: center;96    justify-content: space-between;97    padding: 0 36px;98    box-sizing: border-box;99    box-shadow: 0 4px 12px rgba(0,0,0,0.06);100  }101  .left-actions, .right-actions {102    display: flex;103    align-items: center;104    gap: 36px;105  }106  .icon-btn {107    width: 86px;108    height: 86px;109    display: flex;110    align-items: center;111    justify-content: center;112  }113  .icon-btn svg {114    width: 64px;115    height: 64px;116    stroke: var(--icon);117    fill: none;118    stroke-width: 10;119    stroke-linecap: round;120    stroke-linejoin: round;121  }122 123  /* Content */124  .content {125    position: absolute;126    top: 345px; /* status(180) + appbar(165) */127    left: 0;128    width: 100%;129    height: calc(2400px - 345px - 140px); /* subtract bottom bar */130    background: var(--gray-bg);131    box-sizing: border-box;132  }133 134  /* Spinner */135  .spinner {136    position: absolute;137    top: 48%;138    left: 50%;139    transform: translate(-50%, -50%);140    width: 140px;141    height: 140px;142    border-radius: 50%;143    border: 16px solid rgba(20,158,163,0.18);144    border-top-color: var(--teal);145    border-right-color: var(--teal);146    border-bottom-color: rgba(20,158,163,0.18);147    animation: spin 1.1s linear infinite;148  }149  @keyframes spin {150    to { transform: translate(-50%, -50%) rotate(360deg); }151  }152 153  /* Bottom gesture bar */154  .gesture-bar {155    position: absolute;156    bottom: 0;157    left: 0;158    width: 100%;159    height: 140px;160    background: #000000;161    display: flex;162    align-items: center;163    justify-content: center;164  }165  .gesture-pill {166    width: 300px;167    height: 14px;168    background: #d2d2d2;169    border-radius: 10px;170    opacity: 0.9;171  }172</style>173</head>174<body>175  <div id="render-target">176    <!-- Top teal status bar -->177    <div class="status-bar">178      <div class="status-left">10:09</div>179      <div class="status-right">180        <!-- simple small icons placeholders -->181        <div class="status-dot" style="opacity:.7"></div>182        <div class="status-dot"></div>183        <div class="status-dot" style="width:36px;height:36px;border-radius:50%;border:4px solid #fff;background:transparent"></div>184        <div class="status-dot" style="opacity:.6"></div>185        <div class="status-dot" style="opacity:.6"></div>186        <div class="status-battery">187          <div class="battery-icon"><div class="battery-level"></div></div>188          <div>75%</div>189        </div>190      </div>191    </div>192 193    <!-- White app bar with back, search, cart -->194    <div class="app-bar">195      <div class="left-actions">196        <div class="icon-btn" aria-label="Back">197          <svg viewBox="0 0 24 24">198            <path d="M15 4 L7 12 L15 20"></path>199          </svg>200        </div>201      </div>202      <div class="right-actions">203        <div class="icon-btn" aria-label="Search">204          <svg viewBox="0 0 24 24">205            <circle cx="11" cy="11" r="6.5"></circle>206            <path d="M16.5 16.5 L21 21"></path>207          </svg>208        </div>209        <div class="icon-btn" aria-label="Cart">210          <svg viewBox="0 0 24 24">211            <path d="M3 5 H6 L7.5 14 H18 L20 8 H8"></path>212            <circle cx="9.5" cy="19" r="1.5" fill="var(--icon)" stroke="none"></circle>213            <circle cx="16.5" cy="19" r="1.5" fill="var(--icon)" stroke="none"></circle>214          </svg>215        </div>216      </div>217    </div>218 219    <!-- Content area -->220    <div class="content">221      <div class="spinner"></div>222    </div>223 224    <!-- Bottom gesture bar -->225    <div class="gesture-bar">226      <div class="gesture-pill"></div>227    </div>228  </div>229</body>230</html>