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>Inbox - Tasks</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#000;13  }14  /* Top status bar */15  .status-bar {16    height:90px; color:#fff; font-size:34px;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 36px;19  }20  .status-right { display:flex; gap:24px; align-items:center; }21  .icon { display:inline-flex; align-items:center; justify-content:center; }22  .icon svg { width:44px; height:44px; }23  /* App bar */24  .app-bar {25    height:120px; display:flex; align-items:center;26    color:#fff; padding:0 36px; gap:28px;27  }28  .title { font-size:58px; font-weight:700; letter-spacing:0.5px; }29  .spacer { flex:1; }30  /* Cards */31  .card {32    width:1000px; margin:24px 40px; padding:30px 28px;33    background:#1f1f1f; border-radius:26px;34  }35  .task {36    display:flex; align-items:flex-start; padding:32px 8px;37    border-radius:12px;38  }39  .checkbox {40    width:48px; height:48px; border:3px solid #7d7d7d; border-radius:6px;41    margin-right:28px; margin-top:6px;42  }43  .task-title {44    color:#fff; font-size:46px; line-height:1.3; flex:1;45  }46  .task-right {47    width:220px; display:flex; flex-direction:column; align-items:flex-end; gap:18px;48  }49  .date {50    color:#3d5afe; font-size:36px; font-weight:600;51  }52  .meta { display:flex; gap:18px; color:#9e9e9e; }53  .meta svg { width:40px; height:40px; }54  /* Completed section */55  .section-head {56    display:flex; align-items:center; justify-content:space-between; color:#bdbdbd;57    font-weight:800; letter-spacing:1px; font-size:34px; padding:8px 6px 6px;58  }59  .count { color:#bdbdbd; font-size:34px; display:flex; align-items:center; gap:12px; }60  .completed-item {61    margin-top:14px; padding:28px; background:#212121; border-radius:20px;62    display:flex; align-items:center;63  }64  .checkbox-filled {65    width:48px; height:48px; background:#3d5afe; border-radius:8px; margin-right:28px;66    display:flex; align-items:center; justify-content:center;67  }68  .checkbox-filled svg { width:34px; height:34px; }69  .completed-title {70    color:#8d8d8d; font-size:42px; flex:1;71  }72  .completed-date { color:#9e9e9e; font-size:34px; }73  /* Bottom nav */74  .bottom-nav {75    position:absolute; bottom:0; left:0; right:0;76    height:160px; display:flex; align-items:center; justify-content:space-around;77    padding:0 60px 24px;78  }79  .nav-btn { width:110px; height:110px; border-radius:24px; display:flex; align-items:center; justify-content:center; }80  .nav-btn.active { background:#3d5afe; }81  .nav-btn svg { width:56px; height:56px; }82  /* FAB */83  .fab {84    position:absolute; right:48px; bottom:220px;85    width:150px; height:150px; border-radius:50%;86    background:#3d5afe; box-shadow:0 12px 24px rgba(0,0,0,0.6);87    display:flex; align-items:center; justify-content:center;88  }89  .fab svg { width:80px; height:80px; }90  /* Home indicator */91  .home-indicator {92    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);93    width:420px; height:16px; background:#bdbdbd; border-radius:12px; opacity:0.7;94  }95</style>96</head>97<body>98<div id="render-target">99  <!-- Status Bar -->100  <div class="status-bar">101    <div>9:59</div>102    <div class="status-right">103      <div class="icon">104        <svg viewBox="0 0 24 24" fill="#fff"><path d="M7 2h10v2H7zM5 8h14v2H5zM3 14h18v2H3z"/></svg>105      </div>106      <div class="icon">107        <svg viewBox="0 0 24 24" fill="#fff"><path d="M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18zm0 4a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"/></svg>108      </div>109      <div class="icon">110        <svg viewBox="0 0 24 24" fill="#fff"><path d="M3 18h18v2H3zM3 4h18v2H3zM3 11h18v2H3z"/></svg>111      </div>112      <div class="icon">113        <svg viewBox="0 0 24 24" fill="#fff"><path d="M17 4a1 1 0 0 1 1-1h1v4h-2V4zM5 4h2v4H5V4zM4 7h16v13H4V7zm2 3v9h12v-9H6z"/></svg>114      </div>115    </div>116  </div>117 118  <!-- App Bar -->119  <div class="app-bar">120    <div class="icon">121      <svg viewBox="0 0 24 24" fill="#fff"><path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/></svg>122    </div>123    <div class="title">Inbox</div>124    <div class="spacer"></div>125    <div class="icon">126      <svg viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>127    </div>128  </div>129 130  <!-- Tasks Card -->131  <div class="card" style="margin-top:18px;">132    <div class="task">133      <div class="checkbox"></div>134      <div class="task-title">Sanju´s engagement</div>135      <div class="task-right">136        <div class="date">Tomorrow</div>137        <div class="meta">138          <svg viewBox="0 0 24 24" fill="#9e9e9e"><path d="M5 3h14v18H5zM7 6h10v2H7zm0 4h10v2H7zm0 4h7v2H7z"/></svg>139          <svg viewBox="0 0 24 24" fill="#9e9e9e"><path d="M12 3c3 0 5 2 5 5v5l2 2v1H5v-1l2-2V8c0-3 2-5 5-5zm0 17a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/></svg>140        </div>141      </div>142    </div>143 144    <div class="task">145      <div class="checkbox"></div>146      <div class="task-title">Shimla tour</div>147      <div class="task-right">148        <div class="date">Aug 20</div>149        <div class="meta">150          <svg viewBox="0 0 24 24" fill="#9e9e9e"><path d="M5 3h14v18H5zM7 6h10v2H7zm0 4h10v2H7zm0 4h7v2H7z"/></svg>151          <svg viewBox="0 0 24 24" fill="#9e9e9e"><path d="M12 3c3 0 5 2 5 5v5l2 2v1H5v-1l2-2V8c0-3 2-5 5-5zm0 17a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/></svg>152        </div>153      </div>154    </div>155 156    <div class="task" style="padding-bottom:24px;">157      <div class="checkbox"></div>158      <div class="task-title">Mumma's anniversary celebration</div>159      <div class="task-right">160        <div class="date">Aug 22</div>161        <div class="meta">162          <svg viewBox="0 0 24 24" fill="#9e9e9e"><path d="M5 3h14v18H5zM7 6h10v2H7zm0 4h10v2H7zm0 4h7v2H7z"/></svg>163          <svg viewBox="0 0 24 24" fill="#9e9e9e"><path d="M12 3c3 0 5 2 5 5v5l2 2v1H5v-1l2-2V8c0-3 2-5 5-5zm0 17a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/></svg>164        </div>165      </div>166    </div>167  </div>168 169  <!-- Completed Card -->170  <div class="card">171    <div class="section-head">172      <div>COMPLETED</div>173      <div class="count">1174        <svg viewBox="0 0 24 24" fill="#bdbdbd"><path d="M6 9l6 6 6-6z"/></svg>175      </div>176    </div>177    <div class="completed-item">178      <div class="checkbox-filled">179        <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 12l2 2 4-4 2 2-6 6-4-4z"/></svg>180      </div>181      <div class="completed-title">Doctors appointment for routine check...</div>182      <div class="completed-date">Aug 10</div>183    </div>184  </div>185 186  <!-- FAB -->187  <div class="fab">188    <svg viewBox="0 0 24 24" fill="#fff"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>189  </div>190 191  <!-- Bottom Navigation -->192  <div class="bottom-nav">193    <div class="nav-btn active">194      <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 12l2 2 4-4 2 2-6 6-4-4z"/></svg>195    </div>196    <div class="nav-btn" style="background:#2a2a2a;">197      <svg viewBox="0 0 24 24" fill="#c9c9c9"><path d="M7 2h2v3h6V2h2v3h3v17H4V5h3V2zM6 7h12v12H6V7z"/></svg>198    </div>199    <div class="nav-btn" style="background:#2a2a2a;">200      <svg viewBox="0 0 24 24" fill="#c9c9c9"><path d="M12 4l3 1 2 3-1 3 1 3-2 3-3 1-3-1-2-3 1-3-1-3 2-3 3-1zm0 4a4 4 0 1 0 .001 8.001A4 4 0 0 0 12 8z"/></svg>201    </div>202  </div>203 204  <!-- Home Indicator -->205  <div class="home-indicator"></div>206</div>207</body>208</html>