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; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #2a1b17; /* deep brown */13 font-family: Roboto, Arial, sans-serif;14 color: #e9dbd6;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute; top: 0; left: 0; width: 100%; height: 96px;20 padding: 24px 32px;21 box-sizing: border-box;22 color: #f5ece9;23 font-size: 36px; line-height: 48px; font-weight: 500;24 }25 .status-bar .time { position: absolute; left: 32px; top: 24px; }26 .status-icons { position: absolute; right: 28px; top: 18px; display: flex; align-items: center; gap: 26px; }27 .status-icons span { font-size: 32px; }28 .icon { width: 40px; height: 40px; }29 30 /* Top overlay sheet */31 .top-sheet {32 position: absolute; left: 0; top: 72px; width: 1080px; height: 520px;33 background: #4a352f; border-bottom-left-radius: 78px; border-bottom-right-radius: 78px;34 }35 .top-sheet .close {36 position: absolute; left: 44px; top: 132px; width: 72px; height: 72px;37 }38 .top-sheet .save {39 position: absolute; right: 40px; top: 136px; font-size: 44px; color: #ceb7b0;40 }41 .title-input {42 position: absolute; left: 72px; top: 220px; width: 936px;43 font-size: 116px; background: transparent; border: none; outline: none;44 color: #ceb7b0; caret-color: #f3a58f; font-weight: 400;45 }46 .title-input::placeholder { color: #ceb7b0; opacity: 0.95; }47 48 /* Main content (dark area) */49 .content {50 position: absolute; left: 0; right: 0; top: 592px; bottom: 1080px;51 }52 .center-line {53 position: absolute; left: 540px; top: 40px; width: 3px; height: 880px;54 background: #3b2722; border-radius: 2px;55 }56 .dotted {57 position: absolute; left: 240px; bottom: 60px; width: 600px; height: 10px;58 background-image: radial-gradient(#3b2722 2px, transparent 2px);59 background-size: 24px 10px; background-repeat: repeat-x;60 }61 .dotted::before {62 content: ""; position: absolute; left: 50%; top: -6px; width: 60px; height: 10px;63 border-radius: 6px; background: #3b2722;64 }65 66 /* Keyboard */67 .keyboard {68 position: absolute; left: 0; bottom: 108px; width: 100%; height: 980px;69 background: #fde6de; border-top-left-radius: 40px; border-top-right-radius: 40px;70 box-sizing: border-box; padding: 28px 28px 36px;71 color: #3b2a25;72 }73 .kb-top {74 height: 120px; display: flex; align-items: center; gap: 40px;75 padding: 0 8px; color: #3b2a25;76 }77 .kb-top .tool {78 width: 84px; height: 84px; border-radius: 22px; background: #ffe2d6;79 display: flex; align-items: center; justify-content: center; border: 1px solid #ffd2c3;80 font-size: 28px;81 }82 83 .kb-rows { margin-top: 6px; }84 .kb-row { display: flex; justify-content: center; gap: 16px; margin: 20px 0; }85 .key {86 width: 84px; height: 120px; border-radius: 22px; background: #ffffff;87 display: flex; align-items: center; justify-content: center;88 font-size: 48px; font-weight: 500; border: 1px solid #f1d0c6;89 color: #3b2a25;90 }91 .key.peach { background: #ffd6c8; }92 .key.wide { width: 620px; }93 .key.mid { width: 104px; }94 .key.tall { height: 140px; }95 .key.circle { width: 140px; height: 140px; border-radius: 40px; }96 .label { font-size: 34px; font-weight: 600; }97 98 /* Bottom gesture bar */99 .gesture {100 position: absolute; left: 50%; transform: translateX(-50%);101 bottom: 36px; width: 224px; height: 12px; background: #776a65; border-radius: 8px;102 opacity: 0.7;103 }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Status bar -->110 <div class="status-bar">111 <div class="time">2:39</div>112 <div class="status-icons">113 <!-- Do Not Disturb -->114 <svg class="icon" viewBox="0 0 24 24">115 <circle cx="12" cy="12" r="10" fill="none" stroke="#f5ece9" stroke-width="2"/>116 <rect x="6" y="11" width="12" height="2" fill="#f5ece9"/>117 </svg>118 <!-- Wi-Fi -->119 <svg class="icon" viewBox="0 0 24 24">120 <path d="M2 8c5-4 15-4 20 0" stroke="#f5ece9" stroke-width="2" fill="none" stroke-linecap="round"/>121 <path d="M5 12c4-3 10-3 14 0" stroke="#f5ece9" stroke-width="2" fill="none" stroke-linecap="round"/>122 <path d="M9 16c2-2 4-2 6 0" stroke="#f5ece9" stroke-width="2" fill="none" stroke-linecap="round"/>123 <circle cx="12" cy="19" r="1.8" fill="#f5ece9"/>124 </svg>125 <!-- Battery 100% -->126 <svg class="icon" viewBox="0 0 28 24">127 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#f5ece9" stroke-width="2"/>128 <rect x="4" y="8" width="16" height="8" fill="#f5ece9"/>129 <rect x="22.5" y="9" width="3" height="6" rx="1" fill="#f5ece9"/>130 </svg>131 <span>100%</span>132 </div>133 </div>134 135 <!-- Top overlay sheet -->136 <div class="top-sheet">137 <div class="close">138 <svg viewBox="0 0 24 24">139 <path d="M4 4 L20 20 M20 4 L4 20" stroke="#e8d6d2" stroke-width="3" stroke-linecap="round" fill="none"/>140 </svg>141 </div>142 <div class="save">Save</div>143 <input class="title-input" placeholder="Add title">144 </div>145 146 <!-- Dark content area details -->147 <div class="content">148 <div class="center-line"></div>149 <div class="dotted"></div>150 </div>151 152 <!-- Keyboard -->153 <div class="keyboard">154 <div class="kb-top">155 <div class="tool">156 <!-- grid icon -->157 <svg viewBox="0 0 24 24" class="icon">158 <path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" fill="#3b2a25"/>159 </svg>160 </div>161 <div class="tool">162 <!-- emoji -->163 <svg viewBox="0 0 24 24" class="icon">164 <circle cx="12" cy="12" r="9" fill="none" stroke="#3b2a25" stroke-width="2"/>165 <circle cx="9" cy="10" r="1.2" fill="#3b2a25"/>166 <circle cx="15" cy="10" r="1.2" fill="#3b2a25"/>167 <path d="M8 15c3 2 5 2 8 0" stroke="#3b2a25" stroke-width="2" fill="none" stroke-linecap="round"/>168 </svg>169 </div>170 <div class="tool"><span class="label">GIF</span></div>171 <div class="tool"><span class="label">Gx</span></div>172 <div class="tool">173 <!-- gear -->174 <svg viewBox="0 0 24 24" class="icon">175 <circle cx="12" cy="12" r="3" fill="none" stroke="#3b2a25" stroke-width="2"/>176 <path d="M4 12h3M17 12h3M12 4v3M12 17v3M6.5 6.5l2 2M15.5 15.5l2 2M6.5 17.5l2-2M15.5 8.5l2-2" stroke="#3b2a25" stroke-width="2" stroke-linecap="round"/>177 </svg>178 </div>179 <div class="tool">180 <!-- palette -->181 <svg viewBox="0 0 24 24" class="icon">182 <path d="M12 3c-5 0-9 3.5-9 7.5S6 21 12 21c4 0 3-3 1.5-3H12c-1.8 0-3-1.2-3-2.5 0-2 1.8-3.5 4-3.5h2" fill="none" stroke="#3b2a25" stroke-width="2"/>183 <circle cx="7" cy="10" r="1" fill="#3b2a25"/>184 <circle cx="9.5" cy="7.5" r="1" fill="#3b2a25"/>185 <circle cx="12.5" cy="7" r="1" fill="#3b2a25"/>186 <circle cx="15" cy="9" r="1" fill="#3b2a25"/>187 </svg>188 </div>189 <div class="tool">190 <!-- microphone -->191 <svg viewBox="0 0 24 24" class="icon">192 <rect x="9" y="5" width="6" height="9" rx="3" fill="none" stroke="#3b2a25" stroke-width="2"/>193 <path d="M6 11c0 4 3 6 6 6s6-2 6-6" stroke="#3b2a25" stroke-width="2" fill="none"/>194 <path d="M12 17v3M9 20h6" stroke="#3b2a25" stroke-width="2" stroke-linecap="round"/>195 </svg>196 </div>197 </div>198 199 <div class="kb-rows">200 <!-- Row 1 -->201 <div class="kb-row">202 <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>203 <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>204 </div>205 206 <!-- Row 2 -->207 <div class="kb-row" style="padding-left:68px;">208 <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>209 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>210 </div>211 212 <!-- Row 3 -->213 <div class="kb-row">214 <div class="key mid peach">215 <!-- shift arrow -->216 <svg viewBox="0 0 24 24" class="icon">217 <path d="M12 4l6 7h-4v7H10v-7H6z" fill="#3b2a25"/>218 </svg>219 </div>220 <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>221 <div class="key mid peach">222 <!-- backspace -->223 <svg viewBox="0 0 24 24" class="icon">224 <path d="M4 12l6-6h10v12H10z" fill="none" stroke="#3b2a25" stroke-width="2"/>225 <path d="M13 9l4 4M17 9l-4 4" stroke="#3b2a25" stroke-width="2" stroke-linecap="round"/>226 </svg>227 </div>228 </div>229 230 <!-- Row 4 -->231 <div class="kb-row" style="gap: 20px;">232 <div class="key circle peach"><span class="label">?123</span></div>233 <div class="key mid peach">,</div>234 <div class="key mid peach">235 <!-- smiley -->236 <svg viewBox="0 0 24 24" class="icon">237 <circle cx="12" cy="12" r="9" fill="none" stroke="#3b2a25" stroke-width="2"/>238 <circle cx="9" cy="10" r="1.2" fill="#3b2a25"/>239 <circle cx="15" cy="10" r="1.2" fill="#3b2a25"/>240 <path d="M8 15c3 2 5 2 8 0" stroke="#3b2a25" stroke-width="2" fill="none" stroke-linecap="round"/>241 </svg>242 </div>243 <div class="key wide"> </div>244 <div class="key mid peach">.</div>245 <div class="key circle" style="background:#ffb9a8; border-color:#ffb9a8;">246 <!-- check -->247 <svg viewBox="0 0 24 24" class="icon">248 <path d="M5 13l4 4L19 7" stroke="#3b2a25" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249 </svg>250 </div>251 </div>252 </div>253 </div>254 255 <!-- Gesture bar -->256 <div class="gesture"></div>257</div>258</body>259</html>