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<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #193E4A; /* deep teal */19    color: #FFFFFF;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 30px;26    left: 40px;27    right: 40px;28    height: 80px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    opacity: 0.95;33    color: #EAF4F7;34  }35  .status-time {36    font-size: 44px;37    font-weight: 600;38    letter-spacing: 0.5px;39  }40  .status-icons {41    display: flex;42    align-items: center;43    gap: 24px;44  }45  .status-icons svg {46    width: 38px;47    height: 38px;48    fill: none;49    stroke: #EAF4F7;50    stroke-width: 3;51    opacity: 0.95;52  }53 54  /* Title & subtitle */55  .title {56    position: absolute;57    top: 220px;58    left: 0;59    width: 100%;60    text-align: center;61    font-size: 72px;62    font-weight: 700;63  }64  .subtitle {65    position: absolute;66    top: 320px;67    left: 120px;68    width: 840px;69    text-align: center;70    font-size: 32px;71    line-height: 46px;72    color: #B8D0D9;73  }74 75  /* Permission cards */76  .cards {77    position: absolute;78    top: 520px;79    left: 40px;80    right: 40px;81  }82  .perm-card {83    background: #2B5361; /* slightly lighter teal */84    border-radius: 26px;85    padding: 36px 40px;86    display: flex;87    align-items: center;88    justify-content: space-between;89    margin-bottom: 36px;90    box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;91  }92  .card-left {93    display: flex;94    align-items: center;95    gap: 28px;96  }97  .icon-wrap {98    width: 70px;99    height: 70px;100    border-radius: 16px;101    display: flex;102    align-items: center;103    justify-content: center;104  }105  .icon-wrap svg {106    width: 54px;107    height: 54px;108    stroke: #DDE9EE;109    stroke-width: 3.5;110    fill: none;111  }112  .card-text .card-title {113    font-size: 40px;114    font-weight: 600;115    letter-spacing: 0.3px;116    color: #EAF4F7;117    margin-bottom: 6px;118  }119  .card-text .card-desc {120    font-size: 28px;121    color: #9EB6C0;122  }123  .checkbox {124    width: 56px;125    height: 56px;126    border: 3px solid #8FA8B2;127    border-radius: 12px;128    box-sizing: border-box;129    opacity: 0.9;130  }131 132  /* Bottom buttons */133  .actions {134    position: absolute;135    left: 40px;136    right: 40px;137    bottom: 190px;138    display: flex;139    justify-content: space-between;140    align-items: center;141    gap: 28px;142  }143  .btn {144    height: 120px;145    border-radius: 28px;146    display: flex;147    align-items: center;148    justify-content: center;149    font-size: 42px;150    font-weight: 700;151    letter-spacing: 0.3px;152  }153  .btn-outline {154    width: 280px;155    color: #FFFFFF;156    border: 3px solid #B6CED6;157    background: transparent;158  }159  .btn-primary {160    flex: 1;161    background: #1FF7B5; /* bright green */162    color: #103D42;163    box-shadow: 0 6px 16px rgba(12, 239, 167, 0.35);164  }165 166  /* Home indicator */167  .home-indicator {168    position: absolute;169    bottom: 90px;170    left: 50%;171    transform: translateX(-50%);172    width: 240px;173    height: 12px;174    background: rgba(255,255,255,0.85);175    border-radius: 6px;176  }177</style>178</head>179<body>180<div id="render-target">181  <!-- Status bar -->182  <div class="status-bar">183    <div class="status-time">10:08</div>184    <div class="status-icons">185      <!-- small dot to mimic separators -->186      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#EAF4F7"/></svg>187      <!-- Upload/arrow-like simple icon -->188      <svg viewBox="0 0 24 24">189        <path d="M12 5v12M7 10l5-5 5 5" />190      </svg>191      <!-- Wifi -->192      <svg viewBox="0 0 24 24">193        <path d="M2 8c5-4 15-4 20 0" />194        <path d="M5 12c3-3 11-3 14 0" />195        <path d="M8 16c2-2 6-2 8 0" />196        <circle cx="12" cy="19" r="1.8" fill="#EAF4F7"/>197      </svg>198      <!-- Battery -->199      <svg viewBox="0 0 28 24">200        <rect x="2" y="6" width="20" height="12" rx="2"></rect>201        <rect x="23" y="9" width="3" height="6" rx="1"></rect>202        <rect x="4" y="8" width="14" height="8" rx="1" fill="#EAF4F7" stroke="none"></rect>203      </svg>204    </div>205  </div>206 207  <!-- Title -->208  <div class="title">Permissions</div>209  <div class="subtitle">Grant Windy.app permissions for an optimal experience</div>210 211  <!-- Permission cards -->212  <div class="cards">213    <div class="perm-card">214      <div class="card-left">215        <div class="icon-wrap">216          <!-- Bell + plus icon -->217          <svg viewBox="0 0 24 24">218            <path d="M12 4c-3 0-5 2-5 5v3l-2 3h14l-2-3V9c0-3-2-5-5-5z"></path>219            <path d="M10 19c0 1.1.9 2 2 2s2-.9 2-2" />220            <path d="M4 5h4M6 3v4" />221          </svg>222        </div>223        <div class="card-text">224          <div class="card-title">Push notifications</div>225          <div class="card-desc">Never miss great conditions or important updates</div>226        </div>227      </div>228      <div class="checkbox"></div>229    </div>230 231    <div class="perm-card">232      <div class="card-left">233        <div class="icon-wrap">234          <!-- Location/target icon -->235          <svg viewBox="0 0 24 24">236            <circle cx="12" cy="12" r="8"></circle>237            <circle cx="12" cy="12" r="2" fill="#DDE9EE" stroke="none"></circle>238            <path d="M12 3v3M21 12h-3M12 21v-3M3 12h3" />239          </svg>240        </div>241        <div class="card-text">242          <div class="card-title">Location</div>243          <div class="card-desc">Instantly see weather for your location and view spots nearby</div>244        </div>245      </div>246      <div class="checkbox"></div>247    </div>248  </div>249 250  <!-- Bottom actions -->251  <div class="actions">252    <div class="btn btn-outline">Skip</div>253    <div class="btn btn-primary">Allow all</div>254  </div>255 256  <!-- Home indicator -->257  <div class="home-indicator"></div>258</div>259</body>260</html>