GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Rendering</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000;14  }15 16  /* Top toolbar */17  .topbar {18    position: absolute;19    top: 60px;20    left: 30px;21    width: 1020px;22    height: 140px;23    background: #D9D9D9;24    border-radius: 6px;25    box-shadow: 0 4px 8px rgba(0,0,0,0.15);26    display: flex;27    align-items: center;28    padding: 0 28px;29    gap: 46px;30  }31  .icon {32    width: 64px;33    height: 64px;34    display: flex;35    align-items: center;36    justify-content: center;37  }38  .icon svg {39    width: 64px;40    height: 64px;41  }42  .stroke { fill: none; stroke: #555; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }43  .fill { fill: #555; }44  .light { stroke: #BDBDBD; fill: #BDBDBD; }45 46  /* Canvas glow */47  .spotlight {48    position: absolute;49    left: -40px;50    top: 760px;51    width: 980px;52    height: 980px;53    background: radial-gradient(circle at 360px 360px,54      #ffffff 0%,55      #e9e9e9 18%,56      #bdbdbd 38%,57      #7a7a7a 60%,58      #333333 82%,59      #000000 100%);60    filter: blur(0.8px);61    border-radius: 50%;62  }63 64  /* Title text */65  .title {66    position: absolute;67    left: 92px;68    top: 1040px;69    font-family: Arial, Helvetica, sans-serif;70    font-size: 160px;71    font-weight: 500;72    letter-spacing: 2px;73    color: #0e0e0e;74    text-shadow:75      0 0 24px rgba(255,255,255,0.25),76      0 1px 0 rgba(255,255,255,0.08);77    white-space: nowrap;78  }79 80  /* Bottom small circular indicator */81  .bottom-indicator {82    position: absolute;83    left: 50%;84    transform: translateX(-50%);85    bottom: 170px;86    width: 42px;87    height: 42px;88    border-radius: 50%;89    box-shadow: inset 0 0 0 3px #9e9e9e;90    display: flex;91    align-items: center;92    justify-content: center;93  }94  .bottom-indicator svg {95    width: 26px;96    height: 26px;97  }98 99  /* Color wheel */100  .color-wheel {101    width: 64px;102    height: 64px;103    border-radius: 50%;104    background:105      radial-gradient(circle, #fff 35%, transparent 36%),106      conic-gradient(red, #ff0, lime, cyan, blue, magenta, red);107    box-shadow: 0 0 0 2px rgba(0,0,0,0.08) inset;108  }109</style>110</head>111<body>112<div id="render-target">113 114  <!-- Top Toolbar -->115  <div class="topbar">116    <!-- List icon -->117    <div class="icon">118      <svg viewBox="0 0 48 48">119        <rect x="6" y="8" width="36" height="32" class="stroke" rx="3"></rect>120        <line x1="12" y1="16" x2="36" y2="16" class="stroke"></line>121        <line x1="12" y1="24" x2="36" y2="24" class="stroke"></line>122        <line x1="12" y1="32" x2="36" y2="32" class="stroke"></line>123      </svg>124    </div>125 126    <!-- Back arrow -->127    <div class="icon">128      <svg viewBox="0 0 48 48">129        <polyline points="28,10 16,24 28,38" class="stroke"></polyline>130        <line x1="16" y1="24" x2="40" y2="24" class="stroke"></line>131      </svg>132    </div>133 134    <!-- Forward arrow (lighter) -->135    <div class="icon">136      <svg viewBox="0 0 48 48">137        <polyline points="20,10 32,24 20,38" class="stroke light"></polyline>138        <line x1="8" y1="24" x2="32" y2="24" class="stroke light"></line>139      </svg>140    </div>141 142    <!-- Grid icon -->143    <div class="icon">144      <svg viewBox="0 0 48 48">145        <rect x="8" y="8" width="12" height="12" class="stroke"></rect>146        <rect x="28" y="8" width="12" height="12" class="stroke"></rect>147        <rect x="8" y="28" width="12" height="12" class="stroke"></rect>148        <rect x="28" y="28" width="12" height="12" class="stroke"></rect>149      </svg>150    </div>151 152    <!-- Pen nib icon -->153    <div class="icon">154      <svg viewBox="0 0 48 48">155        <path d="M24 6 L36 26 L24 42 L12 26 Z" class="stroke"></path>156        <circle cx="24" cy="26" r="4" class="stroke"></circle>157      </svg>158    </div>159 160    <!-- Marker nib icon -->161    <div class="icon">162      <svg viewBox="0 0 48 48">163        <path d="M16 8 L32 8 L40 26 L24 40 L8 26 Z" class="stroke"></path>164        <line x1="16" y1="8" x2="32" y2="8" class="stroke"></line>165      </svg>166    </div>167 168    <!-- Color wheel -->169    <div class="icon">170      <div class="color-wheel"></div>171    </div>172 173    <!-- Layers icon -->174    <div class="icon">175      <svg viewBox="0 0 48 48">176        <polygon points="24,10 40,18 24,26 8,18" class="stroke"></polygon>177        <polygon points="24,22 40,30 24,38 8,30" class="stroke"></polygon>178      </svg>179    </div>180 181    <!-- Fullscreen icon -->182    <div class="icon">183      <svg viewBox="0 0 48 48">184        <polyline points="10,20 10,10 20,10" class="stroke"></polyline>185        <polyline points="38,20 38,10 28,10" class="stroke"></polyline>186        <polyline points="10,28 10,38 20,38" class="stroke"></polyline>187        <polyline points="38,28 38,38 28,38" class="stroke"></polyline>188      </svg>189    </div>190  </div>191 192  <!-- Radial glow canvas -->193  <div class="spotlight"></div>194 195  <!-- Title text -->196  <div class="title">Maria Rossi</div>197 198  <!-- Bottom circular indicator -->199  <div class="bottom-indicator">200    <svg viewBox="0 0 48 48">201      <circle cx="24" cy="24" r="12" class="stroke" stroke="#9e9e9e"></circle>202      <path d="M24 12 A12 12 0 0 1 35 19" class="stroke" stroke="#9e9e9e"></path>203      <polyline points="35,19 33,12 40,14" class="stroke" stroke="#9e9e9e"></polyline>204    </svg>205  </div>206 207</div>208</body>209</html>