GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Product Page</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px; position: relative; overflow: hidden;9 background: #ffffff; color: #111;10 }11 .status-bar {12 height: 60px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;13 font-size: 26px; color: #555;14 }15 .topbar {16 display: flex; align-items: center; padding: 14px 24px 10px 24px; gap: 16px;17 }18 .icon-btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }19 .search-box {20 flex: 1; height: 88px; border-radius: 44px; background: #f2f2f4; position: relative; display: flex; align-items: center;21 padding: 0 28px 0 84px; border: 1px solid #e7e7ea; color: #333; font-size: 34px;22 }23 .search-box .placeholder { color: #7c7c7c; }24 .search-icon {25 position: absolute; left: 26px; top: 50%; transform: translateY(-50%);26 width: 44px; height: 44px; color: #7c7c7c;27 }28 .tabs {29 display: flex; gap: 34px; padding: 12px 28px 0 28px; font-size: 36px; color: #666;30 }31 .tab { padding: 22px 10px; position: relative; }32 .tab.active { color: #111; font-weight: 600; }33 .tab.active::after {34 content: ""; position: absolute; left: 0; right: 0; bottom: 0;35 height: 6px; border-radius: 3px; background: #111;36 }37 .divider { height: 1px; background: #ececec; margin: 8px 0 10px; }38 .section { padding: 24px 28px; }39 .title { font-size: 44px; font-weight: 700; margin-bottom: 18px; }40 .muted { color: #6b6b6b; font-size: 34px; }41 .store-title { font-size: 44px; font-weight: 800; margin: 34px 0 14px; }42 .rating-summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 0 24px; }43 .rating-summary .big { font-size: 86px; font-weight: 800; }44 .rating-summary .outof { font-size: 40px; color: #777; }45 .rating-summary .tag { font-size: 40px; color: #222; margin-left: 10px; }46 .metric { display: flex; align-items: center; margin: 28px 0; gap: 24px; }47 .metric .label { width: 380px; font-size: 38px; color: #333; }48 .bar-wrap { flex: 1; display: flex; align-items: center; gap: 20px; }49 .bar {50 height: 16px; background: #e9e9ec; border-radius: 10px; width: 520px; position: relative; overflow: hidden;51 }52 .bar .fill { height: 100%; background: #f37b29; border-radius: 10px; }53 .metric .num { width: 80px; text-align: right; font-size: 36px; color: #444; }54 .pill-btn {55 margin: 36px auto; width: calc(100% - 56px); height: 112px; border-radius: 56px; border: 2px solid #cfcfd3;56 display: flex; align-items: center; justify-content: center; font-size: 40px; color: #111; background: #fff;57 }58 .row-link {59 display: flex; align-items: center; justify-content: space-between; padding: 26px 0; border-top: 1px solid #efefef;60 }61 .row-link .row-title { font-size: 44px; font-weight: 800; }62 .row-sub { color: #555; font-size: 34px; margin-top: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }63 .chev {64 width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #777;65 }66 .seller-card {67 margin-top: 24px;68 background: linear-gradient(180deg, #f7f7f9, #ffffff);69 border-top: 1px solid #eee;70 padding: 28px;71 }72 .seller-name { font-size: 54px; font-weight: 800; line-height: 1.12; }73 .badge-row { display: flex; align-items: center; gap: 16px; margin-top: 18px; }74 .flag { width: 54px; height: 36px; background: #cf2b2b; color: #fff; font-size: 24px;75 display: flex; align-items: center; justify-content: center; border-radius: 4px; }76 .pill { padding: 8px 16px; background: #eef2f7; color: #2d6cdf; border-radius: 14px; font-size: 28px; }77 .role { color: #1c4a9a; font-size: 38px; }78 .bottom-bar {79 position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px 28px;80 background: #fff; border-top: 1px solid #eaeaea; display: flex; align-items: center; gap: 20px;81 }82 .mini { width: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }83 .mini .mini-ic { width: 78px; height: 60px; border: 1px solid #d7d7dc; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #666; }84 .mini span { font-size: 28px; color: #333; }85 .cta { flex: 1; height: 120px; border-radius: 60px; border: 2px solid #d8d8dd; background: #fff; color: #111; font-size: 40px;86 display: flex; align-items: center; justify-content: center; }87 .cta.primary { background: #f37321; color: #fff; border-color: #f37321; }88 /* simple svg icon color style */89 svg { display: block; }90</style>91</head>92<body>93<div id="render-target">94 95 <!-- Status bar -->96 <div class="status-bar">97 <div>8:53</div>98 <div style="display:flex; gap:18px; align-items:center;">99 <div style="width:16px;height:16px;border-radius:50%;background:#9e9e9e;"></div>100 <div style="width:16px;height:16px;border-radius:50%;background:#9e9e9e;"></div>101 <div style="width:16px;height:16px;border-radius:50%;background:#9e9e9e;"></div>102 <div style="width:34px;height:22px;border:2px solid #666;border-radius:4px; position: relative;">103 <div style="position:absolute; right:-6px; top:6px; width:6px; height:10px; background:#666;"></div>104 </div>105 </div>106 </div>107 108 <!-- Search / top bar -->109 <div class="topbar">110 <div class="icon-btn">111 <svg width="36" height="36" viewBox="0 0 24 24">112 <path d="M15 18l-6-6 6-6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>113 </svg>114 </div>115 116 <div class="search-box">117 <div class="search-icon">118 <svg width="44" height="44" viewBox="0 0 24 24">119 <circle cx="11" cy="11" r="7" stroke="#7c7c7c" stroke-width="2" fill="none"></circle>120 <path d="M20 20l-3.2-3.2" stroke="#7c7c7c" stroke-width="2" stroke-linecap="round"/>121 </svg>122 </div>123 <span class="placeholder">iphone</span>124 </div>125 126 <div class="icon-btn">127 <svg width="44" height="44" viewBox="0 0 24 24">128 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#111" stroke-width="2"></rect>129 <circle cx="8" cy="12" r="2" fill="#111"></circle>130 <circle cx="16" cy="12" r="2" fill="#111"></circle>131 </svg>132 </div>133 <div class="icon-btn">134 <svg width="44" height="44" viewBox="0 0 24 24">135 <path d="M6 6h12l-1.5 9h-9L6 6z" fill="none" stroke="#111" stroke-width="2"></path>136 <circle cx="9" cy="20" r="1.6" fill="#111"></circle>137 <circle cx="16" cy="20" r="1.6" fill="#111"></circle>138 </svg>139 </div>140 <div class="icon-btn">141 <svg width="36" height="36" viewBox="0 0 24 24">142 <circle cx="12" cy="5" r="2" fill="#111"></circle>143 <circle cx="12" cy="12" r="2" fill="#111"></circle>144 <circle cx="12" cy="19" r="2" fill="#111"></circle>145 </svg>146 </div>147 </div>148 149 <!-- Tabs -->150 <div class="tabs">151 <div class="tab active">Overview</div>152 <div class="tab">Details</div>153 <div class="tab">Recommended</div>154 </div>155 <div class="divider"></div>156 157 <!-- Product reviews -->158 <div class="section">159 <div class="title">Product reviews</div>160 <div class="muted">No product reviews yet. See store reviews.</div>161 162 <div class="store-title">Store reviews</div>163 164 <div class="rating-summary">165 <div class="big">4.2</div>166 <div class="outof">/5.0</div>167 <div class="tag">Satisfied</div>168 </div>169 170 <div class="metric">171 <div class="label">Product quality</div>172 <div class="bar-wrap">173 <div class="bar"><div class="fill" style="width: 74%;"></div></div>174 <div class="num">3.7</div>175 </div>176 </div>177 <div class="metric">178 <div class="label">Supplier service</div>179 <div class="bar-wrap">180 <div class="bar"><div class="fill" style="width: 88%;"></div></div>181 <div class="num">4.4</div>182 </div>183 </div>184 <div class="metric">185 <div class="label">On-time shipment</div>186 <div class="bar-wrap">187 <div class="bar"><div class="fill" style="width: 88%;"></div></div>188 <div class="num">4.4</div>189 </div>190 </div>191 192 <div class="pill-btn">See all reviews</div>193 194 <div class="row-link">195 <div>196 <div class="row-title">Customization options</div>197 <div class="row-sub">Customized logo; Graphic customization; Customized pa...</div>198 </div>199 <div class="chev">200 <svg width="28" height="28" viewBox="0 0 24 24">201 <path d="M9 6l6 6-6 6" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>202 </svg>203 </div>204 </div>205 </div>206 207 <!-- Seller card -->208 <div class="seller-card">209 <div class="seller-name">Hangzhou Duoaike<br>Technology Co., Ltd.</div>210 <div class="badge-row">211 <div class="flag">CN</div>212 <div class="pill">1 YR</div>213 <div class="role">Trading Company</div>214 </div>215 </div>216 217 <!-- bottom safe area spacer -->218 <div style="height: 280px;"></div>219 220 <!-- Bottom action bar -->221 <div class="bottom-bar">222 <div class="mini">223 <div class="mini-ic">224 <svg width="32" height="32" viewBox="0 0 24 24">225 <path d="M4 5h16v10l-5-3H4z" fill="none" stroke="#666" stroke-width="2"></path>226 </svg>227 </div>228 <span>Chat now</span>229 </div>230 <div class="mini">231 <div class="mini-ic">232 <svg width="32" height="32" viewBox="0 0 24 24">233 <path d="M4 4h16v12H7l-3 4z" fill="none" stroke="#666" stroke-width="2"></path>234 </svg>235 </div>236 <span>Send inquiry</span>237 </div>238 239 <div class="cta">Add to cart</div>240 <div class="cta primary" style="width: 420px;">Start order</div>241 </div>242 243</div>244</body>245</html>