GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Create alert UI</title>6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target {9    width:1080px;10    height:2400px;11    position:relative;12    overflow:hidden;13    background:#FFFFFF;14    font-family: Roboto, Arial, sans-serif;15    color:#121212;16  }17  /* Status bar */18  .status-bar {19    position:absolute;20    top:0; left:0; width:100%; height:120px;21    background:#000; color:#fff;22    display:flex; align-items:center; justify-content:space-between;23    padding:0 36px; box-sizing:border-box;24    font-size:36px; letter-spacing:0.5px;25  }26  .status-icons { display:flex; gap:28px; align-items:center; }27  .status-dot { width:16px; height:16px; background:#fff; border-radius:50%; opacity:0.8; }28  .battery {29    width:44px; height:22px; border:2px solid #fff; border-radius:4px; position:relative;30  }31  .battery::after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#fff; border-radius:2px; }32  .battery .lvl { position:absolute; top:3px; left:3px; right:8px; bottom:3px; background:#fff; }33  /* App bar */34  .app-bar {35    position:absolute; top:120px; left:0; width:100%; height:140px;36    background:#fff; border-bottom:1px solid #eee;37    display:flex; align-items:center; justify-content:center;38  }39  .app-title { font-size:54px; font-weight:500; color:#2c2c2c; }40  .close-btn {41    position:absolute; left:24px; top:50%; transform:translateY(-50%);42    width:88px; height:88px; display:flex; align-items:center; justify-content:center;43    cursor:default;44  }45  .close-btn svg { width:44px; height:44px; stroke:#5f6368; stroke-width:6; }46  /* Content */47  .content { position:absolute; top:260px; left:0; width:100%; padding:0 48px; box-sizing:border-box; }48  .label { font-size:34px; color:#666; margin:32px 0 18px; }49  .field-row { display:flex; gap:24px; }50  .input-box, .currency-box {51    height:120px; border:1px solid #E4E6EA; border-radius:24px; background:#fff;52    display:flex; align-items:center; box-sizing:border-box;53  }54  .input-box { flex:1; padding:0 32px; font-size:48px; color:#222; }55  .input-box.focus { border-color:#2166F3; box-shadow:0 0 0 2px rgba(33,102,243,0.2) inset; }56  .currency-box { width:420px; padding:0 24px; justify-content:space-between; }57  .curr-left { display:flex; align-items:center; gap:18px; }58  .flag {59    width:60px; height:60px; background:#E0E0E0; border:1px solid #BDBDBD;60    display:flex; align-items:center; justify-content:center; color:#757575; border-radius:50%;61    font-size:20px;62  }63  .curr-code { font-size:36px; color:#222; }64  .chev { width:36px; height:36px; }65  .flip-link {66    text-align:right; color:#7b8dae; font-size:30px; margin:12px 8px 22px 0;67  }68  /* Rate number above chart */69  .minor-note { text-align:right; color:#777; font-size:30px; padding-right:12px; }70  /* Chart area */71  .chart {72    margin-top:24px; width:100%; height:560px; border-top:1px solid #eee; padding-top:18px;73  }74  .chart-box {75    width:100%; height:520px; background:#f8fbff; border:1px solid #dfe7f6; border-radius:20px;76    position:relative; overflow:hidden;77  }78  .chart svg { position:absolute; left:0; top:0; width:100%; height:100%; }79  .desired-line {80    position:absolute; left:24px; right:24px; top:340px; border-top:3px dashed #2a61d6;81  }82  .tag {83    position:absolute; right:24px; top:308px;84    background:#d6e6ff; color:#2a61d6; padding:16px 22px; border-radius:22px; font-size:30px;85    border:1px solid #bcd2ff;86  }87  /* Keypad */88  .keypad {89    margin-top:36px; width:100%;90    display:grid; grid-template-columns: repeat(5, 1fr);91    grid-auto-rows: 160px; gap:24px;92  }93  .key {94    border:1px solid #E8EBF0; border-radius:28px; background:#fff;95    display:flex; align-items:center; justify-content:center;96    font-size:48px; color:#222;97    box-shadow:0 1px 0 rgba(0,0,0,0.03) inset;98  }99  .key.dark {100    background:#0B1573; color:#fff; border:1px solid #0B1573;101  }102  .key.primary {103    background:#0C54E8; color:#fff; border:1px solid #0C54E8;104    grid-column: 4 / span 2;105  }106  .operator { font-size:54px; }107  /* Bottom gesture area */108  .bottom-bar {109    position:absolute; left:0; bottom:0; width:100%; height:90px; background:#000;110    display:flex; align-items:center; justify-content:center;111  }112  .gesture {113    width:180px; height:12px; background:#fff; opacity:0.9; border-radius:12px;114  }115</style>116</head>117<body>118<div id="render-target">119  <div class="status-bar">120    <div>11:20</div>121    <div class="status-icons">122      <div class="status-dot"></div>123      <div class="status-dot" style="opacity:0.6;"></div>124      <div class="status-dot" style="opacity:0.6;"></div>125      <div class="battery"><div class="lvl"></div></div>126    </div>127  </div>128 129  <div class="app-bar">130    <div class="close-btn">131      <svg viewBox="0 0 24 24" fill="none">132        <path d="M5 5 L19 19 M19 5 L5 19" />133      </svg>134    </div>135    <div class="app-title">Create alert</div>136  </div>137 138  <div class="content">139    <div class="label">When</div>140    <div class="field-row">141      <div class="input-box">1</div>142      <div class="currency-box">143        <div class="curr-left">144          <div class="flag">[IMG: Canada flag]</div>145          <div class="curr-code">CAD</div>146        </div>147        <svg class="chev" viewBox="0 0 24 24">148          <path d="M6 9 L12 15 L18 9" fill="none" stroke="#7a7a7a" stroke-width="2"/>149        </svg>150      </div>151    </div>152    <div class="flip-link">⇅ Flip currencies</div>153 154    <div class="label">Equals</div>155    <div class="field-row">156      <div class="input-box focus">12</div>157      <div class="currency-box">158        <div class="curr-left">159          <div class="flag">[IMG: Japan flag]</div>160          <div class="curr-code">JPY</div>161        </div>162        <svg class="chev" viewBox="0 0 24 24">163          <path d="M6 9 L12 15 L18 9" fill="none" stroke="#7a7a7a" stroke-width="2"/>164        </svg>165      </div>166    </div>167 168    <div class="minor-note">109.62</div>169    <div class="chart">170      <div class="chart-box">171        <svg viewBox="0 0 1080 520">172          <polyline173            points="20,60 70,120 120,160 170,120 220,200 270,260 320,320 370,280 420,340 470,310 520,360 570,330 620,350 670,340 720,360 770,350 820,370 870,360 920,380 970,370 1020,500"174            fill="rgba(44,86,188,0.10)"175            stroke="#204ECF"176            stroke-width="6"177            stroke-linejoin="round"/>178        </svg>179        <div class="desired-line"></div>180        <div class="tag">Desired rate</div>181      </div>182    </div>183 184    <div class="keypad">185      <div class="key">7</div>186      <div class="key">8</div>187      <div class="key">9</div>188      <div class="key dark">AC</div>189      <div class="key dark">⌫</div>190 191      <div class="key">4</div>192      <div class="key">5</div>193      <div class="key">6</div>194      <div class="key dark operator">÷</div>195      <div class="key dark operator">×</div>196 197      <div class="key">1</div>198      <div class="key">2</div>199      <div class="key">3</div>200      <div class="key dark operator">−</div>201      <div class="key dark operator">+</div>202 203      <div class="key">0</div>204      <div class="key">.</div>205      <div class="key primary">Done</div>206    </div>207  </div>208 209  <div class="bottom-bar">210    <div class="gesture"></div>211  </div>212</div>213</body>214</html>