GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }8  #render-target {9    position: relative; overflow: hidden;10    width: 1080px; height: 2400px;11    background: #0f1d23; color: #ffffff;12    border-radius: 34px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);13  }14 15  /* Status bar */16  .statusbar {17    position: absolute; top: 36px; left: 40px; right: 40px;18    height: 60px; display: flex; justify-content: space-between; align-items: center;19    color: #fff; opacity: 0.95; font-size: 34px;20  }21  .status-icons { display: flex; gap: 18px; align-items: center; }22  .status-icons span { width: 18px; height: 18px; border-radius: 50%; background: #d9d9d9; opacity: 0.9; }23 24  /* Header texts */25  .header { position: absolute; top: 220px; width: 100%; text-align: center; }26  .header h1 { margin: 0; font-size: 72px; font-weight: 700; color: #cfd6db; }27  .header p { margin: 20px 160px 0; font-size: 34px; color: #7e8b93; }28 29  /* Decorative backdrop shapes behind the card */30  .back-shapes .shape { position: absolute; background: #132a32; border-radius: 24px; opacity: 0.35; }31  .back-shapes .s1 { top: 560px; left: 40px; width: 1000px; height: 820px; border-radius: 40px; }32  .back-shapes .s2 { top: 520px; left: 30px; width: 180px; height: 200px; }33  .back-shapes .s3 { top: 880px; left: 30px; width: 180px; height: 200px; }34 35  /* Permission card */36  .card {37    position: absolute; left: 50%; transform: translateX(-50%);38    top: 500px; width: 960px; padding: 48px;39    background: #4a4f54; border-radius: 40px; box-shadow: 0 12px 24px rgba(0,0,0,0.4);40  }41  .location-icon { width: 60px; height: 60px; margin: 0 auto 30px; }42  .title { margin: 0 40px; text-align: center; font-size: 46px; line-height: 1.25; color: #eceff1; }43  .title strong { font-weight: 800; }44 45  .images { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; margin-bottom: 24px; }46  .placeholder-circle {47    width: 360px; height: 360px; border-radius: 50%;48    background: #E0E0E0; border: 1px solid #BDBDBD;49    display: flex; justify-content: center; align-items: center;50    color: #757575; font-size: 28px; text-align: center;51  }52  .placeholder-labels { display: flex; justify-content: space-between; margin: 16px 60px 0; font-size: 34px; }53  .placeholder-labels div { color: #e5eaf0; font-weight: 700; }54  .placeholder-labels .muted { color: #cfd6db; font-weight: 600; }55 56  .card-buttons { margin-top: 32px; }57  .btn {58    width: 864px; height: 120px; margin: 22px auto 0;59    border-radius: 28px; background: #b9e7f9; color: #0d0f12;60    font-size: 38px; font-weight: 600; display: flex; justify-content: center; align-items: center;61    border: 1px solid rgba(255,255,255,0.15);62  }63 64  /* Footer actions */65  .footer {66    position: absolute; bottom: 160px; left: 60px; right: 60px;67    display: flex; justify-content: space-between; align-items: center;68  }69  .outline {70    width: 360px; height: 120px; border: 2px solid #60707a; border-radius: 24px;71    color: #cfd6db; font-size: 38px; display: flex; justify-content: center; align-items: center;72    background: rgba(255,255,255,0.03);73  }74  .primary {75    width: 560px; height: 120px; border-radius: 26px;76    background: #116c59; color: #ffffff; font-size: 40px; font-weight: 700;77    display: flex; justify-content: center; align-items: center; box-shadow: 0 8px 0 rgba(0,0,0,0.35);78  }79 80  /* Home indicator */81  .home-indicator {82    position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);83    width: 240px; height: 12px; background: #d7d9db; border-radius: 6px; opacity: 0.7;84  }85</style>86</head>87<body>88<div id="render-target">89 90  <div class="statusbar">91    <div>10:08</div>92    <div class="status-icons">93      <span></span><span></span><span></span><span></span>94    </div>95  </div>96 97  <div class="header">98    <h1>Permissions</h1>99    <p>Grant Windy.app permissions for an optimal experience</p>100  </div>101 102  <div class="back-shapes">103    <div class="shape s1"></div>104    <div class="shape s2"></div>105    <div class="shape s3"></div>106  </div>107 108  <div class="card">109    <div class="location-icon">110      <svg viewBox="0 0 24 24" width="60" height="60">111        <path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#6ec1ff"></path>112      </svg>113    </div>114 115    <h2 class="title">Allow <strong>Windy.app</strong> to access this device’s location?</h2>116 117    <div class="images">118      <div class="placeholder-circle">[IMG: Precise map]</div>119      <div class="placeholder-circle">[IMG: Approximate map]</div>120    </div>121 122    <div class="placeholder-labels">123      <div>Precise</div>124      <div class="muted">Approximate</div>125    </div>126 127    <div class="card-buttons">128      <div class="btn">While using the app</div>129      <div class="btn">Only this time</div>130      <div class="btn">Don’t allow</div>131    </div>132  </div>133 134  <div class="footer">135    <div class="outline">Skip</div>136    <div class="primary">Allow all</div>137  </div>138 139  <div class="home-indicator"></div>140 141</div>142</body>143</html>