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>Share Listing UI</title>7<style>8  body { margin:0; padding:0; background: transparent; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#000; color:#fff;12    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;13  }14 15  /* Status bar */16  .top-status { position:absolute; top:0; left:0; width:100%; height:60px; padding:16px 24px; font-size:32px; color:#fff; }17  .top-status .right { float:right; color:#cfcfcf; font-size:28px; }18 19  /* App bar */20  .appbar { position:absolute; top:60px; left:0; width:100%; height:120px; display:flex; align-items:center; padding:0 24px; }21  .title { font-size:44px; font-weight:700; margin-left:12px; }22  .icon-circle { width:84px; height:84px; border-radius:42px; background:#1a1a1a; margin-left:auto; margin-right:16px; display:flex; align-items:center; justify-content:center; }23 24  .back { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }25 26  /* Content above sheet */27  .hero { position:absolute; top:200px; left:60px; right:60px; height:140px;28    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;29    display:flex; align-items:center; justify-content:center; border-radius:6px;30  }31  .heart { position:absolute; right:60px; top:315px; width:88px; height:88px; border-radius:44px; background:#121212; display:flex; align-items:center; justify-content:center; }32  .dots { position:absolute; top:360px; width:100%; text-align:center; }33  .dots span { display:inline-block; width:16px; height:16px; background:#4c4c4c; border-radius:50%; margin:0 10px; }34 35  .title-large { position:absolute; top:430px; left:60px; right:60px; font-size:56px; font-weight:800; line-height:70px; }36  .seller { position:absolute; top:760px; left:60px; right:60px; display:flex; align-items:center; }37  .avatar { width:100px; height:100px; border-radius:50%; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center; margin-right:24px; }38  .small-text { font-size:32px; color:#9e9e9e; }39  .price { position:absolute; top:900px; left:60px; font-size:64px; font-weight:800; }40 41  /* Bottom sheet */42  .bottom-sheet { position:absolute; left:0; right:0; bottom:0; height:1150px; background:#1f1f1f; border-top-left-radius:36px; border-top-right-radius:36px; }43  .drag { width:140px; height:10px; background:#444; border-radius:5px; position:absolute; top:24px; left:50%; transform:translateX(-50%); }44  .sheet-content { position:absolute; top:70px; left:40px; right:40px; }45  .sheet-title { font-size:48px; font-weight:700; margin-bottom:40px; }46 47  .listing-row { display:flex; align-items:flex-start; gap:30px; margin-bottom:40px; }48  .listing-img { width:220px; height:220px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center; }49  .listing-text { font-size:46px; line-height:58px; font-weight:600; }50 51  .section-title { font-size:40px; font-weight:700; margin:20px 0 24px; }52 53  .share-grid { display:flex; gap:60px; align-items:flex-start; }54  .share-item { width:180px; text-align:center; }55  .share-item .circle { width:160px; height:160px; border-radius:80px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }56  .share-item label { font-size:32px; color:#cfcfcf; }57 58  .actions { display:flex; gap:200px; margin-top:60px; }59  .action { width:280px; text-align:center; }60  .action .iconbox { width:100px; height:100px; border-radius:18px; background:#2b2b2b; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }61  .bottom-gesture { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:260px; height:14px; background:#E0E0E0; opacity:0.5; border-radius:7px; }62</style>63</head>64<body>65<div id="render-target">66 67  <div class="top-status">68    4:5469    <span class="right">◦ ▱</span>70  </div>71 72  <div class="appbar">73    <div class="back">74      <svg width="48" height="48" viewBox="0 0 24 24">75        <path d="M15 19l-7-7 7-7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>76      </svg>77    </div>78    <div class="title">Item</div>79 80    <div class="icon-circle">81      <svg width="36" height="36" viewBox="0 0 24 24">82        <circle cx="10" cy="10" r="6" fill="none" stroke="#fff" stroke-width="2"></circle>83        <line x1="15" y1="15" x2="22" y2="22" stroke="#fff" stroke-width="2"></line>84      </svg>85    </div>86    <div class="icon-circle">87      <svg width="36" height="36" viewBox="0 0 24 24">88        <path d="M3 6h18l-2 12H5L3 6z" fill="none" stroke="#fff" stroke-width="2"></path>89        <circle cx="9" cy="20" r="2" fill="#fff"></circle>90        <circle cx="17" cy="20" r="2" fill="#fff"></circle>91      </svg>92    </div>93    <div class="icon-circle">94      <svg width="36" height="36" viewBox="0 0 24 24">95        <path d="M4 12h9" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>96        <path d="M12 5l7 7-7 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>97      </svg>98    </div>99    <div class="icon-circle">100      <svg width="8" height="8">101        <circle cx="4" cy="4" r="4" fill="#777"></circle>102      </svg>103    </div>104  </div>105 106  <div class="hero">[IMG: Robot vacuum gallery banner]</div>107  <div class="heart">108    <svg width="36" height="36" viewBox="0 0 24 24">109      <path d="M12 21s-7-4.5-7-10a5 5 0 019-3 5 5 0 019 3c0 5.5-7 10-7 10z" fill="none" stroke="#fff" stroke-width="2"></path>110    </svg>111  </div>112  <div class="dots">113    <span></span><span></span><span></span><span></span><span></span>114  </div>115 116  <div class="title-large">117    FDW Robot Vacuum Cleaner 2000Pa Strong Suction, 4400mAh, Black118  </div>119 120  <div class="seller">121    <div class="avatar">[IMG]</div>122    <div>123      <div class="small-text">xpectmoreforless (435402)</div>124      <div class="small-text">96.5% positive feedback</div>125    </div>126  </div>127 128  <div class="price">$29.99</div>129 130  <div class="bottom-sheet">131    <div class="drag"></div>132    <div class="sheet-content">133      <div class="sheet-title">Share Listing</div>134 135      <div class="listing-row">136        <div class="listing-img">[IMG: Robot vacuum product]</div>137        <div class="listing-text">138          FDW Robot Vacuum Cleaner<br>139          2000Pa Strong Suction,<br>140          4400mAh, Black141        </div>142      </div>143 144      <div class="section-title">Share To</div>145      <div class="share-grid">146        <div class="share-item">147          <div class="circle" style="background:#1877F2;">148            <svg width="80" height="80" viewBox="0 0 24 24">149              <path d="M14 8h3V5h-3c-2.8 0-5 2.2-5 5v3H6v3h3v6h3v-6h3l1-3h-4V10c0-1.1.9-2 2-2z" fill="#fff"></path>150            </svg>151          </div>152          <label>Facebook</label>153        </div>154        <div class="share-item">155          <div class="circle" style="background:#3C9BF4;">156            <svg width="80" height="80" viewBox="0 0 24 24">157              <path d="M4 5h16v10H7l-3 4V5z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"></path>158            </svg>159          </div>160          <label>SMS</label>161        </div>162        <div class="share-item">163          <div class="circle" style="background:#E74C3C;">164            <svg width="80" height="80" viewBox="0 0 24 24">165              <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>166              <path d="M3 7l9 6 9-6" fill="none" stroke="#fff" stroke-width="2"></path>167            </svg>168          </div>169          <label>Email</label>170        </div>171        <div class="share-item">172          <div class="circle" style="background:#FFEB3B;">173            <div style="font-size:58px; color:#000;">👻</div>174          </div>175          <label>Snapchat</label>176        </div>177      </div>178 179      <div class="section-title" style="margin-top:60px;">Actions</div>180      <div class="actions">181        <div class="action">182          <div class="iconbox">183            <svg width="64" height="64" viewBox="0 0 24 24">184              <circle cx="6" cy="12" r="2" fill="#fff"></circle>185              <circle cx="18" cy="6" r="2" fill="#fff"></circle>186              <circle cx="18" cy="18" r="2" fill="#fff"></circle>187              <path d="M7.7 11l8.6-5M7.7 13l8.6 5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>188            </svg>189          </div>190          <label>More Apps</label>191        </div>192        <div class="action">193          <div class="iconbox">194            <svg width="64" height="64" viewBox="0 0 24 24">195              <rect x="6" y="6" width="12" height="12" fill="none" stroke="#fff" stroke-width="2"></rect>196              <rect x="3" y="3" width="12" height="12" fill="none" stroke="#fff" stroke-width="2"></rect>197              <path d="M12 12h6" stroke="#fff" stroke-width="2"></path>198              <path d="M15 9v6" stroke="#fff" stroke-width="2"></path>199            </svg>200          </div>201          <label>Copy Link</label>202        </div>203      </div>204    </div>205    <div class="bottom-gesture"></div>206  </div>207 208</div>209</body>210</html>