GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Level Reached Screen</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12 }13 14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: linear-gradient(180deg, #57B7FF 0%, #4D74FF 45%, #4E2BC6 100%);20 }21 22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 100px;29 color: #ffffff;30 font-size: 40px;31 display: flex;32 align-items: center;33 justify-content: space-between;34 padding: 0 40px;35 box-sizing: border-box;36 opacity: 0.95;37 }38 .status-left {39 display: flex;40 align-items: center;41 gap: 28px;42 }43 .status-right {44 display: flex;45 align-items: center;46 gap: 28px;47 }48 .icon {49 width: 44px;50 height: 44px;51 }52 .icon svg {53 width: 100%;54 height: 100%;55 }56 .icon-wifi path,57 .icon-battery path {58 stroke: #fff;59 fill: none;60 stroke-width: 5;61 stroke-linecap: round;62 stroke-linejoin: round;63 }64 65 /* Title */66 .title {67 position: absolute;68 top: 170px;69 left: 50%;70 transform: translateX(-50%);71 font-size: 110px;72 font-weight: 800;73 letter-spacing: 1px;74 color: #ffffff;75 text-align: center;76 }77 78 /* Rays behind medal */79 .rays {80 position: absolute;81 width: 1400px;82 height: 1400px;83 left: 50%;84 top: 360px;85 transform: translateX(-50%);86 border-radius: 50%;87 background:88 radial-gradient(closest-side, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%),89 repeating-conic-gradient(from 0deg, rgba(255,255,255,0.18) 0deg, rgba(255,255,255,0) 8deg, rgba(255,255,255,0) 20deg);90 filter: blur(0.3px);91 pointer-events: none;92 }93 94 /* Medal */95 .medal {96 position: absolute;97 top: 520px;98 left: 50%;99 transform: translateX(-50%);100 width: 600px;101 height: 600px;102 }103 .medal .coin {104 position: absolute;105 left: 50%;106 transform: translateX(-50%);107 top: 0;108 width: 600px;109 height: 600px;110 border-radius: 50%;111 background: radial-gradient(circle at 40% 35%, #FFD46A 0%, #F5C14A 55%, #EAA837 100%);112 box-shadow:113 inset 0 0 0 18px rgba(255,255,255,0.35),114 inset 0 0 0 36px rgba(233,169,55,0.45),115 0 18px 40px rgba(0,0,0,0.2);116 }117 .medal .coin::before {118 content: "";119 position: absolute;120 left: 50%;121 top: 50%;122 width: 420px;123 height: 420px;124 transform: translate(-50%, -50%);125 border-radius: 50%;126 box-shadow:127 inset 0 0 0 10px rgba(220,160,50,0.6),128 inset 0 0 0 25px rgba(255,220,150,0.35),129 inset 0 0 0 40px rgba(220,160,50,0.25);130 }131 132 /* Ribbons */133 .ribbon {134 position: absolute;135 top: 570px;136 left: 50%;137 transform: translateX(-50%);138 width: 560px;139 height: 200px;140 pointer-events: none;141 }142 .rib-left, .rib-right {143 position: absolute;144 bottom: 0;145 width: 240px;146 height: 180px;147 background: linear-gradient(180deg, #E5753F 0%, #D55A2B 100%);148 clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);149 filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));150 }151 .rib-right {152 right: 0;153 clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);154 background: linear-gradient(180deg, #F28749 0%, #E06432 100%);155 }156 157 /* Medal texts */158 .medal .num {159 position: absolute;160 top: 160px;161 width: 100%;162 text-align: center;163 font-size: 210px;164 font-weight: 800;165 color: #2C2B77;166 letter-spacing: 2px;167 }168 .medal .line {169 position: absolute;170 top: 300px;171 left: 50%;172 transform: translateX(-50%);173 width: 380px;174 height: 0;175 border-top: 10px solid rgba(60,41,96,0.25);176 border-radius: 10px;177 }178 .medal .points {179 position: absolute;180 top: 360px;181 width: 100%;182 text-align: center;183 color: #2C2B77;184 }185 .medal .points .value {186 font-size: 130px;187 font-weight: 800;188 line-height: 1;189 }190 .medal .points .label {191 font-size: 60px;192 margin-top: 10px;193 font-weight: 700;194 }195 196 /* Share button */197 .share-area {198 position: absolute;199 top: 1600px;200 left: 50%;201 transform: translateX(-50%);202 text-align: center;203 color: #ffffff;204 }205 .share-btn {206 width: 160px;207 height: 160px;208 border-radius: 50%;209 background: radial-gradient(circle at 30% 20%, #FF6FD8 0%, #9D50F6 100%);210 box-shadow: 0 12px 30px rgba(0,0,0,0.35);211 display: flex;212 align-items: center;213 justify-content: center;214 margin: 0 auto 28px auto;215 }216 .share-btn svg {217 width: 70px;218 height: 70px;219 }220 .share-area .label {221 font-size: 54px;222 font-weight: 700;223 letter-spacing: 1px;224 }225 226 /* Continue button */227 .continue-btn {228 position: absolute;229 left: 135px;230 bottom: 170px;231 width: 810px;232 height: 150px;233 border-radius: 90px;234 background: linear-gradient(180deg, #B94AF6 0%, #8B3AF0 100%);235 box-shadow: 0 18px 40px rgba(0,0,0,0.35);236 display: flex;237 align-items: center;238 justify-content: center;239 color: #ffffff;240 font-size: 70px;241 font-weight: 800;242 letter-spacing: 1px;243 }244 245 /* Bottom navigation bar dark area and home indicator */246 .bottom-bar {247 position: absolute;248 bottom: 0;249 left: 0;250 width: 1080px;251 height: 140px;252 background: linear-gradient(180deg, rgba(38,0,81,0.35) 0%, rgba(25,0,57,0.55) 100%);253 }254 .home-indicator {255 position: absolute;256 bottom: 60px;257 left: 50%;258 transform: translateX(-50%);259 width: 340px;260 height: 14px;261 background: #ffffff;262 border-radius: 10px;263 opacity: 0.8;264 }265</style>266</head>267<body>268<div id="render-target">269 <!-- Status bar -->270 <div class="status-bar">271 <div class="status-left">272 <div>1:32</div>273 <div style="font-weight:700;">M</div>274 <div class="icon">275 <svg viewBox="0 0 24 24">276 <polygon points="3,2 21,12 3,22" fill="#fff"></polygon>277 </svg>278 </div>279 <div class="icon">280 <svg viewBox="0 0 24 24">281 <path d="M6 10c3-6 9-6 12 0" stroke="#fff" stroke-width="2" fill="none"/>282 <path d="M10 12c2-3 4-3 6 0" stroke="#fff" stroke-width="2" fill="none"/>283 </svg>284 </div>285 </div>286 <div class="status-right">287 <div class="icon icon-wifi">288 <svg viewBox="0 0 24 24">289 <path d="M2 8c9-8 20-8 28 0" transform="scale(0.8) translate(2,3)"/>290 <path d="M5 12c6-6 14-6 20 0" transform="scale(0.9) translate(2,2)"/>291 <path d="M9 16c3-3 8-3 11 0" transform="translate(0,0)"/>292 <circle cx="12" cy="18" r="2" fill="#fff"/>293 </svg>294 </div>295 <div class="icon icon-battery">296 <svg viewBox="0 0 32 24">297 <rect x="2" y="4" width="24" height="16" rx="3" ry="3" stroke="#fff" fill="none" stroke-width="3"></rect>298 <rect x="4.5" y="6.5" width="16" height="11" rx="2" ry="2" fill="#fff"></rect>299 <rect x="26.2" y="9" width="3.8" height="6" rx="1" ry="1" fill="#fff"></rect>300 </svg>301 </div>302 </div>303 </div>304 305 <!-- Title -->306 <div class="title">Level reached!</div>307 308 <!-- Rays Background -->309 <div class="rays"></div>310 311 <!-- Medal -->312 <div class="medal">313 <div class="coin"></div>314 <div class="num">2</div>315 <div class="line"></div>316 <div class="points">317 <div class="value">38</div>318 <div class="label">Points</div>319 </div>320 </div>321 322 <!-- Ribbons -->323 <div class="ribbon">324 <div class="rib-left"></div>325 <div class="rib-right"></div>326 </div>327 328 <!-- Share -->329 <div class="share-area">330 <div class="share-btn">331 <svg viewBox="0 0 24 24">332 <circle cx="6" cy="12" r="3" fill="none" stroke="#fff" stroke-width="2"></circle>333 <circle cx="18" cy="6" r="3" fill="none" stroke="#fff" stroke-width="2"></circle>334 <circle cx="18" cy="18" r="3" fill="none" stroke="#fff" stroke-width="2"></circle>335 <path d="M8.7 10.8 L15.3 7.4 M8.7 13.2 L15.3 16.6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>336 </svg>337 </div>338 <div class="label">Share</div>339 </div>340 341 <!-- Continue Button -->342 <div class="continue-btn">Continue</div>343 344 <!-- Bottom area & home indicator -->345 <div class="bottom-bar"></div>346 <div class="home-indicator"></div>347</div>348</body>349</html>