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>Mobile Note Editor Mock</title>6<style>7  body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;}8  #render-target{9    position:relative;10    width:1080px;11    height:2400px;12    overflow:hidden;13    background:#ffffff;14    border-radius:0;15  }16 17  /* Top bars */18  .top-bar{19    position:absolute;20    top:0;left:0;21    width:100%;22    height:170px;23    background:#5EC3CE;24  }25  .status-line{26    height:80px;27    display:flex;28    align-items:center;29    padding:0 30px;30    color:#fff;31    font-weight:600;32    font-size:40px;33  }34  .status-icons{35    margin-left:auto;36    display:flex;37    align-items:center;38    gap:28px;39  }40  .app-toolbar{41    height:90px;42    display:flex;43    align-items:center;44    padding:0 24px;45    color:#fff;46  }47  .icon-btn{48    width:70px;height:70px;border-radius:35px;49    display:flex;align-items:center;justify-content:center;50  }51  .icon-btn svg{fill:#ffffff;}52  .toolbar-right{53    margin-left:auto;display:flex;gap:30px;54  }55 56  /* Content area */57  .content{58    position:absolute;59    top:170px;left:0;60    width:100%;61    height:1330px;62    background:#fff;63    padding:40px 42px;64    box-sizing:border-box;65  }66  .title-row{67    display:flex;align-items:center;gap:20px;margin-bottom:30px;68  }69  .title-input{70    flex:1;71    height:110px;72    border:1px solid #E0E0E0;73    border-radius:10px;74    font-size:44px;75    padding:0 28px;76    color:#666;77    display:flex;align-items:center;78  }79  .mini-icon{80    width:86px;height:86px;border:1px solid #E0E0E0;background:#fafafa;81    border-radius:8px;display:flex;align-items:center;justify-content:center;82    color:#666;font-weight:700;font-size:40px;83  }84  .format-section{margin-top:10px;}85  .format-row{display:flex;gap:24px;margin:22px 0;}86  .fmt-btn{87    height:90px;min-width:120px;padding:0 22px;88    border:1px solid #DDDDDD;border-radius:10px;background:#F6F6F6;89    display:flex;align-items:center;justify-content:center;90    font-size:40px;color:#333;font-weight:700;91  }92  .fmt-wide{min-width:160px;}93  .fmt-small{min-width:100px;font-weight:500;}94  .done-btn{95    margin-left:auto;background:#55C1CC;color:#fff;border:none;96    height:110px;width:240px;border-radius:10px;font-size:44px;font-weight:800;97  }98 99  /* Text area */100  .note-area{101    margin-top:20px;102    height:930px;103    border-top:1px solid #f0f0f0;104    padding-top:25px;105    font-size:56px;106    line-height:88px;107    color:#111;108  }109 110  /* Keyboard */111  .keyboard{112    position:absolute;113    bottom:0;left:0;width:100%;height:900px;114    background:#1E1F22;color:#fff;115    border-top-left-radius:20px;border-top-right-radius:20px;116  }117  .suggestion-bar{118    height:120px;119    display:flex;align-items:center;120    padding:0 28px;121    gap:40px;122    background:#2a2b2f;123    font-size:42px;124  }125  .suggestion{color:#d9d9d9;}126  .suggestion-bar .spacer{margin-left:auto;}127  .kb-rows{padding:28px;}128  .kb-row{display:flex;gap:22px;margin-bottom:26px;}129  .key{130    flex:1;height:120px;border-radius:18px;131    background:#2c2d31;display:flex;align-items:center;justify-content:center;132    font-size:50px;color:#eaeaea;133  }134  .key.small{flex:0 0 120px;}135  .space{flex:3;}136  .enter{flex:0 0 150px;}137</style>138</head>139<body>140<div id="render-target">141  <!-- Top turquoise bars -->142  <div class="top-bar">143    <div class="status-line">144      11:10145      <div class="status-icons">146        <!-- three small dots icons on left area -->147        <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#ffffff" opacity="0.8"/></svg>148        <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#ffffff" opacity="0.8"/></svg>149        <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#ffffff" opacity="0.8"/></svg>150        <!-- Wifi -->151        <svg width="48" height="28" viewBox="0 0 48 28">152          <path d="M4 8c8-6 32-6 40 0" stroke="#fff" stroke-width="3" fill="none"/>153          <path d="M10 14c6-4 22-4 28 0" stroke="#fff" stroke-width="3" fill="none"/>154          <circle cx="24" cy="22" r="3" fill="#fff"/>155        </svg>156        <!-- Battery -->157        <svg width="70" height="28" viewBox="0 0 70 28">158          <rect x="2" y="4" width="60" height="20" rx="3" stroke="#fff" stroke-width="3" fill="none"/>159          <rect x="64" y="9" width="6" height="10" rx="1" fill="#fff"/>160          <rect x="6" y="8" width="40" height="12" rx="2" fill="#fff"/>161        </svg>162      </div>163    </div>164    <div class="app-toolbar">165      <div class="icon-btn">166        <!-- back arrow -->167        <svg width="44" height="44" viewBox="0 0 24 24">168          <path d="M15 18l-6-6 6-6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>169        </svg>170      </div>171      <div class="toolbar-right">172        <div class="icon-btn">173          <!-- dropdown chevron -->174          <svg width="40" height="40" viewBox="0 0 24 24">175            <path d="M6 9l6 6 6-6" fill="none" stroke="#fff" stroke-width="2"/>176          </svg>177        </div>178        <div class="icon-btn">179          <!-- trash -->180          <svg width="40" height="40" viewBox="0 0 24 24">181            <path d="M3 6h18M9 6V4h6v2M6 6l1 14h10l1-14" fill="none" stroke="#fff" stroke-width="2"/>182          </svg>183        </div>184        <div class="icon-btn">185          <!-- help -->186          <svg width="40" height="40" viewBox="0 0 24 24">187            <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>188            <path d="M9 9a3 3 0 1 1 5 2c-2 1-2 2-2 3" stroke="#fff" stroke-width="2" fill="none"/>189            <circle cx="12" cy="17" r="1.6" fill="#fff"/>190          </svg>191        </div>192      </div>193    </div>194  </div>195 196  <!-- Content -->197  <div class="content">198    <div class="title-row">199      <div class="title-input">Title</div>200      <div class="mini-icon">⌄</div>201      <div class="mini-icon">🗑</div>202      <div class="mini-icon">?</div>203    </div>204 205    <!-- Formatting toolbars -->206    <div class="format-section">207      <div class="format-row">208        <div class="fmt-btn fmt-wide">OCR</div>209        <div class="fmt-btn">B</div>210        <div class="fmt-btn">I</div>211        <div class="fmt-btn">T</div>212        <div class="fmt-btn">U</div>213        <div class="fmt-btn fmt-wide">A</div>214        <div class="fmt-btn fmt-wide">TT</div>215      </div>216 217      <div class="format-row">218        <div class="fmt-btn fmt-small">↦</div>219        <div class="fmt-btn fmt-small">≡</div>220        <div class="fmt-btn fmt-small">x²</div>221        <div class="fmt-btn fmt-small">x₂</div>222        <div class="fmt-btn fmt-small">↶</div>223        <div class="fmt-btn fmt-small">↷</div>224      </div>225 226      <div class="format-row">227        <div class="fmt-btn fmt-small">≡</div>228        <div class="fmt-btn fmt-small">≡</div>229        <div class="fmt-btn fmt-small">≡</div>230        <div class="fmt-btn fmt-small">• List</div>231        <div class="fmt-btn fmt-small">1. List</div>232        <div class="fmt-btn fmt-small">☑</div>233        <button class="done-btn">DONE</button>234      </div>235    </div>236 237    <div class="note-area">238      Manager<br>239      AA Technologies<br>240      Pun241    </div>242  </div>243 244  <!-- Keyboard -->245  <div class="keyboard">246    <div class="suggestion-bar">247      <span class="suggestion">Pun</span>248      <span class="suggestion">Pune</span>249      <span class="suggestion">Pin</span>250      <div class="spacer"></div>251      <!-- mic icon -->252      <svg width="44" height="44" viewBox="0 0 24 24">253        <rect x="9" y="4" width="6" height="10" rx="3" fill="#fff"/>254        <path d="M6 11a6 6 0 0 0 12 0M12 17v3M9 20h6" stroke="#fff" stroke-width="2" fill="none"/>255      </svg>256    </div>257 258    <div class="kb-rows">259      <div class="kb-row">260        <div class="key">q</div><div class="key">w</div><div class="key">e</div>261        <div class="key">r</div><div class="key">t</div><div class="key">y</div>262        <div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>263      </div>264      <div class="kb-row">265        <div class="key">a</div><div class="key">s</div><div class="key">d</div>266        <div class="key">f</div><div class="key">g</div><div class="key">h</div>267        <div class="key">j</div><div class="key">k</div><div class="key">l</div>268      </div>269      <div class="kb-row">270        <div class="key small">⇧</div>271        <div class="key">z</div><div class="key">x</div><div class="key">c</div>272        <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>273        <div class="key small">⌫</div>274      </div>275      <div class="kb-row">276        <div class="key small">?123</div>277        <div class="key small">,</div>278        <div class="key small">😊</div>279        <div class="key space"></div>280        <div class="key small">.</div>281        <div class="key enter">↩︎</div>282      </div>283    </div>284  </div>285</div>286</body>287</html>