GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Government Alerts</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2C3235;15    color: #EAEFF2;16  }17 18  .status-bar {19    height: 120px;20    padding: 0 32px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #EAEFF2;25    font-size: 44px;26    letter-spacing: 1px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 26px;32  }33  .header {34    position: relative;35    height: 140px;36    display: flex;37    align-items: center;38    justify-content: center;39    border-top: 1px solid #3B4246;40    border-bottom: 1px solid #3B4246;41  }42  .header-title {43    font-size: 52px;44    font-weight: 600;45    color: #EAEFF2;46  }47  .back-btn {48    position: absolute;49    left: 24px;50    height: 100%;51    display: flex;52    align-items: center;53  }54 55  .info-banner {56    height: 150px;57    display: flex;58    align-items: center;59    justify-content: center;60    color: #8D959A;61    font-size: 36px;62    border-bottom: 1px solid #3B4246;63  }64 65  .row {66    position: relative;67    padding: 0 40px 0 96px;68    height: 160px;69    display: flex;70    align-items: center;71    border-bottom: 1px solid #3B4246;72  }73  .row .leading-icon {74    position: absolute;75    left: 24px;76    width: 56px;77    height: 56px;78    display: flex;79    align-items: center;80    justify-content: center;81  }82  .row-title {83    font-size: 46px;84    font-weight: 600;85    color: #EAEFF2;86  }87  .subtitle {88    font-size: 34px;89    color: #8D959A;90    margin-top: 10px;91  }92  .row-text {93    display: flex;94    flex-direction: column;95    justify-content: center;96    gap: 6px;97  }98  .section-label {99    padding: 32px 40px 18px;100    font-size: 30px;101    color: #9AA1A6;102    letter-spacing: 2px;103    font-weight: 700;104  }105 106  /* Toggles */107  .toggle {108    position: absolute;109    right: 40px;110    width: 160px;111    height: 84px;112    border-radius: 42px;113    display: inline-block;114    transition: all .2s ease;115    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);116  }117  .toggle .knob {118    position: absolute;119    top: 8px;120    width: 68px;121    height: 68px;122    border-radius: 50%;123    background: #FFFFFF;124    box-shadow: 0 2px 6px rgba(0,0,0,0.35);125    transition: all .2s ease;126  }127  .toggle.off {128    background: #444B50;129  }130  .toggle.off .knob {131    left: 8px;132    background: #6B737A;133  }134  .toggle.on {135    background: #4CD34E;136  }137  .toggle.on .knob {138    left: 84px;139    background: #FFFFFF;140  }141 142  .chevron {143    position: absolute;144    right: 48px;145    width: 28px;146    height: 28px;147  }148 149  /* Gesture bar */150  .gesture-bar {151    position: absolute;152    bottom: 18px;153    left: 50%;154    transform: translateX(-50%);155    width: 320px;156    height: 12px;157    background: #E6E6E6;158    border-radius: 8px;159    opacity: .9;160  }161</style>162</head>163<body>164<div id="render-target">165 166  <!-- Status Bar -->167  <div class="status-bar">168    <div>5:33</div>169    <div class="status-icons">170      <!-- Placeholder dots/icons to mimic app icons -->171      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#EAEFF2"/></svg>172      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#EAEFF2"/></svg>173      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#EAEFF2"/></svg>174      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#EAEFF2"/></svg>175      <svg width="8" height="8"><circle cx="4" cy="4" r="4" fill="#EAEFF2"/></svg>176 177      <!-- WiFi icon -->178      <svg width="48" height="36" viewBox="0 0 24 16" fill="none">179        <path d="M2 6c4-4 16-4 20 0" stroke="#EAEFF2" stroke-width="2" stroke-linecap="round"/>180        <path d="M6 10c3-3 9-3 12 0" stroke="#EAEFF2" stroke-width="2" stroke-linecap="round"/>181        <circle cx="12" cy="14" r="2" fill="#EAEFF2"/>182      </svg>183      <!-- Battery icon -->184      <svg width="50" height="34" viewBox="0 0 28 14" fill="none">185        <rect x="1" y="1" width="22" height="12" stroke="#EAEFF2" stroke-width="2" rx="2"/>186        <rect x="3" y="3" width="14" height="8" fill="#EAEFF2"/>187        <rect x="24" y="4" width="3" height="6" fill="#EAEFF2"/>188      </svg>189    </div>190  </div>191 192  <!-- Header with back -->193  <div class="header">194    <div class="back-btn">195      <svg width="72" height="72" viewBox="0 0 24 24" fill="none">196        <path d="M15.5 4.5L8 12l7.5 7.5" stroke="#EAEFF2" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>197      </svg>198    </div>199    <div class="header-title">Government Alerts</div>200  </div>201 202  <!-- Info banner -->203  <div class="info-banner">204    Switch on locations to receive notifications.205  </div>206 207  <!-- Enable current location -->208  <div class="row">209    <div class="leading-icon">210      <!-- Paper plane/location send icon -->211      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">212        <path d="M3 11l17-8-8 17-2-6-7-3z" stroke="#EAEFF2" stroke-width="2" fill="none" stroke-linejoin="round"/>213      </svg>214    </div>215    <div class="row-text">216      <div class="row-title">Enable Current Location</div>217    </div>218  </div>219 220  <!-- Section label -->221  <div class="section-label">FAVORITES</div>222 223  <!-- Favorite item 1 -->224  <div class="row">225    <div class="row-text">226      <div class="row-title">Ivrea</div>227      <div class="subtitle">Italy</div>228    </div>229    <div class="toggle off">230      <div class="knob"></div>231    </div>232  </div>233 234  <!-- Favorite item 2 (ON) -->235  <div class="row">236    <div class="row-text">237      <div class="row-title">Upper East Side</div>238      <div class="subtitle">New York</div>239    </div>240    <div class="toggle on">241      <div class="knob"></div>242    </div>243  </div>244 245  <!-- Favorite item 3 -->246  <div class="row">247    <div class="row-text">248      <div class="row-title">Wilmington</div>249      <div class="subtitle">Delaware</div>250    </div>251    <div class="toggle off">252      <div class="knob"></div>253    </div>254  </div>255 256  <!-- Favorite item 4 -->257  <div class="row">258    <div class="row-text">259      <div class="row-title">Arizona City</div>260      <div class="subtitle">Arizona</div>261    </div>262    <div class="toggle off">263      <div class="knob"></div>264    </div>265  </div>266 267  <!-- Edit locations -->268  <div class="row" style="border-bottom: 1px solid #3B4246;">269    <div class="row-text">270      <div class="row-title">Edit Locations</div>271    </div>272    <div class="chevron">273      <svg width="28" height="28" viewBox="0 0 24 24" fill="none">274        <path d="M9 5l7 7-7 7" stroke="#A7B0B6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>275      </svg>276    </div>277  </div>278 279  <!-- Gesture bar -->280  <div class="gesture-bar"></div>281 282</div>283</body>284</html>