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>Drawing App UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: Arial, Helvetica, sans-serif;16    color: #222;17  }18 19  /* Top toolbar */20  .toolbar {21    position: absolute;22    top: 80px;23    left: 24px;24    width: 1032px;25    height: 140px;26    background: #E6E6E6;27    border: 1px solid #CFCFCF;28    box-shadow: 0 2px 0 rgba(0,0,0,0.15);29    display: flex;30    align-items: center;31    padding: 0 22px;32    gap: 34px;33  }34  .toolbar .icon {35    width: 70px;36    height: 70px;37  }38  .toolbar svg {39    width: 100%;40    height: 100%;41    fill: none;42    stroke: #7A7A7A;43    stroke-width: 7;44    stroke-linecap: round;45    stroke-linejoin: round;46  }47  .color-wheel {48    width: 70px;49    height: 70px;50    border-radius: 50%;51    background: conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red);52    border: 6px solid #E6E6E6;53    box-sizing: border-box;54  }55 56  /* Dropdown menu */57  .dropdown {58    position: absolute;59    top: 220px;60    left: 24px;61    width: 640px;62    background: #EEEEEE;63    border: 1px solid #CFCFCF;64    box-shadow: 0 4px 8px rgba(0,0,0,0.2);65  }66  .dropdown .row {67    height: 120px;68    display: flex;69    align-items: center;70    padding: 0 24px;71    gap: 24px;72    border-top: 1px solid #D9D9D9;73  }74  .dropdown .row:first-child { border-top: none; }75  .dropdown .row svg {76    width: 42px;77    height: 42px;78    stroke: #6E6E6E;79    stroke-width: 6;80  }81  .dropdown .label {82    font-size: 40px;83    color: #2E2E2E;84  }85 86  /* Canvas glow */87  .light-burst {88    position: absolute;89    left: 70px;90    top: 980px;91    width: 860px;92    height: 860px;93    border-radius: 50%;94    background: radial-gradient(circle at 45% 45%,95      #FFFFFF 0%,96      #F3F3F3 12%,97      #CFCFCF 28%,98      #9A9A9A 44%,99      #6B6B6B 62%,100      #3B3B3B 78%,101      #0E0E0E 92%,102      #000000 100%);103    filter: blur(6px);104  }105 106  /* Main text */107  .title {108    position: absolute;109    left: 90px;110    top: 1320px;111    font-size: 190px;112    font-weight: 500;113    color: #0A0A0A;114    letter-spacing: 4px;115  }116 117  /* Bottom small indicator */118  .bottom-indicator {119    position: absolute;120    left: 50%;121    transform: translateX(-50%);122    top: 2140px;123    width: 42px;124    height: 42px;125  }126  .bottom-indicator svg {127    width: 100%;128    height: 100%;129    stroke: #9A9A9A;130    stroke-width: 6;131    fill: none;132    opacity: 0.85;133  }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Top toolbar -->140  <div class="toolbar">141    <!-- Menu/Hamburger -->142    <div class="icon">143      <svg viewBox="0 0 100 100">144        <path d="M15 26h70M15 50h70M15 74h70"></path>145      </svg>146    </div>147    <!-- Back arrow -->148    <div class="icon">149      <svg viewBox="0 0 100 100">150        <path d="M62 22L28 50l34 28"></path>151      </svg>152    </div>153    <!-- Forward arrow -->154    <div class="icon">155      <svg viewBox="0 0 100 100">156        <path d="M38 22l34 28-34 28"></path>157      </svg>158    </div>159    <!-- Grid icon -->160    <div class="icon">161      <svg viewBox="0 0 100 100">162        <rect x="16" y="16" width="22" height="22"></rect>163        <rect x="62" y="16" width="22" height="22"></rect>164        <rect x="16" y="62" width="22" height="22"></rect>165        <rect x="62" y="62" width="22" height="22"></rect>166      </svg>167    </div>168    <!-- Pen nib -->169    <div class="icon">170      <svg viewBox="0 0 100 100">171        <path d="M20 76 L50 22 L80 76"></path>172        <circle cx="50" cy="56" r="6"></circle>173      </svg>174    </div>175    <!-- Color wheel (complex: using CSS conic gradient) -->176    <div class="color-wheel"></div>177    <!-- Layers icon -->178    <div class="icon">179      <svg viewBox="0 0 100 100">180        <rect x="22" y="26" width="56" height="38"></rect>181        <rect x="16" y="36" width="56" height="38"></rect>182      </svg>183    </div>184    <!-- Fullscreen / frame corners -->185    <div class="icon">186      <svg viewBox="0 0 100 100">187        <path d="M16 40V16h24M84 40V16H60M16 60v24h24M84 60v24H60"></path>188      </svg>189    </div>190  </div>191 192  <!-- Dropdown menu under toolbar -->193  <div class="dropdown">194    <div class="row">195      <svg viewBox="0 0 100 100">196        <path d="M62 22L28 50l34 28"></path>197      </svg>198      <div class="label">Save</div>199    </div>200    <div class="row">201      <svg viewBox="0 0 100 100">202        <rect x="18" y="28" width="64" height="44"></rect>203        <path d="M18 28l16-12h32l16 12"></path>204      </svg>205      <div class="label">Save current sketch</div>206    </div>207    <div class="row">208      <svg viewBox="0 0 100 100">209        <rect x="18" y="28" width="64" height="52"></rect>210        <path d="M18 28h24v-12h16v12h24"></path>211      </svg>212      <div class="label">Export to Files</div>213    </div>214  </div>215 216  <!-- Canvas glow effect -->217  <div class="light-burst"></div>218 219  <!-- Large name text -->220  <div class="title">Maria Rossi</div>221 222  <!-- Bottom small indicator -->223  <div class="bottom-indicator">224    <svg viewBox="0 0 100 100">225      <circle cx="50" cy="50" r="28"></circle>226      <path d="M50 22a28 28 0 0 1 0 56" stroke="#BDBDBD"></path>227      <circle cx="50" cy="50" r="7" fill="#BDBDBD" stroke="none"></circle>228    </svg>229  </div>230 231</div>232</body>233</html>