GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Simple Habit Me</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px; position: relative; overflow: hidden;9 background: #0f1316; color: #e7f2f4;10 }11 12 /* Status bar */13 .status-bar {14 position: absolute; left: 0; top: 0; width: 100%; height: 100px;15 display: flex; align-items: center; justify-content: space-between;16 padding: 0 40px; color: #dfe6ea; font-weight: 600;17 }18 .status-right { display: flex; align-items: center; gap: 28px; }19 20 /* Header */21 .header {22 position: absolute; top: 140px; left: 40px;23 font-size: 62px; font-weight: 700; color: #cfd8dc;24 }25 26 /* Profile */27 .profile {28 position: absolute; top: 260px; left: 0; width: 100%;29 display: flex; flex-direction: column; align-items: center;30 }31 .avatar {32 width: 260px; height: 260px; border-radius: 50%;33 background: #E0E0E0; border: 1px solid #BDBDBD;34 display: flex; align-items: center; justify-content: center;35 color: #757575; font-size: 32px;36 box-shadow: 0 0 0 8px rgba(255,255,255,0.04);37 }38 .name {39 margin-top: 32px; font-size: 50px; color: #cbd4d8;40 }41 42 /* Progress section */43 .progress-wrap {44 position: absolute; top: 640px; left: 0; width: 100%;45 padding: 0 60px;46 }47 .progress-title { font-size: 44px; color: #9fb2ba; margin-bottom: 18px; }48 .metrics {49 display: flex; justify-content: space-between; gap: 30px;50 }51 .metric {52 flex: 1; background: rgba(255,255,255,0.02); border-radius: 16px;53 padding: 40px 24px; text-align: center;54 }55 .metric .num { font-size: 86px; letter-spacing: 2px; margin-top: 10px; }56 .metric .label { margin-top: 14px; font-size: 36px; color: #8aa0a7; line-height: 46px; }57 .metric svg { width: 44px; height: 44px; fill: #8fd1d1; }58 59 /* Modal */60 .modal {61 position: absolute; left: 50%; top: 1150px; transform: translateX(-50%);62 width: 960px; border-radius: 20px; background: #69c0c3; color: #ffffff;63 padding: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.35);64 }65 .modal-title {66 font-size: 54px; text-align: center; line-height: 66px; margin-bottom: 40px;67 }68 .modal-actions {69 display: flex; gap: 36px; justify-content: center;70 }71 .btn {72 width: 420px; height: 120px; font-size: 40px; border-radius: 18px;73 border: 3px solid rgba(255,255,255,0.85); background: transparent; color: #ffffff;74 }75 .btn.filled { background: rgba(255,255,255,0.2); }76 .btn:hover { filter: brightness(1.05); }77 78 /* History & Calendar */79 .history {80 position: absolute; top: 1480px; left: 40px; right: 40px;81 }82 .history-title { font-size: 46px; color: #9fb2ba; margin-bottom: 20px; }83 .month-row {84 display: flex; align-items: center; justify-content: center;85 color: #cbd4d8; font-size: 48px; margin-bottom: 24px; gap: 34px;86 }87 .chev { width: 36px; height: 36px; fill: #7f8f95; }88 .weekdays {89 display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px;90 color: #8aa0a7; font-size: 36px; text-align: center; margin-bottom: 16px;91 }92 .days {93 display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px;94 color: #cbd4d8; font-size: 40px; text-align: center;95 }96 .day {97 height: 120px; display: flex; align-items: center; justify-content: center;98 border-radius: 18px; background: rgba(255,255,255,0.02);99 }100 .day.today { background: rgba(255,255,255,0.08); }101 102 /* Bottom navigation */103 .bottom-nav {104 position: absolute; bottom: 0; left: 0; width: 100%; height: 180px;105 background: rgba(0,0,0,0.35); display: flex; justify-content: space-around; align-items: center;106 border-top: 1px solid rgba(255,255,255,0.06);107 }108 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #8aa0a7; }109 .nav-item.active { color: #ffffff; }110 .nav-icon {111 width: 90px; height: 90px; border-radius: 999px; background: rgba(255,255,255,0.07);112 display: flex; align-items: center; justify-content: center;113 }114 .nav-icon svg { width: 50px; height: 50px; fill: #cfd8dc; }115 .nav-label { font-size: 34px; }116 117</style>118</head>119<body>120<div id="render-target">121 122 <!-- Status bar -->123 <div class="status-bar">124 <div class="time">12:46</div>125 <div class="status-right">126 <!-- Simple headphone icon -->127 <svg viewBox="0 0 24 24" width="36" height="36" fill="#bfc7cb"><path d="M12 3c-5 0-9 4-9 9v6a3 3 0 0 0 3 3h2v-7H6v-2a6 6 0 0 1 12 0v2h-2v7h2a3 3 0 0 0 3-3v-6c0-5-4-9-9-9z"/></svg>128 <!-- WiFi -->129 <svg viewBox="0 0 24 24" width="36" height="36" fill="#bfc7cb"><path d="M12 20l2-2-2-2-2 2 2 2zm-6-6 2-2a8 8 0 0 1 12 0l2 2 2-2a12 12 0 0 0-20 0l2 2zm3-3 2-2a4 4 0 0 1 6 0l2 2 2-2a8 8 0 0 0-14 0l2 2z"/></svg>130 <!-- Battery -->131 <svg viewBox="0 0 24 24" width="36" height="36" fill="#bfc7cb"><path d="M18 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v2H5a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h13v2zM5 8v8h11V8H5z"/></svg>132 </div>133 </div>134 135 <!-- Header -->136 <div class="header">Me</div>137 138 <!-- Profile -->139 <div class="profile">140 <div class="avatar">[IMG: User Avatar]</div>141 <div class="name">Cerebra</div>142 </div>143 144 <!-- Progress -->145 <div class="progress-wrap">146 <div class="progress-title">Progress</div>147 <div class="metrics">148 <div class="metric">149 <svg viewBox="0 0 24 24"><path d="M13 2 6 14h5l-1 8 8-14h-5l1-6z"/></svg>150 <div class="num">1</div>151 <div class="label">Current<br>Day Streak</div>152 </div>153 <div class="metric">154 <div class="num">7</div>155 <div class="label">Total<br>Sessions</div>156 </div>157 <div class="metric">158 <div class="num">34</div>159 <div class="label">Total<br>Minutes</div>160 </div>161 </div>162 </div>163 164 <!-- Modal -->165 <div class="modal">166 <div class="modal-title">Cerebra, are you enjoying Simple Habit?</div>167 <div class="modal-actions">168 <button class="btn">NOT REALLY</button>169 <button class="btn filled">YES!</button>170 </div>171 </div>172 173 <!-- History & Calendar -->174 <div class="history">175 <div class="history-title">History</div>176 <div class="month-row">177 <svg class="chev" viewBox="0 0 24 24"><path d="M15 18 9 12l6-6"/></svg>178 <div>July 2023</div>179 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6 15 12 9 18"/></svg>180 </div>181 <div class="weekdays">182 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>183 </div>184 <div class="days">185 <div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day">1</div>186 <div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div><div class="day">8</div>187 <div class="day">9</div><div class="day">10</div><div class="day">11</div><div class="day">12</div><div class="day">13</div><div class="day today">14</div><div class="day">15</div>188 </div>189 </div>190 191 <!-- Bottom Nav -->192 <div class="bottom-nav">193 <div class="nav-item">194 <div class="nav-icon">195 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="none" stroke="#cfd8dc" stroke-width="2"/><path d="M10 8v8l6-4-6-4z"/></svg>196 </div>197 <div class="nav-label">Meditate</div>198 </div>199 <div class="nav-item active">200 <div class="nav-icon">201 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c2-5 14-5 16 0" /></svg>202 </div>203 <div class="nav-label">Me</div>204 </div>205 <div class="nav-item">206 <div class="nav-icon">207 <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="18" cy="12" r="2"/></svg>208 </div>209 <div class="nav-label">More</div>210 </div>211 </div>212 213</div>214</body>215</html>