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 - Grocery</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: #202124;15    border-radius: 0;16    box-shadow: none;17    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;18    color: #EDEDED;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    right: 0;27    height: 120px;28    display: flex;29    align-items: center;30    padding: 0 40px;31    color: #EDEDED;32    font-weight: 500;33    font-size: 36px;34    letter-spacing: 0.5px;35  }36  .sb-left { flex: 0 0 auto; }37  .sb-right {38    margin-left: auto;39    display: flex;40    align-items: center;41    gap: 30px;42  }43  .sb-icon svg { display: block; }44 45  /* Top actions row */46  .top-actions {47    position: absolute;48    top: 130px;49    left: 0;50    right: 0;51    height: 110px;52    display: flex;53    align-items: center;54    padding: 0 44px;55  }56  .top-actions .spacer { margin-left: auto; display: flex; align-items: center; gap: 70px; }57  .icon {58    width: 70px;59    height: 70px;60  }61  .icon path,62  .icon rect,63  .icon circle,64  .icon line,65  .icon polyline {66    stroke: #BDBDBD;67    fill: none;68    stroke-width: 6;69    stroke-linecap: round;70    stroke-linejoin: round;71  }72 73  /* Note content */74  .note {75    position: absolute;76    left: 54px;77    right: 54px;78    top: 270px;79  }80  .title {81    font-size: 90px;82    line-height: 1.05;83    font-weight: 500;84    margin-bottom: 40px;85    color: #F1F3F4;86  }87  .items {88    display: flex;89    flex-direction: column;90    gap: 18px;91    color: #E0E0E0;92    font-size: 46px;93    line-height: 1.3;94    letter-spacing: 0.2px;95  }96 97  /* Bottom toolbar */98  .bottom-toolbar {99    position: absolute;100    left: 0;101    right: 0;102    bottom: 140px;103    height: 120px;104    display: flex;105    align-items: center;106    padding: 0 44px;107    color: #C6C6C6;108    font-size: 36px;109  }110  .bt-left { display: flex; align-items: center; gap: 44px; }111  .bt-center { margin: 0 auto; opacity: 0.9; }112  .bt-right { margin-left: auto; }113  .muted { color: #C6C6C6; }114 115  /* Home indicator */116  .home-indicator {117    position: absolute;118    left: 50%;119    bottom: 40px;120    width: 380px;121    height: 16px;122    background: #FFFFFF;123    border-radius: 10px;124    opacity: 0.88;125    transform: translateX(-50%);126  }127</style>128</head>129<body>130<div id="render-target">131 132  <!-- Status Bar -->133  <div class="status-bar">134    <div class="sb-left">8:01</div>135    <div class="sb-right">136      <!-- Simple Wi‑Fi icon -->137      <div class="sb-icon">138        <svg width="56" height="40" viewBox="0 0 56 40">139          <path d="M6 12 C18 2, 38 2, 50 12" stroke="#F1F1F1" stroke-width="4" fill="none"/>140          <path d="M14 20 C22 13, 34 13, 42 20" stroke="#F1F1F1" stroke-width="4" fill="none"/>141          <circle cx="28" cy="28" r="4" fill="#F1F1F1" stroke="none"/>142        </svg>143      </div>144      <!-- Battery icon -->145      <div class="sb-icon">146        <svg width="70" height="40" viewBox="0 0 70 40">147          <rect x="6" y="8" width="52" height="24" rx="4" stroke="#F1F1F1" stroke-width="4" fill="none"/>148          <rect x="10" y="12" width="40" height="16" rx="2" fill="#F1F1F1" stroke="none"/>149          <rect x="60" y="14" width="6" height="12" rx="2" fill="#F1F1F1" stroke="none"/>150        </svg>151      </div>152      <div class="muted" style="font-size:34px;">100%</div>153    </div>154  </div>155 156  <!-- Top Actions -->157  <div class="top-actions">158    <!-- Back Arrow -->159    <svg class="icon" viewBox="0 0 72 72">160      <polyline points="46,16 22,36 46,56"></polyline>161    </svg>162 163    <div class="spacer">164      <!-- Pin icon -->165      <svg class="icon" viewBox="0 0 72 72">166        <path d="M20 18 L52 34 L44 40 L44 58 L28 58 L28 40 L20 34 Z"></path>167      </svg>168      <!-- Bell icon -->169      <svg class="icon" viewBox="0 0 72 72">170        <path d="M36 16 C26 16, 22 26, 22 34 C22 44, 18 48, 18 48 L54 48 C54 48, 50 44, 50 34 C50 26, 46 16, 36 16"></path>171        <circle cx="36" cy="54" r="4" fill="#BDBDBD" stroke="none"></circle>172      </svg>173      <!-- Archive/Download tray -->174      <svg class="icon" viewBox="0 0 72 72">175        <rect x="16" y="18" width="40" height="32" rx="4"></rect>176        <polyline points="36,26 36,40 28,32" ></polyline>177        <polyline points="36,40 44,32" ></polyline>178      </svg>179    </div>180  </div>181 182  <!-- Note Content -->183  <div class="note">184    <div class="title">Grocery</div>185    <div class="items">186      <div>Strawberry</div>187      <div>Potatoes</div>188      <div>Rice</div>189      <div>Tea</div>190      <div>Milk</div>191      <div>Flour</div>192      <div>Sugar</div>193    </div>194  </div>195 196  <!-- Bottom Toolbar -->197  <div class="bottom-toolbar">198    <div class="bt-left">199      <!-- Plus in square -->200      <svg class="icon" viewBox="0 0 72 72">201        <rect x="14" y="14" width="44" height="44" rx="6"></rect>202        <line x1="36" y1="22" x2="36" y2="50"></line>203        <line x1="22" y1="36" x2="50" y2="36"></line>204      </svg>205      <!-- Palette icon -->206      <svg class="icon" viewBox="0 0 72 72">207        <circle cx="34" cy="38" r="20"></circle>208        <circle cx="24" cy="36" r="2" fill="#BDBDBD" stroke="none"></circle>209        <circle cx="34" cy="30" r="2" fill="#BDBDBD" stroke="none"></circle>210        <circle cx="44" cy="36" r="2" fill="#BDBDBD" stroke="none"></circle>211      </svg>212      <!-- A icon (typography) -->213      <div style="width:70px; height:70px; display:flex; align-items:center; justify-content:center; color:#BDBDBD; font-size:48px; font-weight:600;">A</div>214    </div>215    <div class="bt-center muted">Edited 7:56 PM</div>216    <div class="bt-right">217      <!-- Vertical more dots -->218      <svg class="icon" viewBox="0 0 72 72">219        <circle cx="36" cy="22" r="5" fill="#BDBDBD" stroke="none"></circle>220        <circle cx="36" cy="36" r="5" fill="#BDBDBD" stroke="none"></circle>221        <circle cx="36" cy="50" r="5" fill="#BDBDBD" stroke="none"></circle>222      </svg>223    </div>224  </div>225 226  <!-- Home Indicator -->227  <div class="home-indicator"></div>228</div>229</body>230</html>