GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Notes Editor Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#111; color:#fff; font-family: Roboto, Arial, sans-serif;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; width:100%; height:110px;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 36px; color:#fff;19  }20  .status-left { font-size:38px; letter-spacing:0.5px; }21  .status-right { display:flex; align-items:center; gap:22px; }22  .status-icon svg { width:40px; height:40px; fill:none; stroke:#fff; stroke-width:3; opacity:0.9; }23 24  /* Top action bar */25  .action-bar {26    position:absolute; top:110px; left:0; width:100%; height:120px;27    display:flex; align-items:center; justify-content:space-between;28    padding:0 36px;29  }30  .action-left, .action-right { display:flex; align-items:center; gap:36px; }31  .icon-btn svg { width:52px; height:52px; fill:none; stroke:#d9d9d9; stroke-width:3.5; opacity:0.9; }32 33  /* Title + note text */34  .title {35    position:absolute; left:60px; top:260px;36    font-size:86px; color:#ededed; font-weight:500;37  }38  .caret {39    display:inline-block; width:3px; height:84px; background:#ededed;40    margin-left:6px; animation:blink 1s steps(2, start) infinite;41  }42  @keyframes blink { 0%, 49% { opacity:1; } 50%, 100% { opacity:0; } }43  .subtitle {44    position:absolute; left:60px; top:420px; width:900px;45    font-size:44px; color:#bdbdbd; line-height:1.35;46  }47 48  /* Toolbar above keyboard */49  .note-toolbar {50    position:absolute; left:0; bottom:1040px; width:100%; height:120px;51    display:flex; align-items:center; justify-content:space-between;52    padding:0 36px; color:#cfcfcf; font-size:34px;53  }54  .toolbar-left, .toolbar-right { display:flex; align-items:center; gap:32px; }55  .small-icon svg { width:48px; height:48px; fill:none; stroke:#cfcfcf; stroke-width:3; }56 57  /* Keyboard */58  .keyboard {59    position:absolute; left:0; bottom:0; width:100%; height:1040px;60    background:#0f0f0f; border-top:1px solid #222; box-sizing:border-box;61    padding:20px 28px;62  }63  .suggestions {64    height:110px; display:flex; align-items:center; gap:22px; color:#ddd;65  }66  .grid-icon svg { width:60px; height:60px; fill:none; stroke:#dcdcdc; stroke-width:3; }67  .chip {68    background:#1e1e1e; border:1px solid #2a2a2a; color:#eee;69    border-radius:26px; padding:12px 24px; font-size:34px;70  }71  .chip.emoji { font-size:36px; }72  .chip.icon-chip svg { width:40px; height:40px; fill:none; stroke:#eee; stroke-width:3; }73 74  .rows { margin-top:8px; }75  .row {76    display:flex; justify-content:center; gap:18px; margin-top:18px;77  }78  .key {79    background:#1f1f1f; color:#eaeaea; height:120px;80    border-radius:24px; flex:1; display:flex; align-items:center; justify-content:center;81    font-size:46px;82    box-shadow: inset 0 0 0 1px #2a2a2a;83  }84  .key.small { flex:0.9; }85  .key.wide { flex:1.4; }86  .key.icon svg { width:48px; height:48px; fill:none; stroke:#eaeaea; stroke-width:3; }87  .key.special {88    background:#dfe7b0; color:#111; box-shadow:none; border-radius:40px; flex:1.1; font-weight:600;89  }90  .space { flex:4.6; }91  .enter { background:#dfe7b0; color:#111; font-weight:700; border-radius:40px; }92  .gesture-bar {93    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);94    width:260px; height:10px; background:#e6e6e6; border-radius:6px; opacity:0.9;95  }96</style>97</head>98<body>99<div id="render-target">100 101  <!-- Status bar -->102  <div class="status-bar">103    <div class="status-left">6:41</div>104    <div class="status-right">105      <div class="status-icon">106        <!-- cellular -->107        <svg viewBox="0 0 24 24"><path d="M3 21h2V12H3v9zm4 0h2V9H7v12zm4 0h2V6h-2v15zm4 0h2V3h-2v18z"/></svg>108      </div>109      <div class="status-icon">110        <!-- wifi -->111        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18l2 2-2 2-2-2 2-2"/></svg>112      </div>113      <div class="status-icon">114        <!-- battery -->115        <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2" ry="2"></rect><rect x="23" y="9" width="3" height="6"></rect><rect x="4" y="8" width="12" height="8" fill="#fff" stroke="none"></rect></svg>116      </div>117    </div>118  </div>119 120  <!-- Top action bar -->121  <div class="action-bar">122    <div class="action-left">123      <!-- back arrow -->124      <div class="icon-btn">125        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" /></svg>126      </div>127    </div>128    <div class="action-right">129      <!-- bell -->130      <div class="icon-btn">131        <svg viewBox="0 0 24 24"><path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5z"/><circle cx="12" cy="20" r="2"/></svg>132      </div>133      <!-- lock -->134      <div class="icon-btn">135        <svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>136      </div>137      <!-- download to box -->138      <div class="icon-btn">139        <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M12 7v7M9 11l3 3 3-3"/></svg>140      </div>141    </div>142  </div>143 144  <!-- Title and note -->145  <div class="title">My dream project first<span class="caret"></span></div>146  <div class="subtitle">My dreams are to be finance free and travel around the world.</div>147 148  <!-- Toolbar above keyboard -->149  <div class="note-toolbar">150    <div class="toolbar-left">151      <div class="small-icon">152        <!-- plus in square -->153        <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M12 7v10M7 12h10"/></svg>154      </div>155      <div class="small-icon">156        <!-- palette -->157        <svg viewBox="0 0 24 24"><path d="M12 3c5 0 9 3 9 7 0 3-3 3-4 3-1 0-1 2-3 2h-2c-1 0-2 1-2 2 0 1 1 2 2 2 6 0 10-4 10-9C22 5 17 1 12 1S2 5 2 10c0 5 4 9 9 9"/></svg>158      </div>159    </div>160    <div>Edited 6:38 PM</div>161    <div class="toolbar-right">162      <!-- more vertical -->163      <div class="small-icon">164        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>165      </div>166    </div>167  </div>168 169  <!-- Keyboard -->170  <div class="keyboard">171    <!-- Suggestions -->172    <div class="suggestions">173      <div class="grid-icon">174        <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>175      </div>176      <div class="chip">first</div>177      <div class="chip">first'</div>178      <div class="chip emoji">🏅</div>179      <div class="chip icon-chip">180        <svg viewBox="0 0 24 24"><path d="M12 4c3 0 5 2 5 5v2l2 2H7l2-2V9c0-3 2-5 5-5z"/><path d="M12 18v2"/></svg>181      </div>182    </div>183 184    <div class="rows">185      <!-- Row 1 -->186      <div class="row">187        <div class="key">q</div>188        <div class="key">w</div>189        <div class="key">e</div>190        <div class="key">r</div>191        <div class="key">t</div>192        <div class="key">y</div>193        <div class="key">u</div>194        <div class="key">i</div>195        <div class="key">o</div>196        <div class="key">p</div>197      </div>198 199      <!-- Row 2 -->200      <div class="row">201        <div class="key">a</div>202        <div class="key">s</div>203        <div class="key">d</div>204        <div class="key">f</div>205        <div class="key">g</div>206        <div class="key">h</div>207        <div class="key">j</div>208        <div class="key">k</div>209        <div class="key">l</div>210        <div class="key icon">211          <!-- backspace -->212          <svg viewBox="0 0 24 24"><path d="M4 12l6-6h9v12H10z"/><path d="M12 9l4 4m0-4-4 4"/></svg>213        </div>214      </div>215 216      <!-- Row 3 -->217      <div class="row">218        <div class="key icon small">219          <!-- shift -->220          <svg viewBox="0 0 24 24"><path d="M12 5l6 6H6z"/><path d="M12 11v8"/></svg>221        </div>222        <div class="key">z</div>223        <div class="key">x</div>224        <div class="key">c</div>225        <div class="key">v</div>226        <div class="key">b</div>227        <div class="key">n</div>228        <div class="key">m</div>229        <div class="key icon small">230          <!-- backspace -->231          <svg viewBox="0 0 24 24"><path d="M4 12l6-6h9v12H10z"/><path d="M12 9l4 4m0-4-4 4"/></svg>232        </div>233      </div>234 235      <!-- Bottom row -->236      <div class="row">237        <div class="key special small">?123</div>238        <div class="key small">,</div>239        <div class="key icon small">240          <!-- smiley -->241          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="9" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/><path d="M8 14c2 2 6 2 8 0"/></svg>242        </div>243        <div class="key space"></div>244        <div class="key small">.</div>245        <div class="key enter small">246          <!-- enter arrow -->247          <svg viewBox="0 0 24 24"><path d="M5 12h10v-4l4 4-4 4v-4H5"/></svg>248        </div>249      </div>250    </div>251 252    <div class="gesture-bar"></div>253  </div>254 255</div>256</body>257</html>