GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=device-width, initial-scale=1.0">5<title>Mobile Editor Mock</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: #FFFFFF;14 border-radius: 0px;15 }16 17 /* Top app bar area */18 .topbar {19 position: relative;20 width: 100%;21 height: 210px;22 background: #5EC0CC;23 color: #ffffff;24 }25 .status {26 position: absolute;27 top: 20px;28 left: 24px;29 right: 24px;30 height: 46px;31 display: flex;32 align-items: center;33 justify-content: space-between;34 opacity: 0.95;35 font-weight: 600;36 letter-spacing: 1px;37 }38 .status .right {39 display: flex;40 gap: 18px;41 align-items: center;42 font-size: 24px;43 }44 .icon {45 width: 44px;46 height: 44px;47 display: inline-flex;48 align-items: center;49 justify-content: center;50 border-radius: 22px;51 color: #ffffff;52 }53 .icon svg { fill: currentColor; width: 34px; height: 34px; }54 55 .app-actions {56 position: absolute;57 top: 82px;58 left: 16px;59 right: 16px;60 display: flex;61 align-items: center;62 justify-content: space-between;63 }64 .left-actions {65 display: flex;66 align-items: center;67 gap: 10px;68 }69 .right-actions {70 display: flex;71 align-items: center;72 gap: 26px;73 }74 75 /* White editor panel overlapping header */76 .panel {77 position: absolute;78 top: 134px;79 left: 0;80 right: 0;81 background: #ffffff;82 border-top-left-radius: 16px;83 border-top-right-radius: 16px;84 box-shadow: 0 -2px 0 rgba(0,0,0,0.05);85 padding: 30px 40px 0 40px;86 }87 88 .title-input {89 width: 100%;90 height: 110px;91 background: #F4F6F8;92 border-radius: 12px;93 border: 1px solid #E0E0E0;94 padding: 30px;95 color: #6B6F74;96 font-size: 38px;97 }98 99 /* toolbar buttons */100 .toolbar {101 margin-top: 26px;102 display: grid;103 grid-template-columns: repeat(6, 1fr);104 gap: 18px;105 }106 .tool {107 height: 90px;108 background: #FAFAFA;109 border: 1px solid #DFE3E7;110 border-radius: 10px;111 display: flex;112 align-items: center;113 justify-content: center;114 color: #4A4F55;115 font-weight: 600;116 font-size: 34px;117 }118 .tool.small { font-size: 30px; }119 .toolbar-row {120 margin-top: 18px;121 display: grid;122 grid-template-columns: repeat(6, 1fr);123 gap: 18px;124 }125 .undo-redo {126 margin-top: 18px;127 display: grid;128 grid-template-columns: repeat(6, 1fr);129 gap: 18px;130 }131 .done-wrap {132 margin-top: 24px;133 display: flex;134 align-items: center;135 justify-content: flex-end;136 }137 .done-btn {138 background: #45B0C0;139 color: #fff;140 height: 104px;141 width: 220px;142 border-radius: 10px;143 font-size: 42px;144 font-weight: 700;145 display: flex;146 align-items: center;147 justify-content: center;148 }149 150 /* content typing area */151 .content {152 padding: 28px 40px 0 40px;153 font-size: 54px;154 color: #222;155 line-height: 1.35;156 min-height: 760px;157 }158 159 .cursor {160 display: inline-block;161 width: 4px;162 height: 60px;163 background: #2b6df2;164 vertical-align: -12px;165 margin-left: 2px;166 border-radius: 2px;167 animation: blink 1.1s step-end infinite;168 }169 @keyframes blink { 50% { opacity: 0; } }170 171 /* Keyboard mock */172 .keyboard {173 position: absolute;174 bottom: 0;175 left: 0;176 width: 1080px;177 height: 820px;178 background: #1F1F22;179 color: #EDEDED;180 border-top-left-radius: 18px;181 border-top-right-radius: 18px;182 box-shadow: 0 -6px 18px rgba(0,0,0,0.4);183 padding-top: 18px;184 }185 .suggestions {186 height: 82px;187 display: flex;188 align-items: center;189 justify-content: center;190 gap: 38px;191 color: #DDDDDD;192 font-size: 40px;193 }194 .keys {195 padding: 16px 18px;196 display: grid;197 row-gap: 18px;198 }199 .row {200 display: flex;201 gap: 16px;202 justify-content: center;203 }204 .key {205 height: 118px;206 width: 90px;207 background: #2A2A2D;208 border-radius: 18px;209 display: flex;210 align-items: center;211 justify-content: center;212 font-size: 46px;213 color: #F2F2F2;214 }215 .key.wide { width: 120px; }216 .key.back { width: 140px; }217 .space-row {218 display: flex;219 align-items: center;220 gap: 16px;221 justify-content: space-between;222 padding: 0 20px;223 margin-top: 8px;224 }225 .circle-btn {226 width: 126px;227 height: 126px;228 border-radius: 63px;229 background: #BFAED2;230 color: #000;231 display: flex;232 align-items: center;233 justify-content: center;234 font-weight: 700;235 font-size: 42px;236 }237 .space {238 flex: 1;239 height: 126px;240 background: #2A2A2D;241 border-radius: 20px;242 }243 .dot {244 width: 126px;245 height: 126px;246 background: #2A2A2D;247 border-radius: 20px;248 display: flex;249 align-items: center;250 justify-content: center;251 font-size: 58px;252 }253 .enter {254 width: 126px;255 height: 126px;256 border-radius: 63px;257 background: #E8D5F6;258 color: #3D2B58;259 display: flex;260 align-items: center;261 justify-content: center;262 }263 .enter svg { width: 52px; height: 52px; fill: currentColor; }264</style>265</head>266<body>267<div id="render-target">268 269 <!-- Top turquoise bar with system status and actions -->270 <div class="topbar">271 <div class="status">272 <div style="display:flex;align-items:center;gap:18px;">273 <span style="font-size:32px;">11:03</span>274 <span class="icon" title="notifications" style="opacity:.7;">275 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5L4 18v1h16v-1l-2-2z"/></svg>276 </span>277 </div>278 <div class="right">279 <span style="font-size:26px;">◦</span>280 <span style="font-size:26px;">◦</span>281 <span style="font-size:26px;">◦</span>282 <span style="font-size:28px;">Wi‑Fi</span>283 <span style="font-size:28px;">🔋</span>284 </div>285 </div>286 287 <div class="app-actions">288 <div class="left-actions">289 <span class="icon" style="background:transparent;">290 <svg viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>291 </span>292 </div>293 <div class="right-actions">294 <span class="icon" style="background:rgba(255,255,255,0.15); border-radius:12px; width:64px; height:64px;">295 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>296 </span>297 <span class="icon" style="background:rgba(255,255,255,0.15); border-radius:12px; width:64px; height:64px;">298 <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V7H6v12zM18 4h-3.5l-1-1h-3l-1 1H6v2h12V4z"/></svg>299 </span>300 <span class="icon" style="background:rgba(255,255,255,0.15); border-radius:12px; width:64px; height:64px;">301 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 17h-2v-2h2v2zm2.07-7.75-.9.92A3.5 3.5 0 0 0 13 15h-2v-.5a4 4 0 0 1 1.17-2.83l1.24-1.26A1.5 1.5 0 1 0 11 8H9a3 3 0 1 1 6 0c0 .83-.34 1.58-.93 2.25z"/></svg>302 </span>303 </div>304 </div>305 </div>306 307 <!-- White editor panel -->308 <div class="panel">309 <div class="title-input">Title</div>310 311 <div class="toolbar" style="margin-top:26px;">312 <div class="tool small">OCR</div>313 <div class="tool">B</div>314 <div class="tool">I</div>315 <div class="tool">T</div>316 <div class="tool">U</div>317 <div class="tool" style="color:#2F9ED9;">A</div>318 </div>319 320 <div class="toolbar-row">321 <div class="tool">≡</div>322 <div class="tool">≡</div>323 <div class="tool small">x²</div>324 <div class="tool small">x₂</div>325 <div class="tool small">326 <svg viewBox="0 0 24 24" style="width:36px;height:36px;"><path d="M12 5v2h7V5h-7zm0 12v2h7v-2h-7zM5 11h14v2H5v-2z"/></svg>327 </div>328 <div class="tool small">329 <svg viewBox="0 0 24 24" style="width:36px;height:36px; transform: scale(-1,1);"><path d="M12 5v2h7V5h-7zm0 12v2h7v-2h-7zM5 11h14v2H5v-2z"/></svg>330 </div>331 </div>332 333 <div class="undo-redo">334 <div class="tool">L</div>335 <div class="tool">C</div>336 <div class="tool">R</div>337 <div class="tool">•</div>338 <div class="tool">1.</div>339 <div class="tool small">340 <svg viewBox="0 0 24 24" style="width:32px;height:32px;"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>341 </div>342 </div>343 344 <div class="done-wrap">345 <div class="done-btn">DONE</div>346 </div>347 348 <div class="content">349 <div>Manager</div>350 <div>AA Tec<span class="cursor"></span></div>351 </div>352 </div>353 354 <!-- Keyboard mock -->355 <div class="keyboard">356 <div class="suggestions">Tec | Tech | Technology357 <span style="margin-left:auto;margin-right:22px; font-size:46px;">🎤</span>358 </div>359 <div class="keys">360 <div class="row">361 <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><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>362 </div>363 <div class="row">364 <div class="key wide">a</div><div class="key wide">s</div><div class="key wide">d</div><div class="key wide">f</div><div class="key wide">g</div><div class="key wide">h</div><div class="key wide">j</div><div class="key wide">k</div><div class="key wide">l</div>365 </div>366 <div class="row">367 <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><div class="key">n</div><div class="key">m</div>368 <div class="key back">⌫</div>369 </div>370 <div class="space-row">371 <div class="circle-btn">?123</div>372 <div class="key" style="width:126px;height:126px;border-radius:20px;">,</div>373 <div class="key" style="width:126px;height:126px;border-radius:20px;">😊</div>374 <div class="space"></div>375 <div class="dot">·</div>376 <div class="enter" title="enter/send">377 <svg viewBox="0 0 24 24"><path d="M3 12l8-8v5h7v6h-7v5z"/></svg>378 </div>379 </div>380 </div>381 </div>382 383</div>384</body>385</html>