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>Mobile UI - Bottom Sheet With Keyboard</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: #000000;13 color: #EDEDED;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";15 }16 17 /* Status bar */18 .status-bar {19 position: absolute; left: 0; top: 0; right: 0;20 height: 110px;21 background: #0A0A0A;22 display: flex; align-items: center; justify-content: space-between;23 padding: 0 32px;24 box-sizing: border-box;25 }26 .status-time { font-size: 40px; font-weight: 600; letter-spacing: .5px; }27 .status-icons { display: flex; align-items: center; gap: 26px; }28 .dot { width: 10px; height: 10px; background: #EDEDED; border-radius: 50%; opacity: .9; }29 .icon {30 width: 42px; height: 42px; fill: none; stroke: #EDEDED; stroke-width: 3; opacity: .9;31 }32 33 /* Top app toolbar */34 .toolbar {35 position: absolute; top: 110px; left: 0; right: 0;36 height: 120px; background: #0D0D0D;37 display: flex; align-items: center; justify-content: space-between;38 padding: 0 36px; box-sizing: border-box;39 }40 .toolbar .left, .toolbar .right {41 display: flex; align-items: center; gap: 34px;42 }43 .tool {44 width: 56px; height: 56px;45 }46 .tool path, .tool circle, .tool rect { stroke: #CFCFCF; stroke-width: 3; fill: none; }47 48 /* Content area behind sheet */49 .content {50 position: absolute; top: 230px; left: 0; right: 0; bottom: 0;51 background: #111;52 }53 .preview-wrap {54 position: absolute; left: 50%; top: 540px; transform: translateX(-50%);55 width: 820px; height: 520px;56 background: rgba(0,0,0,.2);57 display: flex; align-items: center; justify-content: center;58 }59 .img-ph {60 width: 700px; height: 400px;61 background: #E0E0E0; border: 1px solid #BDBDBD;62 display: flex; align-items: center; justify-content: center;63 color: #757575; font-size: 36px;64 }65 .scrim {66 position: absolute; inset: 0; background: rgba(0,0,0,.55);67 }68 69 /* Bottom sheet */70 .sheet {71 position: absolute; left: 0; right: 0;72 bottom: 880px; /* sits above keyboard */73 height: 640px; background: #121212;74 border-top-left-radius: 28px; border-top-right-radius: 28px;75 box-shadow: 0 -10px 24px rgba(0,0,0,.6);76 padding: 34px 36px 32px;77 box-sizing: border-box;78 }79 .sheet .handle {80 width: 120px; height: 8px; background: #2A2A2A; border-radius: 4px; margin: 8px auto 26px;81 }82 .label {83 color: #8E86FF; font-size: 28px; margin: 6px 8px 14px;84 }85 .input {86 height: 110px; border-radius: 18px;87 border: 2px solid #6B63FF;88 display: flex; align-items: center;89 padding: 0 28px; box-sizing: border-box;90 font-size: 48px; color: #FFFFFF; background: #0F0F10;91 }92 93 .menu {94 margin-top: 36px; display: flex; flex-direction: column; gap: 26px;95 }96 .menu-item {97 display: flex; align-items: center; gap: 26px;98 padding: 10px 6px; color: #EDEDED; font-size: 44px;99 }100 .menu-icon {101 width: 62px; height: 62px; border-radius: 16px; background: #1E1E1E;102 display: flex; align-items: center; justify-content: center;103 }104 .menu-icon svg { width: 36px; height: 36px; stroke: #DADADA; stroke-width: 2.6; fill: none; }105 106 /* Keyboard */107 .keyboard {108 position: absolute; left: 0; right: 0; bottom: 0;109 height: 880px; background: #0F1A14; border-top-left-radius: 22px; border-top-right-radius: 22px;110 box-shadow: 0 -8px 22px rgba(0,0,0,.6);111 display: flex; flex-direction: column;112 }113 .suggest {114 height: 98px; display: flex; align-items: center; gap: 36px;115 padding: 0 26px; color: #CFE0D4; background: #15221A; font-size: 40px;116 border-top-left-radius: 22px; border-top-right-radius: 22px;117 }118 .suggest .pill {119 padding: 10px 22px; background: #203128; border-radius: 20px; border: 1px solid #2B4436;120 }121 .keys {122 flex: 1; display: grid; grid-template-rows: repeat(4, 1fr);123 padding: 14px 18px 24px; box-sizing: border-box; gap: 14px;124 }125 .row { display: flex; gap: 12px; justify-content: center; }126 .key {127 height: 120px; min-width: 88px;128 background: #22342B; color: #D3E0D8;129 border-radius: 16px; border: 1px solid #2F4A3A;130 display: flex; align-items: center; justify-content: center;131 font-size: 44px; font-weight: 600;132 box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);133 }134 .key.wide { min-width: 130px; }135 .key.space { flex: 1; min-width: 320px; }136 .key.back { min-width: 150px; }137 .key.enter {138 min-width: 140px; background: #39E16E; color: #00210E; border-color: #39E16E; font-weight: 800;139 }140 .left-pill {141 background: #6AA784; color: #0E1A13; font-weight: 800; border-color: #6AA784;142 }143 .gesture {144 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);145 width: 260px; height: 10px; background: #EDEDED; border-radius: 6px; opacity: .9;146 }147</style>148</head>149<body>150<div id="render-target">151 152 <!-- Status bar -->153 <div class="status-bar">154 <div class="status-time">7:15</div>155 <div class="status-icons">156 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>157 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="7"></circle><path d="M12 8v4l3 2"></path></svg>158 <div class="dot" style="opacity:.6"></div>159 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 18h14M7 18V9l5-3 5 3v9"></path></svg>160 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 18h12a2 2 0 0 0 2-2V9H4v7a2 2 0 0 0 2 2z"></path><path d="M16 9V6H8v3"></path></svg>161 </div>162 </div>163 164 <!-- Top toolbar with editor controls -->165 <div class="toolbar">166 <div class="left">167 <svg class="tool" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6"></path></svg>168 <svg class="tool" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8" stroke-dasharray="2 3"></circle><path d="M10 8l6 4-6 4z" fill="#CFCFCF" stroke="none"></path></svg>169 <svg class="tool" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 15l8-5 8 5"></path><path d="M4 11l8-5 8 5"></path></svg>170 <svg class="tool" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 7l-5 5 5 5"></path><path d="M10 12h10"></path></svg>171 </div>172 <div class="right">173 <svg class="tool" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="5" r="1.5" fill="#CFCFCF" stroke="none"></circle><circle cx="12" cy="12" r="1.5" fill="#CFCFCF" stroke="none"></circle><circle cx="12" cy="19" r="1.5" fill="#CFCFCF" stroke="none"></circle></svg>174 <svg class="tool" viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="9" width="12" height="8" rx="1"></rect><path d="M9 9V6h6v3"></path></svg>175 <svg class="tool" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12v7h16v-7"></path><path d="M12 5v10"></path><path d="M8 9l4-4 4 4"></path></svg>176 </div>177 </div>178 179 <!-- Main content with scrim -->180 <div class="content">181 <div class="preview-wrap">182 <div class="img-ph">[IMG: Project preview]</div>183 </div>184 <div class="scrim"></div>185 </div>186 187 <!-- Bottom sheet -->188 <div class="sheet">189 <div class="handle"></div>190 <div class="label">Project name</div>191 <div class="input">yoga session</div>192 193 <div class="menu">194 <div class="menu-item">195 <div class="menu-icon">196 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 7h14v12H5z"></path><path d="M9 7V5h6v2"></path></svg>197 </div>198 <div>Save</div>199 </div>200 <div class="menu-item">201 <div class="menu-icon">202 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 7h14"></path><path d="M5 12h14"></path><path d="M5 17h10"></path></svg>203 </div>204 <div>Version history</div>205 </div>206 <div class="menu-item">207 <div class="menu-icon">208 <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="5" width="6" height="6"></rect><rect x="13" y="5" width="6" height="6"></rect><rect x="5" y="13" width="6" height="6"></rect></svg>209 </div>210 <div>Change template</div>211 </div>212 </div>213 </div>214 215 <!-- Keyboard -->216 <div class="keyboard">217 <div class="suggest">218 <div class="pill">session</div>219 <div class="pill">sessions</div>220 <div class="pill">sessional</div>221 </div>222 <div class="keys">223 <div class="row">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="row" style="padding: 0 40px;">227 <div class="key wide">a</div><div class="key wide">s</div><div class="key wide">d</div><div class="key wide">f</div><div class="key wide">g</div><div class="key wide">h</div><div class="key wide">j</div><div class="key wide">k</div><div class="key wide">l</div>228 </div>229 <div class="row">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 class="key back">⌫</div>232 </div>233 <div class="row">234 <div class="key wide left-pill">?123</div>235 <div class="key">😊</div>236 <div class="key">,</div>237 <div class="key space">space</div>238 <div class="key">.</div>239 <div class="key enter">✓</div>240 </div>241 </div>242 <div class="gesture"></div>243 </div>244 245</div>246</body>247</html>