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>Government Alerts UI</title>7<style>8  :root{9    --bg:#2f3438;10    --bg-darker:#282d31;11    --text:#e9eef0;12    --muted:#8c969c;13    --divider:#3a4247;14    --tile:#384047;15  }16  body{ margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }17  #render-target{18    width:1080px; height:2400px; position:relative; overflow:hidden;19    background:var(--bg);20    color:var(--text);21  }22  /* Status bar */23  .status-bar{24    height:100px; padding:0 36px;25    display:flex; align-items:center; justify-content:space-between;26    color:#ffffff; font-size:42px; letter-spacing:0.5px;27  }28  .status-icons{ display:flex; align-items:center; gap:22px; }29  .dot{ width:10px; height:10px; background:#cfd8dc; border-radius:50%; display:inline-block; opacity:0.9; }30  .icon-wifi, .icon-batt{ width:44px; height:44px; }31  /* App bar */32  .appbar{33    height:140px; border-top:1px solid transparent; border-bottom:1px solid var(--divider);34    display:flex; align-items:center; justify-content:center; position:relative;35  }36  .appbar h1{ margin:0; font-size:52px; font-weight:700; }37  .back-btn{38    position:absolute; left:24px; top:50%; transform:translateY(-50%);39    width:72px; height:72px; display:flex; align-items:center; justify-content:center; cursor:default;40  }41  /* Hint text */42  .hint{43    text-align:center; color:var(--muted); font-size:36px;44    padding:46px 60px 26px;45  }46 47  /* Rows */48  .row{ height:150px; display:flex; align-items:center; padding:0 36px; border-top:1px solid var(--divider); }49  .row:last-child{ border-bottom:1px solid var(--divider); }50  .row .leading{51    width:84px; height:84px; border-radius:42px; display:flex; align-items:center; justify-content:center;52    color:#cfd8dc; margin-right:24px;53  }54  .row .title{ font-size:46px; font-weight:600; }55  .row .subtitle{ color:var(--muted); font-size:34px; margin-top:6px; }56  .row .content{ display:flex; flex-direction:column; }57  .spacer{ flex:1; }58 59  /* Section label */60  .section-label{61    padding:38px 36px 18px; color:#b2bcc2; font-weight:700; font-size:30px; letter-spacing:2px;62  }63 64  /* Toggle switch (off) */65  .switch{66    width:142px; height:76px; background:#4a5258; border-radius:38px; position:relative;67    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);68  }69  .switch .knob{70    width:66px; height:66px; background:#6b737a; border-radius:50%; position:absolute; left:6px; top:5px;71    box-shadow:0 1px 0 rgba(0,0,0,0.35);72  }73 74  /* Chevron */75  .chevron{ width:28px; height:28px; border-right:4px solid #9aa6ad; border-top:4px solid #9aa6ad; transform:rotate(45deg); }76 77  /* Bottom gesture handle */78  .gesture{79    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);80    width:320px; height:12px; background:#e5e5e5; border-radius:8px; opacity:0.9;81  }82 83  /* Simple inline icon wrappers for sizing consistency */84  .icon-24 svg{ width:60px; height:60px; }85  .list{ background:transparent; }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status Bar -->92  <div class="status-bar">93    <div>5:32</div>94    <div class="status-icons">95      <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>96      <span class="dot" style="margin-right:10px;"></span>97      <!-- WiFi -->98      <svg class="icon-wifi" viewBox="0 0 24 24" fill="#e0e0e0">99        <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-5-3a9 9 0 0 1 10 0l-1.4 1.4a7 7 0 0 0-7.2 0L7 15.5zm-3.2-3.2A14 14 0 0 1 12 9c3.2 0 6.2 1 8.2 2.8L18.8 13A11 11 0 0 0 12 11a11 11 0 0 0-6.8 2l-1.4-1.7z"/>100      </svg>101      <!-- Battery -->102      <svg class="icon-batt" viewBox="0 0 24 24" fill="#e0e0e0">103        <path d="M16 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2h-2v-2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h10zM6 8v8h12V8H6z"/>104      </svg>105    </div>106  </div>107 108  <!-- App Bar -->109  <div class="appbar">110    <div class="back-btn">111      <svg width="40" height="40" viewBox="0 0 24 24" fill="#cfd8dc">112        <path d="M15.5 5l-7 7 7 7 1.5-1.5L11 12l6-6z"/>113      </svg>114    </div>115    <h1>Government Alerts</h1>116  </div>117 118  <!-- Hint -->119  <div class="hint">Switch on locations to receive notifications.</div>120 121  <!-- Enable current location -->122  <div class="row">123    <div class="leading icon-24">124      <svg viewBox="0 0 24 24" fill="#cfd8dc">125        <path d="M2 12l18-8-8 18-2-7-8-3z"/>126      </svg>127    </div>128    <div class="title">Enable Current Location</div>129    <div class="spacer"></div>130  </div>131 132  <div class="section-label">FAVORITES</div>133 134  <!-- Favorite items -->135  <div class="list">136    <div class="row">137      <div class="content">138        <div class="title">Ivrea</div>139        <div class="subtitle">Italy</div>140      </div>141      <div class="spacer"></div>142      <div class="switch"><div class="knob"></div></div>143    </div>144 145    <div class="row">146      <div class="content">147        <div class="title">Upper East Side</div>148        <div class="subtitle">New York</div>149      </div>150      <div class="spacer"></div>151      <div class="switch"><div class="knob"></div></div>152    </div>153 154    <div class="row">155      <div class="content">156        <div class="title">Wilmington</div>157        <div class="subtitle">Delaware</div>158      </div>159      <div class="spacer"></div>160      <div class="switch"><div class="knob"></div></div>161    </div>162 163    <div class="row">164      <div class="content">165        <div class="title">Arizona City</div>166        <div class="subtitle">Arizona</div>167      </div>168      <div class="spacer"></div>169      <div class="switch"><div class="knob"></div></div>170    </div>171 172    <div class="row">173      <div class="title">Edit Locations</div>174      <div class="spacer"></div>175      <div class="chevron"></div>176    </div>177  </div>178 179  <!-- Bottom gesture handle -->180  <div class="gesture"></div>181</div>182</body>183</html>