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>Red Canvas Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19  }20 21  /* Top toolbar */22  .topbar {23    position: absolute;24    left: 24px;25    right: 24px;26    top: 24px;27    height: 120px;28    background: #fafafa;29    border-radius: 10px;30    box-shadow: 0 0 0 1px #e6e6e6 inset;31    display: flex;32    align-items: center;33    padding: 0 22px;34    gap: 38px;35  }36  .icon {37    width: 86px;38    height: 86px;39    display: inline-flex;40    align-items: center;41    justify-content: center;42    border-radius: 12px;43  }44  .icon svg {45    width: 54px;46    height: 54px;47    stroke: #777;48    fill: none;49    stroke-width: 3.5;50    stroke-linecap: round;51    stroke-linejoin: round;52  }53 54  /* Red rectangle on canvas */55  .red-rect {56    position: absolute;57    left: 215px;58    top: 720px;59    width: 650px;60    height: 980px;61    background: #c8313a;62    box-shadow:63      0 0 0 4px rgba(255,255,255,0.35) inset,64      0 0 0 2px rgba(170, 31, 39, 0.4);65    border-radius: 2px;66  }67 68  /* Subtle loader hint at bottom center */69  .loader {70    position: absolute;71    left: 50%;72    transform: translateX(-50%);73    bottom: 330px;74    width: 52px;75    height: 52px;76    border-radius: 50%;77    border: 4px solid #E0E0E0;78    border-top-color: #CFCFCF;79    opacity: 0.8;80  }81</style>82</head>83<body>84<div id="render-target">85  <!-- Top tools bar -->86  <div class="topbar">87    <!-- Menu (list) -->88    <div class="icon">89      <svg viewBox="0 0 24 24">90        <path d="M3 6h18M3 12h14M3 18h10"/>91      </svg>92    </div>93    <!-- Back arrow -->94    <div class="icon">95      <svg viewBox="0 0 24 24">96        <path d="M15 5l-7 7 7 7"/>97      </svg>98    </div>99    <!-- Redo arrow -->100    <div class="icon">101      <svg viewBox="0 0 24 24">102        <path d="M9 6h6l-2-2M15 6a7 7 0 1 1-7 7"/>103      </svg>104    </div>105    <!-- Grid icon -->106    <div class="icon">107      <svg viewBox="0 0 24 24">108        <rect x="3" y="3" width="6" height="6"/>109        <rect x="9" y="3" width="6" height="6"/>110        <rect x="15" y="3" width="6" height="6"/>111        <rect x="3" y="9" width="6" height="6"/>112        <rect x="9" y="9" width="6" height="6"/>113        <rect x="15" y="9" width="6" height="6"/>114      </svg>115    </div>116    <!-- Pen nib -->117    <div class="icon">118      <svg viewBox="0 0 24 24">119        <path d="M12 2l5 8-5 12-5-12 5-8z"/>120        <circle cx="12" cy="11" r="1.3" fill="#777" stroke="none"/>121      </svg>122    </div>123    <!-- Color wheel (ring) -->124    <div class="icon">125      <svg viewBox="0 0 24 24">126        <circle cx="12" cy="12" r="8"/>127        <circle cx="12" cy="12" r="4" />128      </svg>129    </div>130    <!-- Layers -->131    <div class="icon">132      <svg viewBox="0 0 24 24">133        <path d="M12 4l8 4-8 4-8-4 8-4zM4 12l8 4 8-4M4 16l8 4 8-4"/>134      </svg>135    </div>136    <!-- Frame / crop -->137    <div class="icon">138      <svg viewBox="0 0 24 24">139        <path d="M7 5h-2v6M5 7v-2h6M17 19h2v-6M19 17v2h-6"/>140      </svg>141    </div>142  </div>143 144  <!-- Main red rectangle -->145  <div class="red-rect"></div>146 147  <!-- Subtle loader indicator -->148  <div class="loader"></div>149</div>150</body>151</html>