GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Tasks - Add Reminder</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #151718; border-radius: 0;12  }13 14  /* Top app status + toolbar */15  .appbar {16    position: absolute; left: 0; top: 0; width: 1080px; height: 250px;17    background: #0E5A95;18  }19  .status {20    height: 110px; color: #fff; display: flex; align-items: center;21    padding: 0 32px; font-size: 34px; letter-spacing: 0.5px;22  }23  .status .right { margin-left: auto; display: flex; gap: 26px; align-items: center; }24  .toolbar {25    height: 140px; display: flex; align-items: center; padding: 0 32px; color: #DCE9F7;26  }27  .toolbar .title { font-size: 52px; margin-left: 26px; }28  .toolbar .actions { margin-left: auto; display: flex; gap: 42px; align-items: center; }29 30  /* Red warning banner */31  .warning {32    position: absolute; left: 0; top: 250px; width: 1080px; height: 110px;33    display: flex; align-items: center; padding: 0 32px; gap: 20px;34    color: #D32F2F; background: rgba(0,0,0,0.35);35  }36  .warning .enable {37    margin-left: auto; background: #1E88E5; color: #E7F1FB; border: none;38    border-radius: 10px; padding: 22px 32px; font-size: 36px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);39  }40 41  /* Dialog card */42  .card {43    position: absolute; left: 30px; top: 660px; width: 1020px; background: #3B3D3F;44    border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.65);45    overflow: hidden;46  }47  .card-header {48    height: 130px; background: #21A1F6; color: #fff; display: flex; align-items: center;49    padding: 0 28px; font-size: 48px;50  }51  .card-header .save {52    margin-left: auto; background: #FFFFFF; color: #1976D2; border-radius: 12px;53    padding: 16px 30px; font-weight: 700; font-size: 36px; box-shadow: 0 2px 0 rgba(0,0,0,0.15);54  }55  .rows { color: #F0F0F0; }56  .row {57    height: 118px; display: flex; align-items: center; padding: 0 32px; gap: 24px;58    border-top: 1px solid #4A4C4E; font-size: 44px; color: #EDEDED;59  }60  .row.placeholder { color: #BFC3C6; }61  .row .spacer { margin-left: auto; }62  .row .link { color: #1E88E5; font-size: 38px; margin-right: 18px; }63 64  /* Bottom banner ad placeholder */65  .ad-wrap {66    position: absolute; left: 0; bottom: 170px; width: 1080px; display: flex; justify-content: center;67  }68  .img-placeholder {69    width: 920px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;70    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 36px; border-radius: 8px;71  }72 73  /* Gesture pill */74  .pill {75    position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%);76    width: 240px; height: 14px; background: #D6D6D6; border-radius: 7px; opacity: 0.7;77  }78 79  /* Icon helpers */80  svg { display: block; }81  .icon { width: 60px; height: 60px; stroke: #DCE9F7; fill: none; stroke-width: 8; }82  .icon-dark { width: 56px; height: 56px; stroke: #BFC3C6; fill: none; stroke-width: 8; }83  .icon-white { width: 56px; height: 56px; stroke: #FFFFFF; fill: none; stroke-width: 8; }84  .icon-red { width: 42px; height: 42px; stroke: #D32F2F; fill: none; stroke-width: 8; }85  .closeX { width: 52px; height: 52px; stroke: #FFFFFF; }86  .chev { width: 40px; height: 40px; stroke: #D8D8D8; }87  .tiny { width: 36px; height: 36px; }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Blue app bar including status -->94  <div class="appbar">95    <div class="status">96      <div>6:16</div>97      <div class="right">98        <!-- small status icons -->99        <svg class="tiny" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#fff" fill="none" stroke-width="2"/></svg>100        <svg class="tiny" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" stroke="#fff" fill="none" stroke-width="2"/></svg>101        <svg class="tiny" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#fff" stroke-width="2"/></svg>102        <svg class="tiny" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#fff"/></svg>103        <svg class="tiny" viewBox="0 0 24 24"><path d="M3 21h18" stroke="#fff" stroke-width="2"/></svg>104      </div>105    </div>106    <div class="toolbar">107      <!-- menu icon -->108      <svg class="icon" viewBox="0 0 48 48">109        <path d="M6 12h36M6 24h36M6 36h36" />110      </svg>111      <div class="title">Tasks</div>112      <div class="actions">113        <!-- add (plus in alarm-like circle) -->114        <svg class="icon" viewBox="0 0 48 48">115          <circle cx="24" cy="24" r="18"/>116          <path d="M24 14v20M14 24h20"/>117        </svg>118        <!-- check circle -->119        <svg class="icon" viewBox="0 0 48 48">120          <circle cx="24" cy="24" r="18"/>121          <path d="M16 24l6 6 10-12" />122        </svg>123        <!-- search -->124        <svg class="icon" viewBox="0 0 48 48">125          <circle cx="20" cy="20" r="12"/>126          <path d="M32 32l10 10" />127        </svg>128      </div>129    </div>130  </div>131 132  <!-- Red warning -->133  <div class="warning">134    <svg class="icon-red" viewBox="0 0 48 48">135      <circle cx="24" cy="24" r="18" />136      <path d="M24 14v14M24 34h0.5" />137    </svg>138    <div style="font-size:38px;">Please allow app to send you notification</div>139    <button class="enable">Enable</button>140  </div>141 142  <!-- Add Reminder card -->143  <div class="card">144    <div class="card-header">145      <!-- Close X -->146      <svg class="closeX" viewBox="0 0 48 48">147        <path d="M14 14l20 20M34 14l-20 20" />148      </svg>149      <div style="margin-left:18px;">Add Reminder</div>150      <div class="save">SAVE</div>151    </div>152 153    <div class="rows">154      <!-- Title -->155      <div class="row">156        <div style="width: 4px;"></div>157        <div style="font-size:48px;">Roslyn Flower Show</div>158        <div class="spacer"></div>159        <!-- mic -->160        <svg class="icon-white" viewBox="0 0 48 48">161          <rect x="18" y="14" width="12" height="18" rx="6"/>162          <path d="M12 24c0 6 5 10 12 10s12-4 12-10M24 34v8" />163        </svg>164      </div>165 166      <!-- Note -->167      <div class="row placeholder">168        <div style="font-size:44px;">Write short note</div>169        <div class="spacer"></div>170        <svg class="icon-dark" viewBox="0 0 48 48">171          <rect x="18" y="14" width="12" height="18" rx="6"/>172          <path d="M12 24c0 6 5 10 12 10s12-4 12-10M24 34v8" />173        </svg>174      </div>175 176      <!-- Date -->177      <div class="row">178        <svg class="icon-dark" viewBox="0 0 48 48">179          <rect x="8" y="12" width="32" height="26" rx="2"/>180          <path d="M16 8v12M32 8v12M8 20h32" />181        </svg>182        <div>Sat, Oct 14, 2023</div>183        <div class="spacer"></div>184        <!-- close -->185        <svg class="icon-dark" viewBox="0 0 48 48">186          <path d="M14 14l20 20M34 14l-20 20"/>187        </svg>188      </div>189 190      <!-- Time -->191      <div class="row">192        <svg class="icon-dark" viewBox="0 0 48 48">193          <circle cx="24" cy="24" r="18"/>194          <path d="M24 14v10l8 6"/>195        </svg>196        <div>06:15 PM</div>197        <div class="spacer"></div>198        <div class="link">+Add more time</div>199        <svg class="icon-dark" viewBox="0 0 48 48">200          <path d="M14 14l20 20M34 14l-20 20"/>201        </svg>202      </div>203 204      <!-- Remind me before -->205      <div class="row">206        <svg class="icon-dark" viewBox="0 0 48 48">207          <circle cx="24" cy="24" r="18"/>208          <path d="M24 14v8M24 24l8 4"/>209        </svg>210        <div>Remind me before</div>211        <div class="spacer"></div>212        <svg class="chev" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" fill="none" stroke="#D8D8D8" stroke-width="2"/></svg>213      </div>214 215      <!-- Repeat -->216      <div class="row">217        <svg class="icon-dark" viewBox="0 0 48 48">218          <path d="M10 16h20l-4-4M38 32H18l4 4" />219          <path d="M10 16v8M38 32v-8" />220        </svg>221        <div>Repeat: No repeat</div>222        <div class="spacer"></div>223        <svg class="chev" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" fill="none" stroke="#D8D8D8" stroke-width="2"/></svg>224      </div>225    </div>226  </div>227 228  <!-- Banner ad placeholder -->229  <div class="ad-wrap">230    <div class="img-placeholder">[IMG: Banner Ad - "THE GRAND SALE" promotional graphic]</div>231  </div>232 233  <!-- Gesture pill -->234  <div class="pill"></div>235 236</div>237</body>238</html>