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 - Slide Editor</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #000;14 color: #fff;15 }16 17 /* Top status bar */18 .status {19 position: absolute;20 top: 0;21 left: 0;22 width: 100%;23 height: 120px;24 background: #0e0e0e;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 30px;29 box-sizing: border-box;30 font-size: 44px;31 letter-spacing: 0.5px;32 }33 .status .left { display: flex; align-items: center; gap: 24px; }34 .status .center { opacity: 0.6; font-size: 40px; }35 .status .right { display: flex; align-items: center; gap: 26px; }36 .dot { width: 12px; height: 12px; background:#cfcfcf; border-radius: 50%; display:inline-block; }37 .icon {38 width: 42px; height: 42px; border-radius: 9px;39 border: 2px solid #888;40 display:flex; align-items:center; justify-content:center;41 }42 .battery {43 width: 52px; height: 26px; border:2px solid #bbb; position: relative; border-radius: 4px;44 }45 .battery:after { content:""; position:absolute; right:-8px; top:7px; width:6px; height:12px; background:#bbb; border-radius:1px; }46 .battery .level { position:absolute; left:2px; top:2px; height:20px; width:34px; background:#9fe07c; }47 48 /* Main slide area */49 .slide-area {50 position: absolute;51 top: 140px;52 left: 0;53 width: 100%;54 height: 1180px;55 display: flex;56 justify-content: center;57 align-items: flex-start;58 }59 .slide {60 width: 1030px;61 height: 650px;62 background: #fafafa;63 border: 1px solid #d6d6d6;64 box-sizing: border-box;65 position: relative;66 border-radius: 4px;67 }68 69 /* Red shape representing title box */70 .shape {71 position: absolute;72 top: 210px;73 left: 140px;74 width: 760px;75 height: 240px;76 background: #e53b34; /* vivid red */77 border-radius: 6px;78 display: flex;79 flex-direction: column;80 justify-content: center;81 align-items: center;82 color:#ffffff;83 }84 .shape:after {85 content:"";86 position: absolute;87 bottom: -26px;88 left: 50%;89 transform: translateX(-50%);90 width: 0;91 height: 0;92 border-left: 18px solid transparent;93 border-right: 18px solid transparent;94 border-top: 26px solid #e53b34;95 }96 .shape h1 {97 margin: 0;98 font-size: 66px;99 font-weight: 500;100 letter-spacing: 0.5px;101 }102 .shape .sub {103 margin-top: 18px;104 font-size: 28px;105 opacity: 0.85;106 }107 108 /* Selection overlay and handles */109 .selection {110 position: absolute;111 top: 200px;112 left: 130px;113 width: 780px;114 height: 260px;115 border: 1px dashed rgba(255,255,255,0.75);116 box-sizing: border-box;117 pointer-events: none;118 }119 .handle {120 position: absolute;121 width: 34px; height: 34px;122 background: #fafafa;123 border: 3px solid #9e9e9e;124 border-radius: 50%;125 box-shadow: 0 0 0 3px rgba(0,0,0,0.15) inset;126 }127 .handle.tl { top:-17px; left:-17px; }128 .handle.tr { top:-17px; right:-17px; }129 .handle.bl { bottom:-17px; left:-17px; }130 .handle.br { bottom:-17px; right:-17px; }131 .handle.tm { top:-17px; left: calc(50% - 17px); }132 .handle.mm { top: calc(50% - 17px); left:-17px; }133 .handle.mr { top: calc(50% - 17px); right:-17px; }134 .handle.bm { bottom:-17px; left: calc(50% - 17px); }135 136 /* Rotate handle */137 .rotate {138 position:absolute;139 top: 150px;140 left:50%;141 transform: translateX(-50%);142 width: 58px; height: 58px; border-radius: 50%;143 background:#f0f0f0; border: 3px solid #9e9e9e;144 display:flex; align-items:center; justify-content:center;145 }146 .rotate svg { width: 34px; height: 34px; }147 .rotate svg path { fill:#6b6b6b; }148 149 /* Formatting toolbar above keyboard */150 .toolbar {151 position: absolute;152 bottom: 900px;153 left: 0;154 width: 100%;155 height: 120px;156 background: #222428;157 color: #ffffff;158 display: flex;159 align-items: center;160 padding: 0 40px;161 box-sizing: border-box;162 gap: 40px;163 border-top: 1px solid #2d2d2d;164 }165 .btn {166 min-width: 70px;167 height: 70px;168 border-radius: 10px;169 display:flex; align-items:center; justify-content:center;170 font-size: 46px; font-weight: 700;171 color:#fff;172 }173 .btn.inactive { opacity: 0.85; font-weight: 500; font-style: italic; }174 .btn.u { text-decoration: underline; font-weight: 700; }175 .btn.a { color:#ff6b6b; border-bottom: 4px solid #ff6b6b; }176 .list {177 display:flex; flex-direction: column; gap:6px; width:68px; align-items:center; justify-content:center;178 }179 .list .line { width: 40px; height: 4px; background:#bdbdbd; }180 .list .dot { width: 6px; height: 6px; background:#bdbdbd; border-radius:50%; align-self:flex-start; margin-left: -20px; }181 .nums { display:flex; align-items:center; gap:8px; color:#87a3ff; font-size:42px; }182 .align { display:flex; gap:20px; }183 .align .line { width:48px; height:6px; background:#bdbdbd; }184 185 /* Keyboard */186 .keyboard {187 position: absolute;188 bottom: 0;189 left: 0;190 width: 100%;191 height: 900px;192 background: #1a1a1a;193 border-top: 1px solid #333;194 box-sizing: border-box;195 padding: 26px 26px 40px;196 display: flex;197 flex-direction: column;198 gap: 18px;199 }200 .suggestions {201 display:flex;202 gap: 40px;203 color:#ffffff;204 font-size: 44px;205 margin-bottom: 8px;206 }207 .suggestions .chip {208 background:#2b2b2b;209 padding: 10px 24px;210 border-radius: 20px;211 }212 .row { display:flex; justify-content: space-between; }213 .key {214 width: 90px; height: 118px;215 background: #2b2b2b;216 color:#e5e5e5;217 border-radius: 18px;218 display:flex; align-items:center; justify-content:center;219 font-size: 48px;220 }221 .key.wide { width: 250px; }222 .key.space { flex: 1; height: 118px; margin: 0 18px; }223 .key.circle {224 width: 120px; height: 120px; border-radius: 60px;225 background: #cfe0ff; color:#203a7a; font-weight:700;226 }227 .key.small { width: 120px; }228 .key.dark { background:#262626; }229</style>230</head>231<body>232<div id="render-target">233 234 <!-- Status bar -->235 <div class="status">236 <div class="left">237 <div>9:37</div>238 </div>239 <div class="center">240 <span class="dot"></span>241 </div>242 <div class="right">243 <div class="icon">✓</div>244 <div class="icon">☀</div>245 <div class="icon">✈</div>246 <div class="icon">📶</div>247 <div class="battery"><div class="level"></div></div>248 </div>249 </div>250 251 <!-- Slide canvas -->252 <div class="slide-area">253 <div class="slide">254 <div class="rotate">255 <svg viewBox="0 0 24 24">256 <path d="M12 2v3a7 7 0 1 1-6.6 4.6l-2.2.8A9 9 0 1 0 12 0l-2.5 2.2L12 2z"/>257 </svg>258 </div>259 260 <div class="shape">261 <h1>Auxiliary Services</h1>262 <div class="sub">Double tap to add subtitle</div>263 </div>264 265 <!-- Selection outline and handles -->266 <div class="selection">267 <div class="handle tl"></div>268 <div class="handle tr"></div>269 <div class="handle bl"></div>270 <div class="handle br"></div>271 <div class="handle tm"></div>272 <div class="handle mm"></div>273 <div class="handle mr"></div>274 <div class="handle bm"></div>275 </div>276 </div>277 </div>278 279 <!-- Formatting toolbar -->280 <div class="toolbar">281 <div class="btn">B</div>282 <div class="btn inactive">I</div>283 <div class="btn u">U</div>284 <div class="btn a">A</div>285 <div class="list">286 <div class="dot"></div><div class="line"></div>287 <div class="dot"></div><div class="line"></div>288 <div class="dot"></div><div class="line"></div>289 </div>290 <div class="nums">1 2 3</div>291 <div class="align">292 <div class="line" style="width:70px;"></div>293 <div class="line" style="width:48px;"></div>294 <div class="line" style="width:48px;"></div>295 </div>296 <div style="margin-left:auto; font-size:44px;">▴</div>297 </div>298 299 <!-- Keyboard -->300 <div class="keyboard">301 <div class="suggestions">302 <div class="chip">Services</div>303 <div class="chip">Service's</div>304 <div class="chip">🎙️</div>305 </div>306 307 <div class="row">308 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>309 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>310 </div>311 <div class="row">312 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>313 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>314 </div>315 <div class="row">316 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>317 <div class="key">n</div><div class="key">m</div>318 <div class="key small">⌫</div>319 </div>320 <div class="row">321 <div class="key wide dark">?123</div>322 <div class="key dark">,</div>323 <div class="key space dark"></div>324 <div class="key dark">.</div>325 <div class="key circle">↵</div>326 </div>327 </div>328 329</div>330</body>331</html>