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>Permissions Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #173B48; /* deep teal backdrop */15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;16    color: #EAF6F8;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    height: 120px;25    width: 100%;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    color: #EAF6F8;31    font-weight: 600;32    letter-spacing: 0.5px;33  }34  .status-left { font-size: 40px; }35  .status-right {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #EAF6F8; stroke-width: 3; }42 43  /* Headings */44  .title {45    position: absolute;46    top: 300px;47    width: 100%;48    text-align: center;49    font-size: 72px;50    font-weight: 800;51  }52  .subtitle {53    position: absolute;54    top: 400px;55    width: 100%;56    text-align: center;57    font-size: 34px;58    color: #A9C2CA;59  }60 61  /* Cards */62  .card {63    width: 1000px;64    margin: 40px auto;65    padding: 36px 40px;66    background: #214B57;67    border-radius: 28px;68    box-sizing: border-box;69    display: flex;70    align-items: center;71    gap: 28px;72    border: 1px solid rgba(255,255,255,0.06);73    box-shadow: 0 2px 8px rgba(0,0,0,0.25) inset;74  }75  .cards-wrap {76    position: absolute;77    top: 510px;78    width: 100%;79  }80  .icon-circle {81    width: 88px;82    height: 88px;83    border-radius: 44px;84    background: #2B5E6B;85    display: flex;86    align-items: center;87    justify-content: center;88  }89  .icon-circle svg { width: 52px; height: 52px; }90 91  .card-content {92    flex: 1;93  }94  .card-title {95    font-size: 40px;96    font-weight: 700;97    color: #EAF6F8;98    margin-bottom: 10px;99  }100  .card-desc {101    font-size: 30px;102    color: #96B2BB;103  }104 105  .toggle {106    width: 70px;107    height: 70px;108    border-radius: 16px;109    display: flex;110    align-items: center;111    justify-content: center;112  }113  .toggle.off {114    border: 3px solid #8AA3AB;115    background: transparent;116  }117  .toggle.on {118    background: #19F0B8;119  }120  .toggle.on svg { width: 44px; height: 44px; }121 122  /* Bottom actions */123  .actions {124    position: absolute;125    bottom: 220px;126    left: 40px;127    width: 1000px;128    display: flex;129    gap: 32px;130  }131  .btn {132    height: 120px;133    border-radius: 28px;134    display: flex;135    align-items: center;136    justify-content: center;137    font-size: 40px;138    font-weight: 700;139    box-sizing: border-box;140  }141  .btn-outline {142    width: 260px;143    border: 3px solid #A9C2CA;144    color: #EAF6F8;145    background: transparent;146  }147  .btn-primary {148    flex: 1;149    background: #19F0B8;150    color: #0E3C44;151  }152 153  /* Home indicator */154  .home-indicator {155    position: absolute;156    bottom: 120px;157    left: 50%;158    transform: translateX(-50%);159    width: 300px;160    height: 16px;161    background: #D8DDE0;162    border-radius: 10px;163    opacity: 0.9;164  }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar -->171  <div class="status-bar">172    <div class="status-left">10:09</div>173    <div class="status-right">174      <div class="status-icon">175        <!-- simple signal icon -->176        <svg viewBox="0 0 24 24"><path d="M3 18h2M3 13h4M3 8h6M3 3h8" stroke-linecap="round"/></svg>177      </div>178      <div class="status-icon">179        <!-- upload/download arrows -->180        <svg viewBox="0 0 24 24">181          <path d="M7 16v-6m0 0l-3 3m3-3l3 3" stroke-linecap="round" stroke-linejoin="round"/>182          <path d="M17 8v6m0 0l-3-3m3 3l3-3" stroke-linecap="round" stroke-linejoin="round"/>183        </svg>184      </div>185      <div class="status-icon">186        <!-- dot -->187        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#EAF6F8"/></svg>188      </div>189      <div class="status-icon">190        <!-- wifi -->191        <svg viewBox="0 0 24 24">192          <path d="M2 8c5-4 15-4 20 0M5 12c3-2 11-2 14 0M8 16c2-1 6-1 8 0" stroke-linecap="round"/>193          <circle cx="12" cy="19" r="1.5" fill="#EAF6F8" stroke="none"/>194        </svg>195      </div>196      <div class="status-icon">197        <!-- battery -->198        <svg viewBox="0 0 26 24">199          <rect x="2" y="6" width="18" height="12" rx="2" stroke="#EAF6F8" fill="none"/>200          <rect x="22" y="9" width="2" height="6" rx="1" fill="#EAF6F8"/>201          <rect x="4" y="8" width="14" height="8" fill="#EAF6F8"/>202        </svg>203      </div>204    </div>205  </div>206 207  <!-- Heading -->208  <div class="title">Permissions</div>209  <div class="subtitle">Grant Windy.app permissions for an optimal experience</div>210 211  <!-- Cards -->212  <div class="cards-wrap">213    <div class="card">214      <div class="icon-circle">215        <!-- bell with plus -->216        <svg viewBox="0 0 24 24" fill="#EAF6F8">217          <path d="M12 3c-3 0-5 2.5-5 5.5v3.7l-1.7 1.7V16h15.4v-2.1L18 12.2V8.5C18 5.5 15 3 12 3zM10 18a2 2 0 0 0 4 0h-4z"/>218          <path d="M18.5 6.5h-2m1-1v2" stroke="#EAF6F8" stroke-width="2" stroke-linecap="round"/>219        </svg>220      </div>221      <div class="card-content">222        <div class="card-title">Push notifications</div>223        <div class="card-desc">Never miss great conditions or important updates</div>224      </div>225      <div class="toggle off"></div>226    </div>227 228    <div class="card" style="margin-top: 28px;">229      <div class="icon-circle">230        <!-- location target -->231        <svg viewBox="0 0 24 24" fill="none" stroke="#EAF6F8" stroke-width="2">232          <circle cx="12" cy="12" r="6"/>233          <circle cx="12" cy="12" r="2" fill="#EAF6F8" stroke="none"/>234          <path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke-linecap="round"/>235        </svg>236      </div>237      <div class="card-content">238        <div class="card-title">Location</div>239        <div class="card-desc">Instantly see weather for your location and view spots nearby</div>240      </div>241      <div class="toggle on">242        <svg viewBox="0 0 24 24" fill="none" stroke="#0E3C44" stroke-width="3">243          <path d="M5 12l4 4 10-10" stroke-linecap="round" stroke-linejoin="round"/>244        </svg>245      </div>246    </div>247  </div>248 249  <!-- Actions -->250  <div class="actions">251    <div class="btn btn-outline">Skip</div>252    <div class="btn btn-primary">Allow all</div>253  </div>254 255  <!-- Home indicator -->256  <div class="home-indicator"></div>257</div>258</body>259</html>