GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #F6F6F6;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 110px;22 background: #FFFFFF;23 display: flex;24 align-items: center;25 padding: 0 36px;26 box-sizing: border-box;27 }28 .status-left { color: #111; font-weight: 600; font-size: 42px; }29 .status-right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 26px;34 }35 .status-dot {36 width: 28px; height: 28px; background: #DDD; border-radius: 50%;37 }38 39 /* Top app bar */40 .top-bar {41 position: absolute;42 top: 110px;43 left: 0;44 width: 1080px;45 height: 120px;46 background: #FFFFFF;47 border-bottom: 1px solid #E3E3E3;48 display: flex;49 align-items: center;50 padding: 0 24px;51 box-sizing: border-box;52 }53 .title {54 position: absolute;55 left: 0; right: 0;56 text-align: center;57 font-size: 42px;58 color: #333;59 font-weight: 600;60 }61 .bar-icons {62 margin-left: auto;63 display: flex;64 align-items: center;65 gap: 30px;66 }67 .bar-icon {68 width: 70px; height: 70px;69 display: flex; align-items: center; justify-content: center;70 border-radius: 12px;71 color: #555;72 }73 .bar-icon svg { width: 44px; height: 44px; }74 75 /* Warning banner */76 .warning-banner {77 position: absolute;78 top: 230px;79 left: 0;80 width: 1080px;81 height: 90px;82 background: #F2E181;83 color: #3b3b3b;84 display: flex;85 align-items: center;86 padding: 0 32px;87 box-sizing: border-box;88 font-size: 34px;89 }90 .banner-right {91 margin-left: auto;92 color: #5c5210;93 display: flex; align-items: center;94 }95 96 /* Document area */97 .doc-area {98 position: absolute;99 top: 320px;100 left: 0;101 width: 1080px;102 height: 1620px;103 background: #FFFFFF;104 }105 .doc-dim {106 position: absolute;107 top: 320px;108 left: 0;109 width: 1080px;110 height: 1620px;111 background: rgba(0,0,0,0.24);112 pointer-events: none;113 }114 .doc-text {115 position: absolute;116 top: 380px;117 left: 60px;118 width: 960px;119 color: #111;120 font-size: 44px;121 line-height: 72px;122 }123 .underlined-red {124 border-bottom: 3px solid #D04B4B;125 display: inline-block;126 padding-bottom: 3px;127 }128 .caret {129 position: absolute;130 top: 640px;131 left: 60px;132 width: 2px; height: 80px; background: #223A6E;133 }134 .handle {135 position: absolute;136 top: 720px;137 left: 48px;138 width: 48px; height: 78px;139 background: #1F3D76;140 border-radius: 26px 26px 48px 48px;141 box-shadow: inset 0 -18px 0 rgba(255,255,255,0.15);142 }143 144 /* Bottom sheet */145 .sheet {146 position: absolute;147 bottom: 100px;148 left: 0;149 width: 1080px;150 height: 980px;151 background: #FFFFFF;152 border-top-left-radius: 26px;153 border-top-right-radius: 26px;154 box-shadow: 0 -8px 20px rgba(0,0,0,0.15);155 padding-top: 24px;156 }157 .sheet-handle {158 width: 140px; height: 8px;159 background: #D2D2D2;160 border-radius: 8px;161 margin: 0 auto 10px;162 }163 .sheet-content {164 padding: 20px 42px;165 box-sizing: border-box;166 }167 .sheet-item {168 display: flex;169 align-items: center;170 padding: 26px 0;171 border-bottom: 1px solid #EFEFEF;172 }173 .sheet-item:last-child { border-bottom: none; }174 .item-icon {175 width: 84px; height: 84px;176 border-radius: 16px;177 display: flex; align-items: center; justify-content: center;178 background: #F4F4F4;179 margin-right: 34px;180 }181 .item-icon svg { width: 52px; height: 52px; }182 .item-text {183 font-size: 44px; color: #222;184 }185 .item-disabled .item-text { color: #B9B9B9; }186 .purple { background: #F1E8FF; }187 .purple svg { fill: #7C4DFF; }188 .item-right {189 margin-left: auto;190 display: flex; align-items: center;191 }192 193 /* Dictation slider */194 .slider {195 width: 300px; height: 38px; background: #2F56A6; border-radius: 10px; position: relative;196 margin-left: 20px;197 }198 .slider-knob {199 position: absolute; right: -6px; top: -2px;200 width: 44px; height: 44px; background: #B6B6B6; border-radius: 10px;201 }202 203 /* Bottom navigation bar */204 .nav-bar {205 position: absolute;206 bottom: 0;207 left: 0;208 width: 1080px;209 height: 100px;210 background: #0A0A0A;211 display: flex;212 align-items: center;213 justify-content: center;214 }215 .home-pill {216 width: 220px; height: 12px; background: #CFCFCF; border-radius: 10px;217 }218</style>219</head>220<body>221<div id="render-target">222 223 <!-- Status Bar -->224 <div class="status-bar">225 <div class="status-left">7:58</div>226 <div class="status-right">227 <div class="status-dot"></div>228 <div class="status-dot"></div>229 <div class="status-dot"></div>230 <div class="status-dot"></div>231 </div>232 </div>233 234 <!-- Top App Bar -->235 <div class="top-bar">236 <div class="title">Movie Plans</div>237 <div class="bar-icons">238 <div class="bar-icon" title="Done">239 <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>240 </div>241 <div class="bar-icon" title="Draw">242 <svg viewBox="0 0 24 24"><path d="M3 21h6l12-12-6-6L3 15v6z" fill="none" stroke="#555" stroke-width="2"/></svg>243 </div>244 <div class="bar-icon" title="Search">245 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#555" stroke-width="2"/></svg>246 </div>247 <div class="bar-icon" title="Page">248 <svg viewBox="0 0 24 24"><path d="M5 3h10l4 4v14H5z" fill="none" stroke="#555" stroke-width="2"/></svg>249 </div>250 <div class="bar-icon" title="Undo">251 <svg viewBox="0 0 24 24"><path d="M9 6l-6 6 6 6" fill="none" stroke="#555" stroke-width="2"/><path d="M21 12c0-5-4-9-9-9" fill="none" stroke="#555" stroke-width="2"/></svg>252 </div>253 <div class="bar-icon" title="More">254 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#555"/><circle cx="12" cy="12" r="2" fill="#555"/><circle cx="12" cy="19" r="2" fill="#555"/></svg>255 </div>256 </div>257 </div>258 259 <!-- Warning Banner -->260 <div class="warning-banner">261 Can't upload - Please sign into your account.262 <div class="banner-right">263 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M9 6l6 6-6 6" stroke="#5c5210" stroke-width="2" fill="none"/></svg>264 </div>265 </div>266 267 <!-- Document Area -->268 <div class="doc-area"></div>269 <div class="doc-dim"></div>270 271 <div class="doc-text">272 I will buy the movie 2 more premium tickets<br>273 for my friend <span class="underlined-red">deniel</span> and his wife.274 </div>275 <div class="caret"></div>276 <div class="handle"></div>277 278 <!-- Bottom Sheet -->279 <div class="sheet">280 <div class="sheet-handle"></div>281 <div class="sheet-content">282 283 <div class="sheet-item">284 <div class="item-icon">285 <svg viewBox="0 0 24 24"><circle cx="6" cy="6" r="2" fill="#555"/><circle cx="18" cy="5" r="2" fill="#555"/><circle cx="18" cy="19" r="2" fill="#555"/><path d="M7 7l8-2" stroke="#555" stroke-width="2"/><path d="M7 7l10 10" stroke="#555" stroke-width="2"/></svg>286 </div>287 <div class="item-text">Share</div>288 </div>289 290 <div class="sheet-item">291 <div class="item-icon purple">292 <svg viewBox="0 0 24 24"><path d="M4 4h12v16H4z" fill="none" stroke="#7C4DFF" stroke-width="2"/><path d="M16 4l4 4v12h-4z" fill="none" stroke="#7C4DFF" stroke-width="2"/><rect x="7" y="12" width="6" height="5" fill="#7C4DFF"/></svg>293 </div>294 <div class="item-text">Save</div>295 </div>296 297 <div class="sheet-item">298 <div class="item-icon">299 <svg viewBox="0 0 24 24"><path d="M4 4h14v16H4z" fill="none" stroke="#555" stroke-width="2"/><path d="M8 16l4-4 4 4" fill="none" stroke="#555" stroke-width="2"/></svg>300 </div>301 <div class="item-text">Save As</div>302 </div>303 304 <div class="sheet-item">305 <div class="item-icon">306 <svg viewBox="0 0 24 24"><text x="6" y="16" font-size="12" fill="#555">A</text><path d="M16 8c2 2 2 4 0 6" stroke="#555" stroke-width="2" fill="none"/><path d="M18 6c3 3 3 7 0 10" stroke="#555" stroke-width="2" fill="none"/></svg>307 </div>308 <div class="item-text">Read Aloud</div>309 </div>310 311 <div class="sheet-item">312 <div class="item-icon">313 <svg viewBox="0 0 24 24"><rect x="5" y="6" width="14" height="12" rx="2" fill="none" stroke="#555" stroke-width="2"/><path d="M7 9h10" stroke="#555" stroke-width="2"/></svg>314 </div>315 <div class="item-text">Headings</div>316 </div>317 318 <div class="sheet-item item-disabled">319 <div class="item-icon">320 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#B9B9B9" stroke-width="2"/><path d="M12 7v6l4 2" stroke="#B9B9B9" stroke-width="2"/></svg>321 </div>322 <div class="item-text">History</div>323 </div>324 325 <div class="sheet-item">326 <div class="item-icon">327 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#555" stroke-width="2"/><path d="M8 6V4h8v2" stroke="#555" stroke-width="2"/></svg>328 </div>329 <div class="item-text">Print</div>330 </div>331 332 <div class="sheet-item">333 <div class="item-icon">334 <svg viewBox="0 0 24 24"><rect x="10" y="4" width="4" height="8" rx="2" fill="#555"/><path d="M8 12c0 4 8 4 8 0" stroke="#555" stroke-width="2" fill="none"/><rect x="9" y="16" width="6" height="5" rx="3" fill="#555"/></svg>335 </div>336 <div class="item-text">Dictation</div>337 <div class="item-right">338 <div class="slider">339 <div class="slider-knob"></div>340 </div>341 </div>342 </div>343 344 <div class="sheet-item">345 <div class="item-icon">346 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="none" stroke="#555" stroke-width="2"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M16 5l3 3M5 16l3 3" stroke="#555" stroke-width="2"/></svg>347 </div>348 <div class="item-text">Settings</div>349 </div>350 351 </div>352 </div>353 354 <!-- Bottom Navigation Bar -->355 <div class="nav-bar">356 <div class="home-pill"></div>357 </div>358 359</div>360</body>361</html>