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; height: 2400px;10 position: relative; overflow: hidden;11 background: #FAF9F7;12 border-radius: 0;13 box-shadow: none;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15 color: #222;16 }17 /* Status bar */18 .status-bar {19 position: absolute; top: 0; left: 0; right: 0;20 height: 120px;21 background: #CFCFCF;22 display: flex; align-items: center;23 padding: 0 40px;24 box-sizing: border-box;25 font-weight: 600;26 color: #2b2b2b;27 }28 .status-left { font-size: 40px; }29 .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 34px; }30 .battery {31 width: 52px; height: 28px; border: 3px solid #2b2b2b; border-radius: 6px; position: relative;32 }33 .battery:after {34 content: ""; position: absolute; right: -10px; top: 8px;35 width: 8px; height: 12px; background: #2b2b2b; border-radius: 2px;36 }37 .battery .level { position: absolute; left: 3px; top: 3px; height: 20px; width: 36px; background: #2b2b2b; border-radius: 3px; }38 /* Header area */39 .header {40 position: absolute; top: 120px; left: 0; right: 0;41 background: #FFFFFF;42 padding: 32px 40px 24px 40px;43 box-sizing: border-box;44 border-bottom: 1px solid #eee;45 }46 .back-row { height: 88px; display: flex; align-items: center; }47 .back-icon { width: 60px; height: 60px; }48 .title-row {49 display: flex; align-items: center; margin-top: 16px;50 }51 .title-row h1 {52 margin: 0; font-size: 56px; font-weight: 700; letter-spacing: 0.2px;53 }54 .clear {55 margin-left: auto; font-size: 38px; color: #444; font-weight: 600;56 }57 /* List */58 .list {59 position: absolute; top: 320px; left: 0; right: 0;60 background: #FFFFFF;61 padding: 0 40px 40px;62 box-sizing: border-box;63 }64 .item {65 display: flex; align-items: center;66 padding: 36px 0;67 border-bottom: 1px solid #EFEFEF;68 }69 .item:last-child { border-bottom: none; }70 .clock {71 width: 76px; height: 76px; margin-right: 26px;72 }73 .item .text {74 font-size: 38px; color: #222;75 }76 .item .arrow {77 margin-left: auto; width: 44px; height: 44px;78 }79 /* Spacer area before bottom actions */80 .spacer {81 position: absolute; left: 0; right: 0;82 top: 760px; bottom: 620px; /* leaves room for action bar + keyboard */83 background: #F6F4F2;84 }85 /* Bottom action bar */86 .actions {87 position: absolute; left: 0; right: 0; bottom: 620px;88 height: 160px;89 background: #FFFFFF;90 border-top: 1px solid #EAEAEA;91 display: flex; align-items: center; justify-content: space-around;92 text-align: center;93 }94 .act {95 display: flex; flex-direction: column; align-items: center; gap: 12px;96 color: #333; font-size: 30px; font-weight: 600;97 }98 .act svg { width: 60px; height: 60px; }99 /* Keyboard mock */100 .keyboard {101 position: absolute; left: 0; right: 0; bottom: 60px;102 height: 560px;103 background: #0F1415;104 border-top: 1px solid #0A0E0F;105 padding: 20px 24px;106 box-sizing: border-box;107 }108 .keys { display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; margin-bottom: 22px; }109 .key {110 background: #1C2426; border-radius: 16px; height: 92px;111 display: flex; align-items: center; justify-content: center;112 color: #CDD3D5; font-size: 40px; font-weight: 600;113 }114 .row2 { grid-template-columns: repeat(9, 1fr); }115 .row3 { grid-template-columns: repeat(7, 1fr); }116 .bottom-row {117 display: grid; grid-template-columns: 160px 120px 1fr 120px 160px 120px; gap: 14px;118 }119 .key.wide { grid-column: span 2; }120 .key.search {121 background: #9BF0C1; color: #0C1A16; border-radius: 36px; font-size: 42px; font-weight: 800;122 }123 /* Gesture bar */124 .gesture {125 position: absolute; bottom: 16px; left: 50%;126 transform: translateX(-50%);127 width: 240px; height: 10px; background: #E6E6E6; border-radius: 10px;128 }129</style>130</head>131<body>132<div id="render-target">133 <!-- Status bar -->134 <div class="status-bar">135 <div class="status-left">2:52</div>136 <div class="status-right">137 <span>◯</span>138 <span>✉️</span>139 <span>!</span>140 <div class="battery"><div class="level"></div></div>141 <span>100%</span>142 </div>143 </div>144 145 <!-- Header -->146 <div class="header">147 <div class="back-row">148 <svg class="back-icon" viewBox="0 0 24 24">149 <path d="M15 6L9 12l6 6" stroke="#222" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>150 </svg>151 </div>152 <div class="title-row">153 <h1>Search history</h1>154 <div class="clear">Clear</div>155 </div>156 </div>157 158 <!-- List -->159 <div class="list">160 <div class="item">161 <svg class="clock" viewBox="0 0 24 24">162 <circle cx="12" cy="12" r="9" stroke="#111" stroke-width="2" fill="none"/>163 <path d="M12 7v6l4 2" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>164 </svg>165 <div class="text">42-size formal shoes</div>166 <svg class="arrow" viewBox="0 0 24 24">167 <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>168 </svg>169 </div>170 <div class="item">171 <svg class="clock" viewBox="0 0 24 24">172 <circle cx="12" cy="12" r="9" stroke="#111" stroke-width="2" fill="none"/>173 <path d="M12 7v6l4 2" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>174 </svg>175 <div class="text">chalsea boots</div>176 <svg class="arrow" viewBox="0 0 24 24">177 <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>178 </svg>179 </div>180 <div class="item">181 <svg class="clock" viewBox="0 0 24 24">182 <circle cx="12" cy="12" r="9" stroke="#111" stroke-width="2" fill="none"/>183 <path d="M12 7v6l4 2" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>184 </svg>185 <div class="text">h&m shoes</div>186 <svg class="arrow" viewBox="0 0 24 24">187 <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>188 </svg>189 </div>190 </div>191 192 <!-- Spacer to off-white area -->193 <div class="spacer"></div>194 195 <!-- Bottom action bar -->196 <div class="actions">197 <div class="act">198 <svg viewBox="0 0 24 24">199 <rect x="4" y="7" width="16" height="12" rx="2" stroke="#444" stroke-width="2" fill="none"/>200 <circle cx="12" cy="13" r="3.5" stroke="#444" stroke-width="2" fill="none"/>201 <rect x="8" y="5" width="8" height="2" fill="#444"/>202 </svg>203 <div>Take Photo</div>204 </div>205 <div class="act">206 <svg viewBox="0 0 24 24">207 <rect x="5" y="5" width="14" height="14" rx="2" stroke="#444" stroke-width="2" fill="none"/>208 <path d="M5 9h4M15 9h4M5 15h4M15 15h4" stroke="#444" stroke-width="2" stroke-linecap="round"/>209 </svg>210 <div>Scan Code</div>211 </div>212 <div class="act">213 <svg viewBox="0 0 24 24">214 <path d="M12 2C8.7 2 6 4.7 6 8c0 5.5 6 12 6 12s6-6.5 6-12c0-3.3-2.7-6-6-6z" stroke="#444" stroke-width="2" fill="none"/>215 <circle cx="12" cy="8" r="2.5" fill="#444"/>216 </svg>217 <div>Find Store</div>218 </div>219 </div>220 221 <!-- Keyboard mock -->222 <div class="keyboard">223 <div class="keys">224 <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>225 </div>226 <div class="keys row2">227 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>228 </div>229 <div class="keys row3">230 <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>231 </div>232 <div class="bottom-row">233 <div class="key">?123</div>234 <div class="key">,</div>235 <div class="key">space</div>236 <div class="key">.</div>237 <div class="key">⌫</div>238 <div class="key search">🔍</div>239 </div>240 </div>241 242 <!-- Gesture bar -->243 <div class="gesture"></div>244</div>245</body>246</html>