GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Task Details - Add Reminder</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #121212; color: #EDEDED;12  }13 14  /* Top app bar */15  .app-bar {16    position: absolute; left: 0; top: 90px; right: 0;17    padding: 0 40px;18    display: flex; align-items: center;19  }20  .app-bar .title {21    font-size: 56px; font-weight: 600; margin-left: 20px;22  }23  .spacer { flex: 1; }24  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }25  .icon { width: 48px; height: 48px; fill: none; stroke: #EDEDED; stroke-width: 3; }26 27  /* Content area */28  .content {29    position: absolute; left: 0; right: 0; top: 240px;30    padding: 0 40px;31  }32  .task-row {33    display: flex; align-items: center; margin-top: 40px;34  }35  .circle {36    width: 48px; height: 48px; border-radius: 50%; border: 3px solid #6E6E6E; margin-right: 24px;37  }38  .task-input {39    font-size: 52px; color: #DADADA;40  }41  .subtext {42    margin-top: 22px; font-size: 34px; color: #7B7B7B;43  }44 45  .row { display: flex; align-items: center; margin-top: 46px; }46  .row-label { font-size: 38px; color: #CFCFCF; margin-left: 24px; }47 48  .chip {49    display: inline-flex; align-items: center;50    background: #2A2A2A; color: #D7D7D7;51    padding: 22px 28px; border-radius: 28px;52    font-size: 36px; margin-left: 24px;53  }54  .chip .x {55    display: inline-block; margin-left: 18px; color: #9A9A9A; font-size: 36px;56  }57 58  .warning {59    display: flex; align-items: center; margin-top: 46px; color: #CF6679; font-size: 40px;60  }61  .warning svg { margin-right: 18px; }62 63  .add-link {64    margin-top: 36px; font-size: 38px; color: #A6B5FF;65  }66 67  /* Bottom sheet */68  .sheet {69    position: absolute; left: 0; right: 0; bottom: 110px;70    height: 1100px;71    background: #1D1F24; border-top-left-radius: 40px; border-top-right-radius: 40px;72    box-shadow: 0 -10px 30px rgba(0,0,0,0.6);73  }74  .sheet .handle {75    width: 160px; height: 16px; border-radius: 8px; background: #3A3D44;76    margin: 18px auto 0;77  }78  .sheet-content { padding: 40px; }79  .sheet-title { font-size: 54px; font-weight: 600; margin-top: 24px; }80 81  .segmented {82    margin-top: 40px; display: flex; background: #3A3D44; border-radius: 60px; padding: 10px;83  }84  .segment {85    flex: 1; text-align: center; padding: 26px 0; font-size: 40px; color: #CFCFCF;86    border-radius: 50px;87  }88  .segment.active {89    background: #1A1A1A; color: #FFFFFF; box-shadow: inset 0 0 0 2px #4A4A4A;90  }91 92  .picker {93    margin-top: 60px; display: flex; justify-content: space-around; align-items: center;94  }95  .picker-col { width: 280px; text-align: center; color: #777; }96  .picker-col .above, .picker-col .below { font-size: 52px; opacity: 0.45; }97  .picker-col .current {98    font-size: 64px; color: #A7C3FF;99  }100  .picker-col .unit {101    font-size: 40px; color: #A7C3FF; margin-left: 10px;102  }103 104  .summary {105    margin-top: 50px; font-size: 40px;106  }107  .summary .value { color: #A7C3FF; }108 109  .btn {110    margin-top: 50px; width: 760px; height: 120px; border-radius: 60px;111    background: #98B7FF; color: #0D2B68; font-size: 46px; font-weight: 700;112    display: flex; align-items: center; justify-content: center;113  }114 115  /* Bottom home indicator */116  .home-indicator {117    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);118    width: 420px; height: 16px; background: #BDBDBD; border-radius: 8px; opacity: 0.6;119  }120 121  /* Small helper icons */122  .icon-small { width: 44px; height: 44px; fill: none; stroke: #BDBDBD; stroke-width: 3; }123  .grid-icon rect { fill: none; stroke: #BDBDBD; stroke-width: 3; }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- App bar -->130  <div class="app-bar">131    <div class="icon-btn">132      <svg class="icon" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>133    </div>134    <div class="icon-btn">135      <svg class="icon" viewBox="0 0 24 24">136        <rect x="3" y="3" width="18" height="18" rx="3"></rect>137        <path d="M6 12l4 4 8-8" stroke-linecap="round" stroke-linejoin="round"></path>138      </svg>139    </div>140    <div class="title">Task details</div>141    <div class="spacer"></div>142    <div class="icon-btn">143      <svg class="icon" viewBox="0 0 24 24">144        <circle cx="12" cy="5" r="2" fill="#EDEDED" stroke="none"></circle>145        <circle cx="12" cy="12" r="2" fill="#EDEDED" stroke="none"></circle>146        <circle cx="12" cy="19" r="2" fill="#EDEDED" stroke="none"></circle>147      </svg>148    </div>149  </div>150 151  <!-- Content -->152  <div class="content">153    <div class="task-row">154      <div class="circle"></div>155      <div class="task-input">Driving licence</div>156    </div>157    <div class="subtext">Would you like to add more details?</div>158 159    <div class="row">160      <svg class="icon-small grid-icon" viewBox="0 0 24 24">161        <rect x="3" y="3" width="7" height="7"></rect>162        <rect x="14" y="3" width="7" height="7"></rect>163        <rect x="3" y="14" width="7" height="7"></rect>164        <rect x="14" y="14" width="7" height="7"></rect>165      </svg>166      <div class="row-label">Select project</div>167    </div>168 169    <div class="row">170      <svg class="icon-small" viewBox="0 0 24 24">171        <rect x="3" y="4" width="18" height="17" rx="2"></rect>172        <path d="M8 2v4M16 2v4M3 10h18" stroke-linecap="round"></path>173      </svg>174      <div class="chip">Sun, Jul 30 <span class="x">×</span></div>175      <div class="chip">9:00 AM <span class="x">×</span></div>176    </div>177 178    <div class="row">179      <svg class="icon-small" viewBox="0 0 24 24">180        <pat