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>Task Editor UI</title>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: linear-gradient(#0b3d58 0%, #0c425f 30%, #0a3b55 100%);12 color: #ffffff;13 }14 15 /* Status bar */16 .statusbar {17 position: absolute; top: 0; left: 0; width: 100%; height: 90px;18 padding: 20px 30px; box-sizing: border-box;19 color: #e8f4fb; font-size: 32px; letter-spacing: 0.5px;20 display: flex; align-items: center; justify-content: space-between;21 }22 .status-left { display: flex; align-items: center; gap: 20px; }23 .status-right { display: flex; align-items: center; gap: 22px; }24 .status-dot { width: 10px; height: 10px; background: #e8f4fb; border-radius: 50%; opacity: 0.9; }25 .status-icon svg { width: 36px; height: 36px; }26 27 /* Top app bar */28 .appbar {29 position: absolute; top: 90px; left: 0; width: 100%; height: 120px;30 background: linear-gradient(#116a93, #0e5e86);31 box-sizing: border-box; padding: 20px 30px;32 display: flex; align-items: center; justify-content: space-between;33 }34 .appbar-left, .appbar-right { display: flex; align-items: center; gap: 30px; }35 .icon-btn svg { width: 60px; height: 60px; fill: none; stroke: #e8f4fb; stroke-width: 5; }36 37 /* Content area */38 .content {39 position: absolute; top: 210px; left: 0; width: 100%;40 padding: 0 50px 120px 50px; box-sizing: border-box;41 }42 .section-label {43 color: #8fc0d8; font-weight: 700; font-size: 38px; margin: 30px 0 12px 0;44 }45 .input-row, .row-line {46 display: flex; align-items: center; justify-content: space-between;47 }48 .input-row .text {49 font-size: 48px; line-height: 64px; font-weight: 500;50 }51 .underline {52 border-bottom: 2px solid rgba(255,255,255,0.4);53 margin-top: 10px;54 }55 .field {56 margin-bottom: 38px;57 }58 .subtext {59 color: #b8d5e4; font-size: 30px; line-height: 42px;60 }61 .link { color: #9fd3eb; text-decoration: underline; font-weight: 600; }62 .small-icon svg { width: 62px; height: 62px; stroke: #d4ecf7; stroke-width: 5; fill: none; }63 .tiny-icon svg { width: 54px; height: 54px; stroke: #d4ecf7; stroke-width: 5; fill: none; }64 65 .checkbox {66 display: flex; align-items: center; gap: 22px; margin: 20px 0 40px;67 font-size: 38px; color: #e5f1f8;68 }69 .checkbox-box {70 width: 54px; height: 54px; border: 4px solid #cfe6f2; border-radius: 8px;71 }72 73 .row-option {74 display: flex; align-items: center; justify-content: space-between;75 margin: 26px 0; font-size: 42px;76 }77 .chevron svg { width: 48px; height: 48px; stroke: #d4ecf7; stroke-width: 5; fill: none; }78 79 /* Right-side utility icons for fields */80 .field-icons { display: flex; align-items: center; gap: 26px; }81 82 /* Floating action button */83 .fab {84 position: absolute; right: 60px; bottom: 280px;85 width: 132px; height: 132px; background: #ffffff; border-radius: 50%;86 box-shadow: 0 8px 22px rgba(0,0,0,0.3);87 display: flex; align-items: center; justify-content: center;88 }89 .fab svg { width: 72px; height: 72px; stroke: #207fb0; stroke-width: 8; fill: none; }90 91 /* Bottom handle area */92 .bottom-bar {93 position: absolute; bottom: 0; left: 0; width: 100%; height: 140px;94 background: linear-gradient(#1776a4, #15739f);95 }96 .gesture-area {97 position: absolute; bottom: 10px; left: 0; width: 100%; height: 90px; background: #0b0b0b;98 display: flex; align-items: center; justify-content: center;99 }100 .gesture-pill {101 width: 220px; height: 10px; background: #e9e9e9; border-radius: 8px;102 }103</style>104</head>105<body>106<div id="render-target">107 108 <!-- Status bar -->109 <div class="statusbar">110 <div class="status-left">111 <div>9:26</div>112 <div class="status-icon">113 <!-- bell -->114 <svg viewBox="0 0 24 24">115 <path d="M12 3 C8 3 8 7 8 9 V14 L5 16 H19 L16 14 V9 C16 7 16 3 12 3 Z"></path>116 </svg>117 </div>118 <div class="status-icon">119 <!-- play store triangle -->120 <svg viewBox="0 0 24 24">121 <polygon points="4,3 20,12 4,21" fill="#e8f4fb"></polygon>122 </svg>123 </div>124 <div>88°</div>125 <div class="status-dot"></div>126 </div>127 <div class="status-right">128 <div class="status-icon">129 <!-- wifi -->130 <svg viewBox="0 0 24 24">131 <path d="M2 8 C8 4 16 4 22 8"></path>132 <path d="M5 12 C10 9 14 9 19 12"></path>133 <path d="M9 16 C12 14 12 14 15 16"></path>134 </svg>135 </div>136 <div class="status-icon">137 <!-- battery -->138 <svg viewBox="0 0 28 24">139 <rect x="2" y="6" width="22" height="12" stroke="#e8f4fb" fill="none"></rect>140 <rect x="24" y="9" width="3" height="6" fill="#e8f4fb"></rect>141 <rect x="4" y="8" width="16" height="8" fill="#e8f4fb"></rect>142 </svg>143 </div>144 </div>145 </div>146 147 <!-- App bar -->148 <div class="appbar">149 <div class="appbar-left">150 <div class="icon-btn">151 <!-- back arrow -->152 <svg viewBox="0 0 72 72">153 <polyline points="40,18 22,36 40,54"></polyline>154 </svg>155 </div>156 </div>157 <div class="appbar-right">158 <div class="icon-btn">159 <!-- share -->160 <svg viewBox="0 0 72 72">161 <circle cx="18" cy="36" r="7"></circle>162 <circle cx="54" cy="20" r="7"></circle>163 <circle cx="54" cy="52" r="7"></circle>164 <path d="M25 33 L47 23"></path>165 <path d="M25 39 L47 49"></path>166 </svg>167 </div>168 <div class="icon-btn">169 <!-- trash -->170 <svg viewBox="0 0 72 72">171 <rect x="18" y="24" width="36" height="36"></rect>172 <rect x="26" y="16" width="20" height="8"></rect>173 </svg>174 </div>175 </div>176 </div>177 178 <!-- Content -->179 <div class="content">180 <div class="section-label">What is to be done?</div>181 182 <div class="field">183 <div class="input-row">184 <div class="text">Buying New Balance Hiking shoes</div>185 <div class="small-icon">186 <!-- microphone -->187 <svg viewBox="0 0 72 72">188 <rect x="28" y="16" width="16" height="28" rx="8" ry="8"></rect>189 <path d="M18 34 C18 46 28 52 36 52 C44 52 54 46 54 34"></path>190 <path d="M36 52 V60"></path>191 <path d="M28 60 H44"></path>192 </svg>193 </div>194 </div>195 <div class="underline"></div>196 </div>197 198 <div class="checkbox">199 <div class="checkbox-box"></div>200 <div>Task finished?</div>201 </div>202 203 <div class="section-label">Due date</div>204 205 <div class="field">206 <div class="row-line">207 <div class="text" style="font-size:44px;">Tomorrow</div>208 <div class="field-icons">209 <div class="small-icon">210 <!-- calendar -->211 <svg viewBox="0 0 72 72">212 <rect x="14" y="24" width="44" height="34"></rect>213 <path d="M14 32 H58"></path>214 <path d="M24 18 V28"></path>215 <path d="M48 18 V28"></path>216 </svg>217 </div>218 <div class="tiny-icon">219 <!-- close -->220 <svg viewBox="0 0 60 60">221 <path d="M18 18 L42 42"></path>222 <path d="M42 18 L18 42"></path>223 </svg>224 </div>225 </div>226 </div>227 <div class="underline"></div>228 </div>229 230 <div class="field">231 <div class="row-line">232 <div class="text" style="font-size:44px;">2:00 PM</div>233 <div class="field-icons">234 <div class="small-icon">235 <!-- clock -->236 <svg viewBox="0 0 72 72">237 <circle cx="36" cy="36" r="22"></circle>238 <path d="M36 20 V36"></path>239 <path d="M36 36 L48 40"></path>240 </svg>241 </div>242 <div class="tiny-icon">243 <!-- close -->244 <svg viewBox="0 0 60 60">245 <path d="M18 18 L42 42"></path>246 <path d="M42 18 L18 42"></path>247 </svg>248 </div>249 </div>250 </div>251 <div class="underline"></div>252 </div>253 254 <div class="field" style="margin-top:12px;">255 <div class="link" style="font-size:36px;">Notifications</div>256 <div class="subtext" style="margin-top:8px;">257 Day summary on the same day at 8:00 AM.<br>258 Individual notification on time.259 </div>260 </div>261 262 <div class="section-label" style="margin-top:60px;">Repeat</div>263 <div class="row-option">264 <div>No repeat</div>265 <div class="chevron">266 <!-- chevron down -->267 <svg viewBox="0 0 48 48">268 <polyline points="10,18 24,30 38,18"></polyline>269 </svg>270 </div>271 </div>272 273 <div class="section-label" style="margin-top:60px;">Task List</div>274 <div class="row-option">275 <div>Default</div>276 <div style="display:flex; align-items:center; gap:28px;">277 <div class="chevron">278 <svg viewBox="0 0 48 48">279 <polyline points="10,18 24,30 38,18"></polyline>280 </svg>281 </div>282 <div class="small-icon">283 <!-- list + plus -->284 <svg viewBox="0 0 72 72">285 <path d="M18 22 H54"></path>286 <path d="M18 34 H54"></path>287 <path d="M18 46 H54"></path>288 <path d="M56 20 V30"></path>289 <path d="M51 25 H61"></path>290 </svg>291 </div>292 </div>293 </div>294 </div>295 296 <!-- Floating action button -->297 <div class="fab">298 <svg viewBox="0 0 72 72">299 <polyline points="18,38 30,50 54,26"></polyline>300 </svg>301 </div>302 303 <!-- Bottom area -->304 <div class="bottom-bar"></div>305 <div class="gesture-area">306 <div class="gesture-pill"></div>307 </div>308 309</div>310</body>311</html>