GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render - Item Details Bottom Sheet</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #000;12 color: #fff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; width: 100%; height: 120px;18 padding: 0 40px;19 display: flex; align-items: center; justify-content: space-between;20 color: #E6E6E6; font-size: 36px; letter-spacing: 0.3px;21 }22 .status-right { display: flex; align-items: center; gap: 26px; }23 .sb-icon {24 width: 36px; height: 36px; border-radius: 50%;25 border: 2px solid #BDBDBD;26 }27 .battery {28 display: flex; align-items: center; gap: 10px; color: #E6E6E6; font-size: 30px;29 }30 .battery-box {31 width: 48px; height: 26px; border: 3px solid #BDBDBD; border-radius: 6px; position: relative;32 }33 .battery-box::after {34 content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 10px; background: #BDBDBD; border-radius: 2px;35 }36 .battery-charge { width: 70px; text-align: right; }37 38 /* App bar */39 .appbar {40 position: absolute; top: 120px; left: 0; width: 100%; height: 140px;41 display: flex; align-items: center; justify-content: space-between;42 padding: 0 40px;43 }44 .app-left { display: flex; align-items: center; gap: 24px; }45 .app-title { font-size: 52px; font-weight: 600; color: #EDEDED; }46 .circle-icon {47 width: 96px; height: 96px; border-radius: 48px;48 background: rgba(255,255,255,0.04);49 display: flex; align-items: center; justify-content: center;50 }51 .app-right { display: flex; align-items: center; gap: 18px; }52 53 .app-shadow-box {54 position: absolute; top: 290px; left: 40px; right: 40px; height: 130px;55 border: 1px solid rgba(255,255,255,0.08);56 border-radius: 18px;57 color: rgba(255,255,255,0.6);58 display: flex; align-items: center; padding: 0 30px; font-size: 38px;59 }60 61 /* Bottom sheet */62 .sheet {63 position: absolute; left: 0; right: 0; top: 500px; bottom: 150px;64 background: #1c1c1c; border-top-left-radius: 48px; border-top-right-radius: 48px;65 box-shadow: 0 -30px 60px rgba(0,0,0,0.6);66 padding: 34px 60px 80px 60px;67 }68 .handle {69 width: 140px; height: 12px; border-radius: 6px; background: #5a5a5a;70 margin: 16px auto 24px auto;71 }72 .sheet h2 {73 margin: 24px 0 30px 0;74 font-size: 56px; font-weight: 700; color: #F3F3F3;75 }76 .details { margin-top: 10px; }77 .row {78 display: flex; align-items: flex-start; gap: 34px;79 padding: 18px 0;80 }81 .label {82 width: 360px; color: #9E9E9E; font-size: 38px;83 }84 .value {85 flex: 1; color: #F5F5F5; font-size: 38px; line-height: 1.45;86 }87 .value.small { color: #BDBDBD; font-size: 34px; }88 .value .pink { color: #ff648b; font-weight: 600; }89 .link { color: #F5F5F5; text-decoration: underline; }90 /* Bottom home indicator */91 .home-indicator {92 position: absolute; left: 50%; transform: translateX(-50%);93 bottom: 40px; width: 360px; height: 18px; background: #EDEDED; border-radius: 9px; opacity: 0.85;94 }95 96 /* SVG icon styles */97 svg { display: block; }98 .icon { width: 48px; height: 48px; stroke: #EDEDED; fill: none; stroke-width: 3.2; }99 .icon-fill { fill: #EDEDED; stroke: none; }100</style>101</head>102<body>103<div id="render-target">104 105 <!-- Status Bar -->106 <div class="status-bar">107 <div class="time">11:03</div>108 <div class="status-right">109 <div class="sb-icon"></div>110 <div class="sb-icon"></div>111 <div class="sb-icon"></div>112 <div class="battery">113 <div class="battery-box"></div>114 <div class="battery-charge">100%</div>115 </div>116 </div>117 </div>118 119 <!-- App Bar -->120 <div class="appbar">121 <div class="app-left">122 <div class="circle-icon">123 <svg class="icon" viewBox="0 0 24 24">124 <path d="M15 18L9 12l6-6" />125 </svg>126 </div>127 <div class="app-title">Item</div>128 </div>129 <div class="app-right">130 <div class="circle-icon">131 <svg class="icon" viewBox="0 0 24 24">132 <circle cx="11" cy="11" r="6"/>133 <path d="M20 20l-4.5-4.5"/>134 </svg>135 </div>136 <div class="circle-icon">137 <svg class="icon" viewBox="0 0 24 24">138 <path d="M3 6h18" />139 <path d="M7 6l2 9h8l2-7H6" />140 <circle cx="9" cy="19" r="2" class="icon-fill"/>141 <circle cx="17" cy="19" r="2" class="icon-fill"/>142 </svg>143 </div>144 <div class="circle-icon">145 <svg class="icon" viewBox="0 0 24 24">146 <circle cx="6" cy="12" r="2" class="icon-fill"/>147 <circle cx="18" cy="6" r="2" class="icon-fill"/>148 <circle cx="18" cy="18" r="2" class="icon-fill"/>149 <path d="M8 12l8-6M8 12l8 6" />150 </svg>151 </div>152 <div class="circle-icon">153 <svg class="icon" viewBox="0 0 24 24">154 <circle cx="12" cy="5" r="2" class="icon-fill"/>155 <circle cx="12" cy="12" r="2" class="icon-fill"/>156 <circle cx="12" cy="19" r="2" class="icon-fill"/>157 </svg>158 </div>159 </div>160 </div>161 162 <!-- Faint Quantity field behind sheet -->163 <div class="app-shadow-box">Quantity: 1</div>164 165 <!-- Bottom Sheet -->166 <div class="sheet">167 <div class="handle"></div>168 <h2>About this item</h2>169 170 <div class="details">171 <div class="row">172 <div class="label">Condition</div>173 <div class="value">174 New with box. A brand-new, unused, and unworn item (including handmade items) in the original packaging (such as the original box or bag) and/or with the original tags attached.175 </div>176 </div>177 178 <div class="row">179 <div class="label">Quantity</div>180 <div class="value">181 <div class="pink">Almost gone</div>182 <div class="value small">80 sold</div>183 </div>184 </div>185 186 <div class="row">187 <div class="label">Item Number</div>188 <div class="value"><span class="link">155608186658</span></div>189 </div>190 191 <div class="row">192 <div class="label">Brand</div>193 <div class="value">Originals</div>194 </div>195 196 <div class="row">197 <div class="label">Style</div>198 <div class="value">Womens Originals Icon Shoes</div>199 </div>200 201 <div class="row">202 <div class="label">Color</div>203 <div class="value">Brown</div>204 </div>205 206 <div class="row">207 <div class="label">Department</div>208 <div class="value">Women</div>209 </div>210 211 <div class="row">212 <div class="label">Type</div>213 <div class="value">Shoes</div>214 </div>215 216 <div class="row">217 <div class="label">Upper Material</div>218 <div class="value">Nubuck</div>219 </div>220 221 <div class="row">222 <div class="label">Lining Material</div>223 <div class="value">Unlined</div>224 </div>225 226 <div class="row">227 <div class="label">Shoe Width</div>228 <div class="value">Medium</div>229 </div>230 231 <div class="row">232 <div class="label">Outsole Material</div>233 <div class="value">Crepe</div>234 </div>235 236 <div class="row">237 <div class="label">Heel Height</div>238 <div class="value">1 1/4 in</div>239 </div>240 241 <div class="row">242 <div class="label">MPN</div>243 <div class="value"><span class="link">400015</span></div>244 </div>245 246 <div class="row">247 <div class="label">Category</div>248 <div class="value">249 Clothing, Shoes & Accessories > Women > Women's Shoes > Comfort Shoes250 </div>251 </div>252 </div>253 </div>254 255 <!-- Home indicator -->256 <div class="home-indicator"></div>257</div>258</body>259</html>