GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Reminder UI</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  * { box-sizing: border-box; }10  #render-target {11    width:1080px; height:2400px;12    position:relative; overflow:hidden;13    background:#d9dde8;14    border-radius:36px;15    box-shadow:0 20px 60px rgba(0,0,0,0.25);16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;17    color:#1f2a37;18  }19 20  /* Top header */21  .top-area {22    position:absolute; left:0; top:0; width:100%; height:320px;23    background:linear-gradient(180deg, #2f486a 0%, #334a6b 60%, rgba(51,74,107,0.6) 100%);24  }25  .status-row {26    position:absolute; top:32px; left:32px; right:32px; height:48px;27    display:flex; align-items:center; justify-content:space-between; color:#fff;28    font-weight:600;29  }30  .status-right {31    display:flex; align-items:center; gap:18px; color:#fff;32  }33  .status-right span { font-size:30px; }34  .title-row {35    position:absolute; top:96px; left:56px; display:flex; align-items:center; gap:16px; color:#eaf0ff;36    font-size:40px; font-weight:600;37  }38  .title-row svg { width:40px; height:40px; }39 40  /* Notification card */41  .notif-card {42    position:absolute; top:150px; left:60px; width:960px;43    background:#2f2f31; color:#e9e9ea;44    border-radius:40px;45    padding:32px;46    box-shadow:0 8px 24px rgba(0,0,0,0.35);47  }48  .notif-header {49    display:flex; align-items:center; justify-content:space-between; margin-bottom:28px;50  }51  .notif-left { display:flex; align-items:center; gap:20px; }52  .notif-avatar {53    width:72px; height:72px; border-radius:36px;54    background:#7a83f6; display:flex; align-items:center; justify-content:center;55    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.15);56  }57  .notif-title {58    display:flex; align-items:center; gap:12px;59    font-size:34px; font-weight:700; color:#f0f0f0;60  }61  .notif-sub {62    font-size:28px; color:#c9c9cb; margin-top:4px;63  }64  .notif-right {65    display:flex; align-items:center; gap:12px;66  }67  .circle-btn {68    width:56px; height:56px; border-radius:28px; background:#1f1f20;69    display:flex; align-items:center; justify-content:center;70    border:1px solid rgba(255,255,255,0.12);71  }72  .notif-actions {73    display:flex; gap:24px; margin-top:8px;74  }75  .pill {76    padding:22px 36px; border-radius:26px;77    background:#d7d7d9; color:#1f2a37; font-weight:800; letter-spacing:1px;78    border:1px solid #c5c5c7; font-size:30px;79  }80 81  /* List */82  .list {83    position:absolute; top:420px; left:0; right:0;84    padding:0 40px;85  }86  .item {87    padding:36px 16px 36px 16px; border-bottom:1px solid #c8cbd6;88    position:relative;89  }90  .item-title {91    font-size:52px; font-weight:800; color:#2a313f;92    margin-bottom:16px;93  }94  .item-meta { font-size:30px; color:#6a7282; }95  .item-right {96    position:absolute; right:40px; top:48px; font-size:30px; color:#6a7282; font-weight:700;97  }98 99  /* Floating Action Button */100  .fab {101    position:absolute; right:96px; bottom:430px;102    width:160px; height:160px; border-radius:80px;103    background:#2f486a; color:#fff;104    display:flex; align-items:center; justify-content:center;105    box-shadow:0 18px 32px rgba(47,72,106,0.35), inset 0 0 0 2px rgba(255,255,255,0.08);106  }107  .fab svg { width:84px; height:84px; }108 109  /* Bottom tabs */110  .tabs {111    position:absolute; bottom:160px; left:0; right:0;112    display:flex; justify-content:space-between; padding:0 140px;113    color:#2f3136;114  }115  .tab {116    font-size:36px; font-weight:700; letter-spacing:0.5px;117    color:#2b2b2f;118  }119  .tab.active {120    text-decoration:underline; text-decoration-thickness:6px;121    text-underline-offset:10px;122  }123 124  /* Gesture bar */125  .gesture {126    position:absolute; bottom:64px; left:290px; width:500px; height:16px;127    background:#8f9197; border-radius:10px;128  }129 130  /* Simple icon color helpers */131  .icon-white path { fill:#ffffff; }132  .icon-grey path { fill:#cfd7e2; }133</style>134</head>135<body>136<div id="render-target">137 138  <!-- Top area -->139  <div class="top-area"></div>140 141  <!-- Status bar -->142  <div class="status-row">143    <div style="display:flex; align-items:center; gap:14px; color:#e9f1ff; font-size:30px;">144      <!-- small app icon dot -->145      <div style="width:18px; height:18px; border-radius:9px; background:#cbd6ff;"></div>146      <span>Reminder</span>147    </div>148    <div class="status-right">149      <!-- WiFi -->150      <svg width="42" height="42" viewBox="0 0 24 24">151        <path fill="#ffffff" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/>152      </svg>153      <!-- Battery + percentage -->154      <div style="display:flex; align-items:center; gap:8px;">155        <svg width="44" height="44" viewBox="0 0 24 24">156          <path fill="#ffffff" d="M2 7h16v10H2V7zm18 3h2v4h-2v-4z"/>157        </svg>158        <span>100%</span>159      </div>160    </div>161  </div>162 163  <!-- Title row -->164  <div class="title-row">165    <svg viewBox="0 0 24 24">166      <path fill="#eaf0ff" d="M12 2c3 0 5 2 5 5v3l2 2v2H5v-2l2-2V7c0-3 2-5 5-5zm-3 17h6v2H9v-2z"/>167    </svg>168    <div>Reminder</div>169  </div>170 171  <!-- Notification card -->172  <div class="notif-card">173    <div class="notif-header">174      <div class="notif-left">175        <div class="notif-avatar">176          <svg width="36" height="36" viewBox="0 0 24 24">177            <path fill="#ffffff" d="M6 2h6l2 3-3 2 2 3-3 2C6 10 4 7 6 2z"/>178          </svg>179        </div>180        <div>181          <div class="notif-title">182            <span>Meet &amp; Greet</span>183            <span style="font-weight:600; color:#c9c9cb;">· now</span>184            <svg width="28" height="28" viewBox="0 0 24 24">185              <path fill="#c9c9cb" d="M12 3c3 0 5 2 5 5v3l2 2v2H5v-2l2-2V8c0-3 2-5 5-5z"/>186            </svg>187          </div>188          <div class="notif-sub">Reminder</div>189        </div>190      </div>191 192      <div class="circle-btn">193        <svg width="28" height="28" viewBox="0 0 24 24">194          <path fill="#e9e9ea" d="M6 9l6 6 6-6H6z"/>195        </svg>196      </div>197    </div>198 199    <div class="notif-actions">200      <div class="pill">SNOOZE</div>201      <div class="pill">DISMISS</div>202    </div>203  </div>204 205  <!-- List of reminders -->206  <div class="list">207    <div class="item">208      <div class="item-title">Meet &amp; Greet</div>209      <div class="item-meta">08/10/2023  &nbsp; 1:48 PM</div>210      <div class="item-meta" style="margin-top:8px;">One Time</div>211      <div class="item-right">Today</div>212    </div>213 214    <div class="item">215      <div class="item-title">Birthday Party!</div>216      <div class="item-meta">08/10/2023  &nbsp; 7:00 PM</div>217      <div class="item-meta" style="margin-top:8px;">Every Year</div>218      <div class="item-right">Today</div>219    </div>220  </div>221 222  <!-- Floating Action Button -->223  <div class="fab">224    <svg viewBox="0 0 24 24">225      <path fill="#ffffff" d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/>226    </svg>227  </div>228 229  <!-- Bottom tabs -->230  <div class="tabs">231    <div class="tab active">ACTIVE</div>232    <div class="tab">COMPLETED</div>233  </div>234 235  <!-- Gesture bar -->236  <div class="gesture"></div>237 238</div>239</body>240</html>