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 }14 15 /* Top teal area (status + app header) */16 .teal-area {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 360px;22 background: #62C7D1;23 }24 25 .statusbar {26 height: 120px;27 padding: 0 24px;28 color: #ffffff;29 display: flex;30 align-items: center;31 justify-content: space-between;32 font-weight: 600;33 font-size: 40px;34 }35 .status-left, .status-right {36 display: flex; align-items: center; gap: 18px;37 }38 .small-icon {39 width: 36px; height: 36px; border: 2px solid rgba(255,255,255,0.9);40 border-radius: 6px;41 }42 43 .header-row {44 position: absolute;45 top: 130px;46 left: 24px;47 right: 24px;48 display: flex;49 align-items: center;50 gap: 24px;51 }52 53 .back-btn {54 width: 68px; height: 68px; border-radius: 34px;55 display: flex; align-items: center; justify-content: center;56 border: 2px solid rgba(255,255,255,0.9);57 }58 .title-input {59 flex: 1;60 height: 130px;61 background: #ffffff;62 border-radius: 12px;63 box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;64 display: flex; align-items: center;65 padding: 0 28px;66 font-size: 46px; color: #9E9E9E;67 }68 .circle-tool {69 width: 72px; height: 72px; border-radius: 36px;70 background: rgba(255,255,255,0.15);71 border: 2px solid rgba(255,255,255,0.9);72 display: flex; align-items: center; justify-content: center;73 color: #ffffff;74 }75 76 /* Formatting toolbar */77 .format-toolbar {78 position: absolute;79 top: 360px;80 left: 0;81 width: 1080px;82 padding: 24px 24px 0 24px;83 box-sizing: border-box;84 background: #ffffff;85 }86 .btn-row {87 display: flex; flex-wrap: wrap; gap: 24px;88 margin-bottom: 24px;89 }90 .fmt-btn {91 height: 96px;92 min-width: 120px;93 padding: 0 22px;94 border-radius: 12px;95 background: #F3F3F3;96 border: 1px solid #D9D9D9;97 display: flex; align-items: center; justify-content: center;98 font-size: 40px; color: #333;99 }100 .fmt-btn.wide { min-width: 180px; }101 .done-btn {102 position: absolute;103 right: 24px;104 top: 340px; /* aligns near third row */105 width: 220px; height: 96px;106 background: #49B8C2;107 color: #ffffff; font-weight: bold; font-size: 40px;108 border-radius: 10px;109 display: flex; align-items: center; justify-content: center;110 }111 112 /* Writing area */113 .editor-area {114 position: absolute;115 top: 760px;116 left: 24px;117 right: 24px;118 bottom: 960px; /* leave room for keyboard */119 font-size: 54px;120 color: #111;121 }122 123 /* Bottom keyboard */124 .keyboard {125 position: absolute;126 bottom: 0;127 left: 0;128 width: 1080px;129 height: 900px;130 background: #1F1F1F;131 color: #fff;132 box-sizing: border-box;133 padding-top: 24px;134 }135 .suggestions {136 height: 110px;137 display: flex; align-items: center; gap: 24px;138 padding: 0 24px;139 }140 .suggestion-chip {141 height: 90px; padding: 0 28px; border-radius: 18px;142 background: #2A2A2A; display: flex; align-items: center;143 font-size: 42px; color: #cfcfcf; border: 1px solid #3a3a3a;144 }145 .mic {146 margin-left: auto;147 width: 96px; height: 96px; border-radius: 48px;148 background: #4B3F5F; display: flex; align-items: center; justify-content: center;149 font-size: 40px;150 }151 152 .key-row { display: flex; justify-content: space-between; padding: 0 24px; margin-top: 24px; }153 .key {154 width: 92px; height: 120px; background: #2A2A2A; border: 1px solid #3a3a3a;155 border-radius: 22px; display: flex; align-items: center; justify-content: center;156 font-size: 46px; color: #f4f4f4;157 }158 .key.wide { width: 160px; }159 .space { flex: 1; height: 120px; border-radius: 22px; background: #2A2A2A; border: 1px solid #3a3a3a; margin: 0 12px; display: flex; align-items: center; justify-content: center; font-size: 42px; color: #ddd; }160 .enter { width: 140px; height: 120px; border-radius: 22px; background: #6C5A86; display: flex; align-items: center; justify-content: center; font-size: 44px; }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Top teal header area -->167 <div class="teal-area">168 <div class="statusbar">169 <div class="status-left">170 <div>11:03</div>171 <div class="small-icon"></div>172 <div class="small-icon"></div>173 <div class="small-icon" style="border-radius:50%"></div>174 </div>175 <div class="status-right" style="gap:20px;">176 <!-- simple wifi and battery -->177 <svg width="54" height="36" viewBox="0 0 54 36">178 <path d="M5 12c10-8 34-8 44 0M13 18c7-5 21-5 28 0M22 24c4-3 12-3 16 0M27 30l5 6 5-6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>179 </svg>180 <svg width="64" height="36" viewBox="0 0 64 36">181 <rect x="2" y="6" width="50" height="24" rx="4" stroke="#fff" stroke-width="3" fill="none"/>182 <rect x="6" y="10" width="40" height="16" rx="2" fill="#fff"/>183 <rect x="54" y="12" width="8" height="12" rx="2" fill="#fff"/>184 </svg>185 </div>186 </div>187 188 <div class="header-row">189 <div class="back-btn">190 <svg width="40" height="40" viewBox="0 0 24 24">191 <path d="M14 5l-7 7 7 7" stroke="#fff" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>192 </svg>193 </div>194 195 <div class="title-input">Title</div>196 197 <div class="circle-tool">198 <svg width="34" height="34" viewBox="0 0 24 24">199 <path d="M12 9l-5 5h10z" fill="#fff"/>200 </svg>201 </div>202 <div class="circle-tool">203 <svg width="34" height="34" viewBox="0 0 24 24">204 <rect x="5" y="4" width="14" height="16" stroke="#fff" stroke-width="2" fill="none"/>205 <rect x="9" y="8" width="6" height="8" fill="#fff"/>206 </svg>207 </div>208 <div class="circle-tool">209 <svg width="34" height="34" viewBox="0 0 24 24">210 <circle cx="12" cy="6" r="2" fill="#fff"/>211 <rect x="11" y="9" width="2" height="10" fill="#fff"/>212 </svg>213 </div>214 </div>215 </div>216 217 <!-- Formatting toolbar -->218 <div class="format-toolbar">219 <div class="btn-row">220 <div class="fmt-btn wide">OCR</div>221 <div class="fmt-btn">B</div>222 <div class="fmt-btn">I</div>223 <div class="fmt-btn">T</div>224 <div class="fmt-btn">U</div>225 <div class="fmt-btn">A</div>226 <div class="fmt-btn">Tt</div>227 </div>228 229 <div class="btn-row">230 <div class="fmt-btn" style="min-width:160px;">231 <svg width="46" height="46" viewBox="0 0 24 24">232 <path d="M4 8h16M4 12h10M4 16h16" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>233 </svg>234 </div>235 <div class="fmt-btn" style="min-width:160px;">236 <svg width="46" height="46" viewBox="0 0 24 24">237 <path d="M20 8H4M14 12H4M20 16H4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>238 </svg>239 </div>240 <div class="fmt-btn">x²</div>241 <div class="fmt-btn">x₂</div>242 <div class="fmt-btn" style="min-width:160px;">243 <svg width="46" height="46" viewBox="0 0 24 24">244 <path d="M5 12h14M12 5l-7 7 7 7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>245 </svg>246 </div>247 <div class="fmt-btn" style="min-width:160px;">248 <svg width="46" height="46" viewBox="0 0 24 24">249 <path d="M19 12H5M12 19l7-7-7-7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>250 </svg>251 </div>252 </div>253 254 <div class="btn-row">255 <div class="fmt-btn" style="min-width:160px;">256 <svg width="46" height="46" viewBox="0 0 24 24">257 <rect x="3" y="7" width="18" height="3" fill="#333"/>258 <rect x="3" y="11" width="18" height="3" fill="#333"/>259 <rect x="3" y="15" width="18" height="3" fill="#333"/>260 </svg>261 </div>262 <div class="fmt-btn" style="min-width:160px;">263 <svg width="46" height="46" viewBox="0 0 24 24">264 <rect x="3" y="7" width="10" height="3" fill="#333"/>265 <rect x="3" y="11" width="18" height="3" fill="#333"/>266 <rect x="3" y="15" width="10" height="3" fill="#333"/>267 </svg>268 </div>269 <div class="fmt-btn" style="min-width:160px;">270 <svg width="46" height="46" viewBox="0 0 24 24">271 <circle cx="6" cy="8" r="2" fill="#333"/>272 <rect x="10" y="7" width="10" height="2" fill="#333"/>273 <circle cx="6" cy="14" r="2" fill="#333"/>274 <rect x="10" y="13" width="10" height="2" fill="#333"/>275 </svg>276 </div>277 <div class="fmt-btn" style="min-width:160px;">278 <svg width="46" height="46" viewBox="0 0 24 24">279 <rect x="4" y="6" width="2" height="12" fill="#333"/>280 <rect x="8" y="6" width="12" height="2" fill="#333"/>281 <rect x="8" y="10" width="12" height="2" fill="#333"/>282 <rect x="8" y="14" width="12" height="2" fill="#333"/>283 </svg>284 </div>285 <div class="fmt-btn" style="min-width:160px;">286 <svg width="46" height="46" viewBox="0 0 24 24">287 <rect x="5" y="5" width="14" height="14" rx="2" stroke="#333" stroke-width="2" fill="none"/>288 <path d="M9 12l2 2 4-4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>289 </svg>290 </div>291 </div>292 293 <div class="done-btn">DONE</div>294 </div>295 296 <!-- Editor content -->297 <div class="editor-area">298 <div>Manager</div>299 <div>AA Techn</div>300 </div>301 302 <!-- Keyboard -->303 <div class="keyboard">304 <div class="suggestions">305 <div class="suggestion-chip">Techn</div>306 <div class="suggestion-chip">Technology</div>307 <div class="suggestion-chip">Techno</div>308 <div class="mic">🎤</div>309 </div>310 311 <!-- Row 1 -->312 <div class="key-row">313 <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>314 </div>315 <!-- Row 2 -->316 <div class="key-row">317 <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>318 </div>319 <!-- Row 3 -->320 <div class="key-row">321 <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>322 <div class="key wide">⌫</div>323 </div>324 <!-- Row 4 -->325 <div class="key-row">326 <div class="key wide">?123</div>327 <div class="key wide">,</div>328 <div class="space">space</div>329 <div class="key">.</div>330 <div class="enter">↵</div>331 </div>332 </div>333 334</div>335</body>336</html>