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: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;9 border-radius:0;10 }11 12 /* Top teal app bar */13 .app-bar {14 position:absolute; top:0; left:0; width:100%; height:180px; background:#58c1cd;15 }16 .status-row {17 position:absolute; top:24px; left:32px; right:32px; height:56px; display:flex; align-items:center; color:#fff; font-weight:600; font-size:36px;18 }19 .status-left { display:flex; align-items:center; gap:20px; }20 .dot-icon { width:26px; height:26px; background:rgba(255,255,255,0.6); border-radius:50%; }21 .status-right { margin-left:auto; display:flex; align-items:center; gap:28px; }22 .status-icon svg { width:54px; height:34px; fill:none; stroke:#fff; stroke-width:4; }23 24 /* Content area */25 .content { position:absolute; top:180px; left:0; right:0; bottom:0; background:#fff; }26 .top-controls {27 height:110px; display:flex; align-items:center; padding:0 32px; color:#333;28 border-bottom:1px solid #e7e7e7;29 }30 .circle-btn {31 width:76px; height:76px; border:1px solid #cfd8dc; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-left:18px; background:#fff;32 }33 .title-input {34 margin:24px 32px; width:1016px; height:120px; border:1px solid #e0e0e0; border-radius:8px; display:flex; align-items:center; padding:0 28px;35 font-size:40px; color:#9e9e9e;36 }37 38 /* Formatting toolbar buttons */39 .toolbar { padding:14px 32px; display:flex; flex-wrap:wrap; gap:22px; }40 .tool-btn {41 width:160px; height:100px; background:#f2f2f2; border:1px solid #d6d6d6; border-radius:8px; display:flex; align-items:center; justify-content:center;42 color:#333; font-weight:600; font-size:36px;43 }44 .tool-btn.small { width:120px; }45 .group-divider { flex-basis:100%; height:0; }46 .done-btn {47 position:absolute; right:32px; top:540px; width:220px; height:110px; background:#57bfd0; color:#fff; font-weight:700; font-size:44px;48 border-radius:8px; display:flex; align-items:center; justify-content:center;49 box-shadow:0 2px 0 rgba(0,0,0,0.08);50 }51 52 /* Note text area */53 .note-area {54 margin:30px 32px 0 32px; font-size:56px; color:#111; line-height:1.35;55 }56 57 /* Keyboard mock */58 .keyboard {59 position:absolute; left:0; bottom:0; width:100%; height:900px; background:#1f1f1f; color:#ddd;60 box-shadow:0 -6px 16px rgba(0,0,0,0.25);61 }62 .suggest-row {63 height:120px; display:flex; align-items:center; padding:0 24px; border-bottom:1px solid #2b2b2b; font-size:44px;64 }65 .suggest-item { padding:0 24px; }66 .divider { color:#6e6e6e; padding:0 12px; }67 .mic { margin-left:auto; width:86px; height:86px; border-radius:50%; background:#3a3a3a; display:flex; align-items:center; justify-content:center; }68 .mic svg { width:40px; height:40px; stroke:#ddd; stroke-width:3; fill:none; }69 70 .keys {71 padding:22px 24px;72 }73 .row { display:flex; justify-content:space-between; margin-bottom:16px; }74 .key {75 height:110px; min-width:86px; background:#2e2e2e; border-radius:18px; display:flex; align-items:center; justify-content:center;76 font-size:46px; color:#ddd; margin:0 6px; border:1px solid #3a3a3a;77 }78 .key.wide { min-width:140px; }79 .space { flex:1; height:110px; background:#2e2e2e; border-radius:18px; border:1px solid #3a3a3a; display:flex; align-items:center; justify-content:center; margin:0 8px; font-size:46px; color:#cfcfcf; }80 .key.icon svg { width:40px; height:40px; stroke:#ddd; stroke-width:3; fill:none; }81</style>82</head>83<body>84<div id="render-target">85 86 <!-- Top App Bar -->87 <div class="app-bar"></div>88 <div class="status-row">89 <div class="status-left">90 <div>11:10</div>91 <div class="dot-icon"></div>92 <div class="dot-icon"></div>93 <div class="dot-icon"></div>94 </div>95 <div class="status-right">96 <div class="status-icon">97 <!-- WiFi icon -->98 <svg viewBox="0 0 24 24">99 <path d="M2 8c5-4 15-4 20 0M6 12c3-3 9-3 12 0M10 16c2-2 4-2 6 0M12 20l2 2-2 2-2-2z"></path>100 </svg>101 </div>102 <div class="status-icon">103 <!-- Battery icon -->104 <svg viewBox="0 0 28 16">105 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#fff"></rect>106 <rect x="3" y="4" width="16" height="8" fill="#fff" stroke="none"></rect>107 <rect x="24" y="5" width="3" height="6" rx="1" ry="1" stroke="#fff"></rect>108 </svg>109 </div>110 </div>111 </div>112 113 <!-- Content Area -->114 <div class="content">115 <div class="top-controls">116 <!-- Back arrow -->117 <svg width="54" height="54" viewBox="0 0 24 24" style="margin-right:10px;">118 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>119 </svg>120 <div style="margin-left:auto; display:flex; align-items:center;">121 <div class="circle-btn">122 <!-- down chevron -->123 <svg width="30" height="30" viewBox="0 0 24 24">124 <path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>125 </svg>126 </div>127 <div class="circle-btn">128 <!-- trash -->129 <svg width="30" height="30" viewBox="0 0 24 24">130 <path d="M3 6h18M8 6V4h8v2M6 6l2 14h8l2-14" stroke="#666" stroke-width="2" fill="none" stroke-linejoin="round"></path>131 </svg>132 </div>133 <div class="circle-btn">134 <!-- question mark -->135 <svg width="30" height="30" viewBox="0 0 24 24">136 <path d="M12 18v2M9 8a3 3 0 016 0c0 2-2 3-3 4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path>137 </svg>138 </div>139 </div>140 </div>141 142 <div class="title-input">Title</div>143 144 <!-- Formatting toolbar -->145 <div class="toolbar">146 <div class="tool-btn">OCR</div>147 <div class="tool-btn small">B</div>148 <div class="tool-btn small" style="font-style:italic;">I</div>149 <div class="tool-btn small" style="font-family: 'Times New Roman', serif;">T</div>150 <div class="tool-btn small" style="text-decoration:underline;">U</div>151 <div class="tool-btn small" style="color:#2bb3ff; font-weight:800;">A</div>152 <div class="tool-btn small">Tt</div>153 154 <div class="group-divider"></div>155 156 <div class="tool-btn small">157 <!-- align left -->158 <svg width="44" height="44" viewBox="0 0 24 24">159 <path d="M3 5h18M3 9h12M3 13h18M3 17h12" stroke="#666" stroke-width="2" fill="none"></path>160 </svg>161 </div>162 <div class="tool-btn small">163 <!-- align center -->164 <svg width="44" height="44" viewBox="0 0 24 24">165 <path d="M3 5h18M6 9h12M3 13h18M6 17h12" stroke="#666" stroke-width="2" fill="none"></path>166 </svg>167 </div>168 <div class="tool-btn small">169 <!-- align right -->170 <svg width="44" height="44" viewBox="0 0 24 24">171 <path d="M3 5h18M9 9h12M3 13h18M9 17h12" stroke="#666" stroke-width="2" fill="none"></path>172 </svg>173 </div>174 175 <div class="tool-btn small">x²</div>176 <div class="tool-btn small">x₂</div>177 178 <div class="tool-btn small">179 <!-- undo -->180 <svg width="44" height="44" viewBox="0 0 24 24">181 <path d="M9 7l-4 4 4 4M20 11c-4-4-9-1-11 1" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path>182 </svg>183 </div>184 <div class="tool-btn small">185 <!-- redo -->186 <svg width="44" height="44" viewBox="0 0 24 24">187 <path d="M15 7l4 4-4 4M4 11c4-4 9-1 11 1" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path>188 </svg>189 </div>190 191 <div class="group-divider"></div>192 193 <div class="tool-btn small">194 <!-- bullet list -->195 <svg width="44" height="44" viewBox="0 0 24 24">196 <circle cx="5" cy="6" r="2" fill="#666"></circle>197 <path d="M9 6h12M9 12h12M9 18h12" stroke="#666" stroke-width="2" fill="none"></path>198 <circle cx="5" cy="12" r="2" fill="#666"></circle>199 <circle cx="5" cy="18" r="2" fill="#666"></circle>200 </svg>201 </div>202 <div class="tool-btn small">203 <!-- numbered list -->204 <svg width="44" height="44" viewBox="0 0 24 24">205 <path d="M4 6h2M4 12h3M4 18h3" stroke="#666" stroke-width="2"></path>206 <path d="M10 6h10M10 12h10M10 18h10" stroke="#666" stroke-width="2"></path>207 </svg>208 </div>209 <div class="tool-btn small">210 <!-- checklist -->211 <svg width="44" height="44" viewBox="0 0 24 24">212 <path d="M4 6l2 2 4-4M4 12l2 2 4-4M4 18l2 2 4-4" stroke="#666" stroke-width="2" fill="none"></path>213 <path d="M14 6h6M14 12h6M14 18h6" stroke="#666" stroke-width="2"></path>214 </svg>215 </div>216 </div>217 218 <div class="done-btn">DONE</div>219 220 <div class="note-area">221 Manager<br>222 AA Technologies<br>223 Pune224 </div>225 </div>226 227 <!-- Keyboard -->228 <div class="keyboard">229 <div class="suggest-row">230 <div class="suggest-item">Pune</div>231 <div class="divider">|</div>232 <div class="suggest-item">Puneet</div>233 <div class="divider">|</div>234 <div class="suggest-item">Pine</div>235 <div class="mic">236 <svg viewBox="0 0 24 24">237 <path d="M12 4a3 3 0 013 3v4a3 3 0 01-6 0V7a3 3 0 013-3z"></path>238 <path d="M5 11c0 4 3 6 7 6s7-2 7-6M12 17v4" stroke-linecap="round"></path>239 </svg>240 </div>241 </div>242 243 <div class="keys">244 <div class="row">245 <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>246 <div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>247 </div>248 <div class="row" style="padding:0 40px;">249 <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>250 <div class="key">j</div><div class="key">k</div><div class="key">l</div>251 </div>252 <div class="row" style="padding:0 140px;">253 <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>254 </div>255 <div class="row">256 <div class="key wide">?123</div>257 <div class="key wide">,</div>258 <div class="key wide">😊</div>259 <div class="space">space</div>260 <div class="key wide">.</div>261 <div class="key icon wide">262 <!-- enter/return arrow -->263 <svg viewBox="0 0 24 24">264 <path d="M4 12h12v-4l4 4-4 4v-4H4" stroke-linecap="round" stroke-linejoin="round"></path>265 </svg>266 </div>267 </div>268 </div>269 </div>270 271</div>272</body>273</html>