GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Tasks UI</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: Arial, sans-serif;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #0B0B0B;19 color: #EDEDED;20 }21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 1080px;27 height: 96px;28 padding: 0 32px;29 box-sizing: border-box;30 display: flex;31 align-items: center;32 justify-content: space-between;33 color: #EDEDED;34 font-size: 34px;35 letter-spacing: 0.5px;36 }37 .status-left { display: flex; align-items: center; gap: 22px; }38 .status-right { display: flex; align-items: center; gap: 22px; }39 /* Header with back and title */40 .header {41 position: absolute;42 top: 110px;43 left: 40px;44 right: 40px;45 display: flex;46 align-items: center;47 justify-content: space-between;48 }49 .header-left {50 display: flex;51 align-items: center;52 gap: 26px;53 }54 .back-icon svg { width: 44px; height: 44px; }55 .title {56 font-size: 120px;57 font-weight: 700;58 color: #8DA0FF; /* soft lavender/indigo */59 line-height: 1;60 }61 .menu-icon {62 margin-right: 8px;63 }64 .menu-icon svg { width: 20px; height: 80px; }65 /* Task card */66 .card {67 position: absolute;68 top: 360px;69 left: 40px;70 right: 40px;71 height: 180px;72 background: #232323;73 border-radius: 22px;74 box-shadow: 0 2px 2px rgba(0,0,0,0.35);75 display: flex;76 align-items: center;77 padding: 0 34px;78 box-sizing: border-box;79 }80 .checkbox {81 width: 64px;82 height: 64px;83 border-radius: 50%;84 border: 4px solid #9A9A9A;85 margin-right: 28px;86 box-sizing: border-box;87 }88 .card-content {89 flex: 1;90 }91 .task-title {92 font-size: 52px;93 margin-bottom: 14px;94 color: #F5F5F5;95 }96 .subrow {97 display: flex;98 align-items: center;99 gap: 14px;100 }101 .subrow .due {102 font-size: 36px;103 color: #F06A6A;104 }105 .star {106 width: 70px;107 height: 70px;108 margin-left: 16px;109 }110 /* List lines */111 .list-lines {112 position: absolute;113 top: 580px;114 left: 30px;115 right: 30px;116 }117 .line {118 height: 1px;119 background: #1A1A1A;120 margin: 140px 0 0;121 }122 /* Floating Action Button */123 .fab {124 position: absolute;125 right: 64px;126 bottom: 240px;127 width: 170px;128 height: 170px;129 border-radius: 50%;130 background: #8491F8;131 box-shadow: 0 12px 24px rgba(0,0,0,0.6);132 display: flex;133 align-items: center;134 justify-content: center;135 }136 /* Gesture bar */137 .gesture {138 position: absolute;139 bottom: 92px;140 left: 50%;141 transform: translateX(-50%);142 width: 360px;143 height: 12px;144 background: #D9D9D9;145 border-radius: 12px;146 opacity: 0.8;147 }148</style>149</head>150<body>151<div id="render-target">152 <!-- Status Bar -->153 <div class="status-bar">154 <div class="status-left">155 <div>8:30</div>156 <!-- Moon/DND icon -->157 <svg width="30" height="30" viewBox="0 0 24 24" fill="#CCCCCC"><path d="M12 2a9 9 0 0 0 0 18c4.4 0 8.1-3.2 8.9-7.4C18.4 13.5 14.5 10 12 2z"/></svg>158 <!-- Alarm bell -->159 <svg width="30" height="30" viewBox="0 0 24 24" fill="#CCCCCC"><path d="M12 22a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3zm6-7V9a6 6 0 0 0-12 0v6l-2 2v1h16v-1l-2-2z"/></svg>160 <!-- Simple badge M -->161 <div style="font-weight:700;color:#CCCCCC;">M</div>162 <!-- Play Store triangle -->163 <svg width="30" height="30" viewBox="0 0 24 24"><path fill="#CCCCCC" d="M3 4l13 8-13 8V4zm14 7l3-2v6l-3-2z"/></svg>164 </div>165 <div class="status-right">166 <!-- WiFi icon -->167 <svg width="32" height="32" viewBox="0 0 24 24"><path fill="#EDEDED" d="M12 18l-2 2 2 2 2-2-2-2zm-6-6l-2 2 8 8 8-8-2-2-6 6-6-6zm-4-4l-2 2 12 12 12-12-2-2-10 10L2 8z" opacity="0.85"/></svg>168 <!-- Battery icon -->169 <svg width="46" height="32" viewBox="0 0 28 16"><rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="none" stroke="#EDEDED" stroke-width="2"/><rect x="3" y="4" width="18" height="8" fill="#EDEDED"/><rect x="23" y="6" width="4" height="4" fill="#EDEDED"/></svg>170 </div>171 </div>172 173 <!-- Header -->174 <div class="header">175 <div class="header-left">176 <div class="back-icon">177 <svg viewBox="0 0 24 24">178 <path d="M15 19l-7-7 7-7" fill="none" stroke="#8DA0FF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>179 </svg>180 </div>181 <div class="title">Tasks</div>182 </div>183 <div class="menu-icon">184 <svg viewBox="0 0 8 32">185 <circle cx="4" cy="6" r="3" fill="#8DA0FF"/>186 <circle cx="4" cy="16" r="3" fill="#8DA0FF"/>187 <circle cx="4" cy="26" r="3" fill="#8DA0FF"/>188 </svg>189 </div>190 </div>191 192 <!-- Task Card -->193 <div class="card">194 <div class="checkbox"></div>195 <div class="card-content">196 <div class="task-title">Fun time</div>197 <div class="subrow">198 <!-- Calendar icon -->199 <svg width="36" height="36" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2" ry="2" fill="#E05353"/><rect x="3" y="8" width="18" height="2" fill="#C93D3D"/><rect x="7" y="2" width="2" height="4" fill="#C93D3D"/><rect x="15" y="2" width="2" height="4" fill="#C93D3D"/></svg>200 <div class="due">Yesterday</div>201 </div>202 </div>203 <!-- Star icon -->204 <svg class="star" viewBox="0 0 24 24">205 <path d="M12 17.3l-6.5 3.7 1.8-7.3L2 8.9l7.5-.6L12 1.8l2.5 6.5 7.5.6-5.3 4.8 1.8 7.3z" fill="none" stroke="#B0B0B0" stroke-width="2" stroke-linejoin="round"/>206 </svg>207 </div>208 209 <!-- List divider lines -->210 <div class="list-lines">211 <div class="line"></div>212 <div class="line"></div>213 <div class="line"></div>214 <div class="line"></div>215 <div class="line"></div>216 <div class="line"></div>217 <div class="line"></div>218 <div class="line"></div>219 </div>220 221 <!-- Floating Action Button -->222 <div class="fab">223 <svg width="80" height="80" viewBox="0 0 24 24">224 <path d="M12 5v14M5 12h14" stroke="#0B0B0B" stroke-width="3" stroke-linecap="round"/>225 </svg>226 </div>227 228 <!-- Gesture bar -->229 <div class="gesture"></div>230</div>231</body>232</html>