GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>New Task UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#121212; color:#FFFFFF;11  }12 13  /* Top bars */14  .status-bar {15    position:absolute; top:0; left:0; width:100%; height:120px;16    background:#3A3A3A; display:flex; align-items:center; justify-content:space-between;17    padding:0 40px; box-sizing:border-box; font-size:40px;18  }19  .status-icons { display:flex; align-items:center; gap:30px; }20  .icon { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; }21  .header {22    position:absolute; top:120px; left:0; width:100%; height:120px;23    display:flex; align-items:center; gap:24px; padding:0 32px; box-sizing:border-box;24  }25  .header .title { font-size:60px; font-weight:600; }26 27  /* Content area */28  .content {29    position:absolute; top:240px; left:0; width:100%; bottom:0;30    padding:0 32px 40px; box-sizing:border-box; overflow:hidden;31  }32 33  .label {34    color:#FFC107; font-size:36px; margin:32px 0 12px; letter-spacing:0.3px;35  }36 37  .text-input {38    border:2px solid #FFC107; border-radius:16px; background:#1A1A1A;39    height:110px; display:flex; align-items:center; padding:0 24px;40    font-size:44px; color:#fff;41  }42 43  .section-title {44    margin-top:36px; color:#FFC107; font-size:44px; display:flex; align-items:center; justify-content:space-between;45  }46  .priority-group {47    margin-top:18px; background:#1E1E1E; border-radius:18px; display:flex; overflow:hidden;48    border:1px solid #2B2B2B;49  }50  .priority-btn {51    flex:1; height:120px; display:flex; align-items:center; justify-content:center;52    font-size:44px; color:#DADADA; border-right:1px solid #2B2B2B;53  }54  .priority-btn:last-child { border-right:none; }55 56  /* Rows */57  .row {58    margin-top:26px; height:96px; display:flex; align-items:center; justify-content:space-between;59    color:#EDEDED; font-size:44px;60  }61  .row .left { display:flex; align-items:center; gap:26px; }62  .row .right { display:flex; align-items:center; gap:16px; color:#A7A7A7; }63  .row .pill { color:#BEBEBE; }64 65  /* Notes area */66  .notes-title { margin-top:40px; color:#FFC107; font-size:44px; }67  .notes {68    position:relative; margin-top:16px; background:#1A1A1A; border:1px solid #2B2B2B;69    border-radius:18px; height:480px; padding:28px; box-sizing:border-box; color:#CFCFCF; font-size:44px;70  }71  .fab {72    position:absolute; right:24px; bottom:24px; width:140px; height:140px; border-radius:50%;73    background:#F5B93A; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,0.5);74  }75 76  /* Simple SVG icons styling */77  svg { fill:none; stroke:#FFFFFF; stroke-width:4; }78  .icon-muted svg { stroke:#B8B8B8; }79  .icon-accent svg { stroke:#FFC107; }80 81  /* Divider spacing between grouped sections */82  .spacer { height:6px; }83</style>84</head>85<body>86<div id="render-target">87 88  <!-- Status bar -->89  <div class="status-bar">90    <div>10:17</div>91    <div class="status-icons">92      <!-- Weather temp placeholder -->93      <div style="font-size:36px; color:#EDEDED;">88°</div>94      <!-- Simple location marker -->95      <div class="icon icon-muted">96        <svg viewBox="0 0 24 24">97          <path d="M12 2c-4.4 0-8 3.2-8 7.2 0 5.2 8 12.8 8 12.8s8-7.6 8-12.8C20 5.2 16.4 2 12 2z"></path>98          <circle cx="12" cy="9" r="3"></circle>99        </svg>100      </div>101      <!-- WiFi -->102      <div class="icon icon-muted">103        <svg viewBox="0 0 24 24">104          <path d="M2 8c5-4 15-4 20 0"></path>105          <path d="M5 12c3.5-3 10.5-3 14 0"></path>106          <path d="M8 16c2-2 6-2 8 0"></path>107          <circle cx="12" cy="19" r="1.8" fill="#FFFFFF" stroke="none"></circle>108        </svg>109      </div>110      <!-- Battery -->111      <div class="icon icon-muted">112        <svg viewBox="0 0 24 24">113          <rect x="3" y="6" width="16" height="12" rx="2"></rect>114          <rect x="20" y="10" width="2" height="4"></rect>115          <rect x="5" y="8" width="10" height="8" fill="#FFFFFF" stroke="none"></rect>116        </svg>117      </div>118    </div>119  </div>120 121  <!-- Header -->122  <div class="header">123    <div class="icon">124      <svg viewBox="0 0 24 24">125        <path d="M15 4L7 12l8 8"></path>126      </svg>127    </div>128    <div class="title">New Task</div>129  </div>130 131  <!-- Content -->132  <div class="content">133 134    <div class="label">What needs to be done?</div>135    <div class="text-input">Buy New Balance Hiking shoes</div>136 137    <div class="section-title">138      <div>Priority</div>139      <div class="icon icon-accent">140        <svg viewBox="0 0 24 24"><path d="M6 14l6-6 6 6"></path></svg>141      </div>142    </div>143    <div class="priority-group">144      <div class="priority-btn">Low</div>145      <div class="priority-btn">Medium</div>146      <div class="priority-btn">High</div>147    </div>148 149    <div class="section-title" style="margin-top:40px;">Subtasks</div>150    <div class="row">151      <div class="left">152        <div class="icon icon-muted">153          <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>154        </div>155        <div style="color:#EDEDED;">Add subtask</div>156      </div>157      <div class="right"></div>158    </div>159 160    <div class="section-title" style="margin-top:40px;">Due date</div>161    <div class="row">162      <div class="left">163        <div class="icon icon-muted">164          <svg viewBox="0 0 24 24">165            <rect x="3" y="6" width="18" height="14" rx="2"></rect>166            <path d="M3 10h18M8 3v6M16 3v6"></path>167          </svg>168        </div>169        <div>Sa, Dec 23</div>170      </div>171      <div class="right">172        <div class="icon icon-muted">173          <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"></path></svg>174        </div>175      </div>176    </div>177 178    <div class="row">179      <div class="left">180        <div class="icon icon-muted">181          <svg viewBox="0 0 24 24">182            <circle cx="12" cy="12" r="9"></circle>183            <path d="M12 6v6l4 2"></path>184          </svg>185        </div>186        <div class="pill">Set time</div>187      </div>188      <div class="right"></div>189    </div>190 191    <div class="section-title" style="margin-top:40px;">Reminder</div>192    <div class="row">193      <div class="left">194        <div class="icon icon-muted">195          <svg viewBox="0 0 24 24">196            <path d="M8 8c0-2.2 1.8-4 4-4s4 1.8 4 4"></path>197            <path d="M6 10v4l-2 2h16l-2-2v-4"></path>198            <path d="M10 18c.6 1.2 3.4 1.2 4 0"></path>199          </svg>200        </div>201        <div>Set reminder</div>202      </div>203      <div class="right"></div>204    </div>205 206    <div class="section-title" style="margin-top:40px;">Repeat</div>207    <div class="row">208      <div class="left">209        <div class="icon icon-muted">210          <svg viewBox="0 0 24 24">211            <path d="M3 7h10l-2-2M21 17H11l2 2"></path>212            <path d="M13 5a6 6 0 1 1-6 6"></path>213          </svg>214        </div>215        <div>No repetition</div>216      </div>217      <div class="right"></div>218    </div>219 220    <div class="section-title" style="margin-top:40px;">List</div>221    <div class="row">222      <div class="left">223        <div class="icon icon-muted">224          <svg viewBox="0 0 24 24">225            <path d="M5 6h14M5 12h14M5 18h14"></path>226          </svg>227        </div>228        <div>Shopping</div>229      </div>230      <div class="right">231        <div class="icon icon-muted">232          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>233        </div>234      </div>235    </div>236 237    <div class="notes-title">Notes</div>238    <div class="notes">239      Add some notes!240      <div class="fab">241        <svg viewBox="0 0 24 24" style="stroke:#222; stroke-width:5;">242          <path d="M5 13l4 4 10-10"></path>243        </svg>244      </div>245    </div>246 247  </div>248</div>249</body>250</html>