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 Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target{10    position:relative;11    width:1080px;12    height:2400px;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    left:28px;23    right:28px;24    top:28px;25    height:120px;26    background:#dedede;27    border:1px solid #cfcfcf;28    box-shadow:0 2px 0 rgba(0,0,0,0.3);29    display:flex;30    align-items:center;31    padding:0 26px;32    gap:38px;33  }34  .icon{35    width:72px;36    height:72px;37    display:flex;38    align-items:center;39    justify-content:center;40  }41  .icon svg{ width:64px; height:64px; }42  .icon path, .icon rect, .icon line, .icon circle { fill:#7b7b7b; stroke:#7b7b7b; stroke-width:2; }43 44  /* Special color wheel icon */45  .icon.color{46    width:74px; height:74px; border-radius:50%;47    background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);48    border:4px solid #dedede;49    box-shadow: inset 0 0 0 3px #fff;50  }51 52  /* Dropdown menu */53  .menu{54    position:absolute;55    top:168px;56    left:28px;57    width:780px;58    background:#ececec;59    border:1px solid #cfcfcf;60    box-shadow:0 10px 18px rgba(0,0,0,0.25);61    border-radius:3px;62    overflow:hidden;63  }64  .menu-item{65    display:flex;66    align-items:center;67    gap:28px;68    padding:34px 36px;69    border-bottom:1px solid #dddddd;70    font-size:42px;71    color:#2b2b2b;72  }73  .menu-item:last-child{ border-bottom:none; }74  .menu .mi-icon{75    width:56px; height:56px; display:flex; align-items:center; justify-content:center;76  }77  .menu .mi-icon svg{ width:56px; height:56px; }78  .menu .mi-icon path, .menu .mi-icon line, .menu .mi-icon rect, .menu .mi-icon circle {79    fill:#7a7a7a; stroke:#7a7a7a; stroke-width:2;80  }81  .star-orange path{ fill:#ff7a24; stroke:#c75a16; }82 83  /* Canvas glow */84  .glow{85    position:absolute;86    width:920px;87    height:920px;88    left:160px;89    top:560px;90    border-radius:50%;91    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.35) 34%, rgba(30,30,30,0.3) 55%, rgba(0,0,0,0) 78%);92    filter: blur(1px);93  }94 95  .big-title{96    position:absolute;97    left:84px;98    top:1040px;99    font-size:176px;100    letter-spacing:4px;101    color:#0a0a0a;102    text-shadow: 0 2px 0 rgba(255,255,255,0.12);103    white-space:nowrap;104  }105 106  /* Bottom small spinner */107  .spinner{108    position:absolute;109    left:50%;110    transform:translateX(-50%);111    bottom:180px;112    width:44px; height:44px;113    border-radius:50%;114    border:6px solid #bdbdbd;115    border-top-color: transparent;116    opacity:0.6;117  }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Top toolbar with icons -->124  <div class="toolbar">125    <!-- Menu/List -->126    <div class="icon">127      <svg viewBox="0 0 24 24">128        <path d="M3 5h18v2H3zM3 11h18v2H3zM3 17h18v2H3z"/>129      </svg>130    </div>131    <!-- Undo -->132    <div class="icon">133      <svg viewBox="0 0 24 24">134        <path d="M9 7l-6 5 6 5v-3h5a6 6 0 0 1 6 6 9 9 0 0 0-9-9H9z" />135      </svg>136    </div>137    <!-- Redo -->138    <div class="icon">139      <svg viewBox="0 0 24 24">140        <path d="M15 7l6 5-6 5v-3h-5a6 6 0 0 0-6 6 9 9 0 0 1 9-9h2z" />141      </svg>142    </div>143    <!-- Grid -->144    <div class="icon">145      <svg viewBox="0 0 24 24">146        <rect x="3" y="3" width="6" height="6"/>147        <rect x="10.5" y="3" width="6" height="6"/>148        <rect x="3" y="10.5" width="6" height="6"/>149        <rect x="10.5" y="10.5" width="6" height="6"/>150      </svg>151    </div>152    <!-- Pen 1 -->153    <div class="icon">154      <svg viewBox="0 0 24 24">155        <path d="M12 2l4 9-4 11-4-11z"/>156      </svg>157    </div>158    <!-- Pen 2 -->159    <div class="icon">160      <svg viewBox="0 0 24 24">161        <path d="M6 20l6-18 6 18-6-4z"/>162      </svg>163    </div>164    <!-- Color wheel -->165    <div class="icon color"></div>166    <!-- Layers -->167    <div class="icon">168      <svg viewBox="0 0 24 24">169        <path d="M12 3l9 5-9 5-9-5z"/>170        <path d="M12 13l7 4-7 4-7-4z"/>171      </svg>172    </div>173    <!-- Fullscreen -->174    <div class="icon">175      <svg viewBox="0 0 24 24">176        <path d="M4 4h6v2H6v4H4zM14 4h6v6h-2V6h-4zM4 14h2v4h4v2H4zM18 14h2v6h-6v-2h4z"/>177      </svg>178    </div>179  </div>180 181  <!-- Dropdown menu -->182  <div class="menu">183    <div class="menu-item">184      <div class="mi-icon">185        <svg viewBox="0 0 24 24">186          <path d="M11 4h2v6h6v2h-6v6h-2v-6H5v-2h6z"/>187        </svg>188      </div>189      <div>New Sketch</div>190    </div>191    <div class="menu-item">192      <div class="mi-icon">193        <svg viewBox="0 0 24 24">194          <rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="none"/>195          <path d="M4 17l5-6 4 4 2-2 5 4" fill="none" stroke="#7a7a7a" stroke-width="2"/>196          <circle cx="9" cy="9" r="1.5" />197        </svg>198      </div>199      <div>Gallery</div>200    </div>201    <div class="menu-item">202      <div class="mi-icon">203        <svg viewBox="0 0 24 24">204          <path d="M12 3v12"/>205          <path d="M8 11l4 4 4-4" fill="none"/>206          <rect x="4" y="18" width="16" height="2"/>207        </svg>208      </div>209      <div>Save</div>210    </div>211    <div class="menu-item">212      <div class="mi-icon">213        <svg viewBox="0 0 24 24">214          <rect x="3" y="4" width="18" height="14" rx="2" ry="2" fill="none"/>215          <path d="M12 7v6"/>216          <path d="M8 11l4 4 4-4" fill="none"/>217        </svg>218      </div>219      <div>Import from Files</div>220    </div>221    <div class="menu-item">222      <div class="mi-icon">223        <svg viewBox="0 0 24 24">224          <rect x="4" y="13" width="16" height="7" fill="none"/>225          <path d="M12 3v10"/>226          <path d="M8 7l4-4 4 4" fill="none"/>227        </svg>228      </div>229      <div>Share</div>230    </div>231    <div class="menu-item">232      <div class="mi-icon">233        <svg viewBox="0 0 24 24">234          <path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0-5v3m0 12v3m9-9h-3M6 12H3m13.95-6.95l-2.12 2.12M6.17 17.83l-2.12 2.12m0-14.24l2.12 2.12M17.83 17.83l2.12 2.12" fill="none" stroke="#7a7a7a" stroke-width="2"/>235        </svg>236      </div>237      <div>Preferences</div>238    </div>239    <div class="menu-item">240      <div class="mi-icon">241        <svg viewBox="0 0 24 24">242          <circle cx="12" cy="12" r="10" fill="none"/>243          <circle cx="12" cy="8.5" r="1.2"/>244          <path d="M11 11.5h2V18h-2z"/>245        </svg>246      </div>247      <div>Support</div>248    </div>249    <div class="menu-item">250      <div class="mi-icon star-orange">251        <svg viewBox="0 0 24 24">252          <path d="M12 3l2.7 5.6 6.3.9-4.5 4.4 1.1 6.3-5.6-2.9-5.6 2.9 1.1-6.3L3 9.5l6.3-.9z"/>253        </svg>254      </div>255      <div>Upgrade to Premium</div>256    </div>257  </div>258 259  <!-- Canvas center glow -->260  <div class="glow"></div>261 262  <!-- Large text -->263  <div class="big-title">Maria Rossi</div>264 265  <!-- Bottom spinner -->266  <div class="spinner"></div>267 268</div>269</body>270</html>