GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Photo Viewer Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    border-radius: 0;15  }16 17  /* Top gradient overlay */18  .top-gradient {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 320px;24    background: linear-gradient(#2b2b2b, rgba(43,43,43,0));25    pointer-events: none;26  }27 28  /* Status bar row */29  .status-row {30    position: absolute;31    top: 16px;32    left: 24px;33    right: 24px;34    display: flex;35    justify-content: space-between;36    align-items: center;37    color: rgba(255,255,255,0.95);38    font-size: 30px;39    letter-spacing: 0.5px;40  }41  .status-icons {42    display: flex;43    align-items: center;44    gap: 26px;45  }46  .status-icons svg { width: 36px; height: 36px; }47 48  /* Header row with back + title + actions */49  .header-row {50    position: absolute;51    top: 92px;52    left: 24px;53    right: 24px;54    display: flex;55    align-items: center;56    justify-content: space-between;57    color: rgba(255,255,255,0.92);58  }59  .header-left {60    display: flex;61    align-items: center;62    gap: 18px;63  }64  .header-title {65    font-size: 48px;66    font-weight: 500;67    white-space: nowrap;68    overflow: hidden;69    text-overflow: ellipsis;70    max-width: 720px;71    opacity: 0.95;72  }73  .header-actions {74    display: flex;75    align-items: center;76    gap: 36px;77  }78  .header-actions svg,79  .header-left svg { width: 48px; height: 48px; }80 81  /* Main image area */82  .content-area {83    position: absolute;84    top: 480px;85    left: 50%;86    transform: translateX(-50%);87    width: 980px;88    height: 720px;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    display: flex;92    justify-content: center;93    align-items: center;94    color: #757575;95    font-size: 32px;96    text-align: center;97  }98 99  /* Bottom gradient bar */100  .bottom-gradient {101    position: absolute;102    bottom: 0;103    left: 0;104    width: 1080px;105    height: 320px;106    background: linear-gradient(rgba(43,43,43,0), #2b2b2b);107  }108 109  .bottom-actions {110    position: absolute;111    bottom: 140px;112    left: 0;113    width: 100%;114    display: flex;115    justify-content: space-around;116    padding: 0 80px;117    align-items: center;118    color: #ffffff;119  }120  .bottom-actions .action {121    display: flex;122    flex-direction: column;123    align-items: center;124    gap: 16px;125  }126  .bottom-actions svg { width: 56px; height: 56px; }127 128  /* Gesture pill */129  .gesture-pill {130    position: absolute;131    bottom: 48px;132    left: 50%;133    transform: translateX(-50%);134    width: 300px;135    height: 12px;136    background: #ffffff;137    opacity: 0.9;138    border-radius: 8px;139  }140</style>141</head>142<body>143<div id="render-target">144 145  <!-- Top overlay with status and header -->146  <div class="top-gradient"></div>147 148  <div class="status-row">149    <div>7:13</div>150    <div class="status-icons">151      <!-- Simple status icons -->152      <!-- Notifications bell -->153      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">154        <path d="M12 3c-3 0-5 2-5 5v4l-2 3h16l-2-3V8c0-3-2-5-5-5"/>155        <path d="M9 18c0 1.7 1.3 3 3 3s3-1.3 3-3"/>156      </svg>157      <!-- Shield icon -->158      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">159        <path d="M12 3l8 3v6c0 5-4.5 8-8 9-3.5-1-8-4-8-9V6l8-3z"/>160      </svg>161      <!-- Car/auto icon -->162      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">163        <path d="M3 14l2-5h14l2 5"/>164        <circle cx="7" cy="17" r="2" />165        <circle cx="17" cy="17" r="2" />166      </svg>167      <!-- Sync icon -->168      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">169        <path d="M4 8a8 8 0 0 1 13-3"/>170        <path d="M20 16a8 8 0 0 1-13 3"/>171        <path d="M17 5v5h5"/>172        <path d="M7 19v-5H2"/>173      </svg>174      <!-- Search icon -->175      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">176        <circle cx="10" cy="10" r="6"/>177        <path d="M21 21l-5-5"/>178      </svg>179      <!-- Dot -->180      <div style="font-size: 36px; line-height: 36px;">•</div>181      <!-- WiFi -->182      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">183        <path d="M2 8a16 16 0 0 1 20 0"/>184        <path d="M5 12a11 11 0 0 1 14 0"/>185        <path d="M8 16a6 6 0 0 1 8 0"/>186        <circle cx="12" cy="19" r="1.5" fill="white"/>187      </svg>188      <!-- Battery -->189      <svg viewBox="0 0 28 24" fill="none" stroke="white" stroke-width="2">190        <rect x="2" y="6" width="20" height="12" rx="2" />191        <rect x="23" y="10" width="3" height="4" rx="1" />192        <rect x="5" y="8" width="14" height="8" fill="white" stroke="none"/>193      </svg>194    </div>195  </div>196 197  <div class="header-row">198    <div class="header-left">199      <!-- Back arrow -->200      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">201        <path d="M15 18l-6-6 6-6"/>202      </svg>203      <div class="header-title">PXL_20230922_13...</div>204    </div>205    <div class="header-actions">206      <!-- Rotate -->207      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">208        <path d="M16 3v5h5"/>209        <path d="M20 12a8 8 0 1 1-8-8"/>210      </svg>211      <!-- Info -->212      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">213        <circle cx="12" cy="12" r="9"/>214        <path d="M12 10v6"/>215        <circle cx="12" cy="7" r="1.5" fill="white"/>216      </svg>217      <!-- More vertical -->218      <svg viewBox="0 0 24 24" fill="white">219        <circle cx="12" cy="5" r="2"/>220        <circle cx="12" cy="12" r="2"/>221        <circle cx="12" cy="19" r="2"/>222      </svg>223    </div>224  </div>225 226  <!-- Main image placeholder -->227  <div class="content-area">[IMG: Beach photo – palm trees, sea and blue sky]</div>228 229  <!-- Bottom gradient and actions -->230  <div class="bottom-gradient"></div>231 232  <div class="bottom-actions">233    <div class="action">234      <!-- Heart outline -->235      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">236        <path d="M12 21s-7-4.35-9-8.5C1.5 9 3.5 6.5 6.5 6.5c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3 3 0 5 2.5 3 6-2 4.15-9 8.5-9 8.5z"/>237      </svg>238    </div>239    <div class="action">240      <!-- Pencil -->241      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">242        <path d="M3 17l2 4 4-2 10-10-4-4L5 15z"/>243        <path d="M14 4l4 4"/>244      </svg>245    </div>246    <div class="action">247      <!-- Share -->248      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">249        <circle cx="18" cy="5" r="3"/>250        <circle cx="6" cy="12" r="3"/>251        <circle cx="18" cy="19" r="3"/>252        <path d="M8.5 11l7-4"/>253        <path d="M8.5 13l7 4"/>254      </svg>255    </div>256    <div class="action">257      <!-- Trash -->258      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">259        <path d="M3 6h18"/>260        <path d="M8 6l1-2h6l1 2"/>261        <rect x="6" y="7" width="12" height="13" rx="2"/>262        <path d="M10 11v6M14 11v6"/>263      </svg>264    </div>265  </div>266 267  <div class="gesture-pill"></div>268 269</div>270</body>271</html>