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 - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; border-radius: 34px; box-shadow: 0 12px 40px rgba(0,0,0,0.4);12    color: #E6E6E6;13  }14  .status-bar {15    height: 110px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between;16    color: #EEEEEE; font-size: 38px;17  }18  .status-icons { display: flex; align-items: center; gap: 26px; opacity: 0.9; }19  .app-bar {20    padding: 12px 32px 24px 32px; display: flex; align-items: center; gap: 28px; color: #DADADA;21  }22  .app-title { font-size: 58px; font-weight: 600; letter-spacing: 0.2px; flex: 1; }23  .icon-btn { width: 72px; height: 72px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }24  .screen-content { padding: 16px 40px; }25  .row { display: flex; align-items: center; gap: 28px; margin: 24px 0; }26  .circle-check {27    width: 54px; height: 54px; border-radius: 27px; border: 3px solid #6FA3FF; box-sizing: border-box;28  }29  .task-input { font-size: 52px; font-weight: 600; letter-spacing: 0.2px; }30  .subtext { color: #8A8A8A; font-size: 36px; margin: 18px 0 30px 82px; }31  .label-row { display: flex; align-items: center; gap: 26px; margin: 26px 0; color: #CFCFCF; }32  .left-icon {33    width: 64px; height: 64px; border-radius: 14px; background: #2A2A2A; display: flex; align-items: center; justify-content: center;34  }35  .chip { background: #2A2A2A; color: #CFCFCF; padding: 20px 28px; border-radius: 26px; font-size: 36px; }36  .chip-group { display: flex; gap: 24px; }37  .kebab { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }38  .warning { color: #CF6679; font-size: 38px; display: flex; align-items: center; gap: 22px; margin-left: 88px; margin-top: 14px; }39  .add-reminder { margin-left: 88px; margin-top: 30px; color: #8AB4F8; font-size: 40px; display: flex; align-items: center; gap: 18px; }40  /* Bottom sheet */41  .sheet {42    position: absolute; left: 0; right: 0; bottom: 0; height: 1120px; background: #1A1A1D;43    border-top-left-radius: 36px; border-top-right-radius: 36px; box-shadow: 0 -12px 28px rgba(0,0,0,0.6);44    padding: 32px 40px;45  }46  .sheet-handle {47    width: 200px; height: 12px; background: #3A3A3F; border-radius: 6px; margin: 6px auto 30px;48  }49  .sheet-title { font-size: 54px; font-weight: 600; margin-bottom: 28px; }50  .segmented {51    display: flex; gap: 0; background: #3A3A40; border-radius: 40px; padding: 10px; margin-bottom: 42px;52  }53  .seg-btn {54    flex: 1; text-align: center; padding: 26px 0; border-radius: 34px; font-size: 40px; color: #DADADA;55  }56  .seg-btn.active { background: #232327; box-shadow: inset 0 0 0 3px #4A4A50; }57  .picker {58    display: flex; justify-content: space-between; margin: 16px 40px 20px 40px; align-items: center;59  }60  .picker-col { width: 240px; text-align: center; }61  .picker-num { font-size: 44px; color: #8A8A90; }62  .picker-current { font-size: 56px; color: #8AB4F8; font-weight: 600; margin: 10px 0; }63  .picker-label { color: #8AB4F8; font-size: 40px; margin-top: 6px; }64  .sheet-info { font-size: 40px; color: #CFCFCF; margin: 30px 0 24px; }65  .sheet-info .val { color: #8AB4F8; }66  .primary-btn {67    width: 75%; margin: 0 auto; text-align: center; background: #A8C7FF; color: #0B2A67;68    font-size: 46px; font-weight: 700; padding: 28px 0; border-radius: 50px;69  }70  /* Simple close icons next to chips */71  .close-x {72    width: 44px; height: 44px; border-radius: 22px; background: #3A3A3A; display: inline-flex; align-items: center; justify-content: center; margin-left: 16px;73  }74  .pill-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }75</style>76</head>77<body>78<div id="render-target">79  <div class="status-bar">80    <div>1:35</div>81    <div class="status-icons">82      <span>SN</span>83      <span>N</span>84      <span>29°</span>85      <span>•</span>86      <span>◒</span>87    </div>88  </div>89 90  <div class="app-bar">91    <div class="icon-btn">92      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">93        <path d="M15 6l-6 6 6 6" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>94      </svg>95    </div>96    <div class="icon-btn">97      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">98        <rect x="5" y="5" width="14" height="14" rx="2" stroke="#DADADA" stroke-width="2"/>99        <path d="M8 12h8" stroke="#DADADA" stroke-width="2"/>100      </svg>101    </div>102    <div class="app-title">Task details</div>103    <div class="kebab">104      <svg width="44" height="44" viewBox="0 0 24 24" fill="#DADADA">105        <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>106      </svg>107    </div>108  </div>109 110  <div class="screen-content">111    <div class="row">112      <div class="circle-check"></div>113      <div class="task-input">Driving licence</div>114    </div>115 116    <div class="subtext">Would you like to add more details?</div>117 118    <div class="label-row">119      <div class="left-icon">120        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">121          <rect x="3" y="3" width="7" height="7" stroke="#BDBDBD" stroke-width="2"/>122          <rect x="14" y="3" width="7" height="7" stroke="#BDBDBD" stroke-width="2"/>123          <rect x="3" y="14" width="7" height="7" stroke="#BDBDBD" stroke-width="2"/>124          <rect x="14" y="14" width="7" height="7" stroke="#BDBDBD" stroke-width="2"/>125        </svg>126      </div>127      <div style="font-size:38px;">Select project</div>128    </div>129 130    <div class="label-row">131      <div class="left-icon">132        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">133          <rect x="3" y="5" width="18" height="16" rx="2" stroke="#BDBDBD" stroke-width="2"/>134          <path d="M3 9h18" stroke="#BDBDBD" stroke-width="2"/>135          <path d="M7 3v4M17 3v4" stroke="#BDBDBD" stroke-width="2"/>136        </svg>137      </div>138      <div class="pill-row">139        <div class="chip">Sun, Jul 30 <span class="close-x"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/></svg></span></div>140        <div class="chip">9:00 AM <span class="close-x"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/></svg></span></div>141      </div>142      <div class="kebab">143        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">144          <path d="M6 6l12 12M18 6L6 18" stroke="#6F6F6F" stroke-width="2" stroke-linecap="round"/>145        </svg>146      </div>147    </div>148 149    <div class="label-row">150      <div class="left-icon">151        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">152          <path d="M12 3v10" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/>153          <path d="M6 10a6 6 0 0012 0" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/>154        </svg>155      </div>156      <div class="pill-row">157        <div class="chip">1 hour before</div>158      </div>159      <div class="kebab">160        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">161          <path d="M6 6l12 12M18 6L6 18" stroke="#6F6F6F" stroke-width="2" stroke-linecap="round"/>162        </svg>163      </div>164    </div>165 166    <div class="warning">167      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">168        <path d="M12 4l9 16H3l9-16z" stroke="#CF6679" stroke-width="2"/>169        <path d="M12 10v4" stroke="#CF6679" stroke-width="2" stroke-linecap="round"/>170        <circle cx="12" cy="17.5" r="1.5" fill="#CF6679"/>171      </svg>172      <span>Notifications are disabled</span>173    </div>174 175    <div class="add-reminder">176      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">177        <path d="M12 5v14M5 12h14" stroke="#8AB4F8" stroke-width="2" stroke-linecap="round"/>178      </svg>179      <span>Add reminder</span>180    </div>181  </div>182 183  <!-- Bottom sheet -->184  <div class="sheet">185    <div class="sheet-handle"></div>186    <div class="sheet-title">Add reminder</div>187 188    <div class="segmented">189      <div class="seg-btn active">Before</div>190      <div class="seg-btn">On the day</div>191    </div>192 193    <div class="picker">194      <div class="picker-col">195        <div class="picker-num">00</div>196        <div class="picker-current">0</div>197        <div class="picker-num">1</div>198        <div class="picker-label">D</div>199      </div>200      <div class="picker-col">201        <div class="picker-num">00</div>202        <div class="picker-current">01</div>203        <div class="picker-num">02</div>204        <div class="picker-label">H</div>205      </div>206      <div class="picker-col">207        <div class="picker-num">55</div>208        <div class="picker-current">00</div>209        <div class="picker-num">05</div>210        <div class="picker-label">M</div>211      </div>212    </div>213 214    <div class="sheet-info">Reminder <span class="val">1 hour before</span></div>215 216    <div class="primary-btn">Done</div>217  </div>218</div>219</body>220</html>