GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Replica</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #fafafa;14    border-radius: 0;15    box-shadow: none;16    font-family: Arial, Helvetica, sans-serif;17    color: #222;18  }19 20  /* Status bar (orange) */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 130px;27    background: #F47A07; /* orange */28    display: flex;29    align-items: center;30    padding: 0 40px;31    box-sizing: border-box;32    color: #fff;33    font-weight: 600;34    font-size: 42px;35  }36  .status-left { display: flex; align-items: center; gap: 18px; }37  .status-right {38    margin-left: auto;39    display: flex;40    align-items: center;41    gap: 28px;42  }43  .icon-cloud { width: 40px; height: 28px; }44  .icon-wifi { width: 48px; height: 32px; }45  .icon-battery { width: 60px; height: 32px; }46 47  /* Underlying app content (partially visible on right) */48  .app-header {49    position: absolute;50    top: 130px;51    left: 0;52    width: 1080px;53    height: 140px;54    background: #F47A07;55    display: flex;56    align-items: center;57    justify-content: flex-end;58    padding-right: 40px;59    box-sizing: border-box;60    color: #fff;61    font-size: 48px;62  }63  .content-list {64    position: absolute;65    top: 270px;66    left: 560px; /* mostly hidden under sheet; show right edge */67    width: 520px;68    height: 1800px;69    padding: 30px;70    box-sizing: border-box;71  }72  .card {73    background: #ffffff;74    border-radius: 18px;75    box-shadow: 0 4px 16px rgba(0,0,0,0.12);76    margin-bottom: 36px;77    overflow: hidden;78    border: 1px solid #e6e6e6;79  }80  .card-img {81    width: 100%;82    height: 260px;83    background: #E0E0E0;84    border-top: 1px solid #BDBDBD;85    border-bottom: 1px solid #BDBDBD;86    display: flex;87    justify-content: center;88    align-items: center;89    color: #757575;90    font-size: 34px;91  }92 93  /* Dim overlay under sheet */94  .scrim {95    position: absolute;96    top: 130px;97    left: 0;98    width: 1080px;99    height: 2270px;100    background: rgba(0,0,0,0.06);101  }102 103  /* Slide-out white sheet */104  .sheet {105    position: absolute;106    top: 130px;107    left: 0;108    width: 880px;109    height: 2260px;110    background: #ffffff;111    box-shadow: 0 0 24px rgba(0,0,0,0.25);112    border-top-right-radius: 8px;113    border-bottom-right-radius: 8px;114    overflow-y: auto;115    box-sizing: border-box;116  }117 118  /* Blue banner at top of sheet */119  .promo {120    background: #0F57C8;121    height: 220px;122    padding: 28px 32px;123    color: #fff;124    box-sizing: border-box;125    position: relative;126  }127  .promo-top {128    display: flex;129    align-items: center;130    gap: 18px;131    font-size: 44px;132    font-weight: 700;133  }134  .promo-top .crown {135    width: 48px; height: 48px;136  }137  .promo-chevron {138    position: absolute;139    right: 22px;140    top: 34px;141    width: 40px; height: 40px;142  }143  .credit-bar {144    margin-top: 22px;145    background: #2B55C8;146    border-radius: 14px;147    height: 90px;148    display: flex;149    align-items: center;150    padding: 0 24px;151    box-sizing: border-box;152    gap: 16px;153  }154  .credit-label {155    background: rgba(255,255,255,0.16);156    color: #fff;157    border-radius: 10px;158    padding: 8px 14px;159    font-size: 34px;160  }161  .credit-value {162    margin-left: auto;163    display: flex;164    align-items: center;165    gap: 12px;166    color: #fff;167    font-size: 36px;168    font-weight: 700;169  }170  .coin {171    width: 42px; height: 42px;172    background: #FFC107;173    border-radius: 50%;174    border: 2px solid rgba(0,0,0,0.15);175  }176 177  .new-features {178    margin: 22px 24px;179    height: 108px;180    border: 1px solid #e6e6e6;181    border-radius: 56px;182    display: flex;183    align-items: center;184    padding: 0 28px;185    gap: 18px;186    color: #5b5b5b;187    font-size: 38px;188    background: #fff;189  }190  .bulb {191    width: 44px; height: 44px;192  }193 194  /* List items */195  .menu {196    padding: 8px 32px 32px 32px;197  }198  .menu-item {199    font-size: 42px;200    line-height: 1.4;201    padding: 36px 0;202    border-bottom: 1px solid transparent;203    color: #2a2a2a;204  }205  .menu-item.muted { color: #9e9e9e; }206  .menu-item .reward {207    float: right;208    background: #2CB6FF;209    color: #fff;210    border-radius: 30px;211    padding: 10px 26px;212    font-size: 34px;213    display: inline-flex;214    align-items: center;215    gap: 12px;216  }217  .menu-item .reward svg {218    width: 26px; height: 26px;219    fill: #fff;220  }221  .menu-item a {222    color: #1976D2;223    text-decoration: none;224  }225 226  /* Bottom gesture bar */227  .gesture {228    position: absolute;229    bottom: 20px;230    left: 50%;231    transform: translateX(-50%);232    width: 280px;233    height: 10px;234    background: #cfcfcf;235    border-radius: 6px;236  }237</style>238</head>239<body>240<div id="render-target">241 242  <!-- Status bar -->243  <div class="status-bar">244    <div class="status-left">245      <span>9:17</span>246      <svg class="icon-cloud" viewBox="0 0 48 32">247        <path fill="#fff" d="M18 28h14c7 0 10-4 10-8s-3-8-9-8c-1-7-8-12-15-10-6 2-9 7-8 13-5 1-8 5-8 9s4 4 8 4h8z"/>248      </svg>249    </div>250    <div class="status-right">251      <svg class="icon-wifi" viewBox="0 0 48 32">252        <path fill="#fff" d="M2 8c10-8 34-8 44 0l-4 4c-8-6-28-6-36 0L2 8zm8 8c8-6 24-6 32 0l-4 4c-6-4-18-4-24 0l-4-4zm10 10l4 4 4-4c-4-3-8-3-12 0z"/>253      </svg>254      <svg class="icon-battery" viewBox="0 0 60 32">255        <rect x="2" y="6" width="50" height="20" rx="3" fill="none" stroke="#fff" stroke-width="3"/>256        <rect x="6" y="9" width="38" height="14" rx="2" fill="#fff"/>257        <rect x="52" y="10" width="6" height="12" rx="2" fill="#fff"/>258      </svg>259    </div>260  </div>261 262  <!-- Underlying app header -->263  <div class="app-header">Edit</div>264 265  <!-- Underlying content right side (partially visible) -->266  <div class="content-list">267    <div class="card">268      <div class="card-img">[IMG: Carousel of products]</div>269    </div>270    <div class="card">271      <div class="card-img">[IMG: Business meeting desk]</div>272    </div>273    <div class="card">274      <div class="card-img">[IMG: Team discussion]</div>275    </div>276  </div>277 278  <div class="scrim"></div>279 280  <!-- Slide-out sheet -->281  <div class="sheet">282 283    <div class="promo">284      <div class="promo-top">285        <svg class="crown" viewBox="0 0 64 64">286          <path fill="#FFD54F" d="M6 50h52v6H6z"/>287          <path fill="#FFD54F" d="M8 46l8-20 16 10 16-10 8 20z"/>288          <circle cx="16" cy="22" r="4" fill="#FFE082"/>289          <circle cx="48" cy="22" r="4" fill="#FFE082"/>290          <circle cx="32" cy="30" r="4" fill="#FFE082"/>291        </svg>292        <span>Use Advanced Editing Functions!</span>293      </div>294      <svg class="promo-chevron" viewBox="0 0 40 40">295        <path fill="#fff" d="M14 8l12 12-12 12" />296      </svg>297      <div class="credit-bar">298        <div class="credit-label">Credit</div>299        <div class="credit-value">300          <span>100</span>301          <div class="coin"></div>302        </div>303      </div>304    </div>305 306    <div class="new-features">307      <svg class="bulb" viewBox="0 0 48 48">308        <path fill="#0F57C8" d="M24 6c-8 0-14 6-14 14 0 5 3 9 6 11v4h16v-4c3-2 6-6 6-11 0-8-6-14-14-14z"/>309        <rect x="18" y="36" width="12" height="6" fill="#0F57C8"/>310      </svg>311      <span>New features have been added!</span>312    </div>313 314    <div class="menu">315      <div class="menu-item muted">Save</div>316      <div class="menu-item">Save As</div>317 318      <div class="menu-item">319        Export to PDF320        <span class="reward">321          <svg viewBox="0 0 24 24"><path d="M8 5l10 7-10 7z"></path></svg>322          REWARD323        </span>324      </div>325 326      <div class="menu-item"><a href="#">Saved in Polaris Drive</a></div>327 328      <div class="menu-item">Export as image</div>329      <div class="menu-item">Share</div>330      <div class="menu-item">Print</div>331      <div class="menu-item muted">Comment</div>332      <div class="menu-item">Document Information</div>333 334      <div class="menu-item">335        Watch video to remove ads336        <span class="reward">337          <svg viewBox="0 0 24 24"><path d="M8 5l10 7-10 7z"></path></svg>338          REWARD339        </span>340      </div>341    </div>342  </div>343 344  <div class="gesture"></div>345</div>346</body>347</html>