GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Level Reached Screen</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #63c6ff 0%, #4e87ff 35%, #5b52ff 60%, #5833d7 100%);13 }14 15 /* starburst behind medal */16 #render-target:before{17 content:"";18 position: absolute;19 left: 50%;20 top: 540px;21 transform: translateX(-50%);22 width: 1200px;23 height: 1200px;24 border-radius: 50%;25 background:26 radial-gradient(circle at 50% 50%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 25%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0) 65%),27 repeating-conic-gradient(from 0deg, rgba(255,255,255,0.12) 0deg 6deg, rgba(255,255,255,0) 6deg 15deg);28 filter: blur(0.2px);29 pointer-events: none;30 }31 32 .status-bar {33 position: absolute;34 top: 28px;35 left: 36px;36 right: 36px;37 height: 60px;38 color: #ffffff;39 font-size: 40px;40 display: flex;41 align-items: center;42 justify-content: space-between;43 opacity: 0.95;44 }45 .status-icons { display: flex; align-items: center; gap: 28px; }46 .icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }47 .icon svg { width: 40px; height: 40px; fill: #ffffff; }48 49 .title {50 position: absolute;51 top: 240px;52 width: 100%;53 text-align: center;54 color: #ffffff;55 font-size: 120px;56 font-weight: 800;57 letter-spacing: 2px;58 margin: 0;59 }60 61 .medal-wrap{62 position: absolute;63 top: 670px;64 left: 50%;65 transform: translateX(-50%);66 width: 720px;67 height: 720px;68 }69 70 /* ribbons */71 .ribbon {72 position: absolute;73 bottom: -60px;74 width: 0;75 height: 0;76 border-left: 140px solid transparent;77 border-right: 140px solid transparent;78 border-top: 220px solid #e26a40;79 filter: drop-shadow(0 6px 0 rgba(0,0,0,0.05));80 }81 .ribbon.right {82 left: 390px;83 border-top-color: #ff7a4c;84 }85 .ribbon.left {86 left: 190px;87 }88 89 .medal {90 position: absolute;91 top: 0;92 left: 50%;93 transform: translateX(-50%);94 width: 640px;95 height: 640px;96 border-radius: 50%;97 background: radial-gradient(circle at 50% 35%, #ffd37a 0%, #f4b446 70%, #eaa638 100%);98 box-shadow:99 inset 0 0 0 20px rgba(255, 210, 110, 0.6),100 0 20px 40px rgba(0,0,0,0.15);101 }102 .medal:before{103 content:"";104 position:absolute;105 inset: 36px;106 border-radius: 50%;107 border: 10px solid rgba(150, 74, 0, 0.18);108 box-shadow:109 inset 0 0 0 14px rgba(150, 74, 0, 0.15),110 inset 0 0 0 60px rgba(255,255,255,0.08);111 }112 .medal-content{113 position: absolute;114 inset: 0;115 display: flex;116 flex-direction: column;117 align-items: center;118 justify-content: center;119 color: #2d2476;120 text-align: center;121 }122 .level-number{123 font-size: 220px;124 font-weight: 900;125 line-height: 1;126 margin-top: 60px;127 margin-bottom: 20px;128 }129 .divider{130 width: 320px;131 height: 6px;132 background: rgba(77, 54, 136, 0.45);133 border-radius: 3px;134 margin: 10px 0 24px;135 }136 .points-big{137 font-size: 120px;138 font-weight: 900;139 line-height: 1;140 margin-bottom: 10px;141 }142 .points-label{143 font-size: 56px;144 letter-spacing: 1px;145 opacity: 0.9;146 }147 148 .continue {149 position: absolute;150 left: 50%;151 bottom: 210px;152 transform: translateX(-50%);153 width: 820px;154 height: 128px;155 border-radius: 80px;156 background: linear-gradient(180deg, #8e46ff 0%, #6f2bd6 100%);157 box-shadow: 0 18px 30px rgba(0,0,0,0.25), inset 0 8px 12px rgba(255,255,255,0.2);158 display: flex;159 align-items: center;160 justify-content: center;161 color: rgba(255,255,255,0.85);162 font-size: 64px;163 font-weight: 700;164 letter-spacing: 1px;165 }166 .home-indicator{167 position: absolute;168 bottom: 48px;169 left: 50%;170 transform: translateX(-50%);171 width: 420px;172 height: 14px;173 border-radius: 10px;174 background: rgba(255,255,255,0.8);175 opacity: 0.9;176 }177</style>178</head>179<body>180<div id="render-target">181 182 <!-- Status bar -->183 <div class="status-bar">184 <div class="status-time">1:32</div>185 <div class="status-icons">186 <!-- simple mail icon -->187 <div class="icon">188 <svg viewBox="0 0 24 24">189 <path d="M2 6c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6zm2 0 8 5 8-5H4zm16 12V8l-8 5-8-5v10h16z"/>190 </svg>191 </div>192 <!-- play icon -->193 <div class="icon">194 <svg viewBox="0 0 24 24">195 <path d="M8 5v14l11-7z"/>196 </svg>197 </div>198 <!-- cloud icon -->199 <div class="icon">200 <svg viewBox="0 0 24 24">201 <path d="M6 19h10a4 4 0 0 0 0-8 5 5 0 0 0-9.6-1.6A4 4 0 0 0 6 19z"/>202 </svg>203 </div>204 <!-- wifi icon -->205 <div class="icon">206 <svg viewBox="0 0 24 24">207 <path d="M12 20.5c.7 0 1.25-.56 1.25-1.25S12.7 18 12 18s-1.25.56-1.25 1.25.55 1.25 1.25 1.25zM2.1 9.2a15 15 0 0 1 19.8 0l-1.4 1.4a13 13 0 0 0-17 0L2.1 9.2zm3.6 3.6a10 10 0 0 1 12.6 0l-1.4 1.4a8 8 0 0 0-9.8 0l-1.4-1.4zm3.6 3.6a6 6 0 0 1 5 0l-2.5 2.5-2.5-2.5z"/>208 </svg>209 </div>210 <!-- battery icon -->211 <div class="icon">212 <svg viewBox="0 0 24 24">213 <path d="M20 8h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1zm-2 9V7H6v10h12z"/>214 </svg>215 </div>216 </div>217 </div>218 219 <h1 class="title">Level reached!</h1>220 221 <!-- Medal -->222 <div class="medal-wrap">223 <div class="ribbon left"></div>224 <div class="ribbon right"></div>225 <div class="medal">226 <div class="medal-content">227 <div class="level-number">2</div>228 <div class="divider"></div>229 <div class="points-big">38</div>230 <div class="points-label">Points</div>231 </div>232 </div>233 </div>234 235 <div class="continue">Continue</div>236 <div class="home-indicator"></div>237</div>238</body>239</html>