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 UI Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#0f2236; color:#e6edf7; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;12  }13 14  /* Top app bar */15  .appbar{16    position:relative;17    height:220px;18    background:#132a43;19    padding:80px 36px 0 36px;20    display:flex; align-items:center;21  }22  .appbar .title{23    font-size:64px; font-weight:600; letter-spacing:0.5px; margin-left:24px;24  }25  .appbar .right-icons{26    position:absolute; right:36px; top:82px; display:flex; gap:36px; opacity:0.95;27  }28  .icon{ width:56px; height:56px; }29  .icon path, .icon line, .icon circle, .icon polyline, .icon rect {30    stroke:#d6deea; fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round;31  }32 33  /* Filter chips */34  .chips{ display:flex; gap:26px; padding:26px 36px; }35  .chip{36    padding:18px 34px; border-radius:28px; font-size:34px;37    background:#1a314e; border:2px solid #263f60; color:#d0d8e6;38  }39  .chip.active{ border-color:#d3de64; color:#f3f7c2; }40 41  /* List */42  .list{ padding:0 0; }43  .item{44    background:#eef1f6; color:#1d2430;45    padding:36px; border-top:1px solid #d6dbe6;46    position:relative;47  }48  .item .name{ font-size:56px; font-weight:600; margin-bottom:12px; }49  .item .meta{ font-size:34px; color:#475160; }50  .item .due{ position:absolute; right:36px; top:44px; color:#5b6673; font-size:36px; }51 52  /* Bottom tabs */53  .bottom-tabs{54    position:absolute; bottom:210px; left:0; width:100%;55    display:flex; justify-content:space-around; color:#c7cfdb; letter-spacing:2px;56  }57  .bottom-tabs .tab{ font-size:40px; }58  .bottom-tabs .active{ color:#ffffff; font-weight:800; text-decoration:underline; }59 60  /* FAB */61  .fab{62    position:absolute; right:72px; bottom:330px; width:140px; height:140px; border-radius:50%;63    background:#0c1b2d; box-shadow:0 18px 36px rgba(0,0,0,0.35);64    display:flex; align-items:center; justify-content:center;65  }66  .fab svg{ width:70px; height:70px; }67  .fab path{ stroke:#e9eef6; stroke-width:12; }68 69  /* Scrim and modal */70  .scrim{71    position:absolute; inset:0; background:rgba(0,0,0,0.55);72  }73  .card{74    position:absolute; left:90px; top:760px; width:900px; border-radius:32px; overflow:hidden;75    box-shadow:0 24px 60px rgba(0,0,0,0.45);76  }77  .card .card-top{78    background:#2b4a70; color:#ffffff; height:140px; display:flex; align-items:center; justify-content:center; position:relative;79    font-size:56px; font-weight:700;80  }81  .card .share{82    position:absolute; right:28px; top:28px;83  }84  .share path, .share circle, .share line{ stroke:#ffe96d; }85 86  .card .card-body{87    background:#d8dfee; color:#1a2534; padding:48px 48px 32px 48px; position:relative;88  }89  .card .card-title{ font-size:64px; font-weight:800; margin-bottom:20px; color:#1a2534; }90  .card .card-desc{ font-size:44px; line-height:1.35; color:#2a3647; margin-bottom:36px; }91  .card .detail{ font-size:40px; color:#2a3647; margin:22px 0; }92  .more{93    position:absolute; right:28px; bottom:40px;94  }95  .more circle{ fill:#2f3a4a; }96 97  .card .card-actions{98    background:#cfd7e9; border-top:1px solid rgba(0,0,0,0.08);99    display:flex; justify-content:space-around; align-items:center; height:170px;100    color:#3f495a;101  }102  .action{ display:flex; flex-direction:column; align-items:center; gap:10px; }103  .action svg{ width:58px; height:58px; }104  .action span{ font-size:36px; color:#4a5567; }105 106  /* Home bar */107  .homebar{108    position:absolute; left:50%; transform:translateX(-50%);109    bottom:30px; width:360px; height:12px; background:#ffffff; border-radius:8px; opacity:0.9;110  }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- App bar -->117  <div class="appbar">118    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">119      <line x1="3" y1="6" x2="21" y2="6"></line>120      <line x1="3" y1="12" x2="21" y2="12"></line>121      <line x1="3" y1="18" x2="16" y2="18"></line>122    </svg>123    <div class="title">Reminder</div>124    <div class="right-icons">125      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">126        <circle cx="11" cy="11" r="7"></circle>127        <line x1="17" y1="17" x2="22" y2="22"></line>128      </svg>129      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">130        <line x1="4" y1="6" x2="20" y2="6"></line>131        <line x1="8" y1="12" x2="20" y2="12"></line>132        <line x1="12" y1="18" x2="20" y2="18"></line>133      </svg>134    </div>135  </div>136 137  <!-- Chips -->138  <div class="chips">139    <div class="chip active">All</div>140    <div class="chip">Default</div>141    <div class="chip">Critical</div>142    <div class="chip">Important</div>143    <div class="chip">Favorites</div>144  </div>145 146  <!-- List -->147  <div class="list">148    <div class="item">149      <div class="name">movie</div>150      <div class="meta">06/15/2023  9:30 PM</div>151      <div class="meta">One Time</div>152      <div class="due">in 3 days</div>153    </div>154    <div class="item">155      <div class="name">Health checkup</div>156      <div class="meta">06/28/2023  11:45 AM</div>157      <div class="meta">One Time</div>158      <div class="due">in 16 days</div>159    </div>160  </div>161 162  <!-- Bottom tabs -->163  <div class="bottom-tabs">164    <div class="tab active">ACTIVE</div>165    <div class="tab">COMPLETED</div>166  </div>167 168  <!-- FAB -->169  <div class="fab" aria-label="Add">170    <svg viewBox="0 0 24 24">171      <line x1="12" y1="5" x2="12" y2="19"></line>172      <line x1="5" y1="12" x2="19" y2="12"></line>173    </svg>174  </div>175 176  <!-- Overlay scrim -->177  <div class="scrim"></div>178 179  <!-- Modal card -->180  <div class="card" role="dialog" aria-label="Reminder details">181    <div class="card-top">182      in 16 days183      <div class="share">184        <svg class="icon" viewBox="0 0 24 24">185          <circle cx="6" cy="12" r="2"></circle>186          <circle cx="18" cy="6" r="2"></circle>187          <circle cx="18" cy="18" r="2"></circle>188          <line x1="8" y1="12" x2="16" y2="7"></line>189          <line x1="8" y1="12" x2="16" y2="17"></line>190        </svg>191      </div>192    </div>193    <div class="card-body">194      <div class="card-title">Health checkup</div>195      <div class="card-desc">Full body health checkup in SRS hospital</div>196 197      <div class="detail"><strong>Repeat:</strong> One Time</div>198      <div class="detail">Scheduled for 06/28/2023  11:45 AM</div>199 200      <div class="more">201        <svg width="40" height="80" viewBox="0 0 8 24">202          <circle cx="4" cy="4" r="2"></circle>203          <circle cx="4" cy="12" r="2"></circle>204          <circle cx="4" cy="20" r="2"></circle>205        </svg>206      </div>207    </div>208    <div class="card-actions">209      <div class="action">210        <svg viewBox="0 0 24 24">211          <line x1="6" y1="6" x2="18" y2="18"></line>212          <line x1="18" y1="6" x2="6" y2="18"></line>213        </svg>214        <span>Dismiss</span>215      </div>216      <div class="action">217        <svg viewBox="0 0 24 24">218          <polyline points="4,13 9,18 20,7"></polyline>219        </svg>220        <span>Complete</span>221      </div>222      <div class="action">223        <svg viewBox="0 0 24 24">224          <path d="M3 17l3.5-.5 9.5-9.5-3-3L3.5 13.5 3 17z"></path>225          <line x1="14" y1="4" x2="20" y2="10"></line>226        </svg>227        <span>Edit</span>228      </div>229      <div class="action">230        <svg viewBox="0 0 24 24">231          <polyline points="6,7 6,19 18,19 18,7"></polyline>232          <line x1="9" y1="7" x2="9" y2="5"></line>233          <line x1="15" y1="7" x2="15" y2="5"></line>234          <line x1="6" y1="7" x2="18" y2="7"></line>235        </svg>236        <span>Delete</span>237      </div>238    </div>239  </div>240 241  <div class="homebar"></div>242</div>243</body>244</html>