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>UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0db3e6;15    font-family: Arial, Helvetica, sans-serif;16    color: #222;17  }18 19  /* Top black status area */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #000;27  }28 29  /* Toolbar */30  .toolbar {31    position: absolute;32    top: 120px;33    left: 30px;34    width: 1020px;35    height: 130px;36    background: #e6e9ef;37    border-radius: 8px;38    box-shadow: 0 2px 0 rgba(0,0,0,0.08);39    display: flex;40    align-items: center;41    padding: 0 22px;42    gap: 48px;43  }44  .tool {45    width: 90px;46    height: 90px;47    border-radius: 8px;48    display: flex;49    align-items: center;50    justify-content: center;51  }52  .tool svg { width: 64px; height: 64px; }53  .icon-gray { fill: #6f7a86; stroke: #6f7a86; }54 55  /* Left dropdown menu */56  .menu {57    position: absolute;58    top: 270px;59    left: 30px;60    width: 720px;61    background: linear-gradient(90deg, #f4f4f4 0%, #f0f0f0 55%, #eaeaea 100%);62    border: 1px solid #cfcfcf;63    border-radius: 4px;64    box-shadow: 0 8px 18px rgba(0,0,0,0.15);65  }66  .menu-item {67    display: flex;68    align-items: center;69    gap: 26px;70    padding: 26px 34px;71    border-bottom: 1px solid rgba(0,0,0,0.06);72    font-size: 42px;73    color: #333;74  }75  .menu-item:last-child { border-bottom: none; }76  .m-ic {77    width: 52px;78    height: 52px;79    display: inline-flex;80    align-items: center;81    justify-content: center;82  }83  .m-ic svg { width: 52px; height: 52px; }84  .star svg { fill: #ff8a33; stroke: #d7671a; }85 86  /* Center pill grid */87  .pill-grid {88    position: absolute;89    top: 520px;90    left: 290px;91    width: 520px;92    height: 1500px;93    border-radius: 260px;94    background:95      repeating-linear-gradient(0deg, rgba(0,0,0,0.55) 0px, rgba(0,0,0,0.55) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 11px),96      repeating-linear-gradient(90deg, rgba(0,0,0,0.55) 0px, rgba(0,0,0,0.55) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 11px);97    box-shadow:98      0 0 60px 40px rgba(0,0,0,0.18) inset,99      0 0 120px 60px rgba(0,0,0,0.10) inset;100    opacity: 0.85;101  }102 103  .center-text {104    position: absolute;105    top: 1060px;106    left: 260px;107    font-size: 220px;108    letter-spacing: 4px;109    color: rgba(0,0,0,0.85);110    font-weight: 700;111  }112 113  /* Bottom loader */114  .loader {115    position: absolute;116    bottom: 120px;117    left: 50%;118    transform: translateX(-50%);119    width: 56px;120    height: 56px;121  }122  .loader svg { width: 56px; height: 56px; }123 124</style>125</head>126<body>127<div id="render-target">128 129  <div class="status-bar"></div>130 131  <div class="toolbar">132    <!-- List icon -->133    <div class="tool">134      <svg viewBox="0 0 24 24">135        <rect class="icon-gray" x="5" y="5" width="14" height="2"></rect>136        <rect class="icon-gray" x="5" y="11" width="14" height="2"></rect>137        <rect class="icon-gray" x="5" y="17" width="14" height="2"></rect>138        <circle class="icon-gray" cx="2.5" cy="6" r="1.5"></circle>139        <circle class="icon-gray" cx="2.5" cy="12" r="1.5"></circle>140        <circle class="icon-gray" cx="2.5" cy="18" r="1.5"></circle>141      </svg>142    </div>143    <!-- Back arrow -->144    <div class="tool">145      <svg viewBox="0 0 24 24">146        <path class="icon-gray" d="M14 5l-7 7 7 7v-5h7v-4h-7z"></path>147      </svg>148    </div>149    <!-- Forward arrow -->150    <div class="tool">151      <svg viewBox="0 0 24 24">152        <path class="icon-gray" d="M10 5l7 7-7 7v-5H3v-4h7z"></path>153      </svg>154    </div>155    <!-- Grid icon -->156    <div class="tool">157      <svg viewBox="0 0 24 24">158        <rect class="icon-gray" x="3" y="3" width="7" height="7"></rect>159        <rect class="icon-gray" x="14" y="3" width="7" height="7"></rect>160        <rect class="icon-gray" x="3" y="14" width="7" height="7"></rect>161        <rect class="icon-gray" x="14" y="14" width="7" height="7"></rect>162      </svg>163    </div>164    <!-- Pen nibs icon -->165    <div class="tool">166      <svg viewBox="0 0 24 24">167        <path class="icon-gray" d="M6 21l4-12 4 12H6z"></path>168        <path class="icon-gray" d="M14 21l4-12 4 12h-8z"></path>169      </svg>170    </div>171    <!-- Color wheel -->172    <div class="tool">173      <svg viewBox="0 0 24 24">174        <circle cx="12" cy="12" r="9" fill="none" stroke="#6f7a86" stroke-width="2"></circle>175        <path d="M12 3A9 9 0 0 1 21 12H12z" fill="#ff3b3b"></path>176        <path d="M21 12A9 9 0 0 1 12 21V12z" fill="#2ecc71"></path>177        <path d="M12 21A9 9 0 0 1 3 12h9z" fill="#3498db"></path>178      </svg>179    </div>180    <!-- Layers -->181    <div class="tool">182      <svg viewBox="0 0 24 24">183        <path class="icon-gray" d="M12 3l9 5-9 5-9-5 9-5z"></path>184        <path class="icon-gray" d="M3 13l9 5 9-5" fill="none" stroke="#6f7a86" stroke-width="2"></path>185      </svg>186    </div>187    <!-- Fullscreen -->188    <div class="tool">189      <svg viewBox="0 0 24 24">190        <path class="icon-gray" d="M3 9V3h6v2H5v4H3zm16 0V5h-4V3h6v6h-2zM3 15v6h6v-2H5v-4H3zm16 4v-4h2v6h-6v-2h4z"></path>191      </svg>192    </div>193  </div>194 195  <!-- Dropdown menu panel -->196  <div class="menu">197    <div class="menu-item">198      <div class="m-ic">199        <svg viewBox="0 0 24 24">200          <path class="icon-gray" d="M11 5v6H5v2h6v6h2v-6h6v-2h-6V5z"></path>201        </svg>202      </div>203      <span>New Sketch</span>204    </div>205    <div class="menu-item">206      <div class="m-ic">207        <svg viewBox="0 0 24 24">208          <rect x="3" y="4" width="18" height="14" fill="none" stroke="#6f7a86" stroke-width="2"></rect>209          <path class="icon-gray" d="M6 15l4-5 3 4 2-2 3 3H6z"></path>210        </svg>211      </div>212      <span>Gallery</span>213    </div>214    <div class="menu-item">215      <div class="m-ic">216        <svg viewBox="0 0 24 24">217          <path class="icon-gray" d="M12 3v10l4-4H8l4 4V3z"></path>218          <rect x="4" y="17" width="16" height="4" class="icon-gray"></rect>219        </svg>220      </div>221      <span>Save</span>222    </div>223    <div class="menu-item">224      <div class="m-ic">225        <svg viewBox="0 0 24 24">226          <rect x="3" y="4" width="18" height="8" fill="none" stroke="#6f7a86" stroke-width="2"></rect>227          <path class="icon-gray" d="M12 20l-4-5h3V9h2v6h3l-4 5z"></path>228        </svg>229      </div>230      <span>Import from Files</span>231    </div>232    <div class="menu-item">233      <div class="m-ic">234        <svg viewBox="0 0 24 24">235          <circle cx="6" cy="12" r="3" fill="none" stroke="#6f7a86" stroke-width="2"></circle>236          <circle cx="18" cy="6" r="3" fill="none" stroke="#6f7a86" stroke-width="2"></circle>237          <circle cx="18" cy="18" r="3" fill="none" stroke="#6f7a86" stroke-width="2"></circle>238          <path class="icon-gray" d="M8 11l8-4M8 13l8 4" stroke="#6f7a86" stroke-width="2" fill="none"></path>239        </svg>240      </div>241      <span>Share</span>242    </div>243    <div class="menu-item">244      <div class="m-ic">245        <svg viewBox="0 0 24 24">246          <circle cx="12" cy="12" r="3" class="icon-gray"></circle>247          <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1" stroke="#6f7a86" stroke-width="2" fill="none"></path>248        </svg>249      </div>250      <span>Preferences</span>251    </div>252    <div class="menu-item">253      <div class="m-ic">254        <svg viewBox="0 0 24 24">255          <circle cx="12" cy="12" r="9" fill="none" stroke="#6f7a86" stroke-width="2"></circle>256          <path class="icon-gray" d="M12 7a3 3 0 0 1 3 3c0 2-2 2-2 4h-2c0-3 2-2 2-4a1 1 0 0 0-1-1c-.6 0-1 .4-1 1H9a3 3 0 0 1 3-3z"></path>257          <rect x="11" y="16" width="2" height="2" class="icon-gray"></rect>258        </svg>259      </div>260      <span>Support</span>261    </div>262    <div class="menu-item">263      <div class="m-ic star">264        <svg viewBox="0 0 24 24">265          <path d="M12 3l3 6 7 1-5 4 1 7-6-3-6 3 1-7-5-4 7-1 3-6z"></path>266        </svg>267      </div>268      <span>Upgrade to Premium</span>269    </div>270  </div>271 272  <!-- Central grid pill and large text -->273  <div class="pill-grid"></div>274  <div class="center-text">ULFM</div>275 276  <!-- Bottom refresh loader -->277  <div class="loader">278    <svg viewBox="0 0 24 24">279      <circle cx="12" cy="12" r="9" fill="none" stroke="#e4f4fb" stroke-width="2"></circle>280      <path d="M12 3a9 9 0 0 1 7.7 4.2l-2.4.6 3.7 2.1 1-4.2-2.2.6A11 11 0 0 0 12 1v2z" fill="#e4f4fb"></path>281    </svg>282  </div>283 284</div>285</body>286</html>