GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Project Name Modal with Keyboard</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f7f7f7;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    background: rgba(0,0,0,0.03);24    display: flex;25    align-items: center;26    padding: 0 28px;27    box-sizing: border-box;28  }29  .status-time { font-size: 36px; color: #2d2d2d; margin-right: 24px; }30  .status-dots { display: flex; gap: 16px; margin-right: auto; }31  .dot { width: 18px; height: 18px; background:#2d2d2d; border-radius: 50%; opacity: .85; }32  .status-right { margin-left: auto; display:flex; align-items:center; gap:28px; color:#2d2d2d; }33  .battery {34    width: 42px; height: 22px; border:2px solid #2d2d2d; border-radius:4px; position: relative;35  }36  .battery::after {37    content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#2d2d2d; border-radius:2px;38  }39  .battery .lvl { width:28px; height:100%; background:#2d2d2d; }40 41  /* App bar icons */42  .app-bar {43    position: absolute;44    top: 120px;45    left: 0;46    width: 1080px;47    height: 120px;48    display: flex;49    align-items: center;50    padding: 0 36px;51    box-sizing: border-box;52    gap: 34px;53  }54  .icon {55    width: 66px; height: 66px;56    display: inline-flex; align-items: center; justify-content: center;57    color:#262626;58  }59  .icon svg { width: 52px; height: 52px; }60 61  /* Background content preview */62  .preview-wrap {63    position: absolute;64    top: 380px;65    left: 0;66    right: 0;67    height: 620px;68    background: #111;69    display: flex; align-items: center; justify-content: center;70  }71  .preview-inner {72    width: 920px; height: 520px;73    background: #E0E0E0;74    border: 1px solid #BDBDBD;75    color: #565656;76    display:flex; align-items:center; justify-content:center;77    font-size: 34px;78  }79 80  /* Dim overlay behind modal */81  .dim {82    position: absolute; left:0; top:0; width:100%; height:100%;83    background: rgba(0,0,0,0.45);84  }85 86  /* Modal */87  .modal {88    position: absolute;89    left: 24px;90    right: 24px;91    top: 700px;92    background: #ffffff;93    border-radius: 28px;94    box-shadow: 0 24px 60px rgba(0,0,0,0.35);95    padding: 40px 44px 36px 44px;96    box-sizing: border-box;97    z-index: 2;98  }99  .modal .label {100    font-size: 30px;101    color:#6b6b6b;102    margin-bottom: 20px;103  }104  .textfield {105    border: 3px solid #6C63FF;106    border-radius: 22px;107    height: 120px;108    display: flex;109    align-items: center;110    padding: 0 28px;111    box-sizing: border-box;112    font-size: 44px;113    color:#202124;114  }115  .actions {116    margin-top: 40px;117    display: flex;118    flex-direction: column;119    gap: 34px;120  }121  .action {122    display:flex; align-items:center; gap:26px;123    font-size: 40px; color:#1f1f1f;124  }125  .a-ico {126    width: 60px; height: 60px; border-radius: 14px;127    background:#f0f0f6; display:flex; align-items:center; justify-content:center; color:#6C63FF;128    border:1px solid #e0e0f0;129  }130 131  /* Keyboard */132  .keyboard {133    position: absolute;134    left: 0;135    bottom: 0;136    width: 1080px;137    height: 840px;138    background: #F4F0F6;139    border-top-left-radius: 28px;140    border-top-right-radius: 28px;141    box-shadow: 0 -10px 30px rgba(0,0,0,0.15);142    z-index: 3;143    padding: 26px 28px;144    box-sizing: border-box;145  }146  .kbd-tools {147    display:flex; align-items:center; gap:34px; margin-bottom: 26px;148  }149  .tool {150    width: 86px; height: 86px; border-radius: 24px;151    background: #ebe6ef; display:flex; align-items:center; justify-content:center;152    color:#6b6b6b; font-size: 28px; border:1px solid #ded6e6;153  }154  .keys { display:flex; flex-direction:column; gap:18px; }155  .row { display:flex; gap:18px; justify-content:center; }156  .key {157    width: 86px; height: 110px; background:#ffffff; border:1px solid #E3DDEB;158    border-radius: 26px; display:flex; align-items:center; justify-content:center;159    font-size: 38px; color:#333;160  }161  .key.wide { width: 140px; }162  .key.xwide { width: 220px; }163  .key.space { width: 520px; }164  .bottom-bar {165    display:flex; gap:18px; justify-content: center; margin-top: 16px;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="status-bar">174    <div class="status-time">6:16</div>175    <div class="status-dots">176      <div class="dot"></div>177      <div class="dot" style="opacity:.55"></div>178      <div class="dot" style="opacity:.55"></div>179      <div class="dot" style="opacity:.55"></div>180    </div>181    <div class="status-right">182      <!-- wifi -->183      <svg width="46" height="34" viewBox="0 0 24 24">184        <path d="M12 20l2-2-2-2-2 2 2 2zm-6-6l2-2 4 4 4-4 2 2-6 6-6-6zm-4-6l2-2 8 8 8-8 2 2-10 10L2 8z" fill="#2d2d2d"/>185      </svg>186      <div class="battery"><div class="lvl"></div></div>187    </div>188  </div>189 190  <!-- App bar icons -->191  <div class="app-bar">192    <div class="icon">193      <svg viewBox="0 0 24 24"><path fill="#222" d="M20 11H7.8l5-5L12 4 4 12l8 8 1-2-5-5H20z"/></svg>194    </div>195    <div class="icon">196      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#222" stroke-width="2" fill="none"/><path d="M10 8l6 4-6 4z" fill="#222"/></svg>197    </div>198    <div class="icon">199      <svg viewBox="0 0 24 24"><path fill="#222" d="M3 6h8v5H3V6zm10 0h8v12h-8V6zM3 13h8v5H3v-5z"/></svg>200    </div>201    <div class="icon">202      <svg viewBox="0 0 24 24"><path fill="#222" d="M12 5v3l-4-4 4-4v3c5 0 9 4 9 9a9 9 0 0 1-9 9h-1v-2h1a7 7 0 0 0 0-14z"/></svg>203    </div>204 205    <div style="margin-left:auto"></div>206 207    <div class="icon">208      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#222"/><circle cx="12" cy="12" r="2" fill="#222"/><circle cx="12" cy="19" r="2" fill="#222"/></svg>209    </div>210    <div class="icon">211      <svg viewBox="0 0 24 24"><path fill="#222" d="M5 20h14v-2H5v2zm3-4h8V4H8v12zm1-11h6v10H9V5z"/></svg>212    </div>213    <div class="icon">214      <svg viewBox="0 0 24 24"><path fill="#222" d="M18 8l-6-6-6 6h4v8h4V8h4zm-14 9h16v3H4v-3z"/></svg>215    </div>216  </div>217 218  <!-- Background preview area -->219  <div class="preview-wrap">220    <div class="preview-inner">[IMG: Video/Slide Preview]</div>221  </div>222 223  <!-- Dim overlay -->224  <div class="dim"></div>225 226  <!-- Modal content -->227  <div class="modal">228    <div class="label">Project name</div>229    <div class="textfield">Presentation· Business Goal</div>230 231    <div class="actions">232      <div class="action">233        <div class="a-ico">234          <svg viewBox="0 0 24 24">235            <path fill="#6C63FF" d="M17 3H7a2 2 0 0 0-2 2v14l7-3 7 3V5a2 2 0 0 0-2-2z"/>236          </svg>237        </div>238        <div>Save</div>239      </div>240      <div class="action">241        <div class="a-ico">242          <svg viewBox="0 0 24 24">243            <path fill="#6C63FF" d="M12 8v5l4 2-.7 1.4L11 14V8h1zm0-6a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2z"/>244          </svg>245        </div>246        <div>Version history</div>247      </div>248    </div>249  </div>250 251  <!-- On-screen keyboard -->252  <div class="keyboard">253    <div class="kbd-tools">254      <div class="tool">◧</div>255      <div class="tool">☺</div>256      <div class="tool">GIF</div>257      <div class="tool">⚙</div>258      <div class="tool">Gᵗ</div>259      <div class="tool">🎨</div>260      <div class="tool">🎙</div>261    </div>262 263    <div class="keys">264      <div class="row">265        <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>266      </div>267      <div class="row">268        <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>269      </div>270      <div class="row">271        <div class="key wide">↹</div>272        <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>273        <div class="key wide">⌫</div>274      </div>275      <div class="bottom-bar">276        <div class="key wide">?123</div>277        <div class="key wide">,</div>278        <div class="key space"></div>279        <div class="key wide">.</div>280        <div class="key xwide" style="background:#C9C3F5; color:#fff;">✓</div>281      </div>282    </div>283  </div>284 285</div>286</body>287</html>