GD-ML/AndroidCode
13.4k
1<html lang="en">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: "Roboto", Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Top status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 background: #56c6cf;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 }29 .status-left { font-size: 38px; font-weight: 600; }30 .status-right {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 24px;35 }36 .icon-dot { width: 14px; height: 14px; background:#fff; border-radius:50%; opacity:0.9; }37 .wifi {38 width: 40px; height: 26px;39 position: relative;40 }41 .wifi:before, .wifi:after {42 content:""; position:absolute; left:0; right:0; margin:auto; border:3px solid #fff; border-radius:20px;43 }44 .wifi:before { top:2px; width: 36px; height: 20px; border-top-color:#fff; border-bottom: none; }45 .wifi:after { top:10px; width: 18px; height: 10px; border-top-color:#fff; border-bottom: none; }46 .battery {47 width: 50px; height: 26px; border: 3px solid #fff; border-radius: 4px; position: relative;48 }49 .battery:after {50 content:""; position:absolute; right:-10px; top:7px; width:8px; height:12px; background:#fff; border-radius:2px;51 }52 .battery .level { width: 32px; height: 16px; background:#fff; margin: 3px; }53 54 /* App header row (back + actions) */55 .app-header {56 position: absolute;57 top: 120px;58 left: 0;59 width: 1080px;60 height: 120px;61 background: #f5f7f8;62 display: flex;63 align-items: center;64 padding: 0 28px;65 box-sizing: border-box;66 border-bottom: 1px solid #e3e6e8;67 }68 .back-btn {69 width: 64px; height: 64px; border-radius: 32px;70 display: flex; align-items: center; justify-content: center;71 }72 .back-btn svg { width: 40px; height: 40px; fill: #333; }73 .app-actions { margin-left: auto; display: flex; align-items:center; gap: 34px; }74 .action-icon {75 width: 64px; height: 64px; border-radius: 12px; display:flex; align-items:center; justify-content:center;76 }77 .action-icon svg { width: 40px; height: 40px; stroke:#444; fill:none; stroke-width:3; }78 79 /* Title field */80 .title-field {81 position: absolute;82 top: 240px;83 left: 60px;84 width: 960px;85 height: 110px;86 border-radius: 14px;87 background: #ffffff;88 border: 1px solid #dfe3e7;89 display:flex; align-items:center;90 padding: 0 28px;91 box-sizing: border-box;92 font-size: 44px;93 color: #4d4d4d;94 }95 96 /* Formatting toolbar area */97 .toolbar {98 position: absolute;99 top: 380px;100 left: 60px;101 width: 960px;102 }103 .tool-row {104 display: flex;105 gap: 26px;106 margin-bottom: 26px;107 align-items: center;108 }109 .tool-btn {110 width: 148px; height: 96px;111 background: #ffffff;112 border: 1px solid #d9d9d9;113 border-radius: 12px;114 display:flex; align-items:center; justify-content:center;115 color:#333; font-size: 40px; font-weight: 600;116 }117 .small-btn { width: 120px; height: 90px; font-size: 34px; }118 .wide-btn { width: 200px; }119 .icon-square {120 width: 148px; height:96px; border:1px solid #d9d9d9; border-radius:12px; background:#fff;121 display:flex; align-items:center; justify-content:center; color:#444; font-size:32px; font-weight:600;122 }123 .done-button {124 margin-left: auto;125 width: 220px; height: 96px;126 background: #49c1cc;127 color:#fff; font-weight:700; font-size:42px;128 border-radius: 12px;129 display:flex; align-items:center; justify-content:center;130 }131 132 /* Editor content area */133 .editor {134 position: absolute;135 top: 720px;136 left: 0;137 right: 0;138 bottom: 900px; /* leave space for keyboard */139 padding: 0 60px;140 box-sizing: border-box;141 background: #ffffff;142 }143 .editor p {144 margin: 0;145 font-size: 52px;146 color: #222;147 line-height: 1.5;148 }149 150 /* Keyboard */151 .keyboard {152 position: absolute;153 bottom: 0;154 left: 0;155 width: 1080px;156 height: 900px;157 background: #1f1f22;158 border-top-left-radius: 24px;159 border-top-right-radius: 24px;160 color:#fff;161 }162 .suggest-bar {163 height: 110px;164 display:flex;165 align-items:center;166 justify-content:center;167 gap: 34px;168 font-size: 44px;169 color:#d9d9d9;170 }171 .suggest-sep { color:#8c8c8c; }172 .keys {173 padding: 26px 30px;174 box-sizing: border-box;175 }176 .key-row { display:flex; justify-content: space-between; margin-bottom: 24px; }177 .key {178 width: 88px; height: 110px; background:#2a2a2e; border-radius:16px; display:flex; align-items:center; justify-content:center;179 font-size: 48px; color:#eaeaea;180 }181 .key-wide { width: 160px; }182 .key-xwide { width: 360px; }183 .key-icon {184 width: 88px; height: 110px; background:#2a2a2e; border-radius:16px; display:flex; align-items:center; justify-content:center;185 }186 .key-icon svg { width: 50px; height: 50px; fill:#eaeaea; }187 .bottom-row { display:flex; align-items:center; justify-content: space-between; }188 .dot-key { width: 88px; height:110px; background:#2a2a2e; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size: 70px; }189 .return-key {190 width: 140px; height: 110px; background:#d8c7e9; border-radius: 30px;191 display:flex; align-items:center; justify-content:center;192 }193 .return-key svg { width: 60px; height: 60px; fill:#4c2b78; }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Status Bar -->200 <div class="status-bar">201 <div class="status-left">11:05</div>202 <div class="status-right">203 <div class="icon-dot"></div>204 <div class="icon-dot"></div>205 <div class="icon-dot"></div>206 <div class="wifi"></div>207 <div class="battery"><div class="level"></div></div>208 </div>209 </div>210 211 <!-- App Header Row -->212 <div class="app-header">213 <div class="back-btn">214 <svg viewBox="0 0 24 24">215 <path d="M15.5 4l-9 8 9 8v-5.5H24v-5H15.5V4z"></path>216 </svg>217 </div>218 <div class="app-actions">219 <!-- collapse/chevron -->220 <div class="action-icon">221 <svg viewBox="0 0 24 24">222 <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>223 </svg>224 </div>225 <!-- trash -->226 <div class="action-icon">227 <svg viewBox="0 0 24 24">228 <path d="M4 6h16M9 6V4h6v2M6 6l1 14h10l1-14" stroke-linecap="round" stroke-linejoin="round"></path>229 </svg>230 </div>231 <!-- help -->232 <div class="action-icon">233 <svg viewBox="0 0 24 24">234 <path d="M12 2a10 10 0 100 20 10 10 0 000-20zM12 17h0M9.5 9.5a3 3 0 116 0c0 2-3 2.5-3 4" stroke-linecap="round" stroke-linejoin="round"></path>235 </svg>236 </div>237 </div>238 </div>239 240 <!-- Title Field -->241 <div class="title-field">Title</div>242 243 <!-- Formatting Toolbar -->244 <div class="toolbar">245 <div class="tool-row">246 <div class="icon-square">OCR</div>247 <div class="tool-btn">B</div>248 <div class="tool-btn">I</div>249 <div class="tool-btn">T</div>250 <div class="tool-btn">U</div>251 <div class="tool-btn">A</div>252 <div class="tool-btn">TT</div>253 </div>254 255 <div class="tool-row">256 <div class="small-btn">▶︎</div>257 <div class="small-btn">≡</div>258 <div class="small-btn">x²</div>259 <div class="small-btn">x₂</div>260 <div class="small-btn">261 <svg viewBox="0 0 24 24">262 <path d="M15 6l-6 6 6 6" stroke="#444" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>263 </svg>264 </div>265 <div class="small-btn">266 <svg viewBox="0 0 24 24">267 <path d="M9 6l6 6-6 6" stroke="#444" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>268 </svg>269 </div>270 </div>271 272 <div class="tool-row">273 <div class="small-btn">≡</div>274 <div class="small-btn">≡</div>275 <div class="small-btn">≡</div>276 <div class="small-btn">•</div>277 <div class="small-btn">1.</div>278 <div class="small-btn">☑</div>279 <div class="done-button">DONE</div>280 </div>281 </div>282 283 <!-- Editor Content -->284 <div class="editor">285 <p>Manager</p>286 <p>AA Technologies</p>287 </div>288 289 <!-- Keyboard -->290 <div class="keyboard">291 <div class="suggest-bar">292 <span>Ltd</span>293 <span class="suggest-sep">|</span>294 <span>Pvt</span>295 <span class="suggest-sep">|</span>296 <span>limited</span>297 <span style="margin-left:auto; display:flex; align-items:center; gap:24px; padding-right:20px;">298 <svg viewBox="0 0 24 24" style="width:40px;height:40px;fill:#d9d9d9;">299 <circle cx="12" cy="12" r="10"></circle>300 </svg>301 </span>302 </div>303 304 <div class="keys">305 <!-- Row 1 -->306 <div class="key-row">307 <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>308 </div>309 <!-- Row 2 -->310 <div class="key-row" style="padding: 0 44px;">311 <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>312 </div>313 <!-- Row 3 -->314 <div class="key-row" style="padding: 0 120px;">315 <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>316 </div>317 318 <!-- Bottom Row -->319 <div class="bottom-row" style="margin-top: 18px;">320 <div class="key-wide">?123</div>321 <div class="key">,</div>322 <div class="key-icon">323 <svg viewBox="0 0 24 24">324 <circle cx="12" cy="12" r="10"></circle>325 <circle cx="12" cy="12" r="4" fill="#1f1f22"></circle>326 </svg>327 </div>328 <div class="key-xwide"></div><!-- space bar placeholder -->329 <div class="key dot-key">.</div>330 <div class="return-key">331 <svg viewBox="0 0 24 24">332 <path d="M18 7v5H7l4-4-4-4" />333 </svg>334 </div>335 </div>336 </div>337 </div>338 339</div>340</body>341</html>