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>Inbox UI</title>7<style>8  :root{9    --bg:#000000;10    --card:#1f1f1f;11    --text:#e6e6e6;12    --muted:#9e9e9e;13    --blue:#4a6fff;14    --divider:#2a2a2a;15  }16  body{margin:0;padding:0;background:transparent;font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;}17  #render-target{18    width:1080px;height:2400px;position:relative;overflow:hidden;19    background:var(--bg);border-radius:36px;20    box-shadow:0 10px 40px rgba(0,0,0,0.4);21  }22 23  /* Status bar */24  .status-bar{25    position:absolute;top:0;left:0;width:100%;height:120px;26    padding:28px 40px 0 40px;color:#ffffff;font-size:40px;27    display:flex;align-items:center;justify-content:space-between;28  }29  .status-right{display:flex;align-items:center;gap:26px;}30  .icon-small svg{width:40px;height:40px;fill:#ffffff;opacity:0.9;}31 32  /* Top app bar */33  .top-app-bar{34    position:absolute;top:120px;left:0;width:100%;height:120px;35    display:flex;align-items:center;justify-content:space-between;36    padding:0 36px;color:#fff;37  }38  .app-left{display:flex;align-items:center;gap:28px;}39  .hamburger svg{width:56px;height:56px;fill:#ffffff;opacity:0.9;}40  .title{font-size:64px;font-weight:700;letter-spacing:0.2px;}41  .more-vert{width:64px;height:64px;display:flex;align-items:center;justify-content:center;}42  .more-vert span{display:block;width:12px;height:12px;background:#cfcfcf;border-radius:50%;margin:4px 0;}43 44  /* Card list */45  .card{46    position:absolute;top:240px;left:28px;right:28px;47    background:var(--card);border-radius:28px;48    box-shadow:0 6px 20px rgba(0,0,0,0.35);49    padding:18px 0;50  }51  .list-item{52    display:flex;align-items:center;justify-content:space-between;53    padding:40px 40px;border-bottom:1px solid var(--divider);54  }55  .list-item:last-child{border-bottom:none;padding-bottom:48px;}56  .left-side{display:flex;align-items:center;gap:30px;}57  .checkbox{58    width:54px;height:54px;border:3px solid #8b8b8b;border-radius:8px;59    box-sizing:border-box;60  }61  .item-text{font-size:48px;color:var(--text);}62  .right-side{display:flex;align-items:center;gap:24px;}63  .date{color:var(--blue);font-size:40px;font-weight:600;}64  .mini-icons{display:flex;align-items:center;gap:18px;}65  .mini-icons svg{width:40px;height:40px;fill:#8b8b8b;}66 67  /* Bottom nav */68  .bottom-nav{69    position:absolute;bottom:120px;left:0;width:100%;height:120px;70    display:flex;align-items:center;justify-content:space-between;71    padding:0 80px;72  }73  .nav-btn{width:96px;height:96px;border-radius:20px;display:flex;align-items:center;justify-content:center;}74  .nav-btn svg{width:60px;height:60px;}75  .nav-btn.active{background:var(--blue);}76  .nav-btn.active svg{fill:#ffffff;}77  .nav-btn.inactive svg{fill:#bdbdbd;}78 79  /* FAB */80  .fab{81    position:absolute;right:64px;bottom:232px;width:176px;height:176px;border-radius:50%;82    background:var(--blue);box-shadow:0 16px 28px rgba(0,0,0,0.5);83    display:flex;align-items:center;justify-content:center;84  }85  .fab svg{width:96px;height:96px;fill:#ffffff;}86 87  /* Gesture bar */88  .gesture{89    position:absolute;bottom:40px;left:50%;transform:translateX(-50%);90    width:520px;height:18px;background:#e6e6e6;border-radius:9px;opacity:0.95;91  }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status bar -->98  <div class="status-bar">99    <div>1:58</div>100    <div class="status-right">101      <div class="icon-small">102        <!-- envelope/minimal icon -->103        <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm1.8 2l7.2 5 7.2-5H4.8z"/></svg>104      </div>105      <div class="icon-small">106        <!-- wifi -->107        <svg viewBox="0 0 24 24"><path d="M12 18.5l1.9-2a2.6 2.6 0 0 0-3.8 0L12 18.5zm-4.9-4.9a7.4 7.4 0 0 1 9.8 0l1.5-1.5a9.5 9.5 0 0 0-12.8 0l1.5 1.5zm-3.4-3.4a12.6 12.6 0 0 1 16.6 0l1.5-1.5a14.7 14.7 0 0 0-19.6 0l1.5 1.5z"/></svg>108      </div>109      <div class="icon-small">110        <!-- battery -->111        <svg viewBox="0 0 24 24"><path d="M18 7h1v10h-1v2H4V5h14v2zM6 7v10h10V7H6z"/></svg>112      </div>113    </div>114  </div>115 116  <!-- Top App Bar -->117  <div class="top-app-bar">118    <div class="app-left">119      <div class="hamburger">120        <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>121      </div>122      <div class="title">Inbox</div>123    </div>124    <div class="more-vert">125      <span></span><span></span><span></span>126    </div>127  </div>128 129  <!-- Tasks Card -->130  <div class="card">131    <div class="list-item">132      <div class="left-side">133        <div class="checkbox"></div>134        <div class="item-text">Sanju´s engagement</div>135      </div>136      <div class="right-side">137        <div class="date">Aug 12</div>138        <div class="mini-icons">139          <!-- note -->140          <svg viewBox="0 0 24 24"><path d="M5 3h12l4 4v14H5V3zm11 1v5h5l-5-5zM7 8h8v2H7V8zm0 4h8v2H7v-2z"/></svg>141          <!-- alarm -->142          <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm1 4h-2v6h6v-2h-4zM4.2 6.2l3-2.4 1.2 1.6-3 2.3-1.2-1.5zm14.6 1.5-3-2.3 1.2-1.6 3 2.4-1.2 1.5z"/></svg>143        </div>144      </div>145    </div>146 147    <div class="list-item">148      <div class="left-side">149        <div class="checkbox"></div>150        <div class="item-text">Shimla tour</div>151      </div>152      <div class="right-side">153        <div class="date">Aug 16</div>154        <div class="mini-icons">155          <svg viewBox="0 0 24 24"><path d="M5 3h12l4 4v14H5V3zm11 1v5h5l-5-5zM7 8h8v2H7V8zm0 4h8v2H7v-2z"/></svg>156          <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm1 4h-2v6h6v-2h-4zM4.2 6.2l3-2.4 1.2 1.6-3 2.3-1.2-1.5zm14.6 1.5-3-2.3 1.2-1.6 3 2.4-1.2 1.5z"/></svg>157        </div>158      </div>159    </div>160 161    <div class="list-item">162      <div class="left-side">163        <div class="checkbox"></div>164        <div class="item-text">Doctors appointment for routine chec...</div>165      </div>166      <div class="right-side">167        <div class="date">02:00PM</div>168        <div class="mini-icons">169          <svg viewBox="0 0 24 24"><path d="M5 3h12l4 4v14H5V3zm11 1v5h5l-5-5zM7 8h8v2H7V8zm0 4h8v2H7v-2z"/></svg>170          <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm1 4h-2v6h6v-2h-4zM4.2 6.2l3-2.4 1.2 1.6-3 2.3-1.2-1.5zm14.6 1.5-3-2.3 1.2-1.6 3 2.4-1.2 1.5z"/></svg>171        </div>172      </div>173    </div>174 175    <div class="list-item">176      <div class="left-side">177        <div class="checkbox"></div>178        <div class="item-text">Client meeting</div>179      </div>180      <div class="right-side">181        <div class="date">Tomorrow</div>182        <div class="mini-icons">183          <svg viewBox="0 0 24 24"><path d="M5 3h12l4 4v14H5V3zm11 1v5h5l-5-5zM7 8h8v2H7V8zm0 4h8v2H7v-2z"/></svg>184          <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm1 4h-2v6h6v-2h-4zM4.2 6.2l3-2.4 1.2 1.6-3 2.3-1.2-1.5zm14.6 1.5-3-2.3 1.2-1.6 3 2.4-1.2 1.5z"/></svg>185        </div>186      </div>187    </div>188 189    <div class="list-item">190      <div class="left-side">191        <div class="checkbox"></div>192        <div class="item-text">Mumma's anniversary celebration</div>193      </div>194      <div class="right-side">195        <div class="date">Aug 22</div>196        <div class="mini-icons">197          <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm1 4h-2v6h6v-2h-4zM4.2 6.2l3-2.4 1.2 1.6-3 2.3-1.2-1.5zm14.6 1.5-3-2.3 1.2-1.6 3 2.4-1.2 1.5z"/></svg>198        </div>199      </div>200    </div>201  </div>202 203  <!-- Bottom navigation -->204  <div class="bottom-nav">205    <div class="nav-btn active">206      <!-- check in square -->207      <svg viewBox="0 0 24 24"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm3 9 2 2 6-6 1.4 1.4-7.4 7.6-3.4-3.6L8 12z"/></svg>208    </div>209    <div class="nav-btn inactive">210      <!-- calendar -->211      <svg viewBox="0 0 24 24"><path d="M7 2h2v3h6V2h2v3h3v17H4V5h3V2zm-1 7h12v10H6V9z"/></svg>212    </div>213    <div class="nav-btn inactive">214      <!-- settings/gear simplified -->215      <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm8.5 4-2.2.7.1 2.4 2.1.9-1.6 2.7-2.3-1.1-1.8 1.6L12 20l-1.8-1.8-2.3 1.1-1.6-2.7 2.1-.9.1-2.4-2.2-.7.7-3 2.3.5 1.5-1.9L12 4l2.2 1.6 1.5 1.9 2.3-.5.5 3z"/></svg>216    </div>217  </div>218 219  <!-- Floating Action Button -->220  <div class="fab">221    <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>222  </div>223 224  <!-- Gesture bar -->225  <div class="gesture"></div>226 227</div>228</body>229</html>