GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Calendar Edit Screen Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0; left: 0;20    width: 100%;21    height: 110px;22    background: #121212;23    display: flex;24    align-items: center;25    padding: 0 36px;26    box-sizing: border-box;27    color: #D0D0D0;28    font-size: 40px;29  }30  .status-right {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 20px;35    font-size: 34px;36  }37  .status-dot {38    width: 28px; height: 28px; border-radius: 50%; background: #CFCFCF; opacity: 0.8;39  }40  .battery {41    width: 54px; height: 28px; border: 2px solid #CFCFCF; border-radius: 6px; position: relative;42  }43  .battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #CFCFCF; border-radius: 2px; }44  .battery .level { position: absolute; left: 4px; top: 4px; width: 36px; height: 18px; background: #CFCFCF; }45 46  /* Top app bar */47  .app-bar {48    position: absolute;49    top: 110px; left: 0;50    width: 100%;51    height: 110px;52    display: flex;53    align-items: center;54    padding: 0 30px;55    box-sizing: border-box;56  }57  .icon-btn {58    width: 74px; height: 74px; border-radius: 37px;59    display: flex; align-items: center; justify-content: center;60    background: transparent; border: 2px solid #2A2A2A; color: #DADADA;61  }62  .save-pill {63    margin-left: auto;64    background: #87B9FF;65    color: #0B1E3E;66    padding: 18px 28px;67    border-radius: 38px;68    font-weight: 600;69    font-size: 38px;70  }71 72  /* Title input */73  .title {74    position: absolute;75    top: 220px; left: 60px;76    width: 960px;77    font-size: 64px;78    line-height: 1.2;79    font-weight: 600;80    color: #F2F2F2;81  }82 83  /* Section rows */84  .section {85    position: absolute;86    top: 380px; left: 0;87    width: 100%;88    padding: 20px 60px 0 60px;89    box-sizing: border-box;90  }91  .row {92    display: flex;93    align-items: center;94    justify-content: space-between;95    height: 120px;96    border-bottom: 1px solid #1F1F1F;97  }98  .row .left {99    display: flex; align-items: center; gap: 34px; color: #EAEAEA;100    font-size: 42px;101  }102  .row .right {103    color: #CFCFCF; font-size: 42px;104  }105  .toggle {106    width: 158px; height: 80px; border-radius: 40px; background: #2C2C2C; position: relative; margin-right: 18px;107  }108  .toggle::after {109    content: "";110    position: absolute; left: 8px; top: 8px;111    width: 64px; height: 64px; border-radius: 50%;112    background: #8A8A8A;113  }114 115  /* Icons */116  .ico {117    width: 52px; height: 52px;118  }119  .ico svg { width: 52px; height: 52px; fill: none; stroke: #CFCFCF; stroke-width: 4px; }120 121  /* Button */122  .pill-btn {123    display: inline-block;124    padding: 20px 28px;125    border: 2px solid #3A3A3A;126    border-radius: 20px;127    color: #BBD1FF;128    font-size: 40px;129  }130 131  .subsection-title {132    font-size: 44px; color: #EDEDED;133    display: flex; align-items: center; gap: 30px;134    height: 120px;135  }136 137  /* Keyboard */138  #keyboard {139    position: absolute;140    bottom: 0; left: 0;141    width: 100%;142    height: 900px;143    background: #1C1C1C;144    box-shadow: 0 -8px 24px rgba(0,0,0,0.5);145  }146  .kb-top {147    height: 120px; padding: 0 40px; display: flex; align-items: center; gap: 34px; color: #D7D7D7; font-size: 38px;148  }149  .kb-keyboard {150    padding: 20px 30px;151    box-sizing: border-box;152  }153  .kb-row {154    display: grid;155    grid-template-columns: repeat(10, 1fr);156    gap: 16px;157    margin-bottom: 22px;158  }159  .key {160    height: 120px;161    background: #2B2B2B;162    border-radius: 20px;163    color: #EEE;164    font-size: 44px;165    display: flex; align-items: center; justify-content: center;166  }167  .key.small { font-size: 40px; }168  .kb-row-last {169    display: grid;170    grid-template-columns: 1.2fr 1.2fr 7fr 1.2fr 1.2fr;171    gap: 16px;172  }173  .home-indicator {174    position: absolute; bottom: 20px; left: 50%;175    width: 360px; height: 10px; background: #808080; border-radius: 6px; transform: translateX(-50%);176    opacity: 0.6;177  }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="status-bar">185    <div>12:53</div>186    <div class="status-right">187      <div class="status-dot"></div>188      <div style="width:34px;height:34px;border:3px solid #CFCFCF;border-radius:50%;position:relative;">189        <div style="width:12px;height:12px;background:#CFCFCF;border-radius:50%;position:absolute;top:8px;left:8px;"></div>190      </div>191      <div class="battery"><div class="level"></div></div>192    </div>193  </div>194 195  <!-- App bar -->196  <div class="app-bar">197    <div class="icon-btn" title="Close">198      <svg width="34" height="34" viewBox="0 0 24 24">199        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#DADADA" stroke-width="2"></path>200      </svg>201    </div>202    <div class="save-pill">Save</div>203  </div>204 205  <!-- Title -->206  <div class="title">Evansville EMT Conference.</div>207 208  <!-- Main Section -->209  <div class="section">210    <!-- All-day -->211    <div class="row">212      <div class="left">213        <div class="ico">214          <svg viewBox="0 0 24 24">215            <circle cx="12" cy="12" r="9"></circle>216            <path d="M12 6 L12 12 L16 14"></path>217          </svg>218        </div>219        <div>All-day</div>220      </div>221      <div class="right">222        <div class="toggle"></div>223      </div>224    </div>225 226    <!-- Start date/time -->227    <div class="row">228      <div class="left">229        <div style="width:52px;height:52px;border:2px solid #CFCFCF;border-radius:8px;"></div>230        <div>Sat, Sep 23, 2023</div>231      </div>232      <div class="right">1:00 AM</div>233    </div>234 235    <!-- End date/time -->236    <div class="row">237      <div class="left">238        <div style="width:52px;height:52px;border:2px solid #CFCFCF;border-radius:8px;"></div>239        <div>Sat, Sep 23, 2023</div>240      </div>241      <div class="right">2:00 AM</div>242    </div>243 244    <!-- Time zone -->245    <div class="row">246      <div class="left">247        <div class="ico">248          <svg viewBox="0 0 24 24">249            <circle cx="12" cy="12" r="9"></circle>250            <path d="M3 12 H21 M12 3 V21" ></path>251            <path d="M7 7 C9 9, 15 9, 17 7" ></path>252            <path d="M7 17 C9 15, 15 15, 17 17" ></path>253          </svg>254        </div>255        <div>India Standard Time</div>256      </div>257      <div class="right"></div>258    </div>259 260    <!-- Repeat -->261    <div class="row">262      <div class="left">263        <div class="ico">264          <svg viewBox="0 0 24 24">265            <path d="M4 7 H14 L12 5 M20 17 H10 L12 19" ></path>266            <path d="M6 17 C6 12 10 12 10 12" ></path>267          </svg>268        </div>269        <div>Does not repeat</div>270      </div>271      <div class="right"></div>272    </div>273 274    <!-- Add people -->275    <div class="subsection-title" style="margin-top:10px;">276      <div class="ico">277        <svg viewBox="0 0 24 24">278          <circle cx="12" cy="8" r="4"></circle>279          <path d="M4 20 C6 15, 18 15, 20 20"></path>280        </svg>281      </div>282      <div>Add people</div>283    </div>284 285    <div style="height:20px;"></div>286    <div class="pill-btn">View schedules</div>287  </div>288 289  <!-- Keyboard -->290  <div id="keyboard">291    <div class="kb-top">292      <div class="icon-btn" style="border-color:#3A3A3A;background:#2A2A2A;width:74px;height:74px;">293        <span style="font-size:34px;color:#EAEAEA;">⌂</span>294      </div>295      <div>GIF</div>296      <div style="width:74px;height:74px;border-radius:20px;background:#2A2A2A;display:flex;align-items:center;justify-content:center;">⚙</div>297      <div style="width:74px;height:74px;border-radius:20px;background:#2A2A2A;display:flex;align-items:center;justify-content:center;">文</div>298      <div style="width:74px;height:74px;border-radius:20px;background:#2A2A2A;display:flex;align-items:center;justify-content:center;">🎨</div>299      <div style="margin-left:auto;width:74px;height:74px;border-radius:37px;background:#2A2A2A;display:flex;align-items:center;justify-content:center;">🎤</div>300    </div>301    <div class="kb-keyboard">302      <div class="kb-row">303        <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>304        <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>305      </div>306      <div class="kb-row">307        <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>308        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">;</div>309      </div>310      <div class="kb-row">311        <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>312        <div class="key">n</div><div class="key">m</div><div class="key small">,</div><div class="key small">.</div><div class="key small">⌫</div>313      </div>314      <div class="kb-row-last">315        <div class="key small">?123</div>316        <div class="key small">,</div>317        <div class="key">space</div>318        <div class="key small">.</div>319        <div class="key small">✓</div>320      </div>321    </div>322    <div class="home-indicator"></div>323  </div>324 325</div>326</body>327</html>