GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>New Task UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #0B0B0B; color: #eaeaea;11 }12 13 /* Status bar */14 .status-bar {15 height: 96px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;16 color: #d9d9d9; font-size: 42px; letter-spacing: 1px;17 }18 .status-right { display: flex; align-items: center; gap: 26px; }19 .status-dot { width: 12px; height: 12px; background:#d9d9d9; border-radius:50%; display:inline-block; }20 .battery {21 width: 58px; height: 28px; border: 3px solid #d9d9d9; border-radius: 6px; position: relative;22 }23 .battery::after {24 content: ""; position: absolute; right: -10px; top: 7px; width: 8px; height: 14px; background: #d9d9d9; border-radius: 2px;25 }26 .battery-fill {27 position: absolute; left: 4px; top: 4px; height: 18px; width: 40px; background: #d9d9d9; border-radius: 3px;28 }29 30 /* App bar */31 .app-bar {32 height: 140px; display: flex; align-items: center; justify-content: space-between;33 padding: 0 28px; border-bottom: 1px solid #1a1a1a;34 }35 .app-title { font-size: 64px; font-weight: 700; }36 .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; color: #eaeaea; }37 38 /* Content */39 .content { padding: 24px 28px 0 28px; }40 .section-label { color: #8fa7c8; font-size: 36px; margin: 24px 0 16px 0; letter-spacing: 1px; }41 42 .card {43 background: #121212; border: 1px solid #1f1f1f; border-radius: 28px;44 padding: 32px; width: 1024px; box-sizing: border-box;45 }46 .field-row { display: flex; align-items: center; justify-content: space-between; }47 .field-label { font-size: 40px; color: #8fa7c8; margin-top: 26px; }48 .input-line {49 margin-top: 10px; height: 2px; background: #5a7dc0; width: 800px;50 }51 .notes-line { margin-top: 24px; height: 2px; background: #404040; width: 800px; }52 .small-btn {53 width: 56px; height: 56px; border-radius: 12px; background: #1f1f1f; display: flex; align-items: center; justify-content: center; margin-left: 12px;54 }55 56 /* Dropdown */57 .dropdown {58 background: #121212; border: 1px solid #1f1f1f; border-radius: 24px;59 height: 120px; width: 1024px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; box-sizing: border-box;60 }61 .dd-left { display: flex; align-items: center; gap: 24px; }62 .list-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; color: #cfcfcf; }63 .dd-text { font-size: 44px; }64 .save-row { margin-top: 420px; display: flex; align-items: center; justify-content: space-between; padding-right: 28px; }65 .save-btn {66 background: #9fb3d0; color: #0b0b0b; border-radius: 28px; padding: 26px 40px; font-size: 44px; font-weight: 700;67 display: inline-flex; align-items: center; gap: 18px;68 }69 .alarm-btn {70 width: 136px; height: 136px; background: #f4a9a9; border-radius: 36px; display: flex; align-items: center; justify-content: center;71 }72 73 /* Keyboard (simplified) */74 .keyboard {75 position: absolute; bottom: 36px; left: 0; width: 1080px; height: 920px;76 background: #141414; border-top: 1px solid #1f1f1f; box-sizing: border-box; padding: 24px;77 }78 .kb-top-icons { display: flex; gap: 26px; color: #bdbdbd; margin-bottom: 22px; align-items: center; }79 .kb-row { display: flex; justify-content: space-between; margin: 18px 12px; }80 .key {81 width: 92px; height: 120px; background: #1e1e1e; border: 1px solid #2a2a2a; border-radius: 18px; color: #e6e6e6;82 display: flex; align-items: center; justify-content: center; font-size: 44px;83 }84 .key-wide { width: 160px; }85 .space { width: 520px; }86 .gesture-bar {87 position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);88 width: 420px; height: 12px; background: #eaeaea; border-radius: 8px; opacity: 0.8;89 }90</style>91</head>92<body>93<div id="render-target">94 95 <!-- Status Bar -->96 <div class="status-bar">97 <div>12:52</div>98 <div class="status-right">99 <div>70°</div>100 <div class="status-dot"></div>101 <div class="battery"><div class="battery-fill"></div></div>102 </div>103 </div>104 105 <!-- App Bar -->106 <div class="app-bar">107 <div class="icon-btn">108 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">109 <path d="M15.5 19L8 12l7.5-7" stroke="#eaeaea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>110 </svg>111 </div>112 <div class="app-title">New task</div>113 <div class="icon-btn">114 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">115 <path d="M20 6l-11 11-5-5" stroke="#eaeaea" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>116 </svg>117 </div>118 </div>119 120 <!-- Content -->121 <div class="content">122 <div class="section-label">TASK:</div>123 124 <div class="card">125 <div class="field-row">126 <div style="flex:1;">127 <div style="color:#bfcdf2; font-size:48px;">What to do:</div>128 <div class="input-line"></div>129 </div>130 <div class="icon-btn">131 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">132 <path d="M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3z" stroke="#dcdcdc" stroke-width="2"/>133 <path d="M5 11c0 4 3 7 7 7s7-3 7-7" stroke="#dcdcdc" stroke-width="2" stroke-linecap="round"/>134 <path d="M12 22v-2" stroke="#dcdcdc" stroke-width="2" stroke-linecap="round"/>135 </svg>136 </div>137 </div>138 139 <div class="field-label">Notes:</div>140 <div class="notes-line"></div>141 <div class="small-btn">142 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">143 <path d="M12 5v14M5 12h14" stroke="#bfcdf2" stroke-width="2" stroke-linecap="round"/>144 </svg>145 </div>146 </div>147 148 <div class="section-label" style="margin-top:36px;">ADD TO LIST:</div>149 150 <div class="dropdown">151 <div class="dd-left">152 <div class="list-icon">153 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">154 <path d="M4 6h16M4 12h16M4 18h16" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>155 </svg>156 </div>157 <div class="dd-text">Default</div>158 </div>159 <div class="icon-btn">160 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">161 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>162 </svg>163 </div>164 </div>165 166 <div class="save-row">167 <div class="save-btn">168 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">169 <path d="M20 6l-11 11-5-5" stroke="#0b0b0b" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>170 </svg>171 Save172 </div>173 <div class="alarm-btn">174 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">175 <circle cx="12" cy="13" r="7.5" stroke="#0b0b0b" stroke-width="2"/>176 <path d="M16 3l3 2M8 3L5 5" stroke="#0b0b0b" stroke-width="2" stroke-linecap="round"/>177 <path d="M12 9v4M12 13h3" stroke="#0b0b0b" stroke-width="2" stroke-linecap="round"/>178 </svg>179 </div>180 </div>181 </div>182 183 <!-- Keyboard -->184 <div class="keyboard">185 <div class="kb-top-icons">186 <div class="key-wide" style="height:68px; background:#1e1e1e; border-radius:16px; border:1px solid #2a2a2a; display:flex; align-items:center; justify-content:center; font-size:34px; color:#cfcfcf;">Apps</div>187 <div class="key-wide" style="height:68px; background:#1e1e1e; border-radius:16px; border:1px solid #2a2a2a; display:flex; align-items:center; justify-content:center; font-size:34px; color:#cfcfcf;">GIF</div>188 <div class="key-wide" style="height:68px; background:#1e1e1e; border-radius:16px; border:1px solid #2a2a2a; display:flex; align-items:center; justify-content:center; font-size:34px; color:#cfcfcf;">Settings</div>189 <div class="key-wide" style="height:68px; background:#1e1e1e; border-radius:16px; border:1px solid #2a2a2a; display:flex; align-items:center; justify-content:center; font-size:34px; color:#cfcfcf;">Translate</div>190 <div class="key-wide" style="height:68px; background:#1e1e1e; border-radius:16px; border:1px solid #2a2a2a; display:flex; align-items:center; justify-content:center; font-size:34px; color:#cfcfcf;">Theme</div>191 <div class="key-wide" style="height:68px; background:#1e1e1e; border-radius:16px; border:1px solid #2a2a2a; display:flex; align-items:center; justify-content:center; font-size:34px; color:#cfcfcf;">Mic</div>192 </div>193 194 <div class="kb-row">195 <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>196 <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>197 <div class="key">0</div>198 </div>199 <div class="kb-row">200 <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>201 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>202 </div>203 <div class="kb-row">204 <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>205 <div class="key">N</div><div class="key">M</div><div class="key-wide">Back</div>206 </div>207 <div class="kb-row">208 <div class="key-wide">?123</div>209 <div class="key-wide">,</div>210 <div class="space key"> </div>211 <div class="key-wide">.</div>212 <div class="key-wide">Enter</div>213 </div>214 215 <div class="gesture-bar"></div>216 </div>217 218</div>219</body>220</html>