GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Government Alerts UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #23272A; /* dark app background */13    color: #ECEFF1;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 36px;20    color: #C9D0D6;21    font-size: 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    box-sizing: border-box;26  }27  .status-left { display: flex; gap: 24px; align-items: center; }28  .status-icons { display: flex; gap: 22px; align-items: center; }29  .dot { width: 10px; height: 10px; background:#C9D0D6; border-radius:50%; display:inline-block; }30 31  /* App bar */32  .app-bar {33    height: 120px;34    border-bottom: 1px solid #353A40;35    position: relative;36    display: flex;37    align-items: center;38    justify-content: center;39  }40  .app-title {41    font-size: 56px;42    font-weight: 600;43    letter-spacing: 0.3px;44    color: #E9EDF0;45  }46  .back-btn {47    position: absolute;48    left: 24px;49    top: 50%;50    transform: translateY(-50%);51    width: 72px;52    height: 72px;53    border-radius: 36px;54    display: flex;55    align-items: center;56    justify-content: center;57    color: #E9EDF0;58  }59  .back-btn svg { width: 40px; height: 40px; fill: none; stroke: #E9EDF0; stroke-width: 6px; }60 61  /* Info line */62  .info-line {63    height: 110px;64    padding: 0 40px;65    display: flex;66    align-items: center;67    color: #9AA4AD;68    font-size: 34px;69    border-bottom: 1px solid #343A40;70  }71 72  /* List section */73  .section { border-bottom: 1px solid #343A40; }74  .row {75    display: flex;76    align-items: center;77    justify-content: space-between;78    padding: 40px;79    box-sizing: border-box;80    height: 150px;81  }82  .row-title {83    font-size: 46px;84    font-weight: 600;85    color: #E8ECEF;86  }87  .row-sub {88    font-size: 34px;89    color: #8D98A2;90    margin-top: 8px;91  }92  .left-wrap { display: flex; align-items: center; gap: 28px; }93 94  /* Simple location icon */95  .loc-icon {96    width: 48px; height: 48px;97  }98  .loc-icon svg { width: 48px; height: 48px; fill: none; stroke: #B7BEC4; stroke-width: 6px; }99 100  /* Toggle switch */101  .toggle {102    width: 170px;103    height: 88px;104    background: #3D4349;105    border-radius: 44px;106    position: relative;107    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);108  }109  .toggle .knob {110    position: absolute;111    top: 10px;112    left: 12px;113    width: 68px;114    height: 68px;115    background: #60676D;116    border-radius: 34px;117    box-shadow: 0 2px 4px rgba(0,0,0,0.5);118  }119  .toggle.on {120    background: #78C66A;121  }122  .toggle.on .knob {123    left: 90px;124    background: #E9F5E5;125  }126  .toggle.disabled {127    opacity: 0.7;128  }129 130  /* Favorites header */131  .favorites-head {132    padding: 34px 40px 16px 40px;133    color: #B7BEC4;134    font-size: 34px;135    letter-spacing: 0.4px;136  }137 138  /* Chevron */139  .chevron {140    width: 40px; height: 40px;141  }142  .chevron svg { width: 40px; height: 40px; fill: none; stroke: #B7BEC4; stroke-width: 8px; }143 144  /* Divider soft */145  .soft-divider { height: 1px; background: #31363B; }146</style>147</head>148<body>149<div id="render-target">150 151  <!-- Status bar -->152  <div class="status-bar">153    <div class="status-left">154      <div>8:21</div>155      <div class="status-icons">156        <div class="dot"></div>157        <div class="dot"></div>158        <div class="dot"></div>159      </div>160    </div>161    <div class="status-icons">162      <div class="dot"></div>163      <div class="dot"></div>164      <div class="dot"></div>165    </div>166  </div>167 168  <!-- App bar -->169  <div class="app-bar">170    <div class="back-btn">171      <svg viewBox="0 0 24 24"><path d="M15 5 L8 12 L15 19"/></svg>172    </div>173    <div class="app-title">Government Alerts</div>174  </div>175 176  <!-- Info line -->177  <div class="info-line">Switch on locations to receive notifications.</div>178 179  <!-- Current Location row -->180  <div class="section">181    <div class="row">182      <div class="left-wrap">183        <div class="loc-icon">184          <svg viewBox="0 0 24 24"><path d="M12 2 L20 12 L12 22 L4 12 Z"/></svg>185        </div>186        <div>187          <div class="row-title">Current Location</div>188        </div>189      </div>190      <div class="toggle disabled">191        <div class="knob"></div>192      </div>193    </div>194  </div>195 196  <!-- Favorites header -->197  <div class="favorites-head">FAVORITES</div>198 199  <!-- Orleans row -->200  <div class="section">201    <div class="row">202      <div>203        <div class="row-title">Orléans</div>204        <div class="row-sub">France</div>205      </div>206      <div class="toggle on">207        <div class="knob"></div>208      </div>209    </div>210  </div>211 212  <!-- Tokyo row -->213  <div class="section">214    <div class="row">215      <div>216        <div class="row-title">Tokyo</div>217        <div class="row-sub">Japan</div>218      </div>219      <div class="toggle">220        <div class="knob"></div>221      </div>222    </div>223  </div>224 225  <!-- Edit Locations row -->226  <div class="section">227    <div class="row" style="height: 130px;">228      <div class="row-title">Edit Locations</div>229      <div class="chevron"><svg viewBox="0 0 24 24"><path d="M9 5 L16 12 L9 19"/></svg></div>230    </div>231  </div>232 233  <!-- Large bottom blank area to match screenshot -->234  <div class="soft-divider"></div>235 236</div>237</body>238</html>