GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, height=2400, initial-scale=1.0">6<title>Help Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    font-family: Arial, Helvetica, sans-serif;16    color: #EAEAEA;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 120px;26    color: #D7D7D7;27    font-size: 36px;28    display: flex;29    align-items: center;30    padding: 0 40px;31    box-sizing: border-box;32  }33  .status-time { flex: 1; }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .status-icons svg { width: 42px; height: 42px; fill: #D7D7D7; }40 41  /* App bar */42  .app-bar {43    position: absolute;44    top: 120px;45    left: 0;46    width: 100%;47    height: 140px;48    display: flex;49    align-items: center;50    padding: 0 32px;51    box-sizing: border-box;52  }53  .app-bar .title {54    font-size: 56px;55    font-weight: 600;56    color: #EDEDED;57    margin-left: 24px;58  }59  .app-actions {60    margin-left: auto;61    display: flex;62    align-items: center;63    gap: 20px;64  }65  .icon-btn {66    width: 72px;67    height: 72px;68    display: inline-flex;69    align-items: center;70    justify-content: center;71  }72  .icon-btn svg { width: 56px; height: 56px; fill: #EDEDED; }73 74  /* Content */75  .content {76    position: absolute;77    top: 260px; /* status + app bar */78    left: 0;79    right: 0;80    bottom: 0;81    padding: 24px 32px 0 32px;82    box-sizing: border-box;83  }84  .section-title {85    font-size: 40px;86    font-weight: 600;87    color: #DCDCDC;88    margin: 24px 0 8px 8px;89  }90 91  .list {92    margin-top: 12px;93  }94  .item {95    display: flex;96    align-items: center;97    padding: 26px 8px;98  }99  .circle {100    width: 92px;101    height: 92px;102    border-radius: 50%;103    background: #5772A7;104    display: flex;105    align-items: center;106    justify-content: center;107    margin-right: 28px;108  }109  .circle svg { width: 54px; height: 54px; fill: #D8E7FF; }110 111  .item .text {112    font-size: 38px;113    color: #E4E4E4;114  }115 116  /* Search bar */117  .search {118    margin: 30px 0 24px 0;119    padding: 0 8px;120  }121  .search-box {122    width: 100%;123    height: 116px;124    border-radius: 58px;125    background: #2A2A2A;126    display: flex;127    align-items: center;128    padding: 0 36px;129    box-sizing: border-box;130    color: #9EA3AA;131    font-size: 40px;132  }133  .search-box svg { width: 54px; height: 54px; fill: #9EA3AA; margin-right: 24px; }134 135  .divider {136    height: 2px;137    background: #2E2E2E;138    margin: 18px 0;139  }140 141  /* Gesture bar */142  .gesture {143    position: absolute;144    bottom: 34px;145    left: 50%;146    transform: translateX(-50%);147    width: 212px;148    height: 12px;149    background: #FFFFFF;150    border-radius: 8px;151    opacity: 0.85;152  }153</style>154</head>155<body>156<div id="render-target">157  <!-- Status Bar -->158  <div class="status-bar">159    <div class="status-time">11:12</div>160    <div class="status-icons">161      <!-- Simple cellular/wifi icons -->162      <svg viewBox="0 0 24 24">163        <path d="M4 16h2v4H4v-4zm4-4h2v8H8V12zm4-3h2v11h-2V9zm4-4h2v15h-2V5z"/>164      </svg>165      <svg viewBox="0 0 24 24">166        <path d="M2 8l10 8 10-8-2-2-8 6-8-6-2 2z"/>167      </svg>168      <svg viewBox="0 0 24 24">169        <path d="M16 6h2v12h-2zM6 8h8v8H6z"/>170      </svg>171    </div>172  </div>173 174  <!-- App Bar -->175  <div class="app-bar">176    <div class="icon-btn">177      <svg viewBox="0 0 24 24">178        <path d="M15.5 19l-7-7 7-7 1.4 1.4L10.3 12l6.6 6.6-1.4 1.4z"/>179      </svg>180    </div>181    <div class="title">Help</div>182    <div class="app-actions">183      <div class="icon-btn">184        <!-- vertical dots -->185        <svg viewBox="0 0 24 24">186          <circle cx="12" cy="5" r="2.2"></circle>187          <circle cx="12" cy="12" r="2.2"></circle>188          <circle cx="12" cy="19" r="2.2"></circle>189        </svg>190      </div>191    </div>192  </div>193 194  <!-- Content -->195  <div class="content">196    <div class="section-title">Popular help resources</div>197 198    <div class="list">199      <div class="item">200        <div class="circle">201          <!-- document icon -->202          <svg viewBox="0 0 24 24">203            <path d="M6 4h10l2 2v12H6V4zm2 4h8v2H8V8zm0 4h8v2H8v-2zm0 4h6v2H8v-2z"/>204          </svg>205        </div>206        <div class="text">Fit isn't tracking activities correctly</div>207      </div>208 209      <div class="item">210        <div class="circle">211          <svg viewBox="0 0 24 24">212            <path d="M6 4h10l2 2v12H6V4zm2 4h8v2H8V8zm0 4h8v2H8v-2zm0 4h6v2H8v-2z"/>213          </svg>214        </div>215        <div class="text">Track your fitness with your watch</div>216      </div>217 218      <div class="item">219        <div class="circle">220          <svg viewBox="0 0 24 24">221            <path d="M6 4h10l2 2v12H6V4zm2 4h8v2H8V8zm0 4h8v2H8v-2zm0 4h6v2H8v-2z"/>222          </svg>223        </div>224        <div class="text">Control music with your watch while you workout</div>225      </div>226 227      <div class="item">228        <div class="circle">229          <svg viewBox="0 0 24 24">230            <path d="M6 4h10l2 2v12H6V4zm2 4h8v2H8V8zm0 4h8v2H8v-2zm0 4h6v2H8v-2z"/>231          </svg>232        </div>233        <div class="text">Track your fitness activity</div>234      </div>235 236      <div class="item">237        <div class="circle">238          <svg viewBox="0 0 24 24">239            <path d="M6 4h10l2 2v12H6V4zm2 4h8v2H8V8zm0 4h8v2H8v-2zm0 4h6v2H8v-2z"/>240          </svg>241        </div>242        <div class="text">Track your heart rate with your phone</div>243      </div>244    </div>245 246    <div class="search">247      <div class="search-box">248        <svg viewBox="0 0 24 24">249          <path d="M10 4a6 6 0 014.6 9.9l4.2 4.2-1.4 1.4-4.2-4.2A6 6 0 1110 4zm0 2a4 4 0 100 8 4 4 0 000-8z"/>250        </svg>251        <span>Search help</span>252      </div>253    </div>254 255    <div class="divider"></div>256 257    <div class="item">258      <div class="circle">259        <!-- chat bubble icon -->260        <svg viewBox="0 0 24 24">261          <path d="M4 5h16v11H8l-4 4V5zm4 4h8v2H8V9zm0 4h6v2H8v-2z"/>262        </svg>263      </div>264      <div class="text">Send feedback</div>265    </div>266  </div>267 268  <!-- Gesture bar -->269  <div class="gesture"></div>270</div>271</body>272</html>