GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=device-width, initial-scale=1.0"/>6<title>Toolbar UI Mock</title>7<style>8  body{9    margin:0;10    padding:0;11    background:transparent;12    font-family: Arial, Helvetica, sans-serif;13    color:#222;14  }15  #render-target{16    width:1080px;17    height:2400px;18    position:relative;19    overflow:hidden;20    background:#ffffff;21  }22 23  /* Top toolbar */24  .toolbar{25    position:absolute;26    left:20px;27    right:20px;28    top:24px;29    height:180px;30    border:10px solid #6A35FF;31    border-radius:24px;32    background:#ffffff;33    display:flex;34    align-items:center;35    padding:14px;36    box-sizing:border-box;37    overflow:hidden;38  }39  .tool-row{40    display:flex;41    gap:16px;42    width:100%;43    align-items:stretch;44  }45  .tool{46    width:125px;47    height:140px;48    border:1px solid #DADADA;49    background:#FAFAFA;50    border-radius:22px;51    box-shadow:0 1px 0 rgba(0,0,0,0.05) inset;52    display:flex;53    flex-direction:column;54    align-items:center;55    justify-content:center;56  }57  .tool .icon-circle{58    width:86px;59    height:86px;60    border-radius:50%;61    background:#D84A2A; /* orange-red */62    color:#fff;63    display:flex;64    align-items:center;65    justify-content:center;66    position:relative;67    box-shadow:0 2px 6px rgba(0,0,0,0.15);68  }69  .tool .label{70    margin-top:6px;71    font-size:22px;72    letter-spacing:0.5px;73    color:#222;74  }75  /* Placeholder inside a tool for images */76  .img-placeholder{77    width:70px;78    height:70px;79    background:#E0E0E0;80    border:1px solid #BDBDBD;81    border-radius:10px;82    display:flex;83    align-items:center;84    justify-content:center;85    color:#757575;86    font-size:16px;87    text-align:center;88    line-height:1.1;89    padding:6px;90  }91 92  /* Right floating action buttons */93  .fab-stack{94    position:absolute;95    right:54px;96    top:1050px;97    display:flex;98    flex-direction:column;99    gap:46px;100    align-items:center;101  }102  .fab{103    width:132px;104    height:132px;105    background:#D84A2A;106    border-radius:50%;107    box-shadow:0 6px 12px rgba(0,0,0,0.25);108    display:flex;109    flex-direction:column;110    align-items:center;111    justify-content:center;112    color:#fff;113  }114  .fab .fab-label{115    margin-top:6px;116    font-size:26px;117    font-weight:600;118  }119  /* Bottom gesture bar */120  .gesture-bar{121    position:absolute;122    bottom:24px;123    left:50%;124    transform:translateX(-50%);125    width:220px;126    height:10px;127    border-radius:6px;128    background:#D8D8D8;129  }130  /* Helper text sizes similar to screenshot */131  .big-letter{132    font-size:52px;133    font-weight:800;134  }135  .italic-letter{136    font-size:52px;137    font-style:italic;138    font-weight:700;139  }140  .underline-container{141    display:flex;142    flex-direction:column;143    align-items:center;144    gap:4px;145  }146  .underline-bar{147    width:48px;148    height:6px;149    background:#fff;150    border-radius:3px;151    opacity:0.95;152  }153  /* Simple line icon in circle */154  .line-icon{155    width:56px;156    height:6px;157    background:#fff;158    border-radius:3px;159  }160 161  /* SVG icons unify size */162  .ico{163    width:54px;164    height:54px;165    display:block;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Top toolbar -->173  <div class="toolbar">174    <div class="tool-row">175 176      <!-- UNDO -->177      <div class="tool">178        <div class="icon-circle" aria-label="Undo">179          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">180            <path d="M7 8L3 12l4 4"/>181            <path d="M4 12h9a5 5 0 1 1 0 10" />182          </svg>183        </div>184        <div class="label">UNDO</div>185      </div>186 187      <!-- REDO -->188      <div class="tool">189        <div class="icon-circle" aria-label="Redo">190          <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">191            <path d="M17 8l4 4-4 4"/>192            <path d="M20 12H11a5 5 0 1 0 0 10"/>193          </svg>194        </div>195        <div class="label">REDO</div>196      </div>197 198      <!-- Logo / Sign -->199      <div class="tool">200        <div class="icon-circle" aria-label="Logo or Sign">201          <div class="img-placeholder">[IMG: Logo / Sign]</div>202        </div>203        <div class="label">Logo / Sign</div>204      </div>205 206      <!-- Bold -->207      <div class="tool">208        <div class="icon-circle" aria-label="Bold">209          <span class="big-letter">B</span>210        </div>211        <div class="label">BOLD</div>212      </div>213 214      <!-- Italic -->215      <div class="tool">216        <div class="icon-circle" aria-label="Italic">217          <span class="italic-letter">I</span>218        </div>219        <div class="label">ITALIC</div>220      </div>221 222      <!-- Underline -->223      <div class="tool">224        <div class="icon-circle" aria-label="Underline">225          <div class="underline-container">226            <span class="big-letter" style="line-height:36px">U</span>227            <div class="underline-bar"></div>228          </div>229        </div>230        <div class="label">UNDERLINE</div>231      </div>232 233      <!-- Line -->234      <div class="tool">235        <div class="icon-circle" aria-label="Line">236          <div class="line-icon"></div>237        </div>238        <div class="label">LINE</div>239      </div>240 241      <!-- Line (Second) -->242      <div class="tool">243        <div class="icon-circle" aria-label="Line 2">244          <div class="line-icon" style="width:38px"></div>245        </div>246        <div class="label">LINE</div>247      </div>248 249    </div>250  </div>251 252  <!-- Floating action buttons on right -->253  <div class="fab-stack">254 255    <div class="fab" aria-label="Print">256      <svg viewBox="0 0 24 24" class="ico" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">257        <path d="M6 9H4a2 2 0 0 0-2 2v5h4"/>258        <rect x="6" y="14" width="12" height="6" rx="1" ry="1"/>259        <path d="M18 9h2a2 2 0 0 1 2 2v5h-4"/>260        <rect x="7" y="3" width="10" height="6" rx="1" ry="1"/>261      </svg>262      <div class="fab-label">Print</div>263    </div>264 265    <div class="fab" aria-label="Notes">266      <svg viewBox="0 0 24 24" class="ico" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">267        <rect x="4" y="3" width="16" height="18" rx="2"/>268        <path d="M8 8h8M8 12h6M8 16h4"/>269      </svg>270      <div class="fab-label">Notes</div>271    </div>272 273    <div class="fab" aria-label="Files">274      <svg viewBox="0 0 24 24" class="ico" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">275        <path d="M4 7h6l2 2h8v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/>276        <path d="M4 7V5a2 2 0 0 1 2-2h6l2 2"/>277      </svg>278      <div class="fab-label">Files</div>279    </div>280 281    <div class="fab" aria-label="Save">282      <svg viewBox="0 0 24 24" class="ico" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">283        <path d="M5 21h14a2 2 0 0 0 2-2V8l-5-5H7a2 2 0 0 0-2 2z"/>284        <path d="M12 17v-6M9 14l3 3 3-3"/>285      </svg>286      <div class="fab-label">Save</div>287    </div>288 289    <div class="fab" aria-label="Menu">290      <svg viewBox="0 0 24 24" class="ico" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round">291        <path d="M6 7h12M6 12h12M6 17h12"/>292      </svg>293    </div>294 295  </div>296 297  <!-- Bottom gesture bar -->298  <div class="gesture-bar"></div>299 300</div>301</body>302</html>