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>Plants Album - Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #2b2b2b;20    color: #eaeaea;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 90px;30    padding: 0 32px;31    box-sizing: border-box;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: #ffffff;36    font-size: 32px;37    letter-spacing: 0.5px;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 22px;43    font-size: 28px;44  }45  .icon {46    display: inline-flex;47    width: 44px;48    height: 44px;49  }50 51  /* App bar */52  .app-bar {53    position: absolute;54    top: 90px;55    left: 0;56    right: 0;57    padding: 28px 28px 22px 28px;58    box-sizing: border-box;59    display: flex;60    align-items: center;61    gap: 18px;62  }63  .app-title-group {64    display: flex;65    flex-direction: column;66  }67  .title {68    font-size: 52px;69    font-weight: 600;70    color: #eaeaea;71    line-height: 1.2;72  }73  .subtitle {74    margin-top: 8px;75    font-size: 28px;76    color: #bdbdbd;77  }78  .app-actions {79    margin-left: auto;80    display: flex;81    align-items: center;82    gap: 10px;83  }84 85  /* Content */86  .content {87    position: absolute;88    top: 210px;89    left: 0;90    right: 0;91    padding: 20px 28px 120px 28px;92    box-sizing: border-box;93  }94  .section-title {95    font-size: 34px;96    font-weight: 700;97    color: #d5d5d5;98    margin: 22px 0 20px 12px;99  }100  .grid {101    display: flex;102    flex-wrap: wrap;103    gap: 24px;104    padding-left: 12px;105  }106  .thumb {107    width: 480px;108    height: 360px;109    background: #E0E0E0;110    border: 1px solid #BDBDBD;111    border-radius: 6px;112    color: #757575;113    display: flex;114    align-items: center;115    justify-content: center;116    font-size: 28px;117    text-align: center;118  }119 120  /* Bottom gesture bar area */121  .gesture-bar {122    position: absolute;123    left: 0;124    bottom: 0;125    width: 100%;126    height: 110px;127    background: #000000;128  }129  .gesture-pill {130    position: absolute;131    width: 220px;132    height: 12px;133    border-radius: 12px;134    background: #e6e6e6;135    left: 50%;136    transform: translateX(-50%);137    bottom: 38px;138    opacity: 0.9;139  }140</style>141</head>142<body>143<div id="render-target">144  <!-- Status Bar -->145  <div class="status-bar">146    <div class="status-left">6:16</div>147    <div class="status-right">148      <!-- Simple Wi-Fi icon -->149      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">150        <path d="M2 8c6-5 14-5 20 0"></path>151        <path d="M5 12c4-3 10-3 14 0"></path>152        <path d="M8 16c3-2 5-2 8 0"></path>153        <circle cx="12" cy="19" r="1.6" fill="#ffffff" stroke="none"></circle>154      </svg>155      <!-- Battery icon with percent text -->156      <svg class="icon" viewBox="0 0 28 18">157        <rect x="1" y="3" width="22" height="12" rx="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>158        <rect x="3" y="5" width="16" height="8" rx="1.5" fill="#ffffff"></rect>159        <rect x="24" y="7" width="3" height="6" rx="1" fill="#ffffff"></rect>160      </svg>161      <span>100%</span>162    </div>163  </div>164 165  <!-- App Bar -->166  <div class="app-bar">167    <!-- Back arrow -->168    <svg class="icon" viewBox="0 0 48 48" fill="none" stroke="#eaeaea" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">169      <path d="M28 10 L14 24 L28 38"></path>170    </svg>171 172    <div class="app-title-group">173      <div class="title">Plants</div>174      <div class="subtitle">2 items · 8.3 MB</div>175    </div>176 177    <div class="app-actions">178      <!-- More vertical -->179      <svg class="icon" viewBox="0 0 24 24" fill="#eaeaea">180        <circle cx="12" cy="5" r="2"></circle>181        <circle cx="12" cy="12" r="2"></circle>182        <circle cx="12" cy="19" r="2"></circle>183      </svg>184    </div>185  </div>186 187  <!-- Content -->188  <div class="content">189    <div class="section-title">September</div>190    <div class="grid">191      <div class="thumb">[IMG: Tall indoor plant by window]</div>192      <div class="thumb">[IMG: Planter with green plants]</div>193    </div>194  </div>195 196  <!-- Bottom gesture bar -->197  <div class="gesture-bar">198    <div class="gesture-pill"></div>199  </div>200</div>201</body>202</html>