GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Item - Dark UI</title>6<style>7 :root{8 --bg:#000000;9 --text:#FFFFFF;10 --muted:#9E9E9E;11 --card:#121212;12 --line:#2A2A2A;13 --blue:#76A6FF;14 --blue2:#3D6BFF;15 --pill:#7FA9FF;16 --outline:#5187FF;17 --accent-pink:#FF5C86;18 }19 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }20 #render-target{21 width:1080px; height:2400px; position:relative; overflow:hidden;22 background:var(--bg); color:var(--text);23 }24 25 /* Top app bar */26 .appbar{ height:140px; padding:0 36px; display:flex; align-items:center; gap:24px; }27 .appbar-title{ font-weight:600; font-size:48px; margin-left:12px; }28 .circle-btn{ width:92px; height:92px; border-radius:46px; background:#1E1E1E; display:flex; align-items:center; justify-content:center; }29 .appbar-right{ margin-left:auto; display:flex; gap:18px; }30 31 /* Content area */32 .content{ padding:0 36px; }33 .price{ font-size:96px; font-weight:800; letter-spacing:-1px; margin-top:8px; }34 .shipping{ font-size:42px; color:#BDBDBD; margin-left:12px; font-weight:500; }35 .delivery{ font-size:44px; color:#D9D9D9; margin-top:18px; }36 .delivery strong{ color:#FFFFFF; font-weight:800; }37 .row{ display:flex; align-items:center; gap:18px; margin-top:26px; }38 .label{ color:#9E9E9E; font-size:40px; }39 .value{ font-size:44px; font-weight:600; }40 .info{ width:44px; height:44px; border-radius:22px; border:2px solid #3A3A3A; display:flex; align-items:center; justify-content:center; color:#BDBDBD; font-size:28px; }41 42 /* Select boxes */43 .select{ margin-top:26px; border:2px solid var(--line); border-radius:26px; padding:36px; display:flex; justify-content:space-between; align-items:center; background:#0E0E0E; }44 .select .text{ font-size:44px; color:#DADADA; }45 .select .text .val{ color:#FFFFFF; font-weight:800; }46 .chev{ width:40px; height:40px; }47 .chev svg{ width:40px; height:40px; fill:#9E9E9E; }48 49 /* Buttons */50 .btn-primary{ margin-top:52px; width:100%; height:128px; background:var(--pill); border-radius:64px; display:flex; align-items:center; justify-content:center; font-size:52px; font-weight:800; color:#0A1733; }51 .btn-outline{ margin-top:24px; width:100%; height:124px; border-radius:62px; border:3px solid var(--outline); display:flex; align-items:center; justify-content:center; font-size:50px; font-weight:700; color:var(--outline); background:transparent; }52 .btn-outline .icon{ margin-right:18px; }53 54 /* Trending banner */55 .banner{ margin:38px 0 18px; background:#1C1C1C; border-radius:28px; padding:30px; display:flex; align-items:center; gap:26px; }56 .bolt{ width:80px; height:80px; border-radius:40px; background:#0F0F0F; display:flex; align-items:center; justify-content:center; border:2px solid #2D2D2D; }57 .banner-text{ font-size:44px; }58 .banner-text strong{ font-weight:900; }59 .banner-text .muted{ color:#D0D0D0; }60 61 /* Section */62 .section-title{ font-size:64px; font-weight:800; margin:36px 0 18px; }63 .kv{ display:flex; justify-content:space-between; padding:28px 0; border-bottom:2px solid #141414; }64 .kv .k{ color:#B5B5B5; font-size:42px; }65 .kv .v{ font-size:44px; font-weight:700; }66 .kv .v.pink{ color:var(--accent-pink); }67 68 /* Bottom nav */69 .bottom-nav{ position:absolute; bottom:60px; left:0; right:0; height:180px; background:#101010; border-top:2px solid #1F1F1F; display:flex; justify-content:space-around; align-items:center; }70 .nav-item{ display:flex; flex-direction:column; align-items:center; color:#D0D0D0; font-size:36px; }71 .nav-item .icon{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius:36px; }72 .nav-item.active .icon{ background:#142344; }73 .nav-item.active .label{ color:#76A6FF; }74 .label{ margin-top:12px; }75 76 /* Image placeholder (partial thumb near top) */77 .thumb{ width:160px; height:160px; border-radius:80px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; position:absolute; top:210px; left:36px; overflow:hidden; }78</style>79</head>80<body>81<div id="render-target">82 83 <!-- App Bar -->84 <div class="appbar">85 <div class="circle-btn" aria-label="Back">86 <svg viewBox="0 0 24 24" width="44" height="44">87 <path d="M15 6L9 12l6 6" stroke="#FFFFFF" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>88 </svg>89 </div>90 <div class="appbar-title">Item</div>91 <div class="appbar-right">92 <div class="circle-btn" aria-label="Search">93 <svg viewBox="0 0 24 24" width="44" height="44">94 <circle cx="11" cy="11" r="6.5" stroke="#FFFFFF" stroke-width="2.5" fill="none"/>95 <path d="M17 17l4 4" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>96 </svg>97 </div>98 <div class="circle-btn" aria-label="Cart">99 <svg viewBox="0 0 24 24" width="44" height="44">100 <path d="M3 5h2l2 12h10l2-9H7" stroke="#FFFFFF" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>101 <circle cx="9" cy="20" r="1.8" fill="#FFFFFF"/>102 <circle cx="17" cy="20" r="1.8" fill="#FFFFFF"/>103 </svg>104 </div>105 <div class="circle-btn" aria-label="Share">106 <svg viewBox="0 0 24 24" width="44" height="44">107 <circle cx="6" cy="12" r="2.2" fill="#FFFFFF"/>108 <circle cx="18" cy="6" r="2.2" fill="#FFFFFF"/>109 <circle cx="18" cy="18" r="2.2" fill="#FFFFFF"/>110 <path d="M8 12l8-6M8 12l8 6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>111 </svg>112 </div>113 <div class="circle-btn" aria-label="More">114 <svg viewBox="0 0 24 24" width="44" height="44">115 <circle cx="5" cy="12" r="2" fill="#FFFFFF"/>116 <circle cx="12" cy="12" r="2" fill="#FFFFFF"/>117 <circle cx="19" cy="12" r="2" fill="#FFFFFF"/>118 </svg>119 </div>120 </div>121 </div>122 123 <!-- Small product thumb hint -->124 <div class="thumb">[IMG: Product Photo]</div>125 126 <div class="content" style="margin-top:110px;">127 <div style="display:flex; align-items:flex-end;">128 <div class="price">$100.00</div>129 <div class="shipping">+ $86.12 shipping</div>130 </div>131 132 <div class="delivery">Est. delivery <strong>Tue, Dec 26 - Thu, Jan 11</strong></div>133 134 <div class="row">135 <div class="label">Condition</div>136 <div class="value">New with box</div>137 <div class="info">i</div>138 </div>139 140 <!-- Selects -->141 <div class="select">142 <div class="text">US Shoe Size: <span class="val">9</span></div>143 <div class="chev">144 <svg viewBox="0 0 24 24">145 <path d="M6 9l6 6 6-6" fill="none" stroke="#9E9E9E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>146 </svg>147 </div>148 </div>149 150 <div class="select">151 <div class="text">Fashion Color: <span class="val">Beige</span></div>152 <div class="chev">153 <svg viewBox="0 0 24 24">154 <path d="M6 9l6 6 6-6" fill="none" stroke="#9E9E9E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>155 </svg>156 </div>157 </div>158 159 <div class="select">160 <div class="text">Quantity: <span class="val">1</span></div>161 <div class="chev">162 <svg viewBox="0 0 24 24">163 <path d="M6 9l6 6 6-6" fill="none" stroke="#9E9E9E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>164 </svg>165 </div>166 </div>167 168 <!-- Buttons -->169 <div class="btn-primary">Buy It Now</div>170 <div class="btn-outline">Add to cart</div>171 <div class="btn-outline">172 <div class="icon">173 <svg viewBox="0 0 24 24" width="44" height="44">174 <path d="M12 21s-7-4.6-7-10a4 4 0 018 0 4 4 0 018 0c0 5.4-7 10-7 10z" fill="none" stroke="#5187FF" stroke-width="2.2"/>175 </svg>176 </div>177 Add to watchlist178 </div>179 180 <!-- Trending banner -->181 <div class="banner">182 <div class="bolt">183 <svg viewBox="0 0 24 24" width="42" height="42">184 <path d="M13 2L6 14h5l-2 8 7-12h-5l2-8z" fill="#FFFFFF"/>185 </svg>186 </div>187 <div class="banner-text"><strong>This one's trending.</strong> <span class="muted">92 have already sold.</span></div>188 </div>189 190 <!-- About section -->191 <div class="section-title">About this item</div>192 <div class="kv">193 <div class="k">Condition</div>194 <div class="v">New with box</div>195 </div>196 <div class="kv">197 <div class="k">Quantity</div>198 <div class="v pink">Almost gone</div>199 </div>200 </div>201 202 <!-- Bottom navigation -->203 <div class="bottom-nav">204 <div class="nav-item">205 <div class="icon">206 <svg viewBox="0 0 24 24" width="40" height="40">207 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2v-9z" fill="#D0D0D0"/>208 </svg>209 </div>210 <div class="label">Home</div>211 </div>212 <div class="nav-item">213 <div class="icon">214 <svg viewBox="0 0 24 24" width="40" height="40">215 <circle cx="12" cy="8" r="4" fill="#D0D0D0"/>216 <path d="M4 20a8 8 0 0 1 16 0" stroke="#D0D0D0" stroke-width="2.2" fill="none"/>217 </svg>218 </div>219 <div class="label">My eBay</div>220 </div>221 <div class="nav-item active">222 <div class="icon">223 <svg viewBox="0 0 24 24" width="40" height="40">224 <circle cx="11" cy="11" r="6.5" stroke="#76A6FF" stroke-width="2.5" fill="none"/>225 <path d="M17 17l4 4" stroke="#76A6FF" stroke-width="2.5" stroke-linecap="round"/>226 </svg>227 </div>228 <div class="label">Search</div>229 </div>230 <div class="nav-item">231 <div class="icon">232 <svg viewBox="0 0 24 24" width="40" height="40">233 <path d="M12 3l6 6v9a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V9l6-6z" stroke="#D0D0D0" stroke-width="2.2" fill="none"/>234 <circle cx="12" cy="17" r="1.8" fill="#D0D0D0"/>235 </svg>236 </div>237 <div class="label">Inbox</div>238 </div>239 <div class="nav-item">240 <div class="icon">241 <svg viewBox="0 0 24 24" width="40" height="40">242 <path d="M4 3h12l4 6-10 12L0 9l4-6z" stroke="#D0D0D0" stroke-width="2" fill="none"/>243 <circle cx="14" cy="8" r="2" fill="#D0D0D0"/>244 </svg>245 </div>246 <div class="label">Selling</div>247 </div>248 </div>249 250</div>251</body>252</html>