GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Photo Viewer Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0B0B0B;13    color: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 100%;22    height: 120px;23    padding: 0 36px;24    display: flex;25    justify-content: space-between;26    align-items: center;27    font-size: 42px;28    color: #fff;29    opacity: 0.95;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 26px;35    font-size: 34px;36    color: #fff;37  }38  /* Simple icons inside status bar */39  .icon {40    display: inline-flex;41    align-items: center;42    justify-content: center;43  }44 45  /* App controls (back, star, menu) */46  .app-controls {47    position: absolute;48    top: 140px;49    left: 0;50    width: 100%;51    height: 100px;52    padding: 0 28px;53    display: flex;54    justify-content: space-between;55    align-items: center;56  }57  .control-left, .control-right {58    display: flex;59    align-items: center;60    gap: 28px;61  }62 63  /* Photo area with large black letterboxing */64  .photo-wrapper {65    position: absolute;66    top: 360px;67    left: 0;68    width: 100%;69    height: 1520px;70    display: flex;71    justify-content: center;72    align-items: center;73  }74  .photo {75    width: 980px;76    height: 720px;77    background: #E0E0E0;78    border: 1px solid #BDBDBD;79    color: #757575;80    display: flex;81    align-items: center;82    justify-content: center;83    font-size: 34px;84    text-align: center;85    border-radius: 6px;86    box-shadow: 0 0 0 2px rgba(255,255,255,0.05) inset;87  }88 89  /* Bottom actions */90  .bottom-actions {91    position: absolute;92    bottom: 180px;93    left: 0;94    width: 100%;95    height: 170px;96    display: flex;97    justify-content: space-around;98    align-items: center;99    color: #FFFFFF;100  }101  .action {102    display: flex;103    flex-direction: column;104    align-items: center;105    gap: 18px;106    font-size: 32px;107  }108  .action svg { width: 64px; height: 64px; }109 110  /* Android navigation handle */111  .nav-handle {112    position: absolute;113    bottom: 62px;114    left: 50%;115    transform: translateX(-50%);116    width: 200px;117    height: 10px;118    background: #FFFFFF;119    opacity: 0.7;120    border-radius: 30px;121  }122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Status bar -->128  <div class="status-bar">129    <div class="status-left">12:22</div>130    <div class="status-right">131      <!-- Wi-Fi -->132      <span class="icon">133        <svg width="54" height="54" viewBox="0 0 24 24">134          <path d="M2 8c4-3 16-3 20 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.7"/>135          <path d="M5 12c3-2 11-2 14 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.8"/>136          <path d="M8 16c2-1 6-1 8 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.9"/>137          <circle cx="12" cy="19" r="1.6" fill="#fff"/>138        </svg>139      </span>140      <!-- Signal -->141      <span class="icon">142        <svg width="54" height="54" viewBox="0 0 24 24">143          <rect x="3" y="13" width="3" height="8" fill="#fff" opacity="0.7"/>144          <rect x="8" y="11" width="3" height="10" fill="#fff" opacity="0.8"/>145          <rect x="13" y="9" width="3" height="12" fill="#fff" opacity="0.9"/>146          <rect x="18" y="7" width="3" height="14" fill="#fff"/>147        </svg>148      </span>149      <!-- Battery + percentage -->150      <span class="icon">151        <svg width="60" height="60" viewBox="0 0 24 24">152          <rect x="3" y="6" width="16" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>153          <rect x="20" y="10" width="2" height="4" rx="1" fill="#fff"/>154          <rect x="5" y="8" width="12" height="8" fill="#fff"/>155        </svg>156      </span>157      <span>100%</span>158    </div>159  </div>160 161  <!-- App controls -->162  <div class="app-controls">163    <div class="control-left">164      <!-- Back arrow -->165      <svg width="70" height="70" viewBox="0 0 24 24">166        <path d="M14 6 L8 12 L14 18" stroke="#fff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>167      </svg>168    </div>169    <div class="control-right">170      <!-- Star (favorite) -->171      <svg width="70" height="70" viewBox="0 0 24 24">172        <path d="M12 2 L14.9 8.5 L22 9.3 L16.5 13.8 L18.3 21 L12 17.2 L5.7 21 L7.5 13.8 L2 9.3 L9.1 8.5 Z" fill="#fff"/>173      </svg>174      <!-- Kebab menu -->175      <svg width="70" height="70" viewBox="0 0 24 24">176        <circle cx="12" cy="5" r="2.2" fill="#fff"/>177        <circle cx="12" cy="12" r="2.2" fill="#fff"/>178        <circle cx="12" cy="19" r="2.2" fill="#fff"/>179      </svg>180    </div>181  </div>182 183  <!-- Main photo area -->184  <div class="photo-wrapper">185    <div class="photo">[IMG: Historic building by river – landscape photo]</div>186  </div>187 188  <!-- Bottom actions -->189  <div class="bottom-actions">190    <div class="action">191      <svg viewBox="0 0 24 24">192        <circle cx="6" cy="12" r="2.2" fill="#fff"/>193        <circle cx="12" cy="6" r="2.2" fill="#fff"/>194        <circle cx="18" cy="16" r="2.2" fill="#fff"/>195        <path d="M7.8 10.6 L10.6 7.8 M13.2 7.8 L16.4 14.2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>196      </svg>197      <div>Share</div>198    </div>199    <div class="action">200      <svg viewBox="0 0 24 24">201        <path d="M12 3 L13 7 L17 8 L13 9 L12 13 L11 9 L7 8 L11 7 Z" fill="#fff"/>202        <rect x="5" y="15" width="12" height="2" transform="rotate(-35 11 16)" fill="#fff" opacity="0.9"/>203      </svg>204      <div>Auto</div>205    </div>206    <div class="action">207      <svg viewBox="0 0 24 24">208        <path d="M3 21 L9 15 L13 19 L7 23 Z" fill="#fff" opacity="0.2"/>209        <path d="M4 20 L14 10 L18 14 L8 24 Z" stroke="#fff" stroke-width="2" fill="none"/>210        <rect x="17" y="7" width="2.5" height="5" transform="rotate(45 18 9.5)" fill="#fff"/>211      </svg>212      <div>Edit</div>213    </div>214    <div class="action">215      <svg viewBox="0 0 24 24">216        <path d="M5 7 H19" stroke="#fff" stroke-width="2" stroke-linecap="round"/>217        <rect x="6" y="7" width="12" height="12" rx="2" stroke="#fff" stroke-width="2" fill="none"/>218        <rect x="9" y="11" width="2" height="6" fill="#fff"/>219        <rect x="13" y="11" width="2" height="6" fill="#fff"/>220        <rect x="9" y="4" width="6" height="2.5" rx="1" fill="#fff"/>221      </svg>222      <div>Trash</div>223    </div>224  </div>225 226  <!-- Navigation handle -->227  <div class="nav-handle"></div>228 229</div>230</body>231</html>