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>Reminder Detail Screen</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: #121212;15    color: #FFFFFF;16    font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 110px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    box-sizing: border-box;31    color: #E0E0E0;32    font-size: 38px;33    letter-spacing: 0.2px;34  }35  .status-left {36    display: flex;37    align-items: center;38    gap: 20px;39  }40  .status-right {41    display: flex;42    align-items: center;43    gap: 22px;44  }45  .status-icon svg { display: block; }46 47  /* App bar */48  .app-bar {49    position: absolute;50    top: 110px;51    left: 0;52    width: 1080px;53    height: 120px;54    display: flex;55    align-items: center;56    padding: 0 24px;57    box-sizing: border-box;58  }59  .app-bar .left {60    width: 120px;61    display: flex;62    align-items: center;63    justify-content: flex-start;64  }65  .app-bar .right {66    margin-left: auto;67    display: flex;68    align-items: center;69    gap: 36px;70    padding-right: 10px;71  }72  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }73 74  /* Title and meta */75  .content {76    position: absolute;77    top: 270px;78    left: 48px;79    right: 48px;80  }81  .title {82    font-size: 66px;83    font-weight: 800;84    line-height: 1.2;85    color: #FAFAFA;86    margin-bottom: 22px;87  }88  .meta {89    display: flex;90    align-items: center;91    justify-content: space-between;92    color: #8D8D8D;93    font-size: 30px;94  }95  .calendar-icon { margin-right: 8px; }96  .divider {97    height: 1px;98    background: #2D2D2D;99    margin: 30px 0 24px;100  }101  .note-text {102    font-size: 46px;103    color: #EDEDED;104    letter-spacing: 0.2px;105  }106 107  /* Floating chip */108  .edit-chip {109    position: absolute;110    bottom: 290px;111    left: 50%;112    transform: translateX(-50%);113    background: #2E2A25;114    color: #EDEDED;115    padding: 22px 34px 22px 24px;116    border-radius: 48px;117    display: flex;118    align-items: center;119    gap: 18px;120    box-shadow: 0 8px 18px rgba(0,0,0,0.35);121    font-size: 34px;122  }123  .chip-icon {124    width: 64px;125    height: 64px;126    border-radius: 32px;127    background: #F6C83B;128    display: flex;129    align-items: center;130    justify-content: center;131  }132 133  /* Bottom toolbar */134  .bottom-toolbar {135    position: absolute;136    bottom: 120px;137    left: 0;138    width: 1080px;139    height: 120px;140    background: #1D1D1F;141    display: flex;142    align-items: center;143    justify-content: space-between;144    padding: 0 36px;145    box-sizing: border-box;146    border-top: 1px solid #2C2C2C;147  }148  .bt-left {149    color: #EDEDED;150    font-size: 44px;151    font-weight: 500;152    letter-spacing: 0.5px;153  }154  .bt-right {155    width: 64px;156    height: 64px;157    display: flex; align-items: center; justify-content: center;158  }159 160  /* Gesture bar */161  .gesture {162    position: absolute;163    bottom: 52px;164    left: 50%;165    transform: translateX(-50%);166    width: 240px;167    height: 12px;168    background: #EDEDED;169    border-radius: 8px;170    opacity: 0.85;171  }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status Bar -->178  <div class="status-bar">179    <div class="status-left">180      <div>3:11</div>181      <div>72°</div>182      <div>✓</div>183      <div>▲</div>184      <div>en •</div>185    </div>186    <div class="status-right">187      <div class="status-icon">188        <svg width="40" height="40" viewBox="0 0 48 48">189          <path d="M6 26c8-8 28-8 36 0" stroke="#E0E0E0" stroke-width="3" fill="none" stroke-linecap="round"/>190          <path d="M12 30c6-6 18-6 24 0" stroke="#E0E0E0" stroke-width="3" fill="none" stroke-linecap="round"/>191          <circle cx="24" cy="34" r="3.5" fill="#E0E0E0"/>192        </svg>193      </div>194      <div class="status-icon">195        <svg width="44" height="44" viewBox="0 0 48 48">196          <rect x="6" y="10" width="30" height="20" rx="3" stroke="#E0E0E0" stroke-width="3" fill="none"/>197          <rect x="10" y="14" width="22" height="12" fill="#E0E0E0"/>198          <rect x="38" y="16" width="4" height="8" rx="1" fill="#E0E0E0"/>199        </svg>200      </div>201    </div>202  </div>203 204  <!-- App Bar -->205  <div class="app-bar">206    <div class="left icon-btn">207      <svg width="56" height="56" viewBox="0 0 48 48">208        <path d="M30 10 L16 24 L30 38" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>209      </svg>210    </div>211    <div class="right">212      <div class="icon-btn">213        <svg width="56" height="56" viewBox="0 0 48 48">214          <circle cx="24" cy="24" r="14" fill="none" stroke="#F6C83B" stroke-width="4"/>215          <circle cx="24" cy="24" r="3" fill="#F6C83B"/>216        </svg>217      </div>218      <div class="icon-btn">219        <svg width="56" height="56" viewBox="0 0 48 48">220          <path d="M16 8c4 4 8 4 12 0v8l6 6-6 2v8l-6 6v-14l-6-2 6-6V8z" fill="#EDEDED"/>221        </svg>222      </div>223      <div class="icon-btn">224        <svg width="56" height="56" viewBox="0 0 48 48">225          <circle cx="24" cy="12" r="3.5" fill="#EDEDED"/>226          <circle cx="24" cy="24" r="3.5" fill="#EDEDED"/>227          <circle cx="24" cy="36" r="3.5" fill="#EDEDED"/>228        </svg>229      </div>230    </div>231  </div>232 233  <!-- Content -->234  <div class="content">235    <div class="title">Reminder to buy groceries</div>236    <div class="meta">237      <div>Edited: 12-13 13:59</div>238      <div style="display:flex; align-items:center; color:#9A9A9A;">239        <svg class="calendar-icon" width="40" height="40" viewBox="0 0 48 48">240          <rect x="8" y="12" width="32" height="26" rx="3" fill="none" stroke="#8D8D8D" stroke-width="3"/>241          <rect x="8" y="18" width="32" height="6" fill="#8D8D8D"/>242          <rect x="14" y="6" width="6" height="8" rx="2" fill="#8D8D8D"/>243          <rect x="28" y="6" width="6" height="8" rx="2" fill="#8D8D8D"/>244        </svg>245      </div>246    </div>247    <div class="divider"></div>248    <div class="note-text">Milk, eggs and chicken</div>249  </div>250 251  <!-- Floating edit chip -->252  <div class="edit-chip">253    <div class="chip-icon">254      <svg width="38" height="38" viewBox="0 0 48 48">255        <rect x="10" y="12" width="28" height="20" rx="3" fill="#FFF3CD"/>256        <rect x="14" y="16" width="20" height="3.5" fill="#E0B833"/>257        <rect x="14" y="22" width="14" height="3.5" fill="#E0B833"/>258      </svg>259    </div>260    <div>Double tap to edit</div>261  </div>262 263  <!-- Bottom toolbar -->264  <div class="bottom-toolbar">265    <div class="bt-left">Aa</div>266    <div class="bt-right">267      <svg width="56" height="56" viewBox="0 0 48 48">268        <path d="M10 32l2 6 6-2 16-16-6-6L12 30z" fill="#EDEDED"/>269        <path d="M28 10l6 6" stroke="#EDEDED" stroke-width="3" stroke-linecap="round"/>270      </svg>271    </div>272  </div>273 274  <!-- Gesture bar -->275  <div class="gesture"></div>276 277</div>278</body>279</html>