GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Notifications UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1E2327; /* dark app background */13    color: #EDEFF1; font-family: Arial, Helvetica, sans-serif;14  }15  .status-bar {16    position: absolute; top: 0; left: 0; width: 1080px; height: 96px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 36px; color: #FFFFFF; font-weight: 600; font-size: 36px;19    opacity: 0.95;20  }21  .status-icons { display: flex; align-items: center; gap: 26px; }22  .header {23    position: absolute; top: 96px; left: 0; width: 1080px; height: 140px;24    display: flex; align-items: center; justify-content: center;25    color: #C7CBCE; font-size: 46px; font-weight: 700;26  }27  .header .back {28    position: absolute; left: 36px; top: 45px; width: 72px; height: 72px;29    display: flex; align-items: center; justify-content: center;30  }31  .list {32    position: absolute; top: 236px; left: 0; width: 100%; padding-bottom: 180px;33  }34  .item {35    padding: 40px 40px;36    border-top: 1px solid #2B2F33;37    border-bottom: 1px solid #2B2F33;38  }39  .item-title {40    font-size: 44px; font-weight: 700; color: #EDEFF1;41  }42  .item-desc {43    margin-top: 16px; font-size: 32px; line-height: 1.4; color: #8E9499;44    max-width: 880px;45  }46  .row-end {47    position: absolute; right: 40px; top: 50%; transform: translateY(-50%);48    display: flex; align-items: center; gap: 12px; color: #AAB0B5; font-size: 32px; font-weight: 700;49  }50  .premium-pill {51    background: #C95D1C; color: #FFFFFF; font-size: 28px; font-weight: 800;52    padding: 12px 20px; border-radius: 20px; display: inline-flex; align-items: center; gap: 10px;53  }54  .chevron-right svg { width: 28px; height: 28px; }55  .modal-overlay {56    position: absolute; left: 0; top: 0; width: 100%; height: 100%;57    background: rgba(0,0,0,0.35);58  }59  .modal {60    position: absolute; left: 80px; top: 1080px; width: 920px;61    background: #2F3337; border-radius: 16px;62    box-shadow: 0 14px 28px rgba(0,0,0,0.45);63    padding: 42px 48px 36px 48px; color: #FFFFFF;64  }65  .modal-title {66    font-size: 52px; font-weight: 800; letter-spacing: 0.2px;67  }68  .modal-body {69    margin-top: 22px; font-size: 34px; color: #C5CBD1;70  }71  .modal-actions {72    margin-top: 42px; display: flex; justify-content: flex-end; gap: 80px;73  }74  .modal-btn {75    color: #FFFFFF; background: none; border: none; font-size: 34px; font-weight: 800;76    letter-spacing: 2px; padding: 16px 0; cursor: default;77  }78  .gesture {79    position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);80    width: 320px; height: 12px; background: #EDEDED; border-radius: 8px; opacity: 0.9;81  }82</style>83</head>84<body>85<div id="render-target">86 87  <!-- Status Bar -->88  <div class="status-bar">89    <div>10:59</div>90    <div class="status-icons">91      <!-- Do Not Disturb -->92      <svg width="36" height="36" viewBox="0 0 36 36">93        <circle cx="18" cy="18" r="16" fill="none" stroke="#FFF" stroke-width="3"></circle>94        <rect x="9" y="16" width="18" height="4" fill="#FFF"></rect>95      </svg>96      <!-- NFC icon (simple N) -->97      <div style="font-weight:900; font-size:28px;">N</div>98      <!-- Globe icon -->99      <svg width="36" height="36" viewBox="0 0 36 36">100        <circle cx="18" cy="18" r="16" fill="none" stroke="#FFF" stroke-width="3"></circle>101        <path d="M4 18h28M18 4c6 6 6 22 0 28c-6-6-6-22 0-28z" stroke="#FFF" stroke-width="2" fill="none"></path>102      </svg>103      <!-- Dot -->104      <div style="width:8px; height:8px; background:#FFF; border-radius:50%;"></div>105      <!-- Ring circle -->106      <svg width="36" height="36" viewBox="0 0 36 36">107        <circle cx="18" cy="18" r="12" fill="none" stroke="#FFF" stroke-width="3"></circle>108      </svg>109      <!-- Wi-Fi -->110      <svg width="36" height="36" viewBox="0 0 36 36">111        <path d="M6 14c8-8 16-8 24 0M10 18c6-6 10-6 16 0M14 22c4-4 8-4 12 0M18 26l3 3-3 3-3-3 3-3z" stroke="#FFF" stroke-width="2" fill="none" stroke-linecap="round"></path>112      </svg>113      <!-- Battery with percentage -->114      <div style="display:flex; align-items:center; gap:10px;">115        <svg width="50" height="28" viewBox="0 0 50 28">116          <rect x="1" y="4" width="42" height="20" fill="none" stroke="#FFF" stroke-width="2"></rect>117          <rect x="45" y="9" width="4" height="10" fill="#FFF"></rect>118          <rect x="3" y="6" width="38" height="16" fill="#FFF"></rect>119        </svg>120        <div style="font-size:30px;">100%</div>121      </div>122    </div>123  </div>124 125  <!-- Header -->126  <div class="header">127    <div class="back">128      <svg width="48" height="48" viewBox="0 0 48 48">129        <path d="M28 10 L16 24 L28 38" stroke="#C7CBCE" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>130      </svg>131    </div>132    <div>Notifications</div>133  </div>134 135  <!-- List -->136  <div class="list">137 138    <!-- Item 1 -->139    <div class="item" style="position: relative; padding-right: 220px;">140      <div class="item-title">AccuWeather Alerts™</div>141      <div class="item-desc">The most advanced severe weather notifications available.</div>142      <div class="row-end" style="right: 40px;">143        <div class="premium-pill">144          PREMIUM+145          <svg width="20" height="20" viewBox="0 0 24 24">146            <rect x="5" y="10" width="14" height="10" rx="2" fill="#FFF"></rect>147            <path d="M8 10V8a4 4 0 018 0v2" stroke="#C95D1C" stroke-width="2" fill="none"></path>148          </svg>149        </div>150      </div>151    </div>152 153    <!-- Item 2 -->154    <div class="item" style="position: relative; padding-right: 220px;">155      <div class="item-title">Government Alerts</div>156      <div class="item-desc">Standard watches and warnings that include a map outlining impacted areas and links to more information.</div>157      <div class="row-end">158        <div>OFF</div>159        <div class="chevron-right">160          <svg viewBox="0 0 20 20"><path d="M6 3l7 7-7 7" stroke="#AAB0B5" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>161        </div>162      </div>163    </div>164 165    <!-- Item 3 -->166    <div class="item" style="position: relative; padding-right: 220px;">167      <div class="item-title">Weather News</div>168      <div class="item-desc">The latest in weather-related news, sports, and more.</div>169      <div class="row-end">170        <div>OFF</div>171        <div class="chevron-right">172          <svg viewBox="0 0 20 20"><path d="M6 3l7 7-7 7" stroke="#AAB0B5" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>173        </div>174      </div>175    </div>176 177    <!-- Item 4 -->178    <div class="item" style="position: relative; height: 170px;">179      <div class="item-title">Morning Brief</div>180      <div class="row-end">181        <div>OFF</div>182        <div class="chevron-right">183          <svg viewBox="0 0 20 20"><path d="M6 3l7 7-7 7" stroke="#AAB0B5" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>184        </div>185      </div>186    </div>187 188    <!-- Item 5 -->189    <div class="item" style="position: relative; height: 170px;">190      <div class="item-title">System Alerts</div>191      <div class="row-end">192        <div>OFF</div>193        <div class="chevron-right">194          <svg viewBox="0 0 20 20"><path d="M6 3l7 7-7 7" stroke="#AAB0B5" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>195        </div>196      </div>197    </div>198 199    <!-- Item 6 -->200    <div class="item" style="position: relative; height: 170px;">201      <div class="item-title">Persistent Notification</div>202      <div class="row-end">203        <div>OFF</div>204        <div class="chevron-right">205          <svg viewBox="0 0 20 20"><path d="M6 3l7 7-7 7" stroke="#AAB0B5" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>206        </div>207      </div>208    </div>209 210  </div>211 212  <!-- Modal -->213  <div class="modal-overlay"></div>214  <div class="modal">215    <div class="modal-title">Push Notifications are turned off in your settings</div>216    <div class="modal-body">Go to your device's settings to allow push notifications</div>217    <div class="modal-actions">218      <button class="modal-btn">CANCEL</button>219      <button class="modal-btn">SETTINGS</button>220    </div>221  </div>222 223  <!-- Gesture bar -->224  <div class="gesture"></div>225 226</div>227</body>228</html>