GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Calm UI Mock</title>5<style>6 :root{7 --bg-top:#0f1430;8 --bg-mid:#261a52;9 --bg-bottom:#2f1d6b;10 --text-light:#ffffff;11 --text-muted:#b9b4dc;12 --accent:#6ad0ff;13 --card-blue-start:#5fd0ff;14 --card-blue-end:#4c7cff;15 --card-dark:#3c2b77;16 }17 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }18 #render-target{19 width:1080px; height:2400px;20 position:relative; overflow:hidden;21 background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 40%, var(--bg-bottom) 100%);22 color:var(--text-light);23 }24 25 /* Hero / sky */26 .hero{27 position:absolute; left:0; top:0; width:100%; height:720px;28 display:flex; align-items:flex-end; justify-content:flex-start;29 }30 .hero-image{31 position:absolute; inset:0;32 background:#1c2148;33 border-bottom:1px solid rgba(255,255,255,0.08);34 display:flex; align-items:center; justify-content:center;35 color:#aab2d8; font-size:28px; letter-spacing:0.5px;36 }37 .calm-logo{38 position:absolute; left:120px; top:220px;39 font-size:96px; font-weight:700; color:#fff; opacity:0.92;40 }41 .calm-logo .moon{42 font-size:86px; margin-right:18px;43 }44 45 /* Top circular actions */46 .circle-btn{47 position:absolute; top:92px; width:96px; height:96px;48 border-radius:50%; background:#2b3a86; box-shadow: 0 6px 12px rgba(0,0,0,0.25);49 display:flex; align-items:center; justify-content:center;50 }51 .circle-btn.left{ left:40px; }52 .circle-btn.right{ right:40px; background:#2b3a86; }53 .circle-btn svg{ width:48px; height:48px; fill:#d9e4ff; }54 55 /* Content area */56 .content{57 position:absolute; left:0; right:0; top:720px; bottom:160px;58 padding:0 56px;59 }60 .greeting{61 font-size:54px; font-weight:700; margin:36px 0 28px 0;62 }63 64 /* Cards row */65 .cards-row{66 display:flex; gap:28px; margin-top:10px;67 }68 .big-card{69 flex:0 0 680px; height:530px; border-radius:36px;70 background: linear-gradient(180deg, #7ad9ff 0%, #59a7ff 60%, #4d7aff 100%);71 box-shadow: 0 12px 30px rgba(0,0,0,0.35);72 position:relative; overflow:hidden;73 }74 .big-card .label{75 position:absolute; left:34px; top:28px;76 background:#153a86; color:#cfe5ff;77 padding:14px 26px; border-radius:26px; font-size:30px; font-weight:600;78 }79 .big-card .title{80 position:absolute; left:90px; right:90px; top:170px;81 font-size:108px; line-height:1.03; font-weight:800; color:#ffffff;82 text-shadow: 0 3px 8px rgba(0,0,0,0.2);83 }84 .big-card .lock{85 position:absolute; left:36px; bottom:28px; width:60px; height:60px;86 border-radius:50%; background:rgba(21,58,134,0.6);87 display:flex; align-items:center; justify-content:center;88 }89 .big-card .lock svg{ width:34px; height:34px; fill:#e9f2ff; }90 91 .side-card{92 flex:0 0 260px; height:530px; border-radius:36px;93 background:#e0e0e0; border:1px solid #bdbdbd;94 box-shadow: 0 12px 30px rgba(0,0,0,0.35);95 position:relative; overflow:hidden;96 display:flex; align-items:center; justify-content:center; color:#565656;97 font-size:34px; text-align:center; padding:20px;98 }99 .side-card .lock{100 position:absolute; left:20px; bottom:20px; width:56px; height:56px;101 border-radius:50%; background:rgba(35,29,105,0.6);102 display:flex; align-items:center; justify-content:center;103 }104 .side-card .lock svg{ width:30px; height:30px; fill:#fff; }105 106 /* Card description under row */107 .card-desc{108 margin-top:24px; display:flex; align-items:center; gap:26px;109 }110 .card-desc .text-group{111 flex:1;112 }113 .card-desc .h1{114 font-size:56px; font-weight:800; margin-bottom:14px;115 }116 .card-desc .p{117 font-size:34px; color:#d3cfe9;118 }119 .avatar{120 width:116px; height:116px; border-radius:50%;121 background:#E0E0E0; border:1px solid #BDBDBD;122 display:flex; align-items:center; justify-content:center; color:#757575;123 font-size:24px;124 }125 126 /* Offer card */127 .offer{128 margin-top:36px; padding-bottom:28px;129 }130 .offer-card{131 height:170px; border-radius:34px; background:#2f2a73;132 box-shadow: 0 12px 24px rgba(0,0,0,0.35);133 display:flex; align-items:center; padding:30px 36px; gap:26px;134 border:1px solid rgba(255,255,255,0.08);135 }136 .offer-icon{137 width:108px; height:108px; border-radius:24px;138 background:linear-gradient(180deg,#89b8ff,#6aa4ff);139 display:flex; align-items:center; justify-content:center;140 }141 .offer-icon svg{ width:64px; height:64px; fill:#ffffff; }142 .offer-text .title{ font-size:44px; font-weight:800; margin-bottom:12px; }143 .offer-text .subtitle{ font-size:36px; color:#d3cfe9; }144 .offer-chevron{145 margin-left:auto;146 }147 .offer-chevron svg{ width:42px; height:42px; fill:#ffffff; }148 149 /* Bottom nav bar */150 .navbar{151 position:absolute; left:0; right:0; bottom:0; height:160px;152 background:#231a55; border-top:1px solid rgba(255,255,255,0.08);153 display:flex; align-items:center; justify-content:space-around;154 padding:0 12px;155 }156 .nav-item{157 display:flex; flex-direction:column; align-items:center; gap:16px;158 color:#b9b4dc; font-size:30px;159 }160 .nav-item.active{ color:#ffffff; }161 .nav-item svg{ width:54px; height:54px; fill:currentColor; }162</style>163</head>164<body>165<div id="render-target">166 167 <!-- Top sky/mountains hero -->168 <div class="hero">169 <div class="hero-image">[IMG: Night sky with mountains and lake]</div>170 171 <!-- Calm brand representation -->172 <div class="calm-logo"><span class="moon">🌙</span>Calm</div>173 174 <!-- Left circular icon -->175 <div class="circle-btn left">176 <svg viewBox="0 0 24 24">177 <path d="M3 19l6-10 4 6 3-4 5 8H3z"/>178 </svg>179 </div>180 <!-- Right circular icon (gift) -->181 <div class="circle-btn right">182 <svg viewBox="0 0 24 24">183 <path d="M20 7h-3.2c.7-.5 1.2-1.3 1.2-2.2C18 3.8 17.2 3 16.2 3c-1.2 0-2.4.9-3.2 2-.8-1.1-2-2-3.2-2C8.8 3 8 3.8 8 4.8c0 .9.5 1.7 1.2 2.2H6v4h16V7zm-9.2-2c.5-.7 1.2-1.2 2-1.2.5 0 1 .4 1 .9s-.4 1.1-1 1.1h-2zm-2.6 0c0-.5.4-.9 1-.9.8 0 1.5.5 2 1.2h-2c-.6 0-1-.6-1-1.1zM6 12v9h6v-9H6zm8 0v9h6v-9h-6z"/>184 </svg>185 </div>186 </div>187 188 <!-- Content area -->189 <div class="content">190 <div class="greeting">Good Afternoon, Levi</div>191 192 <div class="cards-row">193 <!-- Big blue interactive card -->194 <div class="big-card">195 <div class="label">New & Interactive</div>196 <div class="title">De-stress<br>right now</div>197 <div class="lock">198 <svg viewBox="0 0 24 24">199 <path d="M12 2a5 5 0 00-5 5v3H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2v-8a2 2 0 00-2-2h-2V7a5 5 0 00-5-5zm-3 8V7a3 3 0 116 0v3H9z"/>200 </svg>201 </div>202 </div>203 204 <!-- Side preview card -->205 <div class="side-card">206 [IMG: Daily Calm preview with mountains]207 <div class="lock">208 <svg viewBox="0 0 24 24">209 <path d="M12 2a5 5 0 00-5 5v3H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2v-8a2 2 0 00-2-2h-2V7a5 5 0 00-5-5zm-3 8V7a3 3 0 116 0v3H9z"/>210 </svg>211 </div>212 </div>213 </div>214 215 <!-- Description under card -->216 <div class="card-desc">217 <div class="text-group">218 <div class="h1">De-stress right now</div>219 <div class="p">A 2-min. grounding exercise to soften stress</div>220 </div>221 <div class="avatar">[IMG: User Avatar]</div>222 </div>223 224 <!-- Special offer card -->225 <div class="offer">226 <div class="offer-card">227 <div class="offer-icon">228 <svg viewBox="0 0 24 24">229 <path d="M12 8a1 1 0 011 1v3.4l2.6 1.5a1 1 0 01-1 1.8l-3.4-2a1 1 0 01-.5-.9V9a1 1 0 011-1zm0-6a10 10 0 100 20 10 10 0 000-20zm0 2a8 8 0 110 16 8 8 0 010-16z"/>230 </svg>231 </div>232 <div class="offer-text">233 <div class="title">Special Welcome Offer</div>234 <div class="subtitle">Get 40% off Calm Premium - Today only!</div>235 </div>236 <div class="offer-chevron">237 <svg viewBox="0 0 24 24">238 <path d="M9 5l7 7-7 7" />239 </svg>240 </div>241 </div>242 </div>243 </div>244 245 <!-- Bottom navigation -->246 <div class="navbar">247 <div class="nav-item active">248 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>249 <div>Home</div>250 </div>251 <div class="nav-item">252 <svg viewBox="0 0 24 24"><path d="M21 14.5c0 3.6-4 6.5-9 6.5s-9-2.9-9-6.5c0-2.1 1.4-4 3.6-5.2A8 8 0 0112 6c4.9 0 9 2.9 9 6.5z"/></svg>253 <div>Sleep</div>254 </div>255 <div class="nav-item">256 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm11 20-6-6"/></svg>257 <div>Discover</div>258 </div>259 <div class="nav-item">260 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/></svg>261 <div>Profile</div>262 </div>263 <div class="nav-item">264 <svg viewBox="0 0 24 24"><path d="M12 2l2.6 6.9L22 9l-6 4.8L17.8 22 12 18.3 6.2 22 8 13.8 2 9l7.4-.1L12 2z"/></svg>265 <div>Premium</div>266 </div>267 </div>268 269</div>270</body>271</html>