GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Share Listing UI</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#0b0b0b; color:#fff;12  }13  .status-bar {14    position:absolute; top:0; left:0; right:0;15    height:80px; padding:0 32px;16    display:flex; align-items:center; justify-content:space-between;17    color:#fff; font-size:36px; letter-spacing:1px;18  }19  .status-icons { display:flex; align-items:center; gap:18px; }20  .dot { width:12px; height:12px; border-radius:50%; background:#bbb; opacity:.9; }21  .battery {22    width:54px; height:26px; border:2px solid #bbb; border-radius:5px; position:relative;23  }24  .battery:after {25    content:''; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#bbb; border-radius:2px;26  }27  .battery .fill { position:absolute; left:3px; top:3px; height:18px; width:40px; background:#9be47a; }28  /* Header */29  .app-header {30    position:absolute; top:80px; left:0; right:0;31    height:110px; display:flex; align-items:center;32    padding:0 28px; gap:22px;33  }34  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }35  .title { font-size:54px; font-weight:600; flex:1; }36  .header-actions { display:flex; align-items:center; gap:26px; }37  .svg-icon { width:44px; height:44px; fill:none; stroke:#fff; stroke-width:4; }38  /* Content preview behind sheet */39  .content {40    position:absolute; top:190px; left:0; right:0;41    padding:0 32px;42  }43  .section-title {44    font-size:52px; font-weight:700; margin:42px 0 22px 0;45  }46  .row { display:flex; justify-content:space-between; align-items:flex-start; margin:18px 0; }47  .label { color:#bfbfbf; font-size:36px; width:240px; }48  .value { color:#e3e3e3; font-size:36px; flex:1; }49  .divider { height:2px; background:#1f1f1f; margin:30px 0; }50  /* Bottom Sheet */51  .sheet {52    position:absolute; left:0; right:0; bottom:0;53    height:1340px; background:#151515; border-top-left-radius:34px; border-top-right-radius:34px;54    box-shadow:0 -8px 20px rgba(0,0,0,0.6);55  }56  .handle {57    width:120px; height:8px; background:#3a3a3a; border-radius:4px;58    position:absolute; top:22px; left:50%; transform:translateX(-50%);59  }60  .sheet-inner { padding:80px 42px 40px 42px; }61  .sheet-title { font-size:54px; font-weight:800; margin-bottom:36px; }62  .listing {63    display:flex; gap:28px; align-items:flex-start; margin-bottom:50px;64  }65  .thumb {66    width:260px; height:220px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;67    display:flex; align-items:center; justify-content:center; font-size:26px; text-align:center;68  }69  .listing-text { font-size:44px; line-height:1.2; color:#fff; }70  .subhead { font-size:40px; color:#cfcfcf; margin:20px 0; }71  .chips { display:flex; gap:36px; margin-top:18px; }72  .circle {73    width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center;74    box-shadow:0 6px 12px rgba(0,0,0,0.35);75  }76  .circle.blue { background:#3d74f6; }77  .circle.red { background:#e65a4f; }78  .circle .svg-icon { stroke:#fff; }79  .caption { text-align:center; color:#eaeaea; font-size:36px; margin-top:16px; }80  .actions { display:flex; gap:140px; align-items:flex-end; margin-top:70px; }81  .action-item { width:220px; }82  .action-icon {83    width:90px; height:90px; border-radius:18px; background:#1f1f1f;84    display:flex; align-items:center; justify-content:center; margin-bottom:16px; border:1px solid #2a2a2a;85  }86  /* Home indicator */87  .home-indicator {88    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);89    width:240px; height:10px; background:#e6e6e6; border-radius:5px; opacity:.6;90  }91</style>92</head>93<body>94<div id="render-target">95  <!-- Status Bar -->96  <div class="status-bar">97    <div>11:54</div>98    <div class="status-icons">99      <svg class="svg-icon" viewBox="0 0 24 24" style="stroke:#cfcfcf;">100        <circle cx="12" cy="12" r="9"></circle>101      </svg>102      <div class="dot"></div>103      <div class="battery"><div class="fill"></div></div>104      <div style="font-size:30px; color:#ddd; margin-left:6px;">100%</div>105    </div>106  </div>107 108  <!-- App Header -->109  <div class="app-header">110    <div class="icon-btn">111      <svg class="svg-icon" viewBox="0 0 24 24">112        <path d="M15 5 L7 12 L15 19"></path>113      </svg>114    </div>115    <div class="title">Item</div>116    <div class="header-actions">117      <div class="icon-btn">118        <svg class="svg-icon" viewBox="0 0 24 24">119          <circle cx="11" cy="11" r="7"></circle>120          <path d="M20 20 L16 16"></path>121        </svg>122      </div>123      <div class="icon-btn">124        <svg class="svg-icon" viewBox="0 0 24 24">125          <path d="M3 6 L5 6 L7 18 L19 18 L21 9 L6 9"></path>126          <circle cx="9" cy="21" r="1.5"></circle>127          <circle cx="17" cy="21" r="1.5"></circle>128        </svg>129      </div>130      <div class="icon-btn">131        <svg class="svg-icon" viewBox="0 0 24 24">132          <path d="M4 12 C8 6, 16 6, 20 12"></path>133          <path d="M4 12 C8 18, 16 18, 20 12"></path>134          <circle cx="4" cy="12" r="1.5"></circle>135          <circle cx="12" cy="12" r="1.5"></circle>136          <circle cx="20" cy="12" r="1.5"></circle>137        </svg>138      </div>139      <div class="icon-btn">140        <svg class="svg-icon" viewBox="0 0 24 24">141          <circle cx="5" cy="12" r="1.5"></circle>142          <circle cx="12" cy="12" r="1.5"></circle>143          <circle cx="19" cy="12" r="1.5"></circle>144        </svg>145      </div>146    </div>147  </div>148 149  <!-- Content behind the sheet -->150  <div class="content">151    <div class="section-title">Shipping, returns, and payments</div>152    <div class="row">153      <div class="label">Location</div>154      <div class="value">Hanover, Pennsylvania, United States</div>155    </div>156    <div class="row">157      <div class="label">Returns</div>158      <div class="value">Accepted within 30 days</div>159    </div>160    <div class="divider"></div>161    <div class="section-title" style="margin-top:10px;">About this seller</div>162  </div>163 164  <!-- Bottom Share Sheet -->165  <div class="sheet">166    <div class="handle"></div>167    <div class="sheet-inner">168      <div class="sheet-title">Share Listing</div>169      <div class="listing">170        <div class="thumb">[IMG: Brown Clarks Wallabee Shoe]</div>171        <div class="listing-text">172          Clarks Originals Womens<br>173          Wallabee Moccasin Cup Brown<br>174          Leather Shoes175        </div>176      </div>177 178      <div class="subhead">Share To</div>179      <div class="chips">180        <div>181          <div class="circle blue">182            <svg class="svg-icon" viewBox="0 0 24 24">183              <path d="M4 6 H20 V16 H6 L4 18 Z"></path>184              <path d="M6 9 H18"></path>185            </svg>186          </div>187          <div class="caption">SMS</div>188        </div>189        <div>190          <div class="circle red">191            <svg class="svg-icon" viewBox="0 0 24 24">192              <path d="M4 5 H20 V19 H4 Z"></path>193              <path d="M4 7 L12 13 L20 7"></path>194            </svg>195          </div>196          <div class="caption">Email</div>197        </div>198      </div>199 200      <div class="subhead" style="margin-top:60px;">Actions</div>201      <div class="actions">202        <div class="action-item">203          <div class="action-icon">204            <svg class="svg-icon" viewBox="0 0 24 24">205              <circle cx="6" cy="6" r="3"></circle>206              <circle cx="18" cy="6" r="3"></circle>207              <circle cx="12" cy="18" r="3"></circle>208              <path d="M8.5 7.5 L10.5 8.5 L12 15"></path>209              <path d="M15.5 7.5 L13.5 8.5"></path>210            </svg>211          </div>212          <div class="caption">More Apps</div>213        </div>214        <div class="action-item">215          <div class="action-icon">216            <svg class="svg-icon" viewBox="0 0 24 24">217              <rect x="6" y="6" width="11" height="11" rx="2"></rect>218              <rect x="9" y="9" width="11" height="11" rx="2"></rect>219              <path d="M12 12 L12 16"></path>220              <path d="M10 14 L14 14"></path>221            </svg>222          </div>223          <div class="caption">Copy Link</div>224        </div>225      </div>226    </div>227  </div>228 229  <div class="home-indicator"></div>230</div>231</body>232</html>