GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Meditation Timer - Mock UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0E0E10; /* deep charcoal */15 color: #EDECEC;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, system-ui, sans-serif;17 }18 19 .screen-pad { padding: 48px; }20 21 /* Top bar */22 .topbar {23 height: 120px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 16px 24px;28 margin-top: 24px;29 }30 .logo-squiggle {31 width: 84px;32 height: 32px;33 border-radius: 16px;34 color: #BDBDC2;35 font-weight: 800;36 font-size: 36px;37 letter-spacing: 2px;38 display: flex; align-items: center; justify-content: center;39 opacity: .9;40 }41 .right-actions { display: flex; align-items: center; gap: 20px; }42 43 .coin-pill {44 display: inline-flex;45 align-items: center;46 gap: 14px;47 padding: 10px 22px;48 border-radius: 30px;49 border: 2px solid #3A3A44;50 background: #17171B;51 color: #DADAE0;52 font-weight: 700;53 }54 .coin-pill svg { width: 30px; height: 30px; }55 .more-vert {56 width: 8px; height: 36px; display: inline-flex; flex-direction: column; justify-content: space-between; align-items: center;57 }58 .dot { width: 8px; height: 8px; background: #BEBEC6; border-radius: 50%; opacity: .9; }59 60 /* Chips */61 .chip-row {62 display: flex;63 flex-wrap: wrap;64 gap: 22px;65 padding: 18px 24px 0 24px;66 }67 .chip {68 background: #1B1C22;69 color: #D7D7DC;70 padding: 22px 30px;71 border-radius: 34px;72 border: 1px solid #2B2C35;73 font-size: 36px;74 line-height: 36px;75 }76 77 /* Section heading */78 .section-title {79 font-family: Georgia, "Times New Roman", Times, serif;80 font-weight: 800;81 font-size: 72px;82 color: #CFCFD6;83 margin: 18px 24px 26px 24px;84 }85 86 /* Hero image placeholder */87 .hero {88 margin: 0 24px;89 border-radius: 40px;90 overflow: hidden;91 }92 .img-ph {93 height: 540px;94 background: #E0E0E0;95 border: 1px solid #BDBDBD;96 color: #757575;97 display: flex; align-items: center; justify-content: center;98 font-size: 36px;99 }100 101 /* Content block */102 .content {103 margin: 36px 24px 0 24px;104 color: #ECECEF;105 }106 .content h2 {107 font-family: Georgia, "Times New Roman", Times, serif;108 font-size: 84px;109 line-height: 1.1;110 margin: 12px 0 20px 0;111 color: #E9E9EE;112 }113 .content p {114 font-size: 36px;115 line-height: 1.7;116 color: #D1D1D8;117 margin: 8px 0 18px 0;118 }119 120 /* Duration selector */121 .duration {122 margin-top: 32px;123 background: #1E1F26;124 border: 1px solid #343540;125 border-radius: 26px;126 padding: 28px 32px;127 display: flex;128 align-items: center;129 justify-content: space-between;130 }131 .duration-left { display: flex; align-items: center; gap: 18px; color: #ECECF2; font-size: 36px; }132 .duration svg { width: 40px; height: 40px; color: #ECECF2; }133 .chev-down {134 width: 36px; height: 36px;135 }136 137 /* Play button */138 .play-wrap {139 margin: 24px 24px;140 background: #FFFFFF;141 border-radius: 36px;142 padding: 30px;143 box-shadow: 0 2px 0 rgba(255,255,255,0.1) inset;144 }145 .play-btn {146 width: 100%;147 height: 120px;148 background: #FFFFFF;149 border: 1px solid #E7E7E7;150 border-radius: 28px;151 display: flex; align-items: center; justify-content: center;152 }153 .play-btn svg { width: 44px; height: 44px; fill: #111214; }154 155 /* Bottom home indicator */156 .home-indicator {157 position: absolute;158 left: 50%;159 transform: translateX(-50%);160 bottom: 30px;161 width: 300px;162 height: 10px;163 border-radius: 8px;164 background: #A5A5AA33;165 }166</style>167</head>168<body>169<div id="render-target">170 <div class="topbar">171 <div class="logo-squiggle">~m~</div>172 <div class="right-actions">173 <div class="coin-pill">174 <svg viewBox="0 0 24 24" fill="none" stroke="#E8E8ED" stroke-width="1.6">175 <circle cx="12" cy="12" r="9" stroke="#D5D5DB"></circle>176 <path d="M12 6l1.7 3.4 3.7.5-2.7 2.6.7 3.6L12 14.3 8.6 16l.7-3.6L6.6 9.9l3.7-.5L12 6z" fill="#E8E8ED" stroke="none"></path>177 </svg>178 <span>68770</span>179 </div>180 <div class="more-vert" aria-hidden="true">181 <div class="dot"></div><div class="dot"></div><div class="dot"></div>182 </div>183 </div>184 </div>185 186 <div class="chip-row">187 <div class="chip">😴 Sleep</div>188 <div class="chip">🚨 Emergency</div>189 <div class="chip">💜 Donate</div>190 <div class="chip">😇 Gi...</div>191 </div>192 <div class="chip-row" style="margin-top: 12px;">193 <div class="chip">🌞 Daily meditation</div>194 <div class="chip">⏳ Timer</div>195 <div class="chip">🏆 Challenges</div>196 </div>197 198 <div class="section-title">The Medito course</div>199 200 <div class="hero">201 <div class="img-ph">[IMG: Hourglass desert illustration]</div>202 </div>203 204 <div class="content">205 <h2>Meditation timer</h2>206 <p>A simple timer with a bell at the start, and a bell at the end of the session.</p>207 <p>If you have never meditated before, we recommend that you try the courses first.</p>208 209 <div class="duration">210 <div class="duration-left">211 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">212 <circle cx="12" cy="12" r="8.5"></circle>213 <path d="M12 7v5l3 2"></path>214 </svg>215 <span>3 mins</span>216 </div>217 <svg class="chev-down" viewBox="0 0 24 24" fill="none" stroke="#D6D6DB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">218 <path d="M6 9l6 6 6-6"></path>219 </svg>220 </div>221 </div>222 223 <div class="play-wrap">224 <div class="play-btn">225 <svg viewBox="0 0 24 24">226 <path d="M8 6l10 6-10 6z"></path>227 </svg>228 </div>229 </div>230 231 <div class="home-indicator"></div>232</div>233</body>234</html>