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 Editor Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, "Segoe UI", Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: linear-gradient(#0e5a79, #0a3e58);12    color: #e8f4fb;13  }14 15  /* Top bars */16  .status-bar {17    height: 110px;18    padding: 0 36px;19    display: flex;20    align-items: center;21    font-size: 36px;22    letter-spacing: 0.5px;23    opacity: 0.9;24  }25  .status-bar .right {26    margin-left: auto; display: flex; gap: 22px; align-items: center;27  }28  .icon {29    width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;30  }31 32  .appbar {33    height: 150px;34    padding: 0 20px 0 8px;35    display: flex; align-items: center;36    background: linear-gradient(to bottom, rgba(255,255,255,0.14), rgba(255,255,255,0.04));37    box-shadow: inset 0 -1px rgba(255,255,255,0.12);38  }39  .spacer { flex: 1; }40  .appbar .action { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; }41 42  /* Content */43  .content { padding: 24px 48px 0 48px; }44  .section-title {45    color: #9ec4d8; font-weight: 700; font-size: 44px; margin: 30px 0 10px;46  }47 48  .input-row {49    display: flex; align-items: flex-end; gap: 18px;50  }51  .big-input {52    flex: 1;53    font-size: 58px; line-height: 1.3; font-weight: 400;54    padding: 16px 0 10px;55    border-bottom: 2px solid rgba(255,255,255,0.35);56  }57  .mic-btn { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; }58 59  .checkbox-row { display: flex; align-items: center; gap: 22px; margin-top: 28px; }60  .checkbox {61    width: 60px; height: 60px; border: 3px solid rgba(255,255,255,0.9); border-radius: 8px;62  }63  .checkbox-row span { font-size: 44px; }64 65  /* Due date rows */66  .field-row {67    position: relative;68    display: flex; align-items: center;69    gap: 20px;70    padding: 26px 0 18px 0;71    border-bottom: 2px solid rgba(255,255,255,0.35);72  }73  .field-row .value { font-size: 54px; }74  .field-actions {75    margin-left: auto;76    display: flex; gap: 16px;77  }78  .circle-btn {79    width: 88px; height: 88px; border-radius: 50%;80    background: #ffffff; color: #0e5a79;81    display: flex; align-items: center; justify-content: center;82  }83 84  .note-link {85    color: #a8d2e7; text-decoration: underline; font-size: 38px; margin-top: 20px;86  }87  .subtext {88    color: #cfe5ef; opacity: 0.9; font-size: 36px; line-height: 1.35; margin-top: 6px;89  }90 91  .inline-row { display: flex; align-items: center; }92  .dropdown-arrow { margin-left: auto; opacity: 0.85; }93 94  /* Task list tail icons */95  .list-icons { margin-left: auto; display: flex; align-items: center; gap: 18px; }96 97  /* Bottom elements */98  .fab {99    position: absolute; right: 48px; bottom: 260px;100    width: 160px; height: 160px; border-radius: 50%;101    background: #ffffff; box-shadow: 0 8px 20px rgba(0,0,0,0.4);102    display: flex; align-items: center; justify-content: center;103  }104  .ad-banner {105    position: absolute; left: 0; right: 0; bottom: 100px;106    height: 180px; background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;107    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;108  }109  .gesture {110    position: absolute; left: 50%; transform: translateX(-50%);111    bottom: 34px; width: 300px; height: 12px; border-radius: 8px; background: rgba(255,255,255,0.7);112  }113 114  /* Helper */115  svg { display: block; }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status bar -->122  <div class="status-bar">123    <div>9:28</div>124    <div class="right">125      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="8" width="16" height="8" rx="2" fill="#fff"/><rect x="19" y="10" width="3" height="4" rx="1" fill="#fff"/></svg>126      <svg class="icon" viewBox="0 0 24 24"><path fill="#fff" d="M2 20h3V8H2v12zm5 0h3V4H7v16zm5 0h3V12h-3v8zm5 0h3V2h-3v18z"/></svg>127      <svg class="icon" viewBox="0 0 24 24"><path fill="#fff" d="M4 18h16v2H4zM6 16h12a6 6 0 00-12 0zM9 7a3 3 0 116 0 3 3 0 01-6 0z"/></svg>128      <svg class="icon" viewBox="0 0 24 24"><path fill="#fff" d="M7 20h10a2 2 0 002-2V8H5v10a2 2 0 002 2zm11-13h-3V6H9v1H6V5h12v2z"/></svg>129    </div>130  </div>131 132  <!-- App bar -->133  <div class="appbar">134    <div class="action">135      <svg width="72" height="72" viewBox="0 0 24 24"><path fill="#fff" d="M15.5 4l-8 8 8 8 1.5-1.5L10.5 12l6.5-6.5z"/></svg>136    </div>137    <div class="spacer"></div>138    <div class="action">139      <svg width="64" height="64" viewBox="0 0 24 24"><path fill="#fff" d="M14 9V5l7 7-7 7v-4H3V9h11z"/></svg>140    </div>141    <div class="action">142      <svg width="64" height="64" viewBox="0 0 24 24"><path fill="#fff" d="M6 7h12v13H6zM9 3h6v2H9zM4 7h16v2H4z"/></svg>143    </div>144  </div>145 146  <!-- Content -->147  <div class="content">148    <div class="section-title">What is to be done?</div>149 150    <div class="input-row">151      <div class="big-input">Buying New Balance Hiking shoes</div>152      <div class="mic-btn">153        <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#fff" d="M12 14a3 3 0 003-3V7a3 3 0 10-6 0v4a3 3 0 003 3zm-5-3h2a3 3 0 006 0h2a5 5 0 01-10 0zm4 5h2v3h-2z"/></svg>154      </div>155    </div>156 157    <div class="checkbox-row">158      <div class="checkbox"></div>159      <span>Task finished?</span>160    </div>161 162    <div class="section-title" style="margin-top: 48px;">Due date</div>163 164    <div class="field-row">165      <div class="value">Tomorrow</div>166      <div class="field-actions">167        <div class="circle-btn">168          <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#0e5a79" d="M7 2h2v2h6V2h2v2h2a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2h2V2zm13 6H4v10h16V8z"/></svg>169        </div>170        <div class="circle-btn">171          <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#0e5a79" d="M6 6l12 12M18 6L6 18" stroke="#0e5a79" stroke-width="2"/></svg>172        </div>173      </div>174    </div>175 176    <div class="field-row" style="margin-top: 22px;">177      <div class="value">2:00 PM</div>178      <div class="field-actions">179        <div class="circle-btn">180          <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#0e5a79" d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm1 5h-2v6h6v-2h-4z"/></svg>181        </div>182        <div class="circle-btn">183          <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#0e5a79" d="M6 6l12 12M18 6L6 18" stroke="#0e5a79" stroke-width="2"/></svg>184        </div>185      </div>186    </div>187 188    <div class="note-link">Notifications</div>189    <div class="subtext">Day summary on the same day at 8:00 AM.<br/>Individual notification on time.</div>190 191    <div class="section-title" style="margin-top: 60px;">Repeat</div>192    <div class="field-row" style="border-bottom: none; padding-bottom: 0;">193      <div class="value">No repeat</div>194      <div class="dropdown-arrow">195        <svg width="60" height="60" viewBox="0 0 24 24"><path fill="#e8f4fb" d="M7 9l5 5 5-5z"/></svg>196      </div>197    </div>198 199    <div class="section-title" style="margin-top: 70px;">Task List</div>200    <div class="field-row" style="border-bottom: none;">201      <div class="value">Default</div>202      <div class="list-icons">203        <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#e8f4fb" d="M7 10l5 5 5-5z"/></svg>204        <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#e8f4fb" d="M3 6h4v4H3V6zm6 0h12v2H9V6zm0 4h12v2H9v-2zM3 14h4v4H3v-4zm6 0h12v2H9v-2zm0 4h12v2H9v-2z"/></svg>205      </div>206    </div>207  </div>208 209  <!-- Floating action button -->210  <div class="fab">211    <svg width="74" height="74" viewBox="0 0 24 24"><path fill="#0e5a79" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>212  </div>213 214  <!-- Ad banner placeholder -->215  <div class="ad-banner">[IMG: Ad banner - Booking.com]</div>216 217  <!-- Gesture bar -->218  <div class="gesture"></div>219</div>220</body>221</html>