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>UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    position: relative;16    overflow: hidden;17    width: 1080px;18    height: 2400px;19    background: #ffffff;20  }21 22  /* Top black strip (status/header area) */23  .top-strip {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 160px;29    background: #000000;30  }31 32  /* Toolbar */33  .toolbar {34    position: absolute;35    top: 200px;36    left: 120px;37    width: 840px;38    height: 120px;39    background: #3f3f3f;40    border-radius: 8px;41    box-shadow: 0 6px 12px rgba(0,0,0,0.35);42    display: flex;43    align-items: center;44    padding: 0 24px;45    color: #ffffff;46    gap: 30px;47  }48  .icon {49    display: inline-flex;50    align-items: center;51    justify-content: center;52    width: 52px;53    height: 52px;54  }55  .text-icon {56    font-size: 44px;57    font-weight: 500;58    line-height: 1;59  }60  .divider {61    width: 2px;62    height: 70px;63    background: #2a2a2a;64    margin-left: 6px;65    margin-right: 6px;66  }67  .check {68    margin-left: auto;69    width: 52px;70    height: 52px;71  }72 73  /* Color wheel using conic gradient */74  .color-wheel {75    width: 52px;76    height: 52px;77    border-radius: 50%;78    background: conic-gradient(#ff3d00, #ffea00, #00e676, #00b0ff, #7c4dff, #ff3d00);79    border: 2px solid rgba(255,255,255,0.25);80    box-shadow: inset 0 0 0 4px rgba(0,0,0,0.15);81  }82 83  /* Purple outlined rectangle */84  .outlined-rect {85    position: absolute;86    left: 270px;87    top: 870px;88    width: 540px;89    height: 680px;90    border: 5px solid #8e8cf9;91    border-radius: 2px;92    box-shadow: 0 0 0 3px rgba(142,140,249,0.25);93    background: transparent;94  }95</style>96</head>97<body>98<div id="render-target">99  <div class="top-strip"></div>100 101  <div class="toolbar">102    <!-- Keyboard icon -->103    <div class="icon">104      <svg width="44" height="44" viewBox="0 0 44 44">105        <rect x="4" y="10" width="36" height="24" rx="4" fill="none" stroke="#fff" stroke-width="2"></rect>106        <!-- keys -->107        <g fill="#fff">108          <rect x="8" y="14" width="4" height="4" rx="1"></rect>109          <rect x="14" y="14" width="4" height="4" rx="1"></rect>110          <rect x="20" y="14" width="4" height="4" rx="1"></rect>111          <rect x="26" y="14" width="4" height="4" rx="1"></rect>112          <rect x="32" y="14" width="4" height="4" rx="1"></rect>113 114          <rect x="10" y="20" width="6" height="4" rx="1"></rect>115          <rect x="18" y="20" width="6" height="4" rx="1"></rect>116          <rect x="26" y="20" width="6" height="4" rx="1"></rect>117 118          <rect x="12" y="26" width="20" height="4" rx="2"></rect>119        </g>120      </svg>121    </div>122 123    <!-- Aa text -->124    <div class="text-icon">Aa</div>125 126    <!-- Color wheel -->127    <div class="color-wheel" aria-label="Color wheel"></div>128 129    <!-- Polygon nodes icon -->130    <div class="icon">131      <svg width="44" height="44" viewBox="0 0 44 44">132        <polygon points="14,30 22,12 30,30" fill="none" stroke="#fff" stroke-width="2"></polygon>133        <circle cx="14" cy="30" r="3" fill="#fff"></circle>134        <circle cx="22" cy="12" r="3" fill="#fff"></circle>135        <circle cx="30" cy="30" r="3" fill="#fff"></circle>136      </svg>137    </div>138 139    <!-- Circle/target icon -->140    <div class="icon">141      <svg width="44" height="44" viewBox="0 0 44 44">142        <circle cx="22" cy="22" r="12" fill="none" stroke="#fff" stroke-width="2"></circle>143        <circle cx="22" cy="22" r="4" fill="none" stroke="#fff" stroke-width="2"></circle>144      </svg>145    </div>146 147    <div class="divider"></div>148 149    <!-- Check icon -->150    <div class="check">151      <svg width="44" height="44" viewBox="0 0 44 44">152        <polyline points="10,24 18,30 32,14" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></polyline>153      </svg>154    </div>155  </div>156 157  <!-- Central purple outline rectangle -->158  <div class="outlined-rect"></div>159</div>160</body>161</html>