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>Note App UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  * { box-sizing: border-box; }10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #0B0B0D;16    color: #F2F2F2;17    font-family: "Segoe UI", Roboto, Arial, sans-serif;18  }19 20  /* Status bar */21  .statusbar {22    height: 110px;23    padding: 0 40px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #EDEDED;28    opacity: 0.9;29    font-weight: 600;30    letter-spacing: 0.4px;31  }32  .status-right { display: flex; align-items: center; gap: 18px; }33  .wifi svg, .battery svg { display: block; }34 35  /* Header */36  .header {37    padding: 10px 48px 24px 48px;38    position: relative;39  }40  .header-row {41    display: flex;42    align-items: center;43    gap: 28px;44  }45  .menu-icon {46    width: 60px; height: 60px; border-radius: 12px;47    display: inline-flex; align-items: center; justify-content: center;48    color: #EDEDED;49  }50  .title {51    font-size: 64px; font-weight: 700; letter-spacing: 0.5px;52  }53  .search-box {54    position: absolute;55    right: 48px;56    top: 48px;57    width: 120px; height: 120px; border-radius: 26px;58    background: #3F3F45;59    display: flex; align-items: center; justify-content: center;60    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);61  }62  .search-box svg { width: 52px; height: 52px; }63 64  /* Ad banner */65  .ad-banner {66    margin: 8px 48px 28px 48px;67    background: #3D3D42;68    border-radius: 26px;69    height: 170px;70    display: flex;71    align-items: center;72    padding: 0 24px;73    gap: 24px;74    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);75  }76  .img-ph {77    width: 120px; height: 120px;78    background: #E0E0E0; border: 1px solid #BDBDBD;79    border-radius: 16px;80    color: #757575;81    display: flex; align-items: center; justify-content: center;82    font-size: 22px;83    text-align: center;84    padding: 6px;85  }86  .ad-text { flex: 1; }87  .ad-text .brand { font-size: 40px; font-weight: 700; }88  .ad-text .desc { font-size: 26px; color: #CFCFCF; margin-top: 4px; }89  .ad-cta {90    background: #F39A1F; color: #fff;91    height: 100px; padding: 0 36px;92    border-radius: 50px; font-size: 30px; font-weight: 700;93    display: flex; align-items: center; justify-content: center;94    white-space: nowrap;95  }96 97  /* Filters / chips */98  .filters {99    display: flex; align-items: center;100    margin: 12px 48px 22px 48px;101    gap: 20px;102  }103  .chip {104    height: 86px; padding: 0 32px;105    border-radius: 22px; display: inline-flex;106    align-items: center; gap: 14px;107    background: #3D3D42; color: #EDEDED;108    font-size: 32px; font-weight: 600;109    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);110  }111  .chip.orange { background: #F39A1F; color: #0B0B0D; }112  .chip .caret svg, .chip .sort svg { width: 26px; height: 26px; }113  .grid-chip { margin-left: auto; }114  .grid-icon svg { width: 40px; height: 40px; }115 116  /* Note card */117  .note-card {118    margin: 18px 0 0 48px;119    width: 720px; height: 320px;120    border-radius: 34px;121    background: #6B652F;122    padding: 36px;123    color: #fff;124    box-shadow: 0 8px 20px rgba(0,0,0,0.35);125  }126  .note-title { font-size: 48px; font-weight: 800; margin-bottom: 18px; }127  .note-content { font-size: 34px; color: #E9E9E9; }128  .note-date { position: absolute; bottom: 36px; right: 36px; font-size: 30px; color: #E9E9E9; }129  .note-card{ position: relative; }130 131  /* Floating action button */132  .fab {133    position: absolute;134    right: 60px; bottom: 180px;135    width: 150px; height: 150px; border-radius: 50%;136    background: #F39A1F; color: #fff;137    display: flex; align-items: center; justify-content: center;138    font-size: 72px; font-weight: 700;139    box-shadow: 0 32px 60px rgba(28, 120, 70, 0.35);140  }141 142  /* Gesture bar */143  .gesture {144    position: absolute; bottom: 36px; left: 50%;145    transform: translateX(-50%);146    width: 320px; height: 12px; border-radius: 12px;147    background: #E0E0E0; opacity: 0.9;148  }149</style>150</head>151<body>152<div id="render-target">153  <!-- Status bar -->154  <div class="statusbar">155    <div>11:30</div>156    <div class="status-right">157      <div class="wifi">158        <svg viewBox="0 0 24 24" width="42" height="42" fill="none" stroke="#EDEDED" stroke-width="2">159          <path d="M2 8c6-6 14-6 20 0" />160          <path d="M5 11c4-4 10-4 14 0" />161          <path d="M8.5 14.5c2.5-2.5 6.5-2.5 9 0" />162          <circle cx="12" cy="18" r="1.8" fill="#EDEDED"></circle>163        </svg>164      </div>165      <div class="battery">166        <svg viewBox="0 0 28 16" width="44" height="28">167          <rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="none" stroke="#EDEDED" stroke-width="2"></rect>168          <rect x="3" y="4" width="18" height="8" rx="1" fill="#EDEDED"></rect>169          <rect x="24" y="5" width="3" height="6" rx="1" fill="#EDEDED"></rect>170        </svg>171      </div>172    </div>173  </div>174 175  <!-- Header -->176  <div class="header">177    <div class="header-row">178      <div class="menu-icon">179        <svg viewBox="0 0 24 24" width="56" height="56" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round">180          <path d="M3 6h18M3 12h18M3 18h12"></path>181        </svg>182      </div>183      <div class="title">Note</div>184    </div>185    <div class="search-box">186      <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round">187        <circle cx="11" cy="11" r="7" stroke="#EDEDED"></circle>188        <path d="M21 21l-4.2-4.2" stroke="#EDEDED"></path>189      </svg>190    </div>191  </div>192 193  <!-- Ad banner -->194  <div class="ad-banner">195    <div class="img-ph">[IMG: Facebook logo]</div>196    <div class="ad-text">197      <div class="brand">Facebook</div>198      <div class="desc">AD  Stay connected with Reels on Facebook</div>199    </div>200    <div class="ad-cta">DOWNLOAD FAC...</div>201  </div>202 203  <!-- Filters -->204  <div class="filters">205    <div class="chip">206      <span>Name</span>207      <span class="caret">208        <svg viewBox="0 0 24 24" fill="#EDEDED">209          <path d="M7 10l5 5 5-5"></path>210        </svg>211      </span>212    </div>213    <div class="chip orange">214      <span>Date</span>215      <span class="sort">216        <svg viewBox="0 0 24 24" fill="#0B0B0D">217          <path d="M12 15l-4-4h8z"></path>218        </svg>219      </span>220    </div>221    <div class="chip grid-chip">222      <span>Grid</span>223      <span class="grid-icon">224        <svg viewBox="0 0 24 24" fill="#EDEDED">225          <rect x="3" y="3" width="7" height="7" rx="1"></rect>226          <rect x="14" y="3" width="7" height="7" rx="1"></rect>227          <rect x="3" y="14" width="7" height="7" rx="1"></rect>228          <rect x="14" y="14" width="7" height="7" rx="1"></rect>229        </svg>230      </span>231    </div>232  </div>233 234  <!-- Note card -->235  <div class="note-card">236    <div class="note-title">Classes</div>237    <div class="note-content">swimming class</div>238    <div class="note-date">9 Aug, 2023</div>239  </div>240 241  <!-- Floating action button -->242  <div class="fab">+</div>243 244  <!-- Gesture bar -->245  <div class="gesture"></div>246</div>247</body>248</html>