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 border-radius: 0;14 }15 16 /* Top status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 100px;23 background: #63C4CF;24 color: #fff;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 font-weight: 600;30 letter-spacing: 0.5px;31 }32 .status-bar .time { font-size: 36px; }33 .status-icons {34 margin-left: auto;35 display: flex;36 gap: 26px;37 align-items: center;38 }39 .status-icons .dot {40 width: 18px; height: 18px; background: #fff; opacity: 0.9; border-radius: 50%;41 }42 .status-icons .signal, .status-icons .battery {43 width: 36px; height: 22px; border: 2px solid rgba(255,255,255,0.9); border-radius: 4px;44 }45 46 /* App header */47 .header {48 position: absolute;49 top: 100px;50 left: 0;51 width: 1080px;52 height: 260px;53 background: #63C4CF;54 box-sizing: border-box;55 padding: 30px 36px;56 color: #fff;57 }58 .header-top {59 display: flex;60 align-items: center;61 gap: 20px;62 }63 .icon-btn {64 width: 72px; height: 72px;65 background: rgba(255,255,255,0.2);66 border-radius: 36px;67 display: flex; align-items: center; justify-content: center;68 }69 .icon-square {70 width: 72px; height: 72px;71 background: rgba(255,255,255,0.2);72 border-radius: 12px;73 display: flex; align-items: center; justify-content: center;74 }75 .title-box {76 margin-top: 22px;77 width: 860px;78 height: 110px;79 background: #fff;80 border-radius: 10px;81 box-sizing: border-box;82 padding: 0 24px;83 display: flex; align-items: center;84 color: #333;85 font-size: 42px;86 font-weight: 600;87 }88 .header-right {89 margin-left: auto;90 display: flex;91 align-items: center;92 gap: 22px;93 }94 95 /* Toolbar */96 .toolbar {97 position: absolute;98 top: 360px;99 left: 0;100 width: 1080px;101 box-sizing: border-box;102 padding: 20px 36px 10px;103 background: #fff;104 }105 .tool-row {106 display: flex;107 align-items: center;108 gap: 18px;109 margin-bottom: 22px;110 flex-wrap: wrap;111 }112 .tool-btn {113 min-width: 140px;114 height: 90px;115 padding: 0 18px;116 box-sizing: border-box;117 background: #F3F3F3;118 border: 1px solid #D9D9D9;119 border-radius: 10px;120 color: #333;121 font-size: 40px;122 display: flex; align-items: center; justify-content: center;123 }124 .tool-small {125 min-width: 120px;126 height: 90px;127 }128 .tool-icon {129 width: 140px; height: 90px;130 background: #F3F3F3;131 border: 1px solid #D9D9D9;132 border-radius: 10px;133 display: flex; align-items: center; justify-content: center;134 }135 .done-btn {136 margin-left: auto;137 width: 200px; height: 96px;138 background: #5EC3CF;139 color: #fff; font-weight: 700; font-size: 40px;140 border-radius: 10px;141 display: flex; align-items: center; justify-content: center;142 }143 144 /* Editor area */145 .editor-area {146 position: absolute;147 top: 540px;148 left: 0;149 width: 1080px;150 height: 780px;151 box-sizing: border-box;152 padding: 30px 36px;153 background: #fff;154 color: #111;155 font-size: 52px;156 line-height: 76px;157 }158 159 /* Keyboard */160 .keyboard {161 position: absolute;162 bottom: 0;163 left: 0;164 width: 1080px;165 height: 1020px;166 background: #1F1F1F;167 color: #ECECEC;168 box-sizing: border-box;169 border-top-left-radius: 30px;170 border-top-right-radius: 30px;171 overflow: hidden;172 }173 .suggestion-bar {174 height: 100px;175 display: flex; align-items: center;176 justify-content: center;177 gap: 36px;178 font-size: 40px;179 color: #D8D8D8;180 }181 .suggestion-bar .divider { width: 2px; height: 40px; background: #444; }182 .keys {183 padding: 20px 24px;184 box-sizing: border-box;185 }186 .key-row {187 display: flex;188 gap: 16px;189 justify-content: space-between;190 margin-bottom: 26px;191 }192 .key {193 background: #2B2B2B;194 border-radius: 22px;195 width: 90px;196 height: 120px;197 display: flex; align-items: center; justify-content: center;198 font-size: 46px;199 box-shadow: inset 0 0 0 1px #3A3A3A;200 }201 .key-wide { width: 150px; }202 .space { flex: 1; height: 120px; background: #2B2B2B; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #CFCFCF; }203 .enter {204 width: 150px; height: 120px;205 background: #D9C3E9;206 color: #2B2B2B;207 border-radius: 28px;208 font-weight: 700;209 }210</style>211</head>212<body>213<div id="render-target">214 215 <!-- Status Bar -->216 <div class="status-bar">217 <div class="time">11:14</div>218 <div class="status-icons">219 <div class="dot"></div>220 <div class="signal"></div>221 <div class="battery"></div>222 </div>223 </div>224 225 <!-- Header with title and actions -->226 <div class="header">227 <div class="header-top">228 <div class="icon-btn" aria-label="Back">229 <svg width="40" height="40" viewBox="0 0 24 24">230 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>231 </svg>232 </div>233 <div class="title-box">Title</div>234 <div class="header-right">235 <div class="icon-btn" aria-label="Dropdown">236 <svg width="40" height="40" viewBox="0 0 24 24">237 <path d="M6 9l6 6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>238 </svg>239 </div>240 <div class="icon-square" aria-label="Trash">241 <svg width="40" height="40" viewBox="0 0 24 24">242 <path d="M3 6h18M8 6v12m8-12v12M9 6l1-2h4l1 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>243 </svg>244 </div>245 <div class="icon-btn" aria-label="Help">246 <svg width="40" height="40" viewBox="0 0 24 24">247 <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"/>248 <path d="M9.5 9a3 3 0 0 1 5 2c0 2-2 2-2 4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>249 <circle cx="12" cy="17" r="1.5" fill="#fff"/>250 </svg>251 </div>252 </div>253 </div>254 </div>255 256 <!-- Formatting Toolbar -->257 <div class="toolbar">258 <div class="tool-row">259 <div class="tool-btn tool-small">OCR</div>260 <div class="tool-btn">B</div>261 <div class="tool-btn">I</div>262 <div class="tool-btn">T</div>263 <div class="tool-btn">U</div>264 <div class="tool-btn">A</div>265 <div class="tool-btn">Tt</div>266 </div>267 268 <div class="tool-row">269 <div class="tool-icon" title="Align Left">270 <svg width="70" height="40" viewBox="0 0 24 24">271 <path d="M4 6h16M4 12h12M4 18h16" stroke="#444" stroke-width="2"/>272 </svg>273 </div>274 <div class="tool-icon" title="Align Center">275 <svg width="70" height="40" viewBox="0 0 24 24">276 <path d="M4 6h16M6 12h12M4 18h16" stroke="#444" stroke-width="2"/>277 </svg>278 </div>279 <div class="tool-icon" title="Superscript">280 <svg width="80" height="40" viewBox="0 0 24 24">281 <path d="M4 18l6-10M16 18L10 8" stroke="#444" stroke-width="2" fill="none"/>282 <text x="18" y="9" font-size="8" fill="#444">2</text>283 </svg>284 </div>285 <div class="tool-icon" title="Subscript">286 <svg width="80" height="40" viewBox="0 0 24 24">287 <path d="M4 18l6-10M16 18L10 8" stroke="#444" stroke-width="2" fill="none"/>288 <text x="18" y="19" font-size="8" fill="#444">2</text>289 </svg>290 </div>291 <div class="tool-icon" title="Undo">292 <svg width="70" height="40" viewBox="0 0 24 24">293 <path d="M7 7l-4 4 4 4" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>294 <path d="M20 15c0-4-3-7-7-7h-6" stroke="#444" stroke-width="2" fill="none"/>295 </svg>296 </div>297 <div class="tool-icon" title="Redo">298 <svg width="70" height="40" viewBox="0 0 24 24">299 <path d="M17 7l4 4-4 4" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>300 <path d="M4 15c0-4 3-7 7-7h6" stroke="#444" stroke-width="2" fill="none"/>301 </svg>302 </div>303 </div>304 305 <div class="tool-row">306 <div class="tool-icon" title="Align Left">307 <svg width="70" height="40" viewBox="0 0 24 24">308 <path d="M4 6h16M4 12h12M4 18h16" stroke="#444" stroke-width="2"/>309 </svg>310 </div>311 <div class="tool-icon" title="Align Center">312 <svg width="70" height="40" viewBox="0 0 24 24">313 <path d="M4 6h16M6 12h12M4 18h16" stroke="#444" stroke-width="2"/>314 </svg>315 </div>316 <div class="tool-icon" title="Align Right">317 <svg width="70" height="40" viewBox="0 0 24 24">318 <path d="M4 6h16M8 12h12M4 18h16" stroke="#444" stroke-width="2"/>319 </svg>320 </div>321 <div class="tool-icon" title="Bulleted List">322 <svg width="90" height="40" viewBox="0 0 24 24">323 <circle cx="5" cy="6" r="2" fill="#444"/><path d="M10 6h10" stroke="#444" stroke-width="2"/>324 <circle cx="5" cy="12" r="2" fill="#444"/><path d="M10 12h10" stroke="#444" stroke-width="2"/>325 <circle cx="5" cy="18" r="2" fill="#444"/><path d="M10 18h10" stroke="#444" stroke-width="2"/>326 </svg>327 </div>328 <div class="tool-icon" title="Numbered List">329 <svg width="90" height="40" viewBox="0 0 24 24">330 <text x="4" y="8" font-size="8" fill="#444">1</text><path d="M10 6h10" stroke="#444" stroke-width="2"/>331 <text x="4" y="14" font-size="8" fill="#444">2</text><path d="M10 12h10" stroke="#444" stroke-width="2"/>332 <text x="4" y="20" font-size="8" fill="#444">3</text><path d="M10 18h10" stroke="#444" stroke-width="2"/>333 </svg>334 </div>335 <div class="tool-icon" title="Checklist">336 <svg width="90" height="40" viewBox="0 0 24 24">337 <rect x="4" y="5" width="14" height="14" rx="2" fill="none" stroke="#444" stroke-width="2"/>338 <path d="M6 12l3 3 6-6" stroke="#444" stroke-width="2" fill="none"/>339 </svg>340 </div>341 <div class="done-btn">DONE</div>342 </div>343 </div>344 345 <!-- Editor content -->346 <div class="editor-area">347 <div>Manager</div>348 <div>AA Technologies</div>349 <div>Pune</div>350 <div>De</div>351 </div>352 353 <!-- Keyboard -->354 <div class="keyboard">355 <div class="suggestion-bar">356 <span>De</span>357 <div class="divider"></div>358 <span>Dear</span>359 <div class="divider"></div>360 <span>Se</span>361 <div style="margin-left:auto; margin-right:24px;">362 <svg width="60" height="60" viewBox="0 0 24 24">363 <circle cx="12" cy="12" r="10" stroke="#BFBFBF" stroke-width="1" fill="none"/>364 <path d="M16 8l-8 8" stroke="#BFBFBF" stroke-width="2"/>365 </svg>366 </div>367 </div>368 369 <div class="keys">370 <!-- Row 1 -->371 <div class="key-row">372 <div class="key">q</div>373 <div class="key">w</div>374 <div class="key">e</div>375 <div class="key">r</div>376 <div class="key">t</div>377 <div class="key">y</div>378 <div class="key">u</div>379 <div class="key">i</div>380 <div class="key">o</div>381 <div class="key">p</div>382 </div>383 <!-- Row 2 -->384 <div class="key-row">385 <div class="key">a</div>386 <div class="key">s</div>387 <div class="key">d</div>388 <div class="key">f</div>389 <div class="key">g</div>390 <div class="key">h</div>391 <div class="key">j</div>392 <div class="key">k</div>393 <div class="key">l</div>394 </div>395 <!-- Row 3 -->396 <div class="key-row">397 <div class="key-wide">⇧</div>398 <div class="key">z</div>399 <div class="key">x</div>400 <div class="key">c</div>401 <div class="key">v</div>402 <div class="key">b</div>403 <div class="key">n</div>404 <div class="key">m</div>405 <div class="key-wide">⌫</div>406 </div>407 <!-- Row 4 -->408 <div class="key-row">409 <div class="key-wide">?123</div>410 <div class="key-wide">,</div>411 <div class="space">space</div>412 <div class="key-wide">.</div>413 <div class="enter">↵</div>414 </div>415 </div>416 </div>417 418</div>419</body>420</html>