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, "Helvetica Neue", Helvetica, sans-serif; color: #111; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 130px;24    background: #000;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    font-size: 34px;31    letter-spacing: 0.2px;32  }33  .status-bar .right-icons { margin-left: auto; display: flex; gap: 24px; align-items: center; }34  .status-icon {35    width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.3);36  }37 38  /* App bar */39  .app-bar {40    position: absolute;41    top: 130px;42    left: 0;43    width: 1080px;44    height: 150px;45    background: #fff;46    border-bottom: 1px solid #eee;47    display: flex;48    align-items: center;49    justify-content: center;50  }51  .app-bar .close {52    position: absolute;53    left: 32px;54    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;55  }56  .app-title {57    font-size: 46px; font-weight: 600; color: #222;58  }59  .icon-x { width: 28px; height: 28px; }60  .icon-x path { stroke: #6b6b6b; stroke-width: 3; stroke-linecap: round; }61 62  /* Content area */63  .content {64    position: absolute;65    top: 280px;66    left: 0;67    width: 100%;68    padding: 0 48px 160px;69    box-sizing: border-box;70  }71  .label {72    font-size: 34px; color: #616161; margin-top: 28px; margin-bottom: 18px;73  }74  .input-row {75    display: flex;76    align-items: center;77    border: 1px solid #E0E0E0;78    border-radius: 28px;79    overflow: hidden;80    height: 130px;81    background: #fff;82  }83  .input-row .left {84    flex: 1 1 56%;85    padding: 0 32px;86    font-size: 50px;87    color: #222;88    display: flex; align-items: center;89  }90  .input-row .right {91    flex: 1 1 44%;92    display: flex;93    align-items: center;94    justify-content: flex-start;95    padding: 0 28px;96    border-left: 1px solid #E8E8E8;97    gap: 20px;98  }99  .flag {100    width: 56px; height: 56px; border-radius: 50%;101    background: #E0E0E0; border: 1px solid #BDBDBD;102    display: flex; align-items: center; justify-content: center;103    color: #757575; font-size: 18px;104  }105  .currency-text { font-size: 40px; color: #222; }106  .caret {107    margin-left: auto;108    width: 28px; height: 28px;109  }110  .flip {111    text-align: right;112    font-size: 30px;113    color: #7D8192;114    margin-top: 14px;115    display: flex;116    justify-content: flex-end;117    align-items: center;118    gap: 8px;119  }120  .icon-flip { width: 28px; height: 28px; }121  .chart {122    margin-top: 28px;123    height: 860px;124    border-top: 1px solid #E6E6E6;125    border-bottom: 1px solid #E6E6E6;126    position: relative;127    background: #fff;128  }129  .desired-line {130    position: absolute;131    left: 36px; right: 36px;132    top: 140px;133    height: 0;134    border-top: 4px dashed #1A73E8;135  }136  .desired-pill {137    position: absolute;138    right: 56px;139    top: 100px;140    background: #CFE3FF;141    color: #1A73E8;142    padding: 18px 22px;143    border-radius: 18px;144    font-size: 30px;145    font-weight: 600;146  }147  .current-pill {148    position: absolute;149    left: 36px;150    bottom: 180px;151    background: #CFF3DA;152    color: #1A8E5F;153    padding: 18px 22px;154    border-radius: 18px;155    font-size: 30px;156    font-weight: 600;157  }158  .chart svg { position: absolute; left: 36px; right: 36px; bottom: 90px; height: 260px; }159  .chart .axis-label-right {160    position: absolute;161    right: 36px;162    bottom: 110px;163    font-size: 28px;164    color: #6f6f6f;165  }166  .updated {167    text-align: center;168    color: #98A0A8;169    font-size: 30px;170    margin-top: 32px;171  }172  .info-card {173    margin-top: 36px;174    background: #F2F4F7;175    border-radius: 22px;176    padding: 28px 32px;177    font-size: 32px;178    color: #4a4f58;179    display: flex;180    align-items: flex-start;181    gap: 18px;182  }183  .info-icon {184    width: 44px; height: 44px;185  }186  .primary-btn {187    position: absolute;188    left: 48px;189    right: 48px;190    bottom: 170px;191    height: 120px;192    background: #0B66FF;193    color: #fff;194    border-radius: 24px;195    display: flex; align-items: center; justify-content: center;196    font-size: 40px; font-weight: 600;197    box-shadow: 0 4px 0 rgba(0,0,0,0.08);198  }199  /* Bottom gesture area */200  .gesture-area {201    position: absolute;202    bottom: 0;203    left: 0;204    width: 1080px;205    height: 120px;206    background: #000;207    display: flex; align-items: center; justify-content: center;208  }209  .gesture-pill {210    width: 220px; height: 14px; background: #fff; border-radius: 8px;211  }212</style>213</head>214<body>215<div id="render-target">216  <!-- Status bar -->217  <div class="status-bar">218    <div>11:21</div>219    <div class="right-icons">220      <div class="status-icon"></div>221      <div class="status-icon"></div>222      <div class="status-icon"></div>223      <div class="status-icon"></div>224    </div>225  </div>226 227  <!-- App bar -->228  <div class="app-bar">229    <div class="close">230      <svg class="icon-x" viewBox="0 0 24 24">231        <path d="M4 4 L20 20 M20 4 L4 20" fill="none"></path>232      </svg>233    </div>234    <div class="app-title">Create alert</div>235  </div>236 237  <!-- Content -->238  <div class="content">239    <div class="label">When</div>240    <div class="input-row">241      <div class="left">1</div>242      <div class="right">243        <div class="flag">[IMG: CAD Flag]</div>244        <div class="currency-text">CAD</div>245        <svg class="caret" viewBox="0 0 24 24">246          <path d="M5 9 L12 16 L19 9" stroke="#8a8a8a" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>247        </svg>248      </div>249    </div>250 251    <div class="flip">252      <svg class="icon-flip" viewBox="0 0 24 24">253        <path d="M8 5 L12 1 L16 5 M12 2 L12 14" stroke="#7D8192" stroke-width="2" fill="none" stroke-linecap="round"/>254        <path d="M16 19 L12 23 L8 19 M12 22 L12 10" stroke="#7D8192" stroke-width="2" fill="none" stroke-linecap="round"/>255      </svg>256      Flip currencies257    </div>258 259    <div class="label">Equals</div>260    <div class="input-row">261      <div class="left">120.0000</div>262      <div class="right">263        <div class="flag">[IMG: JPY Flag]</div>264        <div class="currency-text">JPY</div>265        <svg class="caret" viewBox="0 0 24 24">266          <path d="M5 9 L12 16 L19 9" stroke="#8a8a8a" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>267        </svg>268      </div>269    </div>270 271    <!-- Chart area -->272    <div class="chart">273      <div class="desired-line"></div>274      <div class="desired-pill">Desired rate</div>275      <div class="current-pill">Current rate: 107.9541</div>276 277      <!-- Simple trend line -->278      <svg viewBox="0 0 1000 260">279        <path d="M10 150 280                 C60 140, 120 160, 160 145281                 C220 130, 280 160, 340 150282                 C380 145, 420 160, 460 158283                 C520 156, 560 150, 600 152284                 C640 154, 700 170, 760 180285                 C800 182, 820 184, 840 186286                 C860 186, 880 186, 900 188287                 C930 188, 960 188, 990 190" 288              stroke="#1A6CF0" stroke-width="6" fill="none"></path>289        <!-- dashed baseline -->290        <path d="M10 190 L990 190" stroke="#1A8E5F" stroke-width="6" stroke-dasharray="20 14" fill="none"></path>291      </svg>292      <div class="axis-label-right">107.73</div>293    </div>294 295    <div class="updated">Last updated: 30 Oct 2023 11:19</div>296 297    <div class="info-card">298      <svg class="info-icon" viewBox="0 0 24 24">299        <circle cx="12" cy="12" r="10" stroke="#8BA1B3" stroke-width="2" fill="none"></circle>300        <circle cx="12" cy="7" r="1.6" fill="#8BA1B3"></circle>301        <path d="M12 10 L12 17" stroke="#8BA1B3" stroke-width="2" stroke-linecap="round"></path>302      </svg>303      <div>Our rate is always calculated as the mid-point of the buying and selling market rates</div>304    </div>305  </div>306 307  <!-- Primary button -->308  <div class="primary-btn">Create alert</div>309 310  <!-- Bottom gesture area -->311  <div class="gesture-area">312    <div class="gesture-pill"></div>313  </div>314</div>315</body>316</html>