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>Tasty - Permission Modal</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", Arial, sans-serif;13  }14 15  #render-target {16    position: relative;17    overflow: hidden;18    width: 1080px;19    height: 2400px;20    background: #111214;21    color: #EDEDED;22  }23 24  /* Status bar mock */25  .status-bar {26    position: absolute;27    top: 22px;28    left: 36px;29    right: 36px;30    height: 60px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #EAEAEA;35    font-weight: 600;36    letter-spacing: 1px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 26px;42  }43  .status-icon {44    width: 28px;45    height: 28px;46    opacity: 0.9;47  }48 49  /* Search bar */50  .search-wrap {51    position: absolute;52    top: 180px;53    left: 60px;54    width: 960px;55    height: 120px;56    border-radius: 60px;57    border: 2px solid #2E2F33;58    background: #17181B;59    display: flex;60    align-items: center;61    padding: 0 36px;62    box-sizing: border-box;63  }64  .search-icon {65    width: 48px;66    height: 48px;67    margin-right: 22px;68    opacity: 0.7;69  }70  .placeholder {71    color: #6C6D71;72    font-size: 38px;73    font-weight: 500;74  }75 76  /* Permission modal card */77  .modal {78    position: absolute;79    left: 54px;80    right: 54px;81    top: 820px;82    background: #3C3F42;83    border-radius: 46px;84    padding: 72px 56px 56px;85    box-sizing: border-box;86    box-shadow: 0 14px 40px rgba(0,0,0,0.35);87  }88  .bell {89    width: 72px;90    height: 72px;91    margin: 0 auto 30px;92    display: block;93    color: #F2C779;94  }95  .modal-title {96    text-align: center;97    font-size: 56px;98    line-height: 1.25;99    font-weight: 700;100    margin: 0 24px 56px;101    color: #F1F1F1;102  }103  .modal-title .brand {104    font-weight: 800;105  }106  .modal-actions {107    display: flex;108    flex-direction: column;109    gap: 26px;110    align-items: center;111  }112  .btn {113    width: 100%;114    height: 140px;115    border-radius: 32px;116    background: #F5D39A;117    color: #1B1C1E;118    font-size: 42px;119    font-weight: 700;120    letter-spacing: 0.2px;121    border: none;122    display: flex;123    align-items: center;124    justify-content: center;125  }126  .btn.secondary {127    background: #F5D39A;128    opacity: 0.95;129  }130 131  /* Bottom navigation */132  .bottom-bar {133    position: absolute;134    left: 0;135    right: 0;136    bottom: 110px;137    height: 170px;138    display: flex;139    justify-content: space-around;140    align-items: center;141  }142  .nav-item {143    width: 220px;144    text-align: center;145    color: #8D8F93;146    opacity: 0.65;147  }148  .nav-item.active {149    color: #E54B73;150    opacity: 1;151  }152  .nav-icon {153    width: 56px;154    height: 56px;155    margin: 0 auto 16px;156    display: block;157  }158  .nav-label {159    font-size: 32px;160    font-weight: 700;161  }162  /* Profile dot */163  .avatar-dot {164    width: 54px;165    height: 54px;166    background: #6A5245;167    border-radius: 50%;168    margin: 0 auto 16px;169    position: relative;170  }171  .avatar-dot::after {172    content: "I";173    position: absolute;174    inset: 0;175    display: flex;176    align-items: center;177    justify-content: center;178    color: #E9E0D8;179    font-weight: 800;180  }181 182  /* Gesture bar */183  .home-indicator {184    position: absolute;185    bottom: 34px;186    left: 50%;187    transform: translateX(-50%);188    width: 260px;189    height: 14px;190    background: #EDEDED;191    border-radius: 10px;192    opacity: 0.85;193  }194</style>195</head>196<body>197<div id="render-target">198 199  <!-- Status Bar -->200  <div class="status-bar">201    <div class="status-left">10:43</div>202    <div class="status-right">203      <!-- WiFi -->204      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">205        <path d="M2 8c5-4 15-4 20 0" />206        <path d="M5 12c3-3 11-3 14 0" />207        <path d="M8 16c2-2 6-2 8 0" />208        <circle cx="12" cy="19" r="1.5" fill="#FFFFFF" stroke="none"/>209      </svg>210      <!-- Battery -->211      <svg class="status-icon" viewBox="0 0 28 16" fill="none" stroke="#FFFFFF" stroke-width="1.6">212        <rect x="1" y="3" width="22" height="10" rx="2"></rect>213        <rect x="24" y="6" width="3" height="4" rx="1" fill="#FFFFFF" stroke="none"></rect>214        <rect x="3" y="5" width="18" height="6" rx="1" fill="#FFFFFF" stroke="none" />215      </svg>216    </div>217  </div>218 219  <!-- Search -->220  <div class="search-wrap">221    <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#9AA0A6" stroke-width="2">222      <circle cx="11" cy="11" r="7"></circle>223      <path d="M20 20l-3.5-3.5"></path>224    </svg>225    <div class="placeholder">Search for recipes</div>226  </div>227 228  <!-- Permission Modal -->229  <div class="modal">230    <svg class="bell" viewBox="0 0 24 24" fill="currentColor">231      <path d="M12 2a2 2 0 00-2 2v1.1A6.9 6.9 0 006 12v3l-1.5 1.8a1 1 0 00.8 1.6h13.4a1 1 0 00.8-1.6L18 15v-3a6.9 6.9 0 00-4-6.9V4a2 2 0 00-2-2zM9.5 20a2.5 2.5 0 005 0H9.5z"/>232    </svg>233    <h1 class="modal-title">Allow <span class="brand">Tasty</span> to send you notifications?</h1>234    <div class="modal-actions">235      <button class="btn">Allow</button>236      <button class="btn secondary">Don’t allow</button>237    </div>238  </div>239 240  <!-- Bottom Navigation -->241  <div class="bottom-bar">242    <div class="nav-item active">243      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#E54B73" stroke-width="2.2">244        <circle cx="11" cy="11" r="7"></circle>245        <path d="M20 20l-3.5-3.5" stroke="#E54B73"></path>246      </svg>247      <div class="nav-label">Discover</div>248    </div>249 250    <div class="nav-item">251      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#8D8F93" stroke-width="2">252        <rect x="5" y="9" width="14" height="9" rx="2"></rect>253        <path d="M8 9V7a4 4 0 018 0v2"></path>254        <path d="M9 7s.5-2 3-2 3 2 3 2" stroke-linecap="round" opacity="0.6"></path>255      </svg>256      <div class="nav-label">Community</div>257    </div>258 259    <div class="nav-item">260      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#8D8F93" stroke-width="2">261        <path d="M6 6h15l-2 10H7L6 6z"></path>262        <circle cx="9" cy="19" r="1.5" fill="#8D8F93" stroke="none"></circle>263        <circle cx="17" cy="19" r="1.5" fill="#8D8F93" stroke="none"></circle>264      </svg>265      <div class="nav-label">My Cart</div>266    </div>267 268    <div class="nav-item">269      <div class="avatar-dot"></div>270      <div class="nav-label">Profile</div>271    </div>272  </div>273 274  <!-- Home Indicator -->275  <div class="home-indicator"></div>276</div>277</body>278</html>