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>Mobile UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    position: relative;15    width: 1080px;16    height: 2400px;17    overflow: hidden;18    background: #ffffff;19    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;20    color: #212121;21  }22 23  /* App bar */24  .appbar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 320px;30    background: #EBA64C;31    color: #fff;32  }33  .status {34    height: 84px;35    padding: 20px 28px 0 28px;36    display: flex;37    align-items: center;38    justify-content: space-between;39    font-weight: 600;40    font-size: 34px;41    color: #fff;42  }43  .status .right-icons {44    display: flex;45    align-items: center;46    gap: 18px;47  }48  .status .dot {49    width: 10px;50    height: 10px;51    background: #fff;52    border-radius: 50%;53    opacity: 0.9;54  }55  .status .icon {56    display: inline-flex;57    align-items: center;58    justify-content: center;59  }60  .title-row {61    display: flex;62    align-items: center;63    padding: 24px 28px;64    padding-top: 14px;65    gap: 22px;66  }67  .back {68    width: 64px;69    height: 64px;70  }71  .red-dot {72    width: 28px;73    height: 28px;74    background: #D6453A;75    border-radius: 50%;76  }77  .title-text {78    flex: 1;79    font-size: 54px;80    font-weight: 500;81    color: #1a1a1a;82  }83  .close-wrap {84    width: 64px;85    height: 64px;86  }87  .brand-swatch {88    width: 72px;89    height: 72px;90    border-radius: 10px;91    overflow: hidden;92    display: grid;93    grid-template-columns: repeat(2, 1fr);94    grid-template-rows: repeat(2, 1fr);95    gap: 3px;96    margin-left: 6px;97  }98  .brand-swatch div { width: 100%; height: 100%; }99  .sw1{ background:#22c1c3; }100  .sw2{ background:#fdbb2d; }101  .sw3{ background:#f05a5a; }102  .sw4{ background:#7cc576; }103 104  .underline {105    position: absolute;106    left: 0;107    right: 0;108    bottom: 0;109    height: 4px;110    background: rgba(255,255,255,0.25);111  }112 113  /* Content */114  .content {115    position: absolute;116    top: 320px;117    left: 0;118    right: 0;119    bottom: 0;120    background: #ffffff;121  }122  .section {123    padding: 36px 36px 18px 36px;124    font-size: 40px;125    font-weight: 700;126    color: #111;127  }128 129  .note-row {130    display: flex;131    align-items: stretch;132    padding: 0 36px;133    gap: 22px;134  }135  .accent-bar {136    width: 24px;137    background: #D6453A;138    border-radius: 4px;139  }140  .note-card {141    flex: 1;142    background: #F8EDED;143    border-radius: 22px;144    padding: 28px 32px;145    display: flex;146    align-items: center;147    justify-content: space-between;148  }149  .note-left {150    display: flex;151    align-items: center;152    gap: 20px;153  }154  .note-icon {155    width: 64px;156    height: 64px;157    color: #D6453A;158  }159  .note-title {160    font-size: 44px;161    font-weight: 700;162    color: #111;163  }164  .note-date {165    font-size: 36px;166    color: #8f8f8f;167  }168 169  /* Floating action button */170  .fab {171    position: absolute;172    right: 56px;173    bottom: 280px;174    width: 150px;175    height: 150px;176    background: #EAA846;177    border-radius: 50%;178    box-shadow: 0 10px 22px rgba(0,0,0,0.25);179    display: flex;180    align-items: center;181    justify-content: center;182  }183  .fab svg { width: 84px; height: 84px; }184 185  /* Ad banner placeholder */186  .ad-banner {187    position: absolute;188    left: 0;189    right: 0;190    bottom: 120px;191    height: 190px;192    padding: 10px 12px;193  }194  .ad-inner {195    width: 100%;196    height: 100%;197    background: #E0E0E0;198    border: 1px solid #BDBDBD;199    display: flex;200    align-items: center;201    justify-content: center;202    color: #757575;203    font-size: 38px;204    border-radius: 4px;205    position: relative;206  }207  .ad-close {208    position: absolute;209    right: 14px;210    top: 14px;211    width: 44px;212    height: 44px;213    border-radius: 8px;214    background: rgba(255,255,255,0.9);215    border: 1px solid #BDBDBD;216    display: flex;217    align-items: center;218    justify-content: center;219  }220  .ad-close svg { width: 26px; height: 26px; }221 222  /* Gesture bar */223  .gesture {224    position: absolute;225    bottom: 26px;226    left: 50%;227    transform: translateX(-50%);228    width: 220px;229    height: 12px;230    background: #d0d0d0;231    border-radius: 8px;232  }233</style>234</head>235<body>236<div id="render-target">237 238  <!-- App Bar -->239  <div class="appbar">240    <div class="status">241      <div>5:27</div>242      <div class="right-icons">243        <div class="dot"></div>244        <div class="dot"></div>245        <div class="dot"></div>246        <div class="dot"></div>247        <div class="icon">248          <svg width="34" height="34" viewBox="0 0 24 24" fill="none">249            <path d="M2 12a10 10 0 0 1 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>250            <path d="M6 12a6 6 0 0 1 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>251            <circle cx="12" cy="12" r="2" fill="#fff"/>252          </svg>253        </div>254        <div class="icon">255          <svg width="34" height="34" viewBox="0 0 24 24" fill="none">256            <path d="M3 12l8-8 8 8v7a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-7z" stroke="#fff" stroke-width="2" fill="none"/>257          </svg>258        </div>259        <div class="icon">260          <svg width="36" height="36" viewBox="0 0 24 24" fill="none">261            <path d="M6 7h12l-1 12H7L6 7z" stroke="#fff" stroke-width="2"/>262            <path d="M9 7V6a3 3 0 0 1 6 0v1" stroke="#fff" stroke-width="2"/>263          </svg>264        </div>265      </div>266    </div>267 268    <div class="title-row">269      <div class="back">270        <svg viewBox="0 0 24 24" width="64" height="64" fill="none">271          <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>272        </svg>273      </div>274      <div class="red-dot"></div>275      <div class="title-text">things to buy in the future</div>276      <div class="close-wrap">277        <svg viewBox="0 0 24 24" width="64" height="64" fill="none">278          <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>279        </svg>280      </div>281      <div class="brand-swatch">282        <div class="sw1"></div>283        <div class="sw2"></div>284        <div class="sw3"></div>285        <div class="sw4"></div>286      </div>287    </div>288 289    <div class="underline"></div>290  </div>291 292  <!-- Content -->293  <div class="content">294    <div class="section">Other</div>295 296    <div class="note-row">297      <div class="accent-bar"></div>298      <div class="note-card">299        <div class="note-left">300          <div class="note-icon">301            <svg viewBox="0 0 24 24" fill="none">302              <path d="M5 3h10l4 4v14H5V3z" stroke="#D6453A" stroke-width="2" fill="none"/>303              <path d="M15 3v5h5" stroke="#D6453A" stroke-width="2"/>304              <path d="M8 12h8M8 16h8" stroke="#D6453A" stroke-width="2" stroke-linecap="round"/>305            </svg>306          </div>307          <div class="note-title">things to buy in the future</div>308        </div>309        <div class="note-date">11/10/2023</div>310      </div>311    </div>312 313    <!-- Spacer to mimic long white area -->314    <div style="height: 1200px;"></div>315  </div>316 317  <!-- Floating Action Button -->318  <div class="fab">319    <svg viewBox="0 0 24 24" fill="none">320      <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"/>321    </svg>322  </div>323 324  <!-- Ad banner -->325  <div class="ad-banner">326    <div class="ad-inner">327      [IMG: Ad banner]328      <div class="ad-close">329        <svg viewBox="0 0 24 24" fill="none">330          <path d="M6 6l12 12M18 6L6 18" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round"/>331        </svg>332      </div>333    </div>334  </div>335 336  <!-- Gesture bar -->337  <div class="gesture"></div>338 339</div>340</body>341</html>