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>Notes UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0F2324; /* deep teal/black */15    color: #D7E4E4;16  }17 18  /* Top search area */19  .search-wrapper {20    position: absolute;21    left: 36px;22    right: 36px;23    top: 120px;24    height: 110px;25    background: #1A3436;26    border-radius: 60px;27    display: flex;28    align-items: center;29    padding: 0 28px;30  }31  .search-text {32    flex: 1;33    color: #A2B7B8;34    font-size: 36px;35  }36  .icon-btn {37    width: 80px;38    height: 80px;39    border-radius: 16px;40    display: grid;41    place-items: center;42    margin-left: 12px;43    background: rgba(255,255,255,0.04);44    border: 1px solid #274043;45  }46  .avatar {47    margin-left: 16px;48    width: 84px;49    height: 84px;50    border-radius: 50%;51    background: #0C7C6E;52    display: grid;53    place-items: center;54    font-weight: bold;55    color: #E7F4F4;56    letter-spacing: 0.5px;57  }58 59  /* Cards grid */60  .cards {61    position: absolute;62    left: 36px;63    right: 36px;64    top: 270px;65    display: grid;66    grid-template-columns: repeat(2, 1fr);67    gap: 36px;68  }69  .card {70    height: 330px;71    border: 3px solid #2A4042;72    border-radius: 36px;73    padding: 32px;74    box-sizing: border-box;75    background: rgba(255,255,255,0.02);76  }77  .card h3 {78    margin: 0 0 16px 0;79    font-size: 42px;80    font-weight: 700;81    color: #E0EEEE;82    line-height: 1.15;83  }84  .card p {85    margin: 0;86    font-size: 32px;87    color: #9BB0B1;88  }89 90  /* Floating action button */91  .fab {92    position: absolute;93    right: 56px;94    bottom: 220px;95    width: 150px;96    height: 150px;97    border-radius: 40px;98    background: #11302F;99    box-shadow: 0 18px 32px rgba(0,0,0,0.6);100  }101  .fab .plus {102    position: absolute;103    left: 50%;104    top: 50%;105    width: 0;106    height: 0;107    transform: translate(-50%, -50%);108  }109  .fab .bar {110    position: absolute;111    border-radius: 6px;112  }113  /* Horizontal bars */114  .fab .bar.h.left {115    width: 50px; height: 16px; left: -50px; top: -8px; background: #4285F4;116  }117  .fab .bar.h.right {118    width: 50px; height: 16px; left: 0px; top: -8px; background: #DB4437;119  }120  /* Vertical bars */121  .fab .bar.v.top {122    width: 16px; height: 50px; left: -8px; top: -50px; background: #0F9D58;123  }124  .fab .bar.v.bottom {125    width: 16px; height: 50px; left: -8px; top: 0px; background: #F4B400;126  }127 128  /* Bottom bar */129  .bottom-bar {130    position: absolute;131    left: 0;132    bottom: 0;133    width: 1080px;134    height: 180px;135    background: #162E30;136    border-top: 1px solid #243D3F;137  }138  .bottom-actions {139    position: absolute;140    left: 60px;141    right: 60px;142    top: 26px;143    display: flex;144    justify-content: space-between;145    align-items: center;146  }147  .bottom-actions .act {148    width: 120px;149    height: 120px;150    display: grid;151    place-items: center;152  }153  .gesture {154    position: absolute;155    left: 50%;156    bottom: 20px;157    transform: translateX(-50%);158    width: 300px;159    height: 12px;160    background: #E9E9E9;161    border-radius: 8px;162    opacity: 0.9;163  }164 165  /* SVG baseline color */166  svg { width: 56px; height: 56px; }167  .icon-stroke { stroke: #9AB7B9; stroke-width: 3; fill: none; }168  .icon-fill { fill: #9AB7B9; }169</style>170</head>171<body>172<div id="render-target">173 174  <!-- Search bar -->175  <div class="search-wrapper">176    <!-- Hamburger -->177    <svg viewBox="0 0 24 24" class="icon-fill" style="margin-right:16px;">178      <rect x="2" y="5" width="20" height="2" rx="1"></rect>179      <rect x="2" y="11" width="20" height="2" rx="1"></rect>180      <rect x="2" y="17" width="20" height="2" rx="1"></rect>181    </svg>182    <div class="search-text">Search your notes</div>183    <!-- Layout toggle icon -->184    <div class="icon-btn">185      <svg viewBox="0 0 24 24" class="icon-stroke">186        <rect x="4" y="5" width="16" height="6" rx="2"></rect>187        <rect x="4" y="13" width="16" height="6" rx="2"></rect>188      </svg>189    </div>190    <!-- Avatar -->191    <div class="avatar">C</div>192  </div>193 194  <!-- Notes grid -->195  <div class="cards">196    <div class="card">197      <h3>Grocery Store Lidl</h3>198      <p>Corn syrup and Jam</p>199    </div>200    <div class="card">201      <h3>Grocery Shopping list</h3>202      <p>Rice, Pulse and Bread</p>203    </div>204    <div class="card">205      <h3>XYZ</h3>206      <p>Mac</p>207    </div>208    <div class="card">209      <h3>My book recommendation</h3>210      <p>Chetan Bhagat</p>211    </div>212  </div>213 214  <!-- Floating action button -->215  <div class="fab">216    <div class="plus">217      <div class="bar h left"></div>218      <div class="bar h right"></div>219      <div class="bar v top"></div>220      <div class="bar v bottom"></div>221    </div>222  </div>223 224  <!-- Bottom navigation -->225  <div class="bottom-bar">226    <div class="bottom-actions">227      <div class="act">228        <!-- Checklist icon -->229        <svg viewBox="0 0 24 24" class="icon-stroke">230          <rect x="3" y="3" width="18" height="18" rx="3"></rect>231          <path d="M7 12l3 3 7-7" class="icon-stroke"></path>232        </svg>233      </div>234      <div class="act">235        <!-- Brush/Pencil icon -->236        <svg viewBox="0 0 24 24" class="icon-stroke">237          <path d="M4 20c3 0 4-1 5-2l9-9a2 2 0 0 0-3-3l-9 9c-1 1-2 2-2 5z"></path>238        </svg>239      </div>240      <div class="act">241        <!-- Mic icon -->242        <svg viewBox="0 0 24 24" class="icon-stroke">243          <rect x="8" y="4" width="8" height="10" rx="4"></rect>244          <path d="M5 10a7 7 0 0 0 14 0M12 17v4"></path>245        </svg>246      </div>247      <div class="act">248        <!-- Image icon -->249        <svg viewBox="0 0 24 24" class="icon-stroke">250          <rect x="3" y="4" width="18" height="16" rx="2"></rect>251          <circle cx="9" cy="10" r="2" class="icon-stroke"></circle>252          <path d="M4 17l5-4 3 3 4-3 4 4"></path>253        </svg>254      </div>255    </div>256    <div class="gesture"></div>257  </div>258 259</div>260</body>261</html>