GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Rendered Mobile UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1440px;11 height: 3120px;12 background: #101010;13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1440px;22 height: 120px;23 color: #f5f5f5;24 font-size: 46px;25 display: flex;26 align-items: center;27 padding: 0 40px;28 box-sizing: border-box;29 }30 .status-left { flex: 1; }31 .status-right {32 display: flex; align-items: center; gap: 30px;33 }34 .status-dot { width: 24px; height: 24px; background: #f5f5f5; border-radius: 50%; opacity: 0.9; }35 .battery {36 width: 60px; height: 32px; border: 4px solid #f5f5f5; position: relative; border-radius: 6px;37 }38 .battery::after {39 content: ""; position: absolute; right: -12px; top: 8px; width: 10px; height: 16px; background: #f5f5f5; border-radius: 2px;40 }41 .battery-level { position: absolute; left: 4px; top: 4px; height: 20px; width: 40px; background: #f5f5f5; }42 43 /* Action bar */44 .action-bar {45 position: absolute;46 top: 120px;47 left: 0;48 width: 1440px;49 height: 180px;50 display: flex;51 align-items: center;52 padding: 0 40px;53 box-sizing: border-box;54 }55 .ab-left, .ab-right { display: flex; align-items: center; }56 .ab-left { gap: 30px; }57 .ab-title {58 font-size: 60px;59 color: #d87c34;60 margin-left: 30px;61 margin-right: 40px;62 }63 .ab-right { gap: 48px; margin-left: auto; }64 .icon {65 width: 72px; height: 72px; fill: none; stroke: #e8e8e8; stroke-width: 4px;66 }67 .check { width: 72px; height: 72px; }68 69 /* Stage area */70 .stage {71 position: absolute;72 top: 300px;73 left: 0;74 width: 1440px;75 height: 2000px;76 background: #0b0b0b;77 }78 79 /* Slide canvas preview */80 .slide-preview {81 position: absolute;82 top: 240px;83 left: 60px;84 width: 1320px;85 height: 860px;86 background: #223432;87 box-shadow: 0 0 0 2px #2e4240 inset;88 }89 .slide-right {90 position: absolute;91 right: 0;92 top: 0;93 width: 360px;94 height: 100%;95 background: linear-gradient(180deg, #b8deb1 0%, #a6d89d 100%);96 opacity: 0.85;97 }98 .slide-title-box {99 position: absolute;100 left: 160px;101 top: 480px;102 width: 720px;103 height: 260px;104 border: 2px dashed rgba(255,255,255,0.25);105 display: flex;106 align-items: center;107 justify-content: center;108 text-align: center;109 }110 .slide-title {111 font-size: 92px;112 color: #ffffff;113 line-height: 1.1;114 font-weight: 500;115 text-shadow: 0 1px 0 rgba(0,0,0,0.2);116 }117 .slide-subtitle {118 position: absolute;119 left: 320px;120 top: 430px;121 color: #cfd8dc;122 font-size: 34px;123 }124 125 /* Notes & Comments line */126 .notes-comments {127 position: absolute;128 top: 1320px;129 left: 60px;130 width: 1320px;131 height: 80px;132 display: flex;133 align-items: center;134 gap: 80px;135 color: #e6e6e6;136 font-size: 48px;137 }138 .note-icon, .comment-icon {139 width: 54px; height: 54px; stroke: #e6e6e6; fill: none; stroke-width: 5px;140 margin-right: 20px;141 }142 .notes, .comments { display: flex; align-items: center; }143 144 /* Thumbnail strip */145 .thumb-strip {146 position: absolute;147 top: 1420px;148 left: 0;149 width: 1440px;150 height: 420px;151 background: #0a0a0a;152 padding: 40px;153 box-sizing: border-box;154 display: flex;155 gap: 50px;156 }157 .thumb {158 width: 300px;159 height: 300px;160 background: #223432;161 border: 2px solid #304744;162 position: relative;163 }164 .thumb .right-green {165 position: absolute; right: 0; top: 0; width: 70px; height: 100%; background: #a9d7a3;166 }167 .thumb-number {168 position: absolute;169 bottom: -54px;170 left: 0;171 width: 100%;172 text-align: center;173 color: #ffffff;174 font-size: 40px;175 }176 .thumb.selected::after {177 content: "";178 position: absolute; left: 0; bottom: -12px; width: 100%; height: 24px; background: #c96b2a;179 }180 181 /* Bottom editing toolbar */182 .bottom-toolbar {183 position: absolute;184 bottom: 160px;185 left: 0;186 width: 1440px;187 height: 180px;188 padding: 0 40px;189 box-sizing: border-box;190 display: flex;191 gap: 40px;192 align-items: center;193 background: #111111;194 }195 .tool-btn {196 width: 120px; height: 120px;197 border: 2px solid #3a3a3a;198 background: #1a1a1a;199 display: flex; align-items: center; justify-content: center;200 border-radius: 8px;201 }202 .tool-icon { width: 72px; height: 72px; stroke: #e8e8e8; fill: none; stroke-width: 4px; }203 204 /* Gesture pill */205 .gesture-pill {206 position: absolute;207 bottom: 60px;208 left: 50%;209 transform: translateX(-50%);210 width: 400px;211 height: 18px;212 background: #d9d9d9;213 border-radius: 12px;214 opacity: 0.7;215 }216</style>217</head>218<body>219<div id="render-target">220 221 <!-- Status Bar -->222 <div class="status-bar">223 <div class="status-left">8:42</div>224 <div class="status-right">225 <div class="status-dot"></div>226 <div class="status-dot"></div>227 <svg class="icon" viewBox="0 0 24 24" stroke="#f5f5f5"><path d="M3 12c0-3.3 2.7-6 6-6 2.1 0 4 1.1 5.1 2.8 0.6-0.1 1.2-0.2 1.9-0.2 3.3 0 6 2.7 6 6h-19z"/></svg>228 <div class="battery"><div class="battery-level"></div></div>229 </div>230 </div>231 232 <!-- Action Bar -->233 <div class="action-bar">234 <svg class="check" viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" stroke="#e8e8e8" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>235 <div class="ab-title">Presentation (1)</div>236 237 <div class="ab-right">238 <!-- Pencil -->239 <svg class="icon" viewBox="0 0 24 24"><path d="M3 21l5-1 11-11-4-4L4 16l-1 5zM15 5l4 4" stroke-linecap="round" stroke-linejoin="round"/></svg>240 <!-- Cloud upload -->241 <svg class="icon" viewBox="0 0 24 24"><path d="M6 18h12a4 4 0 0 0 0-8c-0.3-3-2.7-5-6-5-3.3 0-6 2.7-6 6-2.2 0-4 1.8-4 4s1.8 3 4 3z"/><path d="M12 12v6M9.5 14.5L12 12l2.5 2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>242 <!-- Search -->243 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5" stroke-linecap="round"/></svg>244 <!-- Slideshow screen -->245 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="12" rx="1"/><path d="M9 19l-2 3M15 19l2 3" stroke-linecap="round"/></svg>246 <!-- Undo/curved arrow -->247 <svg class="icon" viewBox="0 0 24 24"><path d="M9 7H5l4-4M5 7c7 0 12 3 12 9 0 2-1 4-3 5" stroke-linecap="round" stroke-linejoin="round"/></svg>248 <!-- Kebab menu -->249 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>250 </div>251 </div>252 253 <!-- Main Stage Area -->254 <div class="stage">255 <!-- Slide Preview -->256 <div class="slide-preview">257 <div class="slide-right"></div>258 <div class="slide-subtitle">Double tap to add subtitle</div>259 <div class="slide-title-box">260 <div class="slide-title">Double tap to<br>add title</div>261 </div>262 </div>263 264 <!-- Notes & Comments -->265 <div class="notes-comments">266 <div class="notes">267 <svg class="note-icon" viewBox="0 0 24 24"><path d="M4 4h12v14l-4-4H4z"/></svg>268 <span>Notes</span>269 </div>270 <div class="comments">271 <svg class="comment-icon" viewBox="0 0 24 24"><path d="M4 5h16v12H8l-4 4z"/></svg>272 <span>Comments</span>273 </div>274 </div>275 276 <!-- Thumbnail strip -->277 <div class="thumb-strip">278 <div class="thumb selected">279 <div class="right-green"></div>280 <div class="thumb-number">1</div>281 </div>282 <div class="thumb">283 <div class="right-green"></div>284 <div class="thumb-number">2</div>285 </div>286 <div class="thumb">287 <div class="right-green"></div>288 <div class="thumb-number">3</div>289 </div>290 <div class="thumb">291 <div class="right-green"></div>292 <div class="thumb-number">4</div>293 </div>294 </div>295 </div>296 297 <!-- Bottom editing toolbar -->298 <div class="bottom-toolbar">299 <div class="tool-btn">300 <!-- grid/windows icon -->301 <svg class="tool-icon" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>302 </div>303 <div class="tool-btn">304 <!-- add/plus -->305 <svg class="tool-icon" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke-linecap="round"/></svg>306 </div>307 <div class="tool-btn">308 <!-- table -->309 <svg class="tool-icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12"/><path d="M3 10h18M9 6v12M15 6v12" /></svg>310 </div>311 <div class="tool-btn">312 <!-- image -->313 <svg class="tool-icon" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14"/><circle cx="9" cy="10" r="2"/><path d="M7 17l4-4 4 3 3-3" /></svg>314 </div>315 <div class="tool-btn">316 <!-- shape circle -->317 <svg class="tool-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7"/></svg>318 </div>319 <div class="tool-btn">320 <!-- text A -->321 <svg class="tool-icon" viewBox="0 0 24 24"><path d="M12 5l6 14h-3l-1-3H10l-1 3H6l6-14zm-1.5 9h3" /></svg>322 </div>323 <div class="tool-btn">324 <!-- camera -->325 <svg class="tool-icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M9 6l2-2h2l2 2"/><circle cx="12" cy="12" r="3"/></svg>326 </div>327 <div class="tool-btn">328 <!-- crop -->329 <svg class="tool-icon" viewBox="0 0 24 24"><path d="M7 3v14h14M3 7h14v14" stroke-linecap="round"/></svg>330 </div>331 <div class="tool-btn">332 <!-- right arrow -->333 <svg class="tool-icon" viewBox="0 0 24 24"><path d="M5 12h14M13 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/></svg>334 </div>335 </div>336 337 <!-- Gesture pill -->338 <div class="gesture-pill"></div>339</div>340</body>341</html>