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>Permission Prompt UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0d1216;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 120px;24    color: #ffffff;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 40px;29    font-size: 36px;30    opacity: 0.95;31  }32  .status-left { display: flex; align-items: center; gap: 24px; }33  .status-right { display: flex; align-items: center; gap: 24px; }34  .status-icon {35    width: 36px; height: 36px;36  }37  .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.7; }38 39  /* Dialog card */40  .dialog-card {41    position: absolute;42    left: 60px;43    top: 620px;44    width: 960px;45    background: #4b4f54;46    border-radius: 52px;47    padding: 60px;48    color: #fff;49    box-sizing: border-box;50  }51  .loc-icon {52    width: 60px; height: 60px; margin: 0 auto 28px auto; display: block;53  }54  .title {55    text-align: center;56    font-size: 50px;57    line-height: 1.2;58    font-weight: 600;59    margin: 0 40px 50px 40px;60    color: #eaeaea;61  }62  .title .appname { font-weight: 800; }63 64  .options {65    display: flex;66    justify-content: space-between;67    gap: 60px;68    margin-bottom: 40px;69  }70  .opt {71    width: 400px;72    text-align: center;73  }74  .map-img {75    width: 320px;76    height: 320px;77    background: #E0E0E0;78    border: 1px solid #BDBDBD;79    border-radius: 50%;80    display: flex;81    align-items: center;82    justify-content: center;83    color: #757575;84    font-size: 28px;85    margin: 0 auto 24px auto;86    box-sizing: border-box;87    padding: 16px;88  }89  .opt-label {90    font-size: 38px;91    font-weight: 700;92    color: #ffffff;93    opacity: 0.95;94  }95 96  .actions { margin-top: 28px; }97  .btn {98    width: 100%;99    background: #f3d6b4;100    color: #1d1d1d;101    font-size: 38px;102    border-radius: 28px;103    padding: 34px 28px;104    text-align: center;105    border: 1px solid rgba(0,0,0,0.12);106    box-sizing: border-box;107    margin-top: 24px;108  }109 110  /* Bottom gesture bar */111  .gesture-bar {112    position: absolute;113    bottom: 60px;114    left: 50%;115    transform: translateX(-50%);116    width: 360px;117    height: 16px;118    background: #e6e6e6;119    border-radius: 10px;120    opacity: 0.9;121  }122</style>123</head>124<body>125<div id="render-target">126  <!-- Status Bar -->127  <div class="status-bar">128    <div class="status-left">129      <span>1:22</span>130      <!-- simple app icon -->131      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff" opacity="0.85">132        <circle cx="12" cy="12" r="10" fill="#ffffff" opacity="0.25"></circle>133        <path d="M12 6l4 6-4 6-4-6 4-6z" fill="#ffffff"></path>134      </svg>135      <span>33°</span>136      <span>33°</span>137      <!-- cloud icon -->138      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff" opacity="0.85">139        <path d="M6 16a4 4 0 0 1 0-8 5 5 0 0 1 9.6-1.6A4.5 4.5 0 1 1 18 16H6z"></path>140      </svg>141      <div class="dot"></div>142    </div>143    <div class="status-right">144      <!-- wifi icon -->145      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff" opacity="0.9">146        <path d="M12 20l2-2-2-2-2 2 2 2zM2 8a14 14 0 0 1 20 0l-2 2a11 11 0 0 0-16 0L2 8zm4 4a10 10 0 0 1 12 0l-2 2a7 7 0 0 0-8 0l-2-2z"></path>147      </svg>148      <!-- battery icon -->149      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff" opacity="0.9">150        <rect x="3" y="6" width="16" height="12" rx="2" ry="2" stroke="#fff" stroke-width="1.5" fill="none"></rect>151        <rect x="5" y="8" width="12" height="8" fill="#fff"></rect>152        <rect x="19" y="10" width="2" height="4" fill="#fff"></rect>153      </svg>154    </div>155  </div>156 157  <!-- Dialog Card -->158  <div class="dialog-card">159    <!-- Location icon -->160    <svg class="loc-icon" viewBox="0 0 24 24">161      <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#d1a15c"></path>162    </svg>163 164    <h1 class="title">Allow <span class="appname">YoWindow</span> to access this device’s location?</h1>165 166    <div class="options">167      <div class="opt">168        <div class="map-img">[IMG: Precise location map]</div>169        <div class="opt-label">Precise</div>170      </div>171      <div class="opt">172        <div class="map-img">[IMG: Approximate location map]</div>173        <div class="opt-label" style="font-weight:600;">Approximate</div>174      </div>175    </div>176 177    <div class="actions">178      <div class="btn">While using the app</div>179      <div class="btn">Only this time</div>180      <div class="btn">Don’t allow</div>181    </div>182  </div>183 184  <div class="gesture-bar"></div>185</div>186</body>187</html>