GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Meditation Timer UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#000;11 color:#fff;12 }13 14 /* Top navigation */15 .topbar {16 position:absolute; left:0; right:0; top:0;17 padding:48px 40px 12px 40px;18 }19 .top-row {20 display:flex; align-items:center; justify-content:space-between;21 }22 .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }23 .tab-row {24 margin-top:26px;25 display:flex; align-items:flex-end; gap:54px;26 padding-left:120px;27 }28 .tab {29 font-size:56px; font-weight:600; letter-spacing:0.5px;30 color:#bdbdbd;31 padding-bottom:10px;32 position:relative;33 }34 .tab.active { color:#ffffff; }35 .tab.active::after {36 content:"";37 position:absolute; left:0; bottom:-8px;38 width:160px; height:6px; background:#ffffff; border-radius:3px;39 }40 41 /* Center bell area */42 .bell-area {43 position:absolute; left:0; right:0; top:300px;44 height:680px;45 display:flex; align-items:center; justify-content:center;46 }47 .bell-inner { width:900px; height:650px; position:relative; }48 .bell-title {49 text-align:center; font-size:34px; letter-spacing:2px; color:#cfcfcf;50 }51 .img-strip {52 position:absolute; left:50%; transform:translateX(-50%);53 top:120px; width:720px; height:240px;54 background:#E0E0E0; border:1px solid #BDBDBD;55 display:flex; align-items:center; justify-content:center; color:#757575;56 border-radius:8px;57 }58 .img-side {59 position:absolute; top:140px; width:200px; height:200px;60 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;61 display:flex; align-items:center; justify-content:center;62 border-radius:100px; opacity:0.6;63 }64 .img-side.left { left:40px; }65 .img-side.right { right:40px; }66 .badge {67 position:absolute; left:50%; transform:translateX(-50%);68 top:330px; width:78px; height:78px; background:#fff; color:#000;69 display:flex; align-items:center; justify-content:center;70 border-radius:50%; font-weight:700; font-size:34px; box-shadow:0 4px 10px rgba(0,0,0,0.5);71 }72 .bell-name {73 position:absolute; left:0; right:0; top:430px; text-align:center;74 font-size:44px; font-weight:600;75 }76 77 /* List section */78 .list {79 position:absolute; left:40px; right:40px; top:1020px;80 border-top:1px solid #1d1d1d;81 }82 .row {83 display:flex; align-items:center; justify-content:space-between;84 padding:36px 8px; border-bottom:1px solid #1d1d1d;85 font-size:38px;86 }87 .row .label { color:#ffffff; }88 .row .value { color:#cfcfcf; display:flex; align-items:center; gap:22px; }89 .pill {90 background:#C9A24A; color:#000; font-weight:700;91 padding:10px 18px; border-radius:14px; font-size:28px; margin-right:16px;92 }93 .chev {94 width:24px; height:24px;95 }96 97 /* Bottom controls */98 .bottom-controls {99 position:absolute; left:0; right:0; top:1530px;100 display:flex; align-items:center; justify-content:center;101 }102 .play {103 width:240px; height:240px; border-radius:50%;104 border:3px solid #fff; display:flex; align-items:center; justify-content:center;105 background:#232323;106 }107 .play svg { margin-left:8px; }108 109 .vol-row {110 position:absolute; left:84px; top:1604px; display:flex; align-items:center; gap:14px; color:#cfcfcf; font-size:36px;111 }112 .dots {113 position:absolute; right:84px; top:1604px; display:flex; gap:12px;114 }115 .dot { width:16px; height:16px; background:#cfcfcf; border-radius:50%; }116 117 .footer-text {118 position:absolute; left:0; right:0; bottom:120px; text-align:center; color:#a8a8a8; font-size:36px;119 }120 .home-indicator {121 position:absolute; left:50%; transform:translateX(-50%);122 bottom:40px; width:360px; height:10px; background:#ffffff; border-radius:6px; opacity:0.85;123 }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Top bar -->130 <div class="topbar">131 <div class="top-row">132 <div class="icon-btn">133 <svg width="48" height="48" viewBox="0 0 48 48">134 <line x1="8" y1="8" x2="40" y2="40" stroke="#fff" stroke-width="4" stroke-linecap="round"></line>135 <line x1="8" y1="40" x2="40" y2="8" stroke="#fff" stroke-width="4" stroke-linecap="round"></line>136 </svg>137 </div>138 <div class="icon-btn">139 <svg width="56" height="56" viewBox="0 0 56 56">140 <circle cx="28" cy="28" r="6" fill="#fff"></circle>141 <path d="M28 6 L32 10 L40 8 L42 16 L48 20 L44 26 L48 32 L42 36 L40 44 L32 42 L28 46 L24 42 L16 44 L14 36 L8 32 L12 26 L8 20 L14 16 L16 8 L24 10 Z" fill="none" stroke="#fff" stroke-width="3" stroke-linejoin="round"></path>142 </svg>143 </div>144 </div>145 146 <div class="tab-row">147 <div class="tab active">Timer</div>148 <div class="tab">Presets</div>149 </div>150 </div>151 152 <!-- Bell area -->153 <div class="bell-area">154 <div class="bell-inner">155 <div class="bell-title">ENDING BELL</div>156 157 <div class="img-side left">[IMG]</div>158 <div class="img-side right">[IMG]</div>159 160 <div class="img-strip">[IMG: Duduk instrument]</div>161 <div class="badge">3</div>162 <div class="bell-name">Duduk</div>163 </div>164 </div>165 166 <!-- List -->167 <div class="list">168 <div class="row">169 <div class="label">Duration</div>170 <div class="value">171 <span>Meditation 15:00</span>172 <svg class="chev" viewBox="0 0 24 24">173 <path d="M8 4 L16 12 L8 20" fill="none" stroke="#cfcfcf" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>174 </svg>175 </div>176 </div>177 178 <div class="row">179 <div class="label">Ambient sounds</div>180 <div class="value">181 <span class="pill">NEW</span>182 <svg class="chev" viewBox="0 0 24 24">183 <path d="M8 4 L16 12 L8 20" fill="none" stroke="#cfcfcf" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>184 </svg>185 </div>186 </div>187 188 <div class="row">189 <div class="label">Interval bells</div>190 <div class="value">191 <span>None</span>192 <svg class="chev" viewBox="0 0 24 24">193 <path d="M8 4 L16 12 L8 20" fill="none" stroke="#cfcfcf" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>194 </svg>195 </div>196 </div>197 198 <div class="row">199 <div class="label">Starting bell</div>200 <div class="value">201 <span>None</span>202 <svg class="chev" viewBox="0 0 24 24">203 <path d="M8 4 L16 12 L8 20" fill="none" stroke="#cfcfcf" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>204 </svg>205 </div>206 </div>207 </div>208 209 <!-- Bottom controls -->210 <div class="bottom-controls">211 <div class="play">212 <svg width="86" height="86" viewBox="0 0 86 86">213 <polygon points="28,18 70,43 28,68" fill="#fff"></polygon>214 </svg>215 </div>216 </div>217 218 <div class="vol-row">219 <svg width="44" height="44" viewBox="0 0 44 44">220 <path d="M8 28 L8 16 L18 16 L26 10 L26 34 L18 28 Z" fill="#cfcfcf"></path>221 <path d="M30 14 C36 20 36 24 30 30" fill="none" stroke="#cfcfcf" stroke-width="3" stroke-linecap="round"></path>222 </svg>223 <span>24%</span>224 </div>225 226 <div class="dots">227 <div class="dot"></div>228 <div class="dot"></div>229 <div class="dot"></div>230 </div>231 232 <div class="footer-text">Revert to basic Timer »»</div>233 <div class="home-indicator"></div>234 235</div>236</body>237</html>