GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Share Listing - Mobile UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#000;11    color:#fff;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; right:0; height:84px;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 36px; font-size:34px; letter-spacing:0.5px; color:#eaeaea;19  }20  .status-right { display:flex; gap:22px; align-items:center; }21  .status-dot { width:16px; height:16px; background:#eaeaea; border-radius:50%; opacity:.9; }22  .battery {23    width:54px; height:26px; border:3px solid #eaeaea; border-radius:6px; position:relative;24  }25  .battery::after {26    content:''; position:absolute; right:-10px; top:6px; width:6px; height:14px; background:#eaeaea; border-radius:2px;27  }28  .battery .level { position:absolute; left:3px; top:3px; bottom:3px; width:36px; background:#eaeaea; border-radius:3px; }29 30  /* Top app bar */31  .app-bar {32    position:absolute; top:96px; left:0; right:0; height:96px; display:flex; align-items:center;33    padding:0 28px;34  }35  .app-title { font-size:52px; font-weight:700; margin-left:20px; }36  .icon-circle {37    width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,0.08);38    display:flex; align-items:center; justify-content:center;39    margin-left:18px;40  }41  .left-group { display:flex; align-items:center; gap:10px; }42  .right-group { margin-left:auto; display:flex; align-items:center; }43  svg { fill:#fff; }44 45  /* Background content */46  .content {47    position:absolute; top:220px; left:0; right:0; bottom:0;48  }49  .book-wrap {50    width:780px; height:1200px; margin:0 auto; position:relative;51    display:flex; align-items:center; justify-content:center;52    background:rgba(255,255,255,0.03);53    border-radius:12px;54  }55  .book-img {56    width:720px; height:1100px; background:#E0E0E0; border:1px solid #BDBDBD;57    color:#444; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;58  }59  .pager-pill {60    position:absolute; right:80px; top:10px; background:rgba(255,255,255,0.12); color:#fff;61    padding:16px 24px; border-radius:28px; font-size:34px;62  }63 64  /* Dim overlay for modal focus */65  .dim-overlay {66    position:absolute; left:0; right:0; bottom:0; top:0; background:rgba(0,0,0,0.55);67  }68 69  /* Bottom Sheet */70  .bottom-sheet {71    position:absolute; left:0; right:0; bottom:0; height:1450px; background:#121212;72    border-top-left-radius:28px; border-top-right-radius:28px;73    box-shadow:0 -10px 40px rgba(0,0,0,0.6);74    padding:20px 40px 40px;75  }76  .drag-handle {77    width:140px; height:8px; background:#2b2b2b; border-radius:6px; margin:18px auto 24px auto;78  }79  .sheet-title { font-size:64px; font-weight:800; margin:10px 0 40px 10px; }80  .listing-row { display:flex; align-items:center; gap:36px; padding:0 10px; }81  .thumb {82    width:170px; height:220px; background:#E0E0E0; border:1px solid #BDBDBD; color:#555;83    display:flex; align-items:center; justify-content:center; text-align:center; font-size:26px;84  }85  .listing-name { font-size:46px; color:#eaeaea; line-height:1.25; }86  .section-title { font-size:44px; color:#dcdcdc; margin:56px 0 20px 10px; }87 88  .share-row {89    display:flex; align-items:flex-start; gap:90px; padding:20px 10px; overflow:hidden;90  }91  .app {92    width:170px; text-align:center; color:#dcdcdc;93  }94  .app .circle {95    width:170px; height:170px; border-radius:50%; display:flex; align-items:center; justify-content:center;96  }97  /* Icon backgrounds */98  .ig {99    background: radial-gradient(circle at 30% 30%, #ffd776, #f56040 45%, #c13584 70%, #6a4cff 100%);100  }101  .stories { background: radial-gradient(circle at 30% 30%, #ffd776, #f56040 45%, #c13584 70%, #6a4cff 100%); }102  .fb { background:#1877F2; }103  .x { background:#0e0e0e; border:1px solid #2a2a2a; }104  .sms { background:#2D73FF; }105 106  .app label { display:block; margin-top:18px; font-size:34px; color:#d7d7d7; }107 108  /* Simple glyphs inside app circles */109  .ig svg, .stories svg, .fb svg, .x svg, .sms svg { width:88px; height:88px; }110  .stories svg { width:92px; height:92px; }111  .fb svg { width:70px; height:70px; }112  .x svg { width:86px; height:86px; }113  .sms svg { width:88px; height:88px; }114 115  /* Bottom home indicator */116  .home-pill {117    position:absolute; left:50%; transform:translateX(-50%);118    bottom:26px; width:360px; height:10px; background:#9aa0a6; opacity:.45; border-radius:8px;119  }120</style>121</head>122<body>123<div id="render-target">124 125  <!-- Status bar -->126  <div class="status-bar">127    <div>6:09</div>128    <div class="status-right">129      <div class="status-dot"></div>130      <div class="status-dot"></div>131      <div>84°</div>132      <div class="status-dot" style="opacity:.6;"></div>133      <div class="battery"><div class="level"></div></div>134    </div>135  </div>136 137  <!-- App Bar -->138  <div class="app-bar">139    <div class="left-group">140      <div class="icon-circle">141        <svg viewBox="0 0 24 24" width="36" height="36">142          <path d="M15.5 19L8.5 12l7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>143        </svg>144      </div>145      <div class="app-title">Item</div>146    </div>147    <div class="right-group">148      <div class="icon-circle">149        <svg viewBox="0 0 24 24" width="36" height="36">150          <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"/>151          <path d="M20 20l-3.5-3.5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>152        </svg>153      </div>154      <div class="icon-circle">155        <svg viewBox="0 0 24 24" width="36" height="36">156          <path d="M7 7h13l-1.5 8H8.5L7 7z" fill="#fff" opacity=".9"/>157          <circle cx="9" cy="20" r="1.6" fill="#fff"/>158          <circle cx="18" cy="20" r="1.6" fill="#fff"/>159        </svg>160      </div>161      <div class="icon-circle">162        <svg viewBox="0 0 24 24" width="36" height="36">163          <path d="M18 8l-6 6-2-2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>164          <path d="M12 4h8v8" stroke="#fff" stroke-width="2" fill="none"/>165        </svg>166      </div>167      <div class="icon-circle">168        <svg viewBox="0 0 24 24" width="6" height="6">169          <circle cx="12" cy="5" r="2" fill="#fff"/>170          <circle cx="12" cy="12" r="2" fill="#fff"/>171          <circle cx="12" cy="19" r="2" fill="#fff"/>172        </svg>173      </div>174    </div>175  </div>176 177  <!-- Background content -->178  <div class="content">179    <div class="book-wrap">180      <div class="book-img">[IMG: Yerma book cover]</div>181      <div class="pager-pill">1 of 1</div>182    </div>183  </div>184 185  <!-- Dim overlay beneath bottom sheet -->186  <div class="dim-overlay"></div>187 188  <!-- Bottom Sheet -->189  <div class="bottom-sheet">190    <div class="drag-handle"></div>191    <div class="sheet-title">Share Listing</div>192 193    <div class="listing-row">194      <div class="thumb">[IMG: Book Thumbnail]</div>195      <div class="listing-name">Yerma by Garcia Lorca, Federico</div>196    </div>197 198    <div class="section-title">Share To</div>199    <div class="share-row">200      <div class="app">201        <div class="circle ig">202          <svg viewBox="0 0 24 24">203            <rect x="4" y="4" width="16" height="16" rx="4" ry="4" fill="none" stroke="#fff" stroke-width="2"/>204            <circle cx="12" cy="12" r="4" fill="none" stroke="#fff" stroke-width="2"/>205            <circle cx="17" cy="7" r="1.2" fill="#fff"/>206          </svg>207        </div>208        <label>Instagram</label>209      </div>210 211      <div class="app">212        <div class="circle stories">213          <svg viewBox="0 0 24 24">214            <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/>215            <path d="M12 8v8M8 12h8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>216          </svg>217        </div>218        <label>Stories</label>219      </div>220 221      <div class="app">222        <div class="circle fb">223          <svg viewBox="0 0 24 24">224            <path d="M14 8h3V5h-3c-2.2 0-4 1.8-4 4v2H8v3h2v6h3v-6h3l1-3h-4V9c0-.6.4-1 1-1z" fill="#fff"/>225          </svg>226        </div>227        <label>Facebook</label>228      </div>229 230      <div class="app">231        <div class="circle x">232          <svg viewBox="0 0 24 24">233            <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>234          </svg>235        </div>236        <label>Twitter</label>237      </div>238 239      <div class="app">240        <div class="circle sms">241          <svg viewBox="0 0 24 24">242            <path d="M4 4h16v11H7l-3 3V4z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>243            <path d="M7 8h10M7 11h7" stroke="#fff" stroke-width="2" stroke-linecap="round"/>244          </svg>245        </div>246        <label>SMS</label>247      </div>248    </div>249 250    <div class="section-title" style="margin-top:50px;">Actions</div>251  </div>252 253  <div class="home-pill"></div>254</div>255</body>256</html>