GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Season Sale Poster</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: #000000;14  }15 16  /* Poster card */17  .poster {18    position: absolute;19    left: 36px;20    top: 360px;21    width: 1008px;22    height: 1680px;23    background: #863737;24    border: 14px solid #5e1a1a;25    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);26  }27 28  /* Subtle texture feel via layered gradients */29  .poster::before {30    content: "";31    position: absolute;32    inset: 0;33    background:34      linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%),35      radial-gradient(1000px 800px at 80% 30%, rgba(0,0,0,0.18), transparent 60%),36      radial-gradient(800px 600px at 20% 70%, rgba(0,0,0,0.15), transparent 60%);37    mix-blend-mode: multiply;38    pointer-events: none;39  }40 41  /* Left vertical band */42  .sideband {43    position: absolute;44    left: 0;45    top: 0;46    width: 170px;47    height: 100%;48    background: rgba(80, 9, 9, 0.65);49  }50 51  .side-text {52    position: absolute;53    left: 0;54    top: 40px;55    width: 170px;56    text-align: center;57    color: rgba(255,255,255,0.18);58    font-family: Arial, Helvetica, sans-serif;59    font-weight: 900;60    font-size: 170px;61    letter-spacing: 6px;62    line-height: 1.05;63    writing-mode: vertical-rl;64    transform: rotate(180deg);65  }66 67  /* Main content */68  .content {69    position: absolute;70    left: 170px;71    right: 0;72    top: 0;73    bottom: 0;74    padding: 120px 80px 160px;75    text-align: center;76    color: #ffffff;77    font-family: Arial, Helvetica, sans-serif;78  }79 80  .brand {81    margin: 40px auto 20px;82    width: 160px;83    height: 90px;84  }85 86  .starline {87    margin: 24px auto 34px;88    font-size: 26px;89    letter-spacing: 8px;90    font-weight: 700;91  }92  .starline .alt { color: #5e1a1a; }93  .starline .white { color: #ffffff; }94 95  .title-top {96    font-size: 72px;97    font-weight: 900;98    letter-spacing: 2px;99  }100 101  .title-sale {102    font-size: 180px;103    font-weight: 900;104    margin: 18px 0 12px;105    letter-spacing: 3px;106  }107 108  .title-flat {109    font-size: 94px;110    font-weight: 900;111    letter-spacing: 2px;112    margin: 6px 0 14px;113  }114 115  .subtitle {116    font-size: 46px;117    font-weight: 700;118    letter-spacing: 1px;119    opacity: 0.95;120    margin-bottom: 28px;121  }122 123  /* Bottom stamp/seal */124  .seal {125    position: absolute;126    right: 90px;127    bottom: 120px;128    width: 180px;129    height: 180px;130    border-radius: 50%;131    transform: rotate(-10deg);132    background: transparent;133  }134  .seal-ring {135    position: absolute;136    inset: 0;137    border: 6px solid #3d0f0f;138    border-radius: 50%;139    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);140  }141  .seal-inner {142    position: absolute;143    inset: 22px;144    border: 3px dashed #a66a6a;145    border-radius: 50%;146  }147  .seal-text {148    position: absolute;149    inset: 0;150    display: flex;151    align-items: center;152    justify-content: center;153    color: #ffffff;154    font-family: Arial, Helvetica, sans-serif;155    font-weight: 900;156    font-size: 44px;157    letter-spacing: 2px;158  }159  .seal-stars {160    position: absolute;161    bottom: 26px;162    width: 100%;163    text-align: center;164    color: #ffffff;165    font-size: 20px;166    letter-spacing: 6px;167  }168</style>169</head>170<body>171<div id="render-target">172  <div class="poster">173    <div class="sideband">174      <div class="side-text">SEASON SALE</div>175    </div>176 177    <div class="content">178      <!-- Simple brand mark -->179      <div class="brand">180        <svg width="160" height="90" viewBox="0 0 160 90" xmlns="http://www.w3.org/2000/svg">181          <g fill="#FFFFFF">182            <polygon points="15,60 75,60 65,75 5,75"/>183            <polygon points="65,40 125,40 115,55 55,55"/>184            <polygon points="115,20 155,20 145,35 105,35"/>185          </g>186        </svg>187      </div>188 189      <div class="starline">190        <span class="white">★</span><span class="alt">★</span>191        <span class="white">★</span><span class="alt">★</span>192        <span class="white">★</span><span class="alt">★</span>193        <span class="white">★</span><span class="alt">★</span>194        <span class="white">★</span><span class="alt">★</span>195        <span class="white">★</span>196      </div>197 198      <div class="title-top">END OF SEASON</div>199      <div class="title-sale">SALE</div>200      <div class="title-flat">FLAT 30% OFF</div>201      <div class="subtitle">EXTRA 20% ON ₹4499</div>202 203      <div class="starline">204        <span class="white">★</span><span class="alt">★</span>205        <span class="white">★</span><span class="alt">★</span>206        <span class="white">★</span><span class="alt">★</span>207        <span class="white">★</span><span class="alt">★</span>208        <span class="white">★</span><span class="alt">★</span>209        <span class="white">★</span>210      </div>211    </div>212 213    <!-- Stamp -->214    <div class="seal">215      <div class="seal-ring"></div>216      <div class="seal-inner"></div>217      <div class="seal-text">SALE</div>218      <div class="seal-stars">★ ★ ★</div>219    </div>220  </div>221</div>222</body>223</html>