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 Editor Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #000;14    color: #fff;15  }16 17  /* Photo viewing area */18  .top-spacer {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 320px; /* black letterbox area */24    background: #000;25  }26  .photo-area {27    position: absolute;28    top: 320px;29    left: 0;30    width: 1080px;31    height: 920px;32    display: flex;33    align-items: center;34    justify-content: center;35  }36  .photo-placeholder {37    width: 100%;38    height: 100%;39    background: #E0E0E0;40    border: 1px solid #BDBDBD;41    color: #555;42    display: flex;43    align-items: center;44    justify-content: center;45    font-size: 36px;46    letter-spacing: 0.3px;47  }48 49  /* Bottom panel */50  .bottom-panel {51    position: absolute;52    left: 0;53    bottom: 0;54    width: 1080px;55    height: 760px;56    background: rgba(0,0,0,0.96);57    box-sizing: border-box;58    padding: 40px 48px 140px 48px;59  }60 61  .action-buttons {62    display: flex;63    justify-content: space-between;64    gap: 40px;65    margin-top: 10px;66    margin-bottom: 36px;67  }68  .pill-btn {69    flex: 1;70    height: 140px;71    border-radius: 28px;72    background: #1b1b1b;73    border: 1px solid #2a2a2a;74    color: #e9e9e9;75    display: flex;76    align-items: center;77    justify-content: center;78    gap: 22px;79    font-size: 46px;80    letter-spacing: 0.2px;81  }82  .pill-btn .icon {83    width: 54px;84    height: 54px;85    fill: none;86    stroke: #e9e9e9;87    stroke-width: 3.5;88  }89 90  /* Filters row */91  .filters {92    display: flex;93    gap: 28px;94    overflow: hidden;95    padding-left: 0;96    margin-top: 10px;97  }98  .filter-item {99    width: 168px;100    text-align: center;101  }102  .thumb {103    width: 168px;104    height: 168px;105    background: #E0E0E0;106    border: 1px solid #BDBDBD;107    border-radius: 16px;108    display: flex;109    align-items: center;110    justify-content: center;111    color: #666;112    font-size: 24px;113  }114  .thumb.selected {115    border: 3px solid #ffffff;116  }117  .filter-label {118    margin-top: 12px;119    font-size: 34px;120    color: #d7d7d7;121  }122 123  /* Bottom actions */124  .footer-actions {125    position: absolute;126    left: 48px;127    right: 48px;128    bottom: 84px;129    display: flex;130    align-items: center;131    justify-content: space-between;132  }133  .cancel {134    font-size: 40px;135    color: #d0d0d0;136  }137  .save-btn {138    padding: 22px 36px;139    border-radius: 36px;140    background: #222;141    color: #9e9e9e;142    font-size: 38px;143    border: 1px solid #2b2b2b;144  }145  .gesture-bar {146    position: absolute;147    bottom: 20px;148    left: 50%;149    transform: translateX(-50%);150    width: 380px;151    height: 10px;152    background: #fff;153    border-radius: 6px;154    opacity: 0.95;155  }156</style>157</head>158<body>159<div id="render-target">160  <div class="top-spacer"></div>161 162  <div class="photo-area">163    <div class="photo-placeholder">[IMG: Historic building with green domes and bridge]</div>164  </div>165 166  <div class="bottom-panel">167    <div class="action-buttons">168      <div class="pill-btn">169        <svg class="icon" viewBox="0 0 24 24">170          <path d="M12 2v4m0 0a6 6 0 1 1-6 6H3m6-6 2-2M21 12a9 9 0 0 0-9-9"/>171        </svg>172        <span>Rotate</span>173      </div>174      <div class="pill-btn">175        <svg class="icon" viewBox="0 0 24 24">176          <path d="M7 3h10a2 2 0 0 1 2 2v10M17 21H7a2 2 0 0 1-2-2V7M7 7h6m4 4H7"/>177        </svg>178        <span>Crop</span>179      </div>180    </div>181 182    <div class="filters">183      <div class="filter-item">184        <div class="thumb selected">[IMG: Filter]</div>185        <div class="filter-label">None</div>186      </div>187      <div class="filter-item">188        <div class="thumb">[IMG: Filter]</div>189        <div class="filter-label">Vivid</div>190      </div>191      <div class="filter-item">192        <div class="thumb">[IMG: Filter]</div>193        <div class="filter-label">Playa</div>194      </div>195      <div class="filter-item">196        <div class="thumb">[IMG: Filter]</div>197        <div class="filter-label">Honey</div>198      </div>199      <div class="filter-item">200        <div class="thumb">[IMG: Filter]</div>201        <div class="filter-label">Isla</div>202      </div>203      <div class="filter-item">204        <div class="thumb">[IMG: Filter]</div>205        <div class="filter-label">Desert</div>206      </div>207    </div>208 209    <div class="footer-actions">210      <div class="cancel">Cancel</div>211      <div class="save-btn">Save copy</div>212    </div>213  </div>214 215  <div class="gesture-bar"></div>216</div>217</body>218</html>