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>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #111;16  }17 18  /* Top black area */19  .top-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 130px;25    background: #000000;26  }27 28  /* Central framed box */29  .center-frame {30    position: absolute;31    left: 165px;32    top: 740px;33    width: 750px;34    height: 950px;35    border: 50px solid #000;36    box-sizing: content-box;37    background: #fff;38  }39  .frame-text {40    position: absolute;41    top: 30px;42    left: 60px;43    font-size: 56px;44    line-height: 1.2;45    color: #111;46  }47 48  /* Footer toolbar */49  .footer {50    position: absolute;51    bottom: 0;52    left: 0;53    width: 1080px;54    height: 230px;55    background: #7E35CD; /* vibrant purple */56  }57  .tools {58    position: absolute;59    top: 40px;60    left: 60px;61    right: 60px;62    display: flex;63    justify-content: space-between;64    align-items: center;65  }66  .icon {67    width: 90px;68    height: 90px;69  }70  .icon svg {71    width: 100%;72    height: 100%;73    stroke: #ffffff;74    fill: none;75    stroke-width: 6;76    stroke-linecap: round;77    stroke-linejoin: round;78  }79 80  /* Ad banner inside footer */81  .ad-card {82    position: absolute;83    left: 24px;84    right: 24px;85    bottom: 16px;86    height: 120px;87    background: #ffffff;88    border-radius: 22px;89    display: flex;90    align-items: center;91    padding: 0 24px;92    box-sizing: border-box;93  }94  .ad-img {95    width: 110px;96    height: 110px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    border-radius: 22px;100    display: flex;101    justify-content: center;102    align-items: center;103    color: #757575;104    font-size: 22px;105  }106  .ad-info {107    margin-left: 20px;108    flex: 1;109  }110  .ad-title {111    font-size: 40px;112    color: #111;113  }114  .ad-sub {115    font-size: 28px;116    color: #2F9E44; /* installed green */117    margin-top: 6px;118  }119  .ad-btn {120    background: #2FA56C;121    color: #fff;122    font-size: 36px;123    padding: 12px 36px;124    border-radius: 28px;125    border: none;126  }127 128  /* Home indicator */129  .home-indicator {130    position: absolute;131    bottom: 260px;132    left: 50%;133    transform: translateX(-50%);134    width: 240px;135    height: 12px;136    background: #C9C9C9;137    border-radius: 6px;138  }139</style>140</head>141<body>142<div id="render-target">143  <div class="top-bar"></div>144 145  <div class="center-frame">146    <div class="frame-text">I have to do it</div>147  </div>148 149  <div class="footer">150    <div class="tools">151      <!-- Palette icon -->152      <div class="icon">153        <svg viewBox="0 0 100 100">154          <circle cx="50" cy="50" r="32"></circle>155          <circle cx="35" cy="40" r="5" fill="#fff" stroke="none"></circle>156          <circle cx="65" cy="40" r="5" fill="#fff" stroke="none"></circle>157          <circle cx="40" cy="65" r="5" fill="#fff" stroke="none"></circle>158        </svg>159      </div>160      <!-- Brush icon -->161      <div class="icon">162        <svg viewBox="0 0 100 100">163          <path d="M20 70c10 0 16-6 18-12l36-36-12-12-36 36c-6 2-12 8-12 18z"></path>164          <path d="M64 22l14 14"></path>165        </svg>166      </div>167      <!-- Eraser icon -->168      <div class="icon">169        <svg viewBox="0 0 100 100">170          <path d="M20 60l26-26c4-4 10-4 14 0l20 20-26 26H30L20 70z"></path>171          <path d="M58 80h22"></path>172        </svg>173      </div>174      <!-- Square/select icon -->175      <div class="icon">176        <svg viewBox="0 0 100 100">177          <rect x="25" y="25" width="50" height="50"></rect>178        </svg>179      </div>180      <!-- Drop icon -->181      <div class="icon">182        <svg viewBox="0 0 100 100">183          <path d="M50 18c-10 14-20 26-20 38a20 20 0 0 0 40 0c0-12-10-24-20-38z"></path>184        </svg>185      </div>186      <!-- Undo icon -->187      <div class="icon">188        <svg viewBox="0 0 100 100">189          <path d="M34 30l-18 18 18 18"></path>190          <path d="M86 66c0-18-14-32-32-32H28"></path>191        </svg>192      </div>193      <!-- Redo icon -->194      <div class="icon">195        <svg viewBox="0 0 100 100">196          <path d="M66 30l18 18-18 18"></path>197          <path d="M14 66c0-18 14-32 32-32h26"></path>198        </svg>199      </div>200    </div>201 202    <div class="ad-card">203      <div class="ad-img">[IMG: Facebook]</div>204      <div class="ad-info">205        <div class="ad-title">Facebook</div>206        <div class="ad-sub">Installed</div>207      </div>208      <button class="ad-btn">Open</button>209    </div>210  </div>211 212  <div class="home-indicator"></div>213</div>214</body>215</html>