GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Drawing UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top toolbar */17  .topbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #f6f6f6;24    border-bottom: 1px solid #dcdcdc;25    display: flex;26    align-items: center;27    padding: 0 36px;28    gap: 40px;29  }30  .icon {31    width: 64px;32    height: 64px;33    display: inline-flex;34    align-items: center;35    justify-content: center;36  }37  .icon svg {38    width: 48px;39    height: 48px;40    stroke: #6f6f6f;41    fill: none;42    stroke-width: 3.5;43    stroke-linecap: round;44    stroke-linejoin: round;45  }46  .icon .filled { fill: #6f6f6f; stroke: none; }47  .color-wheel {48    width: 54px; height: 54px; border-radius: 50%;49    background: conic-gradient(#ff3b30, #ffcc00, #34c759, #0a84ff, #af52de, #ff3b30);50    border: 3px solid #e6e6e6;51  }52 53  /* Floating options bar */54  .tool-overlay {55    position: absolute;56    top: 150px;57    left: 100px;58    width: 880px;59    height: 120px;60    background: #2f2f30;61    border-radius: 8px;62    display: flex;63    align-items: center;64    padding: 0 24px;65    gap: 28px;66    box-shadow: 0 2px 8px rgba(0,0,0,0.25);67  }68  .tool-overlay .spacer { flex: 1; }69  .tool-btn {70    width: 72px; height: 72px;71    display: flex; align-items: center; justify-content: center;72    border-radius: 6px;73  }74  .tool-btn svg { width: 44px; height: 44px; stroke: #eaeaea; fill: none; stroke-width: 4; }75  .sample {76    width: 92px; height: 64px; border-radius: 6px;77    border: 2px solid #cfcfcf;78    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);79  }80  .sample.flat { background: #ffffff; }81  .sample.grad { background: linear-gradient(90deg, #2d5ac4, #6aa8ff); border-color: #6aa8ff; outline: 4px solid rgba(255,255,255,0.2); }82  .sample.shadow { background: radial-gradient(#1e1e1e, #000); }83  .confirm {84    width: 78px; height: 78px; border-radius: 8px;85    border: 2px solid #5bd06b;86    display: flex; align-items: center; justify-content: center;87  }88  .confirm svg { width: 44px; height: 44px; stroke: #5bd06b; stroke-width: 6; }89 90  /* Canvas and red rectangle */91  .canvas {92    position: absolute;93    top: 120px;94    left: 0;95    right: 0;96    bottom: 0;97    background: #ffffff;98  }99  .red-rect {100    position: absolute;101    left: 215px;102    top: 760px;103    width: 650px;104    height: 1120px;105    background: #c7323a;106    border: 4px solid rgba(200, 50, 58, 0.35);107    box-shadow: 0 0 0 6px rgba(215, 93, 100, 0.25) inset;108    border-radius: 2px;109  }110 111  /* Bottom subtle loader circle */112  .loader {113    position: absolute;114    left: 50%;115    bottom: 140px;116    transform: translateX(-50%);117    width: 52px; height: 52px;118    border-radius: 50%;119    border: 5px solid #e0e0e0;120    border-top-color: #cfcfcf;121    opacity: 0.65;122  }123</style>124</head>125<body>126<div id="render-target">127 128  <!-- Top light toolbar -->129  <div class="topbar">130    <!-- List/menu -->131    <div class="icon">132      <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></svg>133    </div>134    <!-- Back -->135    <div class="icon">136      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>137    </div>138    <!-- Redo -->139    <div class="icon">140      <svg viewBox="0 0 24 24"><path d="M9 6h6l-2-2m2 2l-2 2M5 18a7 7 0 019-10"/></svg>141    </div>142    <!-- Grid -->143    <div class="icon">144      <svg viewBox="0 0 24 24"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/></svg>145    </div>146    <!-- Pen 1 -->147    <div class="icon">148      <svg viewBox="0 0 24 24"><path d="M3 21l3-9 9-9 3 3-9 9-9 3zM14 5l3 3"/></svg>149    </div>150    <!-- Pen 2 -->151    <div class="icon">152      <svg viewBox="0 0 24 24"><path d="M4 20l4-1 10-10-3-3L5 16l-1 4z"/></svg>153    </div>154    <!-- Color wheel -->155    <div class="icon"><div class="color-wheel"></div></div>156    <!-- Layers -->157    <div class="icon">158      <svg viewBox="0 0 24 24"><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 12l9 5 9-5"/><path d="M3 16l9 5 9-5"/></svg>159    </div>160    <!-- Fullscreen-ish -->161    <div class="icon">162      <svg viewBox="0 0 24 24"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg>163    </div>164  </div>165 166  <!-- Floating dark options bar -->167  <div class="tool-overlay">168    <!-- Close -->169    <div class="tool-btn">170      <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>171    </div>172 173    <div class="sample flat"></div>174    <div class="sample grad"></div>175    <div class="sample shadow"></div>176 177    <!-- Sun/brightness -->178    <div class="tool-btn">179      <svg viewBox="0 0 24 24">180        <circle cx="12" cy="12" r="4" stroke="#eaeaea" fill="none"/>181        <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1" />182      </svg>183    </div>184 185    <div class="spacer"></div>186 187    <!-- Confirm -->188    <div class="confirm">189      <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10"/></svg>190    </div>191  </div>192 193  <!-- Canvas area -->194  <div class="canvas">195    <div class="red-rect"></div>196  </div>197 198  <!-- Subtle loader / center mark -->199  <div class="loader"></div>200</div>201</body>202</html>