GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #F0F1EE;14 font-family: Arial, Helvetica, sans-serif;15 color: #1f1f1f;16 }17 18 /* Top area with status + search */19 .topbar {20 position: absolute;21 top: 0; left: 0; right: 0;22 height: 260px;23 background: #E7E9E5;24 }25 .status {26 height: 90px;27 padding: 0 36px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #303030;32 font-size: 34px;33 letter-spacing: 0.5px;34 }35 .status .right {36 display: flex; align-items: center; gap: 28px;37 }38 .icon-dot { width: 12px; height: 12px; background: #303030; border-radius: 50%; display: inline-block; opacity: 0.5; }39 .status svg { display: block; }40 .wifi, .battery, .cell { opacity: 0.7; }41 42 .search-row {43 height: 170px;44 display: flex;45 align-items: center;46 padding: 0 24px 0 24px;47 gap: 18px;48 }49 .icon-btn {50 width: 96px; height: 96px;51 border-radius: 48px;52 display: flex; align-items: center; justify-content: center;53 }54 .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #2f2f2f; stroke-width: 6; }55 .search-input {56 flex: 1;57 height: 96px;58 display: flex; align-items: center;59 font-size: 44px;60 color: #2a2a2a;61 }62 .search-input .caret {63 width: 2px; height: 58px; background: #4A7A2C; margin-left: 6px;64 }65 66 /* Content area */67 .content {68 position: absolute;69 top: 260px; left: 0; right: 0; bottom: 880px;70 background: #FAFAFC;71 padding: 60px 48px;72 }73 74 .result-card {75 width: 540px;76 }77 .thumb {78 width: 540px; height: 340px;79 background: #E0E0E0;80 border: 1px solid #BDBDBD;81 border-radius: 28px;82 display: flex; align-items: center; justify-content: center;83 color: #757575; font-size: 34px;84 position: relative;85 }86 .check {87 position: absolute;88 right: 18px; bottom: 18px;89 width: 76px; height: 76px; border-radius: 38px;90 background: #4A4A4A;91 display: flex; align-items: center; justify-content: center;92 }93 .check svg { width: 40px; height: 40px; stroke: #fff; stroke-width: 6; fill: none; }94 95 .card-row {96 display: flex; align-items: center; justify-content: space-between;97 margin-top: 24px;98 }99 .title {100 display: flex; align-items: center; gap: 18px;101 font-size: 40px; color: #2a2a2a;102 }103 .title .gridmark {104 width: 48px; height: 48px; border-radius: 8px; background: #84A945;105 }106 .more-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }107 .more-btn .dot {108 width: 12px; height: 12px; background: #606060; border-radius: 50%; margin: 6px 0;109 display: block;110 }111 112 /* Keyboard */113 .keyboard {114 position: absolute;115 left: 0; right: 0; bottom: 0;116 height: 880px;117 background: #EBEDF7;118 border-top-left-radius: 34px;119 border-top-right-radius: 34px;120 box-sizing: border-box;121 padding: 24px 30px 26px 30px;122 }123 124 .suggest {125 height: 110px;126 background: #F4F5FB;127 border-radius: 18px;128 display: flex; align-items: center; justify-content: space-between;129 padding: 0 26px;130 margin-bottom: 24px;131 }132 .suggest-left {133 display: flex; align-items: center; gap: 18px;134 font-size: 38px;135 }136 .suggest-left .pill-icon {137 width: 64px; height: 64px; border-radius: 32px; background: #B5CC6A;138 display: flex; align-items: center; justify-content: center;139 }140 .suggest-left .sep { color: #7A7A7A; }141 142 .suggest .mic {143 width: 64px; height: 64px; border-radius: 32px; background: #E0E0EA;144 display: flex; align-items: center; justify-content: center;145 }146 .suggest .mic svg { width: 34px; height: 34px; stroke: #555; stroke-width: 6; fill: none; }147 148 .rows { display: grid; grid-template-rows: repeat(4, 1fr); gap: 16px; height: calc(100% - 134px); }149 .row { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 16px; }150 .key {151 background: #FFFFFF;152 border-radius: 18px;153 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);154 display: flex; align-items: center; justify-content: center;155 font-size: 42px; color: #222;156 }157 .key.pink { background: #F7D6E4; }158 .key.green { background: #BFD67A; }159 .key.wide { grid-column: span 3; }160 .key.space { grid-column: span 6; }161 .bottom-row {162 display: grid; grid-template-columns: 1.4fr 1fr 4fr 1fr 1.4fr; gap: 16px;163 }164 .search-fab {165 position: absolute; right: 30px; bottom: 34px;166 width: 120px; height: 120px; border-radius: 60px; background: #BFD67A;167 display: flex; align-items: center; justify-content: center;168 }169 .search-fab svg { width: 56px; height: 56px; stroke: #2a2a2a; stroke-width: 6; fill: none; }170 171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Top bar with status and search -->177 <div class="topbar">178 <div class="status">179 <div class="time">8:30</div>180 <div class="right">181 <span class="icon-dot"></span>182 <!-- Cellular -->183 <svg class="cell" width="40" height="26" viewBox="0 0 40 26">184 <rect x="2" y="10" width="6" height="14" fill="#303030"></rect>185 <rect x="12" y="6" width="6" height="18" fill="#303030"></rect>186 <rect x="22" y="2" width="6" height="22" fill="#303030"></rect>187 </svg>188 <!-- WiFi -->189 <svg class="wifi" width="40" height="26" viewBox="0 0 40 26">190 <path d="M4 10c6-6 26-6 32 0" stroke="#303030" stroke-width="3" fill="none"/>191 <path d="M10 14c4-4 16-4 20 0" stroke="#303030" stroke-width="3" fill="none"/>192 <circle cx="20" cy="19" r="3" fill="#303030"/>193 </svg>194 <!-- Battery -->195 <svg class="battery" width="46" height="26" viewBox="0 0 46 26">196 <rect x="2" y="5" width="36" height="16" stroke="#303030" stroke-width="3" fill="none"/>197 <rect x="40" y="9" width="4" height="8" fill="#303030"/>198 <rect x="6" y="9" width="26" height="8" fill="#303030"/>199 </svg>200 </div>201 </div>202 203 <div class="search-row">204 <div class="icon-btn">205 <svg viewBox="0 0 24 24"><path d="M15 18L9 12l6-6" /></svg>206 </div>207 <div class="search-input">untitled spreadsheet<span class="caret"></span></div>208 <div class="icon-btn">209 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>210 </div>211 </div>212 </div>213 214 <!-- Content area -->215 <div class="content">216 <div class="result-card">217 <div class="thumb">218 [IMG: Spreadsheet thumbnail]219 <div class="check">220 <svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg>221 </div>222 </div>223 224 <div class="card-row">225 <div class="title">226 <div class="gridmark"></div>227 <span>Untitled<br/>spreadsheet</span>228 </div>229 <div class="more-btn">230 <span class="dot"></span>231 <span class="dot"></span>232 <span class="dot"></span>233 </div>234 </div>235 </div>236 </div>237 238 <!-- Keyboard -->239 <div class="keyboard">240 <div class="suggest">241 <div class="suggest-left">242 <div class="pill-icon">243 <svg viewBox="0 0 24 24">244 <rect x="3" y="3" width="7" height="7" fill="#fff"/>245 <rect x="14" y="3" width="7" height="7" fill="#fff"/>246 <rect x="3" y="14" width="7" height="7" fill="#fff"/>247 <rect x="14" y="14" width="7" height="7" fill="#fff"/>248 </svg>249 </div>250 <span>spreadsheet</span>251 <span class="sep">|</span>252 <span>spreadsheets</span>253 </div>254 <div class="mic">255 <svg viewBox="0 0 24 24"><path d="M12 4a3 3 0 013 3v6a3 3 0 01-6 0V7a3 3 0 013-3zM5 11c0 4 3 7 7 7s7-3 7-7"/></svg>256 </div>257 </div>258 259 <div class="rows">260 <!-- Row 1 -->261 <div class="row">262 <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>263 <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>264 </div>265 <!-- Row 2 -->266 <div class="row">267 <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>268 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>269 </div>270 <!-- Row 3 -->271 <div class="row">272 <div class="key pink">⇧</div>273 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>274 <div class="key">b</div><div class="key">n</div><div class="key">m</div>275 <div class="key pink">⌫</div>276 </div>277 <!-- Row 4 -->278 <div class="bottom-row">279 <div class="key pink">?123</div>280 <div class="key">😊</div>281 <div class="key space"></div>282 <div class="key">.</div>283 <div class="key green">284 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#2a2a2a" stroke-width="2" fill="none"/><path d="M15 15l6 6" stroke="#2a2a2a" stroke-width="2"/></svg>285 </div>286 </div>287 </div>288 289 <div class="search-fab">290 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><path d="M15 15l6 6" /></svg>291 </div>292 </div>293 294</div>295</body>296</html>