GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Share Sheet</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #0f0f10;18    color: #ffffff;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 90px;28    color: #eaeaea;29    font-size: 36px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 32px;34  }35  .status-icons {36    display: flex;37    align-items: center;38    gap: 20px;39    font-size: 30px;40  }41  .icon-circle {42    width: 26px;43    height: 26px;44    border-radius: 50%;45    border: 2px solid #cfcfcf;46    opacity: 0.9;47  }48  .battery {49    display: flex;50    align-items: center;51    gap: 8px;52  }53  .battery-box {54    width: 44px;55    height: 22px;56    border: 2px solid #cfcfcf;57    position: relative;58    border-radius: 4px;59  }60  .battery-box::after {61    content: "";62    position: absolute;63    right: -6px;64    top: 6px;65    width: 6px;66    height: 10px;67    background: #cfcfcf;68    border-radius: 2px;69  }70  .battery-level {71    position: absolute;72    left: 2px;73    top: 2px;74    height: 16px;75    width: 34px;76    background: #cfcfcf;77    border-radius: 2px;78  }79 80  /* Header */81  .page-header {82    position: absolute;83    top: 100px;84    left: 0;85    width: 100%;86    padding: 0 32px;87  }88  .title-row {89    display: flex;90    align-items: center;91    gap: 24px;92    color: #fff;93  }94  .title-row h1 {95    margin: 0;96    font-size: 52px;97    font-weight: 700;98  }99  .back-icon {100    width: 48px;101    height: 48px;102  }103  .subtext {104    margin-top: 20px;105    font-size: 32px;106    color: #bdbdbd;107    white-space: nowrap;108    overflow: hidden;109    text-overflow: ellipsis;110  }111  .divider {112    height: 2px;113    background: #222325;114    margin: 28px 0;115  }116 117  /* Sections */118  .section-title {119    font-size: 54px;120    font-weight: 800;121    margin: 20px 32px;122  }123  .info-list {124    margin: 0 32px;125  }126  .info-row {127    display: flex;128    align-items: center;129    justify-content: space-between;130    padding: 28px 0;131    border-bottom: 1px solid #1e1f21;132  }133  .info-left {134    color: #bbbbbb;135    font-size: 36px;136    width: 280px;137  }138  .info-right {139    color: #ffffff;140    font-size: 36px;141    flex: 1;142    padding-right: 40px;143  }144  .chevron {145    width: 28px;146    height: 28px;147    fill: #8e8e8e;148  }149  .seller-title {150    font-size: 54px;151    font-weight: 800;152    margin: 38px 32px;153  }154 155  /* Share sheet overlay */156  .share-sheet {157    position: absolute;158    left: 0;159    top: 820px;160    width: 1080px;161    height: 1580px;162    background: #121214;163    border-top-left-radius: 28px;164    border-top-right-radius: 28px;165    box-shadow: 0 -14px 30px rgba(0,0,0,0.6);166  }167  .sheet-notch {168    width: 120px;169    height: 10px;170    background: #2a2a2d;171    border-radius: 6px;172    margin: 18px auto 0;173  }174  .sheet-content {175    padding: 26px 36px 40px;176  }177  .sheet-title {178    font-size: 52px;179    font-weight: 800;180    margin-bottom: 30px;181  }182  .listing-row {183    display: flex;184    gap: 26px;185    align-items: flex-start;186  }187  .thumb {188    width: 230px;189    height: 160px;190    background: #E0E0E0;191    border: 1px solid #BDBDBD;192    display: flex;193    justify-content: center;194    align-items: center;195    color: #757575;196    font-size: 26px;197  }198  .listing-title {199    font-size: 44px;200    font-weight: 700;201    line-height: 1.2;202    margin-top: 8px;203  }204 205  .url-box {206    margin-top: 36px;207    padding: 26px 24px;208    border: 1px solid #2a2a2d;209    border-radius: 18px;210    font-size: 34px;211    color: #d9d9d9;212    background: #0f0f11;213    line-height: 1.4;214  }215 216  .action-row {217    display: flex;218    gap: 24px;219    margin-top: 28px;220  }221  .pill {222    display: flex;223    align-items: center;224    gap: 20px;225    padding: 20px 28px;226    border-radius: 18px;227    background: #1d1f21;228    color: #ffffff;229    font-size: 36px;230    border: 1px solid #2b2d30;231  }232  .pill svg {233    width: 40px;234    height: 40px;235    fill: #cfcfcf;236  }237 238  .no-reco {239    text-align: center;240    color: #bdbdbd;241    font-size: 34px;242    margin: 40px 0 28px;243  }244 245  /* App icons row */246  .apps {247    display: flex;248    justify-content: space-around;249    padding: 10px 60px 0;250  }251  .app {252    display: flex;253    flex-direction: column;254    align-items: center;255    gap: 14px;256  }257  .app-circle {258    width: 140px;259    height: 140px;260    background: #ffffff;261    border-radius: 50%;262    position: relative;263    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);264  }265  .app-label {266    color: #dcdcdc;267    font-size: 34px;268  }269  /* Simplified logo hints */270  .logo-gmail::before {271    content: "";272    position: absolute;273    width: 90px;274    height: 60px;275    border: 8px solid #d32f2f;276    border-top-color: #ef6c00;277    border-left-color: #43a047;278    border-right-color: #1e88e5;279    top: 42px;280    left: 25px;281    border-radius: 8px;282  }283  .logo-drive::before {284    content: "";285    position: absolute;286    width: 0; height: 0;287    border-left: 40px solid #1e88e5;288    border-right: 40px solid #43a047;289    border-bottom: 70px solid transparent;290    top: 30px; left: 30px;291  }292  .logo-messages::before {293    content: "";294    position: absolute;295    width: 96px; height: 66px;296    background: #1e88e5;297    border-radius: 14px;298    top: 42px; left: 22px;299  }300  .logo-discord::before {301    content: "";302    position: absolute;303    width: 110px; height: 70px;304    background: #5865F2;305    border-radius: 20px;306    top: 36px; left: 15px;307  }308 309  /* Gesture bar */310  .gesture {311    position: absolute;312    bottom: 30px;313    left: 50%;314    transform: translateX(-50%);315    width: 520px;316    height: 10px;317    background: #d9d9d9;318    border-radius: 10px;319    opacity: 0.8;320  }321</style>322</head>323<body>324<div id="render-target">325 326  <!-- Status bar -->327  <div class="status-bar">328    <div>11:55</div>329    <div class="status-icons">330      <div class="icon-circle"></div>331      <div class="icon-circle"></div>332      <div class="battery">333        <div class="battery-box">334          <div class="battery-level"></div>335        </div>336        <div>100%</div>337      </div>338    </div>339  </div>340 341  <!-- Page header -->342  <div class="page-header">343    <div class="title-row">344      <svg class="back-icon" viewBox="0 0 24 24">345        <path fill="#ffffff" d="M15.5 3.5L6 12l9.5 8.5-1.9 2L2 12 13.6 1.5z"/>346      </svg>347      <h1>Item</h1>348    </div>349    <div class="subtext">nubuck for a subtly bohemian, autumnal take on our...</div>350    <div class="divider"></div>351  </div>352 353  <!-- Shipping section -->354  <div class="section-title">Shipping, returns, and payments</div>355  <div class="info-list">356    <div class="info-row">357      <div class="info-left">Location</div>358      <div class="info-right">Hanover, Pennsylvania, United States</div>359      <svg class="chevron" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8" fill="#8e8e8e"/></svg>360    </div>361    <div class="info-row" style="border-bottom: none;">362      <div class="info-left">Returns</div>363      <div class="info-right">Accepted within 30 days</div>364    </div>365  </div>366 367  <div class="divider" style="margin: 30px 0;"></div>368  <div class="seller-title">About this seller</div>369 370  <!-- Share sheet overlay -->371  <div class="share-sheet">372    <div class="sheet-notch"></div>373    <div class="sheet-content">374      <div class="sheet-title">Share Listing</div>375 376      <div class="listing-row">377        <div class="thumb">[IMG: Item Thumbnail]</div>378        <div class="listing-title">379          Clarks Originals Womens<br> Wallabee Moccasin Cup Brown380        </div>381      </div>382 383      <div class="url-box">384        https://www.ebay.com/itm/155608186658?mkcid=16&mkcvt=1&mkrid=711-127632-2357-0&ssspo=gzPnQ...385      </div>386 387      <div class="action-row">388        <div class="pill">389          <svg viewBox="0 0 24 24">390            <path d="M16 3H8v2h8V3zm3 6H5v12h14V9zm-2 2v8H7v-8h10z"/>391          </svg>392          <span>Copy</span>393        </div>394        <div class="pill">395          <svg viewBox="0 0 24 24">396            <path d="M12 3l4 4-4 4-4-4 4-4zm0 10l6 6H6l6-6z"/>397          </svg>398          <span>Nearby</span>399        </div>400      </div>401 402      <div class="no-reco">No recommended people to share with</div>403 404      <div class="apps">405        <div class="app">406          <div class="app-circle logo-gmail"></div>407          <div class="app-label">Gmail</div>408        </div>409        <div class="app">410          <div class="app-circle logo-drive"></div>411          <div class="app-label">Drive</div>412        </div>413        <div class="app">414          <div class="app-circle logo-messages"></div>415          <div class="app-label">Messages</div>416        </div>417        <div class="app">418          <div class="app-circle logo-discord"></div>419          <div class="app-label">Discord</div>420        </div>421      </div>422    </div>423  </div>424 425  <!-- Gesture bar -->426  <div class="gesture"></div>427 428</div>429</body>430</html>