GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search Tasks UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #FFFFFF;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    padding: 26px 40px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #ffffff;32    font-size: 44px;33    letter-spacing: 0.5px;34  }35  .status-left { display: flex; align-items: center; gap: 22px; }36  .status-mid { display: flex; align-items: center; gap: 18px; opacity: 0.9; }37  .status-right { display: flex; align-items: center; gap: 24px; }38 39  .icon {40    width: 40px; height: 40px;41  }42  .battery { width: 64px; height: 32px; }43 44  /* Search row */45  .search-row {46    position: absolute;47    top: 140px;48    left: 40px;49    width: 1000px;50    display: flex;51    align-items: center;52    gap: 22px;53  }54  .search-box {55    flex: 1;56    height: 100px;57    background: #1b1b1b;58    border-radius: 22px;59    display: flex;60    align-items: center;61    padding: 0 28px;62    box-sizing: border-box;63  }64  .search-box .magnifier { width: 48px; height: 48px; margin-right: 22px; opacity: 0.9; }65  .search-text {66    font-size: 46px;67    color: #eaeaea;68    flex: 1;69  }70  .clear {71    width: 56px; height: 56px;72    background: #2a2a2a;73    border-radius: 28px;74    display: flex; align-items: center; justify-content: center;75  }76  .clear svg { width: 30px; height: 30px; }77  .cancel-btn {78    font-size: 46px;79    color: #ff8c00;80    white-space: nowrap;81  }82 83  /* Card */84  .card {85    position: absolute;86    top: 310px;87    left: 40px;88    width: 1000px;89    background: #171717;90    border-radius: 26px;91    box-shadow: 0 8px 24px rgba(0,0,0,0.5);92    padding: 26px 28px 30px 28px;93    box-sizing: border-box;94  }95  .card-title {96    font-size: 34px;97    color: #bdbdbd;98    margin-bottom: 20px;99  }100  .task-item {101    position: relative;102    background: #1c1c1c;103    border-radius: 18px;104    padding: 24px 24px 30px 24px;105    box-sizing: border-box;106  }107  .checkbox {108    width: 44px; height: 44px;109    border-radius: 8px;110    border: 3px solid #8a8a8a;111    margin-right: 18px;112    flex-shrink: 0;113  }114  .task-row {115    display: flex; align-items: center;116  }117  .task-title {118    font-size: 44px;119    color: #e7e7e7;120    flex: 1;121  }122  .task-meta {123    font-size: 34px;124    color: #9e9e9e;125    margin-left: 18px;126  }127  .highlight {128    background: #ffb300;129    color: #1a1a1a;130    padding: 4px 10px;131    border-radius: 6px;132  }133  .task-sub {134    font-size: 34px;135    color: #64b5f6;136    margin-top: 16px;137    margin-left: 62px; /* account for checkbox space */138  }139 140  /* Hint text */141  .hint {142    position: absolute;143    top: 540px;144    width: 100%;145    text-align: center;146    font-size: 40px;147    color: #9e9e9e;148  }149  .hint .accent {150    color: #ff8c00;151  }152 153  /* Home indicator */154  .home-indicator {155    position: absolute;156    bottom: 40px;157    left: 50%;158    transform: translateX(-50%);159    width: 300px;160    height: 16px;161    background: #e6e6e6;162    border-radius: 10px;163    opacity: 0.9;164  }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status Bar -->171  <div class="status-bar">172    <div class="status-left">173      <div class="time">9:58</div>174      <div class="status-mid">175        <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">176          <path d="M12 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/>177          <path d="M15.5 16.5l4 4" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>178        </svg>179        <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">180          <path d="M6 7l6-4 6 4v6l-6 4-6-4V7z"/>181        </svg>182        <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">183          <path d="M12 2l3 3-3 3-3-3 3-3zm-6 9l3 3-3 3-3-3 3-3zm12 0l3 3-3 3-3-3 3-3z"/>184        </svg>185      </div>186    </div>187    <div class="status-right">188      <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">189        <path d="M2 9c4-5 16-5 20 0M5 12c3-3 11-3 14 0M8 15c2-1 6-1 8 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>190        <circle cx="12" cy="18" r="1.8" fill="#ffffff"/>191      </svg>192      <svg class="battery" viewBox="0 0 40 20" xmlns="http://www.w3.org/2000/svg">193        <rect x="1" y="3" width="34" height="14" rx="3" ry="3" fill="none" stroke="#ffffff" stroke-width="2"/>194        <rect x="3" y="5" width="24" height="10" rx="2" fill="#ffffff"/>195        <rect x="35" y="7" width="4" height="6" rx="1" fill="#ffffff"/>196      </svg>197    </div>198  </div>199 200  <!-- Search Bar -->201  <div class="search-row">202    <div class="search-box">203      <svg class="magnifier" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">204        <circle cx="11" cy="11" r="6" stroke="#9e9e9e" stroke-width="2" fill="none"/>205        <path d="M16 16l5 5" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"/>206      </svg>207      <div class="search-text">anniversary</div>208      <div class="clear">209        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">210          <path d="M6 6l12 12M18 6L6 18" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>211        </svg>212      </div>213    </div>214    <div class="cancel-btn">Cancel</div>215  </div>216 217  <!-- Tasks Card -->218  <div class="card">219    <div class="card-title">Tasks</div>220    <div class="task-item">221      <div class="task-row">222        <div class="checkbox"></div>223        <div class="task-title">Mumma's <span class="highlight">anniversary</span> celebration</div>224        <div class="task-meta">Inbox</div>225      </div>226      <div class="task-sub">11 Days Left</div>227    </div>228  </div>229 230  <!-- Hint -->231  <div class="hint">Not found yet?<span class="accent"> Try Cloud Search.</span></div>232 233  <!-- Home Indicator -->234  <div class="home-indicator"></div>235</div>236</body>237</html>