GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Rendering</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #FFFFFF;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14 }15 .status-bar {16 height: 90px; background: #1E1E1E;17 display: flex; align-items: center; padding: 0 32px; font-size: 34px;18 color: #EDEDED;19 }20 .status-icons { margin-left: 24px; display: flex; gap: 24px; align-items: center; }21 .top-toolbar {22 height: 110px; background: #1E1E1E;23 display: flex; align-items: center; justify-content: space-between;24 padding: 0 24px; border-bottom: 1px solid #2E2E2E;25 }26 .toolbar-right { display: flex; gap: 36px; align-items: center; }27 .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #FFFFFF; stroke-width: 3; }28 .content { padding: 24px 32px 260px 32px; }29 .divider { height: 1px; background: #303030; margin: 24px 0; }30 .section-title {31 font-size: 52px; font-weight: 700; display: flex; align-items: center; justify-content: space-between;32 margin-top: 8px; margin-bottom: 20px;33 }34 .chevron-up { width: 42px; height: 42px; }35 .row { display: flex; align-items: center; gap: 24px; padding: 18px 0; }36 .row svg { width: 54px; height: 54px; stroke: #FFFFFF; fill: none; stroke-width: 3; }37 .row .text { font-size: 38px; line-height: 1.3; color: #EDEDED; }38 .muted { color: #BDBDBD; }39 .link { color: #8AB4F8; font-size: 38px; padding: 16px 0; }40 .seller-card { display: flex; align-items: center; gap: 28px; padding: 26px 0; }41 .avatar {42 width: 140px; height: 140px; border-radius: 50%;43 background: #E0E0E0; border: 1px solid #BDBDBD;44 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 24px; text-align: center; padding: 10px;45 }46 .seller-info .name { font-size: 46px; font-weight: 600; }47 .seller-info .role { font-size: 34px; color: #BDBDBD; margin-top: 8px; }48 .seller-actions { display: flex; gap: 30px; margin-top: 24px; }49 .outline-btn {50 flex: 1;51 border: 3px solid #D9D9D9; color: #FFFFFF; background: transparent;52 padding: 26px 24px; border-radius: 80px; font-size: 40px; font-weight: 600;53 display: flex; align-items: center; justify-content: center; gap: 18px;54 }55 .outline-btn svg { width: 44px; height: 44px; stroke: #FFFFFF; fill: none; stroke-width: 3; }56 .subheader { font-size: 42px; font-weight: 600; margin-top: 34px; }57 /* Add to cart overlay */58 .add-cart-overlay {59 position: absolute; left: 0; right: 0; bottom: 210px;60 background: rgba(32,32,32,0.95); padding: 30px 0;61 box-shadow: 0 -6px 18px rgba(0,0,0,0.4);62 }63 .add-cart-pill {64 width: 960px; height: 120px; margin: 0 auto;65 background: #FFFFFF; color: #111111; border-radius: 80px;66 display: flex; align-items: center; justify-content: center;67 font-size: 46px; font-weight: 700;68 }69 /* Bottom navigation bar */70 .bottom-nav {71 position: absolute; left: 0; right: 0; bottom: 0;72 height: 160px; background: #262626; border-top: 1px solid #3A3A3A;73 display: flex; justify-content: space-around; align-items: center;74 color: #EDEDED;75 }76 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 30px; }77 .nav-item svg { width: 56px; height: 56px; stroke: #EDEDED; fill: none; stroke-width: 3; }78 .gesture-bar {79 position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);80 width: 360px; height: 12px; border-radius: 8px; background: #E0E0E0; opacity: 0.8;81 }82</style>83</head>84<body>85<div id="render-target">86 <!-- Status bar -->87 <div class="status-bar">88 <div>11:15</div>89 <div class="status-icons">90 <span>ib</span>91 <span>LR</span>92 <span>◻︎</span>93 <span>◯</span>94 <span>•</span>95 </div>96 <div style="margin-left:auto; display:flex; gap:18px; align-items:center;">97 <!-- WiFi -->98 <svg viewBox="0 0 48 48"><path d="M4 16c10-8 30-8 40 0M10 24c7-5 21-5 28 0M18 30c4-3 8-3 12 0M24 36l4 4-4 4-4-4 4-4z"/></svg>99 <!-- Battery -->100 <svg viewBox="0 0 48 48"><rect x="4" y="12" width="36" height="24" rx="4" stroke="#EDEDED" fill="none" stroke-width="3"></rect><rect x="40" y="18" width="4" height="12" rx="1" stroke="#EDEDED" fill="none" stroke-width="3"></rect><rect x="8" y="16" width="24" height="16" fill="#EDEDED"></rect></svg>101 </div>102 </div>103 104 <!-- Top toolbar -->105 <div class="top-toolbar">106 <div class="icon-btn">107 <!-- Back arrow -->108 <svg viewBox="0 0 48 48"><path d="M30 10 L14 24 L30 38" /></svg>109 </div>110 <div class="toolbar-right">111 <div class="icon-btn">112 <!-- Chat bubble -->113 <svg viewBox="0 0 48 48"><path d="M8 10h32v22H20l-8 6v-6H8z"/></svg>114 </div>115 <div class="icon-btn">116 <!-- Share -->117 <svg viewBox="0 0 48 48"><circle cx="10" cy="24" r="6"></circle><circle cx="38" cy="12" r="6"></circle><circle cx="38" cy="36" r="6"></circle><path d="M16 24 L32 14 M16 24 L32 34"/></svg>118 </div>119 <div class="icon-btn">120 <!-- Heart -->121 <svg viewBox="0 0 48 48"><path d="M24 40s-14-8-18-16c-4-8 4-16 12-12 4 2 6 6 6 6s2-4 6-6c8-4 16 4 12 12-4 8-18 16-18 16z"/></svg>122 </div>123 </div>124 </div>125 126 <div class="content">127 <div class="divider"></div>128 129 <!-- Item details -->130 <div class="section-title">131 <span>Item details</span>132 <svg class="chevron-up" viewBox="0 0 24 24"><path d="M4 14 L12 8 L20 14" stroke="#FFFFFF" stroke-width="3" fill="none"/></svg>133 </div>134 135 <div class="row">136 <!-- Hand icon -->137 <svg viewBox="0 0 48 48"><path d="M8 28c2-10 4-14 8-14 3 0 6 6 6 6V14c0-2 2-4 4-4s4 2 4 4v8-8c0-2 2-4 4-4s4 2 4 4v14c0 6-6 10-12 10-10 0-16-6-18-14z"/></svg>138 <div class="text">Handmade item</div>139 </div>140 141 <div class="row">142 <!-- Truck icon -->143 <svg viewBox="0 0 48 48"><rect x="4" y="16" width="26" height="16" rx="2"></rect><path d="M30 20h8l6 6v6h-14z"></path><circle cx="12" cy="36" r="4"></circle><circle cx="34" cy="36" r="4"></circle></svg>144 <div class="text">Only ships to United States from New Jersey.</div>145 </div>146 147 <div class="link">Read item description</div>148 149 <div class="divider"></div>150 151 <!-- Shipping & policies -->152 <div class="section-title">153 <span>Shipping & policies</span>154 <svg class="chevron-up" viewBox="0 0 24 24"><path d="M4 14 L12 8 L20 14" stroke="#FFFFFF" stroke-width="3" fill="none"/></svg>155 </div>156 157 <div class="row">158 <!-- Calendar -->159 <svg viewBox="0 0 48 48"><rect x="6" y="10" width="36" height="28" rx="4"></rect><path d="M12 6v8M36 6v8M6 18h36"/></svg>160 <div class="text">Arrives by Dec 11-16</div>161 </div>162 163 <div class="row">164 <!-- Location pin -->165 <svg viewBox="0 0 48 48"><path d="M24 6c8 0 12 6 12 12 0 10-12 20-12 20S12 28 12 18c0-6 4-12 12-12z"></path><circle cx="24" cy="18" r="4"></circle></svg>166 <div class="text">Ships from United States</div>167 </div>168 169 <div class="row">170 <!-- Truck icon -->171 <svg viewBox="0 0 48 48"><rect x="4" y="16" width="26" height="16" rx="2"></rect><path d="M30 20h8l6 6v6h-14z"></path><circle cx="12" cy="36" r="4"></circle><circle cx="34" cy="36" r="4"></circle></svg>172 <div class="text">Select destination</div>173 <!-- Pencil -->174 <svg viewBox="0 0 48 48"><path d="M34 6l8 8-22 22-10 2 2-10zM30 10l8 8"/></svg>175 </div>176 177 <div class="row">178 <!-- Return icon -->179 <svg viewBox="0 0 48 48"><path d="M10 20h16c8 0 12 6 12 12" ></path><path d="M10 20l8-8M10 20l8 8"/></svg>180 <div class="text">Returns & exchanges: Accepted within 30 days</div>181 </div>182 183 <div class="link">See full shipping policy</div>184 185 <div class="divider"></div>186 187 <!-- Seller card -->188 <div class="seller-card">189 <div class="avatar">[IMG: Seller avatar with flags]</div>190 <div class="seller-info">191 <div class="name">Peter Kim</div>192 <div class="role">Owner of DesignInGifts</div>193 </div>194 </div>195 196 <div class="seller-actions">197 <button class="outline-btn">198 <svg viewBox="0 0 48 48"><path d="M24 42s-14-8-18-16c-4-8 4-16 12-12 4 2 6 6 6 6s2-4 6-6c8-4 16 4 12 12-4 8-18 16-18 16z"/></svg>199 <span>Follow shop</span>200 </button>201 <button class="outline-btn">202 <svg viewBox="0 0 48 48"><path d="M8 10h32v22H20l-8 6v-6H8z"/></svg>203 <span>Message seller</span>204 </button>205 </div>206 207 <div class="subheader">More items from this shop</div>208 </div>209 210 <!-- Add to cart overlay -->211 <div class="add-cart-overlay">212 <div class="add-cart-pill">Add to cart</div>213 </div>214 215 <!-- Gesture pill -->216 <div class="gesture-bar"></div>217 218 <!-- Bottom navigation -->219 <div class="bottom-nav">220 <div class="nav-item">221 <svg viewBox="0 0 48 48"><path d="M6 24l18-14 18 14v14H30V28H18v10H6z"/></svg>222 <div>Home</div>223 </div>224 <div class="nav-item">225 <svg viewBox="0 0 48 48"><path d="M24 42s-14-8-18-16c-4-8 4-16 12-12 4 2 6 6 6 6s2-4 6-6c8-4 16 4 12 12-4 8-18 16-18 16z"/></svg>226 <div>Favorites</div>227 </div>228 <div class="nav-item">229 <svg viewBox="0 0 48 48"><path d="M8 8h20l4 8H12zM12 20h24l-6 20H10z"/></svg>230 <div>Deals</div>231 </div>232 <div class="nav-item">233 <svg viewBox="0 0 48 48"><circle cx="24" cy="16" r="8"></circle><path d="M8 40c2-10 10-14 16-14s14 4 16 14"/></svg>234 <div>You</div>235 </div>236 <div class="nav-item">237 <svg viewBox="0 0 48 48"><path d="M6 10h6l4 24h20l4-16H18"></path><circle cx="20" cy="40" r="3"></circle><circle cx="36" cy="40" r="3"></circle></svg>238 <div>Cart</div>239 </div>240 </div>241</div>242</body>243</html>