GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Compare iPhone Products - Mock UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px; position: relative; overflow: hidden;9 background: linear-gradient(180deg, #bde7df 0%, #c9ece6 40%, #ffffff 85%);10 color: #222;11 }12 .status-bar {13 position: absolute; top: 0; left: 0; width: 100%; height: 96px;14 display: flex; align-items: center; justify-content: space-between;15 padding: 0 32px; box-sizing: border-box; font-weight: 600; color: #1f3b3a;16 }17 .status-icons { display: flex; gap: 22px; align-items: center; }18 .top-area { position: absolute; top: 96px; left: 0; width: 100%; height: 172px; }19 .back-btn {20 position: absolute; left: 24px; top: 24px; width: 78px; height: 78px;21 display: flex; align-items: center; justify-content: center; border-radius: 16px;22 color: #2f4f4f;23 }24 .search-bar {25 position: absolute; left: 96px; right: 96px; top: 18px; height: 120px;26 background: #fff; border-radius: 24px; box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;27 display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;28 gap: 22px; border: 1px solid #d9e9e6;29 }30 .search-input { flex: 1; font-size: 44px; color: #222; }31 .tabbar {32 position: absolute; top: 268px; left: 0; width: 100%; height: 96px;33 display: flex; align-items: center; padding: 0 32px; box-sizing: border-box;34 gap: 40px; border-bottom: 1px solid #dfe7e5;35 }36 .tab { font-size: 40px; color: #2c3e3e; padding: 24px 8px; }37 .tab.active { color: #d56a00; border-bottom: 6px solid #d56a00; }38 .title {39 position: absolute; top: 384px; left: 32px; font-size: 56px; font-weight: 800;40 }41 .compare-grid {42 position: absolute; top: 480px; left: 24px; width: 1032px;43 border: 1px solid #e7e1d9; border-radius: 8px; overflow: hidden;44 background: #fff;45 }46 .grid-header {47 display: grid; grid-template-columns: 32% 38% 30%; align-items: center;48 height: 110px; background: #f7f3ee;49 }50 .hdr-cell { padding: 0 24px; font-size: 38px; color: #2f4f4f; font-weight: 700; }51 .grid-row {52 display: grid; grid-template-columns: 32% 38% 30%;53 min-height: 520px; border-top: 1px solid #efe9e1;54 background: #fff;55 }56 .cell {57 padding: 36px 24px; box-sizing: border-box; font-size: 42px; color: #0c4150;58 }59 .cell + .cell { border-left: 1px solid #efe9e1; }60 .prod-name { font-size: 46px; font-weight: 700; color: #106a7a; margin-bottom: 16px; }61 .from-label { font-size: 40px; color: #333; margin-top: 10px; }62 .price { font-size: 44px; color: #c0392b; font-weight: 800; margin-top: 6px; }63 .placeholder-img {64 width: 360px; height: 420px; background: #E0E0E0; border: 1px solid #BDBDBD;65 display: flex; justify-content: center; align-items: center; color: #757575;66 border-radius: 14px; margin: 28px auto 0 auto; font-size: 36px; text-align: center;67 }68 .rating-row { display: flex; align-items: center; gap: 14px; margin-top: 32px; }69 .rating-count { color: #0aa6a6; font-weight: 800; font-size: 40px; }70 .feature-box {71 margin-top: 40px; font-size: 38px; color: #2f4f4f; line-height: 1.4;72 }73 .bottom-nav {74 position: absolute; bottom: 140px; left: 0; width: 100%; height: 160px;75 border-top: 1px solid #e6e6e6; background: #fff;76 display: flex; align-items: center; justify-content: space-around;77 }78 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #2c3e50; }79 .nav-item span { font-size: 34px; }80 .home-indicator {81 position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%);82 width: 540px; height: 16px; background: #9e9e9e; border-radius: 8px;83 }84 /* simple star color */85 .star svg { width: 44px; height: 44px; }86 .star.orange path { fill: #ff8a00; }87 .star.grey path { fill: #c9c9c9; }88 89</style>90</head>91<body>92<div id="render-target">93 94 <!-- Status bar -->95 <div class="status-bar">96 <div style="font-size:44px;">9:59</div>97 <div class="status-icons">98 <!-- small circle user icon -->99 <svg width="44" height="44" viewBox="0 0 24 24">100 <circle cx="12" cy="8" r="5" fill="#2b4d4d"></circle>101 <path d="M4 22c0-5 16-5 16 0" fill="#2b4d4d"></path>102 </svg>103 <!-- network/wifi -->104 <svg width="44" height="44" viewBox="0 0 24 24">105 <path d="M2 7c5-4 15-4 20 0M5 11c3-3 11-3 14 0M8 15c2-2 6-2 8 0M12 19l2 2-2 2-2-2 2-2z"106 stroke="#2b4d4d" stroke-width="2" fill="none" stroke-linecap="round"></path>107 </svg>108 <!-- battery -->109 <svg width="60" height="44" viewBox="0 0 34 18">110 <rect x="1" y="3" width="28" height="12" rx="3" fill="none" stroke="#2b4d4d" stroke-width="2"></rect>111 <rect x="3" y="5" width="22" height="8" rx="2" fill="#2b4d4d"></rect>112 <rect x="29" y="6" width="4" height="6" rx="1" fill="#2b4d4d"></rect>113 </svg>114 </div>115 </div>116 117 <!-- Top area with search -->118 <div class="top-area">119 <div class="back-btn">120 <svg width="56" height="56" viewBox="0 0 24 24">121 <path d="M15 19l-7-7 7-7" stroke="#2f4f4f" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>122 </svg>123 </div>124 <div class="search-bar">125 <svg width="56" height="56" viewBox="0 0 24 24">126 <circle cx="11" cy="11" r="7" stroke="#7f8c8d" stroke-width="2" fill="none"></circle>127 <path d="M20 20l-4-4" stroke="#7f8c8d" stroke-width="2" fill="none" stroke-linecap="round"></path>128 </svg>129 <div class="search-input">iphone 15</div>130 <!-- scan/camera icon -->131 <svg width="60" height="60" viewBox="0 0 24 24">132 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#6b7c7c" stroke-width="2" fill="none"></rect>133 <circle cx="12" cy="12" r="3" fill="#6b7c7c"></circle>134 </svg>135 </div>136 </div>137 138 <!-- Tabs -->139 <div class="tabbar">140 <div class="tab">Details</div>141 <div class="tab active">Compare</div>142 <div class="tab">Questions</div>143 <div class="tab">Reviews</div>144 <div style="margin-left:auto; display:flex; align-items:center;">145 <svg width="44" height="44" viewBox="0 0 24 24">146 <path d="M12 7l6 6H6z" fill="#2f4f4f"></path>147 </svg>148 </div>149 </div>150 151 <div class="title">Compare Apple iPhone products</div>152 153 <!-- Grid -->154 <div class="compare-grid">155 <div class="grid-header">156 <div class="hdr-cell"></div>157 <div class="hdr-cell" style="text-align:center;"></div>158 <div class="hdr-cell">Ratings</div>159 </div>160 161 <!-- Row: iPhone 15 -->162 <div class="grid-row">163 <div class="cell">164 <div class="prod-name">iPhone 15</div>165 <div class="from-label">From:</div>166 <div class="price">₹83,999.00</div>167 </div>168 <div class="cell" style="text-align:center;">169 <div class="placeholder-img">[IMG: iPhone 15 - Pink]</div>170 </div>171 <div class="cell">172 <div class="rating-row">173 <div class="star orange">174 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>175 </div>176 <div class="star orange">177 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>178 </div>179 <div class="star orange">180 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>181 </div>182 <div class="star orange">183 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>184 </div>185 <div class="star orange">186 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>187 </div>188 </div>189 <div class="rating-count">(467)</div>190 <div class="feature-box">191 • Super Retina XDR display<br>192 • 6.1-inch OLED<br>193 • Dynamic Island194 </div>195 </div>196 </div>197 198 <!-- Row: iPhone 15 Plus -->199 <div class="grid-row">200 <div class="cell">201 <div class="prod-name">iPhone 15<br><span style="font-weight:600; font-size:40px;">Plus</span></div>202 <div class="from-label">From:</div>203 <div class="price">-</div>204 </div>205 <div class="cell" style="text-align:center;">206 <div class="placeholder-img">[IMG: iPhone 15 Plus - Pink]</div>207 </div>208 <div class="cell">209 <div class="rating-row">210 <div class="star orange"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg></div>211 <div class="star orange"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg></div>212 <div class="star orange"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg></div>213 <div class="star orange"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg></div>214 <div class="star grey"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg></div>215 </div>216 <div class="rating-count">(238)</div>217 <div class="feature-box">218 • Super Retina XDR display<br>219 • 6.7-inch OLED<br>220 • All-screen design221 </div>222 </div>223 </div>224 225 <!-- Row: iPhone 15 Pro -->226 <div class="grid-row">227 <div class="cell">228 <div class="prod-name">iPhone 15<br><span style="font-weight:600; font-size:40px;">Pro</span></div>229 <div class="from-label">From:</div>230 <div class="price">₹1,40,990.00</div>231 </div>232 <div class="cell" style="text-align:center;">233 <div class="placeholder-img">[IMG: iPhone 15 Pro - Grey]</div>234 </div>235 <div class="cell">236 <div class="rating-row">237 <div class="star orange"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg></div>238 <div class="star orange"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg></div>239 <div class="star orange"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg></div>240 <div class="star orange"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg></div>241 <div class="star grey"><svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg></div>242 </div>243 <div class="rating-count">(84)</div>244 <div class="feature-box">245 • Super Retina XDR display<br>246 • 6.1-inch OLED<br>247 • Pro camera system248 </div>249 </div>250 </div>251 </div>252 253 <!-- Bottom navigation -->254 <div class="bottom-nav">255 <div class="nav-item">256 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v9h-6v-6H9v6H3z" fill="#2c3e50"></path></svg>257 <span>Home</span>258 </div>259 <div class="nav-item">260 <svg width="56" height="56" viewBox="0 0 24 24">261 <circle cx="12" cy="7" r="4" fill="#2c3e50"></circle>262 <path d="M4 22c0-5 16-5 16 0" fill="#2c3e50"></path>263 </svg>264 <span>You</span>265 </div>266 <div class="nav-item">267 <svg width="56" height="56" viewBox="0 0 24 24">268 <rect x="4" y="4" width="16" height="6" rx="1" fill="#2c3e50"></rect>269 <rect x="4" y="12" width="16" height="8" rx="1" fill="#2c3e50"></rect>270 </svg>271 <span>More</span>272 </div>273 <div class="nav-item">274 <svg width="56" height="56" viewBox="0 0 24 24">275 <path d="M6 6h15l-2 9H7L6 6zM7 20a2 2 0 104 0 2 2 0 10-4 0zm8 0a2 2 0 104 0 2 2 0 10-4 0z" fill="#2c3e50"></path>276 </svg>277 <span>Cart</span>278 </div>279 <div class="nav-item">280 <svg width="56" height="56" viewBox="0 0 24 24">281 <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" fill="#2c3e50"></path>282 </svg>283 <span>Menu</span>284 </div>285 </div>286 287 <div class="home-indicator"></div>288</div>289</body>290</html>