GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Generated UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: radial-gradient(1200px 900px at 200px 0px, #2b6a7a 0%, #374f6a 35%, #4b3d67 70%, #5a3f77 100%);13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14 color: #fff;15 }16 17 /* Top icons */18 .icon-btn {19 position: absolute;20 width: 120px;21 height: 120px;22 border-radius: 60px;23 background: rgba(34, 22, 55, 0.85);24 display: flex;25 align-items: center;26 justify-content: center;27 box-shadow: 0 10px 25px rgba(0,0,0,0.35);28 }29 .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #ffffff; stroke-width: 6; }30 31 .close { left: 70px; top: 150px; }32 .heart { right: 470px; top: 150px; }33 .download { right: 270px; top: 150px; }34 .share { right: 70px; top: 150px; }35 36 /* Title */37 .title {38 position: absolute;39 top: 330px;40 left: 60px;41 font-size: 82px;42 font-weight: 700;43 letter-spacing: 1px;44 }45 46 /* Quote card */47 .quote-card {48 position: absolute;49 left: 45px;50 top: 520px;51 width: 990px;52 height: 1060px;53 border-radius: 60px;54 overflow: hidden;55 background: #1c1c1c;56 box-shadow: 0 30px 60px rgba(0,0,0,0.4);57 }58 .image-placeholder {59 position: absolute;60 inset: 0;61 background: #E0E0E0;62 border: 1px solid #BDBDBD;63 display: flex;64 align-items: center;65 justify-content: center;66 color: #757575;67 font-size: 40px;68 }69 .dark-overlay {70 position: absolute;71 inset: 0;72 background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.75));73 }74 .quote-text {75 position: absolute;76 top: 200px;77 left: 70px;78 right: 70px;79 color: #ffffff;80 font-family: Georgia, "Times New Roman", serif;81 font-size: 56px;82 line-height: 1.28;83 text-shadow: 0 3px 6px rgba(0,0,0,0.5);84 }85 .share-btn {86 position: absolute;87 left: 50%;88 transform: translateX(-50%);89 bottom: 90px;90 width: 320px;91 height: 120px;92 border-radius: 60px;93 background: #ffffff;94 color: #5a3f77;95 display: flex;96 align-items: center;97 justify-content: center;98 font-size: 46px;99 font-weight: 600;100 box-shadow: 0 16px 34px rgba(0,0,0,0.35);101 }102 103 /* CTA banner */104 .cta-banner {105 position: absolute;106 left: 45px;107 top: 1710px;108 width: 990px;109 height: 330px;110 border-radius: 50px;111 background: linear-gradient(90deg, #6d4ac6, #7a5be0);112 box-shadow: 0 20px 40px rgba(0,0,0,0.35);113 padding: 50px 60px;114 }115 .cta-title {116 font-size: 58px;117 font-weight: 800;118 margin-bottom: 20px;119 }120 .cta-desc {121 font-size: 36px;122 line-height: 1.35;123 opacity: 0.95;124 max-width: 560px;125 }126 .cta-button {127 position: absolute;128 right: 60px;129 top: 120px;130 width: 420px;131 height: 130px;132 background: #fff;133 border-radius: 65px;134 color: #5a3f77;135 font-size: 44px;136 font-weight: 700;137 display: flex;138 align-items: center;139 justify-content: center;140 box-shadow: 0 12px 26px rgba(0,0,0,0.3);141 }142 143 /* Stats card */144 .stats-card {145 position: absolute;146 left: 45px;147 top: 2070px;148 width: 990px;149 height: 250px;150 border-radius: 30px;151 background: #2a2a2f;152 color: #dfe3ea;153 display: grid;154 grid-template-columns: 1fr 1fr;155 padding: 40px 50px;156 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);157 }158 .stat-block { display: flex; flex-direction: column; gap: 16px; }159 .stat-label { font-size: 34px; color: #a9b0ba; }160 .stat-value { font-size: 54px; font-weight: 700; color: #ffffff; }161 162 /* Home indicator */163 .home-indicator {164 position: absolute;165 bottom: 36px;166 left: 50%;167 transform: translateX(-50%);168 width: 520px;169 height: 16px;170 background: #bfbfc4;171 border-radius: 8px;172 opacity: 0.7;173 }174</style>175</head>176<body>177<div id="render-target">178 179 <!-- Top navigation icons -->180 <div class="icon-btn close">181 <svg viewBox="0 0 24 24">182 <path d="M5 5 L19 19"></path>183 <path d="M19 5 L5 19"></path>184 </svg>185 </div>186 <div class="icon-btn heart">187 <svg viewBox="0 0 24 24">188 <path d="M12 20 C12 20 4 14 4 8 C4 5.5 6 4 8 4 C9.7 4 11 5 12 6 C13 5 14.3 4 16 4 C18 4 20 5.5 20 8 C20 14 12 20 12 20 Z"></path>189 </svg>190 </div>191 <div class="icon-btn download">192 <svg viewBox="0 0 24 24">193 <path d="M12 4 V14"></path>194 <path d="M8 10 L12 14 L16 10"></path>195 <path d="M5 19 H19"></path>196 </svg>197 </div>198 <div class="icon-btn share">199 <svg viewBox="0 0 24 24">200 <circle cx="5" cy="12" r="2"></circle>201 <circle cx="19" cy="5" r="2"></circle>202 <circle cx="19" cy="19" r="2"></circle>203 <path d="M7 12 L17 6"></path>204 <path d="M7 12 L17 18"></path>205 </svg>206 </div>207 208 <!-- Title -->209 <div class="title">Nicely done!</div>210 211 <!-- Quote card with image placeholder -->212 <div class="quote-card">213 <div class="image-placeholder">[IMG: Wheat Field at Sunset]</div>214 <div class="dark-overlay"></div>215 <div class="quote-text">216 Take stock of your dreams,217 watching them grow and218 change throughout your life.219 </div>220 <div class="share-btn">Share</div>221 </div>222 223 <!-- CTA Banner -->224 <div class="cta-banner">225 <div class="cta-title">Don’t miss out!</div>226 <div class="cta-desc">227 Start your free trial. Unlock 1,000+ kinds of meditation, sleep, and music content.228 </div>229 <div class="cta-button">Try it for free</div>230 </div>231 232 <!-- Stats card -->233 <div class="stats-card">234 <div class="stat-block">235 <div class="stat-label">Today’s session</div>236 <div class="stat-value">61 min</div>237 </div>238 <div class="stat-block">239 <div class="stat-label">Total sessions</div>240 <div class="stat-value">6</div>241 </div>242 </div>243 244 <div class="home-indicator"></div>245</div>246</body>247</html>