GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #121212;14    color: #E0E0E0;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 100px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    color: #fff;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32  .status-left, .status-right {33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .icon {38    width: 34px;39    height: 34px;40  }41 42  /* Help icon */43  .help-btn {44    position: absolute;45    top: 300px;46    right: 40px;47    width: 84px;48    height: 84px;49    border-radius: 42px;50    border: 2px solid #8E8E8E;51    display: flex;52    align-items: center;53    justify-content: center;54    color: #BDBDBD;55    font-weight: 600;56    font-size: 42px;57  }58 59  /* Hero area */60  .hero {61    position: absolute;62    top: 820px;63    left: 0;64    width: 100%;65    text-align: center;66  }67  .logo-placeholder {68    margin: 0 auto 60px;69    width: 170px;70    height: 170px;71    background: #E0E0E0;72    border: 1px solid #BDBDBD;73    color: #757575;74    display: flex;75    align-items: center;76    justify-content: center;77    border-radius: 18px;78    font-size: 26px;79  }80  .hero h1 {81    margin: 0 auto;82    width: 940px;83    font-size: 64px;84    line-height: 88px;85    font-weight: 500;86    color: #CFCFCF;87  }88 89  /* Account card and button area */90  .bottom-area {91    position: absolute;92    left: 0;93    bottom: 160px;94    width: 100%;95    display: flex;96    flex-direction: column;97    align-items: center;98  }99  .account-row {100    width: 920px;101    display: grid;102    grid-template-columns: 120px 1fr;103    column-gap: 30px;104    align-items: center;105    margin-bottom: 40px;106  }107  .avatar {108    width: 120px;109    height: 120px;110    border-radius: 60px;111    background: #D81B60;112    color: #FFFFFF;113    display: flex;114    align-items: center;115    justify-content: center;116    font-size: 56px;117    font-weight: 700;118  }119  .account-info {120    display: flex;121    flex-direction: column;122  }123  .account-name {124    font-size: 44px;125    font-weight: 600;126    color: #E6E6E6;127    margin-bottom: 12px;128  }129  .account-email {130    font-size: 30px;131    color: #9E9E9E;132    display: flex;133    align-items: center;134    gap: 12px;135  }136  .chevron {137    width: 22px;138    height: 22px;139    border-right: 3px solid #9E9E9E;140    border-bottom: 3px solid #9E9E9E;141    transform: rotate(45deg);142    margin-top: 4px;143  }144 145  .cta-btn {146    width: 920px;147    height: 116px;148    background: #3D6AE5;149    color: #EAF0FF;150    border-radius: 18px;151    display: flex;152    align-items: center;153    justify-content: center;154    font-size: 40px;155    font-weight: 600;156    box-shadow: 0 2px 0 rgba(0,0,0,0.4) inset;157    margin-bottom: 28px;158  }159 160  .terms {161    width: 920px;162    text-align: center;163    font-size: 28px;164    line-height: 44px;165    color: #B0B0B0;166  }167  .terms a {168    color: #69A7FF;169    text-decoration: none;170    font-weight: 500;171  }172 173  /* Home pill */174  .home-pill {175    position: absolute;176    bottom: 30px;177    left: 50%;178    transform: translateX(-50%);179    width: 300px;180    height: 12px;181    background: rgba(255,255,255,0.8);182    border-radius: 6px;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      <div>10:03</div>193      <!-- simple play icon -->194      <svg class="icon" viewBox="0 0 24 24">195        <polygon points="6,4 20,12 6,20" fill="#FFFFFF"></polygon>196      </svg>197      <!-- dot icon -->198      <svg class="icon" viewBox="0 0 24 24">199        <circle cx="12" cy="12" r="4" fill="#FFFFFF"></circle>200      </svg>201    </div>202    <div class="status-right">203      <!-- WiFi -->204      <svg class="icon" viewBox="0 0 24 24">205        <path d="M2 8c5-4 15-4 20 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>206        <path d="M5 11c4-3 10-3 14 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>207        <path d="M8 14c3-2 5-2 8 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>208        <circle cx="12" cy="18" r="2" fill="#FFFFFF"/>209      </svg>210      <!-- Battery -->211      <svg class="icon" viewBox="0 0 24 24">212        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#FFFFFF" stroke-width="2" fill="none"/>213        <rect x="4" y="8" width="12" height="8" fill="#FFFFFF"/>214        <rect x="20" y="9" width="2" height="6" fill="#FFFFFF"/>215      </svg>216    </div>217  </div>218 219  <!-- Help icon -->220  <div class="help-btn">?</div>221 222  <!-- Hero content -->223  <div class="hero">224    <div class="logo-placeholder">[IMG: Google Fit Logo]</div>225    <h1>Coaching you to a healthier<br>and more active life</h1>226  </div>227 228  <!-- Bottom area with account and CTA -->229  <div class="bottom-area">230    <div class="account-row">231      <div class="avatar">C</div>232      <div class="account-info">233        <div class="account-name">Cerebra Research</div>234        <div class="account-email">dbwscratch.test.id4@gmail.com <span class="chevron"></span></div>235      </div>236    </div>237 238    <div class="cta-btn">Continue as Cerebra Research</div>239 240    <div class="terms">241      By continuing, you agree to the <a href="#">Terms of Service</a>.<br>242      Note: The Google <a href="#">Privacy Policy</a> describes how data is handled in this service. Fit sends diagnostics data to Google to help improve the app.243    </div>244  </div>245 246  <!-- Home indicator pill -->247  <div class="home-pill"></div>248</div>249</body>250</html>