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>Gallery - Select Items</title>7  <style>8    body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }9    #render-target {10      width: 1080px;11      height: 2400px;12      position: relative;13      overflow: hidden;14      background: #232629;15      color: #FFFFFF;16    }17 18    /* Status bar */19    .status-bar {20      position: absolute;21      top: 0;22      left: 0;23      width: 100%;24      height: 96px;25      background: #1c1e22;26      display: flex;27      align-items: center;28      padding: 0 32px;29      box-sizing: border-box;30      font-size: 34px;31      color: #e9eaec;32    }33    .status-right {34      margin-left: auto;35      display: flex;36      align-items: center;37      gap: 28px;38      color: #e9eaec;39      font-size: 30px;40    }41    .icon {42      width: 42px;43      height: 42px;44      display: inline-block;45    }46    .battery {47      display: inline-flex;48      align-items: center;49      gap: 12px;50      font-size: 30px;51    }52 53    /* App bar */54    .app-bar {55      position: absolute;56      top: 96px;57      left: 0;58      width: 100%;59      height: 140px;60      background: #202225;61      display: flex;62      align-items: center;63      padding: 0 28px;64      box-sizing: border-box;65      border-bottom: 1px solid rgba(255,255,255,0.06);66    }67    .close-btn {68      width: 80px;69      height: 80px;70      border-radius: 40px;71      display: flex;72      align-items: center;73      justify-content: center;74      margin-right: 18px;75    }76    .title {77      font-size: 48px;78      font-weight: 500;79      letter-spacing: 0.2px;80      color: #ffffff;81    }82    .kebab {83      margin-left: auto;84      width: 64px;85      height: 64px;86      display: flex;87      align-items: center;88      justify-content: center;89      opacity: 0.9;90    }91 92    /* Section header */93    .section {94      position: absolute;95      top: 270px;96      left: 32px;97      font-size: 40px;98      font-weight: 700;99      color: #ffffff;100    }101 102    /* Photo grid */103    .grid {104      position: absolute;105      top: 340px;106      left: 24px;107      right: 24px;108      display: grid;109      grid-template-columns: repeat(3, 1fr);110      gap: 18px;111    }112    .photo {113      position: relative;114      height: 290px;115      background: #E0E0E0;116      border: 1px solid #BDBDBD;117      display: flex;118      align-items: center;119      justify-content: center;120      color: #757575;121      font-size: 32px;122      text-align: center;123      border-radius: 8px;124      overflow: hidden;125    }126    .select-circle {127      position: absolute;128      top: 12px;129      left: 12px;130      width: 44px;131      height: 44px;132      border: 3px solid #ffffff;133      border-radius: 50%;134      background: transparent;135      box-shadow: 0 0 0 3px rgba(0,0,0,0.25) inset;136    }137 138    /* Overflow menu */139    .menu {140      position: absolute;141      top: 220px;142      right: 28px;143      width: 520px;144      background: #2e3034;145      border-radius: 20px;146      box-shadow: 0 18px 40px rgba(0,0,0,0.45);147      padding: 18px 0;148    }149    .menu-item {150      padding: 26px 36px;151      font-size: 40px;152      color: #ffffff;153    }154    .menu-item.disabled {155      color: #9da3ab;156    }157    .menu-item + .menu-item {158      border-top: 1px solid rgba(255,255,255,0.04);159    }160 161    /* Bottom navigation */162    .bottom-bar {163      position: absolute;164      left: 0;165      right: 0;166      bottom: 96px;167      height: 150px;168      background: #2a2b2f;169      border-top: 1px solid rgba(255,255,255,0.06);170      display: flex;171      align-items: center;172      justify-content: space-around;173    }174    .tab {175      width: 45%;176      display: flex;177      flex-direction: column;178      align-items: center;179      gap: 10px;180      color: #b9bec6;181      font-size: 34px;182    }183    .tab .icon {184      width: 54px;185      height: 54px;186      opacity: 0.9;187    }188    .tab.active {189      color: #8ab4f8;190    }191    .tab.active .icon svg {192      fill: #8ab4f8;193    }194    .tab .icon svg {195      fill: #b9bec6;196    }197 198    /* Gesture pill */199    .gesture {200      position: absolute;201      bottom: 26px;202      left: 50%;203      transform: translateX(-50%);204      width: 220px;205      height: 12px;206      background: #ffffff;207      opacity: 0.9;208      border-radius: 8px;209    }210  </style>211</head>212<body>213  <div id="render-target">214    <!-- Status bar -->215    <div class="status-bar">216      <div>10:33</div>217      <div class="status-right">218        <!-- simple mail icon -->219        <svg class="icon" viewBox="0 0 24 24">220          <path fill="#e9eaec" d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z"/>221        </svg>222        <!-- settings gear (simple) -->223        <svg class="icon" viewBox="0 0 24 24">224          <path fill="#e9eaec" d="M19.4 13a7.6 7.6 0 0 0 .1-2l2-1.6-2-3.5-2.4.7a7.5 7.5 0 0 0-1.7-1L13 2h-4l-.4 2.6a7.4 7.4 0 0 0-1.7 1l-2.5-.8-2 3.5 2 1.6a7.6 7.6 0 0 0 0 2l-2 1.6 2 3.5 2.5-.8c.5.4 1.1.7 1.7 1l.4 2.6h4l.4-2.6c.6-.3 1.2-.6 1.7-1l2.4.8 2-3.5-2-1.6zM11 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>225        </svg>226        <!-- cloud icon -->227        <svg class="icon" viewBox="0 0 24 24">228          <path fill="#e9eaec" d="M19 18H7a4 4 0 1 1 .6-7.9A5 5 0 0 1 18 8a4 4 0 0 1 1 7.8V16a2 2 0 0 1 0 2z"/>229        </svg>230        <!-- wifi -->231        <svg class="icon" viewBox="0 0 24 24">232          <path fill="#e9eaec" d="M12 20l3-3H9l3 3zm6.5-5.5a9 9 0 0 0-13 0l1.4 1.4a7 7 0 0 1 10.2 0l1.4-1.4zm3.5-3.6a13 13 0 0 0-23 0l1.5 1.5a11 11 0 0 1 20 0L22 10.9z"/>233        </svg>234        <div class="battery">235          <svg class="icon" viewBox="0 0 24 24">236            <p