GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff; color: #222;11 }12 .status-bar {13 position: absolute; top: 0; left: 0; width: 100%; height: 110px;14 background: linear-gradient(90deg, #9fd7cf 0%, #a7e3c6 100%);15 padding: 24px 36px 0 36px; box-sizing: border-box;16 display: flex; align-items: center; justify-content: space-between; color: #1f2b2b;17 font-weight: 600; font-size: 40px;18 }19 .status-icons { display: flex; align-items: center; gap: 22px; }20 .svg-icon { width: 44px; height: 44px; }21 .top-search {22 position: absolute; top: 110px; left: 0; width: 100%; height: 160px;23 background: linear-gradient(90deg, #9fd7cf 0%, #a7e3c6 100%);24 box-sizing: border-box; padding: 0 36px; display: flex; align-items: center; gap: 24px;25 }26 .back-btn { width: 80px; height: 80px; border-radius: 40px; display:flex; align-items:center; justify-content:center; }27 .search-box {28 flex: 1; height: 100px; background: #fff; border-radius: 50px; box-shadow: 0 2px 0 rgba(0,0,0,0.06);29 display: flex; align-items: center; padding: 0 36px; gap: 24px; border: 1px solid #e6e6e6;30 font-size: 40px; color: #555;31 }32 .search-text { flex: 1; }33 .cam-btn {34 width: 86px; height: 86px; border-radius: 43px; border: 1px solid #D7D7D7; background: #f5f5f5;35 display:flex; align-items:center; justify-content:center;36 }37 .sub-toolbar {38 position: absolute; top: 270px; left: 0; width: 100%; height: 110px; box-sizing: border-box;39 padding: 0 36px; display: flex; align-items: center; justify-content: space-between; background: #ffffff;40 border-top: 1px solid #eee;41 }42 .prime-toggle { display: flex; align-items: center; gap: 18px; font-size: 40px; color: #0a62a6; font-weight: 700; }43 .toggle-track {44 width: 120px; height: 52px; background: #f0f0f0; border-radius: 26px; border: 1px solid #d6d6d6; position: relative;45 }46 .toggle-thumb { width: 48px; height: 48px; background: #ffffff; border: 1px solid #cfcfcf; border-radius: 24px; position: absolute; top: 1px; left: 2px; }47 .filters { font-size: 40px; color: #1a73e8; display: flex; align-items: center; gap: 10px; }48 .chip-row {49 position: absolute; top: 380px; left: 0; width: 100%; box-sizing: border-box; padding: 0 36px;50 display: flex; gap: 18px; overflow: hidden;51 }52 .chip { padding: 22px 28px; border: 1px solid #e2e2e2; border-radius: 40px; background: #fff; font-size: 34px; color: #444; white-space: nowrap; }53 .results {54 position: absolute; top: 460px; left: 0; right: 0; bottom: 170px; overflow: hidden; padding: 24px 24px 0 24px; box-sizing: border-box;55 }56 .card {57 background: #fff; border: 1px solid #e8e8e8; border-radius: 26px; padding: 24px; box-sizing: border-box; margin-bottom: 28px;58 display: grid; grid-template-columns: 360px 1fr; gap: 24px;59 }60 .img-placeholder {61 width: 360px; height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD;62 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; text-align: center; border-radius: 20px;63 position: relative;64 }65 .scan-fab {66 position: absolute; bottom: -12px; left: -12px; width: 110px; height: 110px; border-radius: 55px; border: 1px solid #e0e0e0; background: #fafafa;67 display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 10px rgba(0,0,0,0.06);68 }69 .card-title { font-size: 42px; line-height: 1.2; color: #2a2a2a; font-weight: 700; margin-bottom: 8px; }70 .subtle-tag {71 display: inline-block; background: #f4f4f4; border: 1px solid #e0e0e0; color: #555; font-size: 32px; padding: 8px 12px; border-radius: 10px; margin-bottom: 12px;72 }73 .rating { display: flex; align-items: center; gap: 10px; font-size: 36px; color: #1a73e8; }74 .stars { color: #ff8a00; font-size: 36px; }75 .count { color: #777; font-size: 32px; }76 .deal {77 display: inline-block; background: #8c3b20; color: #fff; padding: 14px 18px; border-radius: 10px; font-size: 36px; margin: 16px 0;78 }79 .price-row { font-size: 62px; font-weight: 800; color: #222; }80 .mrp { font-size: 36px; color: #777; margin-left: 16px; text-decoration: line-through; }81 .off { font-size: 36px; color: #4caf50; margin-left: 8px; }82 .prime-line { margin-top: 8px; font-size: 36px; color: #555; }83 .prime-line .prime-badge { color: #0a62a6; font-weight: 800; }84 .detail { font-size: 34px; color: #777; margin-top: 6px; }85 .ribbon {86 position: absolute; top: 0; left: 0; background: #ee7a2e; color: #fff; padding: 14px 24px; border-top-left-radius: 26px; border-bottom-right-radius: 26px;87 font-size: 34px; font-weight: 700;88 }89 .bottom-nav {90 position: absolute; left: 0; right: 0; bottom: 0; height: 170px; background: #fff; border-top: 1px solid #e6e6e6;91 display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center;92 }93 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #555; font-size: 32px; }94 .nav-item.active { color: #0b7a7a; }95 .gesture-bar {96 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: 360px; height: 10px; background: #d0d0d0; border-radius: 5px;97 }98</style>99</head>100<body>101<div id="render-target">102 <!-- Status bar -->103 <div class="status-bar">104 <div>10:56</div>105 <div class="status-icons">106 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 0 0 20a5 5 0 0 0 0-20z" fill="none" stroke="#1f2b2b" stroke-width="2"/></svg>107 <svg class="svg-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#1f2b2b" stroke-width="2"/></svg>108 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M4 21h16M6 17h12M8 13h8M10 9h4M12 5h0" stroke="#1f2b2b" stroke-width="2" fill="none"/></svg>109 <svg class="svg-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#1f2b2b"/><circle cx="4" cy="12" r="2" fill="#1f2b2b"/><circle cx="20" cy="12" r="2" fill="#1f2b2b"/></svg>110 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M20 8v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8m4-4h8l4 4H4l4-4z" fill="none" stroke="#1f2b2b" stroke-width="2"/></svg>111 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M6 8h12v8a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4V8z" fill="none" stroke="#1f2b2b" stroke-width="2"/><path d="M9 4h6v4H9z" fill="none" stroke="#1f2b2b" stroke-width="2"/></svg>112 </div>113 </div>114 115 <!-- Search bar -->116 <div class="top-search">117 <div class="back-btn">118 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M15 5L8 12l7 7" fill="none" stroke="#222" stroke-width="2"/></svg>119 </div>120 <div class="search-box">121 <svg class="svg-icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="#777" stroke-width="2"/><path d="M21 21l-5-5" stroke="#777" stroke-width="2"/></svg>122 <div class="search-text">toys for 2 years old boy</div>123 <div class="cam-btn">124 <svg class="svg-icon" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="12" rx="2" fill="none" stroke="#777" stroke-width="2"/><path d="M7 7l2-3h6l2 3" fill="none" stroke="#777" stroke-width="2"/><circle cx="12" cy="13" r="3" fill="none" stroke="#777" stroke-width="2"/></svg>125 </div>126 </div>127 </div>128 129 <!-- Prime toggle and Filters -->130 <div class="sub-toolbar">131 <div class="prime-toggle">132 <span>prime</span>133 <div class="toggle-track"><div class="toggle-thumb"></div></div>134 </div>135 <div class="filters">136 <span>Filters</span>137 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M4 6h16M7 12h10M10 18h4" stroke="#1a73e8" stroke-width="2" fill="none"/></svg>138 </div>139 </div>140 141 <!-- Chips -->142 <div class="chip-row">143 <div class="chip">Toy Vehicle</div>144 <div class="chip">Toy Building Block</div>145 <div class="chip">Puzzle</div>146 <div class="chip">Board Game</div>147 <div class="chip">Remote Control</div>148 <div class="chip">Learning</div>149 </div>150 151 <!-- Results -->152 <div class="results">153 <!-- Card 1 -->154 <div class="card">155 <div class="img-placeholder">[IMG: Toddler playing with blocks]156 <div class="scan-fab">157 <svg class="svg-icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="#666" stroke-width="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="#666" stroke-width="2"/></svg>158 </div>159 </div>160 <div>161 <div class="subtle-tag">Plastic</div>162 <div class="rating">163 <span>4.2</span>164 <span class="stars">★★★★★</span>165 <span class="count">(750)</span>166 </div>167 <div style="font-size:34px; color:#777;">3K+ bought in past month</div>168 <div class="deal">Limited time deal</div>169 <div class="price-row">₹285 <span class="mrp">M.R.P.: ₹799</span> <span class="off">(64% off)</span></div>170 <div class="prime-line"><span class="prime-badge">prime</span> Get it by Today, 22 December</div>171 <div class="detail">FREE Delivery over ₹499. Fulfilled by Amazon.</div>172 <div class="detail">Ages: 6 months - 5 years</div>173 </div>174 </div>175 176 <!-- Card 2 -->177 <div class="card">178 <div class="img-placeholder">[IMG: Talking flash cards set for kids]179 <div class="scan-fab">180 <svg class="svg-icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="#666" stroke-width="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="#666" stroke-width="2"/></svg>181 </div>182 </div>183 <div>184 <div class="card-title">SUPER TOY 112 Talking Baby Flash Cards Educational Toys for 2 3 4 Years Old, Learning Resource...</div>185 <div class="subtle-tag">Cognitive Skills</div>186 <div class="rating">187 <span>4.0</span>188 <span class="stars">★★★★★</span>189 <span class="count">(553)</span>190 </div>191 <div style="font-size:34px; color:#777;">2K+ bought in past month</div>192 <div class="deal" style="background:#994022;">Deal of the Day</div>193 <div class="price-row">₹407 <span class="mrp">M.R.P.: ₹1,999</span> <span class="off">(80% off)</span></div>194 <div class="prime-line"><span class="prime-badge">prime</span> Get it by Today, 22 December</div>195 <div class="detail">FREE Delivery over ₹499. Fulfilled by Amazon.</div>196 <div class="detail">Ages: 24 months and up</div>197 </div>198 </div>199 200 <!-- Card 3 -->201 <div class="card" style="position: relative;">202 <div class="ribbon">Best seller</div>203 <div class="img-placeholder">[IMG: Baby piano xylophone toy]</div>204 <div>205 <div class="card-title">Toyshine 2 in 1 Baby Piano Xylophone Toy for Toddlers 1-3 Years Old, 8 Multicolored Keys...</div>206 <div class="rating">207 <span>4.3</span>208 <span class="stars">★★★★★</span>209 <span class="count">(2,232)</span>210 </div>211 <div style="font-size:34px; color:#777;">1K+ bought in past month</div>212 <div class="deal" style="background:#994022;">Deal of the Day</div>213 </div>214 </div>215 </div>216 217 <!-- Bottom Navigation -->218 <div class="bottom-nav">219 <div class="nav-item active">220 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-9z" fill="none" stroke="#0b7a7a" stroke-width="2"/></svg>221 <div>Home</div>222 </div>223 <div class="nav-item">224 <svg class="svg-icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="none" stroke="#555" stroke-width="2"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#555" stroke-width="2"/></svg>225 <div>You</div>226 </div>227 <div class="nav-item">228 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M3 7h8v4H3zM13 7h8v4h-8zM3 13h8v4H3zM13 13h8v4h-8z" fill="none" stroke="#555" stroke-width="2"/></svg>229 <div>More</div>230 </div>231 <div class="nav-item">232 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M6 6h15l-2 9H7L6 6z" fill="none" stroke="#555" stroke-width="2"/><circle cx="9" cy="20" r="2" stroke="#555" fill="none" stroke-width="2"/><circle cx="18" cy="20" r="2" stroke="#555" fill="none" stroke-width="2"/></svg>233 <div>Cart</div>234 </div>235 <div class="nav-item">236 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#555" stroke-width="2" fill="none"/></svg>237 <div>Menu</div>238 </div>239 </div>240 <div class="gesture-bar"></div>241</div>242</body>243</html>