GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - Share Listing</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #0B0B0B;13    color: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 100%;22    height: 80px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 32px;27    color: #eaeaea;28    font-size: 32px;29  }30 31  /* App bar */32  .app-bar {33    position: absolute;34    top: 80px;35    left: 0;36    width: 100%;37    height: 100px;38    display: flex;39    align-items: center;40    padding: 0 24px;41  }42  .app-title { font-size: 44px; font-weight: 600; margin-left: 16px; }43  .icon-row { margin-left: auto; display: flex; gap: 24px; }44  .icon-btn { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; }45 46  /* Content */47  .content {48    position: absolute;49    top: 180px;50    left: 0;51    right: 0;52    bottom: 0;53    padding: 0 32px 32px;54    color: #EDEDED;55  }56  h2.section-title {57    font-size: 56px;58    line-height: 1.1;59    font-weight: 800;60    margin: 24px 0 32px;61  }62  .row {63    display: flex;64    align-items: flex-start;65    justify-content: space-between;66    border-bottom: 1px solid #222;67    padding: 24px 0;68  }69  .row .label { color: #9AA0A6; font-size: 34px; width: 280px; }70  .row .value { color: #EDEDED; font-size: 34px; flex: 1; padding-right: 20px; }71  .chevron { width: 28px; height: 28px; margin-top: 8px; }72 73  .subsection-title { font-size: 52px; font-weight: 800; margin-top: 40px; }74  .small-text { color: #b7b7b7; font-size: 34px; margin-top: 12px; }75 76  .big-btn {77    margin-top: 28px;78    height: 120px;79    border-radius: 60px;80    border: 2px solid #3b3b3b;81    color: #cfd3d7;82    display: flex;83    align-items: center;84    justify-content: center;85    font-size: 40px;86    letter-spacing: 0.2px;87  }88 89  /* Overlay bottom sheet */90  .scrim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }91  .sheet {92    position: absolute;93    left: 0;94    bottom: 0;95    width: 100%;96    height: 980px;97    background: #151515;98    border-top-left-radius: 40px;99    border-top-right-radius: 40px;100    color: #fff;101    box-shadow: 0 -6px 20px rgba(0,0,0,0.6);102  }103  .sheet .handle { position: absolute; left: 50%; transform: translateX(-50%); top: 16px; width: 120px; height: 12px; border-radius: 6px; background: #3a3a3a; }104  .sheet .inner { padding: 60px 40px 40px; }105  .sheet h3 { font-size: 52px; margin: 0 0 32px; }106 107  .listing { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 40px; }108  .img-ph {109    width: 240px; height: 220px;110    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;111    display: flex; align-items: center; justify-content: center; font-size: 28px;112  }113  .listing .title { font-size: 44px; line-height: 1.2; color: #EDEDED; }114 115  .share-to { margin-top: 10px; color: #cfcfcf; font-size: 36px; }116  .share-row { display: flex; gap: 60px; margin: 24px 0 8px; }117  .circle { width: 160px; height: 160px; border-radius: 50%; background: #2b5df6; display: flex; align-items: center; justify-content: center; }118  .circle.email { background: #cf5a4e; }119  .icon { width: 80px; height: 80px; }120  .share-labels { display: flex; gap: 160px; font-size: 36px; color: #cfcfcf; padding-left: 12px; }121 122  .actions-title { margin-top: 24px; font-size: 44px; color: #cfcfcf; }123 124  svg { fill: #ddd; }125  .back { width: 56px; height: 56px; }126</style>127</head>128<body>129<div id="render-target">130 131  <!-- Status bar -->132  <div class="status-bar">133    <div>11:54</div>134    <div style="display:flex; align-items:center; gap:22px; font-size:26px;">135      <span style="color:#9aa0a6;">◔</span>136      <span style="color:#9aa0a6;">⌁</span>137      <span style="color:#9aa0a6;">🔋 100%</span>138    </div>139  </div>140 141  <!-- App bar -->142  <div class="app-bar">143    <div class="icon-btn">144      <svg class="back" viewBox="0 0 24 24">145        <path d="M15.5 5l-7 7 7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>146      </svg>147    </div>148    <div class="app-title">Item</div>149    <div class="icon-row">150      <div class="icon-btn">151        <svg class="icon" viewBox="0 0 24 24">152          <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="2" fill="none"/>153          <path d="M16 16l5 5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>154        </svg>155      </div>156      <div class="icon-btn">157        <svg class="icon" viewBox="0 0 24 24">158          <path d="M7 6h10l1 7H6l1-7z" fill="none" stroke="#fff" stroke-width="2"/>159          <circle cx="9" cy="19" r="2" fill="#fff"/>160          <circle cx="15" cy="19" r="2" fill="#fff"/>161        </svg>162      </div>163      <div class="icon-btn">164        <svg class="icon" viewBox="0 0 24 24">165          <circle cx="12" cy="7" r="3" stroke="#fff" stroke-width="2" fill="none"/>166          <path d="M5 9v8a7 7 0 0 0 14 0V9" stroke="#fff" stroke-width="2" fill="none"/>167        </svg>168      </div>169      <div class="icon-btn">170        <svg class="icon" viewBox="0 0 24 24">171          <circle cx="12" cy="5" r="2" fill="#fff"/>172          <circle cx="12" cy="12" r="2" fill="#fff"/>173          <circle cx="12" cy="19" r="2" fill="#fff"/>174        </svg>175      </div>176    </div>177  </div>178 179  <!-- Content body -->180  <div class="content">181    <h2 class="section-title">Shipping, returns, and payments</h2>182 183    <div class="row">184      <div class="label">Location</div>185      <div class="value">Hanover, Pennsylvania, United States</div>186      <svg class="chevron" viewBox="0 0 24 24">187        <path d="M9 6l6 6-6 6" stroke="#9AA0A6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>188      </svg>189    </div>190 191    <div class="row">192      <div class="label">Returns</div>193      <div class="value">Accepted within 30 days</div>194    </div>195 196    <div class="subsection-title">About this seller</div>197    <div class="small-text">98.6% positive feedback</div>198 199    <div class="big-btn">Seller's other items</div>200    <div class="big-btn">Contact seller</div>201  </div>202 203  <!-- Bottom sheet overlay -->204  <div class="scrim"></div>205  <div class="sheet">206    <div class="handle"></div>207    <div class="inner">208      <h3>Share Listing</h3>209      <div class="listing">210        <div class="img-ph">[IMG: Brown Clarks Wallabee]</div>211        <div class="title">Clarks Originals Womens Wallabee Moccasin Cup Brown Leather Shoes</div>212      </div>213 214      <div class="share-to">Share To</div>215      <div class="share-row">216        <div class="circle">217          <svg class="icon" viewBox="0 0 24 24">218            <path d="M4 4h16v11H12l-4 4v-4H4z" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round"/>219            <path d="M7 8h10M7 11h10" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>220          </svg>221        </div>222        <div class="circle email">223          <svg class="icon" viewBox="0 0 24 24">224            <rect x="3" y="5" width="18" height="14" rx="2" stroke="#fff" stroke-width="2" fill="none"/>225            <path d="M3 7l9 6 9-6" stroke="#fff" stroke-width="2" fill="none"/>226          </svg>227        </div>228      </div>229      <div class="share-labels">230        <div>SMS</div>231        <div>Email</div>232      </div>233 234      <div class="actions-title">Actions</div>235    </div>236  </div>237 238</div>239</body>240</html>