GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - The Art of War Search</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #b9e3df 0%, #bfe8df 40%, #ffffff 100%);13 }14 /* Top status bar */15 .status-bar {16 height: 110px;17 padding: 0 32px;18 display: flex;19 align-items: center;20 justify-content: space-between;21 color: #1a1a1a;22 font-size: 40px;23 }24 .status-icons { display: flex; align-items: center; gap: 24px; }25 /* Search and header row */26 .header {27 padding: 10px 26px 0 26px;28 }29 .search-row {30 display: flex;31 align-items: center;32 gap: 18px;33 margin-top: 6px;34 }35 .back-btn {36 width: 88px; height: 88px; border-radius: 44px;37 display: flex; align-items: center; justify-content: center;38 background: rgba(0,0,0,0.06);39 }40 .search-bar {41 flex: 1;42 height: 120px;43 background: #ffffff;44 border-radius: 28px;45 box-shadow: 0 2px 0 rgba(0,0,0,0.1);46 display: flex;47 align-items: center;48 padding: 0 26px;49 gap: 20px;50 }51 .search-text {52 font-size: 42px;53 color: #222;54 flex: 1;55 }56 .search-icon, .camera-btn { width: 60px; height: 60px; }57 .camera-wrap {58 width: 86px; height: 86px; border-radius: 18px;59 background: #f3f6f7; display: flex; align-items: center; justify-content: center;60 border: 2px solid #e2e6e7;61 }62 /* Location row */63 .location-row {64 display: flex; align-items: center; gap: 18px;65 color: #2a2a2a; font-size: 36px;66 padding: 28px 6px 16px 6px;67 }68 .chev-down { width: 26px; height: 26px; margin-left: 8px; }69 /* Filter row */70 .filter-row {71 display: flex; align-items: center;72 gap: 22px; padding: 12px 0 20px 0;73 }74 .prime-logo {75 display: inline-flex; align-items: center; gap: 12px;76 color: #0a6cff; font-weight: 700; font-size: 34px;77 }78 .toggle {79 width: 84px; height: 48px; border-radius: 24px;80 background: #e9eef5; position: relative; border: 2px solid #cfd7e3;81 }82 .toggle::after {83 content: ""; width: 40px; height: 40px; background: #ffffff; border-radius: 20px;84 position: absolute; top: 2px; left: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.2);85 }86 .pill {87 background: #ffffff; border: 2px solid #e7eaee; border-radius: 26px;88 padding: 22px 26px; color: #2a2a2a; font-size: 36px;89 }90 .filters-right {91 margin-left: auto; display: flex; align-items: center; gap: 10px;92 color: #2a2a2a; font-size: 36px;93 }94 /* Section Title */95 .section-title {96 font-size: 42px; font-weight: 700; color: #1f1f1f; padding: 12px 0 20px 0;97 }98 /* Banner image */99 .banner {100 width: 1028px; height: 540px; background: #E0E0E0; border: 1px solid #BDBDBD;101 display: flex; justify-content: center; align-items: center; color: #757575;102 border-radius: 20px;103 }104 /* Row of mini cards */105 .mini-cards {106 display: flex; gap: 26px; margin-top: 20px;107 }108 .mini-card {109 width: 500px; height: 170px; background: #ffffff; border: 2px solid #e6e8ec; border-radius: 22px;110 display: flex; align-items: center; gap: 18px; padding: 16px;111 }112 .mini-thumb {113 width: 120px; height: 150px; background: #E0E0E0; border: 1px solid #BDBDBD;114 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 8px;115 }116 .rating {117 display: flex; align-items: center; gap: 8px; color: #ff8a00; font-size: 30px;118 }119 .prime-badge {120 color: #0a6cff; font-weight: 700; font-size: 30px;121 }122 .shop-now { margin: 24px 0; color: #0a6cff; font-size: 36px; }123 /* Sponsored card */124 .sponsored-label { color: #6c6c6c; font-size: 32px; margin-top: 10px; }125 .product-card {126 margin-top: 16px; display: flex; gap: 24px; padding: 26px;127 background: #ffffff; border: 2px solid #e6e8ec; border-radius: 20px;128 }129 .book-img {130 width: 250px; height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD;131 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 8px;132 }133 .product-info { flex: 1; }134 .title { font-size: 44px; font-weight: 700; color: #111; }135 .subtitle { font-size: 32px; color: #666; margin-top: 8px; }136 .stars { display: inline-flex; gap: 6px; vertical-align: middle; }137 .star { width: 34px; height: 34px; }138 .deal-badge {139 display: inline-block; background: #a2351b; color: #fff; font-size: 32px; padding: 12px 16px; border-radius: 10px; margin-top: 14px;140 }141 .price { font-size: 46px; color: #111; margin-top: 12px; }142 .mrp { font-size: 32px; color: #777; margin-left: 10px; text-decoration: line-through; }143 .off { font-size: 32px; color: #666; margin-left: 10px; }144 .delivery { font-size: 30px; color: #444; margin-top: 8px; }145 /* Bottom navigation */146 .bottom-nav {147 position: absolute; bottom: 0; left: 0; width: 100%; height: 150px;148 background: #ffffff; border-top: 2px solid #e6e8ec; display: flex; align-items: center; justify-content: space-around;149 }150 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #222; font-size: 32px; }151 .nav-icon { width: 60px; height: 60px; }152</style>153</head>154<body>155<div id="render-target">156 157 <!-- Top status bar -->158 <div class="status-bar">159 <div>5:45</div>160 <div class="status-icons">161 <!-- simple status dots/icons -->162 <svg width="36" height="36"><circle cx="18" cy="18" r="6" fill="#333"/></svg>163 <svg width="36" height="36"><rect x="6" y="6" width="24" height="24" rx="4" fill="#333"/></svg>164 <svg width="36" height="36"><polygon points="6,18 30,6 30,30" fill="#333"/></svg>165 <svg width="36" height="36"><rect x="10" y="8" width="16" height="20" rx="3" stroke="#333" stroke-width="3" fill="none"/><rect x="14" y="12" width="8" height="12" fill="#333"/></svg>166 </div>167 </div>168 169 <!-- Header with search -->170 <div class="header">171 <div class="search-row">172 <div class="back-btn">173 <svg width="48" height="48" class="nav-icon">174 <polyline points="34,10 16,24 34,38" fill="none" stroke="#222" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>175 </svg>176 </div>177 <div class="search-bar">178 <svg class="search-icon" viewBox="0 0 24 24">179 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>180 <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2"/>181 </svg>182 <div class="search-text">The art of war</div>183 <div class="camera-wrap">184 <svg class="camera-btn" viewBox="0 0 24 24">185 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#333" stroke-width="2" fill="none"/>186 <circle cx="12" cy="12" r="3" fill="#333"/>187 </svg>188 </div>189 </div>190 </div>191 192 <!-- Location row -->193 <div class="location-row">194 <svg width="36" height="36" viewBox="0 0 24 24">195 <path d="M12 2C8.5 2 6 4.6 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.4-2.5-6-6-6z" fill="#333"/>196 </svg>197 <div>Select a location to see product availability</div>198 <svg class="chev-down" viewBox="0 0 24 24">199 <polyline points="6,9 12,15 18,9" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>200 </svg>201 </div>202 203 <!-- Filter row -->204 <div class="filter-row">205 <div class="prime-logo">prime</div>206 <div class="toggle"></div>207 <div class="pill">Today's Deals</div>208 <div class="filters-right">209 <div>Filters</div>210 <svg width="26" height="26" viewBox="0 0 24 24">211 <polyline points="6,9 12,15 18,9" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>212 </svg>213 </div>214 </div>215 216 <!-- Banner section -->217 <div class="section-title">Rousing tales of fearless Indian heroes</div>218 <div class="banner">[IMG: Book banner - Indian heroes]</div>219 220 <!-- mini cards -->221 <div class="mini-cards">222 <div class="mini-card">223 <div class="mini-thumb">[IMG: Book - Hero of Tiger Hill]</div>224 <div style="flex:1;">225 <div class="rating">226 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>227 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>228 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>229 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>230 <div style="color:#333; font-size:30px;">164</div>231 </div>232 <div class="prime-badge">prime</div>233 </div>234 </div>235 236 <div class="mini-card">237 <div class="mini-thumb">[IMG: Book - Battle of Barki]</div>238 <div style="flex:1;">239 <div class="rating">240 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>241 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>242 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>243 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>244 <div style="color:#333; font-size:30px;">123</div>245 </div>246 <div class="prime-badge">prime</div>247 </div>248 </div>249 </div>250 251 <div class="shop-now">Shop now ></div>252 253 <!-- Sponsored section -->254 <div class="sponsored-label">Sponsored</div>255 <div class="product-card">256 <div class="book-img">[IMG: The Art of War - Cover]</div>257 <div class="product-info">258 <div class="title">THE ART OF WAR</div>259 <div class="subtitle">by Sun Tzu | 6 July 2016</div>260 <div style="margin-top: 10px; font-size: 36px; color:#0a6cff;">261 4.0262 <span class="stars">263 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>264 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>265 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>266 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>267 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ff8a00"/></svg>268 </span>269 <span style="color:#333; margin-left: 10px; font-size: 34px;">529</span>270 </div>271 <div class="deal-badge">Limited time deal</div>272 <div class="price">₹98 <span class="mrp">M.R.P. ₹150</span> <span class="off">(35% off)</span></div>273 <div class="prime-badge">prime</div>274 <div class="delivery">FREE delivery Sun, 1 Oct on ₹499 of ...</div>275 </div>276 </div>277 </div>278 279 <!-- Bottom navigation -->280 <div class="bottom-nav">281 <div class="nav-item">282 <svg class="nav-icon" viewBox="0 0 24 24">283 <path d="M3 11l9-7 9 7v9H3z" fill="none" stroke="#333" stroke-width="2"/>284 </svg>285 <div>Home</div>286 </div>287 <div class="nav-item">288 <svg class="nav-icon" viewBox="0 0 24 24">289 <circle cx="12" cy="8" r="4" fill="none" stroke="#333" stroke-width="2"/>290 <path d="M4 21c2-5 14-5 16 0" fill="none" stroke="#333" stroke-width="2"/>291 </svg>292 <div>You</div>293 </div>294 <div class="nav-item">295 <svg class="nav-icon" viewBox="0 0 24 24">296 <circle cx="6" cy="12" r="3" fill="#333"/>297 <circle cx="12" cy="12" r="3" fill="#333"/>298 <circle cx="18" cy="12" r="3" fill="#333"/>299 </svg>300 <div>More</div>301 </div>302 <div class="nav-item">303 <svg class="nav-icon" viewBox="0 0 24 24">304 <path d="M6 6h14l-2 13H6L4 6z" fill="none" stroke="#333" stroke-width="2"/>305 </svg>306 <div>Cart</div>307 </div>308 <div class="nav-item">309 <svg class="nav-icon" viewBox="0 0 24 24">310 <line x1="4" y1="6" x2="20" y2="6" stroke="#333" stroke-width="2"/>311 <line x1="4" y1="12" x2="20" y2="12" stroke="#333" stroke-width="2"/>312 <line x1="4" y1="18" x2="20" y2="18" stroke="#333" stroke-width="2"/>313 </svg>314 <div>Menu</div>315 </div>316 </div>317 318</div>319</body>320</html>