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: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#0b0b0b; color:#e6e6e6;11  }12 13  /* Status bar */14  .status-bar {15    height:100px;16    padding:0 36px;17    display:flex;18    align-items:center;19    justify-content:space-between;20    color:#cccccc;21    font-size:36px;22    letter-spacing:0.5px;23  }24  .status-right {25    display:flex; gap:22px; align-items:center;26  }27  .app-bar {28    height:120px;29    padding:0 36px;30    display:flex; align-items:center; justify-content:space-between;31  }32  .title-wrap {33    display:flex; align-items:center; gap:26px;34  }35  .screen-title { font-size:64px; font-weight:600; color:#f4f4f4; }36 37  /* Sections */38  .section-label {39    margin:34px 60px 20px;40    font-size:36px; letter-spacing:1.5px; color:#91a3c6;41  }42 43  .card {44    margin:0 60px;45    background:#121212;46    border:1px solid #1f1f1f;47    border-radius:38px;48    padding:44px 44px;49    position:relative;50  }51 52  .field {53    margin-bottom:36px;54  }55  .field-label {56    font-size:40px; color:#bfc6d9;57  }58  .underline {59    height:2px; background:#3a3a3a; margin-top:20px;60  }61 62  .notes-row {63    display:flex; align-items:center; justify-content:space-between;64    margin-top:26px;65  }66 67  .list-card {68    display:flex; align-items:center; gap:28px;69    margin:0 60px;70    background:#121212; border:1px solid #1f1f1f;71    border-radius:30px; padding:36px 40px; position:relative;72  }73  .list-name { font-size:44px; color:#eaeaea; }74  .chev {75    position:absolute; right:36px; top:50%; transform:translateY(-50%);76  }77 78  /* Bottom actions */79  .save-btn {80    position:absolute; left:30px; bottom:260px;81    width:320px; height:120px; border-radius:28px;82    background:#9fb0cc; color:#0b0b0b; display:flex; align-items:center; justify-content:center; gap:22px;83    font-size:44px; font-weight:600;84    box-shadow:0 6px 12px rgba(0,0,0,0.4);85  }86  .fab {87    position:absolute; right:40px; bottom:200px;88    width:170px; height:170px; border-radius:36px;89    background:#e5a5a5; display:flex; align-items:center; justify-content:center;90    box-shadow:0 10px 20px rgba(0,0,0,0.5);91  }92  .nav-handle {93    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);94    width:520px; height:12px; background:#d9d9d9; border-radius:6px; opacity:0.85;95  }96 97  /* Icon helpers */98  .icon { width:48px; height:48px; fill:#e6e6e6; }99  .icon-muted { fill:#b0b0b0; }100  .icon-dark { fill:#0b0b0b; }101  .icon-blue { fill:#9fb0cc; }102  .mic {103    position:absolute; right:38px; top:46px;104    width:54px; height:54px;105  }106  .plus-notes {107    width:48px; height:48px;108  }109</style>110</head>111<body>112<div id="render-target">113 114  <!-- Status Bar -->115  <div class="status-bar">116    <div>12:51</div>117    <div class="status-right">118      <!-- simple indicators -->119      <svg class="icon" viewBox="0 0 24 24">120        <path d="M3 10h18v4H3z"></path>121      </svg>122      <svg class="icon" viewBox="0 0 24 24">123        <path d="M3 12h14v8H3zM19 16h2v4h-2z"></path>124      </svg>125    </div>126  </div>127 128  <!-- App Bar -->129  <div class="app-bar">130    <div class="title-wrap">131      <svg class="icon" viewBox="0 0 24 24">132        <path d="M15 6l-6 6 6 6" stroke="#e6e6e6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>133      </svg>134      <div class="screen-title">New task</div>135    </div>136    <svg class="icon" viewBox="0 0 24 24">137      <path d="M9 12l2 2 4-4" stroke="#e6e6e6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>138    </svg>139  </div>140 141  <!-- TASK section -->142  <div class="section-label">TASK:</div>143  <div class="card">144    <div class="field">145      <div class="field-label">What to do:</div>146      <div class="underline"></div>147    </div>148    <!-- mic icon -->149    <svg class="mic" viewBox="0 0 24 24">150      <path d="M12 3a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-5 8a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6v3h-2v-3a7 7 0 0 1-6-6h2z" fill="#8fb3da"></path>151    </svg>152 153    <div class="notes-row">154      <div class="field-label" style="color:#bfc6d9;">Notes:</div>155      <svg class="plus-notes" viewBox="0 0 24 24">156        <path d="M12 5v14M5 12h14" stroke="#b9b9b9" stroke-width="2" fill="none" stroke-linecap="round"></path>157      </svg>158    </div>159  </div>160 161  <!-- ADD TO LIST -->162  <div class="section-label" style="margin-top:50px;">ADD TO LIST:</div>163 164  <div class="list-card">165    <svg class="icon icon-muted" viewBox="0 0 24 24">166      <path d="M4 6h14M4 12h14M4 18h14" stroke="#bfbfbf" stroke-width="2" fill="none" stroke-linecap="round"></path>167    </svg>168    <div class="list-name">Default</div>169    <svg class="chev icon-muted" width="48" height="48" viewBox="0 0 24 24">170      <path d="M8 10l4 4 4-4" stroke="#bfbfbf" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>171    </svg>172  </div>173 174  <!-- Bottom buttons -->175  <div class="save-btn">176    <svg class="icon-dark" width="48" height="48" viewBox="0 0 24 24">177      <path d="M9 12l2 2 4-4" stroke="#0b0b0b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>178    </svg>179    <div>Save</div>180  </div>181 182  <div class="fab">183    <svg width="96" height="96" viewBox="0 0 24 24">184      <circle cx="12" cy="13" r="6" fill="none" stroke="#0b0b0b" stroke-width="1.8"></circle>185      <path d="M12 10v6M9 13h6" stroke="#0b0b0b" stroke-width="1.8" stroke-linecap="round"></path>186      <path d="M7 5l2-2h6l2 2" stroke="#0b0b0b" stroke-width="1.6" fill="none" stroke-linecap="round"></path>187    </svg>188  </div>189 190  <div class="nav-handle"></div>191 192</div>193</body>194</html>