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: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 80px;24    padding: 0 28px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #fff;30  }31  .status-left { font-size: 34px; font-weight: 600; opacity: 0.95; }32  .status-right { display: flex; gap: 22px; align-items: center; }33  .icon-sys { width: 42px; height: 42px; opacity: 0.95; }34 35  /* Header / title area */36  .header {37    position: absolute;38    top: 80px;39    left: 0;40    width: 1080px;41    height: 260px;42  }43  .back-btn {44    position: absolute;45    top: 36px;46    left: 28px;47    width: 70px; height: 70px;48    display: flex; align-items: center; justify-content: center;49    color: #E0E0E0;50  }51  .header-actions {52    position: absolute;53    top: 28px;54    right: 28px;55    display: flex; gap: 34px; align-items: center;56  }57  .action-ic { width: 56px; height: 56px; }58  .note-title {59    position: absolute;60    left: 42px;61    top: 100px;62    font-size: 64px;63    font-weight: 700;64    color: #BDBDBD;65    letter-spacing: 0.5px;66  }67  .edited {68    position: absolute;69    left: 42px;70    top: 186px;71    font-size: 28px;72    color: #8B8B8B;73  }74  .reminder-ic {75    position: absolute;76    right: 42px;77    top: 180px;78    width: 56px; height: 56px;79    opacity: 0.9;80  }81  .divider {82    position: absolute;83    top: 340px;84    left: 0;85    width: 1080px;86    height: 2px;87    background: #2A2A2A;88  }89 90  /* Note content */91  .content {92    position: absolute;93    top: 360px;94    left: 42px;95    right: 42px;96    bottom: 1110px; /* leave room for toolbars + keyboard */97    color: #FFFFFF;98    font-size: 48px;99    line-height: 1.6;100  }101  .caret {102    display: inline-block;103    width: 4px; height: 60px; background: #7EA7FF; margin-left: 6px; border-radius: 2px; vertical-align: middle;104  }105 106  /* Bottom edit toolbar */107  .edit-toolbar {108    position: absolute;109    left: 0;110    right: 0;111    bottom: 1010px;112    height: 120px;113    padding: 0 28px;114    background: #161616;115    display: flex;116    align-items: center;117    gap: 40px;118    box-sizing: border-box;119  }120  .edit-left { display: flex; gap: 34px; align-items: center; color: #D7D7D7; }121  .tool-ic { width: 56px; height: 56px; }122  .spacer { flex: 1; }123  .check-btn { width: 70px; height: 70px; }124 125  /* Suggestion row */126  .suggestions {127    position: absolute;128    left: 0; right: 0; bottom: 920px;129    height: 90px;130    background: #181818;131    padding: 0 20px;132    display: flex; align-items: center; gap: 20px;133    box-sizing: border-box;134  }135  .chip {136    background: #232323; color: #EAEAEA;137    border: 1px solid #2F2F2F;138    padding: 12px 22px;139    border-radius: 28px;140    font-size: 36px;141  }142  .mic-ic { margin-left: auto; width: 58px; height: 58px; }143 144  /* Keyboard mock */145  .keyboard {146    position: absolute;147    left: 0; right: 0; bottom: 0;148    height: 920px;149    background: #1F1F1F;150    box-sizing: border-box;151    padding: 24px 20px 30px;152  }153  .keys-row {154    display: grid;155    grid-auto-flow: column;156    grid-auto-columns: 1fr;157    gap: 14px;158    margin-bottom: 18px;159  }160  .key {161    height: 120px;162    background: #2B2B2B;163    border-radius: 16px;164    color: #EDEDED;165    display: flex; align-items: center; justify-content: center;166    font-size: 46px;167    border: 1px solid #3A3A3A;168  }169  .row2 { padding: 0 40px; }170  .row3 { padding: 0 90px; }171  .space-row { display: grid; grid-template-columns: 150px 120px 120px 1fr 120px 180px; gap: 14px; }172  .space { background: #2B2B2B; border: 1px solid #3A3A3A; border-radius: 16px; height: 120px; display: flex; align-items: center; justify-content: center; color: #EDEDED; font-size: 40px; }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Status bar -->179  <div class="status-bar">180    <div class="status-left">10:46</div>181    <div class="status-right">182      <!-- simple wifi -->183      <svg class="icon-sys" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><path d="M12 20l2-2-2-2-2 2 2 2zm7-6l-2-2-5 5-3-3-2 2 5 5 7-7zM2 8l2 2c7-7 17-2 18 0l2-2C19-1 6-1 2 8z"/></svg>184      <!-- battery -->185      <svg class="icon-sys" viewBox="0 0 24 24" fill="#fff"><path d="M16 6h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v2H6a2 2 0 01-2-2V8a2 2 0 012-2h10zm-1 2H6v8h9V8z"/></svg>186    </div>187  </div>188 189  <!-- Header -->190  <div class="header">191    <div class="back-btn">192      <svg width="56" height="56" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>193    </div>194 195    <div class="header-actions">196      <!-- yellow target circle -->197      <svg class="action-ic" viewBox="0 0 24 24">198        <circle cx="12" cy="12" r="10" stroke="#FFC107" stroke-width="2" fill="none"/>199        <circle cx="12" cy="12" r="3" fill="#FFC107"/>200      </svg>201      <!-- pin -->202      <svg class="action-ic" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="1.8">203        <path d="M15 3l6 6-3 3-1 7-3-3-7 1 3-3-6-6 11-5z"/>204      </svg>205      <!-- kebab -->206      <svg class="action-ic" viewBox="0 0 24 24" fill="#E0E0E0"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>207    </div>208 209    <div class="note-title">Heading</div>210    <div class="edited">Edited: 09-26 22:42</div>211 212    <!-- calendar/reminder icon -->213    <div class="reminder-ic">214      <svg viewBox="0 0 24 24" fill="#BDBDBD">215        <path d="M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm12 6H5v12h14V8z"/>216      </svg>217    </div>218  </div>219 220  <div class="divider"></div>221 222  <!-- Content -->223  <div class="content">224    Buy useful things like leptop and camera on saturday<span class="caret"></span>225  </div>226 227  <!-- Bottom edit toolbar -->228  <div class="edit-toolbar">229    <div class="edit-left">230      <div style="display:flex; align-items:center; gap:10px; color:#DCDCDC; font-size:44px;">231        <span style="font-weight:700">A</span><span style="opacity:0.85">a</span>232      </div>233      <!-- undo -->234      <svg class="tool-ic" viewBox="0 0 24 24" fill="#DADADA"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6a6 6 0 01-6 6h-1v2h1a8 8 0 000-16z"/></svg>235      <!-- redo -->236      <svg class="tool-ic" viewBox="0 0 24 24" fill="#DADADA"><path d="M12 5V1l5 5-5 5V7C8.69 7 6 9.69 6 13a6 6 0 006 6h1v2h-1a8 8 0 010-16z"/></svg>237    </div>238    <div class="spacer"></div>239    <!-- check -->240    <div class="check-btn">241      <svg viewBox="0 0 24 24" fill="#CDE3FF">242        <path d="M9 16.2l-3.5-3.5L4 14.2 9 19l12-12-1.5-1.5z"/>243      </svg>244    </div>245  </div>246 247  <!-- Suggestions -->248  <div class="suggestions">249    <div class="chip">saturday</div>250    <div class="chip">Saturday</div>251    <div class="chip">Saturdays</div>252    <div class="mic-ic">253      <svg viewBox="0 0 24 24" fill="#EDEDED">254        <path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0013.9 0H17zM11 19h2v3h-2z"/>255      </svg>256    </div>257  </div>258 259  <!-- Keyboard mock -->260  <div class="keyboard">261    <!-- Row 1 -->262    <div class="keys-row">263      <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>264    </div>265    <!-- Row 2 -->266    <div class="keys-row row2">267      <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>268    </div>269    <!-- Row 3 -->270    <div class="keys-row row3">271      <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>272    </div>273    <!-- Bottom row -->274    <div class="space-row">275      <div class="space">?123</div>276      <div class="space">,</div>277      <div class="space">😊</div>278      <div class="space"> </div>279      <div class="space">.</div>280      <div class="space">281        <svg width="64" height="64" viewBox="0 0 24 24" fill="#EDEDED"><path d="M19 12l-7-7v4H5v6h7v4z"/></svg>282      </div>283    </div>284  </div>285 286</div>287</body>288</html>