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<title>Location Permission Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #1b2732; /* deep navy background */15    color: #cdd6df;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 110px;25    padding: 28px 36px 0 36px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: rgba(255,255,255,0.92);31    font-weight: 600;32    letter-spacing: 0.5px;33  }34  .status-left, .status-right {35    display: flex;36    align-items: center;37    gap: 22px;38    font-size: 38px;39  }40  .dot {41    width: 14px;42    height: 14px;43    background: rgba(255,255,255,0.9);44    border-radius: 50%;45    display: inline-block;46  }47  .icon {48    display: inline-flex;49    align-items: center;50    justify-content: center;51  }52  .icon svg { display: block; }53 54  /* Main content */55  .content {56    position: absolute;57    top: 520px;58    left: 0;59    width: 100%;60    text-align: center;61    padding: 0 70px;62    box-sizing: border-box;63  }64  .pin {65    margin: 0 auto 140px auto;66    width: 200px;67    height: 200px;68  }69  .title {70    font-size: 52px;71    font-weight: 600;72    color: #cbd5de;73    margin: 0 auto;74    max-width: 930px;75  }76  .subtitle {77    margin: 60px auto 0 auto;78    max-width: 920px;79    font-size: 44px;80    line-height: 1.35;81    color: #b9c4cd;82    font-weight: 500;83  }84 85  .cta {86    margin: 150px auto 0 auto;87    width: 860px;88    height: 128px;89    background: #eab473;90    border-radius: 80px;91    box-shadow: 0 10px 0 rgba(0,0,0,0.15), 0 18px 40px rgba(0,0,0,0.35) inset;92    display: flex;93    align-items: center;94    justify-content: center;95    color: #4e3a22;96    font-weight: 800;97    font-size: 44px;98    letter-spacing: 0.5px;99  }100 101  /* Bottom gesture area */102  .bottom-bar {103    position: absolute;104    left: 0;105    bottom: 0;106    width: 100%;107    height: 140px;108    background: #000000;109  }110  .home-indicator {111    position: absolute;112    left: 50%;113    bottom: 40px;114    transform: translateX(-50%);115    width: 300px;116    height: 12px;117    background: #e8e8e8;118    border-radius: 8px;119    opacity: 0.95;120  }121</style>122</head>123<body>124<div id="render-target">125 126  <!-- Simulated status bar -->127  <div class="status-bar">128    <div class="status-left">129      <span>1:21</span>130      <span class="dot"></span>131      <div class="icon" aria-hidden="true">132        <!-- Simple app icon placeholder -->133        <svg width="38" height="38" viewBox="0 0 24 24" fill="white">134          <circle cx="12" cy="12" r="10" opacity="0.6"/>135        </svg>136      </div>137      <span style="opacity:0.9;">33°</span>138      <span style="opacity:0.9;">33°</span>139      <span class="dot" style="opacity:0.7;"></span>140    </div>141    <div class="status-right">142      <!-- WiFi icon -->143      <div class="icon" aria-hidden="true">144        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">145          <path d="M2 8c5.5-5.3 14.5-5.3 20 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>146          <path d="M5 12c3.7-3.6 10.3-3.6 14 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>147          <path d="M9 16c2-2 4-2 6 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>148          <circle cx="12" cy="19" r="1.6" fill="#FFFFFF"/>149        </svg>150      </div>151      <!-- Battery icon -->152      <div class="icon" aria-hidden="true">153        <svg width="44" height="44" viewBox="0 0 28 18" fill="none">154          <rect x="1" y="3" width="22" height="12" rx="2" stroke="#FFFFFF" stroke-width="2"/>155          <rect x="3" y="5" width="18" height="8" fill="#FFFFFF"/>156          <rect x="23" y="7" width="4" height="4" rx="1" fill="#FFFFFF"/>157        </svg>158      </div>159    </div>160  </div>161 162  <!-- Main content -->163  <div class="content">164    <div class="pin" aria-hidden="true">165      <svg width="100%" height="100%" viewBox="0 0 160 200" fill="none">166        <path d="M80 10c-33 0-60 27-60 60 0 40 39 78 60 100 21-22 60-60 60-100 0-33-27-60-60-60z" fill="#c3cdd6"/>167        <circle cx="80" cy="70" r="18" fill="#1b2732"/>168      </svg>169    </div>170 171    <h1 class="title">Allow YoWindow to access your location</h1>172 173    <p class="subtitle">Get accurate weather forecast right for your location.</p>174 175    <div class="cta">Next</div>176  </div>177 178  <!-- Bottom gesture area -->179  <div class="bottom-bar"></div>180  <div class="home-indicator"></div>181</div>182</body>183</html>