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 - Share Sheet</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #000000;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    color: #FFFFFF;25    padding: 0 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    opacity: 0.9;30  }31  .status-left { font-weight: 600; letter-spacing: 1px; font-size: 38px; }32  .status-right { display: flex; align-items: center; gap: 26px; }33  .icon { display: inline-flex; align-items: center; justify-content: center; }34 35  /* Header */36  .header {37    position: absolute;38    top: 140px;39    left: 40px;40    right: 40px;41    height: 220px;42  }43  .back-row { display: flex; align-items: center; gap: 22px; }44  .back-row .label { color: #6F79C8; font-size: 140px; font-weight: 800; line-height: 1; margin-top: 20px; }45  .menu-dots {46    position: absolute;47    top: 40px;48    right: 10px;49    width: 60px;50    height: 150px;51    display: flex;52    align-items: center;53    justify-content: center;54  }55 56  /* Task card */57  .task-card {58    position: absolute;59    left: 40px;60    right: 40px;61    top: 420px;62    height: 220px;63    background: #121212;64    border-radius: 24px;65    box-shadow: 0 2px 0 #0b0b0b inset;66    border: 1px solid #1f1f1f;67    display: flex;68    align-items: center;69    padding: 0 30px;70  }71  .check {72    width: 80px;73    height: 80px;74    border-radius: 50%;75    border: 4px solid #5c5c5c;76    margin-right: 30px;77    box-sizing: border-box;78  }79  .task-content {80    flex: 1;81  }82  .task-title {83    color: #D8D8D8;84    font-size: 54px;85    font-weight: 600;86    margin-bottom: 16px;87  }88  .task-sub {89    display: flex;90    align-items: center;91    gap: 14px;92  }93  .calendar {94    width: 36px;95    height: 36px;96    border-radius: 8px;97    background: #C25C55;98  }99  .sub-text {100    color: #C25C55;101    font-size: 40px;102    font-weight: 600;103  }104  .star {105    width: 70px;106    height: 70px;107    margin-left: auto;108    opacity: 0.85;109  }110 111  /* Divider lines resembling empty list rows */112  .divider {113    position: absolute;114    left: 40px;115    right: 40px;116    height: 1px;117    background: #161616;118  }119  .div1 { top: 700px; }120  .div2 { top: 960px; }121  .div3 { top: 1220px; }122  .div4 { top: 1480px; }123 124  /* Bottom sheet */125  .sheet {126    position: absolute;127    left: 0;128    right: 0;129    bottom: 0;130    height: 1200px;131    background: #1E1A19;132    border-top-left-radius: 56px;133    border-top-right-radius: 56px;134    box-shadow: 0 -12px 24px rgba(0,0,0,0.6);135    color: #F2F2F2;136  }137  .sheet-handle {138    width: 140px;139    height: 14px;140    background: #5e5a59;141    border-radius: 14px;142    position: absolute;143    top: 18px;144    left: 50%;145    transform: translateX(-50%);146    opacity: 0.7;147  }148  .sheet-header {149    position: absolute;150    top: 70px;151    left: 60px;152    right: 60px;153  }154  .sheet-title { font-size: 50px; font-weight: 600; margin-bottom: 10px; }155  .sheet-ellipsis { font-size: 36px; color: #C7C7C7; letter-spacing: 6px; }156 157  .sheet-actions {158    position: absolute;159    top: 210px;160    left: 60px;161    right: 60px;162    display: flex;163    gap: 36px;164  }165  .action-btn {166    display: inline-flex;167    align-items: center;168    gap: 18px;169    padding: 26px 36px;170    border-radius: 22px;171    border: 3px solid #E0A79A;172    color: #E0A79A;173    font-size: 42px;174    font-weight: 700;175    background: transparent;176  }177  .action-btn svg { width: 44px; height: 44px; }178 179  /* Contact share */180  .contact {181    position: absolute;182    top: 380px;183    left: 60px;184    display: flex;185    align-items: center;186    gap: 30px;187  }188  .avatar {189    width: 160px;190    height: 160px;191    border-radius: 50%;192    background: #67A66C;193    color: #0b0b0b;194    display: flex;195    align-items: center;196    justify-content: center;197    font-size: 100px;198    font-weight: 700;199    position: relative;200  }201  .avatar-badge {202    position: absolute;203    right: 6px;204    bottom: 8px;205    width: 48px;206    height: 48px;207    background: #4C8BF5;208    border-radius: 50%;209    border: 6px solid #FFFFFF;210  }211  .contact-text { font-size: 42px; line-height: 1.25; color: #FFFFFF; }212 213  /* App grid */214  .apps {215    position: absolute;216    bottom: 160px;217    left: 60px;218    right: 60px;219    display: flex;220    justify-content: space-between;221    align-items: flex-start;222  }223  .app {224    width: 180px;225    text-align: center;226    color: #FFFFFF;227  }228  .app-icon {229    width: 160px;230    height: 160px;231    border-radius: 50%;232    background: #2A2A2A;233    border: 1px solid #3a3a3a;234    margin: 0 auto 22px;235    display: flex;236    align-items: center;237    justify-content: center;238  }239  .app-label { font-size: 38px; color: #DADADA; }240 241  /* Gesture pill */242  .gesture {243    position: absolute;244    bottom: 52px;245    left: 50%;246    transform: translateX(-50%);247    width: 380px;248    height: 12px;249    background: #E7E7E7;250    border-radius: 12px;251    opacity: 0.85;252  }253</style>254</head>255<body>256<div id="render-target">257 258  <!-- Status bar -->259  <div class="status-bar">260    <div class="status-left">8:19</div>261    <div class="status-right">262      <!-- Cellular -->263      <svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="#FFFFFF" opacity="0.85">264        <path d="M3 20h2v-4H3v4zm4 0h2v-7H7v7zm4 0h2v-10h-2v10zm4 0h2V6h-2v14z"></path>265      </svg>266      <!-- WiFi -->267      <svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">268        <path d="M2 9c5-4 15-4 20 0"></path>269        <path d="M5 12c4-3 10-3 14 0"></path>270        <path d="M8 15c3-2 5-2 8 0"></path>271        <circle cx="12" cy="18" r="1.7" fill="#FFFFFF"></circle>272      </svg>273      <!-- Battery -->274      <svg class="icon" width="48" height="48" viewBox="0 0 28 16" fill="none" stroke="#FFFFFF" stroke-width="2">275        <rect x="1" y="2" width="22" height="12" rx="2"></rect>276        <rect x="3" y="4" width="16" height="8" fill="#FFFFFF"></rect>277        <rect x="23" y="6" width="4" height="4" rx="1" fill="#FFFFFF"></rect>278      </svg>279    </div>280  </div>281 282  <!-- Header -->283  <div class="header">284    <div class="back-row">285      <svg width="64" height="64" viewBox="0 0 24 24" fill="#6F79C8">286        <path d="M15 18l-6-6 6-6" stroke="#6F79C8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>287      </svg>288      <div class="label">Tasks</div>289    </div>290    <div class="menu-dots">291      <svg width="28" height="120" viewBox="0 0 8 24" fill="#6F79C8">292        <circle cx="4" cy="4" r="3"></circle>293        <circle cx="4" cy="12" r="3"></circle>294        <circle cx="4" cy="20" r="3"></circle>295      </svg>296    </div>297  </div>298 299  <!-- Task item -->300  <div class="task-card">301    <div class="check"></div>302    <div class="task-content">303      <div class="task-title">Fun time</div>304      <div class="task-sub">305        <div class="calendar"></div>306        <div class="sub-text">Yesterday</div>307      </div>308    </div>309    <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#8b8b8b" stroke-width="2">310      <path d="M12 3l3.5 7 7.5 1-5.5 5 1.5 7-6-3.5-6 3.5 1.5-7-5.5-5 7.5-1z"></path>311    </svg>312  </div>313 314  <!-- Dividers -->315  <div class="divider div1"></div>316  <div class="divider div2"></div>317  <div class="divider div3"></div>318  <div class="divider div4"></div>319 320  <!-- Bottom sheet -->321  <div class="sheet">322    <div class="sheet-handle"></div>323 324    <div class="sheet-header">325      <div class="sheet-title">Tasks</div>326      <div class="sheet-ellipsis">...</div>327    </div>328 329    <div class="sheet-actions">330      <div class="action-btn">331        <svg viewBox="0 0 24 24" fill="none" stroke="#E0A79A" stroke-width="2">332          <rect x="4" y="4" width="14" height="16" rx="2"></rect>333          <rect x="8" y="2" width="12" height="16" rx="2"></rect>334        </svg>335        <span>Copy</span>336      </div>337      <div class="action-btn">338        <svg viewBox="0 0 24 24" fill="none" stroke="#E0A79A" stroke-width="2" stroke-linecap="round">339          <path d="M4 12c4-4 12-4 16 0"></path>340          <path d="M6 15c3-3 9-3 12 0"></path>341        </svg>342        <span>Nearby</span>343      </div>344    </div>345 346    <div class="contact">347      <div class="avatar">W<div class="avatar-badge"></div></div>348      <div class="contact-text">349        Wm Company<br>Hr No350      </div>351    </div>352 353    <div class="apps">354      <div class="app">355        <div class="app-icon" style="background:#FFFFFF;">356          <!-- Gmail simplified M -->357          <svg width="110" height="70" viewBox="0 0 110 70">358            <path d="M10 60V15l45 30 45-30v45H90V30L55 50 20 30v30z" fill="#EA4335"></path>359          </svg>360        </div>361        <div class="app-label">Gmail</div>362      </div>363      <div class="app">364        <div class="app-icon" style="background:#FFFFFF;">365          <!-- Messages bubble -->366          <svg width="100" height="100" viewBox="0 0 64 64">367            <path d="M10 12h44v28H30l-10 10v-10H10z" fill="#4285F4"></path>368          </svg>369        </div>370        <div class="app-label">Messages</div>371      </div>372      <div class="app">373        <div class="app-icon" style="background:#FFFFFF;">374          <!-- Drive triangle -->375          <svg width="110" height="100" viewBox="0 0 64 64">376            <path d="M20 12h16l16 28-8 12H28L12 40l8-12 12 20h12l-12-20z" fill="#34A853"></path>377          </svg>378        </div>379        <div class="app-label">Drive</div>380      </div>381      <div class="app">382        <div class="app-icon" style="background:#FFFFFF;">383          <!-- Chrome circle -->384          <svg width="120" height="120" viewBox="0 0 64 64">385            <circle cx="32" cy="32" r="28" fill="#EA4335"></circle>386            <path d="M32 32L12 22a28 28 0 0 1 40 2z" fill="#FBBC04" opacity="0.9"></path>387            <path d="M32 32l18 30A28 28 0 0 1 8 40z" fill="#34A853" opacity="0.9"></path>388            <circle cx="32" cy="32" r="10" fill="#4285F4"></circle>389          </svg>390        </div>391        <div class="app-label">Chrome</div>392      </div>393    </div>394 395    <div class="gesture"></div>396  </div>397 398</div>399</body>400</html>