GD-ML/AndroidCode
13.4k
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; }8 #render-target{9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#000; color:#fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;11 }12 13 /* Top status bar */14 .status{15 height:84px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;16 color:#eaeaea; font-weight:600; letter-spacing:0.5px; font-size:34px;17 }18 .status .icons{ display:flex; gap:26px; align-items:center; }19 .dot{ width:12px; height:12px; background:#fff; border-radius:50%; opacity:.9; }20 .battery{ width:38px; height:20px; border:2px solid #fff; border-radius:4px; position:relative; }21 .battery::after{ content:""; position:absolute; right:-6px; top:5px; width:4px; height:10px; background:#fff; border-radius:1px; }22 .battery .fill{ position:absolute; left:3px; top:3px; height:12px; width:26px; background:#fff; }23 24 /* Title bar */25 .toolbar{26 height:120px; display:flex; align-items:center; padding:0 24px;27 }28 .back{29 width:88px; height:88px; border-radius:44px; background:#131313; display:flex; align-items:center; justify-content:center; margin-right:8px;30 }31 .title{ font-size:56px; font-weight:700; margin-left:10px; }32 .toolbar .actions{ margin-left:auto; display:flex; gap:18px; }33 .circle-btn{34 width:88px; height:88px; border-radius:44px; background:#181818; display:flex; align-items:center; justify-content:center;35 }36 .circle-btn svg{ width:44px; height:44px; fill:#fff; }37 38 /* Sections */39 .section{ padding:24px 32px 0 32px; }40 .section h2{41 font-size:64px; line-height:1.05; margin:10px 0 6px 0; font-weight:800;42 }43 .see-all{44 position:absolute; right:32px; transform:translateY(-80px);45 padding:18px 34px; border:2px solid #3a3a3a; border-radius:50px; color:#f5f5f5; font-size:36px;46 background:transparent;47 }48 .subtle{ color:#b5b5b5; font-size:34px; margin-top:6px; }49 50 /* Cards */51 .cards{ margin-top:26px; display:flex; gap:30px; }52 .card{53 width:320px;54 }55 .thumb{56 position:relative; width:320px; height:260px; background:#E0E0E0; border:1px solid #BDBDBD;57 border-radius:28px; display:flex; align-items:center; justify-content:center; color:#555; font-weight:600;58 }59 .heart{60 position:absolute; right:16px; top:16px; width:70px; height:70px; border-radius:35px; background:#161616; display:flex; align-items:center; justify-content:center; border:2px solid #2c2c2c;61 color:#fff; font-size:38px;62 }63 .card .name{ margin-top:18px; font-size:38px; line-height:1.18; font-weight:700; }64 .price{ font-size:46px; font-weight:800; margin-top:16px; }65 .shipping{ color:#cfcfcf; font-size:32px; margin-top:8px; }66 .sold{ color:#cfcfcf; font-size:32px; margin-top:12px; }67 68 /* Buttons */69 .action-btn{70 width:1016px; margin:26px auto 0 auto; padding:28px 0; border-radius:60px; text-align:center; font-size:48px; font-weight:700;71 border:3px solid #2b5cff; color:#2b5cff; background:transparent;72 }73 74 /* Visually similar */75 .row{ display:flex; gap:20px; margin-top:24px; }76 .mini{77 width:320px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:26px; display:flex; justify-content:center; align-items:center; color:#555; font-weight:600;78 }79 80 /* Bottom navigation */81 .bottom-nav{82 position:absolute; left:0; right:0; bottom:0; height:170px; background:#0f0f0f; border-top:1px solid #1d1d1d;83 display:flex; justify-content:space-around; align-items:center;84 }85 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:8px; color:#e6e6e6; font-size:32px; }86 .nav-icon{87 width:96px; height:96px; border-radius:32px; display:flex; align-items:center; justify-content:center; color:#fff;88 }89 .nav-icon svg{ width:48px; height:48px; fill:#fff; }90 .active{ background:#1939ff; }91 .badge{92 position:absolute; margin-left:52px; margin-top:-10px;93 background:#e74c3c; color:#fff; font-size:28px; width:44px; height:44px; border-radius:22px; display:flex; align-items:center; justify-content:center; font-weight:700;94 border:2px solid #0f0f0f;95 }96</style>97</head>98<body>99<div id="render-target">100 101 <!-- Status bar -->102 <div class="status">103 <div>10:39</div>104 <div class="icons">105 <div class="dot"></div>106 <div class="dot"></div>107 <div class="battery"><div class="fill"></div></div>108 </div>109 </div>110 111 <!-- Title toolbar -->112 <div class="toolbar">113 <div class="back">114 <svg viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5-2 2.2L3.5 12 13.5 2.3z"/></svg>115 </div>116 <div class="title">Item</div>117 <div class="actions">118 <div class="circle-btn">119 <svg viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 5.3-14l1.9-1.9 1.4 1.4-1.9 1.9A8 8 0 0 1 10 18m0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"/></svg>120 </div>121 <div class="circle-btn">122 <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2M7.2 6l.9 2H20v2H8.8l-2.2 6H18v2H6a1 1 0 0 1-1-1l2.6-7L5 2H2V0h3a1 1 0 0 1 .9.6L7.2 6z"/></svg>123 </div>124 <div class="circle-btn">125 <svg viewBox="0 0 24 24"><path d="M18 8l-6-4-6 4v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8zM8 9.3l4-2.7 4 2.7V18H8V9.3z"/></svg>126 </div>127 <div class="circle-btn">128 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4"/></svg>129 </div>130 </div>131 </div>132 133 <!-- Inspired Section -->134 <div class="section">135 <h2>Inspired by your recent views</h2>136 <button class="see-all">See all →</button>137 <div class="subtle">Sponsored</div>138 139 <div class="cards">140 <!-- Card 1 -->141 <div class="card">142 <div class="thumb">[IMG: Adidas trail shoes]143 <div class="heart">❤</div>144 </div>145 <div class="name">Adidas AX2S Men's Trail Running Hiking Sneakers Athletic Shoes</div>146 <div class="price">$79.99</div>147 <div class="shipping">+ shipping</div>148 <div class="sold">92 sold</div>149 </div>150 151 <!-- Card 2 -->152 <div class="card">153 <div class="thumb">[IMG: Wireless mouse + USB receiver]154 <div class="heart">❤</div>155 </div>156 <div class="name">2.4GHz Wireless Optical Mouse & USB Receiver Adjustable DPI for PC</div>157 <div class="price">$8.99</div>158 <div class="shipping">+ US $24.68 shipping • Top Rated Plus</div>159 <div class="sold">14845 sold</div>160 </div>161 162 <!-- Card 3 -->163 <div class="card">164 <div class="thumb">[IMG: Adidas Terrex hiking shoe]165 <div class="heart">❤</div>166 </div>167 <div class="name">Adidas Terrex AX4 Shoes Core Black</div>168 <div class="price">$80.00</div>169 <div class="shipping">+ shipping • Top Rated</div>170 </div>171 </div>172 </div>173 174 <!-- Action buttons -->175 <div style="margin-top:26px;">176 <div class="action-btn">Share</div>177 <div class="action-btn" style="margin-top:26px;">Report this item</div>178 </div>179 180 <!-- Visually similar section -->181 <div class="section" style="margin-top:34px;">182 <h2 style="margin-bottom:0;">Visually similar items</h2>183 <button class="see-all">See all →</button>184 <div class="subtle">Sponsored</div>185 <div class="row" style="margin-top:26px;">186 <div class="mini">[IMG: Similar item 1]</div>187 <div class="mini">[IMG: Similar item 2]</div>188 <div class="mini">[IMG: Similar item 3]</div>189 </div>190 </div>191 192 <!-- Bottom Nav -->193 <div class="bottom-nav">194 <div class="nav-item">195 <div class="nav-icon" style="background:#151515;">196 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/></svg>197 </div>198 <div>Home</div>199 </div>200 <div class="nav-item">201 <div class="nav-icon" style="background:#151515;">202 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5m0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z"/></svg>203 </div>204 <div>My eBay</div>205 </div>206 <div class="nav-item">207 <div class="nav-icon active">208 <svg viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 5.3-14l1.9-1.9 1.4 1.4-1.9 1.9A8 8 0 0 1 10 18m0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"/></svg>209 </div>210 <div>Search</div>211 </div>212 <div class="nav-item" style="position:relative;">213 <div class="nav-icon" style="background:#151515; position:relative;">214 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2m6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>215 </div>216 <div class="badge">1</div>217 <div>Inbox</div>218 </div>219 <div class="nav-item">220 <div class="nav-icon" style="background:#151515;">221 <svg viewBox="0 0 24 24"><path d="M7 18l-3-3 1.4-1.4L7 15.2l11.6-11.6L20 5l-13 13z"/></svg>222 </div>223 <div>Selling</div>224 </div>225 </div>226 227</div>228</body>229</html>