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>Camera UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #000000;14    color: #fff;15  }16 17  /* Top utility pill */18  .top-pill {19    position: absolute;20    top: 60px;21    left: 36px;22    width: 190px;23    height: 86px;24    background: rgba(20,20,20,0.95);25    border: 1px solid #1f1f1f;26    border-radius: 44px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 22px;31    box-sizing: border-box;32  }33  .top-pill .icon {34    width: 36px;35    height: 36px;36    opacity: 0.95;37  }38  .top-pill .chevron {39    width: 28px;40    height: 28px;41    opacity: 0.85;42  }43 44  /* Close (X) */45  .close-btn {46    position: absolute;47    top: 118px;48    left: 44px;49    width: 60px;50    height: 60px;51    color: #ffffff;52    font-size: 44px;53    line-height: 60px;54    text-align: center;55    opacity: 0.95;56  }57 58  /* Lens selector */59  .lens-selector {60    position: absolute;61    bottom: 620px;62    left: 330px;63    width: 420px;64    height: 100px;65    background: rgba(20,20,20,0.9);66    border: 1px solid #1f1f1f;67    border-radius: 55px;68    display: flex;69    align-items: center;70    justify-content: space-between;71    padding: 0 22px;72    box-sizing: border-box;73  }74  .lens-option {75    width: 104px;76    height: 72px;77    border-radius: 40px;78    color: #d8d8d8;79    font-size: 40px;80    display: flex;81    align-items: center;82    justify-content: center;83    letter-spacing: 1px;84  }85  .lens-option.active {86    background: #cfe0f2;87    color: #0b1a28;88    font-weight: bold;89  }90 91  /* Shutter and buttons */92  .controls-area {93    position: absolute;94    bottom: 310px;95    left: 0;96    width: 100%;97    height: 380px;98  }99  .shutter {100    position: absolute;101    left: 420px;102    top: 40px;103    width: 240px;104    height: 240px;105    border-radius: 50%;106    border: 14px solid #ffffff;107    box-shadow: 0 0 0 8px rgba(255,255,255,0.1) inset;108    background: #ffffff;109  }110  .shutter::after {111    content: "";112    position: absolute;113    left: 50%;114    top: 50%;115    width: 170px;116    height: 170px;117    transform: translate(-50%, -50%);118    border-radius: 50%;119    border: 8px solid #000000;120    background: #ffffff;121    opacity: 0.95;122  }123 124  .rotate-btn {125    position: absolute;126    left: 130px;127    top: 100px;128    width: 130px;129    height: 130px;130    border-radius: 50%;131    border: 6px solid #ffffff;132    display: flex;133    align-items: center;134    justify-content: center;135    background: transparent;136  }137  .rotate-btn svg { width: 70px; height: 70px; }138 139  /* Home indicator */140  .home-indicator {141    position: absolute;142    bottom: 34px;143    left: 290px;144    width: 500px;145    height: 12px;146    background: #E6E6E6;147    border-radius: 8px;148    opacity: 0.9;149  }150</style>151</head>152<body>153<div id="render-target">154 155  <!-- Top utility pill with camera + gear + chevron -->156  <div class="top-pill">157    <!-- Camera icon -->158    <svg class="icon" viewBox="0 0 24 24" fill="#fff">159      <rect x="3" y="6" width="18" height="12" rx="2" ry="2"></rect>160      <circle cx="12" cy="12" r="4" fill="#000"></circle>161      <rect x="8" y="3" width="8" height="3" rx="1" ry="1" fill="#fff"></rect>162    </svg>163    <!-- Gear icon -->164    <svg class="icon" viewBox="0 0 24 24" fill="#fff">165      <circle cx="12" cy="12" r="3" fill="#000"></circle>166      <path d="M12 2l2 2 3-1 1 3 3 1-1 3 2 2-2 2 1 3-3 1-1 3-3-1-2 2-2-2-3 1-1-3-3-1 1-3-2-2 2-2-1-3 3-1 1-3 3 1 2-2z" fill="#fff" opacity="0.85"></path>167    </svg>168    <!-- Chevron down -->169    <svg class="chevron" viewBox="0 0 24 24" fill="#fff">170      <path d="M6 9l6 6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>171    </svg>172  </div>173 174  <!-- Close button X -->175  <div class="close-btn">×</div>176 177  <!-- Lens selector (.7 / 1x / 2) -->178  <div class="lens-selector">179    <div class="lens-option">.7</div>180    <div class="lens-option active">1x</div>181    <div class="lens-option">2</div>182  </div>183 184  <!-- Bottom controls -->185  <div class="controls-area">186    <div class="rotate-btn">187      <svg viewBox="0 0 24 24">188        <path d="M12 5c3.9 0 7 3.1 7 7h3l-4 4-4-4h3c0-2.8-2.2-5-5-5s-5 2.2-5 5 2.2 5 5 5c1.4 0 2.6-.6 3.5-1.5l1.4 1.4C15.1 18.8 13.6 19.5 12 19.5 7.9 19.5 4.5 16.1 4.5 12S7.9 4.5 12 4.5z" fill="#fff"></path>189      </svg>190    </div>191    <div class="shutter"></div>192  </div>193 194  <!-- Home indicator -->195  <div class="home-indicator"></div>196 197</div>198</body>199</html>