GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Self Care Checklist</title>6<style>7 body{margin:0;padding:0;background:transparent;font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;color:#222;}8 #render-target{9 width:1080px;height:2400px;position:relative;overflow:hidden;10 background:#f3efe4;11 }12 13 /* Header sky */14 .header{15 position:absolute;left:0;top:0;width:1080px;height:540px;16 background:linear-gradient(180deg,#79BCEB 0%, #9CCFF2 45%, #BFE2FF 100%);17 }18 /* soft clouds */19 .cloud{position:absolute;background:#9fd0f3;border-radius:150px;opacity:.6;filter:blur(1px)}20 .cloud.c1{width:320px;height:140px;left:40px;top:120px}21 .cloud.c2{width:420px;height:160px;right:40px;top:70px}22 .cloud.c3{width:380px;height:140px;left:160px;bottom:40px}23 24 /* Status bar */25 .status{26 position:absolute;top:20px;left:24px;right:24px;height:48px;color:#0e3752;27 display:flex;align-items:center;justify-content:space-between;font-weight:600;letter-spacing:1px;28 }29 .status .right{display:flex;gap:18px;align-items:center}30 .status .dot{width:8px;height:8px;background:#0e3752;border-radius:50%}31 .icon-battery{width:38px;height:18px;border:2px solid #08324a;border-radius:4px;position:relative}32 .icon-battery::after{content:"";position:absolute;right:-6px;top:4px;width:4px;height:8px;background:#08324a;border-radius:1px}33 .icon-battery .fill{position:absolute;left:2px;top:2px;height:12px;width:24px;background:#08324a;border-radius:2px}34 35 /* Header content */36 .header-txt{position:absolute;top:150px;left:0;width:100%;text-align:center;color:white}37 .header-txt .hello{font-size:44px;font-weight:600;opacity:.95}38 .header-txt .nice{font-size:72px;font-weight:800;margin-top:10px;letter-spacing:.5px}39 40 .round-btn{41 position:absolute;width:120px;height:120px;border-radius:60px;background:rgba(255,255,255,.25);42 display:flex;align-items:center;justify-content:center;backdrop-filter: blur(2px);43 top:110px;44 }45 .round-btn.left{left:72px}46 .round-btn.right{right:72px}47 48 /* Checklist area */49 .content{50 position:absolute;left:0;right:0;top:520px;bottom:0;51 padding:30px 32px 190px 32px;52 }53 54 .section-head{55 display:flex;align-items:center;justify-content:space-between;56 padding:8px 12px;margin:10px 6px 24px 6px;57 }58 .section-head .title{font-size:54px;font-weight:800;color:#2c2a26}59 .section-head .date{font-size:34px;color:#6b695f}60 61 .card{62 background:#ffffff;border-radius:46px;63 padding:44px 44px; margin:26px 6px; box-shadow:0 2px 0 rgba(0,0,0,0.04);64 }65 .card .row{display:flex;align-items:center}66 .card .title{font-size:48px;font-weight:800;color:#23211d}67 .check{68 margin-left:auto;width:56px;height:56px;border-radius:28px;background:#e8f4ea;display:flex;align-items:center;justify-content:center;69 }70 .check svg{width:34px;height:34px;fill:#3aa157}71 72 /* journaling style with date column */73 .date-col{74 width:150px;margin-right:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;75 color:#1f1c18;76 }77 .date-col .d-big{font-size:84px;font-weight:900}78 .date-col .d-mon{font-size:34px;color:#777}79 .muted{font-size:40px;color:#878787;margin-top:26px}80 81 /* Bottom nav */82 .bottom-nav{83 position:absolute;left:0;right:0;bottom:0;height:176px;background:#ffffff;border-top-left-radius:36px;border-top-right-radius:36px;84 box-shadow:0 -1px 0 rgba(0,0,0,0.06);padding:18px 40px 30px 40px;85 }86 .nav-items{display:flex;justify-content:space-between;align-items:flex-end;height:100%}87 .nav-item{display:flex;flex-direction:column;align-items:center;color:#777}88 .nav-item.active{color:#1f1f1f}89 .nav-item .label{font-size:34px;margin-top:12px}90 .nav-icon{width:72px;height:72px;border-radius:36px;display:flex;align-items:center;justify-content:center}91 .nav-item.active .nav-icon{background:#f2f2f2}92 /* tiny gift and avatar icons */93 .mini-icon svg{width:56px;height:56px;fill:white}94</style>95</head>96<body>97<div id="render-target">98 99 <!-- Header sky -->100 <div class="header">101 <div class="cloud c1"></div>102 <div class="cloud c2"></div>103 <div class="cloud c3"></div>104 105 <div class="status">106 <div class="left">9:39</div>107 <div class="right">108 <span class="dot"></span>109 <span class="dot" style="opacity:.6"></span>110 <span class="dot" style="opacity:.5"></span>111 <svg width="30" height="20" viewBox="0 0 24 24" fill="#0e3752"><path d="M4 18h16c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1H4c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1zm1-9h14v8H5V9z"/></svg>112 <div class="icon-battery"><div class="fill"></div></div>113 </div>114 </div>115 116 <div class="round-btn left mini-icon" title="gift">117 <svg viewBox="0 0 24 24"><path d="M20 7h-2.1c.6-.6 1.1-1.5 1.1-2.5C19 3.1 17.9 2 16.5 2S14 3.1 14 4.5c0 .2 0 .3.1.5h-4.2c.1-.2.1-.3.1-.5C10 3.1 8.9 2 7.5 2S5 3.1 5 4.5C5 5.5 5.5 6.4 6.1 7H4c-1.1 0-2 .9-2 2v3h20V9c0-1.1-.9-2-2-2zM7.5 4C8.3 4 9 4.7 9 5.5S8.3 7 7.5 7 6 6.3 6 5.5 6.7 4 7.5 4zm9 0c.8 0 1.5.7 1.5 1.5S17.3 7 16.5 7 15 6.3 15 5.5 15.7 4 16.5 4zM2 13v7c0 1.1.9 2 2 2h7v-9H2zm11 9h7c1.1 0 2-.9 2-2v-7h-9v9z"/></svg>118 </div>119 <div class="round-btn right mini-icon" title="profile">120 <svg viewBox="0 0 24 24"><path d="M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm0 2c-4.4 0-8 2.7-8 6v2h16v-2c0-3.3-3.6-6-8-6z"/></svg>121 </div>122 123 <div class="header-txt">124 <div class="hello">hey Cole!</div>125 <div class="nice">have a lovely day</div>126 </div>127 </div>128 129 <!-- Content -->130 <div class="content">131 <div class="section-head">132 <div class="title">your self-care checklist!</div>133 <div class="date">Thu • Dec 14</div>134 </div>135 136 <div class="card">137 <div class="row">138 <div class="title">how are you feeling?</div>139 <div class="check" aria-label="completed">140 <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>141 </div>142 </div>143 </div>144 145 <div class="card">146 <div class="row">147 <div class="title">mindful breathing</div>148 <div class="check" aria-label="completed">149 <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>150 </div>151 </div>152 </div>153 154 <div class="card">155 <div class="row">156 <div class="date-col">157 <div class="d-big">14</div>158 <div class="d-mon">Dec</div>159 </div>160 <div style="flex:1">161 <div class="title">today’s journaling</div>162 <div class="muted">✏️ tap to write your thoughts</div>163 </div>164 </div>165 </div>166 167 <div class="card">168 <div class="row">169 <div class="title">today’s affirmation</div>170 <div class="check" aria-label="completed">171 <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>172 </div>173 </div>174 </div>175 176 <div class="card">177 <div class="row">178 <div class="date-col">179 <div class="d-big">14</div>180 <div class="d-mon">Dec</div>181 </div>182 <div style="flex:1">183 <div class="title">end of year reflection 🎄👯♀️</div>184 <div class="muted">✏️ tap to write your thoughts</div>185 </div>186 </div>187 </div>188 </div>189 190 <!-- Bottom navigation -->191 <div class="bottom-nav">192 <div class="nav-items">193 <div class="nav-item active">194 <div class="nav-icon">195 <svg width="44" height="44" viewBox="0 0 24 24" fill="#222"><path d="M12 3 3 10v10c0 .6.4 1 1 1h6v-6h4v6h6c.6 0 1-.4 1-1V10L12 3z"/></svg>196 </div>197 <div class="label">today</div>198 </div>199 <div class="nav-item">200 <div class="nav-icon">201 <svg width="44" height="44" viewBox="0 0 24 24" fill="#666"><path d="M12 2a5 5 0 0 0-5 5c0 1.6.8 3.1 2.1 4H5v3h14v-3h-4.1A5 5 0 0 0 12 2zM5 18h14v2H5z"/></svg>202 </div>203 <div class="label">meditate</div>204 </div>205 <div class="nav-item">206 <div class="nav-icon">207 <svg width="44" height="44" viewBox="0 0 24 24" fill="#666"><path d="M12 6l-7 12h14L12 6zm0 3.7 3.7 6.3H8.3L12 9.7z"/></svg>208 </div>209 <div class="label">courses</div>210 </div>211 <div class="nav-item">212 <div class="nav-icon">213 <svg width="44" height="44" viewBox="0 0 24 24" fill="#666"><path d="M21 12.5A6.5 6.5 0 1 1 8.5 0a6.5 6.5 0 0 0 0 13A6.5 6.5 0 0 0 21 12.5z"/></svg>214 </div>215 <div class="label">sleep</div>216 </div>217 <div class="nav-item">218 <div class="nav-icon">219 <svg width="44" height="44" viewBox="0 0 24 24" fill="#666"><path d="M6 2h10c1.1 0 2 .9 2 2v18l-7-3-7 3V4c0-1.1.9-2 2-2z"/></svg>220 </div>221 <div class="label">journal</div>222 </div>223 </div>224 </div>225 226</div>227</body>228</html>