GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Note UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F6EBCF; /* overall light beige */15    box-shadow: 0 2px 10px rgba(0,0,0,0.08);16    border-radius: 0;17    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;18    color: #1d1d1d;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 120px;28    background: #000;29    color: #fff;30    display: flex;31    align-items: center;32    padding: 0 32px;33    box-sizing: border-box;34    font-weight: 600;35  }36  .status-left { font-size: 40px; }37  .status-right {38    margin-left: auto;39    display: flex;40    align-items: center;41    gap: 24px;42  }43  .status-icon svg { width: 42px; height: 42px; fill: #fff; }44 45  /* Top toolbar */46  .toolbar {47    position: absolute;48    top: 120px;49    left: 0;50    width: 1080px;51    height: 170px;52    background: #F3D583; /* warm yellow */53    display: flex;54    align-items: center;55    padding: 0 36px;56    box-sizing: border-box;57    color: #2c2c2c;58  }59  .toolbar .left-actions, .toolbar .center-actions, .toolbar .right-actions {60    display: flex;61    align-items: center;62    gap: 64px;63  }64  .toolbar .center-actions { margin: 0 auto; }65  .toolbar .right-actions { margin-left: auto; }66  .tool-btn svg { width: 64px; height: 64px; stroke: #2c2c2c; fill: none; stroke-width: 6; }67 68  /* Content area */69  .content {70    position: absolute;71    top: 290px; /* status + toolbar */72    left: 0;73    right: 0;74    bottom: 280px; /* space for bottom areas */75    padding: 48px;76    box-sizing: border-box;77    background: #F6EBCF;78  }79  .meta-row {80    display: flex;81    align-items: center;82    justify-content: space-between;83    color: #54616A;84    font-size: 38px;85    margin-bottom: 40px;86  }87  .meta-left { display: flex; align-items: center; gap: 16px; }88  .meta-right { display: flex; align-items: center; gap: 16px; }89  .meta-icon svg { width: 40px; height: 40px; fill: #54616A; stroke: #54616A; stroke-width: 2; }90  .meta-right .dropdown {91    width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent;92    border-top: 16px solid #54616A;93    margin-left: 8px;94  }95 96  .title {97    font-size: 76px;98    color: #C7C1AD; /* faded placeholder */99    margin: 16px 0 24px;100    font-weight: 600;101  }102  .note-text {103    font-size: 50px;104    color: #253035;105  }106 107  /* Bottom tools bar */108  .bottom-tools {109    position: absolute;110    left: 24px;111    right: 24px;112    bottom: 140px;113    height: 150px;114    background: #fff;115    border-radius: 28px;116    box-shadow: 0 8px 20px rgba(0,0,0,0.12);117    display: flex;118    align-items: center;119    padding: 0 36px;120    box-sizing: border-box;121    gap: 44px;122  }123  .bt-icon {124    position: relative;125    display: flex;126    align-items: center;127    justify-content: center;128    width: 84px; height: 84px;129  }130  .bt-icon svg { width: 72px; height: 72px; stroke: #1f2b33; fill: none; stroke-width: 5; }131  .bt-text { font-size: 54px; font-weight: 600; color: #1f2b33; }132  .red-dot {133    position: absolute;134    top: 2px; right: -8px;135    width: 18px; height: 18px; background: #FF3B30; border-radius: 50%;136  }137  .divider {138    width: 2px; height: 68px; background: #E5E8EC; margin: 0 8px;139  }140 141  /* Gesture pill */142  .gesture-area {143    position: absolute;144    bottom: 36px;145    left: 50%;146    transform: translateX(-50%);147    width: 280px; height: 14px; border-radius: 10px; background: #000;148  }149</style>150</head>151<body>152<div id="render-target">153 154  <!-- Status Bar -->155  <div class="status-bar">156    <div class="status-left">8:19</div>157    <div class="status-right">158      <div class="status-icon">159        <!-- Cellular bars -->160        <svg viewBox="0 0 24 24">161          <rect x="2" y="14" width="3" height="8"></rect>162          <rect x="7" y="10" width="3" height="12"></rect>163          <rect x="12" y="6" width="3" height="16"></rect>164          <rect x="17" y="2" width="3" height="20"></rect>165        </svg>166      </div>167      <div class="status-icon">168        <!-- WiFi -->169        <svg viewBox="0 0 24 24">170          <path d="M2 8c5-4 15-4 20 0"></path>171          <path d="M6 12c3-3 9-3 12 0"></path>172          <path d="M10 16c1-1 3-1 4 0"></path>173          <circle cx="12" cy="19" r="2" fill="#fff"></circle>174        </svg>175      </div>176      <div class="status-icon">177        <!-- Battery -->178        <svg viewBox="0 0 28 24">179          <rect x="2" y="6" width="20" height="12" stroke="#fff" fill="none" stroke-width="2"></rect>180          <rect x="23" y="10" width="3" height="4" fill="#fff"></rect>181          <rect x="4" y="8" width="15" height="8" fill="#fff"></rect>182        </svg>183      </div>184    </div>185  </div>186 187  <!-- Top Toolbar -->188  <div class="toolbar">189    <div class="left-actions">190      <div class="tool-btn">191        <!-- Checkmark -->192        <svg viewBox="0 0 24 24">193          <path d="M4 12l5 5L20 6" />194        </svg>195      </div>196    </div>197    <div class="center-actions">198      <div class="tool-btn">199        <!-- Undo -->200        <svg viewBox="0 0 24 24">201          <path d="M8 9H3l5-5" />202          <path d="M8 9c6-2 11 2 11 7" />203        </svg>204      </div>205      <div class="tool-btn">206        <!-- Redo -->207        <svg viewBox="0 0 24 24">208          <path d="M16 9h5l-5-5" />209          <path d="M16 9c-6-2-11 2-11 7" />210        </svg>211      </div>212    </div>213    <div class="right-actions">214      <div class="tool-btn">215        <!-- Share -->216        <svg viewBox="0 0 24 24">217          <circle cx="5" cy="12" r="2" fill="none"></circle>218          <circle cx="19" cy="6" r="2" fill="none"></circle>219          <circle cx="19" cy="18" r="2" fill="none"></circle>220          <path d="M7 12l10-6" />221          <path d="M7 12l10 6" />222        </svg>223      </div>224      <div class="tool-btn">225        <!-- More (vertical dots) -->226        <svg viewBox="0 0 24 24">227          <circle cx="12" cy="5" r="2" fill="#2c2c2c"></circle>228          <circle cx="12" cy="12" r="2" fill="#2c2c2c"></circle>229          <circle cx="12" cy="19" r="2" fill="#2c2c2c"></circle>230        </svg>231      </div>232    </div>233  </div>234 235  <!-- Content -->236  <div class="content">237    <div class="meta-row">238      <div class="meta-left">239        <span>08-10, 3:42 PM</span>240        <span class="meta-icon">241          <!-- Pencil -->242          <svg viewBox="0 0 24 24">243            <path d="M3 21l3-1 12-12-2-2L4 16l-1 3z"></path>244          </svg>245        </span>246      </div>247      <div class="meta-right">248        <span class="meta-icon">249          <!-- Bookmark -->250          <svg viewBox="0 0 24 24">251            <path d="M6 3h12v18l-6-4-6 4z"></path>252          </svg>253        </span>254        <span>Categories</span>255        <div class="dropdown"></div>256      </div>257    </div>258 259    <div class="title">Title</div>260    <div class="note-text">Demo xyz</div>261  </div>262 263  <!-- Bottom tools bar -->264  <div class="bottom-tools">265    <div class="bt-icon">266      <span class="bt-text">Aa</span>267      <span class="red-dot"></span>268    </div>269 270    <div class="bt-icon">271      <!-- Checkbox -->272      <svg viewBox="0 0 24 24">273        <rect x="3" y="3" width="18" height="18" rx="3" />274        <path d="M6 12l4 4 7-7" />275      </svg>276    </div>277 278    <div class="bt-icon">279      <!-- Microphone -->280      <svg viewBox="0 0 24 24">281        <rect x="9" y="5" width="6" height="10" rx="3" />282        <path d="M5 11c0 4 3 6 7 6s7-2 7-6" />283        <path d="M12 17v4" />284      </svg>285    </div>286 287    <div class="bt-icon">288      <!-- Pen -->289      <svg viewBox="0 0 24 24">290        <path d="M3 21l5-2L20 7l-3-3L5 16l-2 5z" />291      </svg>292    </div>293 294    <div class="bt-icon">295      <!-- Image add -->296      <svg viewBox="0 0 24 24">297        <rect x="3" y="3" width="14" height="12" />298        <path d="M4 13l3-3 3 3 4-5 3 4" />299        <path d="M19 8v8" />300        <path d="M15 12h8" />301      </svg>302    </div>303 304    <div class="bt-icon">305      <!-- Smiley -->306      <svg viewBox="0 0 24 24">307        <circle cx="12" cy="12" r="9" />308        <circle cx="9" cy="10" r="1" />309        <circle cx="15" cy="10" r="1" />310        <path d="M8 14c2 2 6 2 8 0" />311      </svg>312    </div>313 314    <div class="bt-icon">315      <!-- Palette -->316      <svg viewBox="0 0 24 24">317        <path d="M12 3c6 0 9 4 9 8s-3 6-6 6h-2c-2 0-3 1-3 3" />318        <circle cx="8" cy="10" r="1" />319        <circle cx="11" cy="8" r="1" />320        <circle cx="15" cy="9" r="1" />321        <circle cx="16" cy="12" r="1" />322      </svg>323    </div>324 325    <div class="divider"></div>326 327    <div class="bt-icon">328      <!-- Bullet list -->329      <svg viewBox="0 0 24 24">330        <circle cx="5" cy="6" r="2" />331        <line x1="9" y1="6" x2="21" y2="6" />332        <circle cx="5" cy="12" r="2" />333        <line x1="9" y1="12" x2="21" y2="12" />334        <circle cx="5" cy="18" r="2" />335        <line x1="9" y1="18" x2="21" y2="18" />336      </svg>337    </div>338 339    <div class="bt-icon">340      <!-- Numbered list -->341      <svg viewBox="0 0 24 24">342        <text x="3" y="8" font-size="7" fill="#1f2b33">1</text>343        <line x1="9" y1="6" x2="21" y2="6" />344        <text x="3" y="14" font-size="7" fill="#1f2b33">2</text>345        <line x1="9" y1="12" x2="21" y2="12" />346        <text x="3" y="20" font-size="7" fill="#1f2b33">3</text>347        <line x1="9" y1="18" x2="21" y2="18" />348      </svg>349    </div>350  </div>351 352  <!-- Gesture bar -->353  <div class="gesture-area"></div>354</div>355</body>356</html>