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>Smart Recorder Permission</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f0f10;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 140px;24    color: #fff;25    background: #0a0a0a;26  }27  .status-left {28    position: absolute;29    left: 40px;30    top: 40px;31    display: flex;32    align-items: center;33    gap: 24px;34    font-weight: 600;35    font-size: 52px;36  }37  .status-right {38    position: absolute;39    right: 40px;40    top: 40px;41    display: flex;42    align-items: center;43    gap: 28px;44  }45  .status-icon svg { width: 52px; height: 52px; fill: #fff; opacity: 0.95; }46 47  /* Subtle top app icons */48  .top-actions {49    position: absolute;50    right: 60px;51    top: 260px;52    display: flex;53    align-items: center;54    gap: 36px;55    color: #9aa0a6;56  }57  .top-actions svg { width: 60px; height: 60px; fill: #9aa0a6; opacity: 0.4; }58 59  /* Equalizer dots background */60  .dots {61    position: absolute;62    left: 270px;63    top: 860px;64    width: 540px;65    height: 520px;66    display: grid;67    grid-template-columns: repeat(9, 1fr);68    gap: 10px 26px;69    opacity: 0.25;70  }71  .dot-col {72    display: grid;73    grid-template-rows: repeat(11, 1fr);74    align-items: center;75    justify-items: center;76  }77  .dot {78    width: 26px;79    height: 26px;80    border-radius: 50%;81    background: #1c1c1c;82  }83 84  /* Permission sheet */85  .sheet {86    position: absolute;87    left: 60px;88    top: 1180px;89    width: 960px;90    background: #3c4145;91    color: #fff;92    border-radius: 44px;93    padding: 64px 60px 56px;94    box-shadow: 0 20px 40px rgba(0,0,0,0.55);95  }96  .mic-icon {97    width: 72px;98    height: 72px;99    margin: 0 auto 30px;100  }101  .mic-icon svg { width: 100%; height: 100%; fill: #c6a7f7; }102  .sheet h1 {103    margin: 0 0 44px;104    font-size: 48px;105    line-height: 1.25;106    text-align: center;107    font-weight: 800;108    letter-spacing: 0.2px;109  }110  .actions { display: flex; flex-direction: column; gap: 22px; }111  .btn {112    height: 150px;113    border-radius: 26px;114    background: #ead6ff;115    color: #111;116    font-size: 36px;117    font-weight: 600;118    display: flex;119    justify-content: center;120    align-items: center;121    border: 1px solid #d7c6f5;122  }123 124  /* Bottom label */125  .recordings {126    position: absolute;127    right: 60px;128    bottom: 180px;129    display: flex;130    align-items: center;131    gap: 16px;132    color: #9aa0a6;133    opacity: 0.6;134    font-size: 42px;135    letter-spacing: 0.2px;136  }137  .recordings .icon {138    width: 48px; height: 48px;139  }140  .recordings svg { width: 100%; height: 100%; fill: #9aa0a6; }141 142  /* Bottom navbar pill */143  .nav-pill {144    position: absolute;145    left: 50%;146    transform: translateX(-50%);147    bottom: 80px;148    width: 360px;149    height: 16px;150    background: #e6e6e6;151    border-radius: 10px;152    opacity: 0.9;153  }154</style>155</head>156<body>157<div id="render-target">158  <!-- Status Bar -->159  <div class="status-bar">160    <div class="status-left">161      <div>4:39</div>162      <div class="status-icon">163        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"/><text x="9" y="16" font-size="10" fill="#fff">ib</text></svg>164      </div>165      <div class="status-icon">166        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="3"></circle><rect x="16" y="6" width="2" height="12"></rect></svg>167      </div>168      <div class="status-icon">169        <svg viewBox="0 0 24 24"><path d="M4 18l8-12 8 12H4z"></path></svg>170      </div>171    </div>172    <div class="status-right">173      <div class="status-icon">174        <!-- WiFi -->175        <svg viewBox="0 0 24 24">176          <path d="M12 18a2 2 0 100 4 2 2 0 000-4z"></path>177          <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none"></path>178          <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none"></path>179        </svg>180      </div>181      <div class="status-icon">182        <!-- Battery -->183        <svg viewBox="0 0 24 24">184          <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>185          <rect x="20" y="10" width="2" height="4"></rect>186        </svg>187      </div>188    </div>189  </div>190 191  <!-- Faint top actions -->192  <div class="top-actions">193    <!-- Clock icon -->194    <svg viewBox="0 0 24 24">195      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"></circle>196      <path d="M12 7v6l4 2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></path>197    </svg>198    <!-- Wave/refresh icon -->199    <svg viewBox="0 0 24 24">200      <path d="M4 12c2 0 2-6 4-6s2 6 4 6 2-6 4-6 2 6 4 6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></path>201      <path d="M15 4l3 3-3 3" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></path>202    </svg>203    <!-- Kebab -->204    <svg viewBox="0 0 24 24">205      <circle cx="12" cy="5" r="2"></circle>206      <circle cx="12" cy="12" r="2"></circle>207      <circle cx="12" cy="19" r="2"></circle>208    </svg>209  </div>210 211  <!-- Equalizer dots -->212  <div class="dots">213    <div class="dot-col">214      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>215    </div>216    <div class="dot-col">217      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>218    </div>219    <div class="dot-col">220      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>221    </div>222    <div class="dot-col">223      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>224    </div>225    <div class="dot-col">226      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>227    </div>228    <div class="dot-col">229      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>230    </div>231    <div class="dot-col">232      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>233    </div>234    <div class="dot-col">235      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>236    </div>237    <div class="dot-col">238      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>239    </div>240  </div>241 242  <!-- Permission Sheet -->243  <div class="sheet">244    <div class="mic-icon">245      <svg viewBox="0 0 24 24">246        <path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3z"></path>247        <path d="M5 11a7 7 0 0014 0" stroke="#c6a7f7" stroke-width="2" fill="none" stroke-linecap="round"></path>248        <rect x="11" y="16" width="2" height="5" fill="#c6a7f7"></rect>249      </svg>250    </div>251    <h1>Allow Smart Recorder to record audio?</h1>252    <div class="actions">253      <div class="btn">While using the app</div>254      <div class="btn">Only this time</div>255      <div class="btn">Don’t allow</div>256    </div>257  </div>258 259  <!-- Bottom right label -->260  <div class="recordings">261    <div class="icon">262      <svg viewBox="0 0 24 24">263        <rect x="5" y="4" width="14" height="16" rx="2" ry="2"></rect>264        <path d="M9 10h6v4H9z" fill="#0f0f10"></path>265      </svg>266    </div>267    <div>Recordings</div>268  </div>269 270  <div class="nav-pill"></div>271</div>272</body>273</html>