GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Yoga Session 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;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #F2F3F5;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 padding: 0 36px;23 box-sizing: border-box;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #2E2E2E;28 font-weight: 600;29 font-size: 44px;30 }31 .sb-left { display: flex; align-items: center; gap: 24px; }32 .sb-right { display: flex; align-items: center; gap: 26px; }33 .tiny-dot {34 width: 22px; height: 22px; background: #9EA3A8; border-radius: 50%;35 }36 .wifi {37 width: 44px; height: 28px; border-radius: 4px; border: 3px solid #757B80; border-top: none; position: relative;38 }39 .battery {40 width: 64px; height: 28px; border: 3px solid #757B80; border-radius: 6px; position: relative;41 }42 .battery::after {43 content: ""; position: absolute; right: -10px; top: 7px; width: 10px; height: 14px; background: #757B80; border-radius: 2px;44 }45 46 /* Header */47 .header {48 position: absolute;49 top: 140px;50 left: 0;51 width: 1080px;52 padding: 0 40px;53 box-sizing: border-box;54 display: flex;55 align-items: center;56 justify-content: space-between;57 }58 .left-checkbox {59 width: 64px; height: 64px; border: 3px solid #B6BAC0; border-radius: 12px;60 }61 .title {62 flex: 1;63 text-align: center;64 font-size: 60px;65 font-weight: 800;66 color: #1D1F22;67 }68 .round-icon {69 width: 96px; height: 96px; border-radius: 50%;70 background: #FFFFFF; box-shadow: 0 6px 20px rgba(0,0,0,0.08);71 display: flex; align-items: center; justify-content: center; margin-left: 18px;72 }73 .round-icon svg { width: 52px; height: 52px; }74 75 /* Empty content card */76 .empty-card {77 position: absolute;78 top: 360px;79 left: 72px;80 width: 936px;81 height: 930px;82 border-radius: 32px;83 background: #EDEEEF;84 }85 .ghost-line {86 position: absolute; left: 140px; right: 140px; height: 70px; background: #DFE2E6; border-radius: 40px;87 opacity: 0.7;88 }89 .ghost-line:nth-child(1) { top: 160px; }90 .ghost-line:nth-child(2) { top: 360px; width: calc(100% - 280px); }91 .plus-fab {92 position: absolute; right: 40px; bottom: 210px; width: 150px; height: 150px;93 border-radius: 50%; background: #FFFFFF; box-shadow: 0 14px 30px rgba(0,0,0,0.12);94 display: flex; align-items: center; justify-content: center;95 }96 .plus-fab svg { width: 72px; height: 72px; }97 .empty-text {98 position: absolute; top: 640px; left: 0; width: 100%;99 text-align: center; color: #111; font-weight: 800; font-size: 56px;100 }101 .empty-sub {102 position: absolute; top: 740px; left: 0; width: 100%;103 text-align: center; color: #6C7177; font-size: 44px; font-weight: 500;104 }105 106 /* Chips */107 .chips {108 position: absolute;109 top: 1330px;110 left: 0;111 width: 1080px;112 padding: 0 32px;113 box-sizing: border-box;114 display: flex; gap: 28px;115 }116 .chip {117 background: #FAFAFB; border: 2px solid #DADDE0; color: #3A3D41; border-radius: 60px;118 padding: 26px 34px; font-size: 42px; font-weight: 700; display: inline-flex; align-items: center; gap: 18px;119 }120 .chip svg { width: 42px; height: 42px; }121 122 /* Input row */123 .input-row {124 position: absolute;125 top: 1430px;126 left: 24px;127 width: 1032px;128 height: 120px;129 border-radius: 60px;130 background: #FFFFFF;131 border: 2px solid #E2E5EA;132 display: flex; align-items: center; padding: 0 30px; box-sizing: border-box;133 box-shadow: 0 8px 20px rgba(0,0,0,0.06);134 }135 .input-placeholder { flex: 1; color: #9AA0A6; font-size: 44px; }136 .input-tools { display: flex; align-items: center; gap: 28px; }137 .tool-icon { width: 70px; height: 70px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }138 .tool-icon svg { width: 44px; height: 44px; }139 .send {140 width: 104px; height: 104px; border-radius: 50%; background: #FCE4E9;141 display: flex; align-items: center; justify-content: center; margin-left: 18px;142 }143 .send svg { width: 62px; height: 62px; }144 145 /* Keyboard mock */146 .keyboard {147 position: absolute;148 bottom: 0;149 left: 0;150 width: 1080px;151 height: 910px;152 background: #1E1E1F;153 border-top-left-radius: 24px;154 border-top-right-radius: 24px;155 box-shadow: 0 -10px 30px rgba(0,0,0,0.3);156 padding: 30px;157 box-sizing: border-box;158 }159 .kb-row { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 26px; }160 .key {161 height: 120px; flex: 1;162 background: #2A2A2B; color: #EDEDED; border-radius: 22px;163 display: flex; align-items: center; justify-content: center;164 font-size: 46px; font-weight: 700;165 }166 .key.wide { flex: 1.5; }167 .key.wider { flex: 2; }168 .key.icon { font-size: 36px; color: #C8C8C8; }169 .bottom-controls { display: flex; align-items: center; gap: 22px; margin-top: 28px; }170 .space { flex: 1; height: 120px; background: #2A2A2B; border-radius: 22px; }171 .round-btn {172 width: 120px; height: 120px; background: #2A2A2B; border-radius: 28px; display: flex; align-items: center; justify-content: center; color: #EDEDED;173 }174 .home-indicator {175 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);176 width: 540px; height: 16px; background: #EDEDED; border-radius: 10px; opacity: 0.7;177 }178 179 /* Simple helper icons */180 .dot-icon { width: 8px; height: 8px; border-radius: 50%; background: #6B7280; margin: 2px; }181</style>182</head>183<body>184<div id="render-target">185 186 <!-- Status Bar -->187 <div class="status-bar">188 <div class="sb-left">189 <div>3:48</div>190 <div class="tiny-dot"></div>191 <div class="tiny-dot"></div>192 <div class="tiny-dot"></div>193 </div>194 <div class="sb-right">195 <div class="wifi"></div>196 <div class="battery"></div>197 </div>198 </div>199 200 <!-- Header -->201 <div class="header">202 <div class="left-checkbox"></div>203 <div class="title">yoga session</div>204 <div class="round-icon">205 <!-- Star -->206 <svg viewBox="0 0 24 24">207 <path d="M12 2l3.2 6.5 7.1 1-5.1 4.9 1.3 7.1L12 18l-6.5 3.5 1.3-7.1-5.1-4.9 7.1-1L12 2z" fill="#3B82F6"/>208 </svg>209 </div>210 <div class="round-icon">211 <!-- More/ellipsis -->212 <svg viewBox="0 0 24 24">213 <circle cx="5" cy="12" r="2" fill="#6B7280"></circle>214 <circle cx="12" cy="12" r="2" fill="#6B7280"></circle>215 <circle cx="19" cy="12" r="2" fill="#6B7280"></circle>216 </svg>217 </div>218 </div>219 220 <!-- Empty state card -->221 <div class="empty-card">222 <div class="ghost-line"></div>223 <div class="ghost-line"></div>224 <div class="plus-fab">225 <svg viewBox="0 0 24 24">226 <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z" fill="#7A7F86"/>227 </svg>228 </div>229 <div class="empty-text">No tasks here yet</div>230 <div class="empty-sub">Start adding tasks by tapping the “+” button</div>231 </div>232 233 <!-- Chips -->234 <div class="chips">235 <div class="chip">236 <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 016 6v4l2 2v2H4v-2l2-2V8a6 6 0 016-6zm0 4a4 4 0 00-4 4v6h8V10a4 4 0 00-4-4z" fill="#A0A6AC"/></svg>237 Next week238 </div>239 <div class="chip">240 <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 016 6v4l2 2v2H4v-2l2-2V8a6 6 0 016-6z" fill="#A0A6AC"/></svg>241 Someday242 </div>243 <div class="chip">244 <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 016 6v4l2 2v2H4v-2l2-2V8a6 6 0 016-6z" fill="#A0A6AC"/></svg>245 Custom246 </div>247 </div>248 249 <!-- Input Row -->250 <div class="input-row">251 <div class="input-placeholder">want to...</div>252 <div class="input-tools">253 <div class="tool-icon">254 <!-- Document icon -->255 <svg viewBox="0 0 24 24">256 <path d="M6 2h9l5 5v15H6z" fill="none" stroke="#9AA0A6" stroke-width="2"/>257 <path d="M15 2v6h6" fill="none" stroke="#9AA0A6" stroke-width="2"/>258 </svg>259 </div>260 <div class="tool-icon">261 <!-- Hash icon -->262 <svg viewBox="0 0 24 24">263 <path d="M4 9h16M4 15h16M9 4L7 20M17 4l-2 16" stroke="#9AA0A6" stroke-width="2" fill="none" stroke-linecap="round"/>264 </svg>265 </div>266 <div class="send">267 <!-- Up arrow -->268 <svg viewBox="0 0 24 24">269 <path d="M12 5l6 6h-4v8h-4v-8H6z" fill="#7A7F86"/>270 </svg>271 </div>272 </div>273 </div>274 275 <!-- Keyboard -->276 <div class="keyboard">277 <div class="kb-row">278 <div class="key">Q</div><div class="key">W</div><div class="key">E</div><div class="key">R</div><div class="key">T</div><div class="key">Y</div><div class="key">U</div><div class="key">I</div><div class="key">O</div><div class="key">P</div>279 </div>280 <div class="kb-row">281 <div class="key">A</div><div class="key">S</div><div class="key">D</div><div class="key">F</div><div class="key">G</div><div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>282 </div>283 <div class="kb-row">284 <div class="key wide">⇧</div>285 <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div><div class="key">B</div><div class="key">N</div><div class="key">M</div>286 <div class="key wide">⌫</div>287 </div>288 <div class="bottom-controls">289 <div class="round-btn">?123</div>290 <div class="round-btn icon">,</div>291 <div class="round-btn">🙂</div>292 <div class="space"></div>293 <div class="round-btn icon">.</div>294 <div class="round-btn">295 <!-- Microphone -->296 <svg viewBox="0 0 24 24" width="38" height="38">297 <path d="M12 3a3 3 0 013 3v6a3 3 0 01-6 0V6a3 3 0 013-3z" fill="#EDEDED"/>298 <path d="M6 11a6 6 0 0012 0M12 17v4M8 21h8" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"/>299 </svg>300 </div>301 <div class="round-btn">✓</div>302 </div>303 <div class="home-indicator"></div>304 </div>305 306</div>307</body>308</html>