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>Photo Viewer Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #fff;17  }18 19  /* Top status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 90px;26    padding: 0 32px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #fff;31  }32  .status-left {33    display: flex;34    align-items: center;35    gap: 24px;36    font-size: 44px;37    line-height: 1;38  }39  .mini-icons {40    display: flex;41    align-items: center;42    gap: 22px;43    font-size: 38px;44  }45  .status-right {46    display: flex;47    align-items: center;48    gap: 26px;49  }50  .status-icon {51    width: 54px;52    height: 54px;53  }54 55  /* Header with back arrow */56  .header {57    position: absolute;58    top: 90px;59    left: 0;60    width: 100%;61    height: 150px;62    display: flex;63    align-items: center;64    padding-left: 28px;65  }66  .back-btn {67    width: 96px;68    height: 96px;69  }70 71  /* Photo area */72  .photo-area {73    position: absolute;74    top: 240px;75    left: 0;76    width: 100%;77    height: 1620px;78    display: flex;79    align-items: center;80    justify-content: center;81    padding: 0 24px;82  }83  .img-placeholder {84    width: 100%;85    height: 100%;86    background: #E0E0E0;87    border: 1px solid #BDBDBD;88    display: flex;89    align-items: center;90    justify-content: center;91    color: #757575;92    font-size: 44px;93    text-align: center;94  }95 96  /* Bottom actions */97  .actions {98    position: absolute;99    top: 1860px;100    left: 0;101    width: 100%;102    height: 240px;103    display: flex;104    align-items: center;105    justify-content: space-evenly;106  }107  .action-btn {108    width: 120px;109    height: 120px;110    border: 3px solid #fff;111    border-radius: 60px;112    display: flex;113    align-items: center;114    justify-content: center;115  }116  .action-icon {117    width: 64px;118    height: 64px;119  }120 121  /* Ad banner */122  .ad-banner {123    position: absolute;124    top: 2100px;125    left: 0;126    width: 100%;127    height: 300px;128    padding: 10px 20px;129  }130  .ad-placeholder {131    width: 100%;132    height: 100%;133    background: #E0E0E0;134    border: 1px solid #BDBDBD;135    display: flex;136    align-items: center;137    justify-content: center;138    color: #757575;139    font-size: 40px;140    text-align: center;141  }142</style>143</head>144<body>145<div id="render-target">146  <!-- Status Bar -->147  <div class="status-bar">148    <div class="status-left">149      <div class="time">1:48</div>150      <div class="mini-icons">151        <span style="font-weight:600;">℃</span>152        <!-- Gmail envelope -->153        <svg class="status-icon" viewBox="0 0 24 24">154          <path d="M3 5h18v14H3z" fill="none" stroke="#fff" stroke-width="1.8"/>155          <path d="M3 6l9 6 9-6" fill="none" stroke="#fff" stroke-width="1.8"/>156        </svg>157        <!-- YouTube play -->158        <svg class="status-icon" viewBox="0 0 24 24">159          <rect x="3" y="6" width="18" height="12" rx="2.5" ry="2.5" fill="none" stroke="#fff" stroke-width="1.8"/>160          <path d="M10 9l6 3-6 3V9z" fill="#fff"/>161        </svg>162        <!-- Gear (Unicode fallback) -->163        <span style="font-size:46px;">⚙</span>164        <span style="font-size:44px;">•</span>165      </div>166    </div>167    <div class="status-right">168      <!-- Do Not Disturb -->169      <svg class="status-icon" viewBox="0 0 24 24">170        <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="1.8"/>171        <path d="M7 12h10" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>172      </svg>173      <!-- Wi-Fi -->174      <svg class="status-icon" viewBox="0 0 24 24">175        <path d="M3 9c4.5-4 13.5-4 18 0" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>176        <path d="M6 12c3-2.7 9-2.7 12 0" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>177        <path d="M9 15c1.5-1.3 4.5-1.3 6 0" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>178        <circle cx="12" cy="18" r="1.6" fill="#fff"/>179      </svg>180      <!-- Battery -->181      <svg class="status-icon" viewBox="0 0 24 24">182        <rect x="4" y="7" width="16" height="10" rx="2" fill="none" stroke="#fff" stroke-width="1.8"/>183        <rect x="6" y="9" width="10" height="6" fill="#fff"/>184        <rect x="20.5" y="10" width="2" height="4" fill="#fff"/>185      </svg>186    </div>187  </div>188 189  <!-- Header with back arrow -->190  <div class="header">191    <svg class="back-btn" viewBox="0 0 24 24">192      <path d="M15 19l-7-7 7-7" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>193    </svg>194  </div>195 196  <!-- Main photo area -->197  <div class="photo-area">198    <div class="img-placeholder">[IMG: Office workspace photo on a white table]</div>199  </div>200 201  <!-- Bottom action icons -->202  <div class="actions">203    <!-- Like (Heart) -->204    <div class="action-btn">205      <svg class="action-icon" viewBox="0 0 24 24">206        <path d="M12 21s-6.5-4.3-8.2-7.3C2.4 10.7 4.2 8 7 8c1.6 0 3 .8 4 2 1-1.2 2.4-2 4-2 2.8 0 4.6 2.7 3.2 5.7C18.5 16.7 12 21 12 21z" fill="none" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"/>207      </svg>208    </div>209    <!-- Share -->210    <div class="action-btn">211      <svg class="action-icon" viewBox="0 0 24 24">212        <circle cx="6" cy="12" r="3" fill="none" stroke="#fff" stroke-width="1.8"/>213        <circle cx="18" cy="6" r="3" fill="none" stroke="#fff" stroke-width="1.8"/>214        <circle cx="18" cy="18" r="3" fill="none" stroke="#fff" stroke-width="1.8"/>215        <path d="M8.7 10.9l6.6-3.5M8.7 13.1l6.6 3.5" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>216      </svg>217    </div>218    <!-- Delete (Trash) -->219    <div class="action-btn">220      <svg class="action-icon" viewBox="0 0 24 24">221        <path d="M5 7h14" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>222        <path d="M9 7l1-2h4l1 2" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>223        <rect x="6" y="7" width="12" height="12" rx="2" fill="none" stroke="#fff" stroke-width="1.8"/>224        <path d="M10 11v6M14 11v6" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>225      </svg>226    </div>227    <!-- More (Ellipsis) -->228    <div class="action-btn">229      <svg class="action-icon" viewBox="0 0 24 24">230        <circle cx="6" cy="12" r="1.8" fill="#fff"/>231        <circle cx="12" cy="12" r="1.8" fill="#fff"/>232        <circle cx="18" cy="12" r="1.8" fill="#fff"/>233      </svg>234    </div>235  </div>236 237  <!-- Ad banner -->238  <div class="ad-banner">239    <div class="ad-placeholder">[IMG: NIVEA skincare promotional banner]</div>240  </div>241</div>242</body>243</html>