GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1440px;11    height: 3120px;12    position: relative;13    overflow: hidden;14    background: #141A15; /* dark olive/charcoal */15    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;16    color: #E8ECE7;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    padding: 0 48px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #E8ECE7;27    font-weight: 600;28    font-size: 48px;29  }30  .status-left { display: flex; align-items: center; gap: 24px; }31  .status-right { display: flex; align-items: center; gap: 28px; }32  .status-icon svg { width: 48px; height: 48px; fill: none; stroke: #E8ECE7; stroke-width: 4; }33 34  /* Top tabs */35  .tabs {36    display: flex;37    gap: 64px;38    padding: 24px 64px 0 64px;39    align-items: flex-end;40  }41  .tab {42    font-size: 64px;43    color: #9BD38B;44    opacity: 0.75;45    padding-bottom: 16px;46  }47  .tab.active {48    opacity: 1;49    border-bottom: 8px solid #9BD38B;50    width: fit-content;51  }52  .divider {53    height: 8px;54    background: #1F241E;55    margin-top: 12px;56  }57 58  /* File cards list */59  .content { padding: 48px 64px 0 64px; }60  .file-card {61    margin-bottom: 96px;62  }63  .file-header {64    display: flex;65    align-items: center;66    justify-content: space-between;67  }68  .title-left {69    display: flex;70    align-items: center;71    gap: 28px;72  }73  .file-title {74    font-size: 64px;75    font-weight: 600;76    color: #FFFFFF;77  }78 79  .file-type {80    width: 72px;81    height: 72px;82    border-radius: 12px;83    background: #82A8FF;84    display: inline-flex;85    align-items: center;86    justify-content: center;87  }88  .file-type svg { width: 48px; height: 48px; fill: #141A15; }89 90  .more-btn {91    width: 84px;92    height: 84px;93    border: none;94    background: transparent;95    border-radius: 42px;96    display: inline-flex;97    align-items: center;98    justify-content: center;99    cursor: default;100  }101  .more-btn svg { width: 20px; height: 52px; fill: #C6CBC6; }102 103  .preview {104    width: 1312px;105    height: 620px;106    margin-top: 28px;107    border-radius: 36px;108    background: #E0E0E0;109    border: 1px solid #BDBDBD;110    display: flex;111    align-items: center;112    justify-content: center;113    color: #757575;114    font-size: 44px;115  }116 117  .meta {118    display: flex;119    align-items: center;120    gap: 28px;121    margin-top: 24px;122    padding-left: 8px;123  }124  .avatar {125    width: 96px;126    height: 96px;127    border-radius: 50%;128    background: #0B6C54;129    color: #E8ECE7;130    display: inline-flex;131    align-items: center;132    justify-content: center;133    font-weight: 700;134    font-size: 56px;135  }136  .meta-text {137    font-size: 44px;138    color: #B9C0BA;139  }140 141  /* Bottom navigation */142  .bottom-wrap {143    position: absolute;144    left: 0;145    right: 0;146    bottom: 0;147    width: 100%;148    padding-bottom: 160px; /* room for gesture pill */149  }150  .bottom-nav {151    height: 220px;152    background: #20261F;153    border-top: 2px solid #2A3028;154    display: flex;155    align-items: center;156    justify-content: space-around;157  }158  .nav-item {159    width: 220px;160    display: flex;161    flex-direction: column;162    align-items: center;163    gap: 12px;164    color: #C9D0CA;165    font-size: 38px;166  }167  .nav-icon {168    width: 96px;169    height: 96px;170    border-radius: 24px;171    display: flex;172    align-items: center;173    justify-content: center;174  }175  .nav-icon svg { width: 64px; height: 64px; fill: #C9D0CA; }176  .nav-item.active .nav-icon {177    background: rgba(124, 146, 92, 0.35);178  }179  .nav-item.active .label {180    color: #E8ECE7;181    font-weight: 700;182  }183 184  /* Gesture pill */185  .gesture-pill {186    position: absolute;187    bottom: 60px;188    left: 50%;189    transform: translateX(-50%);190    width: 360px;191    height: 18px;192    background: #E8ECE7;193    border-radius: 9px;194    opacity: 0.7;195  }196</style>197</head>198<body>199<div id="render-target">200  <!-- Status bar -->201  <div class="status-bar">202    <div class="status-left">203      <div>5:34</div>204      <div class="status-icon">205        <!-- simple clock dot icon -->206        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v6l4 2"></path></svg>207      </div>208      <div>96°</div>209    </div>210    <div class="status-right">211      <div class="status-icon">212        <!-- Do Not Disturb -->213        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M6 12h12"></path></svg>214      </div>215      <div class="status-icon">216        <!-- Wi-Fi -->217        <svg viewBox="0 0 24 24"><path d="M3 9c5-4 13-4 18 0"></path><path d="M6 12c3-3 9-3 12 0"></path><path d="M9 15c2-2 4-2 6 0"></path><circle cx="12" cy="18" r="1.5" fill="#E8ECE7" stroke="none"></circle></svg>218      </div>219      <div class="status-icon">220        <!-- Battery -->221        <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2"></rect><rect x="22" y="9" width="4" height="6" rx="1"></rect></svg>222      </div>223    </div>224  </div>225 226  <!-- Tabs -->227  <div class="tabs">228    <div class="tab active">Suggested</div>229    <div class="tab">Notifications</div>230  </div>231  <div class="divider"></div>232 233  <!-- List content -->234  <div class="content">235    <!-- Card 1 -->236    <div class="file-card">237      <div class="file-header">238        <div class="title-left">239          <div class="file-type">240            <!-- page icon -->241            <svg viewBox="0 0 24 24">242              <path d="M7 4h7l4 4v12H7z" fill="#141A15"></path>243              <path d="M14 4v4h4" stroke="#141A15" stroke-width="2"></path>244              <path d="M9 12h6M9 15h6M9 18h6" stroke="#141A15" stroke-width="2"></path>245            </svg>246          </div>247          <div class="file-title">agents.txt</div>248        </div>249        <button class="more-btn" aria-label="More">250          <svg viewBox="0 0 8 24">251            <circle cx="4" cy="4" r="3"></circle>252            <circle cx="4" cy="12" r="3"></circle>253            <circle cx="4" cy="20" r="3"></circle>254          </svg>255        </button>256      </div>257      <div class="preview">[IMG: agents.txt preview]</div>258      <div class="meta">259        <div class="avatar">C</div>260        <div class="meta-text">You edited today</div>261      </div>262    </div>263 264    <!-- Card 2 -->265    <div class="file-card">266      <div class="file-header">267        <div class="title-left">268          <div class="file-type">269            <!-- doc/list icon -->270            <svg viewBox="0 0 24 24">271              <rect x="5" y="4" width="14" height="16" rx="2" fill="#141A15"></rect>272              <path d="M8 8h8M8 12h8M8 16h8" stroke="#141A15" stroke-width="2"></path>273            </svg>274          </div>275          <div class="file-title">Shopping list</div>276        </div>277        <button class="more-btn" aria-label="More">278          <svg viewBox="0 0 8 24">279            <circle cx="4" cy="4" r="3"></circle>280            <circle cx="4" cy="12" r="3"></circle>281            <circle cx="4" cy="20" r="3"></circle>282          </svg>283        </button>284      </div>285      <div class="preview">[IMG: Shopping list preview]</div>286      <div class="meta">287        <div class="avatar">C</div>288        <div class="meta-text">You modified today</div>289      </div>290    </div>291  </div>292 293  <!-- Bottom navigation -->294  <div class="bottom-wrap">295    <div class="bottom-nav">296      <div class="nav-item active">297        <div class="nav-icon">298          <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2z"></path></svg>299        </div>300        <div class="label">Home</div>301      </div>302      <div class="nav-item">303        <div class="nav-icon">304          <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.5L22 9.2l-5 4.8 1.2 7L12 18l-6.2 3 1.2-7-5-4.8 6.9-1.7z"></path></svg>305        </div>306        <div class="label">Starred</div>307      </div>308      <div class="nav-item">309        <div class="nav-icon">310          <svg viewBox="0 0 24 24">311            <circle cx="8" cy="9" r="3"></circle>312            <circle cx="16" cy="9" r="3"></circle>313            <path d="M4 20c0-3 3-5 6-5s6 2 6 5"></path>314          </svg>315        </div>316        <div class="label">Shared</div>317      </div>318      <div class="nav-item">319        <div class="nav-icon">320          <svg viewBox="0 0 24 24"><path d="M3 6h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>321        </div>322        <div class="label">Files</div>323      </div>324    </div>325  </div>326 327  <!-- Gesture pill -->328  <div class="gesture-pill"></div>329</div>330</body>331</html>