GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Note Editor Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Roboto", Arial, Helvetica, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #202124;20 border-radius: 0;21 box-shadow: none;22 color: #E0E0E0;23 }24 25 /* Status bar */26 .status-bar {27 position: absolute;28 top: 0;29 left: 0;30 width: 1080px;31 height: 120px;32 padding: 0 36px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 color: #DADADA;37 font-size: 34px;38 letter-spacing: 0.5px;39 }40 .status-left, .status-right {41 display: flex;42 align-items: center;43 gap: 22px;44 }45 .dot {46 width: 10px;47 height: 10px;48 background: #BDBDBD;49 border-radius: 50%;50 display: inline-block;51 }52 .status-icon {53 width: 34px;54 height: 34px;55 opacity: 0.85;56 }57 58 /* Top app bar */59 .app-bar {60 position: absolute;61 top: 120px;62 left: 0;63 width: 1080px;64 height: 150px;65 padding: 0 36px;66 display: flex;67 align-items: center;68 justify-content: space-between;69 color: #BDBDBD;70 }71 .back {72 display: flex;73 align-items: center;74 gap: 14px;75 }76 .app-actions {77 display: flex;78 align-items: center;79 gap: 46px;80 }81 .icon-btn svg {82 width: 48px;83 height: 48px;84 stroke: #BDBDBD;85 fill: none;86 stroke-width: 2.5;87 }88 89 /* Content */90 .content {91 position: absolute;92 top: 270px;93 left: 36px;94 right: 36px;95 }96 .title {97 font-size: 78px;98 color: #D6D6D6;99 margin: 18px 0 10px 0;100 font-weight: 500;101 }102 .subtitle {103 font-size: 42px;104 color: #9AA0A6;105 }106 107 /* Tools row above keyboard */108 .tools-row {109 position: absolute;110 top: 1240px;111 left: 0;112 width: 1080px;113 height: 110px;114 padding: 0 32px;115 display: flex;116 align-items: center;117 justify-content: space-between;118 color: #BDBDBD;119 }120 .tools-left, .tools-right {121 display: flex;122 align-items: center;123 gap: 36px;124 }125 .tool-icon svg {126 width: 44px;127 height: 44px;128 stroke: #BDBDBD;129 fill: none;130 stroke-width: 2.6;131 }132 .edited-text {133 font-size: 34px;134 color: #BDBDBD;135 }136 137 /* Keyboard */138 .keyboard {139 position: absolute;140 bottom: 0;141 left: 0;142 width: 1080px;143 height: 900px;144 background: #2A2A2A;145 border-top: 1px solid #3A3A3A;146 box-sizing: border-box;147 }148 .kb-top-icons {149 height: 110px;150 padding: 0 30px;151 display: flex;152 align-items: center;153 gap: 44px;154 color: #D0D0D0;155 }156 .kb-top-icons .small-icon svg {157 width: 46px;158 height: 46px;159 stroke: #D0D0D0;160 fill: none;161 stroke-width: 2.4;162 }163 164 .keys {165 padding: 8px 22px 0 22px;166 }167 .row {168 display: flex;169 justify-content: center;170 gap: 18px;171 margin: 16px 0;172 }173 .key {174 background: #3A3A3A;175 color: #F2F2F2;176 border-radius: 18px;177 height: 120px;178 min-width: 86px;179 padding: 0 26px;180 display: flex;181 align-items: center;182 justify-content: center;183 font-size: 44px;184 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);185 }186 .key.small {187 min-width: 110px;188 }189 .key.wide {190 min-width: 190px;191 }192 .key.space {193 min-width: 480px;194 }195 .key.icon-key svg {196 width: 40px;197 height: 40px;198 stroke: #E0E0E0;199 fill: none;200 stroke-width: 2.6;201 }202 203 /* Gesture bar */204 .gesture-bar {205 position: absolute;206 bottom: 18px;207 left: 50%;208 transform: translateX(-50%);209 width: 280px;210 height: 10px;211 background: #CFCFCF;212 border-radius: 10px;213 opacity: 0.6;214 }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Status Bar -->221 <div class="status-bar">222 <div class="status-left">223 <span>9:13</span>224 <span class="dot"></span>225 <span class="dot"></span>226 <span class="dot"></span>227 <span class="dot"></span>228 <span class="dot"></span>229 </div>230 <div class="status-right">231 <!-- Wi-Fi -->232 <svg class="status-icon" viewBox="0 0 24 24">233 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0"/>234 <circle cx="12" cy="19" r="1.7" fill="#DADADA"></circle>235 </svg>236 <!-- Battery -->237 <svg class="status-icon" viewBox="0 0 26 26">238 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#DADADA"></rect>239 <rect x="4" y="8" width="14" height="8" fill="#DADADA"></rect>240 <rect x="22" y="10" width="2" height="4" fill="#DADADA"></rect>241 </svg>242 </div>243 </div>244 245 <!-- App Bar -->246 <div class="app-bar">247 <div class="back">248 <svg class="icon-btn" viewBox="0 0 48 48">249 <path d="M30 10 L16 24 L30 38" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>250 </svg>251 </div>252 <div class="app-actions">253 <!-- Pin -->254 <div class="icon-btn">255 <svg viewBox="0 0 48 48">256 <path d="M18 10 L30 18 L24 20 L24 34 L20 34 L20 20 L14 18 Z" />257 </svg>258 </div>259 <!-- Bell -->260 <div class="icon-btn">261 <svg viewBox="0 0 48 48">262 <path d="M24 38c3 0 5-2 5-4H19c0 2 2 4 5 4zM12 30h24c-2-2-3-6-3-11a9 9 0 0 0-18 0c0 5-1 9-3 11z" />263 </svg>264 </div>265 <!-- Download to tray -->266 <div class="icon-btn">267 <svg viewBox="0 0 48 48">268 <rect x="10" y="30" width="28" height="8" rx="2" />269 <path d="M24 10 V26 M18 20 L24 26 L30 20" />270 </svg>271 </div>272 </div>273 </div>274 275 <!-- Content -->276 <div class="content">277 <div class="title">Title</div>278 <div class="subtitle">Note</div>279 </div>280 281 <!-- Tools Row -->282 <div class="tools-row">283 <div class="tools-left">284 <!-- Add square -->285 <div class="tool-icon">286 <svg viewBox="0 0 48 48">287 <rect x="8" y="8" width="32" height="32" rx="6"></rect>288 <path d="M24 16 V32 M16 24 H32"></path>289 </svg>290 </div>291 <!-- Palette -->292 <div class="tool-icon">293 <svg viewBox="0 0 48 48">294 <path d="M24 10c-8 0-14 5-14 12s5 10 10 10h5c3 0 4-3 3-5-1-2-1-3 1-5 2-2 3-4 3-7 0-2-3-5-8-5z"></path>295 <circle cx="16" cy="22" r="2.2"></circle>296 <circle cx="22" cy="18" r="2.2"></circle>297 <circle cx="28" cy="22" r="2.2"></circle>298 </svg>299 </div>300 <!-- Text style 'A' -->301 <div class="tool-icon">302 <svg viewBox="0 0 48 48">303 <path d="M12 36 L24 12 L36 36 M17 28 H31" />304 </svg>305 </div>306 </div>307 <div class="edited-text">Edited 9:12 PM</div>308 <div class="tools-right">309 <!-- More (vertical dots) -->310 <div class="tool-icon">311 <svg viewBox="0 0 48 48">312 <circle cx="24" cy="14" r="3"></circle>313 <circle cx="24" cy="24" r="3"></circle>314 <circle cx="24" cy="34" r="3"></circle>315 </svg>316 </div>317 </div>318 </div>319 320 <!-- Keyboard -->321 <div class="keyboard">322 <!-- Top icons row -->323 <div class="kb-top-icons">324 <div class="small-icon">325 <svg viewBox="0 0 48 48">326 <rect x="8" y="8" width="10" height="10" rx="2"></rect>327 <rect x="20" y="8" width="10" height="10" rx="2"></rect>328 <rect x="32" y="8" width="10" height="10" rx="2"></rect>329 <rect x="8" y="20" width="10" height="10" rx="2"></rect>330 <rect x="20" y="20" width="10" height="10" rx="2"></rect>331 <rect x="32" y="20" width="10" height="10" rx="2"></rect>332 </svg>333 </div>334 <div class="small-icon">335 <svg viewBox="0 0 48 48">336 <circle cx="24" cy="22" r="10"></circle>337 <path d="M18 34c2-3 10-3 12 0" />338 </svg>339 </div>340 <div class="small-icon">341 <svg viewBox="0 0 48 48">342 <text x="12" y="30" font-size="18" fill="#D0D0D0">GIF</text>343 <rect x="10" y="12" width="28" height="22" rx="6" stroke="#D0D0D0" fill="none"></rect>344 </svg>345 </div>346 <div class="small-icon">347 <svg viewBox="0 0 48 48">348 <circle cx="24" cy="24" r="16"></circle>349 <path d="M24 16 V24 H32" />350 </svg>351 </div>352 <div class="small-icon">353 <svg viewBox="0 0 48 48">354 <path d="M10 20 c8-12 20 12 28 0" />355 <text x="16" y="34" font-size="16" fill="#D0D0D0">G</text>356 </svg>357 </div>358 <div class="small-icon">359 <svg viewBox="0 0 48 48">360 <path d="M24 10c-8 0-14 5-14 12s5 10 10 10h5c3 0 4-3 3-5-1-2-1-3 1-5 2-2 3-4 3-7 0-2-3-5-8-5z"></path>361 </svg>362 </div>363 <div class="small-icon">364 <svg viewBox="0 0 48 48">365 <path d="M24 34c3 0 5-2 5-4H19c0 2 2 4 5 4zM12 26h24c-2-2-3-6-3-11a9 9 0 0 0-18 0c0 5-1 9-3 11z" />366 </svg>367 </div>368 </div>369 370 <!-- Keys -->371 <div class="keys">372 <div class="row">373 <div class="key">Q</div>374 <div class="key">W</div>375 <div class="key">E</div>376 <div class="key">R</div>377 <div class="key">T</div>378 <div class="key">Y</div>379 <div class="key">U</div>380 <div class="key">I</div>381 <div class="key">O</div>382 <div class="key">P</div>383 </div>384 <div class="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 <div class="row">396 <div class="key small">397 <svg class="icon-key" viewBox="0 0 48 48">398 <path d="M16 32 L12 24 L16 16" />399 <path d="M12 24 H36" />400 </svg>401 </div>402 <div class="key">Z</div>403 <div class="key">X</div>404 <div class="key">C</div>405 <div class="key">V</div>406 <div class="key">B</div>407 <div class="key">N</div>408 <div class="key">M</div>409 <div class="key small">410 <svg class="icon-key" viewBox="0 0 48 48">411 <path d="M14 16 L34 16 L28 22 M34 16 L28 22 L34 28" />412 </svg>413 </div>414 </div>415 <div class="row">416 <div class="key wide" style="background:#59627A;color:#E9EEF9">?123</div>417 <div class="key small">,</div>418 <div class="key small">419 <svg class="icon-key" viewBox="0 0 48 48">420 <circle cx="24" cy="22" r="10"></circle>421 <path d="M18 34c2-3 10-3 12 0" />422 </svg>423 </div>424 <div class="key space"></div>425 <div class="key small">.</div>426 <div class="key wide" style="background:#59627A;color:#E9EEF9">427 <svg class="icon-key" viewBox="0 0 48 48">428 <path d="M14 18 L24 28 L34 18" />429 <path d="M24 28 V14" />430 </svg>431 </div>432 </div>433 </div>434 </div>435 436 <!-- Gesture Bar -->437 <div class="gesture-bar"></div>438 439</div>440</body>441</html>