GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Calm UI - Sleep Story</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: "Inter", Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background: linear-gradient(#3a6ea3 10%, #2f5e93 40%, #214f86 70%, #163b73 100%);10 color:#fff;11 }12 13 /* Top header */14 .top-bar {15 position:absolute; left:0; top:0; width:100%; padding:40px 36px 20px 36px;16 }17 .nav-row {18 display:flex; align-items:center; justify-content:space-between;19 height:80px; margin-bottom:12px;20 }21 .circle-btn {22 width:72px; height:72px; border-radius:36px;23 background: rgba(255,255,255,0.12);24 display:flex; align-items:center; justify-content:center;25 border:1px solid rgba(255,255,255,0.15);26 }27 .title {28 font-size:54px; font-weight:700; line-height:1.2;29 margin:10px 0 24px 0;30 }31 32 /* Chips */33 .chip-row { display:flex; gap:24px; }34 .chip {35 display:flex; align-items:center; gap:18px;36 background: rgba(255,255,255,0.10);37 border:1px solid rgba(255,255,255,0.18);38 color:#eaf3ff;39 padding:22px 28px; border-radius:28px; font-size:34px;40 }41 .chip svg { opacity:0.9; }42 43 /* List item */44 .list {45 position:absolute; left:36px; right:36px; top:420px;46 }47 .list-item {48 display:flex; gap:28px; padding:20px 0;49 border-top:1px solid rgba(255,255,255,0.05);50 }51 .cover {52 width:180px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD;53 display:flex; align-items:center; justify-content:center; color:#757575;54 border-radius:18px;55 }56 .item-text { flex:1; display:flex; flex-direction:column; }57 .item-title { font-size:44px; font-weight:700; margin:6px 0 10px 0; }58 .item-sub { font-size:32px; color:#cbe1ff; }59 .item-time { font-size:32px; margin-top:16px; color:#e7f0ff; }60 61 /* Mini player */62 .mini-player {63 position:absolute; left:0; bottom:220px; width:100%;64 background: rgba(7,20,48,0.55);65 border-top:1px solid rgba(255,255,255,0.12);66 height:180px; display:flex; align-items:center; padding:0 28px;67 }68 .mp-art { width:140px; height:140px; border-radius:14px; overflow:hidden; margin-right:24px;69 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center; }70 .pause-btn {71 width:68px; height:68px; border-radius:16px; margin-right:18px;72 background: rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center;73 border:1px solid rgba(255,255,255,0.22);74 }75 .mp-text { flex:1; }76 .mp-title { font-size:36px; font-weight:600; }77 .mp-sub { font-size:30px; color:#cfe4ff; margin-top:6px; }78 .mp-close {79 width:64px; height:64px; border-radius:32px;80 background: rgba(255,255,255,0.14);81 border:1px solid rgba(255,255,255,0.18);82 display:flex; align-items:center; justify-content:center; margin-left:16px;83 }84 85 /* Bottom tab bar */86 .tabbar {87 position:absolute; left:0; bottom:0; width:100%; height:220px;88 background: rgba(9,23,55,0.75);89 backdrop-filter: blur(2px);90 border-top:1px solid rgba(255,255,255,0.12);91 display:flex; align-items:flex-start; justify-content:space-around;92 padding-top:26px;93 }94 .tab {95 display:flex; flex-direction:column; align-items:center; gap:12px;96 color:#d7e8ff; width:20%;97 }98 .tab svg { width:60px; height:60px; }99 .tab span { font-size:32px; }100 .active .tab-icon {101 background: rgba(255,255,255,0.16);102 border-radius:50%;103 padding:16px;104 border:1px solid rgba(255,255,255,0.22);105 }106 .active span { color:#ffffff; font-weight:700; }107</style>108</head>109<body>110<div id="render-target">111 112 <!-- Top header -->113 <div class="top-bar">114 <div class="nav-row">115 <div class="circle-btn">116 <!-- Back arrow -->117 <svg width="40" height="40" viewBox="0 0 40 40">118 <polyline points="26,6 12,20 26,34" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></polyline>119 </svg>120 </div>121 <div class="circle-btn">122 <!-- Close (X) -->123 <svg width="40" height="40" viewBox="0 0 40 40">124 <line x1="10" y1="10" x2="30" y2="30" stroke="#fff" stroke-width="4" stroke-linecap="round"></line>125 <line x1="30" y1="10" x2="10" y2="30" stroke="#fff" stroke-width="4" stroke-linecap="round"></line>126 </svg>127 </div>128 </div>129 <div class="title">The Grand Plan to rise and Shine</div>130 131 <div class="chip-row">132 <div class="chip">133 <span>Category</span>134 <svg width="28" height="28" viewBox="0 0 24 24">135 <polyline points="5,9 12,16 19,9" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>136 </svg>137 </div>138 <div class="chip">139 <span>Time</span>140 <svg width="28" height="28" viewBox="0 0 24 24">141 <polyline points="5,9 12,16 19,9" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>142 </svg>143 </div>144 </div>145 </div>146 147 <!-- List item -->148 <div class="list">149 <div class="list-item">150 <div class="cover">[IMG: Sleep Story Cover]</div>151 <div class="item-text">152 <div class="item-title">The Grand Plan to Rise and Shine</div>153 <div class="item-sub">Frankie Bridge • Sleep Story</div>154 <div class="item-time">34 min</div>155 </div>156 </div>157 </div>158 159 <!-- Mini Player -->160 <div class="mini-player">161 <div class="pause-btn">162 <!-- Pause icon -->163 <svg width="34" height="34" viewBox="0 0 24 24">164 <rect x="5" y="4" width="4" height="16" fill="#fff"></rect>165 <rect x="15" y="4" width="4" height="16" fill="#fff"></rect>166 </svg>167 </div>168 <div class="mp-art">[IMG: Cover]</div>169 <div class="mp-text">170 <div class="mp-title">The Grand Plan to Rise and Shine</div>171 <div class="mp-sub">Frankie Bridge</div>172 </div>173 <div class="mp-close">174 <svg width="28" height="28" viewBox="0 0 40 40">175 <line x1="10" y1="10" x2="30" y2="30" stroke="#fff" stroke-width="3" stroke-linecap="round"></line>176 <line x1="30" y1="10" x2="10" y2="30" stroke="#fff" stroke-width="3" stroke-linecap="round"></line>177 </svg>178 </div>179 </div>180 181 <!-- Bottom Tab Bar -->182 <div class="tabbar">183 <div class="tab">184 <div class="tab-icon">185 <!-- Home icon -->186 <svg viewBox="0 0 24 24">187 <path d="M4 10 L12 3 L20 10 V20 H14 V14 H10 V20 H4 Z" fill="none" stroke="#e9f2ff" stroke-width="2" stroke-linejoin="round"></path>188 </svg>189 </div>190 <span>Home</span>191 </div>192 193 <div class="tab">194 <div class="tab-icon">195 <!-- Moon icon -->196 <svg viewBox="0 0 24 24">197 <path d="M14 3 A9 9 0 1 0 21 14 A7 7 0 0 1 14 3 Z" fill="none" stroke="#e9f2ff" stroke-width="2"></path>198 </svg>199 </div>200 <span>Sleep</span>201 </div>202 203 <div class="tab active">204 <div class="tab-icon">205 <!-- Compass / Discover icon -->206 <svg viewBox="0 0 24 24">207 <circle cx="12" cy="12" r="9" fill="none" stroke="#ffffff" stroke-width="2"></circle>208 <polygon points="12,8 16,12 12,16 8,12" fill="none" stroke="#ffffff" stroke-width="2"></polygon>209 <circle cx="12" cy="12" r="2" fill="#ffffff"></circle>210 </svg>211 </div>212 <span>Discover</span>213 </div>214 215 <div class="tab">216 <div class="tab-icon">217 <!-- User icon -->218 <svg viewBox="0 0 24 24">219 <circle cx="12" cy="8" r="4" fill="none" stroke="#e9f2ff" stroke-width="2"></circle>220 <path d="M4 21 C4 16 20 16 20 21" fill="none" stroke="#e9f2ff" stroke-width="2"></path>221 </svg>222 </div>223 <span>Profile</span>224 </div>225 226 <div class="tab">227 <div class="tab-icon">228 <!-- Star icon -->229 <svg viewBox="0 0 24 24">230 <polygon points="12,3 15,9 22,9 16.5,13.5 18.5,20 12,16 5.5,20 7.5,13.5 2,9 9,9" fill="none" stroke="#e9f2ff" stroke-width="2" stroke-linejoin="round"></polygon>231 </svg>232 </div>233 <span>Premium</span>234 </div>235 </div>236 237</div>238</body>239</html>