GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Note Editor Mockup</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff; border-radius:24px;11    box-shadow: 0 8px 24px rgba(0,0,0,0.15);12  }13  /* Top turquoise app bar */14  .appbar {15    position:absolute; top:0; left:0; width:100%; height:180px;16    background:#63C7D3;17  }18  .status {19    position:absolute; top:20px; left:24px; right:24px; height:48px;20    display:flex; align-items:center; justify-content:space-between; color:#fff;21    font-weight:600; font-size:38px;22  }23  .status-icons { display:flex; align-items:center; gap:20px; }24  .status-dot { width:22px; height:22px; border-radius:50%; background:#fff; opacity:0.9; }25  .battery {26    width:56px; height:28px; border:3px solid #fff; border-radius:6px; position:relative;27  }28  .battery::after { content:""; position:absolute; right:-10px; top:8px; width:8px; height:12px; background:#fff; border-radius:2px; }29  .battery .level { position:absolute; left:4px; top:4px; height:18px; width:36px; background:#fff; }30  /* Content area below app bar */31  .content {32    position:absolute; top:180px; left:0; right:0; bottom:860px; /* leaves room for keyboard */33    background:#fff;34  }35  .top-row {36    display:flex; align-items:center; justify-content:space-between;37    padding:24px 32px;38  }39  .icon-btn {40    width:72px; height:72px; border-radius:36px; border:1px solid #d0d7dd; background:#fff;41    display:flex; align-items:center; justify-content:center;42  }43  .title-input {44    margin:0 32px 16px 32px; height:120px; border-radius:12px; border:1px solid #dfe3e8;45    display:flex; align-items:center; padding:0 24px; font-size:44px; color:#777;46  }47  .toolbar { padding:8px 32px; }48  .toolbar-row {49    display:flex; flex-wrap:wrap; gap:20px; margin-bottom:24px;50  }51  .tool {52    width:148px; height:88px; border:1px solid #dfe3e8; border-radius:10px; background:#f7f8f9;53    display:flex; align-items:center; justify-content:center; color:#3d3d3d; font-weight:700; font-size:36px;54  }55  .tool.small { width:160px; }56  .done-btn {57    position:absolute; right:32px; top:520px;58    width:220px; height:110px; border-radius:10px; background:#58C3D1; color:#fff;59    display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:800; letter-spacing:1px;60    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);61  }62  .editor {63    margin:30px 28px; height:900px; border-top:1px solid #e9eef2; padding-top:24px; font-size:54px; color:#111;64    line-height:1.6;65  }66 67  /* Keyboard */68  .keyboard {69    position:absolute; left:0; bottom:0; width:100%; height:860px; background:#1c1c1e; color:#fff;70    border-top-left-radius:30px; border-top-right-radius:30px;71    padding:40px 36px;72  }73  .kb-top-bar { display:flex; align-items:center; gap:28px; margin-bottom:26px; }74  .kb-dot { width:24px; height:24px; border-radius:6px; background:#2b2b2e; }75  .kb-row {76    display:flex; justify-content:space-between; margin-bottom:28px;77  }78  .key {79    height:120px; min-width:90px; margin:0 8px; flex:1;80    background:#2a2a2d; color:#fff; border-radius:22px; font-size:42px; font-weight:600;81    display:flex; align-items:center; justify-content:center;82    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);83  }84  .key.small { flex:0 0 110px; }85  .key.wide { flex:0 0 430px; }86  .key.enter { flex:0 0 150px; background:#d9c3ff; color:#2a2a2d; }87  .key.special { background:#3a3a3d; color:#cfcfd3; }88  .key.mic { flex:0 0 120px; border-radius:28px; background:#2a2a2d; }89  .kbd-bottom {90    display:flex; align-items:center; justify-content:space-between;91  }92  /* Simple inline SVG styling helpers */93  svg { display:block; }94  .icon { width:36px; height:36px; }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Turquoise app bar with status -->101  <div class="appbar">102    <div class="status">103      <div>11:02</div>104      <div class="status-icons">105        <div class="status-dot"></div>106        <div class="status-dot"></div>107        <!-- Wi-Fi simplified -->108        <svg viewBox="0 0 48 48" class="icon">109          <path d="M4 16c10-10 30-10 40 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>110          <path d="M10 22c7-7 21-7 28 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>111          <circle cx="24" cy="30" r="4" fill="#fff"/>112        </svg>113        <!-- Battery -->114        <div class="battery"><div class="level"></div></div>115      </div>116    </div>117  </div>118 119  <!-- Main content -->120  <div class="content">121 122    <!-- Row with back and action icons -->123    <div class="top-row">124      <div class="icon-btn">125        <svg viewBox="0 0 48 48" class="icon">126          <path d="M30 10 L16 24 L30 38" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>127        </svg>128      </div>129      <div style="display:flex; gap:18px;">130        <div class="icon-btn">131          <svg viewBox="0 0 48 48" class="icon">132            <path d="M12 18 L24 30 L36 18" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>133          </svg>134        </div>135        <div class="icon-btn">136          <svg viewBox="0 0 48 48" class="icon">137            <path d="M14 14h20l-2 26H16l-2-26z" stroke="#333" stroke-width="4" fill="none"/>138            <path d="M18 12h12" stroke="#333" stroke-width="4" />139          </svg>140        </div>141        <div class="icon-btn">142          <svg viewBox="0 0 48 48" class="icon">143            <circle cx="24" cy="24" r="18" stroke="#333" stroke-width="4" fill="none"/>144            <circle cx="24" cy="34" r="3" fill="#333"/>145            <path d="M24 18c-5 0-8 4-6 7" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>146          </svg>147        </div>148      </div>149    </div>150 151    <!-- Title input -->152    <div class="title-input">Title</div>153 154    <!-- Formatting toolbar -->155    <div class="toolbar">156      <div class="toolbar-row">157        <div class="tool">OCR</div>158        <div class="tool">B</div>159        <div class="tool italic" style="font-style:italic;">I</div>160        <div class="tool">T</div>161        <div class="tool"><span style="text-decoration:underline;">U</span></div>162        <div class="tool">A</div>163        <div class="tool">Tt</div>164      </div>165 166      <div class="toolbar-row">167        <div class="tool small">168          <svg viewBox="0 0 48 48" class="icon">169            <path d="M8 12h32M8 24h24M8 36h16" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>170          </svg>171        </div>172        <div class="tool small">173          <svg viewBox="0 0 48 48" class="icon">174            <path d="M12 24h28M12 36h20" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>175            <path d="M8 12h32" stroke="#333" stroke-width="4" fill="none" stroke-dasharray="3 4"/>176          </svg>177        </div>178        <div class="tool small">179          <span style="font-size:34px;">x<sup>2</sup></span>180        </div>181        <div class="tool small">182          <span style="font-size:34px;">x<sub>2</sub></span>183        </div>184        <div class="tool small">185          <svg viewBox="0 0 48 48" class="icon">186            <path d="M30 16l10 8-10 8" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>187            <path d="M8 24h22" stroke="#333" stroke-width="4" />188          </svg>189        </div>190        <div class="tool small">191          <svg viewBox="0 0 48 48" class="icon">192            <path d="M18 16L8 24l10 8" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>193            <path d="M20 24h20" stroke="#333" stroke-width="4" />194          </svg>195        </div>196      </div>197 198      <div class="toolbar-row">199        <div class="tool small">200          <svg viewBox="0 0 48 48" class="icon">201            <path d="M12 16h28M12 24h20M12 32h24" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>202          </svg>203        </div>204        <div class="tool small">205          <svg viewBox="0 0 48 48" class="icon">206            <path d="M12 16h28M12 24h28M12 32h28" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>207          </svg>208        </div>209        <div class="tool small">210          <svg viewBox="0 0 48 48" class="icon">211            <circle cx="14" cy="16" r="3" fill="#333"/><path d="M22 16h16" stroke="#333" stroke-width="4"/>212            <circle cx="14" cy="24" r="3" fill="#333"/><path d="M22 24h20" stroke="#333" stroke-width="4"/>213            <circle cx="14" cy="32" r="3" fill="#333"/><path d="M22 32h24" stroke="#333" stroke-width="4"/>214          </svg>215        </div>216        <div class="tool small">217          <svg viewBox="0 0 48 48" class="icon">218            <text x="12" y="22" font-size="16" fill="#333">1.</text><path d="M26 18h16" stroke="#333" stroke-width="4"/>219            <text x="12" y="34" font-size="16" fill="#333">2.</text><path d="M26 30h20" stroke="#333" stroke-width="4"/>220          </svg>221        </div>222        <div class="tool small">223          <svg viewBox="0 0 48 48" class="icon">224            <rect x="10" y="10" width="28" height="20" rx="4" ry="4" stroke="#333" stroke-width="4" fill="none"/>225            <polyline points="16,22 20,26 30,16" stroke="#333" stroke-width="4" fill="none"/>226          </svg>227        </div>228      </div>229    </div>230 231    <!-- Done button -->232    <div class="done-btn">DONE</div>233 234    <!-- Editor text -->235    <div class="editor">236      <div>Manager</div>237      <div>A</div>238    </div>239  </div>240 241  <!-- Keyboard -->242  <div class="keyboard">243    <div class="kb-top-bar">244      <div class="kb-dot"></div>245      <div class="kb-dot"></div>246      <div class="kb-dot"></div>247    </div>248 249    <div class="kb-row">250      <div class="key small">q</div>251      <div class="key small">w</div>252      <div class="key small">e</div>253      <div class="key small">r</div>254      <div class="key small">t</div>255      <div class="key small">y</div>256      <div class="key small">u</div>257      <div class="key small">i</div>258      <div class="key small">o</div>259      <div class="key small">p</div>260      <div class="key small">0</div>261    </div>262 263    <div class="kb-row">264      <div class="key small">a</div>265      <div class="key small">s</div>266      <div class="key small">d</div>267      <div class="key small">f</div>268      <div class="key small">g</div>269      <div class="key small">h</div>270      <div class="key small">j</div>271      <div class="key small">k</div>272      <div class="key small">l</div>273      <div class="key small">⌫</div>274    </div>275 276    <div class="kb-row">277      <div class="key small">z</div>278      <div class="key small">x</div>279      <div class="key small">c</div>280      <div class="key small">v</div>281      <div class="key small">b</div>282      <div class="key small">n</div>283      <div class="key small">m</div>284      <div class="key mic">285        <svg viewBox="0 0 48 48" class="icon">286          <rect x="18" y="12" width="12" height="18" rx="6" fill="#fff"/>287          <path d="M12 24c0 8 8 12 12 12s12-4 12-12" stroke="#fff" stroke-width="4" fill="none"/>288        </svg>289      </div>290    </div>291 292    <div class="kbd-bottom">293      <div class="key special">?123</div>294      <div class="key special">,</div>295      <div class="key wide"></div>296      <div class="key special">.</div>297      <div class="key enter">298        <svg viewBox="0 0 48 48" class="icon">299          <path d="M10 24h20v-10l12 10-12 10v-10H10" fill="#2a2a2d"/>300        </svg>301      </div>302    </div>303  </div>304 305</div>306</body>307</html>