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>Presentation Mobile UI</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: #0e0e0e;14 color: #fff;15 }16 17 /* Top system + title area */18 .top-bar { position: absolute; left: 0; top: 0; width: 100%; height: 180px; }19 .status-row {20 height: 70px;21 padding: 0 28px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #cfcfcf;26 font-size: 34px;27 letter-spacing: 1px;28 }29 .status-right { display: flex; align-items: center; gap: 22px; }30 .title-row {31 height: 110px;32 padding: 0 26px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 }37 .title { color: #d27a3a; font-size: 44px; font-weight: 600; }38 .icon-tray { display: flex; align-items: center; gap: 26px; }39 .icon-btn {40 width: 60px; height: 60px; border-radius: 12px;41 display: flex; align-items: center; justify-content: center;42 color: #d6d6d6; background: rgba(255,255,255,0.05);43 }44 .icon-btn svg { width: 32px; height: 32px; fill: #d6d6d6; }45 46 /* Canvas area where slide is visible */47 .canvas-area {48 position: absolute;49 top: 180px;50 left: 0;51 width: 100%;52 height: 1500px;53 background: #000;54 }55 .slide-wrapper {56 height: 100%;57 display: flex;58 align-items: center;59 justify-content: center;60 }61 .slide-surface {62 width: 940px;63 height: 540px;64 background: #1d1d1d;65 position: relative;66 box-shadow: 0 0 0 2px rgba(255,255,255,0.08) inset;67 }68 .slide-left {69 position: absolute; left: 58px; top: 40px; bottom: 40px; width: 600px;70 background: #233330;71 }72 .slide-right {73 position: absolute; right: 40px; top: 40px; bottom: 40px; width: 240px;74 background: #cfe8c8;75 opacity: 0.85;76 }77 .guide-line {78 position: absolute; left: 76px; top: 28px; bottom: 28px; width: 2px;79 background: rgba(0,255,255,0.6);80 }81 .quote {82 position: absolute;83 left: 155px;84 right: 280px;85 top: 170px;86 color: #ffffff;87 font-size: 60px;88 line-height: 1.15;89 font-weight: 600;90 }91 92 /* Notes / Comments utility row */93 .utility-row {94 position: absolute; left: 0; top: 1680px; width: 100%; height: 140px;95 display: flex; align-items: center; gap: 40px;96 padding: 0 40px;97 background: #0e0e0e;98 border-top: 1px solid #222;99 }100 .util-item {101 display: flex; align-items: center; gap: 16px; color: #d8d8d8; font-size: 40px;102 }103 .util-item svg { width: 36px; height: 36px; fill: #d8d8d8; }104 .util-spacer { flex: 1; }105 .add-btn {106 width: 72px; height: 72px; border: 1px solid #5a5a5a; color: #d8d8d8;107 display: flex; align-items: center; justify-content: center;108 border-radius: 10px;109 }110 111 /* Thumbnail strip */112 .thumb-strip {113 position: absolute; left: 0; top: 1820px; width: 100%; height: 280px;114 background: #0b0b0b;115 display: flex; align-items: center;116 padding: 0 24px;117 gap: 26px;118 }119 .thumb {120 width: 260px; height: 160px; background: #263833; position: relative;121 border: 2px solid #2f2f2f;122 box-shadow: 0 0 0 6px rgba(255,255,255,0.03) inset;123 }124 .thumb::after {125 content: "1";126 position: absolute;127 left: 0; right: 0; bottom: -40px;128 height: 40px; background: #c66d2c; color: #fff;129 display: flex; align-items: center; justify-content: center;130 font-weight: 600;131 }132 .thumb img { display: none; }133 .thumb-caption {134 position: absolute; left: 20px; right: 20px; bottom: 18px;135 font-size: 20px; color: #ddd; opacity: 0.85;136 }137 138 /* Bottom formatting toolbar */139 .format-toolbar {140 position: absolute; left: 0; bottom: 0; width: 100%; height: 300px;141 background: #111111;142 border-top: 1px solid #222;143 padding: 22px 26px;144 display: flex; flex-direction: column; gap: 26px;145 }146 .format-row {147 display: flex; align-items: center; gap: 40px;148 }149 .fmt {150 font-size: 64px; color: #e8e8e8;151 width: 84px; text-align: center;152 }153 .fmt.italic { font-style: italic; }154 .fmt.underline { text-decoration: underline; text-underline-offset: 6px; }155 .fmt-accent {156 position: relative;157 }158 .fmt-accent::after {159 content: "";160 position: absolute; left: 18px; right: 18px; bottom: -6px; height: 10px;161 background: #e54b3a; border-radius: 3px;162 }163 .bullet-box {164 width: 70px; height: 48px;165 border: 1px solid #3a3a3a; border-radius: 6px;166 display: flex; align-items: center; justify-content: center;167 color: #d0d0d0; font-size: 36px;168 }169 .mini-icon { width: 64px; height: 52px; display: flex; align-items: center; justify-content: center; }170 .mini-icon svg { width: 42px; height: 42px; fill: #d0d0d0; }171 172 /* Simple placeholder image style if needed */173 .img-placeholder {174 background: #E0E0E0;175 border: 1px solid #BDBDBD;176 color: #757575;177 display: flex; align-items: center; justify-content: center;178 }179</style>180</head>181<body>182<div id="render-target">183 184 <!-- Top area -->185 <div class="top-bar">186 <div class="status-row">187 <div class="time">8:36</div>188 <div class="status-right">189 <!-- simple status glyphs -->190 <svg width="26" height="26" viewBox="0 0 24 24"><rect x="1" y="9" width="4" height="10" fill="#bdbdbd"/><rect x="7" y="6" width="4" height="13" fill="#bdbdbd"/><rect x="13" y="3" width="4" height="16" fill="#bdbdbd"/><rect x="19" y="1" width="4" height="18" fill="#bdbdbd"/></svg>191 <svg width="26" height="26" viewBox="0 0 24 24"><path fill="#bdbdbd" d="M21 8v8a1 1 0 0 1-1 1h-1v2h-2v-2H7v2H5v-2H4a1 1 0 0 1-1-1V8a7 7 0 0 1 18 0z"/></svg>192 <svg width="26" height="26" viewBox="0 0 24 24"><rect x="7" y="2" width="10" height="20" rx="2" ry="2" fill="none" stroke="#bdbdbd" stroke-width="2"/><rect x="10" y="5" width="4" height="10" fill="#bdbdbd"/></svg>193 </div>194 </div>195 <div class="title-row">196 <div class="title">Presentation (1)</div>197 <div class="icon-tray">198 <!-- pen -->199 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm2.92 2.33l-.5-.5 9.9-9.9.5.5-9.9 9.9zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.34 1.34 3.75 3.75 1.34-1.34z"/></svg></div>200 <!-- cloud -->201 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M6 19a4 4 0 110-8 5 5 0 019.58-1.13A4.5 4.5 0 1118 19H6z"/></svg></div>202 <!-- search -->203 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M10 18a8 8 0 106.32-3.1l4.39 4.39-1.42 1.42-4.39-4.39A8 8 0 0010 18zm0-2a6 6 0 110-12 6 6 0 010 12z"/></svg></div>204 <!-- layout/slide -->205 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm2 2v10h14V7H5zm2 2h10v3H7V9z"/></svg></div>206 <!-- undo -->207 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 5v3H6l4-4-4-4h6a8 8 0 110 16H8v-2h4a6 6 0 100-12z"/></svg></div>208 <!-- kebab -->209 <div class="icon-btn"><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></div>210 </div>211 </div>212 </div>213 214 <!-- Editing canvas area -->215 <div class="canvas-area">216 <div class="slide-wrapper">217 <div class="slide-surface">218 <div class="guide-line"></div>219 <div class="slide-left"></div>220 <div class="slide-right"></div>221 <div class="quote">“We can’t help everyone, but everyone can help someone”</div>222 </div>223 </div>224 </div>225 226 <!-- Notes / Comments row -->227 <div class="utility-row">228 <div class="util-item">229 <svg viewBox="0 0 24 24"><path d="M4 3h16v14H7l-3 3V3z"/></svg>230 <span>Notes</span>231 </div>232 <div class="util-item">233 <svg viewBox="0 0 24 24"><path d="M21 6H3v12h6l3 3 3-3h6V6z"/></svg>234 <span>Comments</span>235 </div>236 <div class="util-spacer"></div>237 <div class="add-btn">238 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z" fill="#d8d8d8"/></svg>239 </div>240 </div>241 242 <!-- Thumbnails strip -->243 <div class="thumb-strip">244 <div class="thumb">245 <div class="thumb-caption">“We can't help everyone, but everyone can help someone”</div>246 </div>247 </div>248 249 <!-- Bottom formatting toolbar -->250 <div class="format-toolbar">251 <div class="format-row">252 <div class="fmt">B</div>253 <div class="fmt italic">I</div>254 <div class="fmt underline">U</div>255 <div class="fmt fmt-accent">A</div>256 <div class="mini-icon">257 <svg viewBox="0 0 24 24"><path d="M4 7h16v2H4V7zm0 4h10v2H4v-2zm0 4h16v2H4v-2z"/></svg>258 </div>259 <div class="mini-icon">260 <svg viewBox="0 0 24 24"><circle cx="6" cy="8" r="1.6"/><circle cx="6" cy="12" r="1.6"/><circle cx="6" cy="16" r="1.6"/><path d="M10 7h10v2H10V7zm0 4h10v2H10v-2zm0 4h10v2H10v-2z"/></svg>261 </div>262 <div class="mini-icon">263 <svg viewBox="0 0 24 24"><path d="M6 11h12v2H6zM6 7h12v2H6zM6 15h12v2H6z"/></svg>264 </div>265 <div class="mini-icon">266 <svg viewBox="0 0 24 24"><path d="M7 7h10v2H7zM4 11h13v2H4zM7 15h10v2H7z"/></svg>267 </div>268 <div class="mini-icon">269 <svg viewBox="0 0 24 24"><path d="M8 7h10v2H8zM6 11h12v2H6zM4 15h14v2H4z"/></svg>270 </div>271 <div class="mini-icon">272 <svg viewBox="0 0 24 24"><path d="M9 7h10v2H9zM5 11h14v2H5zM9 15h10v2H9z"/></svg>273 </div>274 <div class="mini-icon">275 <svg viewBox="0 0 24 24"><path d="M6 8h12v2H6z"/><path d="M6 14h12v2H6z"/></svg>276 </div>277 </div>278 <div class="format-row">279 <div class="bullet-box">•</div>280 <div class="bullet-box">1.</div>281 <div class="bullet-box">A</div>282 <div class="bullet-box">→</div>283 <div class="bullet-box">⇄</div>284 <div class="bullet-box">↔</div>285 <div class="bullet-box">⇥</div>286 <div class="bullet-box">⇤</div>287 </div>288 </div>289 290</div>291</body>292</html>