GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Reminder List UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, system-ui, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#d8dee9; border-radius:48px; box-shadow:0 10px 30px rgba(0,0,0,0.2);12    color:#222;13  }14 15  /* Top status / app bar */16  .top-bar {17    position:absolute; left:0; top:0; width:100%; height:170px;18    background:#2f4963; color:#eaf0f6;19    padding:32px 36px 24px 36px;20  }21  .top-left {22    display:flex; align-items:center; gap:16px; font-weight:600; font-size:34px;23  }24  .top-right {25    position:absolute; right:24px; top:28px; display:flex; gap:22px; opacity:0.9;26  }27  .status-icon svg { width:36px; height:36px; fill:#eaf0f6; }28 29  /* Notification card */30  .notif-card {31    position:absolute; left:30px; top:110px; width:1020px;32    background:#f6f5fb; border-radius:34px;33    box-shadow:0 12px 24px rgba(32,41,58,0.25);34    padding:28px 30px;35  }36  .notif-row {37    display:flex; align-items:center; justify-content:space-between;38  }39  .notif-left { display:flex; align-items:center; gap:24px; }40  .app-icon {41    width:68px; height:68px; border-radius:50%; background:#4267b2;42    display:flex; align-items:center; justify-content:center;43    box-shadow:0 4px 10px rgba(0,0,0,0.15);44  }45  .app-icon svg { width:40px; height:40px; fill:#fff; }46  .notif-title { font-weight:700; font-size:36px; color:#222; }47  .notif-sub { font-size:30px; color:#6b7280; margin-top:6px; }48  .chev-btn {49    width:56px; height:56px; border-radius:28px; background:#ebe9f7;50    display:flex; align-items:center; justify-content:center;51  }52  .chev-btn svg { width:26px; height:26px; fill:#4b5563; }53  .notif-actions {54    margin-top:26px; display:flex; gap:22px;55  }56  .pill {57    padding:22px 38px; border-radius:20px; background:#ebe9f7; color:#2e3137;58    font-weight:800; letter-spacing:0.6px; font-size:30px; border:1px solid #dddcef;59  }60 61  /* Ad banner placeholder */62  .ad-banner {63    position:absolute; left:80px; top:340px; width:920px; height:140px;64    background:#E0E0E0; border:1px solid #BDBDBD; border-radius:8px;65    display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;66  }67 68  /* List area */69  .list {70    position:absolute; left:0; top:480px; right:0; bottom:340px; overflow:hidden;71  }72  .item {73    padding:44px 48px; border-top:1px solid rgba(70,78,90,0.2);74    border-bottom:1px solid rgba(70,78,90,0.2);75    background:rgba(255,255,255,0.06);76  }77  .item-row { display:flex; justify-content:space-between; align-items:flex-start; }78  .title { font-size:44px; font-weight:800; color:#1f2937; }79  .meta { margin-top:10px; color:#5a6473; font-size:30px; }80  .right-tag { color:#334155; font-size:30px; margin-top:12px; }81 82  /* Bottom tabs */83  .tabs {84    position:absolute; bottom:110px; left:70px; right:70px;85    display:flex; justify-content:space-between; align-items:center;86  }87  .tab { font-size:36px; color:#111; letter-spacing:0.2px; }88  .tab.active { font-weight:900; text-decoration:underline; }89  .tab.inactive { color:#3c4048; font-weight:600; }90 91  /* Floating Action Button */92  .fab {93    position:absolute; right:88px; bottom:220px; width:140px; height:140px;94    background:#2f4963; border-radius:50%;95    display:flex; align-items:center; justify-content:center;96    box-shadow:0 18px 30px rgba(0,0,0,0.25);97  }98  .fab svg { width:56px; height:56px; stroke:#fff; stroke-width:10; }99  /* Gesture pill */100  .home-pill {101    position:absolute; bottom:54px; left:50%; transform:translateX(-50%);102    width:440px; height:18px; background:#7b8088; border-radius:12px; opacity:0.7;103  }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Top bar -->110  <div class="top-bar">111    <div class="top-left">112      <span class="status-icon">113        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7v4l-2 2v1h18v-1l-2-2V9a7 7 0 0 0-7-7zm0 20a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z"/></svg>114      </span>115      <span>Reminder</span>116    </div>117    <div class="top-right">118      <span class="status-icon">119        <svg viewBox="0 0 24 24"><path d="M2 7l10 10L22 7" /></svg>120      </span>121      <span class="status-icon">122        <svg viewBox="0 0 24 24"><path d="M6 20h12a2 2 0 0 0 2-2V6h-2v12H6V6H4v12a2 2 0 0 0 2 2z"/></svg>123      </span>124    </div>125  </div>126 127  <!-- Notification card -->128  <div class="notif-card">129    <div class="notif-row">130      <div class="notif-left">131        <div class="app-icon">132          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" opacity="0.12"></circle><path d="M7 11a5 5 0 0 1 5-5h1v2h-1a3 3 0 0 0-3 3v1H7v-1zm5 4h1v2h-1a5 5 0 0 1-5-5h2a3 3 0 0 0 3 3z" fill="#fff"/></svg>133        </div>134        <div>135          <div class="notif-title">[Snooze] VCA Virtual Meet · <span style="color:#6b7280; font-weight:600;">now</span></div>136        </div>137      </div>138      <div class="chev-btn">139        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5"/></svg>140      </div>141    </div>142    <div class="notif-actions">143      <div class="pill">SNOOZE</div>144      <div class="pill">DISMISS</div>145    </div>146  </div>147 148  <!-- Ad banner placeholder -->149  <div class="ad-banner">[IMG: Ad Banner]</div>150 151  <!-- List items -->152  <div class="list">153    <div class="item">154      <div class="item-row">155        <div>156          <div class="title">[Snooze] VCA Virtual Meet</div>157          <div class="meta">08/29/2023 &nbsp;&nbsp; 10:32 AM</div>158          <div class="meta">One Time</div>159        </div>160        <div class="right-tag">Today</div>161      </div>162    </div>163 164    <div class="item">165      <div class="item-row">166        <div>167          <div class="title">[Snooze] DOWNTIME</div>168          <div class="meta">08/29/2023 &nbsp;&nbsp; 10:33 AM</div>169          <div class="meta">One Time [Snooze]</div>170        </div>171        <div class="right-tag">Today</div>172      </div>173    </div>174 175    <div class="item">176      <div class="item-row">177        <div>178          <div class="title">DOWNTIME</div>179          <div class="meta">09/5/2023 &nbsp;&nbsp; 10:00 AM</div>180          <div class="meta">Every Tuesday</div>181        </div>182        <div class="right-tag">in 7 days</div>183      </div>184    </div>185 186    <div class="item">187      <div class="item-row">188        <div>189          <div class="title">Detroit Free Press Marathon 2</div>190          <div class="meta">09/16/2023 &nbsp;&nbsp; 5:30 AM</div>191          <div class="meta">Every Month</div>192        </div>193        <div class="right-tag">in 18 days</div>194      </div>195    </div>196  </div>197 198  <!-- Bottom tabs -->199  <div class="tabs">200    <div class="tab active">ACTIVE</div>201    <div class="tab inactive">COMPLETED</div>202  </div>203 204  <!-- Floating Action Button -->205  <div class="fab" aria-label="Add">206    <svg viewBox="0 0 24 24" fill="none">207      <path d="M12 4v16M4 12h16" />208    </svg>209  </div>210 211  <!-- Gesture home pill -->212  <div class="home-pill"></div>213</div>214</body>215</html>