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>Mount rushmore Gallery</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: #212121;15    color: #EAEAEA;16    font-family: Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 110px;26    padding: 0 36px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #FFFFFF;32    font-size: 36px;33    letter-spacing: 0.5px;34  }35  .status-left { display: flex; align-items: center; gap: 18px; opacity: 0.9; }36  .status-right { display: flex; align-items: center; gap: 22px; opacity: 0.9; }37  .icon {38    width: 36px; height: 36px; fill: none; stroke: #FFFFFF; stroke-width: 2;39  }40 41  /* Top toolbar */42  .toolbar {43    position: absolute;44    top: 110px;45    left: 0;46    width: 1080px;47    height: 140px;48    background: #2A2A2A;49    display: flex;50    align-items: center;51    box-sizing: border-box;52    padding: 0 36px;53  }54  .toolbar .title {55    font-size: 44px;56    font-weight: 500;57    color: #EDEDED;58    margin-left: 18px;59  }60  .toolbar .spacer { flex: 1; }61  .toolbar .btn {62    width: 60px; height: 60px;63    display: flex; align-items: center; justify-content: center;64  }65  .btn svg { width: 40px; height: 40px; stroke: #FFFFFF; }66 67  /* Content */68  .content {69    position: absolute;70    top: 250px; /* below toolbar */71    left: 0;72    width: 100%;73    box-sizing: border-box;74    padding: 40px 40px 0 40px;75  }76 77  .grid {78    display: flex;79    gap: 40px;80  }81 82  .card {83    width: 480px;84  }85 86  .thumb {87    width: 100%;88    height: 300px;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    color: #757575;92    border-radius: 20px;93    display: flex;94    align-items: center;95    justify-content: center;96    font-size: 30px;97    position: relative;98    box-shadow: 0 2px 0 rgba(0,0,0,0.15);99  }100 101  /* Overlay avatar badge on second image */102  .badge {103    position: absolute;104    right: 16px;105    bottom: 16px;106    width: 64px;107    height: 64px;108    background: #FFFFFF;109    border-radius: 50%;110    display: flex; align-items: center; justify-content: center;111    box-shadow: 0 2px 6px rgba(0,0,0,0.4);112  }113  .badge svg { width: 40px; height: 40px; fill: none; stroke: #333; stroke-width: 2; }114 115  .meta {116    margin-top: 22px;117    display: flex;118    align-items: center;119    justify-content: space-between;120  }121  .meta-left { display: flex; align-items: center; gap: 18px; }122  .image-icon {123    width: 56px; height: 56px; border-radius: 8px;124    background: #E57373; /* pinkish tile */125    display: flex; align-items: center; justify-content: center;126  }127  .image-icon svg { width: 34px; height: 34px; stroke: #fff; fill: none; stroke-width: 2; }128  .label {129    font-size: 36px;130    color: #EDEDED;131    line-height: 1.15;132  }133  .more-btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }134  .more-btn svg { width: 12px; height: 40px; fill: #C9C9C9; }135 136  /* Bottom home indicator */137  .home-indicator {138    position: absolute;139    bottom: 36px;140    left: 50%;141    transform: translateX(-50%);142    width: 240px;143    height: 14px;144    background: #EAEAEA;145    border-radius: 8px;146    opacity: 0.9;147  }148</style>149</head>150<body>151<div id="render-target">152  <!-- Status bar -->153  <div class="status-bar">154    <div class="status-left">155      <div>10:05</div>156      <!-- Simple mail indicator -->157      <svg class="icon" viewBox="0 0 24 24">158        <path d="M3 5h18v14H3z"></path>159        <path d="M3 5l9 7 9-7"></path>160      </svg>161    </div>162    <div class="status-right">163      <!-- Wifi -->164      <svg class="icon" viewBox="0 0 24 24">165        <path d="M2 8c5-5 15-5 20 0"></path>166        <path d="M5 11c3-3 11-3 14 0"></path>167        <path d="M8 14c2-2 6-2 8 0"></path>168        <circle cx="12" cy="17" r="1.5" fill="#FFFFFF" stroke="none"></circle>169      </svg>170      <!-- Battery -->171      <svg class="icon" viewBox="0 0 24 24">172        <rect x="3" y="6" width="16" height="12" rx="2"></rect>173        <rect x="19" y="10" width="2" height="4" rx="1" fill="#FFFFFF" stroke="none"></rect>174      </svg>175    </div>176  </div>177 178  <!-- Toolbar -->179  <div class="toolbar">180    <div class="btn">181      <svg viewBox="0 0 24 24">182        <path d="M15 6L9 12l6 6" stroke-linecap="round" stroke-linejoin="round"></path>183      </svg>184    </div>185    <div class="title">Mount rushmore</div>186    <div class="spacer"></div>187    <div class="btn">188      <svg viewBox="0 0 24 24">189        <path d="M5 5l14 14M19 5L5 19" stroke-linecap="round"></path>190      </svg>191    </div>192  </div>193 194  <!-- Content grid -->195  <div class="content">196    <div class="grid">197      <!-- Card 1 -->198      <div class="card">199        <div class="thumb">[IMG: Mount Rushmore landscape]</div>200        <div class="meta">201          <div class="meta-left">202            <div class="image-icon">203              <svg viewBox="0 0 24 24">204                <rect x="3" y="5" width="18" height="14" rx="2"></rect>205                <path d="M6 15l4-4 4 4 4-3" stroke-linecap="round" stroke-linejoin="round"></path>206                <circle cx="9" cy="9" r="2"></circle>207              </svg>208            </div>209            <div class="label">Mount<br>rushmore</div>210          </div>211          <div class="more-btn">212            <svg viewBox="0 0 8 24">213              <circle cx="4" cy="4" r="2"></circle>214              <circle cx="4" cy="12" r="2"></circle>215              <circle cx="4" cy="20" r="2"></circle>216            </svg>217          </div>218        </div>219      </div>220 221      <!-- Card 2 -->222      <div class="card">223        <div class="thumb">224          [IMG: Mount Rushmore landscape]225          <div class="badge">226            <svg viewBox="0 0 24 24">227              <circle cx="12" cy="8" r="3"></circle>228              <path d="M5 20c0-4 14-4 14 0" stroke-linecap="round"></path>229            </svg>230          </div>231        </div>232        <div class="meta">233          <div class="meta-left">234            <div class="image-icon">235              <svg viewBox="0 0 24 24">236                <rect x="3" y="5" width="18" height="14" rx="2"></rect>237                <path d="M6 15l4-4 4 4 4-3" stroke-linecap="round" stroke-linejoin="round"></path>238                <circle cx="9" cy="9" r="2"></circle>239              </svg>240            </div>241            <div class="label">Photo</div>242          </div>243          <div class="more-btn">244            <svg viewBox="0 0 8 24">245              <circle cx="4" cy="4" r="2"></circle>246              <circle cx="4" cy="12" r="2"></circle>247              <circle cx="4" cy="20" r="2"></circle>248            </svg>249          </div>250        </div>251      </div>252    </div>253  </div>254 255  <!-- Home indicator -->256  <div class="home-indicator"></div>257</div>258</body>259</html>