GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile 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;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 color: #fff;15 }16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 100px;23 background: #000000;24 padding: 0 36px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 box-sizing: border-box;29 letter-spacing: 0.5px;30 font-size: 36px;31 }32 .status-icons {33 display: flex;34 gap: 28px;35 align-items: center;36 }37 .dot { width: 12px; height: 12px; background: #9AA0A6; border-radius: 50%; display: inline-block; }38 .battery {39 width: 48px; height: 28px; border: 2px solid #e0e0e0; border-radius: 6px; position: relative;40 }41 .battery::after {42 content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #e0e0e0; border-radius: 2px;43 }44 .battery .level { width: 60%; height: 100%; background: #e0e0e0; }45 46 /* App bar */47 .app-bar {48 position: absolute;49 top: 100px;50 left: 0;51 width: 1080px;52 height: 120px;53 background: #1e1e1e;54 display: flex;55 align-items: center;56 padding: 0 28px;57 box-sizing: border-box;58 }59 .app-title {60 position: absolute;61 left: 0; right: 0; text-align: center;62 font-size: 40px; font-weight: 600;63 color: #E0E0E0;64 }65 .toolbar-left, .toolbar-right, .toolbar-mid {66 display: flex; align-items: center; gap: 34px;67 }68 .toolbar-left { position: absolute; left: 28px; }69 .toolbar-mid { position: absolute; left: 280px; }70 .toolbar-right { position: absolute; right: 24px; }71 72 .icon {73 width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;74 }75 .icon svg { width: 60px; height: 60px; fill: none; stroke: #E0E0E0; stroke-width: 6; }76 77 /* Warning banner */78 .banner {79 position: absolute;80 top: 220px;81 left: 0;82 width: 1080px;83 height: 120px;84 background: #b59f6a;85 color: #1e1e1e;86 display: flex; align-items: center;87 padding: 0 32px;88 box-sizing: border-box;89 font-size: 38px;90 }91 .banner .chev {92 margin-left: auto;93 width: 28px; height: 28px; border-right: 6px solid #333; border-bottom: 6px solid #333; transform: rotate(45deg);94 }95 96 /* Document area */97 .doc-area {98 position: absolute;99 top: 340px;100 left: 0;101 width: 1080px;102 height: 1460px;103 background: #f8f8f8;104 color: #111;105 padding: 48px 56px;106 box-sizing: border-box;107 }108 .doc-text {109 font-size: 46px;110 line-height: 1.6;111 }112 .red-underline {113 border-bottom: 6px dotted #c62828;114 display: inline-block;115 padding-bottom: 6px;116 }117 .caret-drop {118 position: absolute;119 left: 60px;120 top: 600px;121 width: 56px;122 height: 92px;123 background: #173b7a;124 border-radius: 56px 56px 56px 56px / 80px 80px 24px 24px;125 display: flex; align-items: center; justify-content: center;126 }127 .caret-drop::after {128 content: "";129 width: 24px; height: 24px; background: #f5f7ff; border-radius: 50%;130 }131 132 /* Dim overlay for bottom sheet */133 .overlay {134 position: absolute;135 top: 0; left: 0;136 width: 1080px; height: 2400px;137 background: rgba(0,0,0,0.45);138 }139 140 /* Bottom sheet */141 .sheet {142 position: absolute;143 left: 0; bottom: 0;144 width: 1080px;145 height: 1000px;146 background: #ffffff;147 border-top-left-radius: 28px;148 border-top-right-radius: 28px;149 box-shadow: 0 -8px 24px rgba(0,0,0,0.4);150 color: #111;151 padding: 36px 56px;152 box-sizing: border-box;153 }154 .sheet .handle {155 width: 160px; height: 10px; background: #d6d6d6; border-radius: 10px;156 margin: 0 auto 24px auto;157 }158 .sheet-list {159 display: flex; flex-direction: column; gap: 44px;160 margin-top: 10px;161 }162 .sheet-item {163 display: flex; align-items: center; gap: 28px;164 font-size: 44px;165 }166 .sheet-icon {167 width: 68px; height: 68px; display: flex; align-items: center; justify-content: center;168 }169 .sheet-icon svg { width: 64px; height: 64px; stroke: #555; stroke-width: 5; fill: none; }170 .sheet-icon.save svg { stroke: #7E57C2; fill: none; }171 .sheet-icon.read svg { stroke: #4A90E2; }172 .sheet-icon.list svg { stroke: #777; }173</style>174</head>175<body>176<div id="render-target">177 178 <!-- Status Bar -->179 <div class="status-bar">180 <div class="time">7:58</div>181 <div class="status-icons">182 <span class="dot"></span>183 <span class="dot"></span>184 <span class="dot"></span>185 <div class="battery"><div class="level"></div></div>186 </div>187 </div>188 189 <!-- App Bar -->190 <div class="app-bar">191 <div class="toolbar-left">192 <div class="icon" title="Check">193 <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg>194 </div>195 </div>196 <div class="app-title">Movie Plans</div>197 <div class="toolbar-mid">198 <div class="icon" title="Pen">199 <svg viewBox="0 0 24 24"><path d="M4 20l5-1 9-9-4-4-9 9-1 5z"/><path d="M14 6l4 4"/></svg>200 </div>201 <div class="icon" title="Search">202 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><path d="M15 15l6 6"/></svg>203 </div>204 <div class="icon" title="Page">205 <svg viewBox="0 0 24 24"><rect x="4" y="3" width="14" height="18" rx="2"></rect><path d="M8 8h6M8 12h6M8 16h6"/></svg>206 </div>207 </div>208 <div class="toolbar-right">209 <div class="icon" title="Undo">210 <svg viewBox="0 0 24 24"><path d="M9 7L4 12l5 5"/><path d="M4 12h10a6 6 0 1 1 0 12"/></svg>211 </div>212 <div class="icon" title="More">213 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>214 </div>215 </div>216 </div>217 218 <!-- Warning Banner -->219 <div class="banner">220 Can't upload - Please sign into your account.221 <div class="chev"></div>222 </div>223 224 <!-- Document area -->225 <div class="doc-area">226 <div class="doc-text">227 I will buy the mov<span class="red-underline">ie</span> 2 more premium tickets for my friend <span class="red-underline">deniel</span> and his wife.228 </div>229 <div class="caret-drop"></div>230 </div>231 232 <!-- Dim overlay and bottom sheet -->233 <div class="overlay"></div>234 235 <div class="sheet">236 <div class="handle"></div>237 <div class="sheet-list">238 <div class="sheet-item">239 <div class="sheet-icon">240 <svg viewBox="0 0 24 24"><path d="M6 12v8h12v-8"/><path d="M12 4v10"/><path d="M9 7l3-3 3 3"/></svg>241 </div>242 <div>Share</div>243 </div>244 <div class="sheet-item">245 <div class="sheet-icon save">246 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"></rect><path d="M8 4v6h8V4"/><path d="M8 16h8"/></svg>247 </div>248 <div>Save</div>249 </div>250 <div class="sheet-item">251 <div class="sheet-icon">252 <svg viewBox="0 0 24 24"><path d="M6 4h12v16H6z"/><path d="M6 4l6 6 6-6"/></svg>253 </div>254 <div>Save As</div>255 </div>256 <div class="sheet-item">257 <div class="sheet-icon read">258 <svg viewBox="0 0 24 24"><path d="M3 18l9-6 9 6"/><path d="M3 6h18v12"/><path d="M3 6l9 6 9-6"/></svg>259 </div>260 <div>Read Aloud</div>261 </div>262 <div class="sheet-item">263 <div class="sheet-icon list">264 <svg viewBox="0 0 24 24"><path d="M6 6h12M6 12h12M6 18h12"/><circle cx="3" cy="6" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="18" r="2"/></svg>265 </div>266 <div>Headings</div>267 </div>268 <div class="sheet-item" style="opacity:0.5;">269 <div class="sheet-icon">270 <svg viewBox="0 0 24 24"><path d="M12 20a8 8 0 1 0-8-8"/></svg>271 </div>272 <div>History</div>273 </div>274 <div class="sheet-item">275 <div class="sheet-icon">276 <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2"></rect><path d="M9 8h6M9 12h6M9 16h6"/></svg>277 </div>278 <div>Print</div>279 </div>280 </div>281 </div>282 283</div>284</body>285</html>