GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Note Editor Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Top cyan status/app bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 165px;22 background: #59c1cc;23 color: #ffffff;24 }25 .status-content {26 position: absolute;27 top: 18px;28 left: 32px;29 right: 32px;30 height: 130px;31 }32 .time {33 font-size: 44px;34 letter-spacing: 1px;35 }36 .status-icons {37 position: absolute;38 right: 0;39 top: 0;40 display: flex;41 align-items: center;42 gap: 22px;43 }44 .status-icons svg { fill: #ffffff; }45 46 /* Title and actions */47 .title-area {48 position: absolute;49 top: 165px;50 left: 0;51 width: 100%;52 padding: 28px 32px 8px 32px;53 box-sizing: border-box;54 background: #ffffff;55 }56 .top-row {57 display: flex;58 align-items: center;59 justify-content: space-between;60 }61 .back-btn {62 width: 64px;63 height: 64px;64 border-radius: 32px;65 display: flex;66 align-items: center;67 justify-content: center;68 cursor: default;69 }70 .action-icons {71 display: flex;72 align-items: center;73 gap: 26px;74 }75 .action-icons .icon-wrap {76 width: 72px;77 height: 72px;78 border-radius: 12px;79 display: flex;80 align-items: center;81 justify-content: center;82 background: transparent;83 }84 .action-icons svg { fill: #6b6b6b; }85 86 .title-input {87 margin: 18px 0 10px 0;88 width: 900px;89 height: 92px;90 border-radius: 14px;91 background: #f2f5f6;92 border: 1px solid #e0e3e6;93 display: flex;94 align-items: center;95 padding: 0 22px;96 box-sizing: border-box;97 font-size: 42px;98 color: #a2a7ad;99 }100 101 /* Toolbar */102 .toolbar {103 position: absolute;104 top: 420px;105 left: 32px;106 right: 32px;107 }108 .tool-row {109 display: flex;110 gap: 24px;111 margin-bottom: 26px;112 align-items: center;113 flex-wrap: wrap;114 }115 .tool-btn {116 min-width: 120px;117 height: 90px;118 background: #f3f4f6;119 border: 1px solid #e0e0e0;120 border-radius: 10px;121 display: flex;122 align-items: center;123 justify-content: center;124 color: #444;125 font-size: 42px;126 padding: 0 12px;127 box-sizing: border-box;128 }129 .tool-btn.small { min-width: 100px; height: 86px; font-size: 36px; }130 .tool-btn.wide { min-width: 180px; }131 .tool-btn .sub { font-size: 26px; vertical-align: super; }132 .tool-btn .sub2 { font-size: 26px; vertical-align: sub; }133 134 .done-btn {135 margin-left: auto;136 background: #31b3c1;137 color: #ffffff;138 border-color: #27a8b6;139 font-weight: bold;140 min-width: 210px;141 }142 143 /* Content area */144 .content {145 position: absolute;146 top: 770px;147 left: 32px;148 right: 32px;149 bottom: 900px; /* leaves space for keyboard */150 overflow: hidden;151 color: #111;152 font-size: 56px;153 line-height: 1.55;154 }155 156 /* Keyboard */157 .keyboard {158 position: absolute;159 bottom: 0;160 left: 0;161 width: 1080px;162 height: 860px;163 background: #1f1f23;164 color: #eaeaea;165 border-top-left-radius: 26px;166 border-top-right-radius: 26px;167 box-sizing: border-box;168 padding: 22px 22px 30px 22px;169 }170 .suggest-bar {171 height: 110px;172 background: #2a2a2e;173 border-radius: 16px;174 display: flex;175 align-items: center;176 justify-content: space-between;177 padding: 0 24px;178 box-sizing: border-box;179 font-size: 44px;180 }181 .suggest-left { display: flex; gap: 26px; align-items: center; opacity: 0.95; }182 .kb-rows { margin-top: 18px; }183 .key-row {184 display: flex;185 gap: 14px;186 justify-content: center;187 margin-bottom: 16px;188 }189 .key {190 width: 92px;191 height: 120px;192 background: #2f2f33;193 border-radius: 18px;194 display: flex;195 align-items: center;196 justify-content: center;197 font-size: 44px;198 color: #f3f3f3;199 }200 .key.wide-1 { width: 140px; }201 .key.wide-2 { width: 190px; }202 .key.space { width: 520px; }203 .key.dot { width: 92px; }204 .return {205 width: 140px;206 background: #cfb7f3;207 color: #1f1f23;208 font-weight: bold;209 }210 211 /* subtle separators under inputs */212 .shadow-line {213 position: absolute;214 left: 0;215 right: 0;216 top: 165px;217 height: 0;218 border-bottom: 0 solid transparent;219 }220</style>221</head>222<body>223<div id="render-target">224 225 <!-- Status/App bar -->226 <div class="status-bar">227 <div class="status-content">228 <div class="time">11:10</div>229 <div class="status-icons">230 <!-- small dot -->231 <svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5"/></svg>232 <!-- signal -->233 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2V9h-2v11zm4 0h2V5h-2v15zm4 0h2V2h-2v18z"/></svg>234 <!-- wifi -->235 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2 9c5.5-5.5 14.5-5.5 20 0l-1.6 1.6C15 6.2 9 6.2 3.6 10.6L2 9zm4 4c3.9-3.9 10.1-3.9 14 0l-1.6 1.6c-3-3-7.8-3-10.8 0L6 13z"/></svg>236 <!-- battery -->237 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M17 6h2a2 2 0 0 1 2 2v1h1v6h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h12zm0 2H5v8h12V8z" /></svg>238 </div>239 </div>240 </div>241 242 <!-- Title and action icons -->243 <div class="title-area">244 <div class="top-row">245 <div class="back-btn">246 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#494949" d="M15.4 19.4 9 13l6.4-6.4L14 5 6 13l8 8 1.4-1.6z"/></svg>247 </div>248 <div class="action-icons">249 <div class="icon-wrap">250 <!-- chevron down -->251 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M7 9l5 5 5-5-1.4-1.4L12 11.2 8.4 7.6 7 9z"/></svg>252 </div>253 <div class="icon-wrap">254 <!-- trash -->255 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 7h12l-1 14H7L6 7zm3-3h6l1 2H8l1-2z"/></svg>256 </div>257 <div class="icon-wrap">258 <!-- help -->259 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm0 16h-1.5V16H12v2zm2.2-7.4c-.3.5-.8.9-1.3 1.2-.6.4-.9.7-.9 1.3V14h-1.6v-1c0-1 .5-1.7 1.3-2.2.5-.3.9-.6 1.1-.9.2-.3.4-.6.4-1 0-1.1-.8-1.8-2-1.8-1 0-1.7.4-2.3 1.2L6.9 6.7C7.9 5.6 9.1 5 10.8 5c2.2 0 3.7 1.3 3.7 3.2 0 .7-.2 1.3-.6 1.9z"/></svg>260 </div>261 </div>262 </div>263 264 <div class="title-input">Title</div>265 </div>266 267 <!-- Toolbar with formatting buttons -->268 <div class="toolbar">269 <div class="tool-row">270 <div class="tool-btn small">OCR</div>271 <div class="tool-btn">B</div>272 <div class="tool-btn">I</div>273 <div class="tool-btn">T</div>274 <div class="tool-btn">U</div>275 <div class="tool-btn wide" style="color:#21a1f1;font-weight:bold;">A</div>276 <div class="tool-btn">Tt</div>277 </div>278 279 <div class="tool-row">280 <div class="tool-btn small">281 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#555" d="M3 11h14v2H3zM18 7l5 5-5 5V7z"/></svg>282 </div>283 <div class="tool-btn small">284 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#555" d="M21 11H7v2h14zM6 7L1 12l5 5V7z"/></svg>285 </div>286 <div class="tool-btn small"><span style="text-decoration: line-through;">x</span><span class="sub">2</span></div>287 <div class="tool-btn small">x<span class="sub2">2</span></div>288 <div class="tool-btn small">289 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#555" d="M7 7h10v2H7zm-3 5h16v2H4zm3 5h10v2H7z"/></svg>290 </div>291 <div class="tool-btn small">292 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#555" d="M17 7H7v2h10V7zm3 5H4v2h16v-2zM7 17h10v2H7z"/></svg>293 </div>294 </div>295 296 <div class="tool-row">297 <div class="tool-btn small">298 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#555" d="M4 7h14v2H4V7zm0 5h10v2H4v-2zm0 5h6v2H4v-2z"/></svg>299 </div>300 <div class="tool-btn small">301 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#555" d="M4 7h5v2H4zM4 12h8v2H4zM4 17h12v2H4zM13 7h7v2h-7zM16 12h4v2h-4zM18 17h2v2h-2z"/></svg>302 </div>303 <div class="tool-btn small">304 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#555" d="M4 7h2v2H4V7zm4 0h12v2H8V7zM4 11h2v2H4v-2zm4 0h12v2H8v-2zM4 15h2v2H4v-2zm4 0h12v2H8v-2z"/></svg>305 </div>306 <div class="tool-btn done-btn">DONE</div>307 </div>308 </div>309 310 <!-- Document content -->311 <div class="content">312 <div>Manager</div>313 <div>AA Technologies</div>314 <div>P</div>315 </div>316 317 <!-- On-screen keyboard -->318 <div class="keyboard">319 <div class="suggest-bar">320 <div class="suggest-left">321 <span>P</span>322 <span>|</span>323 <span>O</span>324 <span>|</span>325 <span>Please</span>326 </div>327 <div>328 <!-- mic icon -->329 <svg width="54" height="54" viewBox="0 0 24 24"><path fill="#eaeaea" d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V20H9v2h6v-2h-2v-2.1A7 7 0 0 0 19 11h-2z"/></svg>330 </div>331 </div>332 333 <div class="kb-rows">334 <div class="key-row">335 <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>336 </div>337 <div class="key-row">338 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>339 </div>340 <div class="key-row">341 <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><div class="key">,</div>342 </div>343 <div class="key-row">344 <div class="key wide-1">?123</div>345 <div class="key wide-1">,</div>346 <div class="key wide-1">😊</div>347 <div class="key space"></div>348 <div class="key dot">.</div>349 <div class="key return">↵</div>350 </div>351 </div>352 </div>353 354</div>355</body>356</html>