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>Create alert - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    background: #000;23    color: #fff;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    box-sizing: border-box;29    font-size: 40px;30    letter-spacing: 1px;31  }32  .status-icons {33    display: flex;34    gap: 24px;35    align-items: center;36  }37  .dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: .8; }38 39  /* App bar */40  .app-bar {41    height: 168px;42    border-bottom: 1px solid #eee;43    display: flex;44    align-items: center;45    justify-content: center;46    position: relative;47    box-sizing: border-box;48  }49  .app-title {50    font-size: 54px;51    font-weight: 600;52    color: #222;53  }54  .close-btn {55    position: absolute;56    left: 28px;57    top: 50%;58    transform: translateY(-50%);59    width: 120px;60    height: 120px;61    display: flex;62    align-items: center;63    justify-content: center;64    cursor: default;65  }66  .close-btn svg { width: 44px; height: 44px; stroke: #4f4f4f; stroke-width: 5; }67 68  .content {69    padding: 36px 40px 24px 40px;70    box-sizing: border-box;71  }72 73  .label {74    font-size: 38px;75    color: #666;76    margin: 28px 8px 16px;77  }78 79  /* Combo input (amount + currency) */80  .combo {81    display: grid;82    grid-template-columns: 1fr 360px;83    gap: 0;84    border: 1px solid #e4e4e4;85    border-radius: 26px;86    overflow: hidden;87    height: 140px;88    background: #fff;89  }90  .combo .amount {91    padding: 0 28px;92    display: flex; align-items: center;93    font-size: 52px;94    color: #222;95  }96  .combo .divider {97    width: 1px; background: #e9e9e9;98  }99  .currency {100    display: flex; align-items: center; justify-content: space-between;101    padding: 0 26px 0 20px;102    font-size: 44px; color: #222;103    background: #fafafa;104  }105  .flag {106    width: 64px; height: 64px; border-radius: 50%;107    background: #E0E0E0; border: 1px solid #BDBDBD;108    display: flex; align-items: center; justify-content: center;109    color: #757575; font-size: 22px;110    margin-right: 16px;111  }112  .curr-left {113    display: flex; align-items: center;114  }115  .chev { width: 22px; height: 22px; margin-left: 12px; }116 117  /* Equals row */118  .subheader-row {119    display: flex; align-items: center; justify-content: space-between;120    margin: 28px 8px 12px;121  }122  .subheader-row .label { margin: 0; }123  .flip-link {124    font-size: 34px;125    color: #7aa8ff;126  }127  .combo.eq {128    border: 2px solid #2f5ae8;129  }130  .combo.eq .amount {131    color: #1a1a1a;132  }133  .tiny-note {134    text-align: right;135    color: #9e9e9e;136    font-size: 34px;137    padding: 16px 8px 8px;138  }139 140  /* Chart mock */141  .chart {142    margin-top: 12px;143    height: 520px;144    border-top: 1px solid #e9e9e9;145    position: relative;146    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);147    border-radius: 12px;148    overflow: hidden;149  }150  .chart .dashed {151    position: absolute; left: 16px; right: 16px; top: 58%;152    border-top: 6px dashed #2f5ae8;153  }154  .chart .tag {155    position: absolute; right: 28px; top: calc(58% - 30px);156    background: #cfe1ff;157    color: #1856e0;158    font-size: 34px;159    padding: 14px 22px;160    border-radius: 18px;161  }162  .chart svg {163    position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;164  }165  .chart .shade {166    fill: rgba(39, 76, 206, 0.08);167    stroke: none;168  }169  .chart .line {170    fill: none; stroke: #214ecc; stroke-width: 6;171  }172 173  /* Keypad */174  .keypad {175    margin-top: 36px;176    padding: 0 8px;177  }178  .grid {179    display: grid;180    grid-template-columns: repeat(5, 1fr);181    gap: 22px;182  }183  .key {184    height: 160px;185    border-radius: 26px;186    display: flex; align-items: center; justify-content: center;187    font-size: 54px;188    color: #111;189    background: #ffffff;190    border: 1px solid #eef0f4;191    box-shadow: 0 1px 0 rgba(0,0,0,0.02);192  }193  .key.dark {194    background: #081a78;195    color: #fff;196    border-color: #081a78;197  }198  .key.blue {199    background: #0b56ea;200    color: #fff;201    border-color: #0b56ea;202    font-weight: 600;203  }204  .key.wide { grid-column: span 2; }205  .icon-backspace {206    width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 5;207  }208  .op { font-size: 58px; color: #fff; font-weight: 600; }209 210  /* Bottom gesture bar (visual only) */211  .gesture {212    position: absolute; left: 50%; transform: translateX(-50%);213    bottom: 18px; width: 360px; height: 10px; background: #000; border-radius: 8px; opacity: .9;214  }215</style>216</head>217<body>218<div id="render-target">219  <!-- Status bar -->220  <div class="status-bar">221    <div>11:20</div>222    <div class="status-icons">223      <div class="dot"></div>224      <div class="dot"></div>225      <div class="dot"></div>226      <div class="dot"></div>227    </div>228  </div>229 230  <!-- App bar -->231  <div class="app-bar">232    <div class="close-btn" aria-hidden="true">233      <svg viewBox="0 0 24 24">234        <path d="M4 4 L20 20 M20 4 L4 20" fill="none"></path>235      </svg>236    </div>237    <div class="app-title">Create alert</div>238  </div>239 240  <div class="content">241    <div class="label">When</div>242    <div class="combo">243      <div class="amount">1</div>244      <div class="divider"></div>245      <div class="currency">246        <div class="curr-left">247          <div class="flag">CAD</div>248          <div>CAD</div>249        </div>250        <svg class="chev" viewBox="0 0 24 24">251          <path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>252        </svg>253      </div>254    </div>255 256    <div class="subheader-row">257      <div class="label">Equals</div>258      <div class="flip-link">↕ Flip currencies</div>259    </div>260 261    <div class="combo eq">262      <div class="amount" style="border-right:2px solid #e0e6ff;">1</div>263      <div class="currency" style="background:#fff;">264        <div class="curr-left">265          <div class="flag">JPY</div>266          <div>JPY</div>267        </div>268        <svg class="chev" viewBox="0 0 24 24">269          <path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>270        </svg>271      </div>272    </div>273    <div class="tiny-note">109.62</div>274 275    <div class="chart">276      <svg preserveAspectRatio="none" viewBox="0 0 1080 520">277        <path class="shade" d="M0,60 C140,220 250,120 340,260 C420,380 540,280 600,360 C680,460 760,360 800,380 C900,440 980,300 1080,320 L1080,520 L0,520 Z"></path>278        <path class="line" d="M0,60 C140,220 250,120 340,260 C420,380 540,280 600,360 C680,460 760,360 800,380 C900,440 980,300 1080,320"></path>279      </svg>280      <div class="dashed"></div>281      <div class="tag">Desired rate</div>282    </div>283 284    <!-- Keypad -->285    <div class="keypad">286      <div class="grid">287        <div class="key">7</div>288        <div class="key">8</div>289        <div class="key">9</div>290        <div class="key dark">AC</div>291        <div class="key dark">292          <svg class="icon-backspace" viewBox="0 0 24 24">293            <path d="M3 12 L9 18 H20 a1 1 0 0 0 1-1 V7 a1 1 0 0 0-1-1 H9 L3 12 Z" fill="none"></path>294            <path d="M12 9 L16 13 M16 9 L12 13" stroke="#fff"></path>295          </svg>296        </div>297 298        <div class="key">4</div>299        <div class="key">5</div>300        <div class="key">6</div>301        <div class="key dark"><span class="op">÷</span></div>302        <div class="key dark"><span class="op">×</span></div>303 304        <div class="key">1</div>305        <div class="key">2</div>306        <div class="key">3</div>307        <div class="key dark"><span class="op">−</span></div>308        <div class="key dark"><span class="op">+</span></div>309 310        <div class="key wide">0</div>311        <div class="key">.</div>312        <div class="key blue" style="grid-column: span 2;">Done</div>313      </div>314    </div>315  </div>316 317  <div class="gesture"></div>318</div>319</body>320</html>