GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Item Screen Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff; color: #111;12 }13 .status-bar {14 height: 80px; padding: 0 40px;15 display: flex; align-items: center; justify-content: space-between;16 color: #3c3c3c; font-weight: 600; font-size: 36px;17 }18 .status-icons { display: flex; gap: 24px; align-items: center; }19 /* Header */20 .header {21 display: flex; align-items: center; justify-content: space-between;22 padding: 0 32px; height: 120px;23 }24 .header-title { font-size: 52px; font-weight: 700; }25 .icon-btns { display: flex; gap: 24px; align-items: center; }26 .circle {27 width: 96px; height: 96px; border-radius: 48px;28 background: #F1F3F5; display: flex; align-items: center; justify-content: center;29 }30 /* Icons */31 .icon { width: 48px; height: 48px; }32 .back { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }33 .thin-blue-line { height: 6px; background: #3E6CF3; width: 92%; margin: 6px auto 12px; border-radius: 3px; }34 /* Large action buttons */35 .pill-btn {36 margin: 24px 32px;37 border: 4px solid #3E6CF3; color: #2C5AF0;38 border-radius: 60px; height: 120px;39 display: flex; align-items: center; justify-content: center;40 font-size: 44px; font-weight: 700;41 gap: 24px; background: #ffffff;42 }43 .heart-icon { width: 56px; height: 56px; }44 /* Sections */45 .section-title { font-size: 56px; font-weight: 800; padding: 32px; padding-top: 28px; }46 .about-list { padding: 0 32px; }47 .row {48 display: flex; align-items: center;49 padding: 24px 0; border-bottom: 1px solid #eee; font-size: 40px;50 }51 .label { width: 360px; color: #6f6f6f; }52 .value { flex: 1; }53 .chev { width: 36px; height: 36px; }54 .desc-wrap { padding: 24px 32px; }55 .desc-title { font-size: 56px; font-weight: 800; margin-bottom: 24px; }56 .desc-text { font-size: 40px; line-height: 56px; color: #2f2f2f; }57 .link { font-size: 42px; color: #2C5AF0; margin: 28px 32px; text-decoration: none; font-weight: 700; }58 /* More like this */59 .more-wrap { padding: 24px 32px; }60 .more-head { display: flex; align-items: center; justify-content: space-between; }61 .more-title { font-size: 56px; font-weight: 800; }62 .see-all {63 padding: 22px 36px; border: 2px solid #dcdcdc; border-radius: 60px;64 font-size: 40px; color: #111; background: #f7f7f7;65 }66 .subtle { color: #6f6f6f; font-size: 40px; margin-top: 8px; }67 .cards { display: flex; gap: 24px; margin-top: 24px; }68 .card {69 width: 492px; height: 420px; border-radius: 36px; overflow: hidden;70 background: #fff; border: 1px solid #E4E4E4;71 }72 .img {73 width: 100%; height: 100%; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;74 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;75 }76 /* Bottom nav */77 .bottom-nav {78 position: absolute; bottom: 0; left: 0; right: 0;79 height: 180px; border-top: 1px solid #e6e6e6; background: #ffffff;80 display: flex; align-items: center; justify-content: space-around;81 }82 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 34px; color: #333; }83 .nav-icon { width: 64px; height: 64px; }84 .nav-active .nav-icon-wrap {85 width: 120px; height: 120px; border-radius: 60px; background: #E9F0FF;86 display: flex; align-items: center; justify-content: center;87 }88 .gesture {89 position: absolute; bottom: 192px; left: 50%; transform: translateX(-50%);90 width: 360px; height: 14px; background: #bbb; border-radius: 8px;91 }92</style>93</head>94<body>95<div id="render-target">96 97 <!-- Status Bar -->98 <div class="status-bar">99 <div>10:47</div>100 <div class="status-icons">101 <!-- Simple wifi icon -->102 <svg class="icon" viewBox="0 0 24 24">103 <path d="M12 18c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-7-7c4.7-3.5 12.3-3.5 17 0l-2 2c-3.9-2.9-9.1-2.9-13 0l-2-2zm3.5 3.5c3.1-2.3 7.9-2.3 11 0l-2 2c-2.3-1.7-4.7-1.7-7 0l-2-2z" fill="#333"/>104 </svg>105 <!-- Battery icon -->106 <svg class="icon" viewBox="0 0 24 24">107 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#4a4a4a"></rect>108 <rect x="4" y="8" width="12" height="8" fill="#9ad16f"></rect>109 <rect x="20" y="10" width="2" height="6" fill="#4a4a4a"></rect>110 </svg>111 </div>112 </div>113 114 <!-- Header -->115 <div class="header">116 <div style="display:flex; align-items:center; gap:16px;">117 <div class="back">118 <svg class="icon" viewBox="0 0 24 24">119 <path d="M15.5 6l-7 6 7 6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>120 </svg>121 </div>122 <div class="header-title">Item</div>123 </div>124 <div class="icon-btns">125 <div class="circle">126 <svg class="icon" viewBox="0 0 24 24">127 <circle cx="10" cy="10" r="7" stroke="#111" stroke-width="2" fill="none"></circle>128 <line x1="15" y1="15" x2="21" y2="21" stroke="#111" stroke-width="2" stroke-linecap="round"></line>129 </svg>130 </div>131 <div class="circle">132 <svg class="icon" viewBox="0 0 24 24">133 <path d="M7 6h14l-2 10H9L7 6zm2 16a2 2 0 002-2H7a2 2 0 002 2z" fill="#111"></path>134 </svg>135 </div>136 <div class="circle">137 <svg class="icon" viewBox="0 0 24 24">138 <circle cx="6" cy="12" r="2" fill="#111"></circle>139 <circle cx="12" cy="6" r="2" fill="#111"></circle>140 <circle cx="18" cy="16" r="2" fill="#111"></circle>141 <path d="M7.8 10.4l3.6-3.2M13.8 7.8l3.6 6.2" stroke="#111" stroke-width="2" fill="none"></path>142 </svg>143 </div>144 <div class="circle">145 <svg class="icon" viewBox="0 0 24 24">146 <circle cx="5" cy="12" r="2" fill="#111"></circle>147 <circle cx="12" cy="12" r="2" fill="#111"></circle>148 <circle cx="19" cy="12" r="2" fill="#111"></circle>149 </svg>150 </div>151 </div>152 </div>153 154 <div class="thin-blue-line"></div>155 156 <!-- Action Buttons -->157 <div class="pill-btn">Add to cart</div>158 <div class="pill-btn">Make offer</div>159 <div class="pill-btn">160 <svg class="heart-icon" viewBox="0 0 24 24">161 <path d="M12 21s-7-4.6-9-8.5C1.7 9.1 3.6 7 6 7c1.7 0 3 .9 4 2.2C11 7.9 12.3 7 14 7c2.4 0 4.3 2.1 3 5.5-2 3.9-9 8.5-9 8.5z" fill="none" stroke="#2C5AF0" stroke-width="2"/>162 </svg>163 Add to watchlist164 </div>165 166 <!-- About -->167 <div class="section-title">About this item</div>168 <div class="about-list">169 <div class="row">170 <div class="label">Condition</div>171 <div class="value">Used</div>172 </div>173 <div class="row">174 <div class="label">Quantity</div>175 <div class="value">1 available</div>176 </div>177 <div class="row">178 <div class="label">Item Number</div>179 <div class="value" style="display:flex; align-items:center; justify-content:space-between;">180 <span>304796314833</span>181 <svg class="chev" viewBox="0 0 24 24">182 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>183 </svg>184 </div>185 </div>186 <div class="row">187 <div class="label">UK Shoe Size</div>188 <div class="value">7</div>189 </div>190 <div class="row" style="border-bottom:none;">191 <div class="label">Shoe Shaft Style</div>192 <div class="value">Low Top</div>193 </div>194 </div>195 196 <!-- Description -->197 <div class="desc-wrap">198 <div class="desc-title">Item description from the seller</div>199 <div class="desc-text">200 New Balance 420 Size 9 Athletic shoes for women WL420DFU Mint. Good pre-owned conditions, look at all over the pictures for details.201 </div>202 <div style="display:flex; align-items:center; justify-content:space-between; margin-top:18px;">203 <a class="link" href="#">See full description</a>204 <svg class="chev" viewBox="0 0 24 24">205 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>206 </svg>207 </div>208 </div>209 210 <!-- More like this -->211 <div class="more-wrap">212 <div class="more-head">213 <div>214 <div class="more-title">More like this</div>215 <div class="subtle">Sponsored · UK Shoe Size 7 an...</div>216 </div>217 <div class="see-all">See all →</div>218 </div>219 <div class="cards">220 <div class="card">221 <div class="img">[IMG: Similar shoe listing thumbnail]</div>222 </div>223 <div class="card">224 <div class="img">[IMG: Similar shoe listing thumbnail]</div>225 </div>226 </div>227 </div>228 229 <!-- Bottom Navigation -->230 <div class="gesture"></div>231 <div class="bottom-nav">232 <div class="nav-item">233 <svg class="nav-icon" viewBox="0 0 24 24">234 <path d="M3 11l9-7 9 7v9H3v-9z" fill="none" stroke="#333" stroke-width="2"></path>235 </svg>236 <div>Home</div>237 </div>238 <div class="nav-item">239 <svg class="nav-icon" viewBox="0 0 24 24">240 <circle cx="12" cy="8" r="4" stroke="#333" stroke-width="2" fill="none"></circle>241 <path d="M4 22c0-5 4-8 8-8s8 3 8 8" stroke="#333" stroke-width="2" fill="none"></path>242 </svg>243 <div>My eBay</div>244 </div>245 <div class="nav-item nav-active">246 <div class="nav-icon-wrap">247 <svg class="nav-icon" viewBox="0 0 24 24">248 <circle cx="10" cy="10" r="7" stroke="#2C5AF0" stroke-width="2" fill="none"></circle>249 <line x1="15" y1="15" x2="21" y2="21" stroke="#2C5AF0" stroke-width="2" stroke-linecap="round"></line>250 </svg>251 </div>252 <div style="color:#2C5AF0;">Search</div>253 </div>254 <div class="nav-item">255 <svg class="nav-icon" viewBox="0 0 24 24">256 <path d="M4 5h16v14H4z" fill="none" stroke="#333" stroke-width="2"></path>257 <path d="M4 9h16" stroke="#333" stroke-width="2"></path>258 </svg>259 <div>Inbox</div>260 </div>261 <div class="nav-item">262 <svg class="nav-icon" viewBox="0 0 24 24">263 <path d="M3 6h18v4H3zM3 12h18v7H3z" fill="none" stroke="#333" stroke-width="2"></path>264 <path d="M7 12v7M12 12v7M17 12v7" stroke="#333" stroke-width="2"></path>265 </svg>266 <div>Selling</div>267 </div>268 </div>269 270</div>271</body>272</html>