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>App Detail Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #121212;15    color: #EDEDED;16    font-family: Arial, Helvetica, sans-serif;17  }18 19  .status-bar {20    height: 88px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #e5e5e5;26    font-size: 38px;27    letter-spacing: 1px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .icon {35    width: 44px;36    height: 44px;37    fill: #E0E0E0;38  }39 40  .appbar {41    height: 96px;42    padding: 0 36px;43    display: flex;44    align-items: center;45    justify-content: space-between;46  }47  .appbar-left {48    display: flex;49    align-items: center;50    gap: 18px;51  }52  .appbar-title {53    font-size: 44px;54    color: #CFCFCF;55    font-weight: 600;56  }57 58  .content {59    padding: 0 36px;60  }61 62  .app-header {63    display: flex;64    gap: 28px;65    align-items: center;66    padding: 24px 0 10px;67  }68  .app-icon {69    width: 152px;70    height: 152px;71    border-radius: 28px;72    background: #E0E0E0;73    border: 1px solid #BDBDBD;74    display: flex;75    align-items: center;76    justify-content: center;77    color: #757575;78    font-size: 26px;79    text-align: center;80  }81  .title-wrap .title {82    font-size: 56px;83    line-height: 64px;84    font-weight: 700;85    color: #EDEDED;86  }87  .title-wrap .subtitle-link {88    margin-top: 8px;89    font-size: 34px;90    color: #8AB4F8;91    letter-spacing: .3px;92  }93 94  .meta-row {95    margin-top: 26px;96    display: flex;97    align-items: center;98    gap: 26px;99  }100  .meta-block {101    display: flex;102    flex-direction: column;103    align-items: center;104    gap: 6px;105    min-width: 220px;106  }107  .meta-primary {108    display: flex;109    align-items: center;110    gap: 10px;111    font-size: 36px;112    color: #EDEDED;113  }114  .meta-secondary {115    font-size: 28px;116    color: #BDBDBD;117  }118  .divider-v {119    width: 1px;120    height: 56px;121    background: #2D2D2D;122  }123  .rating-star {124    width: 34px;125    height: 34px;126    fill: #E0E0E0;127  }128  .content-rating {129    border: 2px solid #9E9E9E;130    padding: 6px 10px;131    border-radius: 6px;132    font-size: 32px;133    color: #EDEDED;134  }135 136  .install-wrap {137    margin-top: 28px;138    display: flex;139    justify-content: center;140  }141  .install-btn {142    width: 100%;143    height: 96px;144    background: #B9C6FF;145    color: #121212;146    border-radius: 48px;147    display: flex;148    align-items: center;149    justify-content: center;150    font-size: 40px;151    font-weight: 700;152    position: relative;153  }154  .install-btn .chevron-area {155    position: absolute;156    right: 0;157    top: 0;158    width: 160px;159    height: 100%;160    display: flex;161    align-items: center;162    justify-content: center;163    border-top-right-radius: 48px;164    border-bottom-right-radius: 48px;165    background: rgba(0,0,0,0.06);166  }167  .helper-text {168    margin-top: 12px;169    text-align: center;170    font-size: 30px;171    color: #AFAFAF;172  }173 174  .screenshots {175    margin-top: 28px;176    display: flex;177    gap: 24px;178    overflow: hidden;179  }180  .shot {181    width: 480px;182    height: 280px;183    background: #E0E0E0;184    border: 1px solid #BDBDBD;185    border-radius: 24px;186    display: flex;187    align-items: center;188    justify-content: center;189    color: #757575;190    font-size: 28px;191  }192 193  .section {194    margin-top: 40px;195    padding: 0 4px;196  }197  .section-header {198    display: flex;199    align-items: center;200    justify-content: space-between;201  }202  .section-title {203    font-size: 44px;204    font-weight: 700;205    color: #EDEDED;206  }207  .arrow-right {208    width: 40px;209    height: 40px;210    fill: #CFCFCF;211  }212  .section p {213    margin: 12px 0 0;214    font-size: 32px;215    line-height: 44px;216    color: #BDBDBD;217  }218 219  .chips {220    margin-top: 18px;221    display: flex;222    gap: 20px;223    flex-wrap: wrap;224  }225  .chip {226    border: 2px solid #6A6A6A;227    color: #DCDCDC;228    border-radius: 28px;229    padding: 12px 22px;230    font-size: 30px;231  }232 233  .gesture-bar {234    position: absolute;235    bottom: 24px;236    left: 50%;237    transform: translateX(-50%);238    width: 300px;239    height: 10px;240    border-radius: 6px;241    background: #FFFFFF33;242  }243</style>244</head>245<body>246<div id="render-target">247 248  <!-- Status bar -->249  <div class="status-bar">250    <div class="time">8:10</div>251    <div class="status-icons">252      <!-- simple battery -->253      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2" ry="2" stroke="#E0E0E0" fill="none" stroke-width="2"></rect><rect x="4" y="9" width="12" height="6" fill="#E0E0E0"></rect><rect x="20" y="10" width="2" height="4" fill="#E0E0E0"></rect></svg>254      <!-- wifi -->255      <svg class="icon" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#E0E0E0" stroke-width="2" fill="none"/><path d="M5 12c3-3 11-3 14 0" stroke="#E0E0E0" stroke-width="2" fill="none"/><path d="M9 16c2-2 4-2 6 0" stroke="#E0E0E0" stroke-width="2" fill="none"/><circle cx="12" cy="19" r="1.5" fill="#E0E0E0"/></svg>256    </div>257  </div>258 259  <!-- Top App Bar -->260  <div class="appbar">261    <div class="appbar-left">262      <svg class="icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>263      <div class="appbar-title">Google Play</div>264    </div>265    <div class="status-icons">266      <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#E0E0E0" stroke-width="2" fill="none"/><line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#E0E0E0" stroke-width="2"/></svg>267      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#E0E0E0"/><circle cx="12" cy="12" r="2" fill="#E0E0E0"/><circle cx="12" cy="19" r="2" fill="#E0E0E0"/></svg>268    </div>269  </div>270 271  <div class="content">272    <!-- App header -->273    <div class="app-header">274      <div class="app-icon">[IMG: App Icon]</div>275      <div class="title-wrap">276        <div class="title">2WinTrade-Platform for Profit</div>277        <div class="subtitle-link">2WIN TRADE</div>278      </div>279    </div>280 281    <!-- Meta information row -->282    <div class="meta-row">283      <div class="meta-block">284        <div class="meta-primary">285          <span>3.9</span>286          <svg class="rating-star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 7-6.2-3.3L5 21.2 6.2 14 1 9.3l6.9-1L12 2z"/></svg>287        </div>288        <div class="meta-secondary">42K reviews</div>289      </div>290 291      <div class="divider-v"></div>292 293      <div class="meta-block">294        <div class="meta-primary">295          <svg class="icon" viewBox="0 0 24 24"><path d="M12 16V4" stroke="#E0E0E0" stroke-width="2"/><path d="M8 12l4 4 4-4" stroke="#E0E0E0" stroke-width="2" fill="none"/><rect x="4" y="16" width="16" height="4" fill="#E0E0E0"/></svg>296          <span>7.7 MB</span>297        </div>298        <div class="meta-secondary">Size</div>299      </div>300 301      <div class="divider-v"></div>302 303      <div class="meta-block">304        <div class="content-rating">3+</div>305        <div class="meta-secondary">Rated for 3+</div>306      </div>307 308      <div class="divider-v"></div>309 310      <div class="meta-block">311        <div class="meta-primary"><span>1M+</span></div>312        <div class="meta-secondary">Downloads</div>313      </div>314    </div>315 316    <!-- Install -->317    <div class="install-wrap">318      <div class="install-btn">319        Install320        <div class="chevron-area">321          <svg class="icon" viewBox="0 0 24 24"><path d="M8 10l4 4 4-4" stroke="#121212" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>322        </div>323      </div>324    </div>325    <div class="helper-text">Install on phone. More devices available.</div>326 327    <!-- Screenshots -->328    <div class="screenshots">329      <div class="shot">[IMG: App Screenshot]</div>330      <div class="shot">[IMG: App Screenshot]</div>331      <div class="shot">[IMG: App Screenshot]</div>332    </div>333 334    <!-- About this app -->335    <div class="section">336      <div class="section-header">337        <div class="section-title">About this app</div>338        <svg class="arrow-right" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8" stroke="#CFCFCF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>339      </div>340      <p>Welcome to 2WinTrade - an easy trading platform.</p>341      <div class="chips">342        <div class="chip">Finance</div>343        <div class="chip">Portfolio</div>344      </div>345    </div>346 347    <!-- Data safety -->348    <div class="section">349      <div class="section-header">350        <div class="section-title">Data safety</div>351        <svg class="arrow-right" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8" stroke="#CFCFCF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>352      </div>353      <p>Safety starts with understanding how developers collect and share your data. Data privacy and security practices may vary based on your use, region, and age. The developer provided this information and may update it over time.</p>354    </div>355  </div>356 357  <div class="gesture-bar"></div>358</div>359</body>360</html>