GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Tasks - Mobile UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#3f3f41;color:#fff;12  }13 14  /* Top bars */15  .status-bar{16    height:100px;17    background:linear-gradient(#1976d2,#1e88e5);18    display:flex;align-items:center;justify-content:space-between;19    padding:0 36px;font-size:34px;color:#e8f3ff;letter-spacing:0.5px;20  }21  .status-right{display:flex;gap:26px;align-items:center;}22  .app-bar{23    height:160px;background:#2196f3;24    display:flex;align-items:center;25    padding:0 32px;border-bottom:1px solid rgba(255,255,255,0.15);26  }27  .app-left{display:flex;align-items:center;gap:28px;}28  .title{font-size:64px;font-weight:600;margin-left:16px;}29  .app-actions{margin-left:auto;display:flex;gap:48px;align-items:center;}30 31  /* Content area */32  .content{position:absolute;left:0;right:0;top:260px;bottom:230px;overflow:hidden;}33  .list{34    height:100%;overflow-y:auto;35    border-top:1px solid rgba(255,255,255,0.08);36  }37  .section-title{38    color:#bfe2ff;font-size:44px;font-weight:600;39    padding:28px 36px;border-bottom:1px solid rgba(255,255,255,0.08);40    background:#2f2f31;41  }42  .task{43    padding:36px;border-bottom:1px solid #555;44    background:#3f3f41;45  }46  .task .name{47    font-size:56px;font-weight:600;margin-bottom:18px;color:#fff;48  }49  .meta-row{display:flex;align-items:center;gap:26px;color:#d0d0d0;font-size:34px;margin:10px 0;}50  .meta-row svg{width:36px;height:36px;fill:#bfbfbf;}51  .spacer{flex:1}52  .chev{margin-left:auto;opacity:0.8}53 54  /* Floating action button */55  .fab{56    position:absolute;right:52px;bottom:330px;57    width:150px;height:150px;border-radius:50%;58    background:linear-gradient(#1e88e5,#2196f3);59    box-shadow:0 10px 20px rgba(0,0,0,0.35);60    display:flex;align-items:center;justify-content:center;61  }62 63  /* Bottom ad */64  .ad-bar{65    position:absolute;left:0;right:0;bottom:80px;height:210px;66    background:#ffffff;border-top:1px solid #d0d0d0;color:#222;67    display:flex;align-items:center;gap:26px;padding:24px 36px;68  }69  .ad-img{70    width:140px;height:140px;background:#E0E0E0;border:1px solid #BDBDBD;71    display:flex;align-items:center;justify-content:center;color:#757575;font-size:26px;72  }73  .ad-text{flex:1;font-size:40px;color:#222;}74  .install{75    background:#4CAF50;color:#fff;border:none;border-radius:10px;76    padding:24px 36px;font-size:40px;font-weight:700;77  }78 79  /* Gesture bar */80  .gesture{81    position:absolute;left:50%;transform:translateX(-50%);82    bottom:18px;width:300px;height:12px;border-radius:8px;background:#d9d9d9;opacity:0.9;83  }84 85  /* Simple icon buttons */86  .icon{width:58px;height:58px;fill:#eaf6ff}87  .menu{width:66px;height:66px;fill:#eaf6ff}88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status bar -->94  <div class="status-bar">95    <div>6:37</div>96    <div class="status-right">97      <!-- simple status icons -->98      <svg width="36" height="36" viewBox="0 0 24 24" fill="#eaf6ff" aria-hidden="true"><path d="M12 3C7 3 2.73 5.11 0 8.44L12 21l12-12.56C21.27 5.11 17 3 12 3z"/></svg>99      <svg width="36" height="36" viewBox="0 0 24 24" fill="#eaf6ff" aria-hidden="true"><path d="M12 4c-4.97 0-9 4.03-9 9h2a7 7 0 0114 0h2c0-4.97-4.03-9-9-9z"/></svg>100      <svg width="36" height="36" viewBox="0 0 24 24" fill="#eaf6ff" aria-hidden="true"><path d="M16 4h-8v16h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"/></svg>101    </div>102  </div>103 104  <!-- App bar -->105  <div class="app-bar">106    <div class="app-left">107      <svg class="menu" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>108      <div class="title">Tasks</div>109    </div>110    <div class="app-actions">111      <!-- alarm add -->112      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7.88 3.39L6.6 1.95 2 6.56l1.41 1.41 4.47-4.58zM22 6.56l-4.6-4.61-1.29 1.44 4.47 4.58L22 6.56zM12 6a7 7 0 100 14 7 7 0 000-14zm0 2a5 5 0 110 10 5 5 0 010-10zm-1 3h2v2h2v2h-2v2h-2v-2H9v-2h2v-2z"/></svg>113      <!-- check circle -->114      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm-1 15l-4-4 1.41-1.41L11 13.17l5.59-5.59L18 9l-7 8z"/></svg>115      <!-- search -->116      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1015.5 14l4.5 4.5-1.5 1.5L14 15.5zM6.5 11a4.5 4.5 0 114.5 4.5A4.5 4.5 0 016.5 11z"/></svg>117    </div>118  </div>119 120  <!-- Content -->121  <div class="content">122    <div class="list">123      <div class="section-title">Next 7 days</div>124 125      <div class="task">126        <div style="display:flex;align-items:center;">127          <div class="name">Buy groceries</div>128          <div class="spacer"></div>129          <svg class="chev" width="56" height="56" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M7 10l5 5 5-5H7z"/></svg>130        </div>131        <div class="meta-row">132          <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm0-6C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm.5 5h-1v6l5 3 .5-.86-4.5-2.64V7z"/></svg>133          <span>06:25 PM</span>134          <svg viewBox="0 0 24 24"><path d="M7 7h10v2H7V7zm0 4h10v2H7v-2zm0 4h10v2H7v-2z"/></svg>135          <span>1 day</span>136        </div>137        <div class="meta-row">138          <svg viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15H5V9h14v10z"/></svg>139          <span>Sat, Sep 30, 2023</span>140        </div>141      </div>142 143      <div class="task">144        <div style="display:flex;align-items:center;">145          <div class="name">swimming competition</div>146          <div class="spacer"></div>147          <svg class="chev" width="56" height="56" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M7 10l5 5 5-5H7z"/></svg>148        </div>149        <div class="meta-row">150          <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm0-6C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm.5 5h-1v6l5 3 .5-.86-4.5-2.64V7z"/></svg>151          <span>02:30 PM</span>152          <svg viewBox="0 0 24 24"><path d="M7 7h10v2H7V7zm0 4h10v2H7v-2zm0 4h10v2H7v-2z"/></svg>153          <span>Once</span>154        </div>155        <div class="meta-row">156          <svg viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15H5V9h14v10z"/></svg>157          <span>Wed, Oct 04, 2023</span>158        </div>159      </div>160    </div>161  </div>162 163  <!-- Floating Action Button -->164  <div class="fab">165    <svg width="80" height="80" viewBox="0 0 24 24" fill="#eaf6ff" aria-hidden="true">166      <path d="M22 5l-5-3-1 1.73 5 3L22 5zM3 5l1 1.73 5-3L8 2 3 5zM12 6a8 8 0 108 8 8 8 0 00-8-8zm1 4h-2v2H9v2h2v2h2v-2h2v-2h-2v-2z"/>167    </svg>168  </div>169 170  <!-- Bottom Ad -->171  <div class="ad-bar">172    <div class="ad-img">[IMG: Snapchat Ad]</div>173    <div class="ad-text">Check out Stories on Snap</div>174    <button class="install">INSTALL</button>175  </div>176 177  <!-- Gesture bar -->178  <div class="gesture"></div>179 180</div>181</body>182</html>