GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Appy Weather Modal</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #000000;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    color: #ffffff;23    font-size: 44px;24    letter-spacing: 1px;25    display: flex;26    align-items: center;27    padding: 0 32px;28    box-sizing: border-box;29  }30  .status-left { flex: 1; display: flex; align-items: center; gap: 24px; }31  .status-right { display: flex; align-items: center; gap: 26px; }32 33  .icon {34    width: 40px;35    height: 40px;36    display: inline-flex;37    align-items: center;38    justify-content: center;39  }40  .wifi svg, .battery svg {41    width: 46px;42    height: 46px;43    fill: none;44    stroke: #fff;45    stroke-width: 6;46  }47  /* Simple glyphs */48  .dot {49    width: 10px; height: 10px; background: #fff; border-radius: 50%;50  }51 52  /* Background cards (behind modal) */53  .bg-card {54    position: absolute;55    left: 80px;56    right: 80px;57    height: 230px;58    background: #1f1f1f;59    border-radius: 56px;60    color: #bdbdbd;61    padding: 44px 56px;62    box-sizing: border-box;63    opacity: 0.55;64  }65  .bg-card .title {66    font-size: 56px;67    font-weight: 800;68    font-style: italic;69    color: #dcdcdc;70    letter-spacing: 1px;71  }72  .bg-card .sub {73    font-size: 42px;74    margin-top: 16px;75    color: #b0b0b0;76  }77  .bg1 { bottom: 520px; }78  .bg2 { bottom: 260px; }79 80  /* Modal sheet */81  .modal {82    position: absolute;83    left: 54px;84    right: 54px;85    top: 690px;86    background: #3f3f3f;87    color: #ffffff;88    border-radius: 16px;89    box-shadow: 0 18px 40px rgba(0,0,0,0.6);90    padding: 56px 56px 120px 56px;91    box-sizing: border-box;92  }93  .modal h1 {94    margin: 0 0 36px 0;95    font-size: 58px;96    font-weight: 800;97  }98  .modal p {99    margin: 0 0 44px 0;100    font-size: 44px;101    line-height: 1.4;102    color: #f4f4f4;103  }104  .modal .cta {105    position: absolute;106    right: 54px;107    bottom: 36px;108    font-size: 46px;109    font-weight: 800;110    color: #ffffff;111    letter-spacing: 1px;112  }113 114  /* Navigation pill */115  .nav-pill {116    position: absolute;117    bottom: 34px;118    left: 50%;119    transform: translateX(-50%);120    width: 290px;121    height: 12px;122    background: #e8e8e8;123    border-radius: 8px;124    opacity: 0.9;125  }126</style>127</head>128<body>129<div id="render-target">130 131  <!-- Status bar -->132  <div class="status-bar">133    <div class="status-left">134      <div style="font-weight:700;">2:19</div>135      <div class="icon">136        <svg viewBox="0 0 24 24">137          <path d="M2 18h3l2-3 3 4 3-5 4 7h5" stroke-width="2" stroke="#fff" fill="none"/>138        </svg>139      </div>140      <div class="icon">141        <svg viewBox="0 0 24 24">142          <circle cx="4" cy="12" r="2" fill="#fff"/>143          <circle cx="10" cy="12" r="2" fill="#fff"/>144          <circle cx="16" cy="12" r="2" fill="#fff"/>145        </svg>146      </div>147      <div class="icon">148        <svg viewBox="0 0 24 24">149          <path d="M4 16V8l8-4v16l-8-4z" stroke="#fff" fill="none" stroke-width="2"/>150          <path d="M14 8h6v8h-6" stroke="#fff" fill="none" stroke-width="2"/>151        </svg>152      </div>153      <div style="font-style: italic;">Calm</div>154      <div class="dot"></div>155    </div>156    <div class="status-right">157      <div class="wifi">158        <svg viewBox="0 0 24 24">159          <path d="M2 8c5-4 15-4 20 0" />160          <path d="M6 12c3-2 9-2 12 0" />161          <path d="M10 16c1-1 3-1 4 0" />162          <circle cx="12" cy="20" r="1.5" fill="#fff" stroke="none"/>163        </svg>164      </div>165      <div class="battery">166        <svg viewBox="0 0 24 24">167          <rect x="2" y="6" width="18" height="12" rx="2" />168          <rect x="4" y="8" width="12" height="8" fill="#fff" stroke="none"/>169          <rect x="20" y="10" width="2" height="8" rx="1" stroke="#fff"/>170        </svg>171      </div>172    </div>173  </div>174 175  <!-- Background cards (peeking behind modal) -->176  <div class="bg-card bg1">177    <div class="title">CURRENT LOCATION</div>178    <div class="sub">More accurate, uses GPS</div>179    <div class="sub">Requires permission</div>180  </div>181 182  <div class="bg-card bg2">183    <div class="title">SEARCH</div>184    <div class="sub">Faster, type in the location you’re after</div>185    <div class="sub">No permissions required</div>186  </div>187 188  <!-- Modal content -->189  <div class="modal">190    <h1>Appy Weather is privacy-first.</h1>191    <p>Your location will be stored locally on your device – it’s <em>never</em> shared with a third party.</p>192    <p>Your location enables hyper-local forecasting when the app is run.</p>193    <p>Widgets & notifications check your location in the background when they’re updated/ sent.</p>194    <div class="cta">GOT IT</div>195  </div>196 197  <!-- Bottom navigation pill -->198  <div class="nav-pill"></div>199 200</div>201</body>202</html>