GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Government Alerts Screen</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#1f2427; color:#EAEFF2;10  }11 12  /* Status bar */13  .status-bar {14    height:110px; padding:0 36px; box-sizing:border-box; color:#dfe5e8;15    display:flex; align-items:center; justify-content:space-between;16  }17  .status-left { font-size:42px; letter-spacing:1px; }18  .status-right { display:flex; gap:26px; align-items:center; }19  .dot, .small-circle {20    width:18px; height:18px; border-radius:50%; background:#cfd6da; opacity:.85;21  }22  .battery {23    width:48px; height:24px; border:2px solid #cfd6da; border-radius:4px; position:relative;24  }25  .battery:after {26    content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#cfd6da; border-radius:1px;27  }28 29  /* Header */30  .header {31    height:120px; display:flex; align-items:center; justify-content:center;32    position:relative; border-bottom:1px solid #2c3135;33  }34  .title { font-size:54px; font-weight:700; color:#f1f5f7; }35  .back-btn {36    position:absolute; left:24px; background:transparent; border:none; width:92px; height:92px; cursor:pointer;37  }38  .back-btn svg { width:48px; height:48px; fill:none; stroke:#e6ecef; stroke-width:6; }39 40  /* Hint */41  .hint {42    color:#98a2a9; font-size:34px; padding:28px 44px 18px; border-bottom:1px solid #2c3135;43  }44 45  /* Sections and rows */46  .section { }47  .section-label {48    color:#8f9aa2; font-size:30px; letter-spacing:2px; padding:34px 44px 12px; text-transform:uppercase;49  }50  .row {51    display:flex; align-items:center; justify-content:space-between;52    padding:40px 44px; border-bottom:1px solid #2c3135;53  }54  .left { display:flex; align-items:center; gap:26px; }55  .label { font-size:44px; color:#e7edf0; }56  .primary { font-size:48px; color:#e7edf0; }57  .secondary { font-size:32px; color:#98a2a9; margin-top:10px; }58  .stack { display:flex; flex-direction:column; }59 60  /* Location icon */61  .loc-icon {62    width:46px; height:46px;63  }64  .loc-icon path { fill:#cfd6da; }65 66  /* Toggle */67  .toggle {68    width:160px; height:84px; border-radius:50px; position:relative; background:#3a4146;69  }70  .toggle:before {71    content:""; position:absolute; top:7px; left:8px; width:70px; height:70px; background:#6d747a; border-radius:50%;72    transition:all .25s ease;73  }74  .toggle.on { background:#63c45e; }75  .toggle.on:before { left:82px; background:#ffffff; }76 77  /* Chevron row */78  .row.chevron .primary { font-size:44px; }79  .chev {80    width:36px; height:36px; stroke:#cfd6da; stroke-width:8; fill:none;81  }82</style>83</head>84<body>85<div id="render-target">86 87  <!-- Status bar -->88  <div class="status-bar">89    <div class="status-left">8:22</div>90    <div class="status-right">91      <div style="font-size:26px; color:#cfd6da; opacity:.9;">Calm</div>92      <div class="small-circle"></div>93      <div class="small-circle" style="background:#cfd6da; width:26px; height:18px; border-radius:4px;"></div>94      <div class="dot"></div>95      <svg width="28" height="28" viewBox="0 0 24 24" fill="#cfd6da"><circle cx="12" cy="12" r="9"/></svg>96      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#cfd6da" stroke-width="2"><path d="M3 12l5 5L21 4"/></svg>97      <div class="battery"></div>98    </div>99  </div>100 101  <!-- Header -->102  <div class="header">103    <button class="back-btn" aria-label="Back">104      <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>105    </button>106    <div class="title">Government Alerts</div>107  </div>108 109  <!-- Hint -->110  <div class="hint">Switch on locations to receive notifications.</div>111 112  <!-- Current Location -->113  <div class="row">114    <div class="left">115      <svg class="loc-icon" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>116      <div class="label">Current Location</div>117    </div>118    <div class="toggle" aria-label="toggle-off"></div>119  </div>120 121  <!-- Favorites label -->122  <div class="section-label">Favorites</div>123 124  <!-- Orléans -->125  <div class="row">126    <div class="left stack">127      <div class="primary">Orléans</div>128      <div class="secondary">France</div>129    </div>130    <div class="toggle on" aria-label="toggle-on"></div>131  </div>132 133  <!-- Tokyo -->134  <div class="row">135    <div class="left stack">136      <div class="primary">Tokyo</div>137      <div class="secondary">Japan</div>138    </div>139    <div class="toggle on" aria-label="toggle-on"></div>140  </div>141 142  <!-- Edit Locations -->143  <div class="row chevron">144    <div class="left">145      <div class="primary">Edit Locations</div>146    </div>147    <svg class="chev" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>148  </div>149 150</div>151</body>152</html>