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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    position: relative;16    width: 1080px;17    height: 2400px;18    overflow: hidden;19    background: #04A9EB; /* bright cyan backdrop */20  }21 22  /* Top black status bar */23  .status {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    background: #000;30  }31 32  /* Toolbar */33  .toolbar {34    position: absolute;35    top: 128px;36    left: 40px;37    width: 1000px;38    height: 120px;39    background: #E7E8EB;40    border-radius: 10px;41    display: flex;42    align-items: center;43    padding: 0 26px;44    gap: 48px;45    box-sizing: border-box;46  }47  .icon {48    width: 74px;49    height: 74px;50    display: flex;51    justify-content: center;52    align-items: center;53  }54  .icon svg {55    width: 74px;56    height: 74px;57    stroke: #6E6E6E;58    fill: none;59    stroke-width: 4;60    stroke-linecap: round;61    stroke-linejoin: round;62  }63 64  /* Color wheel icon */65  .color-wheel {66    width: 70px;67    height: 70px;68    border-radius: 50%;69    background:70      conic-gradient(#ff5252, #ffa000, #ffee58, #66bb6a, #26c6da, #42a5f5, #7e57c2, #ec407a, #ff5252);71    box-shadow: inset 0 0 0 8px #E7E8EB;72  }73 74  /* Central grid pillar */75  .grid-pill {76    position: absolute;77    top: 340px;78    left: 50%;79    transform: translateX(-50%);80    width: 480px;81    height: 1680px;82    border-radius: 240px;83    overflow: hidden;84    background:85      /* grid lines vertical */86      repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 1px, rgba(0,0,0,0) 1px 8px),87      /* grid lines horizontal */88      repeating-linear-gradient(0deg, rgba(255,255,255,0.18) 0 1px, rgba(0,0,0,0) 1px 8px),89      /* dark body */90      #0f2a34;91    box-shadow:92      0 0 130px 40px rgba(0,0,0,0.35),93      0 0 230px 120px rgba(0,0,0,0.18);94  }95 96  /* Title text */97  .title {98    position: absolute;99    top: 940px;100    left: 140px;101    font-size: 260px;102    letter-spacing: 10px;103    color: rgba(0,0,0,0.88);104    font-weight: 700;105  }106 107  /* Bottom spinner */108  .spinner {109    position: absolute;110    left: 50%;111    bottom: 170px;112    transform: translateX(-50%);113    width: 52px;114    height: 52px;115    border-radius: 50%;116    border: 6px solid rgba(255,255,255,0.8);117    border-top-color: transparent;118    opacity: 0.9;119    animation: spin 1.6s linear infinite;120  }121  @keyframes spin {122    to { transform: translateX(-50%) rotate(360deg); }123  }124</style>125</head>126<body>127<div id="render-target">128  <div class="status"></div>129 130  <div class="toolbar">131    <!-- List icon -->132    <div class="icon">133      <svg viewBox="0 0 24 24">134        <circle cx="4" cy="6" r="1.5" fill="#6E6E6E"></circle>135        <circle cx="4" cy="12" r="1.5" fill="#6E6E6E"></circle>136        <circle cx="4" cy="18" r="1.5" fill="#6E6E6E"></circle>137        <line x1="8" y1="6" x2="20" y2="6"></line>138        <line x1="8" y1="12" x2="20" y2="12"></line>139        <line x1="8" y1="18" x2="20" y2="18"></line>140      </svg>141    </div>142 143    <!-- Back -->144    <div class="icon">145      <svg viewBox="0 0 24 24">146        <polyline points="14,5 7,12 14,19"></polyline>147      </svg>148    </div>149 150    <!-- Forward -->151    <div class="icon">152      <svg viewBox="0 0 24 24">153        <polyline points="10,5 17,12 10,19"></polyline>154      </svg>155    </div>156 157    <!-- Grid -->158    <div class="icon">159      <svg viewBox="0 0 24 24">160        <rect x="3" y="3" width="6" height="6"></rect>161        <rect x="10.5" y="3" width="6" height="6"></rect>162        <rect x="18" y="3" width="3" height="6"></rect>163        <rect x="3" y="10.5" width="6" height="6"></rect>164        <rect x="10.5" y="10.5" width="6" height="6"></rect>165        <rect x="18" y="10.5" width="3" height="6"></rect>166        <rect x="3" y="18" width="6" height="3"></rect>167        <rect x="10.5" y="18" width="6" height="3"></rect>168        <rect x="18" y="18" width="3" height="3"></rect>169      </svg>170    </div>171 172    <!-- Pen nib -->173    <div class="icon">174      <svg viewBox="0 0 24 24">175        <path d="M12 3 L20 9 L13 21 L11 15 L12 3 Z"></path>176        <circle cx="12" cy="13" r="1.5" fill="#6E6E6E"></circle>177      </svg>178    </div>179 180    <!-- Brush -->181    <div class="icon">182      <svg viewBox="0 0 24 24">183        <path d="M18 3 L10 11"></path>184        <path d="M9 12 c-2 2 -1 5 -4 6 c2 1 5 0 6 -3"></path>185      </svg>186    </div>187 188    <!-- Color wheel -->189    <div class="icon">190      <div class="color-wheel"></div>191    </div>192 193    <!-- Layers -->194    <div class="icon">195      <svg viewBox="0 0 24 24">196        <polygon points="12,4 3,9 12,14 21,9 12,4"></polygon>197        <polyline points="3,13 12,18 21,13"></polyline>198      </svg>199    </div>200 201    <!-- Fullscreen -->202    <div class="icon">203      <svg viewBox="0 0 24 24">204        <polyline points="4,9 4,4 9,4"></polyline>205        <polyline points="15,4 20,4 20,9"></polyline>206        <polyline points="20,15 20,20 15,20"></polyline>207        <polyline points="9,20 4,20 4,15"></polyline>208      </svg>209    </div>210  </div>211 212  <div class="grid-pill"></div>213 214  <div class="title">ULM</div>215 216  <div class="spinner"></div>217</div>218</body>219</html>