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 Editor UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #000000;19    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;20    color: #FFFFFF;21  }22 23  /* Top nav */24  .top-bar {25    position: absolute;26    top: 0;27    left: 0;28    right: 0;29    height: 140px;30    display: flex;31    align-items: center;32    padding: 0 32px;33  }34  .back-btn {35    width: 72px;36    height: 72px;37    display: flex;38    align-items: center;39    justify-content: center;40    cursor: default;41  }42  .counter-pill {43    position: absolute;44    top: 158px;45    left: 50%;46    transform: translateX(-50%);47    background: rgba(255,255,255,0.12);48    color: #FFFFFF;49    padding: 10px 22px;50    border-radius: 18px;51    font-size: 30px;52    letter-spacing: 0.4px;53  }54 55  /* Image area */56  .image-stage {57    position: absolute;58    left: 50%;59    transform: translateX(-50%);60    top: 470px;61    width: 940px;62    height: 1320px;63    background: #E0E0E0;64    border: 1px solid #BDBDBD;65    display: flex;66    align-items: center;67    justify-content: center;68    color: #757575;69    text-align: center;70    font-size: 30px;71    line-height: 1.4;72  }73 74  /* Bottom controls */75  .bottom-panel {76    position: absolute;77    left: 0;78    right: 0;79    bottom: 140px;80    height: 220px;81    padding: 0 32px;82    display: flex;83    align-items: center;84    gap: 24px;85  }86  .actions {87    display: grid;88    grid-auto-flow: column;89    grid-auto-columns: 1fr;90    align-items: center;91    width: calc(100% - 340px);92    height: 100%;93  }94  .action {95    display: flex;96    flex-direction: column;97    align-items: center;98    gap: 18px;99    color: #E0E0E0;100  }101  .action svg {102    width: 72px;103    height: 72px;104    fill: none;105    stroke: #FFFFFF;106    stroke-width: 4;107    stroke-linecap: round;108    stroke-linejoin: round;109  }110  .action span {111    font-size: 30px;112    color: #E0E0E0;113  }114  .done-btn {115    margin-left: auto;116    background: #1E88E5;117    color: #FFFFFF;118    height: 120px;119    width: 280px;120    border-radius: 32px;121    display: flex;122    align-items: center;123    justify-content: center;124    gap: 18px;125    font-size: 38px;126    font-weight: 600;127  }128  .done-btn svg {129    width: 40px;130    height: 40px;131    fill: #FFFFFF;132    stroke: none;133  }134 135  /* Red indicator near "More" */136  .indicator {137    position: absolute;138    top: 8px;139    right: 170px;140    width: 18px;141    height: 18px;142    background: #E53935;143    border-radius: 50%;144  }145 146  /* Gesture bar */147  .gesture {148    position: absolute;149    bottom: 48px;150    left: 50%;151    transform: translateX(-50%);152    width: 360px;153    height: 12px;154    background: rgba(255,255,255,0.75);155    border-radius: 8px;156  }157</style>158</head>159<body>160<div id="render-target">161 162  <!-- Top Navigation -->163  <div class="top-bar">164    <div class="back-btn" aria-label="Back">165      <svg viewBox="0 0 24 24">166        <path d="M15 4 L7 12 L15 20" stroke="#FFFFFF" stroke-width="3.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>167      </svg>168    </div>169  </div>170  <div class="counter-pill">1/1</div>171 172  <!-- Main Image Placeholder -->173  <div class="image-stage">[IMG: Office desk with laptop, cables, and workspace]</div>174 175  <!-- Bottom Controls -->176  <div class="bottom-panel">177    <div class="actions">178      <!-- Add -->179      <div class="action">180        <svg viewBox="0 0 24 24" aria-hidden="true">181          <rect x="3.5" y="6" width="17" height="12" rx="2"></rect>182          <path d="M12 9.5v5M9.5 12h5"></path>183          <path d="M8 6l1.5-2h5L16 6"></path>184        </svg>185        <span>Add</span>186      </div>187      <!-- Filters -->188      <div class="action">189        <svg viewBox="0 0 24 24" aria-hidden="true">190          <path d="M4 7h10"></path>191          <circle cx="16" cy="7" r="2" fill="#FFFFFF" stroke="none"></circle>192          <path d="M4 12h8"></path>193          <circle cx="10" cy="12" r="2" fill="#FFFFFF" stroke="none"></circle>194          <path d="M4 17h13"></path>195          <circle cx="8" cy="17" r="2" fill="#FFFFFF" stroke="none"></circle>196        </svg>197        <span>Filters</span>198      </div>199      <!-- Crop -->200      <div class="action">201        <svg viewBox="0 0 24 24" aria-hidden="true">202          <path d="M7 3v14a2 2 0 0 0 2 2h14"></path>203          <path d="M21 7H7"></path>204          <path d="M17 21V7a2 2 0 0 0-2-2H3"></path>205        </svg>206        <span>Crop</span>207      </div>208      <!-- Rotate -->209      <div class="action">210        <svg viewBox="0 0 24 24" aria-hidden="true">211          <path d="M12 6a6 6 0 1 1-4.24 10.24"></path>212          <path d="M12 2v4H8"></path>213        </svg>214        <span>Rotate</span>215      </div>216      <!-- More -->217      <div class="action" style="position: relative;">218        <svg viewBox="0 0 24 24" aria-hidden="true">219          <circle cx="12" cy="5" r="2" fill="#FFFFFF" stroke="none"></circle>220          <circle cx="12" cy="12" r="2" fill="#FFFFFF" stroke="none"></circle>221          <circle cx="12" cy="19" r="2" fill="#FFFFFF" stroke="none"></circle>222        </svg>223        <span>More</span>224      </div>225    </div>226 227    <div class="done-btn">228      <span>Done</span>229      <svg viewBox="0 0 24 24" aria-hidden="true">230        <path d="M9 18l6-6-6-6" />231      </svg>232    </div>233 234    <!-- Small red notification dot near More -->235    <div class="indicator" aria-hidden="true"></div>236  </div>237 238  <!-- Gesture Bar -->239  <div class="gesture" aria-hidden="true"></div>240 241</div>242</body>243</html>