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 { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    font-family: Arial, Helvetica, sans-serif;16  }17 18  /* Floating toolbar */19  .toolbar {20    position: absolute;21    top: 120px;22    left: 30px;23    width: 1020px;24    height: 140px;25    background: #ddd;26    border-radius: 6px;27    box-shadow: 0 2px 0 rgba(0,0,0,0.2);28    display: flex;29    align-items: center;30    padding: 0 24px;31    gap: 36px;32  }33  .icon {34    width: 80px;35    height: 80px;36    display: flex;37    justify-content: center;38    align-items: center;39  }40  .icon svg { width: 70px; height: 70px; }41  .icon .muted { stroke: #bcbcbc; fill: none; }42  .icon .primary { stroke: #666; fill: none; }43  .color-wheel {44    width: 70px;45    height: 70px;46    border-radius: 50%;47    background: conic-gradient(red, #ff0, #0f0, cyan, #00f, magenta, red);48    box-shadow: inset 0 0 0 4px #ddd;49  }50  .layers svg { width: 76px; height: 60px; }51 52  /* Canvas glow */53  .glow {54    position: absolute;55    left: 60px;56    top: 1180px;57    width: 900px;58    height: 900px;59    border-radius: 50%;60    background: radial-gradient(circle at 45% 45%, #fff 0%, #cfcfcf 28%, #8d8d8d 48%, #424242 70%, #141414 86%, #000 100%);61    filter: blur(2px);62  }63 64  /* Title text */65  .title {66    position: absolute;67    top: 1480px;68    left: 90px;69    font-size: 160px;70    font-weight: 500;71    color: #000;72    letter-spacing: 2px;73    text-shadow: 3px 3px 0 rgba(0,0,0,0.35);74    white-space: nowrap;75  }76 77  /* Bottom small circle */78  .reload {79    position: absolute;80    left: 518px;81    top: 2210px;82    width: 44px;83    height: 44px;84    border-radius: 50%;85    border: 6px solid #9e9e9e;86    box-shadow: 0 0 14px rgba(0,0,0,0.6) inset;87  }88  .reload::after {89    content: "";90    position: absolute;91    width: 16px;92    height: 6px;93    background: #000;94    top: 19px;95    left: -6px;96    transform: rotate(30deg);97  }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Toolbar -->104  <div class="toolbar">105    <!-- List icon -->106    <div class="icon">107      <svg viewBox="0 0 64 64">108        <rect x="8" y="8" width="48" height="48" rx="6" class="primary" stroke-width="3"/>109        <line x1="16" y1="22" x2="48" y2="22" class="primary" stroke-width="4"/>110        <line x1="16" y1="32" x2="48" y2="32" class="primary" stroke-width="4"/>111        <line x1="16" y1="42" x2="48" y2="42" class="primary" stroke-width="4"/>112      </svg>113    </div>114 115    <!-- Back arrow -->116    <div class="icon">117      <svg viewBox="0 0 64 64">118        <path d="M42 16 L22 32 L42 48" class="primary" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>119      </svg>120    </div>121 122    <!-- Forward arrow (muted) -->123    <div class="icon">124      <svg viewBox="0 0 64 64">125        <path d="M22 16 L42 32 L22 48" class="muted" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>126      </svg>127    </div>128 129    <!-- Grid -->130    <div class="icon">131      <svg viewBox="0 0 64 64">132        <rect x="10" y="10" width="44" height="44" class="primary" stroke-width="3"/>133        <line x1="21.5" y1="10" x2="21.5" y2="54" class="primary" stroke-width="3"/>134        <line x1="32" y1="10" x2="32" y2="54" class="primary" stroke-width="3"/>135        <line x1="42.5" y1="10" x2="42.5" y2="54" class="primary" stroke-width="3"/>136        <line x1="10" y1="21.5" x2="54" y2="21.5" class="primary" stroke-width="3"/>137        <line x1="10" y1="32" x2="54" y2="32" class="primary" stroke-width="3"/>138        <line x1="10" y1="42.5" x2="54" y2="42.5" class="primary" stroke-width="3"/>139      </svg>140    </div>141 142    <!-- Pen 1 -->143    <div class="icon">144      <svg viewBox="0 0 64 64">145        <path d="M20 48 L32 16 L44 48" class="primary" stroke-width="4" fill="none"/>146        <circle cx="32" cy="40" r="2.5" fill="#666"/>147      </svg>148    </div>149 150    <!-- Pen 2 -->151    <div class="icon">152      <svg viewBox="0 0 64 64">153        <path d="M24 50 L32 18 L40 50" class="primary" stroke-width="4" fill="none"/>154        <rect x="28" y="44" width="8" height="5" fill="#666"/>155      </svg>156    </div>157 158    <!-- Color wheel -->159    <div class="icon">160      <div class="color-wheel"></div>161    </div>162 163    <!-- Layers -->164    <div class="icon layers">165      <svg viewBox="0 0 80 64">166        <polygon points="20,22 40,12 60,22 40,32" fill="#777"/>167        <polygon points="20,38 40,28 60,38 40,48" fill="#9a9a9a"/>168      </svg>169    </div>170 171    <!-- Fullscreen corners -->172    <div class="icon">173      <svg viewBox="0 0 64 64">174        <path d="M12 26 L12 12 L26 12" class="primary" stroke-width="4" stroke-linecap="round"/>175        <path d="M38 12 L52 12 L52 26" class="primary" stroke-width="4" stroke-linecap="round"/>176        <path d="M12 38 L12 52 L26 52" class="primary" stroke-width="4" stroke-linecap="round"/>177        <path d="M38 52 L52 52 L52 38" class="primary" stroke-width="4" stroke-linecap="round"/>178      </svg>179    </div>180  </div>181 182  <!-- Glow area on canvas -->183  <div class="glow"></div>184 185  <!-- Title -->186  <div class="title">Maria Rossi</div>187 188  <!-- Bottom small circle -->189  <div class="reload"></div>190 191</div>192</body>193</html>