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 UI Mock</title>7<style>8  :root{9    --bg:#F5F5F5;10    --white:#FFFFFF;11    --text:#212121;12    --muted:#757575;13    --red:#F44336;14    --chip-border:#CFCFCF;15    --shadow:0 6px 18px rgba(0,0,0,0.12);16  }17  body{ margin:0; padding:0; background:transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }18  #render-target{19    width:1080px; height:2400px; position:relative; overflow:hidden;20    background:var(--bg);21  }22  /* Status bar */23  .status-bar{24    height:92px; background:var(--white); display:flex; align-items:center; padding:0 34px;25    box-shadow:0 1px 0 rgba(0,0,0,0.06);26    font-size:28px; color:#666;27  }28  .status-icons{ margin-left:auto; display:flex; gap:20px; align-items:center; }29  .dot{ width:10px; height:10px; background:#888; border-radius:50%; display:inline-block; }30  /* App bar */31  .app-bar{32    height:120px; background:var(--white); display:flex; align-items:center; padding:0 28px;33    border-bottom:1px solid #eee;34  }35  .app-title{ flex:1; text-align:center; font-size:46px; font-weight:600; color:var(--text); letter-spacing:0.3px; }36  .icon-btn{ width:80px; height:80px; display:flex; align-items:center; justify-content:center; cursor:default; }37  .icon{ width:44px; height:44px; }38  /* Red warning banner */39  .warning{40    background:var(--red); color:#fff; padding:28px 30px; display:flex; align-items:flex-start; gap:24px;41  }42  .warning .close{ margin-left:auto; opacity:.9; }43  .warning-title{ font-size:36px; font-weight:700; line-height:1.2; }44  .warning-sub{ font-size:28px; opacity:.95; margin-top:6px; }45  /* Content area */46  .content{ padding:34px 34px 180px 34px; }47  .card{48    background:var(--white); border-radius:22px; box-shadow:var(--shadow);49    padding:30px; margin:26px 6px; position:relative;50  }51  .card-row{ display:flex; align-items:center; }52  .card-title{ font-size:42px; font-weight:700; color:var(--text); flex:1; }53  .card-sub{ font-size:28px; color:var(--muted); margin-top:8px; }54  .small-muted{ color:#9E9E9E; font-size:26px; margin-bottom:8px; }55  .chips{ display:flex; flex-wrap:wrap; gap:18px; margin-top:20px; }56  .chip{57    display:inline-flex; align-items:center; gap:14px; padding:14px 20px;58    border:2px solid var(--chip-border); border-radius:38px; color:#606060; background:#fff;59    font-size:28px;60  }61  .chip .chip-ic{ width:34px; height:34px; }62  .section-date{ color:#666; font-weight:600; font-size:32px; margin:44px 16px 8px; }63  /* Bottom navigation */64  .bottom-nav{65    position:absolute; left:0; right:0; bottom:0;66    height:180px; background:var(--white); border-top:1px solid #e9e9e9;67    display:flex; justify-content:space-around; align-items:center;68  }69  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:12px; color:#202020; font-size:28px; }70  .nav-item .nav-ic{ width:54px; height:54px; }71  .nav-item.active{ color:var(--red); }72  /* FAB */73  .fab{74    position:absolute; right:56px; bottom:220px; width:150px; height:150px;75    background:var(--red); border-radius:50%; box-shadow:0 12px 26px rgba(0,0,0,.24);76    display:flex; align-items:center; justify-content:center;77  }78  .home-indicator{79    position:absolute; left:50%; transform:translateX(-50%); bottom:190px;80    width:300px; height:10px; background:#BDBDBD; border-radius:8px; opacity:.7;81  }82</style>83</head>84<body>85<div id="render-target">86 87  <!-- Status bar -->88  <div class="status-bar">89    <div>7:56</div>90    <div class="status-icons">91      <span class="dot"></span><span class="dot"></span><span class="dot"></span>92      <span class="dot"></span><span class="dot"></span>93    </div>94  </div>95 96  <!-- App bar -->97  <div class="app-bar">98    <div class="icon-btn" aria-hidden="true">99      <svg class="icon" viewBox="0 0 24 24"><path fill="#333" d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/></svg>100    </div>101    <div class="app-title">Tasks</div>102    <div class="icon-btn" aria-hidden="true">103      <svg class="icon" viewBox="0 0 24 24"><path fill="#333" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.71.71l.27.28v.79l5 4.99L20.49 19l-4.99-5zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>104    </div>105  </div>106 107  <!-- Warning banner -->108  <div class="warning">109    <div class="icon-btn" aria-hidden="true" style="padding:0;">110      <svg class="icon" viewBox="0 0 24 24">111        <path fill="#fff" d="M12 2l7 4v6c0 5-3 9-7 10-4-1-7-5-7-10V6l7-4z"/>112        <rect x="11" y="7" width="2" height="7" fill="#fff"></rect>113        <circle cx="12" cy="16.5" r="1.2" fill="#fff"></circle>114      </svg>115    </div>116    <div style="flex:1;">117      <div class="warning-title">Critical Permission Not Granted</div>118      <div class="warning-sub">Without this permission the application will not work reliably</div>119    </div>120    <div class="icon-btn close" aria-hidden="true">121      <svg class="icon" viewBox="0 0 24 24"><path fill="#fff" d="M18.3 5.71L12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.3 19.71 2.89 18.3 9.17 12 2.89 5.71 4.3 4.3l6.29 6.3 6.29-6.3z"/></svg>122    </div>123  </div>124 125  <!-- Content -->126  <div class="content">127    <!-- Partial top card hint -->128    <div class="card" style="opacity:.98;">129      <div class="card-title" style="font-weight:600;">Carlos birthday</div>130      <div class="chips">131        <div class="chip">132          <svg class="chip-ic" viewBox="0 0 24 24"><path fill="#777" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6c0-1.1-.9-2-2-2zm0 15H5V9h14v10z"/></svg>133          <span>9/30/2023</span>134        </div>135        <div class="chip">136          <svg class="chip-ic" viewBox="0 0 24 24"><path fill="#777" d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 11H7v-2h4V6h2v7z"/></svg>137          <span>7:00 PM</span>138        </div>139        <div class="chip">140          <svg class="chip-ic" viewBox="0 0 24 24"><path fill="#777" d="M7 7h6V5H5v8h2V7zm10 10H11v2h8v-8h-2v6zM7 13l-4 4 4 4v-3h10v-2H7v-3z"/></svg>141          <span>Yearly</span>142        </div>143      </div>144    </div>145 146    <!-- Main card -->147    <div class="card">148      <div class="small-muted">Postponed: 9/30/2023 at 7:15 PM</div>149      <div class="card-row">150        <div class="card-title">Wedding anniversary of Carlos</div>151        <div class="icon-btn" aria-hidden="true">152          <svg class="icon" viewBox="0 0 24 24"><path fill="#444" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill-opacity="0" stroke="#444" stroke-width="1.5"/></svg>153        </div>154        <div class="icon-btn" aria-hidden="true">155          <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#444"/><circle cx="12" cy="12" r="2" fill="#444"/><circle cx="12" cy="19" r="2" fill="#444"/></svg>156        </div>157      </div>158      <div class="card-sub">To buy gift for carlos</div>159      <div class="chips">160        <div class="chip">161          <svg class="chip-ic" viewBox="0 0 24 24"><path fill="#777" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6c0-1.1-.9-2-2-2zm0 15H5V9h14v10z"/></svg>162          <span>9/30/2023</span>163        </div>164        <div class="chip">165          <svg class="chip-ic" viewBox="0 0 24 24"><path fill="#777" d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 11H7v-2h4V6h2v7z"/></svg>166          <span>7:00 PM</span>167        </div>168        <div class="chip">169          <svg class="chip-ic" viewBox="0 0 24 24"><path fill="#777" d="M7 7h6V5H5v8h2V7zm10 10H11v2h8v-8h-2v6zM7 13l-4 4 4 4v-3h10v-2H7v-3z"/></svg>170          <span>Once</span>171        </div>172      </div>173    </div>174 175    <div class="section-date">10/3/2023</div>176 177    <!-- Accounts card -->178    <div class="card">179      <div class="card-row">180        <div class="card-title">My Accounts</div>181        <div class="icon-btn" aria-hidden="true">182          <svg class="icon" viewBox="0 0 24 24"><path fill="#444" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill-opacity="0" stroke="#444" stroke-width="1.5"/></svg>183        </div>184        <div class="icon-btn" aria-hidden="true">185          <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#444"/><circle cx="12" cy="12" r="2" fill="#444"/><circle cx="12" cy="19" r="2" fill="#444"/></svg>186        </div>187      </div>188      <div class="card-sub" style="color:#424242; margin-top:12px;">189        Email: fAbioteixeira00123@gmail.com<br>190        Password: Fabio@00123191      </div>192      <div class="small-muted" style="margin-top:10px;">+ 1 entity</div>193      <div class="chips">194        <div class="chip">195          <svg class="chip-ic" viewBox="0 0 24 24"><path fill="#777" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6c0-1.1-.9-2-2-2zm0 15H5V9h14v10z"/></svg>196          <span>10/3/2023</span>197        </div>198        <div class="chip">199          <svg class="chip-ic" viewBox="0 0 24 24"><path fill="#777" d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 11H7v-2h4V6h2v7z"/></svg>200          <span>7:00 PM</span>201        </div>202        <div class="chip">203          <svg class="chip-ic" viewBox="0 0 24 24"><path fill="#777" d="M7 7h6V5H5v8h2V7zm10 10H11v2h8v-8h-2v6zM7 13l-4 4 4 4v-3h10v-2H7v-3z"/></svg>204          <span>Once</span>205        </div>206      </div>207    </div>208  </div>209 210  <!-- Home indicator -->211  <div class="home-indicator"></div>212 213  <!-- Floating Action Button -->214  <div class="fab" aria-hidden="true">215    <svg viewBox="0 0 24 24" width="84" height="84"><path fill="#fff" d="M19 11H13V5h-2v6H5v2h6v6h2v-6h6z"/></svg>216  </div>217 218  <!-- Bottom Navigation -->219  <div class="bottom-nav">220    <div class="nav-item">221      <svg class="nav-ic" viewBox="0 0 24 24"><path fill="#333" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6c0-1.1-.9-2-2-2zm0 15H5V9h14v10z"/></svg>222      <div>Calendar</div>223    </div>224    <div class="nav-item active">225      <svg class="nav-ic" viewBox="0 0 24 24"><path fill="#F44336" d="M19 3H5a2 2 0 0 0-2 2v14l4-3h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/></svg>226      <div>Tasks</div>227    </div>228    <div class="nav-item">229      <svg class="nav-ic" viewBox="0 0 24 24"><path fill="#333" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill-opacity="0" stroke="#333" stroke-width="1.5"/></svg>230      <div>Favorites</div>231    </div>232    <div class="nav-item">233      <svg class="nav-ic" viewBox="0 0 24 24"><path fill="#333" d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"/></svg>234      <div>Planning</div>235    </div>236  </div>237 238</div>239</body>240</html>