GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Any.do Style Lists</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #FFFFFF;11  }12 13  .status-bar {14    height: 90px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; color: #222; font-weight: 600; font-size: 40px;15  }16  .status-icons { display: flex; align-items: center; gap: 24px; }17  .status-icons svg { width: 42px; height: 42px; }18 19  .screen-content { padding: 20px 40px 180px 40px; }20  .search-bar {21    height: 120px; border-radius: 60px; background: #F5F6F8; display: flex; align-items: center; padding: 0 40px; gap: 24px; color: #8A8D94; font-size: 40px;22  }23  .search-bar svg { width: 54px; height: 54px; }24 25  .banner {26    margin-top: 40px; border-radius: 34px; background: #FFFFFF; border: 1px solid #E6E6E6;27    display: flex; align-items: center; justify-content: space-between; padding: 40px; height: 290px;28    box-shadow: 0 6px 16px rgba(0,0,0,0.04);29  }30  .banner .text {31    width: 560px;32  }33  .banner h3 { margin: 0 0 26px 0; font-size: 46px; line-height: 1.2; font-weight: 700; }34  .cta-btn {35    display: inline-flex; align-items: center; justify-content: center;36    height: 92px; padding: 0 46px; border-radius: 50px; background: #1A73E8; color: #fff; font-weight: 700; font-size: 36px;37  }38  .banner .img {39    width: 360px; height: 210px; border: 1px solid #BDBDBD; background: #E0E0E0; border-radius: 24px;40    display: flex; align-items: center; justify-content: center; color: #5F5F5F; font-size: 34px; text-align: center;41  }42 43  .section-title {44    margin: 50px 0 24px; font-size: 72px; font-weight: 800; letter-spacing: -0.5px;45  }46 47  .grid {48    display: grid; grid-template-columns: 1fr 1fr; gap: 26px 26px;49  }50  .card {51    height: 280px; border-radius: 28px; background: #FFFFFF; border: 1px solid #E9E9E9;52    display: flex; align-items: center; padding: 40px; font-size: 52px; font-weight: 700; position: relative;53    box-shadow: 0 6px 16px rgba(0,0,0,0.04);54  }55  .badge {56    position: absolute; top: 26px; right: 26px; width: 70px; height: 70px; border-radius: 50%;57    background: #F1F2F6; color: #333; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; border: 1px solid #E1E1E1;58  }59  .card .suffix-icon { position: absolute; right: 40px; width: 60px; height: 60px; }60  .add-card {61    border: 2px dashed #C9D5F6; color: #1A73E8; justify-content: center;62  }63  .add-card svg { width: 100px; height: 100px; }64 65  .workspace-title {66    display: flex; align-items: center; gap: 20px; margin-top: 34px;67  }68  .workspace-title h2 { margin: 0; font-size: 72px; font-weight: 800; }69  .try-chip {70    padding: 14px 24px; background: #EAF2FF; color: #1A73E8; border-radius: 40px; font-weight: 800; font-size: 30px; border: 1px solid #CFE2FF;71  }72  .workspace-desc {73    margin-top: 10px; color: #80848C; font-size: 36px; line-height: 1.4; max-width: 950px;74  }75  .workspace-add {76    margin-top: 26px; width: 500px; height: 240px; border-radius: 28px; border: 1px dashed #C9D5F6;77    display: flex; align-items: center; justify-content: center; color: #1A73E8; box-shadow: 0 6px 16px rgba(0,0,0,0.04);78  }79  .workspace-add svg { width: 90px; height: 90px; }80 81  .bottom-nav {82    position: absolute; left: 40px; right: 40px; bottom: 40px; height: 160px;83    border-radius: 100px; background: #FFFFFF; box-shadow: 0 10px 24px rgba(0,0,0,0.08); border: 1px solid #E8E8E8;84    display: flex; align-items: center; justify-content: space-around;85  }86  .nav-item {87    display: flex; flex-direction: column; align-items: center; gap: 18px; color: #1A73E8; font-size: 36px; font-weight: 700;88  }89  .nav-item svg { width: 74px; height: 74px; stroke: #1A73E8; fill: none; }90  .nav-item .filled { fill: #1A73E8; stroke: none; }91</style>92</head>93<body>94<div id="render-target">95  <!-- Status bar -->96  <div class="status-bar">97    <div>3:46</div>98    <div class="status-icons">99      <!-- Signal -->100      <svg viewBox="0 0 24 24">101        <path d="M3 18h2v3H3v-3zm4-5h2v8H7v-8zm4-4h2v12h-2V9zm4-4h2v16h-2V5zm4-3h2v19h-2V2z" fill="#222"/>102      </svg>103      <!-- WiFi -->104      <svg viewBox="0 0 24 24">105        <path d="M2 8c5-4 15-4 20 0" stroke="#222" stroke-width="2" fill="none"/>106        <path d="M5 12c3-3 11-3 14 0" stroke="#222" stroke-width="2" fill="none"/>107        <path d="M8 16c2-2 6-2 8 0" stroke="#222" stroke-width="2" fill="none"/>108        <circle cx="12" cy="19" r="2" fill="#222"/>109      </svg>110      <!-- Battery -->111      <svg viewBox="0 0 30 24">112        <rect x="1" y="5" width="24" height="14" rx="3" ry="3" stroke="#222" stroke-width="2" fill="none"/>113        <rect x="4" y="8" width="18" height="8" rx="2" ry="2" fill="#222"/>114        <rect x="26" y="9" width="3" height="6" rx="1" fill="#222"/>115      </svg>116    </div>117  </div>118 119  <div class="screen-content">120    <!-- Search -->121    <div class="search-bar">122      <svg viewBox="0 0 24 24">123        <circle cx="10" cy="10" r="7" stroke="#8A8D94" stroke-width="2" fill="none"/>124        <line x1="16" y1="16" x2="22" y2="22" stroke="#8A8D94" stroke-width="2"/>125      </svg>126      <div>Search for tasks, events, etc...</div>127    </div>128 129    <!-- Banner -->130    <div class="banner">131      <div class="text">132        <h3>Bring your team's work to Any.do Workspace</h3>133        <div class="cta-btn">Try It Free</div>134      </div>135      <div class="img">[IMG: Team avatars & text "For great teams"]</div>136    </div>137 138    <!-- My Lists -->139    <div class="section-title">My lists</div>140 141    <div class="grid">142      <div class="card">143        Personal144        <div class="badge">2</div>145      </div>146 147      <div class="card">Work</div>148 149      <div class="card">150        Grocery List151        <svg class="suffix-icon" viewBox="0 0 24 24">152          <path d="M3 6h18l-2 9H6L3 6z" stroke="#777" stroke-width="2" fill="none"/>153          <path d="M8 6l2-3h4l2 3" stroke="#777" stroke-width="2" fill="none"/>154          <circle cx="9" cy="20" r="2" fill="#777"/>155          <circle cx="17" cy="20" r="2" fill="#777"/>156        </svg>157      </div>158 159      <div class="card">yoga session</div>160 161      <div class="card add-card">162        <svg viewBox="0 0 24 24">163          <path d="M12 4v16M4 12h16" stroke="#1A73E8" stroke-width="2"/>164        </svg>165      </div>166    </div>167 168    <!-- Workspace -->169    <div class="workspace-title">170      <h2>Workspace</h2>171      <div class="try-chip">TRY IT FREE</div>172    </div>173    <div class="workspace-desc">174      Easily manage your team's work with project boards, customized workflows and integrations175    </div>176    <div class="workspace-add">177      <svg viewBox="0 0 24 24">178        <path d="M12 4v16M4 12h16" stroke="#1A73E8" stroke-width="2"/>179      </svg>180    </div>181  </div>182 183  <!-- Bottom Navigation -->184  <div class="bottom-nav">185    <div class="nav-item">186      <svg viewBox="0 0 24 24">187        <circle cx="12" cy="12" r="8" stroke-width="2"/>188        <circle cx="12" cy="12" r="3" class="filled"/>189      </svg>190      <div>My Day</div>191    </div>192    <div class="nav-item">193      <svg viewBox="0 0 24 24">194        <rect x="3" y="4" width="18" height="16" rx="3" stroke-width="2"/>195        <line x1="3" y1="9" x2="21" y2="9" stroke-width="2"/>196        <text x="12" y="17" font-size="9" text-anchor="middle" fill="#1A73E8" font-weight="700">7</text>197      </svg>198      <div>Next 7 days</div>199    </div>200    <div class="nav-item">201      <svg viewBox="0 0 24 24">202        <circle cx="12" cy="12" r="9" stroke-width="2"/>203        <path d="M8 12l3 3 5-6" stroke-width="2"/>204      </svg>205      <div>All Tasks</div>206    </div>207    <div class="nav-item">208      <svg viewBox="0 0 24 24">209        <rect x="3" y="4" width="18" height="16" rx="3" stroke-width="2"/>210        <line x1="3" y1="9" x2="21" y2="9" stroke-width="2"/>211        <rect x="7" y="12" width="4" height="4" class="filled"/>212        <rect x="13" y="12" width="4" height="4" class="filled"/>213      </svg>214      <div>Calendar</div>215    </div>216  </div>217</div>218</body>219</html>