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 Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(#1b0036, #3d1b5c 35%, #ffffff 35%);15    border-radius: 28px;16    box-shadow: 0 30px 60px rgba(0,0,0,0.35);17  }18 19  /* top black bar to mimic status/header background */20  .top-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 160px;26    background: #000;27  }28 29  .modal {30    position: absolute;31    top: 170px;32    left: 40px;33    width: 1000px;34    background: #fff;35    border-radius: 24px;36    box-shadow: 0 20px 50px rgba(0,0,0,0.25);37  }38 39  .modal-header {40    padding: 36px 40px 18px 40px;41    display: flex;42    align-items: center;43  }44 45  .app-icon {46    width: 128px;47    height: 128px;48    background: #E0E0E0;49    border: 1px solid #BDBDBD;50    border-radius: 26px;51    display: flex;52    align-items: center;53    justify-content: center;54    color: #757575;55    font-size: 28px;56    text-align: center;57    margin-right: 28px;58  }59 60  .title-wrap {61    flex: 1;62  }63  .app-title {64    font-size: 64px;65    font-weight: 800;66    color: #111;67    line-height: 1.05;68    margin: 0;69  }70  .app-subtitle {71    font-size: 34px;72    color: #616161;73    margin-top: 6px;74  }75 76  .close-btn {77    position: absolute;78    top: 24px;79    right: 24px;80    width: 56px;81    height: 56px;82    border: none;83    background: transparent;84    cursor: pointer;85  }86 87  .rating-row {88    display: flex;89    align-items: center;90    padding: 8px 40px 24px 40px;91    gap: 8px;92  }93  .rating-count {94    font-size: 32px;95    color: #616161;96    margin-left: 10px;97    margin-right: 10px;98  }99 100  .install-btn {101    margin: 10px 40px 16px 40px;102    width: calc(100% - 80px);103    height: 108px;104    background: #4CAF50;105    color: #fff;106    border: none;107    border-radius: 12px;108    font-size: 44px;109    font-weight: 700;110    cursor: pointer;111  }112 113  .divider {114    height: 2px;115    background: #e0e0e0;116    margin: 22px 40px;117  }118 119  .description {120    padding: 0 40px;121    font-size: 36px;122    line-height: 52px;123    color: #303030;124  }125 126  .screenshots {127    display: grid;128    grid-template-columns: 1fr 1fr;129    gap: 28px;130    padding: 26px 40px 40px 40px;131  }132  .img-box {133    height: 760px;134    background: #E0E0E0;135    border: 1px solid #BDBDBD;136    border-radius: 28px;137    display: flex;138    align-items: center;139    justify-content: center;140    color: #757575;141    font-size: 34px;142    text-align: center;143    padding: 18px;144  }145 146  /* Subtle rounded bottom corners for modal like the screenshot */147  .modal::after {148    content: "";149    position: absolute;150    bottom: -1px;151    left: 0;152    right: 0;153    height: 18px;154    border-bottom-left-radius: 24px;155    border-bottom-right-radius: 24px;156    background: transparent;157  }158</style>159</head>160<body>161<div id="render-target">162  <div class="top-bar"></div>163 164  <div class="modal">165    <button class="close-btn" aria-label="Close">166      <svg width="56" height="56" viewBox="0 0 24 24">167        <path d="M6 6l12 12M18 6l-12 12" stroke="#777" stroke-width="2.2" stroke-linecap="round"/>168      </svg>169    </button>170 171    <div class="modal-header">172      <div class="app-icon">[IMG: Instagram app icon]</div>173      <div class="title-wrap">174        <h1 class="app-title">Instagram</h1>175        <div class="app-subtitle">Instagram</div>176      </div>177    </div>178 179    <div class="rating-row">180      <!-- 4 full stars -->181      <svg width="40" height="40" viewBox="0 0 24 24">182        <path d="M12 17.3l-5.4 3 1.4-5.9-4.6-4 6.1-.5L12 4l2.5 6 6.1.5-4.6 4 1.4 5.9z" fill="#4CAF50"/>183      </svg>184      <svg width="40" height="40" viewBox="0 0 24 24">185        <path d="M12 17.3l-5.4 3 1.4-5.9-4.6-4 6.1-.5L12 4l2.5 6 6.1.5-4.6 4 1.4 5.9z" fill="#4CAF50"/>186      </svg>187      <svg width="40" height="40" viewBox="0 0 24 24">188        <path d="M12 17.3l-5.4 3 1.4-5.9-4.6-4 6.1-.5L12 4l2.5 6 6.1.5-4.6 4 1.4 5.9z" fill="#4CAF50"/>189      </svg>190      <svg width="40" height="40" viewBox="0 0 24 24">191        <path d="M12 17.3l-5.4 3 1.4-5.9-4.6-4 6.1-.5L12 4l2.5 6 6.1.5-4.6 4 1.4 5.9z" fill="#4CAF50"/>192      </svg>193      <!-- half star -->194      <svg width="40" height="40" viewBox="0 0 24 24">195        <defs>196          <clipPath id="half">197            <rect x="0" y="0" width="12" height="24"></rect>198          </clipPath>199        </defs>200        <path d="M12 17.3l-5.4 3 1.4-5.9-4.6-4 6.1-.5L12 4l2.5 6 6.1.5-4.6 4 1.4 5.9z" fill="#4CAF50" clip-path="url(#half)"/>201        <path d="M12 17.3l-5.4 3 1.4-5.9-4.6-4 6.1-.5L12 4l2.5 6 6.1.5-4.6 4 1.4 5.9z" fill="none" stroke="#4CAF50" stroke-width="1"/>202      </svg>203 204      <div class="rating-count">138,924,247</div>205 206      <svg width="34" height="34" viewBox="0 0 24 24">207        <circle cx="12" cy="8" r="4" fill="#616161"/>208        <path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="#616161"/>209      </svg>210    </div>211 212    <button class="install-btn">Install</button>213 214    <div class="divider"></div>215 216    <div class="description">217      Instagram (from Facebook) allows you to create and share your photos, stories, and videos with the friends and followers you care about. Connect with friends, share what you're up to, or see what's new from others all over the world. Explore our community where you can feel free to be yourself and share everything from your daily moments to life's highlights.218    </div>219 220    <div class="screenshots">221      <div class="img-box">[IMG: App screenshot — camera interface with filters]</div>222      <div class="img-box">[IMG: App screenshot — Direct messages list]</div>223    </div>224  </div>225</div>226</body>227</html>