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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    border-radius: 32px;16    box-shadow: 0 6px 20px rgba(0,0,0,0.12);17    color: #111;18  }19 20  /* Status bar */21  .status-bar {22    height: 120px;23    background: #000;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 40px;28    font-size: 36px;29    letter-spacing: 0.3px;30    box-sizing: border-box;31  }32  .status-bar .right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 24px;37    opacity: 0.85;38  }39  .status-icon {40    width: 36px; height: 36px; background: #fff; border-radius: 50%;41  }42  .battery {43    width: 54px; height: 28px; border: 3px solid #fff; border-radius: 6px; position: relative;44  }45  .battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 6px; height: 12px; background: #fff; border-radius: 2px; }46  .battery .level { position: absolute; left: 4px; top: 4px; width: 34px; height: 16px; background: #fff; }47 48  /* App bar */49  .appbar {50    height: 160px;51    background: #fff;52    border-bottom: 1px solid #eee;53    display: flex;54    align-items: center;55    padding: 0 28px;56    box-sizing: border-box;57    position: relative;58  }59  .close-btn {60    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; cursor: default;61  }62  .appbar h1 {63    position: absolute;64    left: 0; right: 0; text-align: center;65    font-size: 48px; font-weight: 500; color: #222;66  }67 68  /* Content */69  .content { padding: 24px 36px 36px; box-sizing: border-box; }70  .label { font-size: 34px; color: #666; margin: 24px 0 18px; }71 72  .row { display: flex; gap: 24px; }73  .input-box {74    flex: 1;75    height: 120px;76    border: 1px solid #E2E2E2;77    border-radius: 26px;78    display: flex;79    align-items: center;80    padding: 0 28px;81    font-size: 48px;82    box-sizing: border-box;83    color: #222;84    background: #fff;85  }86  .currency-select {87    width: 420px;88    height: 120px;89    border: 1px solid #E2E2E2;90    border-radius: 26px;91    display: flex;92    align-items: center;93    justify-content: space-between;94    box-sizing: border-box;95    padding: 0 24px;96    background: #fff;97  }98  .flag {99    width: 70px; height: 70px;100    background: #E0E0E0; border: 1px solid #BDBDBD;101    border-radius: 50%;102    display: flex; align-items: center; justify-content: center;103    color: #757575; font-size: 22px;104  }105  .curr-code { font-size: 40px; color: #222; margin-left: 18px; flex: 1; }106  .curr-wrap { display: flex; align-items: center; gap: 18px; flex: 1; }107 108  .flip {109    text-align: right; color: #7e8aa6; font-size: 32px; margin: 12px 4px 12px auto; display: flex; align-items: center; gap: 10px;110  }111  .flip svg { width: 34px; height: 34px; }112 113  .input-box.primary {114    border: 2px solid #1E57D7;115    height: 130px;116    font-size: 54px;117  }118 119  /* Chart area */120  .chart-area {121    margin-top: 20px;122    background: #F7F8FB;123    border-top: 1px solid #e9e9e9;124    border-bottom: 1px solid #e9e9e9;125    border-radius: 16px;126    height: 600px;127    position: relative;128    box-sizing: border-box;129    padding: 16px 16px 0 16px;130  }131  .chart-placeholder {132    position: absolute; left: 16px; right: 16px; top: 16px; bottom: 16px;133    background: #E0E0E0; border: 1px solid #BDBDBD;134    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;135    border-radius: 12px;136  }137  .chart-area .rate {138    position: absolute;139    right: 30px; top: -18px;140    color: #777; font-size: 32px;141  }142  .desired-line {143    position: absolute; left: 24px; right: 240px; bottom: 180px;144    border-bottom: 4px dashed #1E57D7;145  }146  .desired-tag {147    position: absolute; right: 34px; bottom: 150px;148    background: #A7C8FF;149    color: #1E57D7;150    border-radius: 24px;151    padding: 18px 28px;152    font-size: 32px;153    box-shadow: 0 2px 0 rgba(30,87,215,0.2);154    white-space: nowrap;155  }156 157  /* Divider */158  .divider {159    height: 1px;160    background: #E9E9E9;161    margin: 18px 0 12px;162  }163 164  /* Keypad */165  .keypad {166    margin-top: 30px;167    display: grid;168    grid-template-columns: repeat(4, 1fr);169    gap: 24px;170    padding: 0 12px;171    box-sizing: border-box;172  }173  .btn {174    height: 170px;175    border-radius: 26px;176    display: flex; align-items: center; justify-content: center;177    font-size: 54px;178    border: 1px solid #E6E8EF;179    background: #fff;180    color: #111;181  }182  .btn.action {183    background: #0E1A83;184    color: #fff;185    border: none;186  }187  .btn.action svg { fill: none; stroke: #fff; stroke-width: 8; }188  .btn.done {189    background: #0A53FF;190    color: #fff;191    border: none;192    font-size: 46px;193    font-weight: 600;194  }195  .span2 { grid-column: span 2; }196 197  /* Chevron icon */198  .chev { width: 34px; height: 34px; }199</style>200</head>201<body>202<div id="render-target">203 204  <div class="status-bar">205    <div>11:20</div>206    <div class="right">207      <div class="status-icon"></div>208      <div class="status-icon"></div>209      <div class="status-icon"></div>210      <div class="battery"><div class="level"></div></div>211    </div>212  </div>213 214  <div class="appbar">215    <div class="close-btn" aria-label="Close">216      <svg width="42" height="42" viewBox="0 0 42 42">217        <path d="M6 6 L36 36 M36 6 L6 36" stroke="#787878" stroke-width="6" stroke-linecap="round"/>218      </svg>219    </div>220    <h1>Create alert</h1>221  </div>222 223  <div class="content">224    <div class="label">When</div>225    <div class="row">226      <div class="input-box">1</div>227      <div class="currency-select">228        <div class="curr-wrap">229          <div class="flag">[IMG: CAD flag]</div>230          <div class="curr-code">CAD</div>231        </div>232        <svg class="chev" viewBox="0 0 24 24">233          <path d="M5 8 L12 15 L19 8" stroke="#7a7a7a" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>234        </svg>235      </div>236    </div>237    <div class="flip">238      <svg viewBox="0 0 24 24">239        <path d="M7 4 L12 9 L17 4 M7 20 L12 15 L17 20" stroke="#9AA3B2" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>240      </svg>241      Flip currencies242    </div>243 244    <div class="label">Equals</div>245    <div class="row">246      <div class="input-box primary">108.6764</div>247      <div class="currency-select">248        <div class="curr-wrap">249          <div class="flag">[IMG: JPY flag]</div>250          <div class="curr-code">JPY</div>251        </div>252        <svg class="chev" viewBox="0 0 24 24">253          <path d="M5 8 L12 15 L19 8" stroke="#7a7a7a" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>254        </svg>255      </div>256    </div>257 258    <div class="divider"></div>259    <div style="text-align:right; color:#777; font-size:32px; margin-top:8px; margin-right:12px;">109.62</div>260 261    <div class="chart-area">262      <div class="chart-placeholder">[IMG: Exchange rate chart]</div>263      <div class="desired-line"></div>264      <div class="desired-tag">Desired rate</div>265    </div>266 267    <div class="keypad">268      <div class="btn">7</div>269      <div class="btn">8</div>270      <div class="btn">9</div>271      <div class="btn action">AC</div>272 273      <div class="btn">4</div>274      <div class="btn">5</div>275      <div class="btn">6</div>276      <div class="btn action">÷</div>277 278      <div class="btn">1</div>279      <div class="btn">2</div>280      <div class="btn">3</div>281      <div class="btn action">×</div>282 283      <div class="btn span2">0</div>284      <div class="btn">.</div>285      <div class="btn done">Done</div>286 287      <!-- Action column second button in first row: backspace icon -->288      <div style="grid-row: 1 / 2; grid-column: 4 / 5; position: relative;"></div>289      <div style="position:absolute; right:28px; top: 0;"></div>290    </div>291 292    <!-- Overlay backspace button in first row action column -->293    <div style="position:absolute; left: 828px; top: 1620px;">294      <div class="btn action" style="width: 228px; height: 170px; display:flex; align-items:center; justify-content:center;">295        <svg width="60" height="40" viewBox="0 0 60 40">296          <path d="M56 8 H26 L14 20 L26 32 H56 Z" stroke="#fff" fill="none" stroke-width="4" stroke-linejoin="round"/>297          <path d="M38 14 L30 20 L38 26" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>298        </svg>299      </div>300    </div>301 302    <!-- Minus and Plus buttons column -->303    <div style="position:absolute; left: 828px; top: 1990px;">304      <div style="display:flex; flex-direction:column; gap:24px;">305        <div class="btn action" style="width:228px; height:170px;">−</div>306        <div class="btn action" style="width:228px; height:170px;">+</div>307      </div>308    </div>309 310  </div>311</div>312</body>313</html>