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>Boombox Screen</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #E6E9F1;14 color: #2b2b2b;15 }16 17 /* Top app bar */18 .appbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 190px;24 background: #3B4F6E;25 box-shadow: 0 2px 6px rgba(0,0,0,0.25);26 }27 .status-bar {28 height: 46px;29 padding: 0 24px;30 color: #fff;31 font-size: 32px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 opacity: 0.95;36 }37 .status-right {38 display: flex;39 gap: 18px;40 align-items: center;41 }42 .title-row {43 height: 144px;44 display: flex;45 align-items: center;46 padding: 0 28px;47 gap: 22px;48 color: #fff;49 }50 .title-row .title {51 font-size: 56px;52 font-weight: 600;53 letter-spacing: 0.5px;54 flex: 1;55 }56 .icon-btn {57 width: 72px;58 height: 72px;59 display: flex;60 align-items: center;61 justify-content: center;62 }63 .icon-btn svg { fill: #ffffff; }64 65 /* Ad banner */66 .ad-banner {67 position: absolute;68 top: 190px;69 left: 0;70 width: 1080px;71 height: 140px;72 background: #E0E0E0;73 border-top: 1px solid #BDBDBD;74 border-bottom: 1px solid #BDBDBD;75 display: flex;76 align-items: center;77 justify-content: center;78 color: #6B6B6B;79 font-size: 34px;80 }81 82 /* Card/List item */83 .list-container {84 position: absolute;85 top: 330px;86 left: 0;87 right: 0;88 bottom: 210px;89 padding: 18px 22px;90 }91 .item-card {92 background: #F4F6FA;93 border-top: 1px solid #D8DDE7;94 border-bottom: 1px solid #D8DDE7;95 padding: 28px;96 }97 .item-header {98 display: flex;99 align-items: center;100 justify-content: space-between;101 }102 .item-title {103 font-size: 56px;104 color: #1e2a3a;105 margin-bottom: 8px;106 }107 .subline {108 font-size: 36px;109 color: #5d6776;110 margin-top: 6px;111 }112 .right-info {113 display: flex;114 align-items: center;115 gap: 18px;116 }117 .right-info .due {118 font-size: 36px;119 color: #2E466E;120 }121 .star {122 width: 52px;123 height: 52px;124 }125 .star svg { fill: #5D6FC7; }126 127 /* Tabs */128 .tabs {129 position: absolute;130 bottom: 94px;131 left: 0;132 width: 1080px;133 height: 90px;134 display: flex;135 align-items: center;136 justify-content: space-between;137 padding: 0 80px;138 color: #1f1f1f;139 font-weight: 700;140 letter-spacing: 1px;141 }142 .tab {143 font-size: 38px;144 color: #1f1f1f;145 opacity: 0.9;146 position: relative;147 }148 .tab.active {149 color: #1c2a44;150 }151 .tab.active::after {152 content: "";153 position: absolute;154 left: 0;155 bottom: -14px;156 width: 120%;157 height: 6px;158 background: #1c2a44;159 transform: translateX(-10%);160 border-radius: 3px;161 }162 163 /* FAB */164 .fab {165 position: absolute;166 right: 70px;167 bottom: 180px;168 width: 144px;169 height: 144px;170 background: #394E6B;171 border-radius: 50%;172 box-shadow: 0 10px 20px rgba(0,0,0,0.25);173 display: flex;174 align-items: center;175 justify-content: center;176 color: #fff;177 font-size: 88px;178 line-height: 1;179 }180 181 /* Home indicator */182 .home-indicator {183 position: absolute;184 bottom: 28px;185 left: 50%;186 transform: translateX(-50%);187 width: 500px;188 height: 12px;189 background: #A9AEB7;190 border-radius: 6px;191 opacity: 0.9;192 }193</style>194</head>195<body>196<div id="render-target">197 198 <!-- Top App Bar -->199 <div class="appbar">200 <div class="status-bar">201 <div>8:26</div>202 <div class="status-right">203 <div style="width:18px;height:18px;border:2px solid #fff;border-radius:50%;"></div>204 <div style="width:20px;height:20px;background:#fff;border-radius:3px;"></div>205 <div style="width:26px;height:16px;border:2px solid #fff;border-radius:3px; position: relative;">206 <div style="position:absolute; right:-6px; top:3px; width:4px; height:10px; background:#fff;"></div>207 </div>208 </div>209 </div>210 <div class="title-row">211 <div class="icon-btn">212 <svg width="44" height="44" viewBox="0 0 24 24">213 <path d="M15.5 3.5L7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9 1.4 1.4z"/>214 </svg>215 </div>216 <div class="title">Boombox</div>217 <div class="icon-btn">218 <svg width="44" height="44" viewBox="0 0 24 24">219 <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3 1.4 1.4z"/>220 </svg>221 </div>222 </div>223 </div>224 225 <!-- Ad banner -->226 <div class="ad-banner">227 [IMG: Luxury Decorative Lighting Ad Banner]228 </div>229 230 <!-- List item -->231 <div class="list-container">232 <div class="item-card">233 <div class="item-header">234 <div style="flex:1;">235 <div class="item-title">Boombox</div>236 <div class="subline">06/26/2023 10:15 AM</div>237 <div class="subline">Every Month</div>238 </div>239 <div class="right-info">240 <div class="due">in 13 days</div>241 <div class="star">242 <svg viewBox="0 0 24 24">243 <path d="M12 17.3l-5.5 3.3 1.5-6.1L3 9.8l6.2-.5L12 3.6l2.8 5.7 6.2.5-5 4.8 1.5 6.1z"/>244 </svg>245 </div>246 </div>247 </div>248 </div>249 </div>250 251 <!-- Floating Action Button -->252 <div class="fab">+</div>253 254 <!-- Tabs -->255 <div class="tabs">256 <div class="tab active">ACTIVE</div>257 <div class="tab">COMPLETED</div>258 </div>259 260 <!-- Home indicator -->261 <div class="home-indicator"></div>262</div>263</body>264</html>