GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>About this item - Bottom Sheet</title>7<style>8 :root{9 --bg:#000000;10 --sheet:#1f1f1f;11 --text:#eaeaea;12 --muted:#9aa0a6;13 --link:#d5e7ff;14 --divider:#2b2b2b;15 }16 html, body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }17 #render-target{18 width:1080px; height:2400px;19 position:relative; overflow:hidden;20 background:var(--bg); color:var(--text);21 }22 23 /* Status bar */24 .status-bar{25 position:absolute; top:0; left:0; right:0; height:120px;26 padding:0 36px; display:flex; align-items:center; justify-content:space-between;27 color:#ffffff;28 font-weight:600; font-size:44px;29 }30 .status-right{ display:flex; align-items:center; gap:22px; }31 .dot{ width:10px; height:10px; background:#fff; border-radius:50%; opacity:.85; }32 .ic{ width:54px; height:54px; }33 .ic svg{ width:100%; height:100%; fill:#ffffff; }34 35 /* Background (blurred looking) page content */36 .page-header{37 position:absolute; top:140px; left:36px; right:36px;38 display:flex; align-items:center; gap:24px; color:#ececec;39 opacity:.25;40 }41 .nav-title{ font-size:56px; font-weight:600; }42 .circle-btn{43 width:96px; height:96px; border-radius:48px; background:#2a2a2a;44 display:flex; align-items:center; justify-content:center;45 }46 .bg-title{47 position:absolute; top:340px; left:36px; right:36px;48 font-size:74px; font-weight:800; line-height:1.15; letter-spacing:.2px;49 opacity:.25; color:#ffffff;50 }51 .seller-row{52 position:absolute; top:560px; left:36px; right:36px; display:flex; gap:24px; align-items:center; opacity:.25;53 color:#ffffff;54 }55 .avatar{56 width:96px; height:96px; border-radius:48px; background:#E0E0E0; border:1px solid #BDBDBD;57 display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px;58 }59 60 /* Bottom sheet */61 .sheet{62 position:absolute; left:0; right:0; top:760px; bottom:0;63 background:var(--sheet); border-top-left-radius:34px; border-top-right-radius:34px;64 box-shadow:0 -10px 40px rgba(0,0,0,.55);65 display:flex; flex-direction:column;66 }67 .grabber{68 width:160px; height:10px; border-radius:6px; background:#6e6e6e;69 margin:14px auto 6px auto;70 }71 .sheet-header{72 padding:26px 48px 10px 48px; font-size:60px; font-weight:700;73 }74 .sheet-body{75 position:relative; overflow:auto;76 padding:10px 48px 60px 48px;77 font-size:42px; line-height:1.5;78 }79 80 /* Two-column spec list */81 .specs{82 display:grid; grid-template-columns: 360px 1fr; column-gap:36px; row-gap:32px;83 align-items:start;84 }85 .label{ color:var(--muted); }86 .value{ color:var(--text); }87 .value.link{ color:var(--link); text-decoration:underline; text-underline-offset:6px; }88 .paragraph{89 grid-column: 2 / 3; color:var(--text); margin-bottom:28px;90 }91 .divider{ height:1px; background:var(--divider); margin:24px 0 8px 0; grid-column:1 / -1; }92 93 /* Home indicator */94 .home-indicator{95 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);96 width:320px; height:12px; border-radius:8px; background:#ffffff; opacity:.9;97 }98 99 /* Simple icons */100 .icon svg{ fill:#ffffff; opacity:.9; }101</style>102</head>103<body>104<div id="render-target">105 <!-- Status bar -->106 <div class="status-bar">107 <div>12:41</div>108 <div class="status-right">109 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>110 <div class="ic">111 <svg viewBox="0 0 24 24"><path d="M2 18h2V6H2v12zm4 0h2V9H6v9zm4 0h2V4h-2v14zm4 0h2V12h-2v6zm4 0h2V8h-2v10z"/></svg>112 </div>113 <div class="ic">114 <svg viewBox="0 0 24 24"><path d="M12 3C7 3 2.73 6.11 1 10.5L3 11c1.46-3.5 5-6 9-6s7.54 2.5 9 6l2-.5C21.27 6.11 17 3 12 3zm0 6c-2.33 0-4.31 1.46-5.12 3.5l2.02.5C9.41 11.16 10.62 10 12 10s2.59 1.16 3.1 3l2.02-.5C16.31 10.46 14.33 9 12 9zm0 4c-.83 0-1.5.67-1.5 1.5S11.17 16 12 16s1.5-.67 1.5-1.5S12.83 13 12 13z"/></svg>115 </div>116 <div class="ic">117 <svg viewBox="0 0 24 24"><path d="M16 4h-3V2h-2v2H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H8V6h8v14z"/></svg>118 </div>119 </div>120 </div>121 122 <!-- Dim background content -->123 <div class="page-header">124 <div class="icon">125 <svg width="60" height="60" viewBox="0 0 24 24"><path d="M15.4 7.4L14 6l-6 6 6 6 1.4-1.4L10.8 12z"/></svg>126 </div>127 <div class="nav-title">Item</div>128 <div style="margin-left:auto; display:flex; gap:16px;">129 <div class="circle-btn"><svg width="56" height="56" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></div>130 <div class="circle-btn"><svg width="56" height="56" viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.16 14h9.53c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0021.16 5H6.21L5.27 3H2v2h2l3.6 7.59-1.35 2.44A2 2 0 008 18h12v-2H8.42l.74-1.34z"/></svg></div>131 <div class="circle-btn"><svg width="56" height="56" viewBox="0 0 24 24"><path d="M18 16.08c-1.76 0-3.3.77-4.35 1.97L8.91 14.3c.06-.31.09-.63.09-.95s-.03-.64-.09-.95l4.63-3.74A5.99 5.99 0 0018 7.91c3.31 0 6 2.69 6 6s-2.69 6-6 6zm-12 0C2.69 16.08 0 13.39 0 10.08s2.69-6 6-6c1.76 0 3.3.77 4.35 1.97l-4.63 3.74c-.06.31-.09.63-.09.95s.03.64.09.95l4.63 3.74A5.99 5.99 0 016 16.08z"/></svg></div>132 <div class="circle-btn"><svg width="56" height="56" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg></div>133 </div>134 </div>135 <div class="bg-title">Strong Suction, 4400mAh,Black</div>136 <div class="seller-row">137 <div class="avatar">[IMG: Seller Avatar]</div>138 <div style="font-size:44px;">xpectmoreforless (435400)</div>139 </div>140 141 <!-- Bottom sheet -->142 <section class="sheet" aria-label="About this item">143 <div class="grabber"></div>144 <div class="sheet-header">About this item</div>145 <div class="sheet-body">146 <div class="specs">147 <div class="paragraph">148 same as what is found in a retail store, unless the item is handmade or was packaged by the manufacturer in non-retail packaging, such as an unprinted box or plastic bag. See the seller's listing for full details.149 </div>150 151 <div class="label">Quantity</div>152 <div class="value">1 available</div>153 154 <div class="label">Item Number</div>155 <div class="value link">134742755024</div>156 157 <div class="label">Features</div>158 <div class="value">Easy Clean</div>159 160 <div class="label">Item Width</div>161 <div class="value">12 in</div>162 163 <div class="label">Item Length</div>164 <div class="value">12</div>165 166 <div class="label">Item Height</div>167 <div class="value">3</div>168 169 <div class="label">Size</div>170 <div class="value">12*12*3 In</div>171 172 <div class="label">Shape</div>173 <div class="value">Round</div>174 175 <div class="label">Item Weight</div>176 <div class="value">5 lb</div>177 178 <div class="label">Brand</div>179 <div class="value">FDW</div>180 181 <div class="label">Color</div>182 <div class="value">Black</div>183 184 <div class="label">Type</div>185 <div class="value">Robot Vacuum</div>186 187 <div class="label">UPC</div>188 <div class="value link">195030055240</div>189 190 <div class="label">Category</div>191 <div class="value">192 Home & Garden > Kitchen, Dining & Bar > Kitchen Storage & Organization > Racks & Holders193 </div>194 195 <div class="label">Item Ending</div>196 <div class="value">3d 9h</div>197 </div>198 </div>199 </section>200 201 <div class="home-indicator"></div>202</div>203</body>204</html>