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">6<title>UI Rendering</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF;13    font-family: Arial, Helvetica, sans-serif;14  }15 16  /* Top black status/header bar */17  .status-bar {18    position: absolute; left: 0; top: 0;19    width: 100%; height: 130px;20    background: #000000;21  }22 23  /* Central canvas squares */24  .square.large {25    position: absolute; left: 260px; top: 980px;26    width: 440px; height: 440px; background: #000000;27  }28  .square.small {29    position: absolute; left: 700px; top: 1360px;30    width: 170px; height: 170px; background: #000000;31  }32 33  /* Purple tool bar above ad */34  .toolbar {35    position: absolute; left: 0; bottom: 220px;36    width: 100%; height: 180px;37    background: #8E3FD8;38    border-top: 3px solid rgba(0,0,0,0.15);39    box-shadow: 0 -4px 8px rgba(0,0,0,0.12);40    color: #FFFFFF;41  }42  .toolbar .icons {43    height: 100%; display: flex;44    justify-content: space-around; align-items: center;45    padding: 0 50px;46  }47  .icon { width: 90px; height: 90px; }48  .icon svg { width: 100%; height: 100%; stroke: #FFFFFF; fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }49 50  /* Bottom ad banner */51  .ad-banner {52    position: absolute; left: 0; bottom: 0;53    width: 100%; height: 220px;54    background: #FFFFFF; border-top: 2px solid #E0E0E0;55    display: flex; align-items: center; gap: 24px;56    padding: 20px 24px; box-sizing: border-box;57  }58  .ad-banner .left-img,59  .ad-banner .app-icon {60    display: flex; justify-content: center; align-items: center;61    color: #757575; background: #E0E0E0; border: 1px solid #BDBDBD;62  }63  .ad-banner .left-img { width: 280px; height: 180px; font-size: 26px; }64  .ad-banner .app-icon { width: 120px; height: 120px; font-size: 22px; border-radius: 24px; }65  .ad-banner .text { flex: 1; }66  .ad-banner .brand { font-size: 48px; font-weight: 700; line-height: 1; margin-bottom: 8px; }67  .ad-banner .sub { font-size: 34px; color: #333; display: flex; align-items: center; gap: 16px; }68  .rating { display: flex; align-items: center; gap: 8px; font-size: 32px; color: #444; }69  .open-btn {70    width: 200px; height: 88px; border-radius: 44px;71    background: #00C853; color: #FFFFFF; font-size: 36px; font-weight: 700;72    display: flex; align-items: center; justify-content: center;73  }74  .ad-banner .aux {75    position: absolute; left: 8px; bottom: 180px;76    display: flex; gap: 10px; color: #6E6E6E;77  }78  .ad-banner .chip {79    width: 36px; height: 36px; border-radius: 18px;80    border: 1px solid #BDBDBD; background: #F5F5F5;81    display: flex; align-items: center; justify-content: center; font-size: 22px;82  }83</style>84</head>85<body>86<div id="render-target">87 88  <div class="status-bar"></div>89 90  <!-- Central shapes -->91  <div class="square large"></div>92  <div class="square small"></div>93 94  <!-- Purple tools bar -->95  <div class="toolbar">96    <div class="icons">97      <!-- Color palette -->98      <div class="icon">99        <svg viewBox="0 0 100 100">100          <circle cx="50" cy="50" r="35"></circle>101        </svg>102      </div>103      <!-- Brush -->104      <div class="icon">105        <svg viewBox="0 0 100 100">106          <path d="M20 70 L60 30 L75 45 L35 85 Z"></path>107        </svg>108      </div>109      <!-- Eraser -->110      <div class="icon">111        <svg viewBox="0 0 100 100">112          <path d="M20 60 L45 35 L80 70 L55 95 Z"></path>113        </svg>114      </div>115      <!-- Shapes (square & circle) -->116      <div class="icon">117        <svg viewBox="0 0 100 100">118          <rect x="18" y="18" width="44" height="44" rx="4"></rect>119          <circle cx="76" cy="76" r="14"></circle>120        </svg>121      </div>122      <!-- Paint bucket -->123      <div class="icon">124        <svg viewBox="0 0 100 100">125          <path d="M35 20 L65 20 L80 35 L40 75 L20 55 Z"></path>126        </svg>127      </div>128      <!-- Undo -->129      <div class="icon">130        <svg viewBox="0 0 100 100">131          <path d="M60 30 Q35 30 35 55 L25 55 L40 75 L55 55 L45 55 Q45 40 60 40"></path>132        </svg>133      </div>134      <!-- Redo -->135      <div class="icon">136        <svg viewBox="0 0 100 100">137          <path d="M40 30 Q65 30 65 55 L75 55 L60 75 L45 55 L55 55 Q55 40 40 40"></path>138        </svg>139      </div>140      <!-- Pointer/hand -->141      <div class="icon">142        <svg viewBox="0 0 100 100">143          <path d="M30 80 L30 30 L75 60 L55 65 L60 85 Z"></path>144        </svg>145      </div>146      <!-- Fullscreen -->147      <div class="icon">148        <svg viewBox="0 0 100 100">149          <path d="M20 35 L35 20 M65 20 L80 35 M20 65 L35 80 M65 80 L80 65"></path>150        </svg>151      </div>152    </div>153  </div>154 155  <!-- Bottom ad banner -->156  <div class="ad-banner">157    <div class="aux">158      <div class="chip">i</div>159      <div class="chip">×</div>160    </div>161    <div class="left-img">[IMG: Ad Preview]</div>162    <div class="app-icon">[IMG: Booking App Icon]</div>163    <div class="text">164      <div class="brand">Booking</div>165      <div class="sub">166        <span>Booking.com</span>167        <div class="rating">168          <svg viewBox="0 0 24 24" width="28" height="28">169            <polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9" fill="#FBC02D"></polygon>170          </svg>171          <span>4.7</span>172          <span>FREE</span>173        </div>174      </div>175    </div>176    <div class="open-btn">Open</div>177  </div>178 179</div>180</body>181</html>