GD-ML/AndroidCode
13.4k
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>Tasks - Add Reminder UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #101214;12 }13 14 /* Status bar */15 .statusbar {16 position: absolute; top: 0; left: 0; width: 100%; height: 110px;17 background: #1f4d86; color: #ffffff; display: flex; align-items: center; padding: 0 30px;18 box-sizing: border-box;19 }20 .status-left { display: flex; align-items: center; gap: 18px; }21 .status-time { font-size: 40px; font-weight: 600; letter-spacing: 0.5px; }22 .status-text { font-size: 32px; opacity: 0.9; }23 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }24 .status-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 3; opacity: 0.95; }25 26 /* App bar */27 .appbar {28 position: absolute; top: 110px; left: 0; width: 100%; height: 160px;29 background: #1f4d86; color: #ffffff; display: flex; align-items: center; box-sizing: border-box;30 padding: 0 30px;31 }32 .appbar .title { font-size: 56px; margin-left: 26px; font-weight: 600; }33 .app-actions { margin-left: auto; display: flex; align-items: center; gap: 42px; }34 .app-icon svg { width: 64px; height: 64px; stroke: #cfe0ff; fill: none; stroke-width: 4; opacity: 0.95; }35 36 /* Notification banner */37 .notif {38 position: absolute; top: 270px; left: 0; width: 100%; height: 110px;39 background: #1a1a1a; display: flex; align-items: center; padding: 0 30px; box-sizing: border-box;40 color: #e74c3c; gap: 24px;41 }42 .notif .enable-btn {43 margin-left: auto; background: #2e5fa8; color: #fff; border-radius: 12px; padding: 18px 28px;44 font-size: 36px; box-shadow: 0 2px 0 rgba(0,0,0,0.35);45 }46 .notif-text { font-size: 40px; }47 .notif-icon svg { width: 48px; height: 48px; stroke: #e74c3c; fill: none; stroke-width: 4; }48 49 /* Reminder card */50 .card {51 position: absolute; left: 30px; right: 30px; top: 520px;52 background: #3f3f3f; border-radius: 8px; box-shadow: 0 18px 38px rgba(0,0,0,0.6);53 overflow: hidden;54 }55 .card-header {56 height: 120px; background: #5fa6f6; display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;57 color: #ffffff;58 }59 .card-header .title { font-size: 48px; margin-left: 18px; }60 .save-btn {61 margin-left: auto; background: #ffffff; color: #3173d8; padding: 18px 30px; border-radius: 12px;62 font-weight: 700; font-size: 36px; box-shadow: 0 2px 0 rgba(0,0,0,0.2);63 }64 .card-header .close-icon svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 6; }65 66 .row { height: 130px; display: flex; align-items: center; box-sizing: border-box; padding: 0 24px; color: #f7f7f7; }67 .row + .row { border-top: 1px solid #585858; }68 .row .licon { width: 80px; display: flex; justify-content: center; align-items: center; }69 .row .licon svg { width: 56px; height: 56px; stroke: #d7d7d7; fill: none; stroke-width: 4; opacity: 0.95; }70 .row .label { font-size: 46px; }71 .row .value { font-size: 46px; }72 .row .spacer { flex: 1; }73 .row .action { width: 80px; display: flex; justify-content: center; align-items: center; }74 .row .action svg { width: 44px; height: 44px; stroke: #bcbcbc; fill: none; stroke-width: 5; }75 76 /* Bottom ad banner */77 .ad-banner {78 position: absolute; left: 30px; right: 30px; bottom: 160px;79 height: 160px; background: #eeeeee; border: 1px solid #cfcfcf; border-radius: 12px;80 display: flex; align-items: center; padding: 0 24px; box-sizing: border-box; gap: 24px;81 }82 .ad-img {83 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 8px;84 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center; padding: 6px;85 }86 .ad-text { font-size: 40px; color: #333; }87 .ad-btn {88 margin-left: auto; background: #000000; color: #ffffff; border-radius: 30px; padding: 22px 40px; font-size: 40px; font-weight: 700;89 }90 91 /* Gesture pill */92 .gesture-pill {93 position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%);94 width: 220px; height: 16px; border-radius: 10px; background: #d9d9d9; opacity: 0.9;95 }96</style>97</head>98<body>99<div id="render-target">100 101 <!-- Status bar -->102 <div class="statusbar">103 <div class="status-left">104 <div class="status-time">11:30</div>105 <div class="status-text">84°</div>106 <!-- Simple triangle to hint Play icon -->107 <div class="status-icon">108 <svg viewBox="0 0 24 24"><path d="M6 4 L20 12 L6 20 Z" fill="#fff" stroke="none"/></svg>109 </div>110 <!-- Cloud icon -->111 <div class="status-icon">112 <svg viewBox="0 0 24 24">113 <path d="M7 15h10a4 4 0 0 0 0-8c-1.2 0-2.3.5-3.1 1.3A5 5 0 0 0 6 9a4 4 0 0 0 1 6z" fill="none" stroke="#fff" stroke-width="2"/>114 </svg>115 </div>116 </div>117 <div class="status-right">118 <!-- WiFi -->119 <div class="status-icon">120 <svg viewBox="0 0 24 24">121 <path d="M2 9c5-4 15-4 20 0" />122 <path d="M5 12c3-3 11-3 14 0" />123 <path d="M8 15c2-2 6-2 8 0" />124 <circle cx="12" cy="18" r="1.5" fill="#fff" stroke="none"/>125 </svg>126 </div>127 <!-- Radio/signal -->128 <div class="status-icon">129 <svg viewBox="0 0 24 24">130 <path d="M4 20h3m2-4h3m2-4h3m2-4h3" />131 </svg>132 </div>133 <!-- Battery -->134 <div class="status-icon">135 <svg viewBox="0 0 28 24">136 <rect x="2" y="6" width="22" height="12" rx="2" />137 <rect x="24" y="10" width="3" height="4" />138 <rect x="4" y="8" width="14" height="8" fill="#fff" stroke="none"/>139 </svg>140 </div>141 </div>142 </div>143 144 <!-- App bar -->145 <div class="appbar">146 <!-- Hamburger -->147 <div class="app-icon">148 <svg viewBox="0 0 24 24">149 <path d="M3 6h18M3 12h18M3 18h18" />150 </svg>151 </div>152 <div class="title">Tasks</div>153 <div class="app-actions">154 <!-- Plus in circle -->155 <div class="app-icon">156 <svg viewBox="0 0 24 24">157 <circle cx="12" cy="12" r="9" />158 <path d="M12 7v10M7 12h10" />159 </svg>160 </div>161 <!-- Check in circle -->162 <div class="app-icon">163 <svg viewBox="0 0 24 24">164 <circle cx="12" cy="12" r="9" />165 <path d="M7 12l3 3 6-6" />166 </svg>167 </div>168 <!-- Search -->169 <div class="app-icon">170 <svg viewBox="0 0 24 24">171 <circle cx="10" cy="10" r="6" />172 <path d="M15 15l6 6" />173 </svg>174 </div>175 </div>176 </div>177 178 <!-- Notification prompt -->179 <div class="notif">180 <div class="notif-icon">181 <svg viewBox="0 0 24 24">182 <circle cx="12" cy="12" r="10"/>183 <path d="M12 7v6M12 16v1" />184 </svg>185 </div>186 <div class="notif-text">Please allow app to send you notification</div>187 <div class="enable-btn">Enable</div>188 </div>189 190 <!-- Add Reminder card -->191 <div class="card">192 <div class="card-header">193 <div class="close-icon">194 <svg viewBox="0 0 24 24"><path d="M4 4l16 16M20 4L4 20"/></svg>195 </div>196 <div class="title">Add Reminder</div>197 <div class="save-btn">SAVE</div>198 </div>199 200 <!-- Rows -->201 <div class="row">202 <div class="licon">203 <!-- Text bubble icon -->204 <svg viewBox="0 0 24 24">205 <path d="M4 4h16v12H8l-4 4z" />206 </svg>207 </div>208 <div class="label">Remind me to..</div>209 <div class="spacer"></div>210 <div class="action">211 <!-- Mic -->212 <svg viewBox="0 0 24 24">213 <rect x="9" y="5" width="6" height="8" rx="3" />214 <path d="M6 11a6 6 0 0 0 12 0M12 17v3M9 20h6" />215 </svg>216 </div>217 </div>218 219 <div class="row">220 <div class="licon">221 <!-- Note icon -->222 <svg viewBox="0 0 24 24">223 <rect x="4" y="4" width="16" height="16" rx="2" />224 <path d="M8 9h8M8 13h8M8 17h6" />225 </svg>226 </div>227 <div class="label">Write short note</div>228 <div class="spacer"></div>229 <div class="action">230 <!-- Mic -->231 <svg viewBox="0 0 24 24">232 <rect x="9" y="5" width="6" height="8" rx="3" />233 <path d="M6 11a6 6 0 0 0 12 0M12 17v3M9 20h6" />234 </svg>235 </div>236 </div>237 238 <div class="row">239 <div class="licon">240 <!-- Calendar -->241 <svg viewBox="0 0 24 24">242 <rect x="3" y="5" width="18" height="16" rx="2" />243 <path d="M3 9h18M7 3v4M17 3v4" />244 </svg>245 </div>246 <div class="value">Tue, Sep 26, 2023</div>247 <div class="spacer"></div>248 <div class="action">249 <!-- X -->250 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>251 </div>252 </div>253 254 <div class="row">255 <div class="licon">256 <!-- Alarm/time -->257 <svg viewBox="0 0 24 24">258 <circle cx="12" cy="13" r="7" />259 <path d="M12 13V9M12 13l4 3" />260 <path d="M6 4l2 2M18 4l-2 2" />261 </svg>262 </div>263 <div class="value">11:39 PM</div>264 <div class="spacer"></div>265 <div class="action">266 <!-- X -->267 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>268 </div>269 </div>270 271 <div class="row">272 <div class="licon">273 <!-- Reminder before (clock + arrow) -->274 <svg viewBox="0 0 24 24">275 <circle cx="12" cy="12" r="8" />276 <path d="M12 12V8M12 12l4 2" />277 <path d="M4 12a8 8 0 0 1 8-8" />278 </svg>279 </div>280 <div class="label">Remind me before</div>281 <div class="spacer"></div>282 <div class="action">283 <!-- Chevron right -->284 <svg viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>285 </div>286 </div>287 288 <div class="row">289 <div class="licon">290 <!-- Repeat/refresh -->291 <svg viewBox="0 0 24 24">292 <path d="M7 6h7l-2-2M17 18H10l2 2" />293 <path d="M6 10a6 6 0 0 1 10-3M18 14a6 6 0 0 1-10 3" />294 </svg>295 </div>296 <div class="label">Repeat every 1 hour</div>297 <div class="spacer"></div>298 <div class="action">299 <!-- X -->300 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>301 </div>302 </div>303 </div>304 305 <!-- Bottom ad -->306 <div class="ad-banner">307 <div class="ad-img">[IMG: Ad Avatar]</div>308 <div class="ad-text">Start chatting now!</div>309 <div class="ad-btn">OPEN</div>310 </div>311 312 <!-- Gesture pill -->313 <div class="gesture-pill"></div>314</div>315</body>316</html>