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>Task details UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121214; color: #ECECEC;12  }13 14  /* Top status bar */15  .status-bar {16    height: 96px;17    padding: 0 36px;18    display: flex; align-items: center; justify-content: space-between;19    color: #D9D9D9; font-size: 36px;20  }21  .status-right { display: flex; align-items: center; gap: 26px; }22  .status-icon svg { width: 44px; height: 44px; stroke: #D9D9D9; fill: none; }23 24  /* App bar */25  .app-bar {26    display: flex; align-items: center;27    padding: 18px 36px 10px 36px;28  }29  .app-left { display: flex; align-items: center; gap: 28px; }30  .app-left .icon { width: 56px; height: 56px; }31  .app-title {32    font-size: 56px; font-weight: 600; color: #DDE1E6;33  }34  .app-actions { margin-left: auto; }35  .dots {36    width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;37  }38  .dots svg { width: 32px; height: 32px; fill: #D9D9D9; }39 40  /* Content */41  .content { padding: 20px 40px 120px 40px; }42  .task-head { display: flex; align-items: center; gap: 24px; margin-top: 18px; }43  .ring {44    width: 54px; height: 54px; border-radius: 50%; border: 5px solid #4DA3FF;45  }46  .task-title { font-size: 46px; font-weight: 500; color: #F0F3F7; }47  .subtext { margin: 16px 0 34px 78px; font-size: 32px; color: #9CA3AF; }48 49  .list-section { display: flex; flex-direction: column; gap: 38px; }50 51  .row { display: flex; align-items: center; gap: 26px; color: #EAEAEA; }52  .row .label { font-size: 36px; }53  .row .icon {54    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;55  }56  .row .icon svg { width: 48px; height: 48px; stroke: #D9D9D9; fill: none; }57 58  /* Pills */59  .pill {60    display: inline-flex; align-items: center; gap: 16px;61    background: #2A2C33; color: #DDE1E6;62    padding: 20px 26px; border-radius: 18px; font-size: 34px;63  }64  .pill .close {65    width: 34px; height: 34px; border-radius: 50%;66    background: #3A3D44; color: #C9CDD2; font-size: 28px; line-height: 34px; text-align: center;67  }68  .row .right-x {69    margin-left: auto;70    width: 48px; height: 48px; border-radius: 50%;71    background: #2A2C33; color: #AFB4BB; font-size: 36px; display: flex; align-items: center; justify-content: center;72  }73 74  /* Alerts and links */75  .alert { display: flex; align-items: center; gap: 16px; color: #F29BA5; font-size: 36px; }76  .alert .warn { width: 34px; height: 34px; }77  .add-reminder {78    display: flex; align-items: center; gap: 18px; font-size: 36px; color: #8BB0FF; margin-top: -8px;79  }80  .add-reminder .plus {81    width: 36px; height: 36px; border-radius: 8px; color: #B48CFF;82  }83 84  .menu-item { display: flex; align-items: center; gap: 26px; font-size: 36px; color: #EAEAEA; }85  .menu-item .icon svg { stroke: #CBCED4; }86 87  /* Floating action */88  .fab {89    position: absolute; right: 40px; bottom: 140px;90    width: 140px; height: 140px; border-radius: 32px;91    background: #0B56A8; box-shadow: 0 18px 30px rgba(0,0,0,0.5);92    display: flex; align-items: center; justify-content: center;93  }94  .fab svg { width: 64px; height: 64px; stroke: #FFFFFF; fill: none; stroke-width: 6; }95 96  /* Bottom handle */97  .handle {98    position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);99    width: 360px; height: 12px; border-radius: 12px; background: #E6E6E6; opacity: 0.9;100  }101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Status bar -->107  <div class="status-bar">108    <div>1:28</div>109    <div class="status-right">110      <div class="status-icon">111        <!-- Location/network icon -->112        <svg viewBox="0 0 24 24"><path d="M4 9c4-4 12-4 16 0M7 12c3-3 7-3 10 0M10 15c2-2 4-2 6 0M12 19h0"/></svg>113      </div>114      <div class="status-icon">115        <!-- Wi-Fi -->116        <svg viewBox="0 0 24 24"><path d="M2 8c6-6 14-6 20 0M5 11c4-4 10-4 14 0M8 14c3-3 7-3 10 0M12 18l2 2-2-2-2 2 2-2"/></svg>117      </div>118      <div class="status-icon">119        <!-- Battery -->120        <svg viewBox="0 0 28 24"><rect x="2" y="5" width="20" height="14" rx="3" stroke-width="2"></rect><rect x="23" y="9" width="3" height="6" rx="1" stroke-width="2"></rect><rect x="5" y="8" width="12" height="8" rx="2" fill="#D9D9D9" stroke="none"></rect></svg>121      </div>122    </div>123  </div>124 125  <!-- App bar -->126  <div class="app-bar">127    <div class="app-left">128      <div class="icon">129        <!-- Back arrow -->130        <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7" stroke-width="2"/></svg>131      </div>132      <div class="icon">133        <!-- Checkbox icon -->134        <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" stroke-width="2"></rect><path d="M8 12l3 3 5-6" stroke-width="2"/></svg>135      </div>136      <div class="app-title">Task details</div>137    </div>138    <div class="app-actions">139      <div class="dots">140        <!-- Vertical dots -->141        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>142      </div>143    </div>144  </div>145 146  <!-- Content -->147  <div class="content">148    <div class="task-head">149      <div class="ring"></div>150      <div class="task-title">Driving licence</div>151    </div>152    <div class="subtext">Would you like to add more details?</div>153 154    <div class="list-section">155 156      <!-- Select project -->157      <div class="row">158        <div class="icon">159          <!-- Grid icon -->160          <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>161        </div>162        <div class="label">Select project</div>163      </div>164 165      <!-- Date & time -->166      <div class="row">167        <div class="icon">168          <!-- Calendar -->169          <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>170        </div>171        <div class="pill">Sun, Jul 30 <span class="close">×</span></div>172        <div class="pill">9:00 AM <span class="close">×</span></div>173        <div class="right-x">×</div>174      </div>175 176      <!-- Reminder -->177      <div class="row">178        <div class="icon">179          <!-- Bell -->180          <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/><path d="M18 16V11a6 6 0 1 0-12 0v5l-2 2h16l-2-2z"/></svg>181        </div>182        <div class="pill">15 mins before <span class="close">×</span></div>183        <div class="right-x">×</div>184      </div>185 186      <!-- Notifications disabled -->187      <div class="alert">188        <svg class="warn" viewBox="0 0 24 24"><path d="M12 3l10 18H2L12 3z" fill="none" stroke="#F29BA5" stroke-width="2"></path><circle cx="12" cy="16" r="1.5" fill="#F29BA5"></circle><path d="M12 8v5" stroke="#F29BA5" stroke-width="2"></path></svg>189        <div>Notifications are disabled</div>190      </div>191 192      <!-- Add reminder link -->193      <div class="add-reminder">194        <div class="plus">+</div>195        <div>Add reminder</div>196      </div>197 198      <!-- Menu items -->199      <div class="menu-item">200        <div class="icon">201          <!-- Flag/priority -->202          <svg viewBox="0 0 24 24"><path d="M6 21V4h8l-2 3 2 3H6" stroke-width="2"/></svg>203        </div>204        <div>Set priority</div>205      </div>206 207      <div class="menu-item">208        <div class="icon">209          <!-- Checklist -->210          <svg viewBox="0 0 24 24"><path d="M4 6h10M4 12h10M4 18h10"/><path d="M18 5l2 2 3-3M18 11l2 2 3-3M18 17l2 2 3-3"/></svg>211        </div>212        <div>Add checklist</div>213      </div>214 215      <div class="menu-item">216        <div class="icon">217          <!-- Tag -->218          <svg viewBox="0 0 24 24"><path d="M3 12l9 9 9-9-9-9H7a4 4 0 0 0-4 4v5z" stroke-width="2"/><circle cx="8.5" cy="8.5" r="1.8"/></svg>219        </div>220        <div>Assign tags</div>221      </div>222 223      <div class="menu-item">224        <div class="icon">225          <!-- Ellipsis -->226          <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="18" cy="12" r="2"/></svg>227        </div>228        <div>More</div>229      </div>230 231    </div>232  </div>233 234  <!-- Floating Action Button -->235  <div class="fab">236    <svg viewBox="0 0 24 24">237      <path d="M12 4v10M7 9l5 5 5-5" stroke-linecap="round" stroke-linejoin="round"></path>238      <path d="M6 18h12" stroke-linecap="round"></path>239    </svg>240  </div>241 242  <!-- Bottom handle -->243  <div class="handle"></div>244</div>245</body>246</html>