GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Photo Viewer UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #0b0b0b;19    color: #ffffff;20  }21 22  /* Top status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 100%;28    height: 96px;29    background: #0b0b0b;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 36px;34    box-sizing: border-box;35    font-size: 34px;36    letter-spacing: 0.5px;37    opacity: 0.95;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 26px;43    opacity: 0.85;44    font-size: 28px;45  }46  .status-icon {47    width: 28px;48    height: 28px;49    background: #8aa6ff;50    border-radius: 4px;51  }52 53  /* Action bar */54  .action-bar {55    position: absolute;56    top: 96px;57    left: 0;58    width: 100%;59    height: 104px;60    background: #0d0d0d;61    display: flex;62    align-items: center;63    justify-content: space-between;64    padding: 0 32px;65    box-sizing: border-box;66    border-bottom: 1px solid #1f1f1f;67  }68  .action-left, .action-right {69    display: flex;70    align-items: center;71    gap: 26px;72  }73  .icon-btn {74    width: 64px;75    height: 64px;76    display: inline-flex;77    align-items: center;78    justify-content: center;79    border-radius: 32px;80  }81 82  /* Main photo area */83  .content-area {84    position: absolute;85    top: 200px;86    left: 0;87    width: 100%;88    height: 1750px;89    display: flex;90    align-items: center;91    justify-content: center;92    background: #0b0b0b;93  }94  .photo-frame {95    width: 980px;96    height: 740px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    display: flex;100    align-items: flex-end;101    justify-content: center;102    color: #757575;103    font-size: 32px;104    text-align: center;105    box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset;106  }107  .photo-label {108    padding: 18px 24px;109    background: rgba(0,0,0,0.15);110    width: 100%;111    text-align: center;112    color: #5a5a5a;113    font-size: 30px;114  }115 116  /* Bottom toolbar */117  .bottom-bar {118    position: absolute;119    bottom: 0;120    left: 0;121    width: 100%;122    height: 220px;123    background: #0d0d0d;124    border-top: 1px solid #1f1f1f;125    display: flex;126  }127  .tool {128    flex: 1;129    display: flex;130    flex-direction: column;131    align-items: center;132    justify-content: center;133    gap: 18px;134    color: #d6d6d6;135  }136  .tool svg {137    width: 72px;138    height: 72px;139  }140  .tool-label {141    font-size: 30px;142    color: #eaeaea;143  }144</style>145</head>146<body>147<div id="render-target">148 149  <!-- Status bar -->150  <div class="status-bar">151    <div>12:20</div>152    <div class="status-right">153      <div class="status-icon" title="Signal"></div>154      <div class="status-icon" title="Wi‑Fi"></div>155      <div style="display:flex; align-items:center; gap:8px;">156        <div style="width:40px;height:24px;border:2px solid #8aa6ff;border-radius:4px;position:relative;">157          <div style="position:absolute;top:3px;left:3px;height:16px;width:28px;background:#8aa6ff;"></div>158        </div>159        <span style="font-size:28px;color:#8aa6ff;">100%</span>160      </div>161    </div>162  </div>163 164  <!-- Action bar -->165  <div class="action-bar">166    <div class="action-left">167      <div class="icon-btn" title="Back">168        <svg viewBox="0 0 24 24">169          <path d="M15 18L9 12l6-6" stroke="#ffffff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>170        </svg>171      </div>172    </div>173    <div class="action-right">174      <div class="icon-btn" title="Star">175        <svg viewBox="0 0 24 24">176          <path d="M12 3l2.7 5.5 6.1.6-4.6 4 1.4 6-5.6-3.3-5.6 3.3 1.4-6-4.6-4 6.1-.6L12 3z" fill="none" stroke="#ffffff" stroke-width="2"/>177        </svg>178      </div>179      <div class="icon-btn" title="More">180        <svg viewBox="0 0 24 24">181          <circle cx="12" cy="5" r="2.2" fill="#ffffff"></circle>182          <circle cx="12" cy="12" r="2.2" fill="#ffffff"></circle>183          <circle cx="12" cy="19" r="2.2" fill="#ffffff"></circle>184        </svg>185      </div>186    </div>187  </div>188 189  <!-- Main photo area -->190  <div class="content-area">191    <div class="photo-frame">192      <div class="photo-label">[IMG: Riverfront museum building with domes and bridge in daylight]</div>193    </div>194  </div>195 196  <!-- Bottom toolbar -->197  <div class="bottom-bar">198    <div class="tool">199      <svg viewBox="0 0 24 24">200        <path d="M4 12v7h16v-7" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>201        <path d="M12 5v9M8 8l4-4 4 4" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>202      </svg>203      <div class="tool-label">Share</div>204    </div>205    <div class="tool">206      <svg viewBox="0 0 24 24">207        <path d="M6 6l12 12M18 6L6 18" stroke="#ffffff" stroke-width="2" opacity="0.6"/>208        <path d="M12 2l1.4 3.2L17 6l-3.6 1.3L12 11l-1.4-3.7L7 6l3.6-1L12 2z" fill="#ffffff"/>209      </svg>210      <div class="tool-label">Auto</div>211    </div>212    <div class="tool">213      <svg viewBox="0 0 24 24">214        <path d="M4 20h16" stroke="#ffffff" stroke-width="2" fill="none"/>215        <path d="M6 14l8-8 4 4-8 8H6z" fill="none" stroke="#ffffff" stroke-width="2"/>216      </svg>217      <div class="tool-label">Edit</div>218    </div>219    <div class="tool">220      <svg viewBox="0 0 24 24">221        <path d="M3 6h18" stroke="#ffffff" stroke-width="2"/>222        <path d="M8 6l1-2h6l1 2" stroke="#ffffff" stroke-width="2" fill="none"/>223        <rect x="6" y="8" width="12" height="12" fill="none" stroke="#ffffff" stroke-width="2"/>224      </svg>225      <div class="tool-label">Trash</div>226    </div>227  </div>228 229</div>230</body>231</html>