GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Share UI - HTML Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #E8F1F1;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 padding: 0 36px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #ffffff;28 font-size: 44px;29 }30 .status-left { display: flex; align-items: center; gap: 20px; }31 .status-right { display: flex; align-items: center; gap: 28px; }32 .icon-svg { display: inline-flex; align-items: center; justify-content: center; }33 34 /* Title bar */35 .title-bar {36 position: absolute;37 top: 120px;38 left: 0;39 width: 1080px;40 height: 150px;41 display: flex;42 align-items: center;43 padding: 0 36px;44 border-bottom: 1px solid #263238;45 }46 .title-left, .title-right { display: flex; align-items: center; }47 .title-left { gap: 28px; }48 .title-right { margin-left: auto; gap: 36px; }49 .title-text { font-size: 64px; font-weight: 600; }50 51 /* Content area */52 .content {53 position: absolute;54 top: 270px;55 left: 0;56 width: 1080px;57 height: 1060px;58 padding: 0 36px;59 }60 .row {61 height: 120px;62 display: flex;63 align-items: center;64 gap: 28px;65 font-size: 42px;66 color: #DDE9EA;67 }68 .divider { height: 1px; background: #263238; margin: 0 -36px; }69 .person-icon {70 width: 70px; height: 70px; border-radius: 50%;71 background: #1E2A2A; border: 1px solid #2F3A3B;72 display: inline-flex; align-items: center; justify-content: center;73 }74 .email-text { font-size: 44px; }75 .label { font-size: 44px; }76 .dropdown-caret { margin-left: auto; }77 .checkbox {78 width: 64px; height: 64px; border-radius: 10px; background: #7BE3B6;79 display: inline-flex; align-items: center; justify-content: center;80 margin-left: 8px;81 }82 .message-box {83 height: 700px;84 margin-top: 12px;85 border-top: 1px solid #263238;86 padding-top: 40px;87 color: #A8B7B9;88 font-size: 44px;89 }90 91 /* Keyboard */92 .keyboard {93 position: absolute;94 bottom: 40px;95 left: 0;96 width: 1080px;97 height: 1040px;98 background: #0F1616;99 border-top: 1px solid #1F2B2C;100 padding: 28px 28px 100px 28px;101 box-sizing: border-box;102 }103 .kb-top {104 display: flex; align-items: center; gap: 40px; padding: 14px 0 24px 0;105 }106 .kb-mini {107 width: 80px; height: 80px; border-radius: 20px;108 background: #1E2627; border: 1px solid #314041;109 color: #B9C6C8; font-size: 26px; display: flex; align-items: center; justify-content: center;110 }111 .kb-top .mic {112 margin-left: auto;113 width: 100px; height: 100px; border-radius: 50%;114 background: #1E2627; border: 1px solid #314041;115 display: flex; align-items: center; justify-content: center;116 }117 118 .kb-row { display: flex; justify-content: space-between; margin-top: 22px; }119 .kb-key {120 width: 92px; height: 120px; border-radius: 22px;121 background: #21292A; border: 1px solid #2E3A3B;122 color: #E3ECEC; font-size: 48px;123 display: flex; align-items: center; justify-content: center;124 }125 .kb-key.wide { width: 210px; }126 .kb-key.space { flex: 1; margin: 0 16px; }127 .kb-key.back { width: 160px; }128 .kb-confirm {129 width: 140px; height: 140px; border-radius: 36px; background: #9AF2C9;130 display: flex; align-items: center; justify-content: center; color: #0E1A1A; font-size: 52px; font-weight: bold;131 position: absolute; right: 28px; bottom: 140px;132 }133 134 /* Gesture bar */135 .gesture {136 position: absolute; bottom: 16px; left: 50%;137 transform: translateX(-50%);138 width: 540px; height: 12px; border-radius: 8px;139 background: #2A3334;140 }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status Bar -->147 <div class="status-bar">148 <div class="status-left">149 <div class="time">11:05</div>150 <div class="icon-svg" style="width:54px;height:34px;">151 <svg width="54" height="34" viewBox="0 0 54 34">152 <path d="M12 22c-6 0-10-4-10-9 0-6 5-11 11-11 5 0 9 3 10 7 1-1 3-2 6-2 6 0 12 5 12 11 0 4-3 7-8 7H12z" fill="#ffffff"/>153 </svg>154 </div>155 </div>156 <div class="status-right">157 <div class="icon-svg" style="width:44px;height:44px;">158 <!-- simple wifi icon -->159 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">160 <path d="M4 15c8-8 28-8 36 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>161 <path d="M9 21c6-6 20-6 26 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>162 <path d="M15 27c4-4 10-4 14 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>163 <circle cx="22" cy="32" r="3" fill="#fff"/>164 </svg>165 </div>166 <div class="icon-svg" style="display:flex; align-items:center; gap:8px;">167 <!-- battery with head -->168 <svg width="64" height="34" viewBox="0 0 64 34">169 <rect x="2" y="6" width="54" height="22" rx="4" stroke="#fff" stroke-width="3" fill="none"/>170 <rect x="58" y="12" width="6" height="10" rx="2" fill="#fff"/>171 <rect x="6" y="9" width="46" height="16" rx="3" fill="#fff"/>172 </svg>173 </div>174 <div style="font-size:40px;">100%</div>175 </div>176 </div>177 178 <!-- Title Bar -->179 <div class="title-bar">180 <div class="title-left">181 <div class="icon-svg" style="width:56px;height:56px;">182 <!-- X icon -->183 <svg width="56" height="56" viewBox="0 0 56 56">184 <path d="M12 12 L44 44 M44 12 L12 44" stroke="#E8F1F1" stroke-width="5" stroke-linecap="round"/>185 </svg>186 </div>187 <div class="title-text">Share</div>188 </div>189 <div class="title-right">190 <div class="icon-svg" style="width:60px;height:60px;">191 <!-- Paper plane -->192 <svg width="60" height="60" viewBox="0 0 60 60">193 <path d="M6 30 L54 10 L38 52 L30 34 L6 30 Z" fill="#E8F1F1"/>194 </svg>195 </div>196 <div class="icon-svg" style="width:48px;height:48px;">197 <!-- vertical dots -->198 <svg width="48" height="48" viewBox="0 0 48 48">199 <circle cx="24" cy="10" r="5" fill="#E8F1F1"/>200 <circle cx="24" cy="24" r="5" fill="#E8F1F1"/>201 <circle cx="24" cy="38" r="5" fill="#E8F1F1"/>202 </svg>203 </div>204 </div>205 </div>206 207 <!-- Content -->208 <div class="content">209 <div class="row">210 <div class="person-icon">211 <svg width="48" height="48" viewBox="0 0 48 48">212 <circle cx="24" cy="16" r="10" fill="#7BE3B6"/>213 <rect x="8" y="30" width="32" height="14" rx="7" fill="#7BE3B6"/>214 </svg>215 </div>216 <div class="email-text">clarawagner98b@gmail.com</div>217 </div>218 <div class="divider"></div>219 220 <div class="row">221 <div class="label">Editor</div>222 <div class="dropdown-caret">223 <svg width="48" height="48" viewBox="0 0 48 48">224 <path d="M10 18 L24 32 L38 18" stroke="#E8F1F1" stroke-width="6" stroke-linecap="round" fill="none"/>225 </svg>226 </div>227 </div>228 <div class="divider"></div>229 230 <div class="row">231 <div class="checkbox">232 <svg width="44" height="44" viewBox="0 0 44 44">233 <path d="M10 24 L18 32 L34 14" stroke="#0E1A1A" stroke-width="6" stroke-linecap="round" fill="none"/>234 </svg>235 </div>236 <div class="label">Notify people</div>237 </div>238 <div class="divider"></div>239 240 <div class="message-box">241 <div class="placeholder">Add a message</div>242 </div>243 </div>244 245 <!-- Keyboard -->246 <div class="keyboard">247 <div class="kb-top">248 <div class="kb-mini">⌘</div>249 <div class="kb-mini">🙂</div>250 <div class="kb-mini">GIF</div>251 <div class="kb-mini">⚙️</div>252 <div class="kb-mini">G⇄</div>253 <div class="kb-mini">🎨</div>254 <div class="mic">255 <svg width="52" height="52" viewBox="0 0 52 52">256 <rect x="20" y="12" width="12" height="20" rx="6" fill="#9AF2C9"/>257 <path d="M26 34 C18 34 16 30 16 26 M36 26 C36 30 34 34 26 34" stroke="#9AF2C9" stroke-width="4" fill="none"/>258 <path d="M26 34 V40 M18 40 H34" stroke="#9AF2C9" stroke-width="4"/>259 </svg>260 </div>261 </div>262 263 <div class="kb-row">264 <div class="kb-key">q</div><div class="kb-key">w</div><div class="kb-key">e</div><div class="kb-key">r</div><div class="kb-key">t</div>265 <div class="kb-key">y</div><div class="kb-key">u</div><div class="kb-key">i</div><div class="kb-key">o</div><div class="kb-key">p</div>266 </div>267 <div class="kb-row">268 <div class="kb-key">a</div><div class="kb-key">s</div><div class="kb-key">d</div><div class="kb-key">f</div><div class="kb-key">g</div>269 <div class="kb-key">h</div><div class="kb-key">j</div><div class="kb-key">k</div><div class="kb-key">l</div>270 </div>271 <div class="kb-row">272 <div class="kb-key">z</div><div class="kb-key">x</div><div class="kb-key">c</div><div class="kb-key">v</div><div class="kb-key">b</div>273 <div class="kb-key">n</div><div class="kb-key">m</div>274 <div class="kb-key back">275 <svg width="80" height="80" viewBox="0 0 80 80">276 <path d="M20 40 L36 24 L36 32 L60 32 L60 48 L36 48 L36 56 Z" fill="#E3ECEC"/>277 </svg>278 </div>279 </div>280 <div class="kb-row" style="align-items:center;">281 <div class="kb-key wide" style="background:#78E6B8; color:#0E1A1A; font-weight:bold;">?123</div>282 <div class="kb-key">,</div>283 <div class="kb-key">🙂</div>284 <div class="kb-key space"></div>285 <div class="kb-key">.</div>286 </div>287 288 <div class="kb-confirm">289 <svg width="80" height="80" viewBox="0 0 80 80">290 <path d="M18 42 L34 58 L62 26" stroke="#0E1A1A" stroke-width="10" fill="none" stroke-linecap="round"/>291 </svg>292 </div>293 </div>294 295 <div class="gesture"></div>296</div>297</body>298</html>