GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff;11 }12 13 /* Header gradient area */14 .header-gradient {15 width: 100%;16 height: 430px;17 background: linear-gradient(180deg, #8fd3e6 0%, #b8efd5 100%);18 position: relative;19 }20 21 /* Status bar */22 .status-bar {23 height: 90px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 color: #111;29 }30 .status-bar .time { font-size: 36px; font-weight: 600; letter-spacing: 0.5px; }31 .status-icons { display: flex; gap: 24px; align-items: center; }32 .status-icons svg { width: 36px; height: 36px; }33 34 /* Search row */35 .top-row {36 display: flex; align-items: center;37 padding: 20px 30px 0 24px;38 gap: 24px;39 }40 .back-btn {41 width: 72px; height: 72px; border: none; background: transparent; padding: 0; cursor: pointer;42 }43 .back-btn svg { width: 72px; height: 72px; }44 .search-card {45 flex: 1;46 height: 120px;47 background: #fff;48 border-radius: 24px;49 box-shadow: 0 6px 14px rgba(0,0,0,0.15);50 display: flex;51 align-items: center;52 padding: 0 26px;53 gap: 24px;54 }55 .search-icon { width: 44px; height: 44px; opacity: 0.7; }56 .search-text {57 flex: 1;58 font-size: 40px; color: #222;59 }60 .scan-btn {61 width: 72px; height: 72px; border-radius: 18px;62 background: #f3f3f3; border: 1px solid #d6d6d6;63 display: flex; align-items: center; justify-content: center;64 }65 .scan-btn svg { width: 48px; height: 48px; }66 67 /* Tabs */68 .tabs {69 position: absolute; bottom: 0; left: 0; right: 0;70 height: 120px; background: #ffffff;71 display: flex; align-items: flex-end;72 padding: 0 24px;73 box-shadow: 0 2px 0 rgba(0,0,0,0.08);74 }75 .tab {76 font-size: 38px; color: #555; margin-right: 48px; padding-bottom: 26px;77 }78 .tab.active {79 color: #ff6a00; font-weight: 700; border-bottom: 8px solid #ff6a00;80 padding-bottom: 18px;81 }82 .tab-arrow { margin-left: auto; padding-bottom: 22px; }83 .tab-arrow svg { width: 44px; height: 44px; }84 85 /* Content area */86 .content {87 position: absolute; left: 0; right: 0; top: 430px; bottom: 160px;88 overflow: hidden;89 }90 .content-inner {91 height: 100%; overflow-y: auto; padding: 24px;92 }93 94 .section-title {95 font-size: 48px; font-weight: 800; color: #111; margin: 24px 0 12px;96 }97 .feature-list { margin: 0; padding-left: 40px; }98 .feature-list li {99 font-size: 34px; line-height: 50px; color: #222;100 margin-bottom: 24px;101 }102 .feature-list b { font-weight: 800; }103 104 .divider { height: 2px; background: #e5e5e5; margin: 24px 0; }105 106 .see-features {107 display: flex; align-items: center; justify-content: space-between;108 font-size: 36px; color: #222; padding: 18px 8px;109 }110 .see-features svg { width: 40px; height: 40px; }111 112 .spec-title { font-size: 48px; font-weight: 800; color: #111; margin: 18px 0 16px; }113 114 .spec-table { border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; }115 .row {116 display: grid; grid-template-columns: 340px 1fr;117 min-height: 160px; align-items: center;118 padding: 0 24px; background: #f3f6f7;119 border-bottom: 1px solid #e0e0e0;120 }121 .row.alt { background: #ffffff; }122 .cell.label { font-size: 36px; color: #444; }123 .cell.value { font-size: 36px; color: #111; }124 125 /* Bottom nav */126 .bottom-nav {127 position: absolute; left: 0; right: 0; bottom: 0;128 height: 160px; background: #ffffff;129 border-top: 1px solid #e5e5e5;130 display: flex; align-items: center; justify-content: space-around;131 padding: 0 24px;132 }133 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }134 .nav-item svg { width: 60px; height: 60px; }135 .nav-item.active svg path, .nav-item.active svg circle { stroke: #20b6b0; fill: none; }136 .badge {137 position: absolute; top: -6px; right: -6px;138 background: #20b6b0; color: #fff; font-size: 28px; line-height: 38px;139 width: 38px; height: 38px; border-radius: 19px; text-align: center;140 }141 .nav-label { font-size: 24px; color: #777; }142</style>143</head>144<body>145<div id="render-target">146 147 <div class="header-gradient">148 <div class="status-bar">149 <div class="time">11:34</div>150 <div class="status-icons">151 <!-- WiFi -->152 <svg viewBox="0 0 24 24">153 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0M12 19l2 2-2 2-2-2 2-2z" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/>154 </svg>155 <!-- Battery -->156 <svg viewBox="0 0 28 24">157 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#222" stroke-width="2"/>158 <rect x="4" y="8" width="14" height="8" fill="#222"/>159 <rect x="22" y="9" width="4" height="6" rx="1" fill="#222"/>160 </svg>161 </div>162 </div>163 164 <div class="top-row">165 <button class="back-btn" aria-label="Back">166 <svg viewBox="0 0 24 24">167 <path d="M15 5L6 12l9 7" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>168 </svg>169 </button>170 171 <div class="search-card">172 <!-- optional search icon -->173 <svg class="search-icon" viewBox="0 0 24 24">174 <circle cx="10" cy="10" r="7" fill="none" stroke="#999" stroke-width="2"/>175 <path d="M21 21l-6-6" stroke="#999" stroke-width="2" stroke-linecap="round"/>176 </svg>177 <div class="search-text">iphone 15</div>178 <div class="scan-btn">179 <svg viewBox="0 0 24 24">180 <rect x="3" y="3" width="18" height="18" rx="3" fill="none" stroke="#666" stroke-width="2"/>181 <path d="M3 8h4M17 8h4M3 16h4M17 16h4" stroke="#666" stroke-width="2" stroke-linecap="round"/>182 </svg>183 </div>184 </div>185 </div>186 187 <div class="tabs">188 <div class="tab active">Details</div>189 <div class="tab">Questions</div>190 <div class="tab">Compare</div>191 <div class="tab">Reviews</div>192 <div class="tab-arrow">193 <svg viewBox="0 0 24 24">194 <path d="M6 15l6-6 6 6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>195 </svg>196 </div>197 </div>198 </div>199 200 <div class="content">201 <div class="content-inner">202 <div class="section-title">Features</div>203 <ul class="feature-list">204 <li><b>DYNAMIC ISLAND COMES TO IPHONE 15 —</b> Dynamic Island bubbles up alerts and Live Activities — so you don’t miss them while you’re doing something else. You can see who’s calling, track your next ride, check your flight status, and so much more.</li>205 <li><b>INNOVATIVE DESIGN —</b> iPhone 15 Plus features a durable color‑infused glass and aluminum design. It’s splash, water, and dust resistant. The Ceramic Shield front is tougher than any smartphone glass. And the 6.7" Super Retina XDR display is up to 2x brighter in the sun compared to iPhone 14.</li>206 <li><b>48MP MAIN CAMERA WITH 2X TELEPHOTO —</b> The 48MP Main camera shoots in super‑high resolution. So it’s easier than ever to take standout photos with amazing detail. The 2x optical‑quality Telephoto lets you frame the perfect close‑up.</li>207 </ul>208 209 <div class="divider"></div>210 211 <div class="see-features">212 <span>See all features</span>213 <svg viewBox="0 0 24 24">214 <path d="M8 5l8 7-8 7" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>215 </svg>216 </div>217 218 <div class="divider"></div>219 220 <div class="spec-title">Specifications</div>221 <div class="spec-table">222 <div class="row">223 <div class="cell label">RAM</div>224 <div class="cell value">128 GB</div>225 </div>226 <div class="row alt">227 <div class="cell label">Product Dimensions</div>228 <div class="cell value">0.78 x 7.78 x 16.09 cm; 201 Grams</div>229 </div>230 <div class="row">231 <div class="cell label">Batteries</div>232 <div class="cell value">1 Lithium Ion batteries required. (included)</div>233 </div>234 </div>235 </div>236 </div>237 238 <div class="bottom-nav">239 <div class="nav-item active">240 <svg viewBox="0 0 24 24">241 <path d="M3 10l9-7 9 7v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V10z" fill="none" stroke="#20b6b0" stroke-width="2" stroke-linejoin="round"/>242 <path d="M9 21v-6h6v6" fill="none" stroke="#20b6b0" stroke-width="2"/>243 </svg>244 <div class="nav-label">Home</div>245 </div>246 <div class="nav-item">247 <svg viewBox="0 0 24 24">248 <circle cx="12" cy="8" r="4" fill="none" stroke="#222" stroke-width="2"/>249 <path d="M4 21c2-5 14-5 16 0" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/>250 </svg>251 <div class="nav-label">Account</div>252 </div>253 <div class="nav-item">254 <svg viewBox="0 0 24 24">255 <path d="M4 12a8 8 0 1 1 8 8" fill="none" stroke="#222" stroke-width="2"/>256 <path d="M1 12h4M19 4v4" stroke="#222" stroke-width="2" stroke-linecap="round"/>257 </svg>258 <div class="nav-label">Refresh</div>259 </div>260 <div class="nav-item">261 <svg viewBox="0 0 24 24">262 <path d="M6 6h15l-2 8H7L6 6z" fill="none" stroke="#222" stroke-width="2"/>263 <circle cx="9" cy="20" r="2" fill="#222"/>264 <circle cx="17" cy="20" r="2" fill="#222"/>265 </svg>266 <span class="badge">1</span>267 <div class="nav-label">Cart</div>268 </div>269 <div class="nav-item">270 <svg viewBox="0 0 24 24">271 <path d="M3 6h18M3 12h18M3 18h18" stroke="#222" stroke-width="2" stroke-linecap="round"/>272 </svg>273 <div class="nav-label">Menu</div>274 </div>275 </div>276 277</div>278</body>279</html>