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>Free Delivery Banner</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #d60b4d; /* deep pink/red background */15  }16 17  /* Status bar */18  .statusbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    padding: 0 36px;25    color: #fff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    box-sizing: border-box;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 22px;35  }36  .time {37    font-weight: 700;38    font-size: 56px;39    letter-spacing: 1px;40  }41  .icon {42    width: 44px;43    height: 44px;44    display: inline-flex;45    align-items: center;46    justify-content: center;47  }48  .status-right {49    display: flex;50    align-items: center;51    gap: 18px;52    font-weight: 700;53    font-size: 40px;54  }55 56  /* Hero section */57  .hero {58    position: absolute;59    top: 560px;60    left: 70px;61    right: 70px;62    display: flex;63    align-items: center;64    gap: 40px;65  }66  .illustration {67    width: 520px;68    height: 900px;69    background: #E0E0E0;70    border: 1px solid #BDBDBD;71    color: #757575;72    display: flex;73    align-items: center;74    justify-content: center;75    text-align: center;76    padding: 16px;77    box-sizing: border-box;78    border-radius: 8px;79  }80  .copy {81    color: #fff;82    margin-left: 24px;83  }84  .headline {85    font-size: 156px;86    line-height: 0.95;87    font-weight: 800;88    margin: 0 0 24px 0;89  }90  .subhead {91    font-size: 96px;92    line-height: 1.05;93    font-weight: 500;94    margin: 0;95    letter-spacing: 0.5px;96  }97 98  /* Bottom gesture bar */99  .bottom-bar {100    position: absolute;101    bottom: 0;102    left: 0;103    width: 1080px;104    height: 120px;105    background: rgba(0,0,0,0.9);106  }107  .home-pill {108    position: absolute;109    left: 50%;110    bottom: 34px;111    transform: translateX(-50%);112    width: 300px;113    height: 12px;114    background: #eaeaea;115    border-radius: 8px;116  }117 118  /* Make sure text block stays on the right visually like screenshot */119  .hero { justify-content: flex-start; }120</style>121</head>122<body>123  <div id="render-target">124    <!-- Status Bar -->125    <div class="statusbar">126      <div class="status-left">127        <div class="time">9:45</div>128        <!-- Light bulb icon -->129        <div class="icon">130          <svg width="36" height="36" viewBox="0 0 24 24" fill="none">131            <path d="M12 2a6 6 0 0 0-3.6 10.8c.3.2.6.7.6 1.1V15h6v-1.1c0-.4.3-.9.6-1.1A6 6 0 0 0 12 2z" fill="#fff"/>132            <rect x="9" y="16" width="6" height="2" rx="1" fill="#fff"/>133            <rect x="10" y="19" width="4" height="2" rx="1" fill="#fff"/>134          </svg>135        </div>136        <!-- Cloud icon -->137        <div class="icon">138          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">139            <path d="M6 18a4 4 0 1 1 0-8c.5 0 1 .1 1.4.3A5 5 0 0 1 17 11a3.5 3.5 0 1 1 0 7H6z" fill="#fff"/>140          </svg>141        </div>142      </div>143      <div class="status-right">144        <!-- WiFi icon -->145        <div class="icon">146          <svg width="44" height="44" viewBox="0 0 24 24" fill="none">147            <path d="M12 20.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" fill="#fff"/>148            <path d="M4.9 14.7a9 9 0 0 1 14.2 0l-1.4 1.4a7 7 0 0 0-11.4 0l-1.4-1.4z" fill="#fff"/>149            <path d="M2 11a12 12 0 0 1 20 0l-1.5 1.5a10 10 0 0 0-17 0L2 11z" fill="#fff"/>150          </svg>151        </div>152        <!-- Battery icon -->153        <div class="icon">154          <svg width="52" height="52" viewBox="0 0 28 16" fill="none">155            <rect x="1" y="3" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>156            <rect x="3" y="5" width="18" height="6" rx="1" fill="#fff"/>157            <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"/>158          </svg>159        </div>160        <div style="min-width: 110px; text-align:right;">100%</div>161      </div>162    </div>163 164    <!-- Hero Content -->165    <div class="hero">166      <div class="illustration">[IMG: Delivery person illustration carrying packages]</div>167      <div class="copy">168        <h1 class="headline">Free<br/>Delivery</h1>169        <p class="subhead">Anywhere<br/>in India</p>170      </div>171    </div>172 173    <!-- Bottom Gesture Bar -->174    <div class="bottom-bar">175      <div class="home-pill"></div>176    </div>177  </div>178</body>179</html>