GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #333;17  }18 19  /* Top bars */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #000000;27  }28 29  .top-toolbar {30    position: absolute;31    top: 120px;32    left: 0;33    width: 1080px;34    height: 140px;35    background: #f7f7f7;36    box-shadow: 0 2px 10px rgba(0,0,0,0.15);37    display: flex;38    align-items: center;39    padding: 0 22px;40    box-sizing: border-box;41  }42 43  .top-toolbar .tool {44    width: 96px;45    height: 96px;46    margin-right: 22px;47    border-radius: 12px;48    display: flex;49    align-items: center;50    justify-content: center;51  }52 53  /* Floating dark tool palette */54  .floating-panel {55    position: absolute;56    top: 270px;57    left: 118px;58    width: 844px;59    height: 120px;60    background: #2f2f2f;61    border-radius: 8px;62    box-shadow: 0 10px 18px rgba(0,0,0,0.28);63    display: flex;64    align-items: center;65    padding: 0 24px;66    box-sizing: border-box;67  }68  .fp-item {69    height: 72px;70    min-width: 72px;71    color: #f0f0f0;72    display: flex;73    align-items: center;74    justify-content: center;75    margin-right: 26px;76  }77  .divider {78    width: 1px;79    height: 72px;80    background: #4b4b4b;81    margin-right: 26px;82  }83  .shape-square {84    border: 3px solid #2aa3ff;85    width: 62px;86    height: 62px;87    box-sizing: border-box;88    border-radius: 4px;89  }90 91  /* Canvas hint rectangle */92  .canvas-rect {93    position: absolute;94    top: 760px;95    left: 230px;96    width: 620px;97    height: 780px;98    border: 4px solid #7f85ff;99    box-shadow: 0 0 0 3px rgba(126, 136, 255, 0.25);100    background: transparent;101    border-radius: 2px;102  }103 104  /* Bottom subtle spinner */105  .spinner {106    position: absolute;107    bottom: 120px;108    left: 50%;109    transform: translateX(-50%);110    width: 58px;111    height: 58px;112    border-radius: 50%;113    border: 4px solid #e9e9e9;114    border-top-color: #cfcfcf;115    opacity: 0.6;116  }117 118  /* Simple utility for icon stroke */119  svg { display: block; }120</style>121</head>122<body>123<div id="render-target">124 125  <!-- Status bar (black) -->126  <div class="status-bar"></div>127 128  <!-- Top white toolbar -->129  <div class="top-toolbar">130    <!-- list/menu icon -->131    <div class="tool">132      <svg width="64" height="64" viewBox="0 0 24 24">133        <circle cx="3.5" cy="5" r="1.6" fill="#666"/>134        <circle cx="3.5" cy="12" r="1.6" fill="#666"/>135        <circle cx="3.5" cy="19" r="1.6" fill="#666"/>136        <rect x="7" y="4" width="14" height="2" fill="#666"/>137        <rect x="7" y="11" width="14" height="2" fill="#666"/>138        <rect x="7" y="18" width="14" height="2" fill="#666"/>139      </svg>140    </div>141 142    <!-- back arrow -->143    <div class="tool">144      <svg width="64" height="64" viewBox="0 0 24 24">145        <path d="M11 5L4 12l7 7" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>146        <path d="M20 12H5" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"/>147      </svg>148    </div>149 150    <!-- redo arrow -->151    <div class="tool">152      <svg width="64" height="64" viewBox="0 0 24 24">153        <path d="M16 7l5 5-5 5" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>154        <path d="M21 12H10a5 5 0 1 0 0 10" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"/>155      </svg>156    </div>157 158    <!-- grid -->159    <div class="tool">160      <svg width="64" height="64" viewBox="0 0 24 24">161        <rect x="3" y="3" width="6" height="6" fill="#666"/>162        <rect x="10.5" y="3" width="6" height="6" fill="#666"/>163        <rect x="18" y="3" width="3" height="6" fill="#666"/>164        <rect x="3" y="10.5" width="6" height="6" fill="#666"/>165        <rect x="10.5" y="10.5" width="6" height="6" fill="#666"/>166        <rect x="18" y="10.5" width="3" height="6" fill="#666"/>167        <rect x="3" y="18" width="6" height="3" fill="#666"/>168        <rect x="10.5" y="18" width="6" height="3" fill="#666"/>169        <rect x="18" y="18" width="3" height="3" fill="#666"/>170      </svg>171    </div>172 173    <!-- pen nib -->174    <div class="tool">175      <svg width="64" height="64" viewBox="0 0 24 24">176        <path d="M3 21l5-1 9-9-4-4-9 9-1 5z" fill="#666"/>177        <circle cx="14" cy="10" r="1.5" fill="#f7f7f7"/>178      </svg>179    </div>180 181    <!-- brush -->182    <div class="tool">183      <svg width="64" height="64" viewBox="0 0 24 24">184        <path d="M20 4l-2-2-9 9 4 4 9-9-2-2z" fill="#666"/>185        <path d="M4 17c0 2 1.5 3 3 3s3-1 3-3-1-3-3-3-3 1-3 3z" fill="#888"/>186      </svg>187    </div>188 189    <!-- color wheel -->190    <div class="tool">191      <svg width="64" height="64" viewBox="0 0 24 24">192        <defs>193          <radialGradient id="g" cx="50%" cy="50%" r="70%">194            <stop offset="0%" stop-color="#fff"/>195            <stop offset="60%" stop-color="#ff2a2a"/>196            <stop offset="75%" stop-color="#ffaa00"/>197            <stop offset="90%" stop-color="#22cc55"/>198            <stop offset="100%" stop-color="#3366ff"/>199          </radialGradient>200        </defs>201        <circle cx="12" cy="12" r="9" fill="url(#g)" stroke="#666" stroke-width="1"/>202      </svg>203    </div>204 205    <!-- layers -->206    <div class="tool">207      <svg width="64" height="64" viewBox="0 0 24 24">208        <path d="M12 3l9 5-9 5-9-5 9-5z" fill="#666"/>209        <path d="M21 13l-9 5-9-5" fill="none" stroke="#666" stroke-width="2" stroke-linejoin="round"/>210      </svg>211    </div>212 213    <!-- fullscreen icon -->214    <div class="tool">215      <svg width="64" height="64" viewBox="0 0 24 24">216        <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>217      </svg>218    </div>219  </div>220 221  <!-- Floating dark tool panel -->222  <div class="floating-panel">223    <!-- close X -->224    <div class="fp-item" title="Close">225      <svg width="38" height="38" viewBox="0 0 24 24">226        <path d="M5 5l14 14M19 5L5 19" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round"/>227      </svg>228    </div>229    <div class="divider"></div>230 231    <!-- slash / line tool -->232    <div class="fp-item" title="Line">233      <svg width="48" height="48" viewBox="0 0 24 24">234        <path d="M4 19L20 5" stroke="#f0f0f0" stroke-width="2.5" stroke-linecap="round"/>235      </svg>236    </div>237 238    <!-- circle tool -->239    <div class="fp-item" title="Circle">240      <svg width="48" height="48" viewBox="0 0 24 24">241        <circle cx="12" cy="12" r="7" fill="none" stroke="#f0f0f0" stroke-width="2.4"/>242      </svg>243    </div>244 245    <!-- square tool (selected) -->246    <div class="fp-item" title="Square">247      <div class="shape-square"></div>248    </div>249 250    <div class="divider"></div>251 252    <!-- dropdown caret -->253    <div class="fp-item" title="More">254      <svg width="36" height="36" viewBox="0 0 24 24">255        <path d="M6 9l6 6 6-6" fill="none" stroke="#f0f0f0" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>256      </svg>257    </div>258 259    <!-- align/line icon -->260    <div class="fp-item" title="Align">261      <svg width="48" height="48" viewBox="0 0 24 24">262        <rect x="4" y="11" width="16" height="2" fill="#f0f0f0"/>263      </svg>264    </div>265  </div>266 267  <!-- Canvas recta