GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8"/>5<meta name="viewport" content="width=1080, initial-scale=1.0"/>6<title>Google Photos UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121720;15    color: #EDEFF2;16    font-family: Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 24px;23    left: 32px;24    right: 32px;25    height: 64px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #EDEFF2;30    font-size: 36px;31    opacity: 0.95;32  }33  .status-left {34    display: flex;35    align-items: center;36    gap: 16px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 26px;42  }43  .icon {44    display: inline-block;45    vertical-align: middle;46  }47  .icon svg { fill: none; stroke: #EDEFF2; stroke-width: 3; }48 49  /* Header */50  .app-header {51    position: absolute;52    top: 140px;53    left: 0;54    right: 0;55    text-align: center;56  }57  .app-title {58    font-size: 56px;59    font-weight: 600;60    letter-spacing: 0.3px;61  }62  .app-subtitle {63    margin-top: 14px;64    color: #B6BDC9;65    font-size: 32px;66  }67  .profile-floating {68    position: absolute;69    right: 56px;70    top: 210px;71    width: 110px;72    height: 110px;73    background: #F27C1C;74    border-radius: 55px;75    display: flex;76    align-items: center;77    justify-content: center;78    font-weight: 700;79    font-size: 48px;80    color: #1C2028;81    box-shadow: 0 4px 10px rgba(0,0,0,0.35);82  }83  .profile-floating .mute {84    position: absolute;85    right: -6px;86    bottom: -6px;87    width: 42px;88    height: 42px;89    background: #2A2F39;90    border-radius: 21px;91    display: flex;92    align-items: center;93    justify-content: center;94  }95  .profile-floating .mute svg { stroke: #B6BDC9; stroke-width: 2.5; }96 97  /* Content area */98  .content {99    position: absolute;100    top: 380px;101    left: 0;102    right: 0;103    padding: 0 32px 220px 32px;104  }105  .section {106    margin-bottom: 48px;107  }108  .section-title {109    font-size: 44px;110    font-weight: 600;111    color: #EDEFF2;112    display: flex;113    align-items: center;114    justify-content: space-between;115    padding-right: 16px;116  }117  .month-title {118    font-size: 60px;119    font-weight: 700;120    margin: 60px 0 14px 0;121  }122  .subheading {123    font-size: 34px;124    color: #C2C8D4;125    display: flex;126    align-items: center;127    justify-content: space-between;128  }129  .check {130    width: 42px; height: 42px; border-radius: 21px; border: 2px solid #98A2B3;131    display: inline-flex; align-items: center; justify-content: center;132  }133  .check svg { stroke: #98A2B3; stroke-width: 3; }134 135  /* Thumbnails grid */136  .thumb-grid {137    margin-top: 18px;138    display: grid;139    grid-template-columns: repeat(3, 1fr);140    gap: 22px;141  }142  .thumb-grid.four { grid-template-columns: repeat(4, 1fr); }143  .thumb {144    position: relative;145    height: 290px;146    background: #E0E0E0;147    border: 1px solid #BDBDBD;148    border-radius: 14px;149    display: flex;150    align-items: center;151    justify-content: center;152    color: #757575;153    font-size: 28px;154    overflow: hidden;155  }156  .video-tag {157    position: absolute;158    top: 14px;159    right: 14px;160    background: rgba(0,0,0,0.55);161    color: #FFFFFF;162    padding: 8px 14px;163    border-radius: 18px;164    font-size: 26px;165    display: flex; align-items: center; gap: 10px;166  }167  .video-tag svg { fill: #FFFFFF; }168 169  /* Bottom nav */170  .bottom-nav {171    position: absolute;172    bottom: 0;173    left: 0; right: 0;174    height: 190px;175    background: #1A1F29;176    border-top: 1px solid #2B313C;177    display: flex;178    align-items: center;179    justify-content: space-around;180    padding-bottom: 14px;181  }182  .nav-item {183    width: 220px;184    text-align: center;185    color: #AAB1BE;186    font-size: 28px;187  }188  .nav-item .icon svg { stroke: #AAB1BE; }189  .nav-item.active {190    color: #FFFFFF;191    font-weight: 600;192  }193  .nav-item.active .icon-wrap {194    margin: 0 auto 10px;195    width: 120px;196    height: 64px;197    background: #2A2F39;198    border-radius: 32px;199    display: flex;200    align-items: center;201    justify-content: center;202  }203  .nav-item .icon-wrap {204    margin: 0 auto 10px;205    width: 120px;206    height: 64px;207    display: flex;208    align-items: center;209    justify-content: center;210  }211  .home-indicator {212    position: absolute;213    bottom: 198px;214    left: 50%;215    transform: translateX(-50%);216    width: 360px;217    height: 12px;218    background: #EDEFF2;219    border-radius: 6px;220    opacity: 0.8;221  }222</style>223</head>224<body>225<div id="render-target">226 227  <!-- Status bar -->228  <div class="status-bar">229    <div class="status-left">230      <div>8:08</div>231      <div class="icon" style="width:38px; height:38px;">232        <svg viewBox="0 0 24 24">233          <path d="M5 15a7 7 0 0 1 14 0" />234          <circle cx="7" cy="15" r="3" />235        </svg>236      </div>237    </div>238    <div class="status-right">239      <div class="icon" style="width:40px; height:40px;">240        <svg viewBox="0 0 24 24">241          <path d="M2 12c3-4 6-6 10-6s7 2 10 6" />242          <path d="M6 12c2-2 4-3 6-3s4 1 6 3" />243          <circle cx="12" cy="16" r="1.5" fill="#EDEFF2"></circle>244        </svg>245      </div>246      <div class="icon" style="width:40px; height:40px;">247        <svg viewBox="0 0 24 24">248          <rect x="2" y="7" width="18" height="10" rx="2"></rect>249          <rect x="20" y="10" width="2.5" height="4" rx="1" fill="#EDEFF2"></rect>250        </svg>251      </div>252    </div>253  </div>254 255  <!-- Header -->256  <div class="app-header">257    <div class="app-title">Google Photos</div>258    <div class="app-subtitle">Backup is off</div>259    <div class="profile-floating">260      C261      <div class="mute">262        <svg viewBox="0 0 24 24" width="26" height="26">263          <path d="M3 12c3-4 8-4 11 0M5 5l14 14" />264        </svg>265      </div>266    </div>267  </div>268 269  <!-- Content -->270  <div class="content">271    <!-- Today -->272    <div class="section">273      <div class="section-title">274        <span>Today</span>275        <span class="check">276          <svg viewBox="0 0 24 24" width="26" height="26">277            <path d="M5 12l4 4 10-10"></path>278          </svg>279        </span>280      </div>281      <div class="thumb-grid">282        <div class="thumb">[IMG: Earbuds Close-up]</div>283        <div class="thumb">[IMG: Laptop Keyboard]</div>284        <div class="thumb">[IMG: Potted Plant]</div>285      </div>286    </div>287 288    <!-- July -->289    <div class="section">290      <div class="month-title">July</div>291      <div class="subheading">292        <span>Wed, Jul 19</span>293        <span class="check">294          <svg viewBox="0 0 24 24" width="26" height="26">295            <path d="M5 12l4 4 10-10"></path>296          </svg>297        </span>298      </div>299      <div class="thumb-grid four">300        <div class="thumb">[IMG: Phone Back - Lights]</div>301        <div class="thumb">[IMG: Phone Back - Lines]</div>302        <div class="thumb">[IMG: Phone Back - Angle]</div>303        <div class="thumb">304          [IMG: Phone Back - Video]305          <div class="video-tag">306            <span>0:07</span>307            <svg viewBox="0 0 24 24" width="24" height="24">308              <polygon points="8,6 18,12 8,18"></polygon>309            </svg>310          </div>311        </div>312      </div>313    </div>314 315    <!-- Another day -->316    <div class="section">317      <div class="subheading">318        <span>Mon, Jul 10</span>319        <span class="check">320          <svg viewBox="0 0 24 24" width="26" height="26">321            <path d="M5 12l4 4 10-10"></path>322          </svg>323        </span>324      </div>325      <div class="thumb-grid">326        <div class="thumb">327          [IMG: Video Clip - Surface]328          <div class="video-tag">329            <span>0:23</span>330            <svg viewBox="0 0 24 24" width="24" height="24">331              <polygon points="8,6 18,12 8,18"></polygon>332            </svg>333          </div>334        </div>335        <div class="thumb" style="opacity:0;"></div>336        <div class="thumb" style="opacity:0;"></div>337      </div>338    </div>339  </div>340 341  <!-- Home indicator -->342  <div class="home-indicator"></div>343 344  <!-- Bottom navigation -->345  <div class="bottom-nav">346    <div class="nav-item active">347      <div class="icon-wrap">348        <div class="icon" style="width:44px; height:44px;">349          <svg viewBox="0 0 24 24">350            <rect x="3" y="5" width="18" height="14" rx="3"></rect>351            <circle cx="9" cy="12" r="3"></circle>352            <path d="M16 9l3 3-3 3"></path>353          </svg>354        </div>355      </div>356      <div>Photos</div>357    </div>358    <div class="nav-item">359      <div class="icon-wrap">360        <div class="icon" style="width:44px; height:44px;">361          <svg viewBox="0 0 24 24">362            <circle cx="11" cy="11" r="6"></circle>363            <path d="M20 20l-4-4"></path>364          </svg>365        </div>366      </div>367      <div>Search</div>368    </div>369    <div class="nav-item">370      <div class="icon-wrap">371        <div class="icon" style="width:44px; height:44px;">372          <svg viewBox="0 0 24 24">373            <circle cx="8" cy="9" r="3"></circle>374            <circle cx="16" cy="9" r="3"></circle>375            <path d="M3 20c2-4 7-4 10 0M11 20c2-4 7-4 10 0"></path>376          </svg>377        </div>378      </div>379      <div>Sharing</div>380    </div>381    <div class="nav-item">382      <div class="icon-wrap">383        <div class="icon" style="width:44px; height:44px;">384          <svg viewBox="0 0 24 24">385            <rect x="4" y="12" width="3" height="7"></rect>386            <rect x="10.5" y="8" width="3" height="11"></rect>387            <rect x="17" y="5" width="3" height="14"></rect>388          </svg>389        </div>390      </div>391      <div>Library</div>392    </div>393  </div>394 395</div>396</body>397</html>