GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Note Editor Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target {10 position: relative;11 width:1080px;12 height:2400px;13 overflow:hidden;14 background:#121212;15 color:#fff;16 font-family: Roboto, Arial, Helvetica, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 position:absolute;22 top:0;23 left:0;24 right:0;25 height:100px;26 padding:0 32px;27 display:flex;28 align-items:center;29 justify-content:space-between;30 color:#F5F5F5;31 font-size:36px;32 letter-spacing:1px;33 }34 .status-right {35 display:flex; align-items:center; gap:26px; font-size:30px; color:#E0E0E0;36 }37 .icon {38 width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;39 color:#E0E0E0;40 }41 .icon svg { width:100%; height:100%; fill:none; stroke:#E0E0E0; stroke-width:3.5; }42 43 /* App bar */44 .app-bar {45 position:absolute;46 top:100px;47 left:0; right:0;48 height:110px;49 padding:0 28px;50 display:flex; align-items:center; justify-content:space-between;51 }52 .app-actions { display:flex; align-items:center; gap:34px; }53 .back {54 width:56px; height:56px; display:flex; align-items:center; justify-content:center;55 }56 .back svg { width:56px; height:56px; stroke:#E0E0E0; stroke-width:6; }57 58 /* Content */59 .content {60 position:absolute;61 top:240px;62 left:56px;63 right:56px;64 }65 .title {66 font-size:92px;67 font-weight:500;68 color:#ECECEC;69 line-height:1.06;70 margin:0 0 20px 0;71 }72 .body {73 font-size:42px;74 color:#CFCFCF;75 line-height:1.5;76 max-width:920px;77 }78 79 /* Caret + selection drop */80 .caret {81 position:absolute;82 top:360px; /* tuned to appear at end of the title line */83 left:740px;84 width:22px; height:120px;85 }86 .caret .bar {87 position:absolute; left:10px; top:0;88 width:4px; height:86px; background:#E7E7E7; border-radius:2px;89 }90 .caret .drop {91 position:absolute; bottom:4px; left:0;92 width:22px; height:22px; background:#D7E692;93 border-radius:50% 50% 50% 0;94 transform:rotate(45deg);95 }96 97 /* Bottom note tools above keyboard */98 .note-tools {99 position:absolute;100 left:0; right:0;101 bottom:940px; /* sits right above keyboard */102 height:120px;103 display:flex; align-items:center; justify-content:space-between;104 padding:0 32px;105 color:#BDBDBD; font-size:34px;106 }107 .tools-left, .tools-right { display:flex; align-items:center; gap:34px; }108 .pill-icon {109 width:72px; height:72px; border-radius:16px;110 border:2px solid #2A2A2A; color:#CFCFCF;111 display:flex; align-items:center; justify-content:center;112 background:#1B1B1B;113 }114 115 /* Suggestion bar */116 .suggestions {117 position:absolute; left:0; right:0;118 bottom:860px;119 height:90px;120 display:flex; align-items:center; justify-content:space-between;121 padding:0 22px;122 color:#DADADA; font-size:36px;123 background:#1A1A1A;124 border-top:1px solid #2b2b2b;125 border-bottom:1px solid #2b2b2b;126 }127 .s-left, .s-right { display:flex; align-items:center; gap:22px; }128 .s-center { display:flex; align-items:center; gap:38px; color:#E8E8E8; }129 .s-chip { color:#E8E8E8; }130 131 /* Keyboard */132 .keyboard {133 position:absolute; left:0; right:0; bottom:100px;134 height:760px; background:#181818; padding:16px 14px 12px 14px;135 }136 .row { display:flex; gap:12px; justify-content:center; margin:14px 0; }137 .key {138 background:#2B2B2B; color:#F0F0F0; border-radius:16px;139 min-width:86px; height:112px; display:flex; align-items:center; justify-content:center;140 font-size:40px;141 }142 .key.wide { min-width:130px; }143 .key.space { flex:1; min-width:auto; }144 .key.small { min-width:110px; }145 .key-action { background:#DCE682; color:#101010; }146 .key-dark { background:#242424; color:#E0E0E0; }147 148 /* Gesture pill */149 .gesture {150 position:absolute; bottom:28px; left:50%;151 transform:translateX(-50%);152 width:220px; height:10px; background:#EDEDED; border-radius:8px; opacity:.9;153 }154</style>155</head>156<body>157<div id="render-target">158 159 <!-- Status bar -->160 <div class="status-bar">161 <div class="status-left">6:40</div>162 <div class="status-right">163 <span>86°</span>164 <div class="icon" title="Wi‑Fi">165 <svg viewBox="0 0 24 24">166 <path d="M2 8c5-4 15-4 20 0"/>167 <path d="M5 12c3-3 11-3 14 0"/>168 <path d="M8 16c2-2 6-2 8 0"/>169 <circle cx="12" cy="19" r="1.6" fill="#E0E0E0" stroke="none"/>170 </svg>171 </div>172 <div class="icon" title="Battery">173 <svg viewBox="0 0 24 24">174 <rect x="3" y="7" width="16" height="10" rx="2"/>175 <rect x="20" y="10" width="2.5" height="4" rx="1" />176 </svg>177 </div>178 </div>179 </div>180 181 <!-- App bar -->182 <div class="app-bar">183 <div class="back">184 <svg viewBox="0 0 24 24">185 <path d="M15.5 4.5L7 12l8.5 7.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>186 </svg>187 </div>188 <div class="app-actions">189 <div class="icon" title="Bell">190 <svg viewBox="0 0 24 24">191 <path d="M18 16H6c1-1 1-4 1-6a5 5 0 0 1 10 0c0 2 0 5 1 6z"/>192 <path d="M10 18a2 2 0 0 0 4 0" />193 </svg>194 </div>195 <div class="icon" title="Lock">196 <svg viewBox="0 0 24 24">197 <rect x="5" y="10" width="14" height="10" rx="2"/>198 <path d="M8 10V7a4 4 0 0 1 8 0v3" />199 </svg>200 </div>201 <div class="icon" title="Save">202 <svg viewBox="0 0 24 24">203 <rect x="4" y="4" width="16" height="16" rx="2"/>204 <path d="M8 9l4 4 4-4" />205 <path d="M12 5v8" />206 </svg>207 </div>208 </div>209 </div>210 211 <!-- Content -->212 <div class="content">213 <h1 class="title">My dream project</h1>214 <p class="body">My dreams are to be finance free and travel around the world.</p>215 </div>216 217 <!-- Caret + selection drop shaped indicator -->218 <div class="caret">219 <div class="bar"></div>220 <div class="drop"></div>221 </div>222 223 <!-- Tools row above keyboard -->224 <div class="note-tools">225 <div class="tools-left">226 <div class="pill-icon">227 <svg viewBox="0 0 24 24">228 <path d="M4 12h6V6h4v6h6v4h-6v6h-4v-6H4z" fill="#CFCFCF" stroke="none"/>229 </svg>230 </div>231 <div class="pill-icon">232 <svg viewBox="0 0 24 24">233 <circle cx="12" cy="12" r="7" fill="none" stroke="#CFCFCF" stroke-width="2.2"/>234 <path d="M5 19l4-4" stroke="#CFCFCF" stroke-width="2.2"/>235 </svg>236 </div>237 </div>238 <div style="font-size:32px; color:#9E9E9E;">Edited 6:38 PM</div>239 <div class="tools-right">240 <div class="pill-icon">241 <svg viewBox="0 0 24 24">242 <circle cx="12" cy="5" r="2.2" fill="#CFCFCF"/>243 <circle cx="12" cy="12" r="2.2" fill="#CFCFCF"/>244 <circle cx="12" cy="19" r="2.2" fill="#CFCFCF"/>245 </svg>246 </div>247 </div>248 </div>249 250 <!-- Suggestions bar -->251 <div class="suggestions">252 <div class="s-left">253 <div class="pill-icon" style="width:64px;height:64px;border-radius:18px;background:#2A2A2A;">254 <svg viewBox="0 0 24 24">255 <rect x="4" y="4" width="6" height="6" rx="2" fill="#DADADA"/>256 <rect x="14" y="4" width="6" height="6" rx="2" fill="#DADADA"/>257 <rect x="4" y="14" width="6" height="6" rx="2" fill="#DADADA"/>258 <rect x="14" y="14" width="6" height="6" rx="2" fill="#DADADA"/>259 </svg>260 </div>261 </div>262 <div class="s-center">263 <span class="s-chip">project</span>264 <span class="s-chip">projects</span>265 <span class="s-chip">projector</span>266 </div>267 <div class="s-right">268 <div class="pill-icon" style="width:64px;height:64px;border-radius:32px;background:#2A2A2A;">269 <svg viewBox="0 0 24 24">270 <path d="M12 3v5m0 8v5m9-9h-5M8 12H3" stroke="#DADADA" stroke-width="2" fill="none" stroke-linecap="round"/>271 </svg>272 </div>273 </div>274 </div>275 276 <!-- Keyboard -->277 <div class="keyboard">278 <!-- Row 1 -->279 <div class="row">280 <div class="key">q</div>281 <div class="key">w</div>282 <div class="key">e</div>283 <div class="key">r</div>284 <div class="key">t</div>285 <div class="key">y</div>286 <div class="key">u</div>287 <div class="key">i</div>288 <div class="key">o</div>289 <div class="key">p</div>290 </div>291 <!-- Row 2 -->292 <div class="row">293 <div class="key">a</div>294 <div class="key">s</div>295 <div class="key">d</div>296 <div class="key">f</div>297 <div class="key">g</div>298 <div class="key">h</div>299 <div class="key">j</div>300 <div class="key">k</div>301 <div class="key">l</div>302 </div>303 <!-- Row 3 -->304 <div class="row">305 <div class="key wide key-dark">306 <svg viewBox="0 0 24 24" style="width:44px;height:44px;">307 <path d="M9 19l-7-7 7-7" stroke="#E0E0E0" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>308 </svg>309 </div>310 <div class="key">z</div>311 <div class="key">x</div>312 <div class="key">c</div>313 <div class="key">v</div>314 <div class="key">b</div>315 <div class="key">n</div>316 <div class="key">m</div>317 <div class="key wide key-dark">318 <svg viewBox="0 0 24 24" style="width:44px;height:44px;">319 <path d="M3 7h18M9 7l6 10M15 7L9 17" stroke="#E0E0E0" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>320 </svg>321 </div>322 </div>323 <!-- Row 4 -->324 <div class="row">325 <div class="key small key-action">?123</div>326 <div class="key small key-dark">327 <svg viewBox="0 0 24 24" style="width:40px;height:40px;">328 <circle cx="9" cy="9" r="2.3" fill="#E0E0E0"/>329 <path d="M6 19c2-3 9-3 12 0" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round"/>330 </svg>331 </div>332 <div class="key space"> </div>333 <div class="key small key-dark">.</div>334 <div class="key small key-action">335 <svg viewBox="0 0 24 24" style="width:40px;height:40px;">336 <path d="M5 12h11m0 0l-4-4m4 4l-4 4" stroke="#101010" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>337 </svg>338 </div>339 </div>340 </div>341 342 <!-- Gesture pill -->343 <div class="gesture"></div>344 345</div>346</body>347</html>