GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Mobile UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #D9DEE9;15 }16 17 /* Top header area */18 .top {19 width: 100%;20 background: #2F4563;21 padding: 24px 36px 28px;22 box-sizing: border-box;23 }24 .status {25 height: 60px;26 display: flex;27 align-items: center;28 color: #E6EDF7;29 font-weight: 600;30 font-size: 40px;31 opacity: 0.95;32 }33 .status .time { flex: 1; }34 .status .icons { display: flex; align-items: center; gap: 20px; }35 .icon {36 width: 38px; height: 38px;37 display: inline-flex; align-items: center; justify-content: center;38 }39 40 .search-row {41 margin-top: 28px;42 display: flex; align-items: center; gap: 18px;43 }44 .back-btn {45 width: 72px; height: 72px; border: none; background: transparent; padding: 0; cursor: default;46 }47 .search-input {48 flex: 1;49 height: 80px;50 background: #3D5778;51 border-radius: 18px;52 color: #BFD0E5;53 display: flex; align-items: center;54 padding: 0 24px;55 font-size: 36px;56 letter-spacing: 0.2px;57 }58 .search-input::after {59 content: "Search...";60 opacity: 0.7;61 }62 63 .chips {64 margin-top: 28px;65 display: flex; gap: 20px; flex-wrap: nowrap;66 }67 .chip {68 padding: 18px 28px;69 border-radius: 26px;70 border: 2px solid #263C57;71 color: #D7E0EE;72 background: #314A69;73 font-size: 34px;74 white-space: nowrap;75 }76 .chip.active {77 border: 3px solid #E6D96D;78 color: #FFF5B8;79 background: rgba(255, 238, 120, 0.06);80 }81 82 /* Content section */83 .content {84 padding: 20px 0 0;85 background: #D9DEE9;86 min-height: 1200px;87 }88 .card {89 margin: 18px 24px 0;90 padding: 28px 28px;91 background: #DFE4EE;92 border-radius: 14px;93 border: 1px solid #C9D0DB;94 display: flex; align-items: flex-start; justify-content: space-between;95 }96 .title {97 font-size: 50px;98 color: #27354B;99 letter-spacing: 0.3px;100 }101 .meta, .repeat {102 font-size: 34px;103 color: #6B778B;104 margin-top: 10px;105 }106 .right .due {107 font-size: 34px;108 color: #6B778B;109 margin-top: 6px;110 }111 112 .tabs {113 display: flex; gap: 80px;114 padding: 36px 36px 10px;115 align-items: center;116 }117 .tab {118 font-size: 38px; color: #2C3E55; opacity: 0.8; padding-bottom: 10px;119 }120 .tab.active {121 font-weight: 700; opacity: 1; border-bottom: 6px solid #2F4563;122 }123 124 /* Floating Action Button */125 .fab {126 position: absolute;127 right: 52px;128 bottom: 620px; /* sits above the keyboard */129 width: 150px; height: 150px;130 background: #2F496A;131 border-radius: 50%;132 border: none;133 box-shadow: 0 18px 24px rgba(47, 73, 106, 0.45);134 display: flex; align-items: center; justify-content: center;135 cursor: default;136 }137 138 /* Keyboard mock */139 .keyboard {140 position: absolute; left: 0; bottom: 0;141 width: 100%; height: 780px;142 background: #1F1B1A;143 padding: 24px 20px 70px;144 box-sizing: border-box;145 }146 .kb-toprow {147 display: flex; gap: 16px; margin-bottom: 18px; align-items: center;148 }149 .key {150 flex: 1;151 height: 112px;152 background: #2B2625;153 border-radius: 18px;154 color: #E9D6C7;155 display: flex; align-items: center; justify-content: center;156 font-size: 46px;157 }158 .key.small { flex: 0 0 110px; }159 .key.medium { flex: 0 0 180px; }160 .key.wide { flex: 0 0 240px; }161 .space-row { display: flex; gap: 16px; }162 .space { flex: 1; height: 112px; background: #2B2625; border-radius: 18px; }163 .handle {164 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);165 width: 300px; height: 10px; border-radius: 6px; background: #E3E3E3; opacity: 0.9;166 }167</style>168</head>169<body>170 <div id="render-target">171 <div class="top">172 <div class="status">173 <div class="time">11:38</div>174 <div class="icons">175 <span class="icon" aria-label="mail">176 <svg width="36" height="36" viewBox="0 0 24 24" fill="#E6EDF7"><path d="M4 6h16v12H4z"/><path d="M4 6l8 6 8-6" fill="#2F4563" stroke="#E6EDF7" stroke-width="2"/></svg>177 </span>178 <span class="icon" aria-label="wifi">179 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#E6EDF7" stroke-width="2">180 <path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c4-3 10-3 14 0"/><path d="M9 16c3-2 5-2 8 0"/><circle cx="12" cy="19" r="1.5" fill="#E6EDF7"/></svg>181 </span>182 <span class="icon" aria-label="battery">183 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#E6EDF7" stroke-width="2">184 <rect x="3" y="7" width="16" height="10" rx="2"/><rect x="19" y="10" width="2" height="4" fill="#E6EDF7"/></svg>185 </span>186 </div>187 </div>188 189 <div class="search-row">190 <button class="back-btn" aria-label="Back">191 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#E6EDF7" stroke-width="2">192 <path d="M15 18l-6-6 6-6"/>193 </svg>194 </button>195 <div class="search-input"></div>196 </div>197 198 <div class="chips">199 <div class="chip active">All</div>200 <div class="chip">Critical</div>201 <div class="chip">Important</div>202 <div class="chip">Favorites</div>203 <div class="chip">Optional</div>204 </div>205 </div>206 207 <div class="content">208 <div class="card">209 <div class="left">210 <div class="title">Kiran´s birthday</div>211 <div class="meta">08/18/2023 8:00 PM</div>212 <div class="repeat">Every Day</div>213 </div>214 <div class="right">215 <div class="due">in 8 days</div>216 </div>217 </div>218 219 <div class="tabs">220 <div class="tab active">ACTIVE</div>221 <div class="tab">COMPLETED</div>222 </div>223 </div>224 225 <button class="fab" aria-label="Add">226 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">227 <path d="M12 5v14M5 12h14"/>228 </svg>229 </button>230 231 <div class="keyboard">232 <div class="kb-toprow">233 <div class="key small">⌦</div>234 <div class="key small">😊</div>235 <div class="key small">GIF</div>236 <div class="key small">⚙</div>237 <div class="key small">G</div>238 <div class="key small">🎨</div>239 <div class="key small">🎙</div>240 </div>241 242 <div class="kb-toprow">243 <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>244 </div>245 <div class="kb-toprow">246 <div class="key" style="flex:0.4">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><div class="key" style="flex:0.6">⌫</div>247 </div>248 <div class="kb-toprow">249 <div class="key medium">⇧</div><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><div class="key medium">.</div>250 </div>251 <div class="space-row" style="margin-top:18px;">252 <div class="key medium">?123</div>253 <div class="key medium">,</div>254 <div class="space"></div>255 <div class="key medium">.</div>256 <div class="key medium">🔍</div>257 </div>258 <div class="handle"></div>259 </div>260 </div>261</body>262</html>