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>Today - Empty State</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #141414;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    right: 0;24    height: 120px;25    padding: 0 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #EDEDED;30    font-size: 34px;31  }32  .status-left { display: flex; align-items: center; gap: 20px; }33  .status-right { display: flex; align-items: center; gap: 28px; }34  .sb-icon { width: 40px; height: 40px; opacity: 0.85; }35 36  /* Header */37  .app-header {38    position: absolute;39    top: 120px;40    left: 0;41    right: 0;42    padding: 40px 48px 24px 48px;43  }44  .title {45    font-size: 86px;46    font-weight: 700;47    margin: 20px 0 36px 0;48  }49  .sub-row {50    display: flex;51    align-items: center;52    justify-content: space-between;53  }54  .subtitle {55    font-size: 44px;56    color: #CFCFCF;57  }58  .header-actions {59    display: flex;60    align-items: center;61    gap: 40px;62  }63  .icon-btn {64    width: 64px;65    height: 64px;66    display: inline-flex;67    align-items: center;68    justify-content: center;69    color: #DADADA;70  }71  .divider {72    position: absolute;73    left: 0;74    right: 0;75    top: 370px;76    height: 1px;77    background: #2a2a2a;78  }79 80  /* Empty state content */81  .content {82    position: absolute;83    left: 0;84    right: 0;85    top: 780px;86    text-align: center;87  }88  .img-placeholder {89    width: 720px;90    height: 520px;91    margin: 0 auto 80px auto;92    background: #E0E0E0;93    border: 1px solid #BDBDBD;94    border-radius: 12px;95    display: flex;96    align-items: center;97    justify-content: center;98    color: #757575;99    font-size: 34px;100  }101  .headline {102    font-size: 52px;103    font-weight: 800;104    margin: 20px 0 30px 0;105  }106  .subtext {107    font-size: 38px;108    color: #A9A9A9;109    max-width: 860px;110    margin: 0 auto;111    line-height: 1.45;112  }113 114  /* Help icon */115  .help {116    position: absolute;117    left: 44px;118    bottom: 320px;119    width: 96px;120    height: 96px;121    border-radius: 48px;122    border: 3px solid #3a3a3a;123    display: flex;124    align-items: center;125    justify-content: center;126    color: #9E9E9E;127    font-size: 44px;128  }129 130  /* Bottom navigation */131  .bottom-bar {132    position: absolute;133    left: 0; right: 0; bottom: 0;134    height: 220px;135    background: #252525;136    border-top: 1px solid #303030;137  }138  .nav-inner {139    height: 100%;140    display: flex;141    align-items: center;142    justify-content: space-between;143    padding: 0 64px;144  }145  .nav-icon {146    width: 72px;147    height: 72px;148    color: #CFCFCF;149    opacity: 0.9;150  }151 152  /* Floating action button */153  .fab {154    position: absolute;155    left: 50%;156    bottom: 170px;157    transform: translateX(-50%);158    width: 170px;159    height: 170px;160    border-radius: 85px;161    background: #EF6C67;162    box-shadow: 0 18px 20px rgba(0,0,0,0.5);163    display: flex;164    align-items: center;165    justify-content: center;166  }167  .fab svg { width: 72px; height: 72px; color: #111; }168 169  /* Home indicator */170  .home-indicator {171    position: absolute;172    bottom: 40px;173    left: 50%;174    transform: translateX(-50%);175    width: 280px;176    height: 12px;177    background: #EDEDED;178    border-radius: 6px;179    opacity: 0.9;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Status Bar -->187  <div class="status-bar">188    <div class="status-left">189      <div style="font-weight:600;">9:01</div>190      <!-- simple dots to hint status icons -->191      <svg class="sb-icon" viewBox="0 0 40 40">192        <circle cx="8" cy="20" r="4" fill="#FFFFFF" />193        <circle cx="20" cy="20" r="4" fill="#FFFFFF" />194        <circle cx="32" cy="20" r="4" fill="#FFFFFF" />195      </svg>196      <svg class="sb-icon" viewBox="0 0 40 40">197        <circle cx="20" cy="20" r="3" fill="#FFFFFF" />198      </svg>199    </div>200    <div class="status-right">201      <!-- WiFi icon -->202      <svg class="sb-icon" viewBox="0 0 40 40">203        <path d="M6 16c7-6 21-6 28 0" stroke="#FFFFFF" stroke-width="3" fill="none"/>204        <path d="M11 20c5-4 13-4 18 0" stroke="#FFFFFF" stroke-width="3" fill="none"/>205        <circle cx="20" cy="26" r="3" fill="#FFFFFF"/>206      </svg>207      <!-- Battery icon -->208      <svg class="sb-icon" viewBox="0 0 40 40">209        <rect x="6" y="12" width="24" height="16" rx="3" ry="3" stroke="#FFFFFF" stroke-width="3" fill="none"/>210        <rect x="9" y="15" width="18" height="10" fill="#FFFFFF"/>211        <rect x="30" y="16" width="4" height="8" fill="#FFFFFF"/>212      </svg>213    </div>214  </div>215 216  <!-- Header -->217  <div class="app-header">218    <div class="title">Today</div>219    <div class="sub-row">220      <div class="subtitle">Custom view</div>221      <div class="header-actions">222        <!-- vertical dots -->223        <div class="icon-btn">224          <svg viewBox="0 0 24 24">225            <circle cx="12" cy="4" r="2" fill="#DADADA"/>226            <circle cx="12" cy="12" r="2" fill="#DADADA"/>227            <circle cx="12" cy="20" r="2" fill="#DADADA"/>228          </svg>229        </div>230        <!-- close (X) -->231        <div class="icon-btn">232          <svg viewBox="0 0 24 24">233            <path d="M4 4 L20 20 M20 4 L4 20" stroke="#DADADA" stroke-width="2" stroke-linecap="round"/>234          </svg>235        </div>236      </div>237    </div>238    <div class="divider"></div>239  </div>240 241  <!-- Content -->242  <div class="content">243    <div class="img-placeholder">[IMG: Illustration of vases and leaves]</div>244    <div class="headline">What do you need to get done today?</div>245    <div class="subtext">By default, tasks added here will be due today. Tap + to add a task.</div>246  </div>247 248  <!-- Help bubble -->249  <div class="help">?</div>250 251  <!-- Bottom navigation -->252  <div class="bottom-bar">253    <div class="nav-inner">254      <!-- Hamburger -->255      <svg class="nav-icon" viewBox="0 0 64 64">256        <path d="M10 18 H54 M10 32 H54 M10 46 H54" stroke="#CFCFCF" stroke-width="6" stroke-linecap="round" fill="none"/>257      </svg>258 259      <!-- Spacer to allow center notch feel -->260      <div style="width: 380px;"></div>261 262      <!-- Search -->263      <svg class="nav-icon" viewBox="0 0 64 64">264        <circle cx="28" cy="28" r="16" stroke="#CFCFCF" stroke-width="6" fill="none"/>265        <path d="M42 42 L56 56" stroke="#CFCFCF" stroke-width="6" stroke-linecap="round"/>266      </svg>267 268      <!-- Bell -->269      <svg class="nav-icon" viewBox="0 0 64 64">270        <path d="M16 44 H48 C48 34 44 20 32 20 C20 20 16 34 16 44 Z" stroke="#CFCFCF" stroke-width="5" fill="none"/>271        <circle cx="32" cy="50" r="4" fill="#CFCFCF"/>272      </svg>273    </div>274  </div>275 276  <!-- Floating action button -->277  <div class="fab">278    <svg viewBox="0 0 64 64">279      <path d="M32 16 V48 M16 32 H48" stroke="#111111" stroke-width="8" stroke-linecap="round"/>280    </svg>281  </div>282 283  <!-- Home indicator -->284  <div class="home-indicator"></div>285 286</div>287</body>288</html>