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>Google Photos - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; color: #ffffff;12  }13 14  /* Status bar */15  .status-bar {16    height: 110px; padding: 28px 32px 0 32px; box-sizing: border-box; color: #fff;17    display: flex; align-items: center; justify-content: space-between;18    font-weight: 500;19  }20  .status-left { display: flex; align-items: center; gap: 18px; }21  .time { font-size: 36px; }22  .notif-row { display: flex; align-items: center; gap: 16px; }23  .notif-dot { width: 20px; height: 20px; border-radius: 50%; background: #e0e0e0; opacity: 0.75; }24  .status-right { display: flex; align-items: center; gap: 22px; }25  .status-icon svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.5; }26 27  /* App header */28  .app-header {29    padding: 22px 32px 30px 32px; border-bottom: 1px solid rgba(255,255,255,0.06);30    display: flex; align-items: center; justify-content: center; position: relative;31  }32  .app-title { font-size: 54px; font-weight: 600; letter-spacing: 0.2px; }33  .subtitle { font-size: 28px; color: #b0b0b0; margin-top: 10px; text-align: center; }34  .profile {35    position: absolute; right: 32px; top: 18px; display: flex; align-items: center; justify-content: center;36    width: 80px; height: 80px; border-radius: 40px; background: #7e57c2; font-weight: 700; font-size: 36px;37  }38  .profile .badge {39    position: absolute; right: -4px; bottom: -4px; width: 34px; height: 34px; border-radius: 17px;40    background: #2f2f2f; border: 2px solid #1b1b1b; display: flex; align-items: center; justify-content: center;41  }42  .badge svg { width: 18px; height: 18px; stroke: #cfcfcf; stroke-width: 2; }43 44  /* Content */45  .content { padding: 24px 24px 260px 24px; }46  .date-row { position: relative; margin: 16px 0 18px; }47  .date-row .label { font-size: 42px; font-weight: 600; color: #eaeaea; }48  .date-row .check {49    position: absolute; right: 8px; top: 0; width: 48px; height: 48px; border-radius: 24px;50    border: 2px solid #616161; display: flex; align-items: center; justify-content: center;51  }52  .date-row .check svg { width: 28px; height: 28px; stroke: #9e9e9e; stroke-width: 3; }53 54  .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }55  .grid .img {56    background: #E0E0E0; border: 1px solid #BDBDBD; height: 220px; display: flex;57    align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center;58  }59  .span-2 { grid-column: span 2; height: 260px; }60  .spacer { height: 24px; }61 62  /* Update banner */63  .update-banner {64    position: absolute; left: 24px; right: 24px; bottom: 220px;65    background: #2b2b2b; color: #fff; border-radius: 18px;66    height: 120px; display: flex; align-items: center; justify-content: space-between;67    padding: 0 28px; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.08);68  }69  .update-banner .text { font-size: 34px; color: #eaeaea; }70  .update-banner .action {71    background: #3d6cf4; color: #fff; padding: 16px 26px; border-radius: 14px; font-size: 32px; font-weight: 600;72  }73 74  /* Bottom nav */75  .bottom-nav {76    position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: #1c1c1c;77    border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-around;78  }79  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #bdbdbd; }80  .nav-item svg { width: 48px; height: 48px; }81  .nav-item .label { font-size: 28px; }82  .active { color: #ffffff; }83  .active .icon-wrap {84    width: 94px; height: 94px; border-radius: 20px; background: #2a2a2a;85    display: flex; align-items: center; justify-content: center;86  }87  .badge-count {88    position: absolute; right: 36px; top: 18px; background: #ff5252; color: #fff;89    font-size: 24px; font-weight: 700; width: 36px; height: 36px; border-radius: 18px;90    display: flex; align-items: center; justify-content: center;91  }92 93  /* Home indicator */94  .home-indicator {95    position: absolute; left: 50%; transform: translateX(-50%);96    bottom: 190px; width: 240px; height: 16px; background: #e6e6e6; border-radius: 8px; opacity: 0.9;97  }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status Bar -->104  <div class="status-bar">105    <div class="status-left">106      <div class="time">2:51</div>107      <div class="notif-row">108        <div class="notif-dot"></div>109        <div class="notif-dot"></div>110        <div class="notif-dot"></div>111        <div class="notif-d