GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Note Detail - Dark</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    height: 108px;24    width: 100%;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    color: #E0E0E0;30    font-size: 36px;31    box-sizing: border-box;32  }33  .status-left, .status-right {34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #E0E0E0; stroke-width: 3; }39 40  /* App bar */41  .app-bar {42    position: absolute;43    top: 108px;44    left: 0;45    height: 150px;46    width: 100%;47    display: flex;48    align-items: center;49    justify-content: space-between;50    padding: 0 24px 0 24px;51    box-sizing: border-box;52  }53  .app-left, .app-right {54    display: flex;55    align-items: center;56    gap: 28px;57  }58  .icon-btn {59    width: 72px;60    height: 72px;61    display: flex;62    align-items: center;63    justify-content: center;64  }65  .icon-btn svg { width: 64px; height: 64px; }66  .accent { stroke: #FFD54F; fill: none; }67  .icon-light { stroke: #E0E0E0; fill: none; }68  .kebab svg { fill: #E0E0E0; stroke: none; }69 70  /* Content */71  .content {72    position: absolute;73    top: 258px;74    left: 0;75    right: 0;76    padding: 0 48px;77    box-sizing: border-box;78  }79  .title {80    font-size: 72px;81    font-weight: 800;82    letter-spacing: -0.5px;83    color: #F5F5F5;84    margin: 18px 0 24px 0;85  }86  .meta-row {87    display: flex;88    align-items: center;89    justify-content: space-between;90    color: #9E9E9E;91    font-size: 36px;92    margin-bottom: 28px;93  }94  .divider {95    height: 2px;96    width: 100%;97    background: #2A2A2A;98    margin: 12px 0 36px 0;99  }100  .note-text {101    font-size: 52px;102    color: #EDEDED;103    line-height: 72px;104  }105 106  /* Saved pill */107  .saved-pill {108    position: absolute;109    bottom: 310px;110    left: 300px;111    background: #2B2B2B;112    color: #FFFFFF;113    border-radius: 120px;114    padding: 20px 34px 20px 26px;115    display: flex;116    align-items: center;117    gap: 22px;118    box-shadow: 0 6px 14px rgba(0,0,0,0.4);119    font-size: 42px;120  }121  .saved-pill svg { width: 64px; height: 64px; }122 123  /* Bottom edit bar */124  .bottom-bar {125    position: absolute;126    bottom: 80px;127    left: 0;128    width: 100%;129    height: 160px;130    background: #1D1D1F;131    display: flex;132    align-items: center;133    justify-content: space-between;134    padding: 0 36px;135    box-sizing: border-box;136    color: #FFFFFF;137  }138  .bottom-label {139    font-size: 48px;140    font-weight: 600;141  }142  .edit-btn {143    width: 88px;144    height: 88px;145    border-radius: 44px;146    background: #2C2C2C;147    display: flex;148    align-items: center;149    justify-content: center;150  }151  .edit-btn svg { width: 48px; height: 48px; stroke: #FFFFFF; fill: none; stroke-width: 5; }152 153  /* Gesture pill */154  .gesture {155    position: absolute;156    bottom: 22px;157    left: 50%;158    transform: translateX(-50%);159    width: 360px;160    height: 16px;161    background: #EEEEEE;162    border-radius: 8px;163    opacity: 0.9;164  }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar -->171  <div class="status-bar">172    <div class="status-left">173      <div>3:14</div>174      <div>72°</div>175      <div class="status-icon">176        <!-- Check icon -->177        <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11"/></svg>178      </div>179      <div class="status-icon">180        <!-- Warning/triangle icon -->181        <svg viewBox="0 0 24 24"><path d="M12 3l10 18H2L12 3z"/><path d="M12 9v5"/><circle cx="12" cy="17" r="1.4" fill="#E0E0E0"/></svg>182      </div>183      <div>en</div>184      <div>•</div>185    </div>186    <div class="status-right">187      <!-- WiFi -->188      <div class="status-icon"><svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 16c2-2 6-2 8 0"/><circle cx="12" cy="19" r="1.8" fill="#E0E0E0"/></svg></div>189      <!-- Battery -->190      <div class="status-icon"><svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2" stroke="#E0E0E0"/><rect x="4" y="8" width="14" height="8" fill="#E0E0E0"/><rect x="22" y="9" width="4" height="6" rx="1" fill="#E0E0E0"/></svg></div>191    </div>192  </div>193 194  <!-- App bar -->195  <div class="app-bar">196    <div class="app-left">197      <!-- Back arrow -->198      <div class="icon-btn">199        <svg viewBox="0 0 24 24" class="icon-light"><path d="M15 18l-6-6 6-6"/></svg>200      </div>201    </div>202    <div class="app-right">203      <!-- Yellow ring icon -->204      <div class="icon-btn">205        <svg viewBox="0 0 24 24" class="accent"><circle cx="12" cy="12" r="8" stroke-width="3"/></svg>206      </div>207      <!-- Pin icon -->208      <div class="icon-btn">209        <svg viewBox="0 0 24 24" class="icon-light"><path d="M7 3l10 7-4 1-1 10-3-8-4-1z"/></svg>210      </div>211      <!-- Kebab (vertical dots) -->212      <div class="icon-btn kebab">213        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>214      </div>215    </div>216  </div>217 218  <!-- Content -->219  <div class="content">220    <div class="title">Reminder to buy groceries</div>221    <div class="meta-row">222      <div>Edited: 12-13 15:13</div>223      <!-- Calendar icon -->224      <div class="icon-btn" style="width:56px;height:56px;">225        <svg viewBox="0 0 24 24" class="icon-light"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18"/><path d="M7 3v4"/><path d="M17 3v4"/></svg>226      </div>227    </div>228    <div class="divider"></div>229    <div class="note-text">Milk, eggs, chicken and broccoli.</div>230  </div>231 232  <!-- Saved pill -->233  <div class="saved-pill">234    <svg viewBox="0 0 24 24">235      <circle cx="12" cy="12" r="11" fill="#FFC107"/>236      <rect x="7" y="7" width="10" height="10" rx="1.5" fill="#FFF2CC"/>237      <path d="M9 10h6M9 13h6M9 16h6" stroke="#4E4E4E" stroke-width="1.6"/>238    </svg>239    <div>Saved</div>240  </div>241 242  <!-- Bottom edit bar -->243  <div class="bottom-bar">244    <div class="bottom-label">Aa</div>245    <div class="edit-btn">246      <svg viewBox="0 0 24 24"><path d="M4 20l4-1 10-10-3-3-10 10-1 4z"/><path d="M13 6l3 3"/></svg>247    </div>248  </div>249 250  <!-- Gesture pill -->251  <div class="gesture"></div>252 253</div>254</body>255</html>