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>Tasks UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #3f3f3f;20  }21 22  /* App Bar */23  .appbar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 190px;29    background: linear-gradient(#5fa0ff, #4a88e8);30    display: flex;31    align-items: center;32    padding: 0 40px;33    color: #fff;34  }35  .appbar .left {36    display: flex;37    align-items: center;38  }39  .hamburger {40    width: 60px;41    height: 60px;42    margin-right: 28px;43  }44  .title {45    font-size: 56px;46    font-weight: 500;47    letter-spacing: 0.5px;48  }49  .appbar .actions {50    margin-left: auto;51    display: flex;52    align-items: center;53    gap: 28px;54  }55  .appbar .action-icon {56    width: 64px;57    height: 64px;58    opacity: 0.95;59  }60 61  /* Content area below app bar */62  .content {63    position: absolute;64    left: 0;65    top: 190px;66    width: 100%;67    bottom: 220px; /* leave room for ad */68    padding: 20px 32px;69  }70 71  /* Notification permission banner */72  .notice {73    background: #4a4a4a;74    border-bottom: 1px solid rgba(0,0,0,0.2);75    height: 110px;76    display: flex;77    align-items: center;78    padding: 0 28px;79    color: #e74c3c;80  }81  .notice .msg {82    font-size: 38px;83    flex: 1;84    margin-left: 18px;85  }86  .notice .enable-btn {87    background: #4e8df5;88    color: #fff;89    border: none;90    border-radius: 8px;91    font-size: 36px;92    padding: 18px 26px;93    box-shadow: 0 4px 0 rgba(0,0,0,0.25);94  }95 96  /* Main center content */97  .center {98    display: flex;99    flex-direction: column;100    align-items: center;101    padding-top: 120px;102  }103  .img-placeholder {104    width: 520px;105    height: 520px;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    display: flex;109    justify-content: center;110    align-items: center;111    color: #757575;112    font-size: 34px;113    border-radius: 12px;114  }115  .headline {116    margin-top: 80px;117    font-size: 56px;118    color: #e6e6e6;119    text-align: center;120    line-height: 1.25;121    letter-spacing: 0.2px;122  }123  .primary-btn {124    margin-top: 40px;125    background: #4e8df5;126    color: #fff;127    border: none;128    border-radius: 10px;129    font-size: 40px;130    padding: 26px 40px;131    width: 420px;132    box-shadow: 0 6px 0 rgba(0,0,0,0.28);133  }134  .secondary-btn {135    margin-top: 40px;136    background: #4e8df5;137    color: #fff;138    border: none;139    border-radius: 10px;140    font-size: 40px;141    padding: 30px 40px;142    width: 780px;143    box-shadow: 0 6px 0 rgba(0,0,0,0.28);144  }145  .link {146    margin-top: 40px;147    font-size: 36px;148    color: #8eb9ff;149    text-decoration: underline;150  }151 152  /* Bottom ad banner */153  .adbar {154    position: absolute;155    left: 0;156    bottom: 70px;157    width: 1080px;158    height: 180px;159    background: #ffffff;160    border-top: 1px solid #d7d7d7;161    display: flex;162    align-items: center;163    justify-content: center;164    padding: 20px;165  }166  .ad-content {167    width: 980px;168    height: 140px;169    background: #E0E0E0;170    border: 1px solid #BDBDBD;171    display: flex;172    justify-content: center;173    align-items: center;174    color: #757575;175    font-size: 32px;176  }177</style>178</head>179<body>180<div id="render-target">181  <!-- App Bar -->182  <div class="appbar">183    <div class="left">184      <!-- Hamburger icon -->185      <svg class="hamburger" viewBox="0 0 40 40">186        <rect x="4" y="8" width="32" height="4" fill="#ffffff"></rect>187        <rect x="4" y="18" width="32" height="4" fill="#ffffff"></rect>188        <rect x="4" y="28" width="32" height="4" fill="#ffffff"></rect>189      </svg>190      <div class="title">Tasks</div>191    </div>192    <div class="actions">193      <!-- Plus in circle -->194      <svg class="action-icon" viewBox="0 0 56 56">195        <circle cx="28" cy="28" r="25" fill="none" stroke="#ffffff" stroke-width="3"></circle>196        <rect x="27" y="16" width="2" height="24" fill="#ffffff"></rect>197        <rect x="16" y="27" width="24" height="2" fill="#ffffff"></rect>198      </svg>199      <!-- Check in circle -->200      <svg class="action-icon" viewBox="0 0 56 56">201        <circle cx="28" cy="28" r="25" fill="none" stroke="#ffffff" stroke-width="3"></circle>202        <path d="M18 30 L26 38 L40 22" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>203      </svg>204      <!-- Magnify in circle -->205      <svg class="action-icon" viewBox="0 0 56 56">206        <circle cx="28" cy="28" r="25" fill="none" stroke="#ffffff" stroke-width="3"></circle>207        <circle cx="24" cy="24" r="10" fill="none" stroke="#ffffff" stroke-width="3"></circle>208        <line x1="31" y1="31" x2="40" y2="40" stroke="#ffffff" stroke-width="3" stroke-linecap="round"></line>209      </svg>210    </div>211  </div>212 213  <!-- Content -->214  <div class="content">215    <!-- Notification permission banner -->216    <div class="notice">217      <svg width="54" height="54" viewBox="0 0 48 48">218        <circle cx="24" cy="24" r="20" fill="#ffffff" stroke="#e74c3c" stroke-width="4"></circle>219        <rect x="23" y="12" width="2" height="18" fill="#e74c3c"></rect>220        <rect x="23" y="32" width="2" height="6" fill="#e74c3c"></rect>221      </svg>222      <div class="msg">Please allow app to send you notification</div>223      <button class="enable-btn">Enable</button>224    </div>225 226    <div class="center">227      <div class="img-placeholder">[IMG: Clock Illustration]</div>228      <div class="headline">Anything you want me to remind you? easy.!!</div>229      <button class="primary-btn">Add Reminder</button>230      <button class="secondary-btn">Restore backup from Google drive</button>231      <div class="link">User Guide(FAQ)</div>232    </div>233  </div>234 235  <!-- Bottom ad banner -->236  <div class="adbar">237    <div class="ad-content">[IMG: Ad Banner - Start chatting now! OPEN]</div>238  </div>239</div>240</body>241</html>