GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Create alert UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .statusbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    font-weight: 600;31  }32  .status-icons {33    margin-left: auto;34    display: flex;35    gap: 28px;36    align-items: center;37  }38  .status-dot { width: 20px; height: 20px; background: #fff; opacity: .9; border-radius: 50%; }39  .battery {40    width: 46px; height: 24px; border: 2px solid #fff; border-radius: 6px; position: relative;41  }42  .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px; }43  .battery-fill { position: absolute; left: 3px; top: 3px; height: 16px; width: 26px; background: #fff; }44 45  /* App bar */46  .appbar {47    position: absolute;48    top: 120px;49    left: 0;50    width: 1080px;51    height: 140px;52    background: #fff;53    border-bottom: 1px solid #eee;54    display: flex;55    align-items: center;56    justify-content: center;57  }58  .appbar h1 { margin: 0; font-size: 48px; font-weight: 500; color: #222; }59  .appbar .close {60    position: absolute;61    left: 28px;62    top: 50%;63    transform: translateY(-50%);64    width: 80px; height: 80px;65    display: flex; align-items: center; justify-content: center;66    cursor: default;67  }68  .close svg { width: 44px; height: 44px; stroke: #555; }69 70  /* Content */71  .content {72    position: absolute;73    top: 260px;74    left: 0;75    width: 100%;76    padding: 0 48px;77    box-sizing: border-box;78  }79  .label {80    font-size: 36px;81    color: #666;82    margin-top: 40px;83    margin-bottom: 20px;84  }85 86  .field {87    width: 100%;88    height: 150px;89    border: 1px solid #E0E0E0;90    border-radius: 28px;91    display: flex;92    align-items: center;93    overflow: hidden;94    background: #fff;95  }96  .field .left {97    flex: 1;98    height: 100%;99    display: flex; align-items: center;100    padding: 0 36px;101    font-size: 56px;102    color: #222;103    box-sizing: border-box;104  }105  .field .divider { width: 1px; height: 100%; background: #E5E5E5; }106  .field .right {107    width: 420px;108    height: 100%;109    display: flex; align-items: center; gap: 24px;110    padding: 0 36px;111    box-sizing: border-box;112  }113  .flag {114    width: 60px; height: 60px;115    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 50%;116    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;117  }118  .currency-code { font-size: 44px; color: #222; }119  .chevron svg { width: 34px; height: 34px; }120 121  .flip {122    text-align: right;123    margin-top: 18px;124    font-size: 34px;125    color: #7f8b99;126    display: flex;127    align-items: center;128    justify-content: flex-end;129    gap: 12px;130  }131  .flip svg { width: 32px; height: 32px; stroke: #7f8b99; }132 133  /* Chart area */134  .chart-wrap {135    position: relative;136    margin-top: 30px;137    border-top: 1px solid #eee;138    padding-top: 24px;139  }140  .right-scale {141    position: absolute;142    right: 48px;143    top: 0;144    font-size: 32px;145    color: #7f8b99;146  }147  .chart {148    width: 100%;149    height: 720px;150    background: linear-gradient(#f7f9ff, #ffffff);151    border: 1px solid #E0E0E0;152    border-radius: 8px;153    position: relative;154    overflow: hidden;155  }156  .chart-placeholder {157    position: absolute; left: 0; top: 0; right: 0; bottom: 0;158    display: flex; align-items: center; justify-content: center;159    color: #757575; font-size: 32px;160  }161  /* Dashed guideline - desired */162  .desired-line {163    position: absolute; top: 160px; left: 20px; right: 20px;164    border-top: 4px dashed #2F73FF;165  }166  .desired-tag {167    position: absolute; right: 24px; top: 120px;168    background: #D9E7FF; color: #2F73FF; font-size: 34px;169    padding: 18px 26px; border-radius: 24px;170  }171  /* Current rate guideline */172  .current-line {173    position: absolute; top: 370px; left: 20px; right: 20px;174    border-top: 4px dashed #2ECC71;175  }176  .current-pill {177    position: absolute; left: 18px; top: 320px;178    background: #E9FFF2; color: #1C9C58; font-size: 34px;179    padding: 18px 26px; border-radius: 28px;180    border: 1px solid #C6F3D4;181  }182  /* Simple blue path hint */183  .blue-path {184    position: absolute; left: 40px; top: 80px; width: 92%; height: 560px;185    border-left: 4px solid transparent;186  }187  .blue-path::before {188    content: "";189    position: absolute; left: 0; top: 0;190    width: 100%; height: 100%;191    border-bottom: 6px solid #2F73FF;192    border-left: 6px solid #2F73FF;193    opacity: .35;194    transform: skewX(-12deg);195  }196  .axis {197    margin-top: 12px;198    display: flex; justify-content: space-between;199    color: #7f8b99; font-size: 32px;200  }201 202  .updated {203    text-align: center;204    font-size: 32px;205    color: #a0a9b5;206    margin: 36px 0 24px;207  }208 209  /* Info box */210  .info {211    display: flex; gap: 22px; align-items: center;212    background: #F1F4F7; border-radius: 24px;213    padding: 30px;214    font-size: 34px; color: #606870;215  }216  .info .icon {217    width: 48px; height: 48px; border-radius: 50%;218    border: 2px solid #7f8b99; color: #7f8b99;219    display: flex; align-items: center; justify-content: center;220    font-weight: 600;221  }222 223  /* Primary button */224  .cta {225    margin: 40px auto 0;226    width: calc(100% - 96px);227    height: 120px;228    background: #0B73F1;229    color: #fff;230    border-radius: 28px;231    display: flex; align-items: center; justify-content: center;232    font-size: 44px; font-weight: 600;233    box-shadow: 0 6px 12px rgba(11,115,241,0.25);234  }235 236  /* Bottom navigation bar */237  .nav {238    position: absolute;239    bottom: 0; left: 0;240    width: 100%; height: 120px;241    background: #000;242  }243  .home-pill {244    position: absolute; left: 50%; bottom: 32px;245    transform: translateX(-50%);246    width: 180px; height: 12px; background: #fff; border-radius: 6px;247    opacity: .9;248  }249</style>250</head>251<body>252<div id="render-target">253  <!-- Status bar -->254  <div class="statusbar">255    <div style="font-size:40px;">11:19</div>256    <div class="status-icons">257      <div class="status-dot"></div>258      <div class="status-dot" style="opacity:.6;"></div>259      <div class="status-dot" style="opacity:.6;"></div>260      <div class="status-dot" style="width:26px;height:26px;border-radius:6px;"></div>261      <div class="battery"><div class="battery-fill"></div></div>262    </div>263  </div>264 265  <!-- App bar -->266  <div class="appbar">267    <div class="close">268      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">269        <path d="M5 5 L19 19 M19 5 L5 19" stroke="currentColor" />270      </svg>271    </div>272    <h1>Create alert</h1>273  </div>274 275  <!-- Content -->276  <div class="content">277    <div class="label">When</div>278    <div class="field">279      <div class="left">1</div>280      <div class="divider"></div>281      <div class="right">282        <div class="flag">[IMG]</div>283        <div class="currency-code">CAD</div>284        <div class="chevron">285          <svg viewBox="0 0 24 24" fill="none" stroke="#7f8b99" stroke-width="2">286            <path d="M6 9 L12 15 L18 9" />287          </svg>288        </div>289      </div>290    </div>291 292    <div class="flip">293      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">294        <path d="M8 6 v12 M4 9 l4 -3 l4 3" stroke="currentColor"/>295        <path d="M16 18 v-12 M12 15 l4 3 l4 -3" stroke="currentColor"/>296      </svg>297      Flip currencies298    </div>299 300    <div class="label" style="margin-top:28px;">Equals</div>301    <div class="field">302      <div class="left">108.6764</div>303      <div class="divider"></div>304      <div class="right">305        <div class="flag">[IMG]</div>306        <div class="currency-code">JPY</div>307        <div class="chevron">308          <svg viewBox="0 0 24 24" fill="none" stroke="#7f8b99" stroke-width="2">309            <path d="M6 9 L12 15 L18 9" />310          </svg>311        </div>312      </div>313    </div>314 315    <div class="chart-wrap">316      <div class="right-scale">109.62</div>317      <div class="chart">318        <div class="desired-line"></div>319        <div class="desired-tag">Desired rate</div>320 321        <div class="current-line"></div>322        <div class="current-pill">Current rate: 107.9541</div>323 324        <div class="blue-path"></div>325 326        <div class="chart-placeholder">[IMG: Exchange rate chart]</div>327      </div>328      <div class="axis">329        <div>20 Oct 11:19</div>330        <div>30 Oct 11:19</div>331      </div>332    </div>333 334    <div class="updated">Last updated: 30 Oct 2023 11:19</div>335 336    <div class="info">337      <div class="icon">i</div>338      <div>Our rate is always calculated as the mid-point of the buying and selling market rates</div>339    </div>340 341    <div class="cta">Create alert</div>342  </div>343 344  <!-- Bottom navigation bar -->345  <div class="nav">346    <div class="home-pill"></div>347  </div>348</div>349</body>350</html>