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">6<title>UI Render</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    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #05B9F4;20  }21 22  /* Top status bar */23  .status-bar {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: 130px;36    left: 30px;37    width: 1020px;38    height: 120px;39    background: #E8E8E8;40    border-radius: 8px;41    box-shadow: 0 2px 6px rgba(0,0,0,0.15);42    display: flex;43    align-items: center;44    padding: 0 24px;45    gap: 38px;46  }47  .tool-btn {48    width: 72px;49    height: 72px;50    display: flex;51    align-items: center;52    justify-content: center;53    border-radius: 10px;54  }55  .tool-btn svg {56    width: 52px;57    height: 52px;58  }59  .icon-stroke {60    stroke: #6A6A6A;61    stroke-width: 2.5;62    fill: none;63    stroke-linecap: round;64    stroke-linejoin: round;65  }66  .icon-fill {67    fill: #6A6A6A;68  }69  .color-wheel {70    width: 52px;71    height: 52px;72    border-radius: 50%;73    background: conic-gradient(#f44336, #ff9800, #ffeb3b, #4caf50, #03a9f4, #3f51b5, #9c27b0, #f44336);74    border: 2px solid #bbb;75  }76 77  /* Center grid pill */78  .grid-pill {79    position: absolute;80    left: 280px;81    top: 280px;82    width: 520px;83    height: 1600px;84    border-radius: 260px;85    background-color: rgba(0,0,0,0.55);86    background-image:87      repeating-linear-gradient(to right, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 8px),88      repeating-linear-gradient(to bottom, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 8px);89    box-shadow:90      inset 0 0 90px 40px rgba(0,0,0,0.5),91      0 0 80px 40px rgba(0,0,0,0.15);92  }93 94  /* Big title */95  .title {96    position: absolute;97    left: 220px;98    top: 980px;99    font-size: 240px;100    font-weight: 700;101    letter-spacing: 10px;102    color: rgba(0,0,0,0.9);103  }104 105  /* Bottom small refresh icon */106  .bottom-refresh {107    position: absolute;108    left: 510px;109    bottom: 210px;110    width: 60px;111    height: 60px;112    border-radius: 50%;113    display: flex;114    align-items: center;115    justify-content: center;116    opacity: 0.85;117  }118  .bottom-refresh svg {119    width: 44px;120    height: 44px;121  }122</style>123</head>124<body>125<div id="render-target">126 127  <div class="status-bar"></div>128 129  <div class="toolbar">130    <!-- List icon -->131    <div class="tool-btn">132      <svg viewBox="0 0 24 24">133        <rect class="icon-fill" x="3" y="5" width="18" height="2" rx="1"></rect>134        <rect class="icon-fill" x="3" y="11" width="18" height="2" rx="1"></rect>135        <rect class="icon-fill" x="3" y="17" width="18" height="2" rx="1"></rect>136      </svg>137    </div>138 139    <!-- Back arrow -->140    <div class="tool-btn">141      <svg viewBox="0 0 24 24">142        <path class="icon-stroke" d="M14 5L8 11l6 6"></path>143      </svg>144    </div>145 146    <!-- Redo arrow -->147    <div class="tool-btn">148      <svg viewBox="0 0 24 24">149        <path class="icon-stroke" d="M10 7h6"></path>150        <path class="icon-stroke" d="M16 7l-3-3"></path>151        <path class="icon-stroke" d="M16 7l-3 3"></path>152        <path class="icon-stroke" d="M4 14c2 4 8 5 12 3"></path>153      </svg>154    </div>155 156    <!-- Grid icon -->157    <div class="tool-btn">158      <svg viewBox="0 0 24 24">159        <rect class="icon-stroke" x="3" y="3" width="6" height="6" rx="1"></rect>160        <rect class="icon-stroke" x="3" y="13" width="6" height="6" rx="1"></rect>161        <rect class="icon-stroke" x="13" y="3" width="6" height="6" rx="1"></rect>162        <rect class="icon-stroke" x="13" y="13" width="6" height="6" rx="1"></rect>163      </svg>164    </div>165 166    <!-- Pen nib icon -->167    <div class="tool-btn">168      <svg viewBox="0 0 24 24">169        <path class="icon-stroke" d="M12 3l5 9-5 9-5-9 5-9z"></path>170        <circle class="icon-stroke" cx="12" cy="12" r="2"></circle>171      </svg>172    </div>173 174    <!-- Brush icon -->175    <div class="tool-btn">176      <svg viewBox="0 0 24 24">177        <path class="icon-stroke" d="M16 3l5 5-9 9-5-5z"></path>178        <path class="icon-stroke" d="M7 17c0 3-4 3-4 3s2-1 4-3z"></path>179      </svg>180    </div>181 182    <!-- Color wheel -->183    <div class="tool-btn">184      <div class="color-wheel"></div>185    </div>186 187    <!-- Layers icon -->188    <div class="tool-btn">189      <svg viewBox="0 0 24 24">190        <path class="icon-stroke" d="M12 3l9 5-9 5-9-5 9-5z"></path>191        <path class="icon-stroke" d="M3 13l9 5 9-5"></path>192      </svg>193    </div>194 195    <!-- Fullscreen icon -->196    <div class="tool-btn">197      <svg viewBox="0 0 24 24">198        <path class="icon-stroke" d="M4 9V4h5"></path>199        <path class="icon-stroke" d="M20 9V4h-5"></path>200        <path class="icon-stroke" d="M4 15v5h5"></path>201        <path class="icon-stroke" d="M20 15v5h-5"></path>202      </svg>203    </div>204  </div>205 206  <div class="grid-pill"></div>207 208  <div class="title">ULM</div>209 210  <div class="bottom-refresh">211    <svg viewBox="0 0 24 24">212      <circle class="icon-stroke" cx="12" cy="12" r="9"></circle>213      <path class="icon-stroke" d="M12 5v3l2-2"></path>214      <path class="icon-stroke" d="M12 19v-3l-2 2"></path>215    </svg>216  </div>217 218</div>219</body>220</html>