GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Photo Editor UI 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: #000;13    color: #fff;14  }15 16  /* Top spacer to mimic large black area */17  .top-spacer {18    height: 250px;19    width: 100%;20    background: #000;21  }22 23  /* Photo area */24  .photo-area {25    width: 100%;26    height: 1500px;27    display: flex;28    align-items: center;29    justify-content: center;30  }31  .photo-placeholder {32    width: 1000px;33    height: 1200px;34    background: #E0E0E0;35    border: 1px solid #BDBDBD;36    color: #757575;37    display: flex;38    align-items: center;39    justify-content: center;40    text-align: center;41    font-weight: 600;42    border-radius: 6px;43    box-shadow: 0 40px 90px rgba(0,0,0,0.55);44  }45 46  /* Controls section */47  .controls {48    position: absolute;49    bottom: 0;50    width: 100%;51    height: 650px;52    padding: 40px 40px 30px 40px;53    box-sizing: border-box;54    background: #000;55  }56 57  .action-row {58    display: flex;59    gap: 40px;60    margin-bottom: 45px;61  }62  .pill-btn {63    flex: 1;64    background: #1e1e1e;65    border-radius: 28px;66    height: 120px;67    display: flex;68    align-items: center;69    padding: 0 36px;70    box-sizing: border-box;71    border: 1px solid #2a2a2a;72  }73  .pill-btn svg { width: 44px; height: 44px; margin-right: 22px; fill: #d9d9d9; }74  .pill-btn span { font-size: 42px; color: #fff; }75 76  /* Filter scroller */77  .filters {78    display: flex;79    gap: 28px;80    overflow-x: auto;81    padding-bottom: 10px;82  }83  .filters::-webkit-scrollbar { height: 0px; }84 85  .filter-item {86    width: 180px;87  }88  .thumb {89    width: 180px;90    height: 120px;91    background: #E0E0E0;92    border: 1px solid #BDBDBD;93    color: #757575;94    display: flex;95    align-items: center;96    justify-content: center;97    border-radius: 12px;98    font-size: 24px;99  }100  .filter-label {101    text-align: center;102    color: #cfcfcf;103    font-size: 36px;104    margin-top: 14px;105  }106  .filter-item.selected .thumb {107    outline: 4px solid #ffffff;108    box-shadow: 0 0 0 2px #6b6b6b inset;109  }110  .filter-item.selected .filter-label {111    color: #ffffff;112    font-weight: 700;113  }114 115  .bottom-actions {116    margin-top: 32px;117    display: flex;118    justify-content: space-between;119    align-items: center;120  }121  .cancel {122    font-size: 44px;123    color: #cfcfcf;124    padding-left: 8px;125  }126  .primary-btn {127    background: #eaeaea;128    color: #111;129    border-radius: 28px;130    padding: 28px 36px;131    font-size: 44px;132    font-weight: 700;133    border: 1px solid #cfcfcf;134  }135</style>136</head>137<body>138<div id="render-target">139  <div class="top-spacer"></div>140 141  <div class="photo-area">142    <div class="photo-placeholder">[IMG: Historic building with domes and a bridge in daylight]</div>143  </div>144 145  <div class="controls">146    <div class="action-row">147      <div class="pill-btn">148        <!-- Rotate icon -->149        <svg viewBox="0 0 24 24">150          <path d="M12 5v3l4-4-4-4v3c-4.97 0-9 4.03-9 9s4.03 9 9 9c3.7 0 6.9-2.16 8.33-5.26l-2.21-.97C17.12 18.52 14.76 20 12 20c-4.41 0-8-3.59-8-8s3.59-7 8-7z"/>151        </svg>152        <span>Rotate</span>153      </div>154      <div class="pill-btn">155        <!-- Crop icon -->156        <svg viewBox="0 0 24 24">157          <path d="M7 3v2H5v2H3v2h2v8a2 2 0 0 0 2 2h8v2h2v-2h2v-2h2v-2h-2V7a2 2 0 0 0-2-2H9V3H7zm2 6h8v8H9V9z"/>158        </svg>159        <span>Crop</span>160      </div>161    </div>162 163    <div class="filters">164      <div class="filter-item">165        <div class="thumb">[IMG: Filter preview]</div>166        <div class="filter-label">None</div>167      </div>168      <div class="filter-item selected">169        <div class="thumb">[IMG: Filter preview]</div>170        <div class="filter-label">Vivid</div>171      </div>172      <div class="filter-item">173        <div class="thumb">[IMG: Filter preview]</div>174        <div class="filter-label">Playa</div>175      </div>176      <div class="filter-item">177        <div class="thumb">[IMG: Filter preview]</div>178        <div class="filter-label">Honey</div>179      </div>180      <div class="filter-item">181        <div class="thumb">[IMG: Filter preview]</div>182        <div class="filter-label">Isla</div>183      </div>184      <div class="filter-item">185        <div class="thumb">[IMG: Filter preview]</div>186        <div class="filter-label">Desert</div>187      </div>188    </div>189 190    <div class="bottom-actions">191      <div class="cancel">Cancel</div>192      <div class="primary-btn">Save copy</div>193    </div>194  </div>195</div>196</body>197</html>