GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Drawing App UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 9  /* Root render target */10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #07B1E7; /* bright cyan canvas */16  }17 18  /* Top black status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #000;26  }27 28  /* Toolbar */29  .toolbar {30    position: absolute;31    top: 120px;32    left: 24px;33    width: 1032px;34    height: 150px;35    background: #E9EDF0;36    border-radius: 6px;37    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;38    display: flex;39    align-items: center;40    padding: 0 18px;41    gap: 28px;42  }43  .tool-btn {44    width: 110px;45    height: 110px;46    background: #F5F7F9;47    border: 1px solid #C9D2D9;48    border-radius: 8px;49    display: flex;50    align-items: center;51    justify-content: center;52  }53  .tool-btn svg { width: 56px; height: 56px; stroke: #444; fill: none; stroke-width: 4; }54 55  /* Dropdown menu panel */56  .menu-panel {57    position: absolute;58    top: 290px;59    left: 24px;60    width: 680px;61    background: #F3F3F3;62    border-radius: 4px;63    box-shadow: 0 8px 24px rgba(0,0,0,0.18);64    overflow: hidden;65  }66  .menu-item {67    height: 120px;68    display: flex;69    align-items: center;70    gap: 28px;71    padding: 0 28px;72    border-bottom: 1px solid #E0E0E0;73    color: #2D2D2D;74    font-size: 44px;75  }76  .menu-item:last-child { border-bottom: none; }77  .menu-icon {78    width: 70px;79    height: 70px;80    border: 1px solid #CFCFCF;81    border-radius: 6px;82    background: #FFFFFF;83    display: flex;84    align-items: center;85    justify-content: center;86  }87  .menu-icon svg { width: 40px; height: 40px; stroke: #4A4A4A; fill: none; stroke-width: 4; }88 89  /* Central dark column with grid look */90  .grid-column {91    position: absolute;92    left: 50%;93    top: 340px;94    transform: translateX(-50%);95    width: 480px;96    height: 1650px;97    border-radius: 240px;98    overflow: hidden;99    /* base dark body */100    background:101      linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.55)) ,102      /* grid pattern using two repeating gradients */103      repeating-linear-gradient(0deg, rgba(0,0,0,0.75) 0 1px, rgba(0,0,0,0) 1px 8px),104      repeating-linear-gradient(90deg, rgba(0,0,0,0.75) 0 1px, rgba(0,0,0,0) 1px 8px);105    box-shadow:106      0 0 60px 20px rgba(0,0,0,0.25),107      0 0 120px 50px rgba(0,0,0,0.18);108  }109 110  /* Big title text */111  .title {112    position: absolute;113    left: 50%;114    top: 930px;115    transform: translateX(-50%);116    font-size: 220px;117    letter-spacing: 6px;118    font-weight: 700;119    color: rgba(0,0,0,0.85);120  }121 122  /* Bottom small circular indicator */123  .bottom-indicator {124    position: absolute;125    left: 50%;126    bottom: 130px;127    transform: translateX(-50%);128    width: 44px;129    height: 44px;130    border-radius: 50%;131    box-sizing: border-box;132    border: 4px solid rgba(255,255,255,0.85);133    background:134      linear-gradient(#07B1E7, #07B1E7) padding-box;135  }136  .bottom-indicator:before {137    content: '';138    position: absolute;139    width: 52%;140    height: 52%;141    border: 4px solid #07B1E7; /* creates a small gap in the ring */142    border-radius: 50%;143    top: 23%;144    left: -4%;145    transform: rotate(25deg);146    box-sizing: border-box;147    border-right-color: rgba(255,255,255,0);148    border-top-color: rgba(255,255,255,0);149  }150</style>151</head>152<body>153<div id="render-target">154 155  <div class="status-bar"></div>156 157  <div class="toolbar">158    <!-- List icon -->159    <div class="tool-btn">160      <svg viewBox="0 0 24 24">161        <path d="M3 6h18M3 12h18M3 18h18"/>162      </svg>163    </div>164    <!-- Back arrow -->165    <div class="tool-btn">166      <svg viewBox="0 0 24 24">167        <path d="M15 5l-7 7 7 7"/>168      </svg>169    </div>170    <!-- Forward arrow -->171    <div class="tool-btn">172      <svg viewBox="0 0 24 24">173        <path d="M9 5l7 7-7 7"/>174      </svg>175    </div>176    <!-- Grid icon -->177    <div class="tool-btn">178      <svg viewBox="0 0 24 24">179        <rect x="3" y="3" width="6" height="6" />180        <rect x="15" y="3" width="6" height="6" />181        <rect x="3" y="15" width="6" height="6" />182        <rect x="15" y="15" width="6" height="6" />183      </svg>184    </div>185    <!-- Two nib tools -->186    <div class="tool-btn">187      <svg viewBox="0 0 24 24">188        <path d="M12 2l4 8-4 12-4-12z"/>189      </svg>190    </div>191    <div class="tool-btn">192      <svg viewBox="0 0 24 24">193        <path d="M12 2l6 9-6 11-6-11z"/>194      </svg>195    </div>196    <!-- Color wheel (simple multicolor circle) -->197    <div class="tool-btn" style="border: none; background: transparent;">198      <div style="width:72px;height:72px;border-radius:50%; background: conic-gradient(red, orange, yellow, green, cyan, blue, violet, red); border:4px solid #D6DADF;"></div>199    </div>200    <!-- Layers icon -->201    <div class="tool-btn">202      <svg viewBox="0 0 24 24">203        <path d="M3 9l9-5 9 5-9 5-9-5z"/>204        <path d="M3 14l9 5 9-5" />205      </svg>206    </div>207    <!-- Full screen/crop icon -->208    <div class="tool-btn">209      <svg viewBox="0 0 24 24">210        <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/>211      </svg>212    </div>213  </div>214 215  <!-- Dropdown menu -->216  <div class="menu-panel">217    <div class="menu-item" style="background:#EFEFEF;">218      <div class="menu-icon" style="background:#F7F7F7;">219        <svg viewBox="0 0 24 24">220          <path d="M15 4l-8 8 8 8"/>221        </svg>222      </div>223      <div style="font-weight:600;">Save</div>224    </div>225    <div class="menu-item">226      <div class="menu-icon">227        <svg viewBox="0 0 24 24">228          <rect x="3" y="7" width="18" height="12"/>229          <path d="M8 7V3h8v4"/>230        </svg>231      </div>232      <div>Save current sketch</div>233    </div>234    <div class="menu-item">235      <div class="menu-icon">236        <svg viewBox="0 0 24 24">237          <path d="M3 6h12l6 6v6H3z"/>238          <path d="M9 6v6h6"/>239        </svg>240      </div>241      <div>Export to Files</div>242    </div>243  </div>244 245  <!-- Central grid column -->246  <div class="grid-column"></div>247 248  <!-- Title -->249  <div class="title">ULM</div>250 251  <!-- Bottom indicator -->252  <div class="bottom-indicator"></div>253 254</div>255</body>256</html>