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>UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #EAEAEA;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; width: 100%; height: 88px;18 display: flex; align-items: center; justify-content: space-between;19 padding: 0 32px; color: #ffffff; font-weight: 600; font-size: 34px;20 }21 .status-right { display: flex; align-items: center; gap: 22px; }22 .status-dot {23 width: 10px; height: 10px; background: #9E9E9E; border-radius: 50%;24 }25 .icon-wifi, .icon-battery { width: 42px; height: 42px; }26 27 /* Top bar with back + search */28 .top-bar {29 position: absolute; top: 104px; left: 24px; right: 24px;30 display: flex; align-items: center; gap: 20px;31 }32 .back-btn {33 width: 72px; height: 72px; border-radius: 36px;34 display: flex; align-items: center; justify-content: center;35 background: transparent;36 }37 .search-field {38 flex: 1;39 height: 92px; border-radius: 20px;40 background: #1C1C1C;41 display: flex; align-items: center;42 padding: 0 28px; gap: 18px; color: #BDBDBD; font-size: 38px;43 }44 .search-icon { width: 42px; height: 42px; }45 46 /* Section titles */47 .section-title {48 position: absolute; left: 48px;49 color: #9E9E9E; font-size: 38px; font-weight: 600;50 }51 #type-title { top: 250px; }52 #color-title { top: 860px; }53 54 /* Type cards */55 .type-cards {56 position: absolute; top: 308px; left: 48px; right: 48px;57 display: flex; gap: 36px;58 }59 .card {60 flex: 1;61 min-width: 304px; height: 220px;62 background: #1B1B1B; border-radius: 24px;63 box-shadow: 0 2px 0 rgba(255,255,255,0.03) inset, 0 6px 20px rgba(0,0,0,0.45);64 display: flex; flex-direction: column; align-items: center; justify-content: center;65 gap: 18px;66 }67 .card .icon {68 width: 84px; height: 84px;69 }70 .card-label {71 font-size: 40px; color: #E0E0E0; font-weight: 600;72 }73 .accent-blue { color: #3D7BFF; }74 .icon-blue path, .icon-blue rect, .icon-blue circle, .icon-blue polygon { fill: #3D7BFF; stroke: #3D7BFF; }75 76 /* Color selector */77 .color-circle {78 position: absolute; top: 930px; left: 72px;79 width: 140px; height: 140px; border-radius: 70px;80 background: #FFB300;81 box-shadow: 0 8px 24px rgba(0,0,0,0.5);82 }83 84 /* Keyboard mock */85 .keyboard {86 position: absolute; left: 0; bottom: 72px; width: 100%;87 height: 920px; background: #191919; border-top-left-radius: 26px; border-top-right-radius: 26px;88 box-shadow: 0 -10px 40px rgba(0,0,0,0.55);89 }90 .kb-quick {91 height: 120px; display: flex; align-items: center;92 padding: 0 28px; gap: 40px; color: #CFCFCF; font-size: 34px;93 }94 .quick-icon {95 width: 72px; height: 72px; border-radius: 20px;96 background: #262626; display: flex; align-items: center; justify-content: center;97 border: 1px solid #2E2E2E;98 }99 .kb-rows { padding: 12px 24px 0 24px; }100 .kb-row {101 display: flex; justify-content: center; gap: 16px; margin: 16px 0;102 }103 .key {104 width: 88px; height: 110px; background: #2A2A2A; color: #EDEDED;105 border-radius: 18px; display: flex; align-items: center; justify-content: center;106 font-size: 42px; border: 1px solid #3A3A3A;107 }108 .key.wide { width: 150px; font-size: 36px; }109 .key.space { flex: 1; min-width: 420px; height: 110px; }110 .key.icon { font-size: 36px; }111 .key.round {112 width: 120px; height: 120px; border-radius: 60px;113 background: #C7D7FF; color: #0F1E42; border: none;114 }115 .bottom-home {116 position: absolute; left: 50%; transform: translateX(-50%);117 bottom: 18px; width: 220px; height: 10px; border-radius: 8px; background: #E0E0E0; opacity: 0.9;118 }119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status bar -->125 <div class="status-bar">126 <div>7:05</div>127 <div class="status-right">128 <div class="status-dot"></div>129 <div class="status-dot"></div>130 <svg class="icon-wifi" viewBox="0 0 24 24">131 <path fill="#FFFFFF" d="M12 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm7-5c-4.4-3.7-10.6-3.7-15 0l1.5 1.3c3.6-3 8.4-3 12 0L19 13zm3-4c-6.6-5.6-16.4-5.6-23 0l1.6 1.3c5.8-4.9 14-4.9 19.8 0L22 9z"/>132 </svg>133 <svg class="icon-battery" viewBox="0 0 24 24">134 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#FFFFFF"></rect>135 <rect x="4" y="8" width="12" height="8" rx="1" ry="1" fill="#121212"></rect>136 <rect x="19.5" y="9" width="2" height="6" fill="#FFFFFF"></rect>137 </svg>138 </div>139 </div>140 141 <!-- Top bar with back and search -->142 <div class="top-bar">143 <div class="back-btn">144 <svg viewBox="0 0 24 24" width="42" height="42">145 <path d="M15 5 L7 12 L15 19" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>146 </svg>147 </div>148 <div class="search-field">149 <svg class="search-icon" viewBox="0 0 24 24">150 <circle cx="10" cy="10" r="6" fill="none" stroke="#BDBDBD" stroke-width="2"></circle>151 <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"></line>152 </svg>153 <div>Search...</div>154 </div>155 </div>156 157 <!-- Section title -->158 <div id="type-title" class="section-title">Type</div>159 160 <!-- Cards -->161 <div class="type-cards">162 <div class="card">163 <svg class="icon icon-blue" viewBox="0 0 24 24">164 <path d="M6 3h9l3 3v15H6z" fill="#3D7BFF"></path>165 <rect x="8" y="9" width="8" height="1.8" fill="#121212"></rect>166 <rect x="8" y="12" width="6" height="1.8" fill="#121212"></rect>167 </svg>168 <div class="card-label">TXT</div>169 </div>170 <div class="card">171 <svg class="icon icon-blue" viewBox="0 0 24 24">172 <circle cx="12" cy="12" r="9" fill="#3D7BFF"></circle>173 <path d="M9 12.5l2 2.2 4-5.5" fill="none" stroke="#121212" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>174 </svg>175 <div class="card-label">Checklist</div>176 </div>177 <div class="card">178 <svg class="icon icon-blue" viewBox="0 0 24 24">179 <rect x="4" y="6" width="16" height="14" rx="2" fill="#3D7BFF"></rect>180 <rect x="6" y="10" width="12" height="8" fill="#121212"></rect>181 <rect x="8" y="3.5" width="3.5" height="3" fill="#3D7BFF"></rect>182 <rect x="12.5" y="3.5" width="3.5" height="3" fill="#3D7BFF"></rect>183 <rect x="10.5" y="12.5" width="3" height="3" fill="#3D7BFF"></rect>184 </svg>185 <div class="card-label">Calendar</div>186 </div>187 </div>188 189 <!-- Color section -->190 <div id="color-title" class="section-title">Color</div>191 <div class="color-circle"></div>192 193 <!-- Keyboard -->194 <div class="keyboard">195 <div class="kb-quick">196 <div class="quick-icon">197 <svg viewBox="0 0 24 24" width="40" height="40">198 <rect x="3" y="3" width="7" height="7" fill="#BDBDBD"></rect>199 <rect x="14" y="3" width="7" height="7" fill="#BDBDBD"></rect>200 <rect x="3" y="14" width="7" height="7" fill="#BDBDBD"></rect>201 <rect x="14" y="14" width="7" height="7" fill="#BDBDBD"></rect>202 </svg>203 </div>204 <div class="quick-icon">205 <svg viewBox="0 0 24 24" width="40" height="40">206 <circle cx="12" cy="12" r="9" fill="#BDBDBD"></circle>207 <circle cx="9" cy="10" r="1.5" fill="#121212"></circle>208 <circle cx="15" cy="10" r="1.5" fill="#121212"></circle>209 <path d="M8 15c2.5 2 5.5 2 8 0" fill="none" stroke="#121212" stroke-width="2" stroke-linecap="round"></path>210 </svg>211 </div>212 <div style="color:#FFFFFF;font-weight:700">GIF</div>213 <div class="quick-icon">214 <svg viewBox="0 0 24 24" width="40" height="40">215 <circle cx="12" cy="12" r="8" fill="#BDBDBD"></circle>216 <circle cx="12" cy="12" r="3" fill="#121212"></circle>217 </svg>218 </div>219 <div class="quick-icon">220 <svg viewBox="0 0 24 24" width="40" height="40">221 <rect x="4" y="4" width="16" height="16" rx="2" fill="#BDBDBD"></rect>222 <text x="8" y="16" font-size="8" fill="#121212" font-family="Arial">G</text>223 </svg>224 </div>225 <div class="quick-icon">226 <svg viewBox="0 0 24 24" width="40" height="40">227 <circle cx="12" cy="12" r="9" fill="#BDBDBD"></circle>228 <circle cx="8" cy="10" r="2" fill="#121212"></circle>229 <circle cx="14.5" cy="13.5" r="1.4" fill="#121212"></circle>230 <circle cx="12" cy="8.5" r="1" fill="#121212"></circle>231 </svg>232 </div>233 <div style="margin-left:auto" class="quick-icon">234 <svg viewBox="0 0 24 24" width="40" height="40">235 <path d="M12 4a4 4 0 014 4v6a4 4 0 01-8 0V8a4 4 0 014-4z" fill="#BDBDBD"></path>236 <rect x="11" y="18" width="2" height="4" fill="#BDBDBD"></rect>237 </svg>238 </div>239 </div>240 <div class="kb-rows">241 <div class="kb-row">242 <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>243 <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-row">246 <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>247 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>248 </div>249 <div class="kb-row">250 <div class="key wide">⇧</div>251 <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>252 <div class="key">n</div><div class="key">m</div>253 <div class="key wide icon">254 <svg viewBox="0 0 24 24" width="36" height="36">255 <path d="M19 7l-1.5-1.5-9.5 9.5V18h3l9.5-9.5z" fill="#EDEDED"></path>256 </svg>257 </div>258 </div>259 <div class="kb-row">260 <div class="key wide">?123</div>261 <div class="key wide">,</div>262 <div class="key wide icon">263 <svg viewBox="0 0 24 24" width="36" height="36">264 <circle cx="12" cy="12" r="9" fill="#EDEDED"></circle>265 <circle cx="9" cy="10" r="1.5" fill="#2A2A2A"></circle>266 <circle cx="15" cy="10" r="1.5" fill="#2A2A2A"></circle>267 </svg>268 </div>269 <div class="key space"></div>270 <div class="key">.</div>271 <div class="key round">272 <svg viewBox="0 0 24 24" width="46" height="46">273 <circle cx="10" cy="10" r="6" fill="none" stroke="#0F1E42" stroke-width="2"></circle>274 <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#0F1E42" stroke-width="2" stroke-linecap="round"></line>275 </svg>276 </div>277 </div>278 </div>279 </div>280 281 <div class="bottom-home"></div>282</div>283</body>284</html>