GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile Notes UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 border-radius:24px;12 box-shadow:0 6px 24px rgba(0,0,0,0.15);13 }14 /* Top status bar */15 .status-bar {16 position:absolute; top:0; left:0; right:0;17 height:120px; background:#5fc4cf; color:#fff;18 display:flex; align-items:center; justify-content:space-between;19 padding:0 32px; font-weight:600;20 }21 .status-left { display:flex; align-items:center; gap:20px; }22 .dots { display:flex; gap:10px; }23 .dot { width:22px; height:22px; border-radius:50%; background:#e9f6f8; opacity:0.9; }24 .status-right { display:flex; align-items:center; gap:20px; }25 .status-icon {26 width:34px; height:34px; border-radius:6px;27 background:rgba(255,255,255,0.35);28 }29 30 /* Header with Title */31 .header {32 position:absolute; top:120px; left:0; right:0;33 height:180px; background:#ffffff;34 display:flex; align-items:center; gap:24px;35 padding:0 28px;36 border-bottom:1px solid #e8e8e8;37 }38 .icon-btn {39 width:72px; height:72px; display:flex; align-items:center; justify-content:center;40 border-radius:12px; background:#f5f7f8; border:1px solid #e1e1e1;41 }42 .title-input {43 flex:1; height:120px; border:1px solid #e5e5e5; border-radius:14px;44 background:#fafafa; padding:0 24px; display:flex; align-items:center;45 font-size:42px; color:#888;46 }47 .header-actions { display:flex; align-items:center; gap:24px; }48 49 /* Formatting toolbar */50 .toolbar {51 position:absolute; top:300px; left:0; right:0;52 padding:24px 28px 18px;53 background:#ffffff;54 }55 .tool-row { display:flex; gap:24px; margin-bottom:26px; }56 .tool-btn {57 height:96px; min-width:120px; padding:0 22px;58 background:#f1f1f1; border:1px solid #d9d9d9; border-radius:12px;59 display:flex; align-items:center; justify-content:center;60 color:#333; font-weight:700; font-size:36px;61 }62 .tool-btn.small { min-width:96px; font-size:32px; }63 .tool-btn.wide { min-width:160px; }64 .done-btn {65 margin-left:auto; height:100px; min-width:200px;66 background:#52c1cf; color:#fff; border-radius:12px;67 display:flex; align-items:center; justify-content:center;68 font-weight:800; font-size:38px; border:1px solid #46b2c0;69 }70 71 /* Editor area */72 .editor {73 position:absolute; top:640px; left:0; right:0;74 bottom:900px; /* above keyboard */75 padding:34px;76 font-size:56px; line-height:1.3; color:#111;77 overflow:auto;78 }79 80 /* Keyboard */81 .keyboard {82 position:absolute; left:0; right:0; bottom:0;83 height:900px; background:#1f1f1f; color:#fff;84 border-top:1px solid #2b2b2b;85 }86 .kb-suggest {87 height:110px; display:flex; align-items:center; justify-content:space-between;88 padding:0 36px; font-size:36px; color:#e7e7e7;89 border-bottom:1px solid #2a2a2a;90 }91 .kb-rows { padding:34px 24px; display:flex; flex-direction:column; gap:28px; }92 .kb-row { display:flex; justify-content:center; gap:18px; }93 .key {94 height:116px; min-width:92px; background:#2e2e2e; border-radius:18px;95 display:flex; align-items:center; justify-content:center;96 font-size:44px; color:#fff; border:1px solid #3a3a3a;97 box-shadow: inset 0 -3px 0 rgba(255,255,255,0.06);98 }99 .key.wide { min-width:160px; }100 .space { flex:1; min-width:480px; }101 .enter {102 height:140px; min-width:160px; background:#e6d0f5; color:#2d2d2d;103 border-radius:36px; font-weight:800; font-size:48px;104 }105 .backspace { min-width:160px; }106 .emoji { min-width:120px; }107 .key.dark { background:#242424; }108 109 /* Simple SVG icons */110 svg { width:38px; height:38px; }111 .chevron path, .back path, .trash path, .help circle, .help path { stroke:#222; stroke-width:6; fill:none; }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status bar -->118 <div class="status-bar">119 <div class="status-left">120 <div style="font-size:40px;">11:02</div>121 <div class="dots">122 <div class="dot"></div>123 <div class="dot"></div>124 <div class="dot"></div>125 </div>126 </div>127 <div class="status-right">128 <div class="status-icon"></div>129 <div class="status-icon"></div>130 </div>131 </div>132 133 <!-- Header -->134 <div class="header">135 <div class="icon-btn">136 <svg class="back" viewBox="0 0 24 24">137 <path d="M14 4 L6 12 L14 20" />138 <path d="M6 12 L22 12" />139 </svg>140 </div>141 <div class="title-input">Title</div>142 <div class="header-actions">143 <div class="icon-btn">144 <svg class="chevron" viewBox="0 0 24 24">145 <path d="M5 8 L12 15 L19 8" />146 </svg>147 </div>148 <div class="icon-btn">149 <svg class="trash" viewBox="0 0 24 24">150 <path d="M5 6 L19 6" />151 <path d="M8 6 L8 20 M12 6 L12 20 M16 6 L16 20" />152 <path d="M7 6 L7 4 L17 4 L17 6" />153 <path d="M5 6 L5 20 L19 20 L19 6" />154 </svg>155 </div>156 <div class="icon-btn">157 <svg class="help" viewBox="0 0 24 24">158 <circle cx="12" cy="12" r="9"></circle>159 <path d="M9 9 A3 3 0 0 1 15 9 C15 11 12 11 12 14" />160 <path d="M12 17 L12 17" />161 </svg>162 </div>163 </div>164 </div>165 166 <!-- Formatting Toolbar -->167 <div class="toolbar">168 <div class="tool-row">169 <div class="tool-btn wide">OCR</div>170 <div class="tool-btn">B</div>171 <div class="tool-btn">I</div>172 <div class="tool-btn">T</div>173 <div class="tool-btn">U</div>174 <div class="tool-btn wide">A</div>175 <div class="tool-btn">Tt</div>176 </div>177 178 <div class="tool-row">179 <div class="tool-btn">▶</div>180 <div class="tool-btn">◀</div>181 <div class="tool-btn">x²</div>182 <div class="tool-btn">x₂</div>183 <div class="tool-btn">↶</div>184 <div class="tool-btn">↷</div>185 </div>186 187 <div class="tool-row">188 <div class="tool-btn">≡</div>189 <div class="tool-btn">≣</div>190 <div class="tool-btn">≡⋯</div>191 <div class="tool-btn">≡⋮</div>192 <div class="tool-btn">•</div>193 <div class="tool-btn">1.</div>194 <div class="tool-btn">☑</div>195 </div>196 197 <div class="tool-row" style="margin-top:10px;">198 <div style="flex:1;"></div>199 <div class="done-btn">DONE</div>200 </div>201 </div>202 203 <!-- Editor -->204 <div class="editor">205 <div>Manager</div>206 <div>A</div>207 </div>208 209 <!-- Keyboard -->210 <div class="keyboard">211 <div class="kb-suggest">212 <div>A</div>213 <div>All</div>214 <div>Ab</div>215 <div style="display:flex; align-items:center; gap:16px;">216 <div class="key dark" style="min-width:120px; height:90px;">🎤</div>217 </div>218 </div>219 <div class="kb-rows">220 <div class="kb-row">221 <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>222 <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>223 </div>224 <div class="kb-row">225 <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>226 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>227 </div>228 <div class="kb-row">229 <div class="key wide">⇧</div>230 <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div>231 <div class="key">B</div><div class="key">N</div><div class="key">M</div>232 <div class="key backspace">⌫</div>233 </div>234 <div class="kb-row">235 <div class="key wide">?123</div>236 <div class="key">,</div>237 <div class="key emoji">🙂</div>238 <div class="key space" style="min-width:540px;"> </div>239 <div class="key">.</div>240 <div class="key enter">↵</div>241 </div>242 </div>243 </div>244 245</div>246</body>247</html>