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    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color: #fff;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #000000;21    border-radius: 36px;22    box-shadow: 0 20px 60px rgba(0,0,0,0.45);23  }24 25  /* Status bar */26  .status-bar {27    position: absolute;28    top: 0;29    left: 0;30    width: 100%;31    height: 96px;32    padding: 0 36px;33    box-sizing: border-box;34    display: flex;35    align-items: center;36    justify-content: space-between;37    color: #ffffff;38    font-size: 36px;39    letter-spacing: 0.5px;40  }41  .status-icons {42    display: flex;43    align-items: center;44    gap: 24px;45  }46  .dot {47    width: 16px; height: 16px; background: #fff; border-radius: 50%;48    opacity: 0.9;49  }50 51  /* App header */52  .app-bar {53    position: absolute;54    top: 96px;55    left: 0;56    width: 100%;57    height: 140px;58    display: flex;59    align-items: center;60    padding: 0 36px;61    box-sizing: border-box;62  }63  .app-bar .title {64    font-size: 64px;65    font-weight: 700;66    margin-left: 24px;67  }68  .app-bar .title .wave {69    margin-right: 12px;70  }71  .app-actions {72    margin-left: auto;73    display: flex;74    align-items: center;75    gap: 30px;76  }77  .icon-btn {78    width: 72px;79    height: 72px;80    display: flex;81    align-items: center;82    justify-content: center;83  }84  .icon-btn svg { fill: none; stroke: #fff; stroke-width: 8; }85 86  /* List area */87  .list-area {88    position: absolute;89    top: 236px;90    left: 0;91    width: 100%;92    padding: 0 36px 280px 36px;93    box-sizing: border-box;94  }95  .card {96    background: #262626;97    border-radius: 28px;98    padding: 36px;99    margin-bottom: 30px;100    box-shadow: 0 8px 20px rgba(0,0,0,0.35);101  }102  .card-row {103    display: flex;104    align-items: flex-start;105    gap: 28px;106  }107  .checkbox {108    width: 48px; height: 48px;109  }110  .checkbox svg { stroke: #9e9e9e; fill: none; stroke-width: 6; }111  .content {112    flex: 1;113  }114  .title-text {115    font-size: 52px;116    color: #eaeaea;117    line-height: 1.2;118    letter-spacing: 0.2px;119  }120  .sub-text {121    font-size: 34px;122    color: #9e9e9e;123    margin-top: 10px;124  }125  .date-line {126    margin-top: 10px;127    font-size: 34px;128    color: #ff9f2f;129    display: inline-flex;130    align-items: center;131    gap: 12px;132  }133  .mini-icon {134    width: 30px; height: 30px;135    display: inline-block;136  }137  .mini-icon svg { stroke: #9e9e9e; fill: none; stroke-width: 5; }138 139  /* Bottom nav */140  .bottom-bar {141    position: absolute;142    bottom: 0;143    left: 0;144    width: 100%;145    height: 220px;146    background: #000000;147    display: flex;148    align-items: center;149    justify-content: center;150  }151  .nav-inner {152    width: 100%;153    padding: 0 140px;154    display: flex;155    align-items: center;156    justify-content: space-between;157    box-sizing: border-box;158  }159  .nav-item {160    width: 124px;161    height: 124px;162    display: flex;163    align-items: center;164    justify-content: center;165  }166  .nav-item svg { stroke: #bdbdbd; fill: none; stroke-width: 10; }167  .nav-item.active {168    background: #ff9300;169    border-radius: 16px;170  }171  .nav-item.active svg { stroke: #000; }172 173  /* FAB */174  .fab {175    position: absolute;176    right: 48px;177    bottom: 276px;178    width: 168px;179    height: 168px;180    background: #ff9300;181    border-radius: 50%;182    box-shadow: 0 12px 30px rgba(0,0,0,0.5);183    display: flex;184    align-items: center;185    justify-content: center;186    color: #fff;187    font-size: 120px;188    line-height: 0;189    font-weight: 500;190  }191 192  /* Gesture pill */193  .gesture {194    position: absolute;195    bottom: 24px;196    left: 50%;197    transform: translateX(-50%);198    width: 240px;199    height: 14px;200    border-radius: 8px;201    background: #eaeaea;202    opacity: 0.9;203  }204 205  /* Small helper icons inside text */206  .inline-plus {207    display: inline-block;208    width: 44px; height: 44px;209    vertical-align: middle;210    margin: 0 8px;211  }212  .inline-plus svg { stroke: #8b8b8b; stroke-width: 8; }213</style>214</head>215<body>216<div id="render-target">217  <!-- Status Bar -->218  <div class="status-bar">219    <div>2:53</div>220    <div class="status-icons">221      <div class="dot"></div>222      <div class="dot"></div>223      <div class="dot"></div>224      <div class="dot" style="width:22px;height:22px;"></div>225    </div>226  </div>227 228  <!-- App Header -->229  <div class="app-bar">230    <div class="icon-btn" aria-label="menu">231      <svg width="56" height="56" viewBox="0 0 56 56">232        <path d="M6 12 H50 M6 28 H50 M6 44 H50" />233      </svg>234    </div>235    <div class="title"><span class="wave">👋</span>Welcome</div>236    <div class="app-actions">237      <div class="icon-btn" aria-label="more">238        <svg width="56" height="56" viewBox="0 0 56 56">239          <circle cx="28" cy="12" r="4" fill="#fff"></circle>240          <circle cx="28" cy="28" r="4" fill="#fff"></circle>241          <circle cx="28" cy="44" r="4" fill="#fff"></circle>242        </svg>243      </div>244    </div>245  </div>246 247  <!-- List Area -->248  <div class="list-area">249 250    <!-- Card 1 -->251    <div class="card">252      <div class="card-row">253        <div class="checkbox">254          <svg width="48" height="48" viewBox="0 0 48 48">255            <rect x="4" y="4" width="40" height="40" rx="6"></rect>256          </svg>257        </div>258        <div class="content">259          <div class="title-text">Rent is due</div>260          <div class="sub-text">its a new month</div>261          <div class="date-line">262            Aug 13, 06:00PM263            <span class="mini-icon">264              <svg width="30" height="30" viewBox="0 0 30 30">265                <path d="M15 5 v-2 M7 12 a8 8 0 1 0 16 0 M5 12 h20" />266              </svg>267            </span>268          </div>269        </div>270      </div>271    </div>272 273    <!-- Card 2 -->274    <div class="card">275      <div class="card-row">276        <div class="checkbox">277          <svg width="48" height="48" viewBox="0 0 48 48">278            <rect x="4" y="4" width="40" height="40" rx="6"></rect>279          </svg>280        </div>281        <div class="content">282          <div class="title-text">283            Create a new task by tapping284            <span class="inline-plus" title="plus icon">285              <svg width="44" height="44" viewBox="0 0 44 44">286                <path d="M22 8 V36 M8 22 H36" />287              </svg>288            </span>289          </div>290        </div>291      </div>292    </div>293 294    <!-- Card 3 -->295    <div class="card">296      <div class="card-row">297        <div class="checkbox">298          <svg width="48" height="48" viewBox="0 0 48 48">299            <rect x="4" y="4" width="40" height="40" rx="6"></rect>300          </svg>301        </div>302        <div class="content">303          <div class="title-text">304            Hold +305            <span class="inline-plus">306              <svg width="44" height="44" viewBox="0 0 44 44">307                <path d="M22 8 V36 M8 22 H36" />308              </svg>309            </span>310            to add another task by voice 🎙️311          </div>312        </div>313      </div>314    </div>315 316    <!-- Card 4 -->317    <div class="card">318      <div class="card-row">319        <div class="checkbox">320          <svg width="48" height="48" viewBox="0 0 48 48">321            <rect x="4" y="4" width="40" height="40" rx="6"></rect>322          </svg>323        </div>324        <div class="content">325          <div class="title-text">Swipe left to set date and remind