GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Item</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#000000; color:#ffffff;11 }12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; right:0;15 height:90px; padding:0 28px;16 display:flex; align-items:center; justify-content:space-between;17 color:#bdbdbd; font-size:36px;18 }19 .status-right { display:flex; gap:28px; align-items:center; }20 .dot { width:16px; height:16px; background:#bdbdbd; border-radius:50%; display:inline-block; }21 /* Header */22 .header {23 position:absolute; top:90px; left:0; right:0; height:120px;24 display:flex; align-items:center;25 padding:0 28px;26 }27 .back-btn {28 width:90px; height:90px; display:flex; align-items:center; justify-content:center;29 }30 .header h1 { margin:0 0 0 12px; font-size:64px; font-weight:700; letter-spacing:.5px; }31 .circle-icons {32 position:absolute; right:24px; top:150px;33 display:flex; gap:24px;34 }35 .circle {36 width:96px; height:96px; border-radius:50%;37 background:#1e1e1e; display:flex; align-items:center; justify-content:center;38 border:1px solid #2e2e2e;39 }40 41 /* Image area */42 .image-wrap {43 position:absolute; top:260px; left:0; right:0;44 display:flex; justify-content:center;45 }46 .book-image {47 width:820px; height:1180px;48 background:#E0E0E0; border:1px solid #BDBDBD;49 display:flex; align-items:center; justify-content:center;50 color:#555; font-size:40px; text-align:center; padding:20px;51 }52 .badge {53 position:absolute; right:40px; top:360px;54 background:#2a2a2a; color:#ddd; border-radius:40px;55 padding:16px 28px; font-size:38px; border:1px solid #3a3a3a;56 }57 .fav {58 position:absolute; right:40px; top:1400px;59 width:140px; height:140px; border-radius:50%;60 background:#1f1f1f; border:1px solid #2f2f2f;61 display:flex; align-items:center; justify-content:center;62 }63 64 /* Details */65 .details {66 position:absolute; top:1490px; left:28px; right:28px;67 }68 .title {69 font-size:64px; font-weight:800; line-height:1.1; margin-bottom:14px;70 }71 .subtitle {72 color:#bfbfbf; font-size:40px; margin-bottom:36px;73 }74 .seller {75 display:flex; align-items:flex-start; gap:26px; margin-bottom:18px;76 }77 .seller .logo {78 width:90px; height:90px; border-radius:18px; background:#1f403f;79 display:flex; align-items:center; justify-content:center; color:#b8fff1; font-weight:700;80 border:1px solid #376b68; font-size:28px;81 }82 .seller .texts .name { font-size:42px; color:#fff; }83 .seller .texts .rating { font-size:36px; color:#bdbdbd; margin-top:6px; }84 85 .price {86 font-size:72px; font-weight:800; margin-top:20px;87 }88 .shipping {89 color:#bdbdbd; font-size:44px; margin-left:12px; font-weight:600;90 }91 .delivery {92 margin-top:30px; font-size:42px; color:#dcdcdc;93 }94 95 /* Bottom nav */96 .bottom-nav {97 position:absolute; bottom:0; left:0; right:0; height:180px;98 background:#0d0d0d; border-top:1px solid #242424;99 display:flex; align-items:center; justify-content:space-around;100 }101 .nav-item {102 display:flex; flex-direction:column; align-items:center; gap:14px; color:#bdbdbd; font-size:32px;103 }104 .nav-item .icon {105 width:96px; height:96px; border-radius:24px; display:flex; align-items:center; justify-content:center;106 }107 .nav-item.active { color:#fff; }108 .nav-item.active .icon { background:#1e2a36; }109</style>110</head>111<body>112<div id="render-target">113 114 <!-- Status bar -->115 <div class="status-bar">116 <div>6:10</div>117 <div class="status-right">118 <span class="dot"></span>119 <span class="dot"></span>120 <span>84°</span>121 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M17 18H7a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h3l1-1h2l1 1h3a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3z"/></svg>122 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M20 8V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v1H3v8h18V8h-1zM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1H6V7z"/></svg>123 </div>124 </div>125 126 <!-- Header -->127 <div class="header">128 <div class="back-btn">129 <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffffff"><path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12l10-9 1.5 1.5z"/></svg>130 </div>131 <h1>Item</h1>132 </div>133 134 <!-- Top right circular icons -->135 <div class="circle-icons">136 <div class="circle">137 <svg width="46" height="46" viewBox="0 0 24 24" fill="#e6e6e6"><path d="m21 20-5.2-5.2a7 7 0 1 0-1.4 1.4L20 21l1-1zM5 10a5 5 0 1 1 10 0 5 5 0 0 1-10 0z"/></svg>138 </div>139 <div class="circle">140 <svg width="46" height="46" viewBox="0 0 24 24" fill="#e6e6e6"><path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0-.001 4A2 2 0 0 0 17 18zM6 6h14l-2 7H8L6 6zm-2 0H2V4h3l2.8 9.4A3 3 0 0 0 10.7 15H19v2H10.7a5 5 0 0 1-4.8-3.5L4 6z"/></svg>141 </div>142 <div class="circle">143 <svg width="46" height="46" viewBox="0 0 24 24" fill="#e6e6e6"><path d="M19 8v8l-5-4 5-4zM5 6h8v2H5V6zm0 5h8v2H5v-2zm0 5h8v2H5v-2z"/></svg>144 </div>145 <div class="circle">146 <svg width="46" height="46" viewBox="0 0 24 24" fill="#e6e6e6"><path d="M12 13a1 1 0 0 1-.7-.3l-7-7L5.7 4 12 10.3 18.3 4l1.4 1.7-7 7a1 1 0 0 1-.7.3zM5 20h14v-2H5v2z"/></svg>147 </div>148 </div>149 150 <!-- Image -->151 <div class="image-wrap">152 <div class="book-image">[IMG: Book cover - "Yerma" by Federico García Lorca (Cátedra)]</div>153 </div>154 155 <!-- Overlay count badge -->156 <div class="badge">1 of 1</div>157 158 <!-- Favorite circle -->159 <div class="fav">160 <svg width="70" height="70" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 5.65-7 10-7 10z"/></svg>161 </div>162 163 <!-- Details -->164 <div class="details">165 <div class="title">Yerma by Garcia Lorca, Federico</div>166 <div class="subtitle">by Garcia Lorca, Federico | PB | Good</div>167 168 <div class="seller">169 <div class="logo">TB</div>170 <div class="texts">171 <div class="name">thrift.books (3379808)</div>172 <div class="rating">99.2% positive feedback</div>173 </div>174 <svg width="48" height="48" viewBox="0 0 24 24" fill="#bdbdbd" style="margin-left:auto; align-self:center;"><path d="m9 18-6-6 6-6 1.4 1.4L6.8 11H21v2H6.8l3.6 3.6L9 18z"/></svg>175 </div>176 177 <div class="price">$4.83 <span class="shipping">+ $4.20 shipping</span></div>178 <div class="delivery">Est. delivery Wed, Oct 18 - Tue, Nov 7</div>179 </div>180 181 <!-- Bottom navigation -->182 <div class="bottom-nav">183 <div class="nav-item">184 <div class="icon">185 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 3 3 10h2v10h6V14h2v6h6V10h2L12 3z"/></svg>186 </div>187 <div>Home</div>188 </div>189 <div class="nav-item">190 <div class="icon">191 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-8 9a8 8 0 1 1 16 0H4z"/></svg>192 </div>193 <div>My eBay</div>194 </div>195 <div class="nav-item active">196 <div class="icon">197 <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff"><path d="m21 20-5.2-5.2a7 7 0 1 0-1.4 1.4L20 21l1-1zM5 10a5 5 0 1 1 10 0 5 5 0 0 1-10 0z"/></svg>198 </div>199 <div>Search</div>200 </div>201 <div class="nav-item">202 <div class="icon">203 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7L4 18v2h16v-2l-2-2z"/></svg>204 </div>205 <div>Inbox</div>206 </div>207 <div class="nav-item">208 <div class="icon">209 <svg width="44" height="44" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M7 7h10v2H7V7zm0 4h10v2H7v-2zm0 4h10v2H7v-2zM4 3h16v2H4V3zm0 16h16v2H4v-2z"/></svg>210 </div>211 <div>Selling</div>212 </div>213 </div>214 215</div>216</body>217</html>