GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #0A0A0A; color: #FFFFFF;11  }12  .status-bar {13    height: 80px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between;14    color: #FFFFFF; font-weight: 600; font-size: 28px;15  }16  .status-icons { display: flex; align-items: center; gap: 24px; }17  .top-appbar {18    height: 120px; padding: 0 28px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid #1E1E1E;19  }20  .title { font-size: 46px; font-weight: 700; }21  .appbar-actions { margin-left: auto; display: flex; align-items: center; gap: 28px; }22  .icon-btn { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; background: #121212; }23  .desc {24    padding: 24px 28px 8px; color: #B9B9B9; font-size: 34px; line-height: 1.3; border-bottom: 1px solid #1E1E1E;25  }26  .section {27    padding: 30px 28px 12px; 28  }29  .section h2 {30    font-size: 54px; margin: 0 0 26px 0; font-weight: 800;31  }32  .row {33    display: flex; align-items: center; padding: 26px 0; border-bottom: 1px solid #1C1C1C;34  }35  .row:last-child { border-bottom: none; }36  .label { width: 260px; color: #BDBDBD; font-size: 34px; }37  .value { flex: 1; font-size: 36px; color: #FFFFFF; }38  .chev { width: 44px; height: 44px; }39  .about h3 { font-size: 54px; margin: 22px 0 12px; }40  .subtext { color: #BDBDBD; font-size: 34px; margin-bottom: 16px; }41  .pill-btn {42    margin: 18px 0; height: 110px; border-radius: 60px; border: 2px solid #4E7BFF;43    display: flex; align-items: center; justify-content: center; color: #7FA6FF; font-size: 40px; font-weight: 700;44  }45  .muted-title { padding: 16px 28px; color: #4E4E4E; font-weight: 800; font-size: 48px; }46  .related h2 { font-size: 52px; margin: 0 0 20px 0; }47  .cards { display: flex; gap: 30px; padding: 10px 28px 0; }48  .card {49    width: 320px; background: #121212; border-radius: 30px; padding: 20px; border: 1px solid #1E1E1E;50  }51  .img {52    width: 100%; height: 280px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 20px;53    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center; padding: 12px;54  }55  .card-title {56    margin-top: 18px; color: #FFFFFF; font-size: 34px; line-height: 1.25;57  }58 59  .bottom-nav {60    position: absolute; bottom: 0; left: 0; right: 0; height: 160px; border-top: 1px solid #1E1E1E;61    background: #0A0A0A; display: flex; align-items: center; justify-content: space-around;62  }63  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #BDBDBD; font-size: 30px; }64  .nav-icon {65    width: 84px; height: 84px; border-radius: 42px; display: flex; align-items: center; justify-content: center;66  }67  .nav-icon.search { background: #0D1E3F; box-shadow: inset 0 0 0 2px #335CFF; }68  .nav-label { font-size: 28px; }69</style>70</head>71<body>72<div id="render-target">73 74  <!-- Status Bar -->75  <div class="status-bar">76    <div>11:57</div>77    <div class="status-icons">78      <!-- Simple small icons -->79      <svg width="32" height="32"><circle cx="16" cy="16" r="12" fill="#FFFFFF"/></svg>80      <svg width="32" height="32"><rect x="6" y="8" width="20" height="16" rx="3" fill="#FFFFFF"/></svg>81      <svg width="32" height="32"><path d="M4 16h24" stroke="#FFFFFF" stroke-width="3"/></svg>82      <div style="display:flex;align-items:center;gap:6px;">83        <svg width="26" height="26"><circle cx="13" cy="13" r="12" stroke="#FFFFFF" stroke-width="3" fill="none"/></svg>84        <span style="font-size:24px;">100%</span>85      </div>86    </div>87  </div>88 89  <!-- App Bar -->90  <div class="top-appbar">91    <!-- Back -->92    <div class="icon-btn">93      <svg width="42" height="42" viewBox="0 0 24 24">94        <path d="M15 18l-6-6 6-6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>95      </svg>96    </div>97    <div class="title">Item</div>98    <div class="appbar-actions">99      <div class="icon-btn">100        <svg width="36" height="36" viewBox="0 0 24 24">101          <circle cx="11" cy="11" r="6" stroke="#FFFFFF" stroke-width="2" fill="none"/>102          <path d="M20 20l-4-4" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>103        </svg>104      </div>105      <div class="icon-btn">106        <svg width="36" height="36" viewBox="0 0 24 24">107          <path d="M6 6h14l-2 10H8L6 6z" stroke="#FFFFFF" stroke-width="2" fill="none"/>108          <circle cx="9" cy="20" r="2" fill="#FFFFFF"/>109          <circle cx="17" cy="20" r="2" fill="#FFFFFF"/>110        </svg>111      </div>112      <div class="icon-btn">113        <svg width="36" height="36" viewBox="0 0 24 24">114          <path d="M4 12a8 8 0 018-8" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>115          <path d="M12 4l0 6 6 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>116        </svg>117      </div>118      <div class="icon-btn">119        <svg width="36" height="36" viewBox="0 0 24 24">120          <circle cx="12" cy="5" r="2" fill="#FFFFFF"/>121          <circle cx="12" cy="12" r="2" fill="#FFFFFF"/>122          <circle cx="12" cy="19" r="2" fill="#FFFFFF"/>123        </svg>124      </div>125    </div>126  </div>127 128  <!-- Short description -->129  <div class="desc">nubuck for a subtly bohemian, autumnal take on our...</div>130 131  <!-- Shipping / returns section -->132  <div class="section">133    <h2>Shipping, returns, and payments</h2>134 135    <div class="row">136      <div class="label">Location</div>137      <div class="value">Hanover, Pennsylvania, United States</div>138      <div class="chev">139        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke="#9AA0A6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>140      </div>141    </div>142 143    <div class="row">144      <div class="label">Returns</div>145      <div class="value">Accepted within 30 days</div>146    </div>147 148    <div class="about">149      <h3>About this seller</h3>150      <div style="display:flex;align-items:center;justify-content:space-between;">151        <div class="subtext">98.6% positive feedback</div>152        <div class="chev">153          <svg width="44" height="44" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" stroke="#9AA0A6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>154        </div>155      </div>156      <div class="pill-btn">Seller's other items</div>157      <div class="pill-btn">Contact seller</div>158    </div>159  </div>160 161  <div class="muted-title">Share Listing</div>162 163  <!-- Related sponsored items -->164  <div class="section related">165    <h2>Related sponsored items</h2>166    <div class="cards">167      <div class="card">168        <div class="img">[IMG: Clarks Wallabee Women's Shoe]</div>169        <div class="card-title">Clarks Womens Originals Wallabee</div>170      </div>171      <div class="card">172        <div class="img">[IMG: Clarks Originals Wallabee Leather Shoe]</div>173        <div class="card-title">Clarks Originals Wallabee Leather</div>174      </div>175      <div class="card">176        <div class="img">[IMG: Clarks Wallabee Leather Cup]</div>177        <div class="card-title">Clarks Wallabee Leather Cup</div>178      </div>179    </div>180  </div>181 182  <!-- Bottom navigation -->183  <div class="bottom-nav">184    <div class="nav-item">185      <div class="nav-icon">186        <svg width="46" height="46" viewBox="0 0 24 24">187          <path d="M4 11l8-6 8 6v7H4v-7z" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round"/>188        </svg>189      </div>190      <div class="nav-label">Home</div>191    </div>192    <div class="nav-item">193      <div class="nav-icon">194        <svg width="46" height="46" viewBox="0 0 24 24">195          <circle cx="12" cy="8" r="4" stroke="#BDBDBD" stroke-width="2" fill="none"/>196          <path d="M4 20c2-4 6-4 8-4s6 0 8 4" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round"/>197        </svg>198      </div>199      <div class="nav-label">My eBay</div>200    </div>201    <div class="nav-item">202      <div class="nav-icon search">203        <svg width="50" height="50" viewBox="0 0 24 24">204          <circle cx="10" cy="10" r="6" stroke="#6FA2FF" stroke-width="2" fill="none"/>205          <path d="M16 16l5 5" stroke="#6FA2FF" stroke-width="2" fill="none" stroke-linecap="round"/>206        </svg>207      </div>208      <div class="nav-label" style="color:#FFFFFF;">Search</div>209    </div>210    <div class="nav-item">211      <div class="nav-icon">212        <svg width="46" height="46" viewBox="0 0 24 24">213          <path d="M12 3l7 6v8a2 2 0 01-2 2H7a2 2 0 01-2-2v-8l7-6z" stroke="#BDBDBD" stroke-width="2" fill="none"/>214          <circle cx="12" cy="17" r="1.5" fill="#BDBDBD"/>215        </svg>216      </div>217      <div class="nav-label">Inbox</div>218    </div>219    <div class="nav-item">220      <div class="nav-icon">221        <svg width="46" height="46" viewBox="0 0 24 24">222          <path d="M6 6h12l-3 12H9L6 6z" stroke="#BDBDBD" stroke-width="2" fill="none"/>223          <path d="M9 10l6 0" stroke="#BDBDBD" stroke-width="2"/>224        </svg>225      </div>226      <div class="nav-label">Selling</div>227    </div>228  </div>229 230</div>231</body>232</html>