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; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF;13  }14  /* Top black status bar */15  .status-bar {16    position: absolute; top: 0; left: 0;17    width: 100%; height: 120px; background: #000;18  }19  /* Toolbar */20  .toolbar {21    position: absolute; top: 140px; left: 24px;22    width: 1032px; height: 120px;23    background: #F8F8F8; border: 1px solid #DADADA;24    border-radius: 12px; box-shadow: 0 2px 0 rgba(0,0,0,0.06);25    display: flex; align-items: center; padding: 0 18px; gap: 26px;26  }27  .tool-btn {28    width: 80px; height: 80px; border-radius: 8px;29    display: flex; align-items: center; justify-content: center;30  }31  .tool-btn svg { width: 44px; height: 44px; }32  .tool-btn.gray svg path, .tool-btn.gray svg rect, .tool-btn.gray svg circle, .tool-btn.gray svg polyline, .tool-btn.gray svg line { stroke: #606060; fill: none; stroke-width: 2.5; }33  .color-wheel svg circle { stroke-width: 10; fill: none; }34  /* Grid of tools */35  .tool-grid {36    position: absolute; top: 320px; left: 64px;37    width: 952px;38    display: grid; grid-template-columns: repeat(3, 300px); grid-auto-rows: 170px;39    gap: 26px;40  }41  .tile {42    background: #FFFFFF; border: 1px solid #DADADA; border-radius: 12px;43    display: flex; align-items: center; justify-content: center; flex-direction: column;44  }45  .tile svg { width: 50px; height: 50px; margin-bottom: 14px; }46  .tile .label { font-size: 28px; color: #333; }47  .tile svg * { stroke: #6B6B6B; fill: none; stroke-width: 2.5; }48  .tile.highlight {49    background: #DCE9FF; border: 2px solid #7FA9FF;50    box-shadow: inset 0 0 0 2px rgba(127,169,255,0.35);51  }52  /* Purple selection rectangle mimic */53  .selection-rect {54    position: absolute; left: 210px; top: 1000px;55    width: 600px; height: 520px;56    border: 3px solid #8F86FF; border-radius: 2px;57    box-shadow: 0 0 0 2px rgba(143,134,255,0.35);58  }59  /* Bottom faint spinner */60  .spinner {61    position: absolute; left: 520px; bottom: 160px;62    width: 40px; height: 40px; border-radius: 50%;63    border: 6px solid #E6E6E6; border-top-color: #BDBDBD;64  }65</style>66</head>67<body>68<div id="render-target">69  <div class="status-bar"></div>70 71  <!-- Top toolbar with icons -->72  <div class="toolbar">73    <!-- Menu/List -->74    <div class="tool-btn gray">75      <svg viewBox="0 0 48 48">76        <line x1="8" y1="12" x2="40" y2="12"></line>77        <line x1="8" y1="24" x2="40" y2="24"></line>78        <line x1="8" y1="36" x2="40" y2="36"></line>79      </svg>80    </div>81    <!-- Back -->82    <div class="tool-btn gray">83      <svg viewBox="0 0 48 48">84        <polyline points="30,10 16,24 30,38"></polyline>85      </svg>86    </div>87    <!-- Forward -->88    <div class="tool-btn gray">89      <svg viewBox="0 0 48 48">90        <polyline points="18,10 32,24 18,38"></polyline>91      </svg>92    </div>93    <!-- Grid -->94    <div class="tool-btn gray">95      <svg viewBox="0 0 48 48">96        <rect x="8" y="8" width="12" height="12"></rect>97        <rect x="28" y="8" width="12" height="12"></rect>98        <rect x="8" y="28" width="12" height="12"></rect>99        <rect x="28" y="28" width="12" height="12"></rect>100      </svg>101    </div>102    <!-- Two nibs -->103    <div class="tool-btn gray">104      <svg viewBox="0 0 48 48">105        <polygon points="12,8 20,8 16,24"></polygon>106        <polygon points="28,10 40,10 34,28"></polygon>107      </svg>108    </div>109    <!-- Color wheel -->110    <div class="tool-btn color-wheel">111      <svg viewBox="0 0 48 48">112        <defs>113          <linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">114            <stop offset="0%" stop-color="#FF5F5F"/>115            <stop offset="25%" stop-color="#FFA500"/>116            <stop offset="50%" stop-color="#3DDC97"/>117            <stop offset="75%" stop-color="#3B82F6"/>118            <stop offset="100%" stop-color="#8B5CF6"/>119          </linearGradient>120        </defs>121        <circle cx="24" cy="24" r="16" stroke="url(#grad)"></circle>122      </svg>123    </div>124    <!-- Layers -->125    <div class="tool-btn gray">126      <svg viewBox="0 0 48 48">127        <rect x="12" y="12" width="22" height="16"></rect>128        <rect x="16" y="18" width="22" height="16"></rect>129      </svg>130    </div>131    <!-- Fullscreen -->132    <div class="tool-btn gray">133      <svg viewBox="0 0 48 48">134        <polyline points="10,18 10,10 18,10"></polyline>135        <polyline points="30,10 38,10 38,18"></polyline>136        <polyline points="10,30 10,38 18,38"></polyline>137        <polyline points="30,38 38,38 38,30"></polyline>138      </svg>139    </div>140  </div>141 142  <!-- Tools grid -->143  <div class="tool-grid">144    <div class="tile">145      <svg viewBox="0 0 48 48">146        <rect x="10" y="10" width="28" height="28" stroke-dasharray="5 4"></rect>147      </svg>148      <div class="label">Selection</div>149    </div>150    <div class="tile">151      <svg viewBox="0 0 48 48">152        <polyline points="12,16 24,4 36,16"></polyline>153        <polyline points="36,32 24,44 12,32"></polyline>154        <line x1="24" y1="10" x2="24" y2="38"></line>155      </svg>156      <div class="label">Transform</div>157    </div>158    <div class="tile">159      <svg viewBox="0 0 48 48">160        <path d="M20 10 l10 8 -10 8 v-16"></path>161        <rect x="10" y="30" width="28" height="8"></rect>162      </svg>163      <div class="label">Fill</div>164    </div>165 166    <div class="tile">167      <svg viewBox="0 0 48 48">168        <line x1="10" y1="14" x2="38" y2="14"></line>169        <line x1="10" y1="24" x2="38" y2="24"></line>170        <line x1="10" y1="34" x2="38" y2="34"></line>171        <rect x="10" y="12" width="28" height="24"></rect>172      </svg>173      <div class="label">Guides</div>174    </div>175    <div class="tile">176      <svg viewBox="0 0 48 48">177        <path d="M12,36 C18,28 30,20 36,12"></path>178        <path d="M12,12 C18,20 30,28 36,36"></path>179      </svg>180      <div class="label">Symmetry</div>181    </div>182    <div class="tile highlight">183      <svg viewBox="0 0 48 48">184        <rect x="10" y="14" width="14" height="14"></rect>185        <circle cx="32" cy="28" r="8"></circle>186      </svg>187      <div class="label">Draw Styles</div>188    </div>189 190    <div class="tile">191      <svg viewBox="0 0 48 48">192        <path d="M10,30 Q18,20 28,26 T38,30"></path>193      </svg>194      <div class="label">Predictive Stroke</div>195    </div>196    <div class="tile">197      <svg viewBox="0 0 48 48">198        <rect x="10" y="12" width="22" height="18"></rect>199        <polyline points="34,18 40,18 40,24"></polyline>200        <line x1="40" y1="18" x2="34" y2="24"></line>201      </svg>202      <div class="label">Import Image</div>203    </div>204    <div class="tile">205      <svg viewBox="0 0 48 48">206        <polygon points="12,32 24,16 36,32"></polygon>207        <line x1="12" y1="32" x2="36" y2="32"></line>208      </svg>209      <div class="label">Perspective Guides</div>210    </div>211 212    <div class="tile">213      <svg viewBox="0 0 48 48">214        <line x1="18" y1="12" x2="30" y2="12"></line>215        <line x1="24" y1="12" x2="24" y2="36"></line>216      </svg>217      <div class="label">Text</div>218    </div>219    <div class="tile">220      <svg viewBox="0 0 48 48">221        <rect x="10" y="14" width="28" height="20"></rect>222        <circle cx="24" cy="24" r="4"></circle>223      </svg>224      <div class="label">Time-lapse</div>225    </div>226    <div class="tile">227      <svg viewBox="0 0 48 48">228        <rect x="8" y="8" width="32" height="32"></rect>229        <circle cx="24" cy="24" r="10"></circle>230        <line x1="24" y1="24" x2="24" y2="17"></line>231        <line x1="24" y1="24" x2="30" y2="24"></line>232      </svg>233      <div class="label">Auto Hide</div>234    </div>235  </div>236 237  <!-- Purple selection rectangle -->238  <div class="selection-rect"></div>239 240  <!-- Bottom faint spinner -->241  <div class="spinner"></div>242</div>243</body>244</html>