GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Note Editor UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #121212;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15 color: #ffffff;16 }17 18 /* Status bar */19 .status-bar {20 height: 108px;21 padding: 0 28px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #cfcfcf;26 font-size: 36px;27 letter-spacing: 0.2px;28 }29 .status-left { display: flex; align-items: center; gap: 18px; }30 .status-right { display: flex; align-items: center; gap: 24px; }31 .icon-wifi, .icon-battery {32 width: 44px; height: 44px;33 }34 .icon-wifi path, .icon-battery rect, .icon-battery path { fill: #cfcfcf; }35 36 /* App bar */37 .app-bar {38 height: 120px;39 padding: 0 28px;40 display: flex;41 align-items: center;42 justify-content: space-between;43 }44 .app-left { display: flex; align-items: center; gap: 20px; }45 .back-btn svg { width: 56px; height: 56px; }46 .app-right { display: flex; align-items: center; gap: 28px; }47 .app-right svg { width: 56px; height: 56px; }48 .reminder-ring circle { stroke: #F2C94C; }49 .kebab circle { fill: #d9d9d9; }50 .pin path { fill: #d9d9d9; }51 52 /* Content */53 .content {54 padding: 24px 40px 0 40px;55 }56 .note-title {57 font-size: 72px;58 font-weight: 800;59 line-height: 1.15;60 margin: 18px 0 20px 0;61 color: #f5f5f5;62 }63 .meta-row {64 display: flex;65 align-items: center;66 justify-content: space-between;67 color: #9e9e9e;68 font-size: 36px;69 margin-bottom: 24px;70 }71 .calendar-icon {72 width: 64px; height: 64px;73 }74 .divider {75 height: 2px;76 background: #2a2a2a;77 margin: 12px 0 28px 0;78 }79 .body-text {80 font-size: 48px;81 color: #eaeaea;82 line-height: 1.45;83 display: inline-flex;84 align-items: center;85 }86 .cursor {87 width: 4px;88 height: 64px;89 background: #1E88E5;90 margin-left: 6px;91 border-radius: 2px;92 }93 94 /* Keyboard */95 .keyboard {96 position: absolute;97 left: 0;98 bottom: 0;99 width: 1080px;100 height: 980px;101 background: #1a1a1a;102 border-top: 1px solid #2a2a2a;103 box-shadow: 0 -6px 16px rgba(0,0,0,0.4);104 }105 .kb-toolbar {106 height: 100px;107 padding: 0 36px;108 display: flex;109 align-items: center;110 justify-content: space-between;111 background: #202020;112 color: #dcdcdc;113 font-size: 40px;114 }115 .kb-tools-left {116 display: flex;117 align-items: center;118 gap: 34px;119 }120 .kb-tools-left .tool-icon svg,121 .kb-tools-right svg { width: 48px; height: 48px; }122 .kb-icons {123 height: 94px;124 padding: 0 30px;125 display: flex;126 align-items: center;127 justify-content: space-between;128 color: #dcdcdc;129 background: #1e1e1e;130 border-top: 1px solid #2a2a2a;131 }132 .kb-icons .left-icons { display: flex; align-items: center; gap: 30px; }133 .kb-icons .left-icons svg { width: 42px; height: 42px; }134 .kb-icons .mic svg { width: 50px; height: 50px; }135 136 .kb-keys {137 padding: 18px 20px 0 20px;138 }139 .kb-row {140 display: flex;141 gap: 16px;142 padding: 10px 10px;143 justify-content: center;144 }145 .key {146 width: 92px;147 height: 126px;148 background: #252525;149 border: 1px solid #3a3a3a;150 border-radius: 18px;151 color: #E8E0D0;152 font-size: 44px;153 display: flex;154 align-items: center;155 justify-content: center;156 box-sizing: border-box;157 }158 .key.wide { width: 152px; }159 .space { width: 520px; }160 .accent {161 background: #E8D090;162 border-color: #d6bd7b;163 color: #1b1b1b;164 font-weight: 700;165 }166 .circle-key {167 width: 126px;168 height: 126px;169 border-radius: 63px;170 }171 .key svg { width: 40px; height: 40px; }172 .gesture-bar {173 position: absolute;174 bottom: 18px;175 left: 50%;176 transform: translateX(-50%);177 width: 220px;178 height: 12px;179 background: #eaeaea;180 border-radius: 10px;181 opacity: 0.9;182 }183</style>184</head>185<body>186<div id="render-target">187 188 <!-- Status bar -->189 <div class="status-bar">190 <div class="status-left">191 <div>3:13</div>192 <div>72°</div>193 <div>✓</div>194 <div>en</div>195 <div>•</div>196 </div>197 <div class="status-right">198 <svg class="icon-wifi" viewBox="0 0 24 24">199 <path d="M12 18a2 2 0 1 0 0.001 0zM2 8c5.5-4.5 14.5-4.5 20 0l-2.5 2c-4.7-3.8-10.3-3.8-15 0L2 8zM5 12c4-3 10-3 14 0l-2.2 1.8c-3-2.3-6.7-2.3-9.6 0L5 12z" />200 </svg>201 <svg class="icon-battery" viewBox="0 0 24 24">202 <rect x="2" y="6" width="18" height="12" rx="2"></rect>203 <rect x="4" y="8" width="12" height="8" rx="1" fill="#cfcfcf"></rect>204 <path d="M21 9v6h2V9z"></path>205 </svg>206 </div>207 </div>208 209 <!-- App bar -->210 <div class="app-bar">211 <div class="app-left">212 <div class="back-btn">213 <svg viewBox="0 0 24 24">214 <path d="M15 18l-6-6 6-6" stroke="#ffffff" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>215 </svg>216 </div>217 </div>218 <div class="app-right">219 <svg class="reminder-ring" viewBox="0 0 24 24">220 <circle cx="12" cy="12" r="8.5" stroke-width="3" fill="none"></circle>221 <circle cx="12" cy="12" r="2.5" stroke-width="3" fill="none"></circle>222 </svg>223 <svg class="pin" viewBox="0 0 24 24">224 <path d="M9 3l8 5-4 4 1 6-4-4-4 4 2-6-4-4z"></path>225 </svg>226 <svg class="kebab" viewBox="0 0 24 24">227 <circle cx="12" cy="5" r="2"></circle>228 <circle cx="12" cy="12" r="2"></circle>229 <circle cx="12" cy="19" r="2"></circle>230 </svg>231 </div>232 </div>233 234 <!-- Note content -->235 <div class="content">236 <div class="note-title">Reminder to buy groceries</div>237 <div class="meta-row">238 <div>Edited: 12-13 15:13</div>239 <svg class="calendar-icon" viewBox="0 0 40 40">240 <rect x="5" y="8" width="30" height="26" rx="3" fill="#616161"></rect>241 <rect x="5" y="8" width="30" height="7" fill="#757575"></rect>242 <rect x="9" y="20" width="6" height="6" fill="#9e9e9e"></rect>243 <rect x="19" y="20" width="6" height="6" fill="#9e9e9e"></rect>244 <rect x="29" y="20" width="2" height="6" fill="#9e9e9e"></rect>245 </svg>246 </div>247 <div class="divider"></div>248 <div class="body-text">249 Milk, eggs, chicken and broccoli.<span class="cursor"></span>250 </div>251 </div>252 253 <!-- Keyboard -->254 <div class="keyboard">255 <div class="kb-toolbar">256 <div class="kb-tools-left">257 <div>Aa</div>258 <div class="tool-icon">259 <svg viewBox="0 0 24 24">260 <path d="M15 18l-6-6 6-6" stroke="#dcdcdc" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>261 </svg>262 </div>263 <div class="tool-icon">264 <svg viewBox="0 0 24 24">265 <path d="M9 18l6-6-6-6" stroke="#dcdcdc" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>266 </svg>267 </div>268 </div>269 <div class="kb-tools-right">270 <svg viewBox="0 0 24 24">271 <path d="M5 13l4 4 10-10" stroke="#dcdcdc" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>272 </svg>273 </div>274 </div>275 276 <div class="kb-icons">277 <div class="left-icons">278 <svg viewBox="0 0 24 24">279 <rect x="3" y="3" width="6" height="6" fill="#dcdcdc"></rect>280 <rect x="13" y="3" width="8" height="6" fill="#dcdcdc"></rect>281 <rect x="3" y="13" width="8" height="8" fill="#dcdcdc"></rect>282 <rect x="13" y="13" width="8" height="8" fill="#dcdcdc"></rect>283 </svg>284 <svg viewBox="0 0 24 24">285 <circle cx="12" cy="12" r="9" fill="none" stroke="#dcdcdc" stroke-width="2"></circle>286 <circle cx="9" cy="10" r="1.2" fill="#dcdcdc"></circle>287 <circle cx="15" cy="10" r="1.2" fill="#dcdcdc"></circle>288 <path d="M8 15c2.5 2 5.5 2 8 0" stroke="#dcdcdc" stroke-width="2" fill="none" stroke-linecap="round"></path>289 </svg>290 <div style="font-size:40px;">GIF</div>291 <svg viewBox="0 0 24 24">292 <circle cx="12" cy="12" r="9" stroke="#dcdcdc" stroke-width="2" fill="none"></circle>293 <path d="M12 4v4M12 16v4M4 12h4M16 12h4" stroke="#dcdcdc" stroke-width="2"></path>294 </svg>295 <svg viewBox="0 0 24 24">296 <rect x="3" y="3" width="8" height="8" fill="none" stroke="#dcdcdc" stroke-width="2"></rect>297 <text x="8" y="17" font-size="10" fill="#dcdcdc" text-anchor="middle">G</text>298 </svg>299 <svg viewBox="0 0 24 24">300 <circle cx="12" cy="12" r="9" fill="none" stroke="#dcdcdc" stroke-width="2"></circle>301 <circle cx="9" cy="10" r="1.3" fill="#dcdcdc"></circle>302 <circle cx="15" cy="12" r="1.3" fill="#dcdcdc"></circle>303 <circle cx="12" cy="15" r="1.3" fill="#dcdcdc"></circle>304 </svg>305 </div>306 <div class="mic">307 <svg viewBox="0 0 24 24">308 <rect x="9" y="5" width="6" height="10" rx="3" fill="#dcdcdc"></rect>309 <path d="M5 12a7 7 0 0 0 14 0" stroke="#dcdcdc" stroke-width="2" fill="none"></path>310 <path d="M12 19v3" stroke="#dcdcdc" stroke-width="2"></path>311 </svg>312 </div>313 </div>314 315 <div class="kb-keys">316 <div class="kb-row">317 <div class="key">q</div>318 <div class="key">w</div>319 <div class="key">e</div>320 <div class="key">r</div>321 <div class="key">t</div>322 <div class="key">y</div>323 <div class="key">u</div>324 <div class="key">i</div>325 <div class="key">o</div>326 <div class="key">p</div>327 </div>328 329 <div class="kb-row">330 <div class="key">a</div>331 <div class="key">s</div>332 <div class="key">d</div>333 <div class="key">f</div>334 <div class="key">g</div>335 <div class="key">h</div>336 <div class="key">j</div>337 <div class="key">k</div>338 <div class="key">l</div>339 <div class="key wide">340 <svg viewBox="0 0 24 24">341 <path d="M3 12l5-5h11v10H8z" fill="#dcdcdc"></path>342 </svg>343 </div>344 </div>345 346 <div class="kb-row">347 <div class="key wide">↑</div>348 <div class="key">z</div>349 <div class="key">x</div>350 <div class="key">c</div>351 <div class="key">v</div>352 <div class="key">b</div>353 <div class="key">n</div>354 <div class="key">m</div>355 </div>356 357 <div class="kb-row">358 <div class="key circle-key accent">?123</div>359 <div class="key">,</div>360 <div class="key">😊</div>361 <div class="key space"></div>362 <div class="key">.</div>363 <div class="key circle-key accent">364 <svg viewBox="0 0 24 24">365 <path d="M5 13l4 4 10-10" stroke="#1b1b1b" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>366 </svg>367 </div>368 </div>369 </div>370 371 <div class="gesture-bar"></div>372 </div>373 374</div>375</body>376</html>