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<style>7  body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#d8dee8; border-radius:18px;11  }12 13  /* Header / App Bar */14  .header {15    position:absolute; left:0; top:0; width:1080px; height:430px;16    background:#3d526b; color:#fff;17  }18  .statusbar {19    height:110px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; opacity:0.95;20    font-size:42px; letter-spacing:1px;21  }22  .status-right { display:flex; align-items:center; gap:30px; }23  .status-dot { width:12px; height:12px; background:#cfd8dc; border-radius:50%; }24 25  .appbar {26    height:120px; padding:0 32px; display:flex; align-items:center; gap:28px;27  }28  .title { font-size:64px; font-weight:600; }29  .appbar-actions { margin-left:auto; display:flex; align-items:center; gap:34px; }30 31  .chip-row {32    display:flex; align-items:center; gap:26px;33    padding:22px 28px 26px 28px;34  }35  .chip {36    font-size:42px; color:#d8dee8; background:#334b64;37    border:2px solid #2a445c; border-radius:44px;38    padding:18px 28px; box-shadow: inset 0 0 0 0 rgba(0,0,0,0.2);39  }40  .chip.active {41    border-color:#e6d05e;42    box-shadow: 0 0 0 4px rgba(230,208,94,0.25);43  }44 45  /* Content */46  .content {47    position:absolute; left:0; right:0; top:430px; bottom:0;48  }49 50  .ad-wrapper {51    padding:20px 32px;52  }53  .img-placeholder {54    width:1016px; height:170px; margin:0 auto;55    background:#E0E0E0; border:1px solid #BDBDBD;56    display:flex; justify-content:center; align-items:center;57    color:#757575; font-size:40px;58  }59 60  .list {61    margin-top:14px; background:transparent;62  }63  .item {64    padding:40px 40px 36px 40px;65    border-top:1px solid #b6bdc7;66  }67  .item-title { font-size:56px; color:#2b3138; margin-bottom:14px; }68  .item-meta { font-size:40px; color:#6f7986; margin-bottom:8px; }69  .item-sub { font-size:38px; color:#7b858f; }70 71  /* FAB */72  .fab {73    position:absolute; right:84px; bottom:360px;74    width:160px; height:160px; border-radius:50%;75    background:#2f4a63; box-shadow: 0 18px 24px rgba(0,0,0,0.25);76    display:flex; align-items:center; justify-content:center;77  }78  .fab svg { width:72px; height:72px; }79 80  /* Bottom tabs */81  .bottom-tabs {82    position:absolute; left:0; right:0; bottom:220px;83    padding:0 64px; display:flex; justify-content:space-between; align-items:center;84  }85  .tab { font-size:44px; color:#3a3f45; }86  .tab.active { font-weight:800; text-decoration:underline; }87 88  /* Simple icon styles */89  .icon { width:56px; height:56px; }90  .icon stroke { stroke:#fff; }91  .icon path, .icon line, .icon circle { stroke:#fff; stroke-width:6; fill:none; stroke-linecap:round; stroke-linejoin:round; }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Top Header -->98  <div class="header">99    <div class="statusbar">100      <div>7:21</div>101      <div class="status-right">102        <div class="status-dot"></div>103        <div class="status-dot"></div>104        <div class="status-dot"></div>105        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 8h18v8H3z"></path></svg>106      </div>107    </div>108 109    <div class="appbar">110      <!-- Hamburger -->111      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">112        <line x1="3" y1="6" x2="21" y2="6"></line>113        <line x1="3" y1="12" x2="21" y2="12"></line>114        <line x1="3" y1="18" x2="15" y2="18"></line>115      </svg>116 117      <div class="title">Reminder</div>118 119      <div class="appbar-actions">120        <!-- Search -->121        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">122          <circle cx="11" cy="11" r="6"></circle>123          <line x1="16" y1="16" x2="21" y2="21"></line>124        </svg>125        <!-- Filter -->126        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">127          <path d="M3 6h18M7 12h10M10 18h4"></path>128        </svg>129      </div>130    </div>131 132    <div class="chip-row">133      <div class="chip active">All</div>134      <div class="chip">Critical</div>135      <div class="chip">Important</div>136      <div class="chip">Favorites</div>137      <div class="chip">Optional</div>138    </div>139  </div>140 141  <!-- Content Area -->142  <div class="content">143 144    <div class="ad-wrapper">145      <div class="img-placeholder">[IMG: Ad Banner]</div>146    </div>147 148    <div class="list">149      <div class="item">150        <div class="item-title">Cook</div>151        <div class="item-meta">09/27/2023&nbsp;&nbsp;7:09 PM</div>152        <div class="item-sub">One Time</div>153      </div>154 155      <div class="item">156        <div class="item-title">Noida visit</div>157        <div class="item-meta">06/28/2023&nbsp;&nbsp;5:30 PM</div>158        <div class="item-sub">One Time</div>159      </div>160 161      <div class="item">162        <div class="item-title">Vivek marriage</div>163        <div class="item-meta">06/22/2023&nbsp;&nbsp;9:00 PM</div>164        <div class="item-sub">One Time</div>165      </div>166 167      <div class="item">168        <div class="item-title">movie</div>169        <div class="item-meta">06/15/2023&nbsp;&nbsp;9:30 PM</div>170        <div class="item-sub">One Time</div>171      </div>172    </div>173 174    <!-- Floating Action Button -->175    <div class="fab">176      <svg viewBox="0 0 24 24" aria-hidden="true">177        <line x1="12" y1="5" x2="12" y2="19" stroke="#ffffff" stroke-width="3" />178        <line x1="5" y1="12" x2="19" y2="12" stroke="#ffffff" stroke-width="3" />179      </svg>180    </div>181 182    <!-- Bottom Tabs -->183    <div class="bottom-tabs">184      <div class="tab">ACTIVE</div>185      <div class="tab active">COMPLETED</div>186    </div>187 188  </div>189 190</div>191</body>192</html>