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>Mock UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #202124; /* dark canvas */15    color: #E8EAED;16    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Status bar */20  .statusbar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 110px;26    padding: 0 40px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #E8EAED;32    font-size: 34px;33    letter-spacing: 0.5px;34  }35  .status-right {36    display: flex;37    align-items: center;38    gap: 28px;39  }40  .icon {41    width: 48px;42    height: 48px;43  }44  .icon svg { width: 100%; height: 100%; stroke: #E8EAED; fill: none; stroke-width: 3; }45 46  /* Top toolbar below status */47  .toolbar {48    position: absolute;49    top: 140px;50    left: 0;51    width: 100%;52    height: 120px;53    display: flex;54    align-items: center;55    justify-content: space-between;56    padding: 0 50px;57    box-sizing: border-box;58  }59  .toolbar .left, .toolbar .right { display: flex; align-items: center; }60  .toolbar .right { gap: 70px; }61  .toolbar .icon svg { stroke: #B0B3B8; }62 63  /* Title and note content */64  .title {65    position: absolute;66    top: 340px;67    left: 60px;68    font-size: 108px;69    font-weight: 300;70    color: #E8EAED;71  }72  .subtitle {73    position: absolute;74    top: 500px;75    left: 60px;76    font-size: 42px;77    font-weight: 300;78    color: #C7C9CC;79  }80 81  /* Bottom action bar */82  .bottom-bar {83    position: absolute;84    bottom: 90px;85    left: 0;86    width: 100%;87    height: 120px;88    display: flex;89    align-items: center;90    justify-content: space-between;91    padding: 0 44px;92    box-sizing: border-box;93    color: #C7C9CC;94    font-size: 36px;95  }96  .bottom-left, .bottom-right { display: flex; align-items: center; gap: 36px; }97  .kebab { width: 54px; height: 54px; }98  .kebab svg { width: 100%; height: 100%; fill: #C7C9CC; }99 100  /* Gesture bar */101  .gesture {102    position: absolute;103    bottom: 24px;104    left: 50%;105    transform: translateX(-50%);106    width: 320px;107    height: 10px;108    background: #E8EAED;109    border-radius: 20px;110    opacity: 0.8;111  }112 113  /* Simple square button */114  .square-btn {115    width: 74px;116    height: 74px;117    border: 2px solid #B0B3B8;118    border-radius: 12px;119    display: flex;120    align-items: center;121    justify-content: center;122  }123  .square-btn svg { width: 44px; height: 44px; stroke: #B0B3B8; fill: none; stroke-width: 3; }124 125  .palette {126    width: 64px;127    height: 64px;128    display: flex;129    align-items: center;130    justify-content: center;131    font-size: 42px;132    color: #B0B3B8;133  }134 135  /* Muted separators */136  .dim { color: #B0B3B8; }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Status bar -->143  <div class="statusbar">144    <div>8:20</div>145    <div class="status-right">146      <!-- WiFi -->147      <div class="icon">148        <svg viewBox="0 0 24 24">149          <path d="M2 8c6-6 14-6 20 0"></path>150          <path d="M6 12c4-4 8-4 12 0"></path>151          <path d="M10 16c2-2 4-2 6 0"></path>152          <circle cx="12" cy="19" r="1.6" fill="#E8EAED"></circle>153        </svg>154      </div>155      <!-- Battery -->156      <div class="icon">157        <svg viewBox="0 0 24 24">158          <rect x="2" y="6" width="18" height="12" rx="2"></rect>159          <rect x="20" y="10" width="2.5" height="4" rx="1" fill="#E8EAED"></rect>160          <rect x="4.5" y="8.5" width="12" height="7" fill="#E8EAED"></rect>161        </svg>162      </div>163    </div>164  </div>165 166  <!-- Top toolbar -->167  <div class="toolbar">168    <div class="left">169      <!-- Back arrow -->170      <div class="icon">171        <svg viewBox="0 0 24 24">172          <path d="M15 5L6 12l9 7"></path>173        </svg>174      </div>175    </div>176    <div class="right">177      <!-- Pin -->178      <div class="icon">179        <svg viewBox="0 0 24 24">180          <path d="M7 6h10l-3 4v4l-2 2-2-2v-4L7 6z"></path>181        </svg>182      </div>183      <!-- Bell -->184      <div class="icon">185        <svg viewBox="0 0 24 24">186          <path d="M12 5c-3 0-5 2-5 5v4l-2 2h14l-2-2v-4c0-3-2-5-5-5z"></path>187          <circle cx="12" cy="19" r="1.8" fill="#B0B3B8"></circle>188        </svg>189      </div>190      <!-- Archive/Download -->191      <div class="icon">192        <svg viewBox="0 0 24 24">193          <rect x="4" y="4" width="16" height="14" rx="2"></rect>194          <path d="M12 7v6"></path>195          <path d="M9 10l3 3 3-3"></path>196        </svg>197      </div>198    </div>199  </div>200 201  <!-- Title and content -->202  <div class="title">ABC</div>203  <div class="subtitle">ABC</div>204 205  <!-- Bottom action bar -->206  <div class="bottom-bar">207    <div class="bottom-left">208      <div class="square-btn">209        <!-- Plus inside square -->210        <svg viewBox="0 0 24 24">211          <path d="M12 5v14M5 12h14"></path>212        </svg>213      </div>214      <div class="palette" aria-label="palette">🎨</div>215    </div>216 217    <div class="dim">Edited Yesterday, 12:15 PM</div>218 219    <div class="bottom-right">220      <!-- Kebab (vertical dots) -->221      <div class="kebab">222        <svg viewBox="0 0 24 24">223          <circle cx="12" cy="5" r="2"></circle>224          <circle cx="12" cy="12" r="2"></circle>225          <circle cx="12" cy="19" r="2"></circle>226        </svg>227      </div>228    </div>229  </div>230 231  <!-- Gesture bar -->232  <div class="gesture"></div>233 234</div>235</body>236</html>