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 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: #FFFFFF;20  }21 22  /* Status bar (black strip at top) */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    background: #000000;30  }31 32  /* Top tool bar */33  .toolbar {34    position: absolute;35    top: 120px;36    left: 24px;37    width: 1032px;38    height: 150px;39    background: #F3F3F3;40    border: 1px solid #E0E0E0;41    box-shadow: 0 2px 4px rgba(0,0,0,0.08);42    border-radius: 6px;43    display: flex;44    align-items: center;45    padding: 0 24px;46    gap: 34px;47  }48  .icon-btn {49    width: 96px;50    height: 96px;51    display: flex;52    align-items: center;53    justify-content: center;54  }55  .icon {56    width: 64px;57    height: 64px;58  }59  .stroke {60    stroke: #6F6F6F;61    stroke-width: 6;62    fill: none;63    stroke-linecap: round;64    stroke-linejoin: round;65  }66  .fill {67    fill: #6F6F6F;68  }69 70  /* Canvas area elements */71  .selection-rect {72    position: absolute;73    left: 210px;74    top: 720px;75    width: 620px;76    height: 780px;77    border: 4px solid #AFAEF9;78    border-radius: 4px;79    box-shadow: 0 0 0 2px rgba(175,174,249,0.35) inset;80  }81  .big-text {82    position: absolute;83    left: 36px;84    top: 1240px;85    font-size: 160px;86    color: #111111;87    font-weight: 500;88    letter-spacing: 0.5px;89  }90 91  /* Bottom subtle loader circle */92  .bottom-loader {93    position: absolute;94    left: 50%;95    transform: translateX(-50%);96    bottom: 122px;97    width: 44px;98    height: 44px;99    border-radius: 50%;100    border: 3px solid #E5E5E5;101    border-top-color: #CFCFCF;102    opacity: 0.6;103  }104 105  /* Color wheel icon using conic-gradient for rainbow ring */106  .color-wheel {107    width: 64px;108    height: 64px;109    border-radius: 50%;110    background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);111    box-shadow: inset 0 0 0 6px #FFFFFF;112    border: 2px solid #D0D0D0;113  }114</style>115</head>116<body>117<div id="render-target">118  <div class="status-bar"></div>119 120  <div class="toolbar">121    <!-- List icon -->122    <div class="icon-btn">123      <svg class="icon" viewBox="0 0 64 64">124        <rect x="8" y="10" width="10" height="10" class="fill"></rect>125        <rect x="24" y="12" width="32" height="6" class="fill"></rect>126        <rect x="8" y="26" width="10" height="10" class="fill"></rect>127        <rect x="24" y="28" width="32" height="6" class="fill"></rect>128        <rect x="8" y="42" width="10" height="10" class="fill"></rect>129        <rect x="24" y="44" width="32" height="6" class="fill"></rect>130      </svg>131    </div>132 133    <!-- Back arrow -->134    <div class="icon-btn">135      <svg class="icon" viewBox="0 0 64 64">136        <path class="stroke" d="M44 12 L20 32 L44 52"></path>137      </svg>138    </div>139 140    <!-- Redo/forward arrow -->141    <div class="icon-btn">142      <svg class="icon" viewBox="0 0 64 64">143        <path class="stroke" d="M20 12 L44 32 L20 52"></path>144      </svg>145    </div>146 147    <!-- Grid icon -->148    <div class="icon-btn">149      <svg class="icon" viewBox="0 0 64 64">150        <rect x="8" y="8" width="16" height="16" class="stroke"></rect>151        <rect x="28" y="8" width="16" height="16" class="stroke"></rect>152        <rect x="48" y="8" width="8" height="16" class="stroke"></rect>153        <rect x="8" y="28" width="16" height="16" class="stroke"></rect>154        <rect x="28" y="28" width="16" height="16" class="stroke"></rect>155        <rect x="48" y="28" width="8" height="16" class="stroke"></rect>156        <rect x="8" y="48" width="16" height="8" class="stroke"></rect>157        <rect x="28" y="48" width="16" height="8" class="stroke"></rect>158        <rect x="48" y="48" width="8" height="8" class="stroke"></rect>159      </svg>160    </div>161 162    <!-- Pen nib icon -->163    <div class="icon-btn">164      <svg class="icon" viewBox="0 0 64 64">165        <polygon points="32,10 50,46 14,46" class="stroke"></polygon>166        <circle cx="32" cy="36" r="4" class="fill"></circle>167      </svg>168    </div>169 170    <!-- Brush icon -->171    <div class="icon-btn">172      <svg class="icon" viewBox="0 0 64 64">173        <path class="stroke" d="M14 44 C20 40, 24 34, 28 28 L46 12 L52 18 L36 36 C30 40, 24 44, 18 48"></path>174      </svg>175    </div>176 177    <!-- Color wheel -->178    <div class="icon-btn">179      <div class="color-wheel"></div>180    </div>181 182    <!-- Layers icon -->183    <div class="icon-btn">184      <svg class="icon" viewBox="0 0 64 64">185        <rect x="12" y="20" width="40" height="24" class="stroke"></rect>186        <rect x="18" y="12" width="40" height="24" class="stroke" transform="translate(-6,6)"></rect>187      </svg>188    </div>189 190    <!-- Fullscreen icon -->191    <div class="icon-btn">192      <svg class="icon" viewBox="0 0 64 64">193        <rect x="10" y="10" width="44" height="44" class="stroke"></rect>194      </svg>195    </div>196  </div>197 198  <!-- Selection rectangle on canvas -->199  <div class="selection-rect"></div>200 201  <!-- Large text -->202  <div class="big-text">Happy Birthday</div>203 204  <!-- Bottom loader circle -->205  <div class="bottom-loader"></div>206</div>207</body>208</html>